Build this JS calculator in 15 minutes! 🖩

Показать описание

#JavaScript #tutorial #course

IMPORTANT NOTE: eval() allows you to execute a string of code as if it were actual JavaScript code.
While it is a useful tool, it is a security risk. I would recommend using eval() ONLY for learning purposes and not any actual production code.

00:00:00 HTML
00:03:08 CSS
00:11:21 JavaScript

This is a JavaScript project program for beginners where we will build a functioning calculator. Impress your friends!

Рекомендации по теме

Комментарии

IMPORTANT NOTE: eval() allows you to execute a string of code as if it were actual JavaScript code.
While it is a useful tool, it is a security risk. I would recommend using eval() ONLY for learning purposes and not any actual production code.

// CALCULATOR PROGRAM

const display =

function appendToDisplay(input){
display.value += input;
}

function clearDisplay(){
display.value = "";
}

function calculate(){
try{
display.value = eval(display.value);
}
catch(error){
display.value = "Error";
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="calculator">
<input id="display" readonly>
<div id="keys">
<button
<button
<button
<button
<button
<button
<button
<button
<button
<button
<button
<button
<button
<button
<button
<button
<button onclick="clearDisplay()"
</div>
</div>

<script src="index.js"></script>
</body>
</html>

body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: hsl(0, 0%, 95%);
}
#calculator{
font-family: Arial, sans-serif;
background-color: hsl(0, 0%, 15%);
border-radius: 15px;
max-width: 500px;
overflow: hidden;
}
#display{
width: 100%;
padding: 20px;
font-size: 5rem;
text-align: left;
border: none;
background-color: hsl(0, 0%, 20%);
color: white;
}
#keys{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 25px;
}
button{
width: 100px;
height: 100px;
border-radius: 50px;
border: none;
background-color: hsl(0, 0%, 30%);
color: white;
font-size: 3rem;
font-weight: bold;
cursor: pointer;
}
button:hover{
background-color: hsl(0, 0%, 40%);
}
button:active{
background-color: hsl(0, 0%, 50%);
}
.operator-btn{
background-color: hsl(35, 100%, 55%);
}
.operator-btn:hover{
background-color: hsl(35, 100%, 65%);
}
.operator-btn:active{
background-color: hsl(35, 100%, 75%);
}

BroCodez

Watching something being created from scratch is pretty entertaining and educational.

alvinderama

one of the few videos on here that breaks it down simply. I already understood a bit of html and css - javascript hasn't made that much sense to me until now. Thank you!

vc

Super thankful for the awesome instructions! keep up the good work.

watchdoggie

After seeing other videos of writing the code for Calculator app, I find yours the best and easy to understand and needs less lines of code. Thank you very much for uploading this.

kohzlqd

You have the best programming channel, I learn html, css, javascript and python in your channel

doronfeldman

Your tone of the voice, the way you explain what you are doing.. it's perfect. Subbed!

fsma

I just have to say that you are amazing. I had an introduction class in java and I missed every lecture. I whatched the first 5 hours of your 12hr java course and I passed the exam. You are an amazing teacher. Better than the ones I have at univerity :)

syroxdxd

Awesome video! I love the clear explanations and the styling tips. Incorporating functional programming principles, like using pure functions, could further enhance the calculator’s logic. It would be interesting to see how this approach can make the code more concise and testable. Keep up the great work! 👍

miladevs

Few codes but precised. I'm amazed bro.

He_Roll

Wow .. FANTASTIC - thank you so much for this. Going to look for other videos like this from you. (also subscribed :)

levon

Another useful video! I am waiting for more ;)

reptilianis

Thanks for those teaching video. i love it ❤

muhammet_

Just started coding, That video helped alot. Straight to the point. I, ll have to check your other videos out before i start asking questions about eval() ans security risks. Thanks

pope

Thanks Mate. Really helped with my project.

artisticmohan

I'm a teacher and found this to be well-paced, explained in more detail where necessary without getting bogged down in stuff students can research for themselves, and fun.
Well done.

loosabway

You shouldve added a function that prevents entry of another decimal point once it has been added to the display once.
For example, once you enter 3.14, you cant add another decimal point until you enter an operator such that (3.14159.3123) wont be possible to enter in the display

petersagan

Thank you very much, I understand and it helped me a lot

jacksondidas

thank you for making daily javascript videos

karmel

sir i loved it. It helped a lot in confidence building as a beginner

xedmrfl

Build this JS calculator in 15 minutes! 🖩

Build this JS calculator in 15 minutes! 🖩

How To Make A Calculator Using HTML CSS And JavaScript

Build A Calculator With JavaScript Tutorial

How To Build A Calculator with Javascript | Make A Javascript Calculator

Build A Calculator With JavaScript Tutorial

Build a Calculator App in HTML, CSS & JavaScript 2022

Create a Responsive Calculator in HTML CSS & JavaScript

Build this JS calculator in 15 minutes ! | Calculator Using HTML CSS JavaScript

How to make Spotify Clone Using HTML,CSS | Create Spotify Clone | Mini Project for Collage Student

Creating a Calculator using HTML, CSS & JavaScript

JavaScript Calculator (Solution) | FreeCodeCamp

A Basic Calculator | Javascript | Tutorial 10

Simple Arithmetic Calculator | HTML, CSS and JavaScript

How to build a SIMPLE Javascript Calculator with just HTML, Javascript, CSS (without eval() method)

How to make a Calculator using HTML CSS JavaScript

How To Make a Calculator Using Html CSS & Javascript | HTML Calculator

JavaScript Project | Build Simple Calculator With JavaScript HTML CSS

How to build a Calculator Using HTML CSS & JavaScript

Build an iPhone Calculator using HTML CSS & JavaScript!

Build a Simple Calculator with Vanilla Javascript - Beginner Project

How to build a scientific calculator using JavaScript HTML and CSS | E-CODEC

Scientific Calculator | Build with | JavaScript

Build Calculator using HTML CSS & Javascript

How To Build Age Calculator App Using HTML CSS And JavaScript