Build a Calculator with Javascript

Javascript calculator. In this tutorial, you will learn how to create a calculator with JavaScript, HTML, and CSS. Javascript will be used to create buttons to populate into the DOM and add click handlers to these buttons. For styling, you will learn how to use the grid layout to organize the calculator buttons.

Most importantly, unlike with many other calculator javascript tutorials, we will write out all the logic to do the calculations instead of using the eval function. Eval is a function that evaluates a string as code, which poses a security risk.

Java Game Programming Projects Playlist:

JavaScript Game Programming Projects Playlist:

JavaScript Web Projects Playlist:

Subscribe for more coding tutorials 😄!

[KennyYipCoding]

const buttonValues = [
"AC", "+/-", "%", "÷",
"7", "8", "9", "×",
"4", "5", "6", "-",
"1", "2", "3", "+",
"0", ".", "="
];
const rightSymbols = ["÷", "×", "-", "+", "="];
const topSymbols = ["AC", "+/-", "%"];

[Beast-wuhu]

No joke. You have explained very greatly, respect.
There's a suggestion, my code wasn't working properly when i do "0." + "3"
It'd give a .3 answer and then add numbers like strings like .3 + 3 = .33
I just had to convert a, b, operator to empty arrays [ ] and it worked fine
Thanks :)

[ocelotta]

thank you for this clear, easy to follow tutorial! <3

[bharatdubey]

please do the same project in different languages like java, javascript, react etc. so as to understand the difference.

[jamesbrummett]

Just a clean up idea for you. When coding the functionality of the +/- button, you can just multiply the value by -1. Does the same thing without the extra coding.
else if (value === "+/-") {
if (display.value != "" && display.value != "0") {
display.value = display.value * -1;
}
}
Removes like two lines of unnecessary code and cleans it up a bit.

[inoccentplays]

just a question, why are you designing it using javascript, can't you just do it in css? I'm new and not familiar with this. thanks

[BlazeShomida]

This is nice. I made a version I made using the shunting yard algorithm to handle order of operations. It’s a fairly simple algorithm to evaluate expressions. I think YouTube blocks links but if you wanna view the source/demo I don’t mind sending it to you to checkout