Create a simple calculator using HTML, CSS, JavaScript

Let's create a cool calculator with HTML, CSS, JavaScript. This project is aimed to help beginners, who just started their javascript / frontend developer journey.
Please leave feedback in the comments, so I can improve my content to help you guys out more.
Starting project: github.com/jav...
Final project: github.com/jav...
Where you can find me?
🔗 Links:
* 🍺 Support free education and buy me a beer: ko-fi.com/adam...
* 💬 Discord: / discord
* 📧 Newsletter: www.getrevue.c...
* ✍️ Blog: dev.to/javascr...
* 🐦 Twitter: / dev_adamnagy
* 📷 Instagram: / javascriptacademy

[@JsAcademyOfficial]

New web development tutorial from me: Memory card game using Javascript, HTML, and CSS: 🔥
ua-cam.com/video/xWdkt6KSirw/v-deo.html

[@AdamAdam-dn4st]

I love this

[@AdamAdam-dn4st]

It's a shame that no one watches your videos

[@bishounenbrat8171]

I can't believe how easy this was! You're a really good teacher.

[@rfryanfavour4369]

Lol mee too 😅lol but I'll look for a way to counter that Eval expression

[@JohnStockton7459]

Its always easy copying someone else code, try building it yourself 😂

[@totzisn]

Thank you so much for this tutorial! it was simple and very practicle im new to javascript and css and html and this was a great video for me to learn! keep it up!

[@imnas6424]

Really great tutorial. Thank you very much. I've just fiinished js course and wanted to practice by making so calculator but all the videos on ytb are so overwhelming. Thankfully I found your video and in one hour ish I finished this project. Now I'm confident to make one calculator by my own

[@sw33ws]

If you want to make the eval part a bit safer, you can add a Regex at the end like this
output.innerText = eval(output.innerText.replace(/[^-+/*\d]/g, ''));
This will make it so it only accepts numbers and the special characters included in the script

[@reginaldamedee7433]

Subscribed! The eval function makes this much easier. I also had to look up the difference between innerHTML and innerText. Thank you for this tutorial!

[@scpf2360]

Don't Use eval() To Be Safer

[@de-stressmusic432]

This is a great tutorial, but for beginner programmers I would not recommend using eval() especially in real-world projects. To quote from MDN page "Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval(). See Never use eval()!, below."

[@maeyham4336]

they literally said this in the video lil bro

[@DeviKumavath]

What is eval() means??

[@lucinda2998]

@@DeviKumavath The eval() function evaluates the specified expression, if the expression is a legal Python statement, it will be executed.

[@marcomacaluso7724]

easily understandable, short so its impossible to get distracted and just delivered really well. great video, thanks

[@lungelomkhize5816]

Been struggling to make calculator the whole day and decided to search it and this guy did it in under 15 minutes LOL I need some sleep!!

[@StephenBeale]

really nice, thanks. Loved the scale and speed - a great confidence builder. One tip for presentation - when you are working at the bottom of the screen, (e.g. @ 4:52 for about 30 seconds ) the player bar pops up and obscures your work, especially when I am flicking back and forth between YT and VS Code. Just a small thing but would help to follow along if most work is closer to the middle. Cheers.

[@shuvambiswas1347]

Absolutely simple and exceptionally beginner friendly tutorial. Kudos to you!

[@ampzmeter]

Subscribed! Awesome video, Iv just started my Java script module and want to try making a calculator as a mini project. Will definitely be watching the rest of your work!

[@JsAcademyOfficial]

Awesome, thank you!

[@rohitbarate1531]

I'm new to this channel. He explained me a new idea to make calculator in 14 minutes

[@JsAcademyOfficial]

Welcome on board! I’m glad you enjoyed it 😊

[@Robytsu]

Really well made tutorial video! Thanks a lot!
Now I would like to see how you do it without using eval()!

[@cieraadair]

This was amazing and so easy to follow. Thank you so much!!!

[@JsAcademyOfficial]

I’m so glad that it was usefult to you 😊

[@madhuriyadav2512]

in where we have to write that code

[@Amber-wt1cu]

Thank you! I'm learning JavaScript. This was a little/lot above my knowledge but it was finally nice to implement some JavaScript vs. endless amounts of freeCodeCamp.

[@JsAcademyOfficial]

Great to hear!

[@fawazudeenogunleye2215]

Thank you so much. I’ll like to add something.
Instead of using eval(), use Function.
In that line where case Is “=“, you can set
display.innerText = Function(“return “ + display.innerText)();
Don’t forget to add your break. Thanks!

[@cyriljephery2662]

Thanks a lot for this tutorial, I'm learning Javascript and i needed a project to start with... this was simplified and precise....Subscribed

[@andreacassotti2561]

Thank you! I have never seen Javascript in action before and after this video it looks easier

[@deterdmn5568]

thanks!
english isnt my first language and this tutorial was awesome!

[@loydcose2780]

That was so simple! The other guy uses class and lot of functions and it takes more than 30mns. But yours is so simple! +1 sub THANKS!

[@djibrilmugisho5874]

thanks for this video in javascript build a calculator seem to be difficult but with this video every thing is clear thanks so much

[@falortral]

Hey man, thanks for the tutorial, easy and understandable... just one thing i want to ask... aren't you hungarian??? :D

[@darwinraralio468]

a big help. im still starting to learn. the delivery is easy to understand. thank you very much

[@marcusmorrow3900]

trying to learn how to use javascript with html and this video is gold. thanks

[@JsAcademyOfficial]

Thank you Marcus! I’m so glad that you found it useful

[@freelancerzakaria2059]

What is the alternative function to the eval();

[@maeyham4336]

you gotta make one yourself.

[@MrRahat6271]

Thanks man. was searching something like this. simple but effective

[@arpandashore4600]

Thanks man making video informative and simple

[@gokujr4133]

Bro your video is really awesome very easy to understand. Thankyou😊

[@JsAcademyOfficial]

Thanks for the feedback! I’m glad you enjoyed and understood it 😌

[@adnansmove8597]

just finished this tutorial now i am just your fan... Almost Subscribe

[@schizo8393]

Great tutorial mate loved it

[@JsAcademyOfficial]

I’m glad you loved it!
Thanks for the kind words :)

[@zlord306]

It was really good love from India .💐💐💐💐💐💐

[@joshuasimmons696]

Outstanding! My first working app, Thanks!

[@bryanhernandz]

I really liked your way to explain and your code is so clear. SUBSCRIBED

[@JsAcademyOfficial]

Thanks for the kind words expect more to come 😉

[@letssavetheworldwithasmile]

I truly appreciate it. I wish I could know all the parameters you use. I think is a matter of time. Thank you!👋👋👋👋

[@mohdaghari2406]

THANK YOU VERY MUCH SIR...REALLY HATS OFF TO SHOW RESPECT

[@rfryanfavour4369]

Lol you just made me laugh and smile and wonder and scream at once 😆 thank you so much sir... this is perfect for an assignment at last

[@user-fy8kb7nd5f]

This was the simplest way to make a calculator 😃😃😃 i love it

[@ajgroupinc.1775]

great jobs!🏆

[@askaririzvi9391]

you sir, are very underrated! You are very good teacher and explained everything you did and why you did. Thankyou!
\

[@JsAcademyOfficial]

Thanks for the kind words!

[@satyajitroy4685]

Really simple and great explanation.

[@JsAcademyOfficial]

Thanks 😊

[@gamamidia.youtube]

Great tutorial, thank you so much, I'm surely gonna watch more videos from you!!!

[@__jake.m]

Thank you for the tutorial! 😄

[@inrrehman4976]

Your method is amazing Sir... thank you

[@markusmottus5345]

Thanks for the video! What VS theme do you use?:)

[@spade6774]

Very good thank you and the last security demo is very valuable

[@shreyajha2501]

keep making this stuff, it helped a lot :)

[@JsAcademyOfficial]

Thanks, stay tuned for more ;)

[@mohammadmohayeji]

Nicely Done bro 👏👍

[@JsAcademyOfficial]

Thanks ✌

[@dieliebeduldetalles]

wow! this is good stuff, thank you

[@dzhanerhasan6546]

Holy sh*t! This was genius.

[@aboctv4182]

I hope you create more videos about programming language.

[@abeeblahabdullah8092]

WAOOOOH WAOOH WAAOOOH
Thank you so much !!

[@sanathkumarshenoy9955]

Amazing man

[@Zaraki1989]

so easy and clear. Thank you very much.

[@JsAcademyOfficial]

You’re welcome, thanks for the kind words.

[@adrmad8849]

Your code is amazing!😮

[@emmanuelaledu955]

Thanks so much for this wonderful tutorials

[@ifaduolasamuel7144]

Subscribed already

[@ifeoluwaolorunnegan253]

hello, thank you so much. This tutorial was so simple . I have a question, if i want the content on the display to automatically clear when i select a new number after using the equal to sign, how will this work.

[@jamesyancharas]

really nice prof video.

[@toenytv7946]

Great video. Thanks for sharing

[@JsAcademyOfficial]

Thanks for the feedback!

[@xlylopg787]

I have a question, When I changed the divide to "÷" Error kept coming so I was wondering if you could tell me how to make it so that it also works with "÷"?

[@megyeridaniel5451]

the valid Math operator to divide is the "/" symbol and it's not possible to override or "operator overload" it

[@mspencer3674]

This was great! I'm new to javascript and this helped me alot.
I've been trying to add keydown function to this calculator.
How can i do that?

[@JsAcademyOfficial]

You have to add event listeners to the keydown event of different keys for example the numbers 1, 2, 3, 4, 5, 6, 7, 9, 0 amd everything else you want to trigger with keydown. Then in the event listener’s callback function you can add the value of the pressed button to the display.

[@mspencer3674]

@@JsAcademyOfficial It might be alot to ask but do you have an example for how one of these eventListeners would look? For example for key 1?

[@JsAcademyOfficial]

I made a quick example from this on CodePen.
Feel free to adjust it to only work with arithmetic operators and numbers :) Take this as a homework :)
Hope you find it useful.
codepen.io/javascriptacademy-stash/pen/jOyLmam

[@mspencer3674]

​@@JsAcademyOfficial Thank the lord for people like you! This was exactly what i needed :) Thank you very much for all the help and the fast respons!

[@JsAcademyOfficial]

Thanks for the kind words :)

[@durelljardim5703]

Thanks for the help!

[@JsAcademyOfficial]

You’re welcome 🙂

[@SanamSings]

Such a great video. Thank you so much. Subscribing for more .

[@omkaryadav7445]

You gained one subscriber.Thank You 🙏

[@JsAcademyOfficial]

Welcome to the Academy! 😊

[@Xusanibragimov1222]

thanks for this video tutorial this easily explained thank you so much again !!!!!!!!!!!!!!!!

[@JsAcademyOfficial]

You’re welcome

[@maniac1441]

Which theme are you using

[@walkahh]

am i missing a package or something? i was even at the point of copy and pasting everything exactly and it still didn't work. every single html js and css. did something break or something?

[@dennistonye3718]

why did you use div instead of input for the calculator display

[@Pharizer]

Nice video! I'm wondering what kind of accent is this you have :D Jól sejtem, hogy magyar? :D

[@JsAcademyOfficial]

Thanks 😉 Igen magyar az akcentus :)

[@Pharizer]

@@JsAcademyOfficial Akkor jól éreztem :D Jó kis videó, csak így tovább! Nem rég kezdtem kódolni és pont ezzel a feladattal küszködöm jelenleg. Amúgy meg ment a sub!

[@JsAcademyOfficial]

Sok sikert és kitartást hozzà! Köszi a kedves szavakat 😌

[@linhmytran696]

Hi, thank you so much for your helpful video. However, I did not understand the part in javascript ,
First button.map(button =>{ I really dont understand why you express this and why we use map here and why we use the equal sign and larger sign in this situation
Second, I dont understand what e.target.innerText mean in here

[@JsAcademyOfficial]

Hi Linh!
The equal sign and the > symbol is a shorthand for functions. We use map to loop through the array. The target means the dom element (container) that was clicked and innerText means its content. Feel free to check out arrow functions arrays and dom on w3schools.com
Have a nice day! 😊

[@SAIFULISLAM-xd3nw]

So awesome project

[@cigarettesafter9435]

Thank you so much, u're the best.

[@Nigerian_KO]

This might be the easiest javascript tutorial ever !!!

[@genddabowen9171]

What is "button => {}" in the buttons.map?

[@JsAcademyOfficial]

That is called an arrow function. You can find more info here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

[@pinkbalem]

I dont understand why u add the 'e' after declaring the click event listener at 7:01.. what does it do? and why shouldnt i just leave a blank ( ) ?
im just starting so i googled a lot about all the things you did on the vid but i cant find an answer to that, i dont know how to word my question to google.. but i hope u can answer it!

[@blangkowala2395]

but how to fix if you tap equal sign that don't have items it give me undefined

[@cloudman007]

Very easy and understandable,
may I ask if the buttons are not responding and not displaying what I do on the output?

[@JsAcademyOfficial]

If the buttons do not work there’s a high chance that the event listeners/handlers are not set properly. Check for typos in classnames and ids and double check the event handlers

[@cloudman007]

@@JsAcademyOfficial Update: I found the problem all along it was the wrong browser i was using for the project.
Again thank you for the help sir 💚

[@fadiahetrakeshkumar9454]

Very nice video

[@JsAcademyOfficial]

Thanks for the feedback!

[@b-41vishal22]

Thankyou 😊

[@Rovijun21]

Good tuto, thank you

[@JsAcademyOfficial]

I’m glad you found value in it :)

[@lijigireeshlijigireesh7424]

Subscribed

[@sehlaorucova5398]

👍👍👍

[@thefallenvalley4340]

this is magic

[@onuprinceleytoochukwujohn1487]

The upper part of the calculator css is not available...I can't just see it

[@totallynotcozmo510]

You Helped me get flying colors on my exam today! Thank you so much for your help!
But i have a question, I have been trying to find the perfect code editor for a beginner like me, may I know that name of the software you used for this video?

[@StonyArc]

Looks like they're using vscode as their editor

[@zMoonlight]

its visual studio code

[@MyChannel92]

can you please make this calculator automatically working with keyboard... a tutorial for scientific calculator will be appreciated.... best
or just provide the code that it start working with computer keyboard automatically..

[@MyChannel92]

thanks for a great tutorial

[@omkaryadav7445]

Application with real user instead of eval what should we use?

[@JsAcademyOfficial]

I'd install this package mathjs.org/ and use math.evaluate()

[@mo3azeldesoky713]

thanks man🙏🙏❤❤

[@august8231]

could we have used forEach instead of map to add event listeners to each button

[@carlosaltirado]

Thanks for the video. How can I disable the alphabet keyboard but keeping just the numbers using the switch statement? also how can I limit the number of digits to show on the display?

[@BenimaruRBB]

yo this is sick

[@JsAcademyOfficial]

Thank you!

[@mygmial4151]

thanks a lot.

[@BARABAA]

Hello I followed this tutorial and it doesn't work my problem is that it doesn't type when I click the buttons, please help me I'm in a rush

[@freeDonm]

thx duude yr a beast

[@singhgagandeep955]

great work

[@JsAcademyOfficial]

Thank you Singh! 😊

[@akshaykhatri2027]

That was amazingggg stuff!! I really appreciate your work sir, easy and not complicated at all.
But can you tell me if i had used '*' sign as a HTML Entity, then how to use '*' multiply operation in JS??

[@JsAcademyOfficial]

Hi Akshay!
Thanks for the kind words. I hope I understand your question. The eval function takes a string and runs it as it would be javascript so the * sign will be translated into the multiplication operator when using it within eval

[@icbinroshen4618]

Thanks

[@백종훈-s8p]

hoooooolyyy your code is amazing

[@betellopez3939]

What if I wanted the change the * for X can I use
case 'X':
display.innerText = '*';
break;

[@betellopez3939]

I found it works like this but what i really want to do is display x but for it to really function as *
case 'X':
display.innerText += '*';
break;