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/javascriptacademy-...
Final project: github.com/javascriptacademy-...
Where you can find me?
🔗 Links:
* 🍺 Support free education and buy me a beer: ko-fi.com/adamnagy
* 💬 Discord: / discord
* 📧 Newsletter: www.getrevue.co/profile/dev_a...
* ✍️ Blog: dev.to/javascriptacademy
* 🐦 Twitter: / dev_adamnagy
* 📷 Instagram: / javascriptacademy

[@JsAcademyOfficial]

New web development tutorial from me: Memory card game using Javascript, HTML, and CSS: 🔥
czcams.com/video/xWdkt6KSirw/video.html

[@AdamAdam-dn4st]

I love this

[@AdamAdam-dn4st]

It's a shame that no one watches your videos

[@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

[@JsAcademyOfficial]

If you enjoyed the video and want to learn more, feel free to check out my coding projects tutorials playlist:
czcams.com/play/PL1tUyORvTAreSCSnxhz1-CPJVlbHZveBN.html

[@nonEuclideanExplosive]

my code doesnt work text doesnt appear is JS just that bad that other people's code doesnt work?

[@ahmedlaghari389]

thank you very much, subscribed

[@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!

[@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

[@marcomacaluso7724]

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

[@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.

[@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 😂

[@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!

[@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

[@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

[@shuvambiswas1347]

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

[@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!!

[@darwinraralio468]

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

[@MrRahat6271]

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

[@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!

[@gamamidia.youtube]

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

[@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

[@Robytsu]

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

[@joshuasimmons696]

Outstanding! My first working app, Thanks!

[@arpandashore4600]

Thanks man making video informative and simple

[@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!

[@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.

[@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

[@deterdmn5568]

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

[@__jake.m]

Thank you for the tutorial! 😄

[@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!

[@schizo8393]

Great tutorial mate loved it

[@JsAcademyOfficial]

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

[@adnansmove8597]

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

[@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 😊

[@shreyajha2501]

keep making this stuff, it helped a lot :)

[@JsAcademyOfficial]

Thanks, stay tuned for more ;)

[@inrrehman4976]

Your method is amazing Sir... thank you

[@ajgroupinc.1775]

great jobs!🏆

[@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 😉

[@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

[@dieliebeduldetalles]

wow! this is good stuff, thank you

[@mohdaghari2406]

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

[@spade6774]

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

[@user-fy8kb7nd5f]

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

[@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!

[@zlord306]

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

[@satyajitroy4685]

Really simple and great explanation.

[@JsAcademyOfficial]

Thanks 😊

[@emmanuelaledu955]

Thanks so much for this wonderful tutorials

[@adrmad8849]

Your code is amazing!😮

[@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.

[@sanathkumarshenoy9955]

Amazing man

[@markusmottus5345]

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

[@Zaraki1989]

so easy and clear. Thank you very much.

[@JsAcademyOfficial]

You’re welcome, thanks for the kind words.

[@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 😌

[@durelljardim5703]

Thanks for the help!

[@JsAcademyOfficial]

You’re welcome 🙂

[@cigarettesafter9435]

Thank you so much, u're the best.

[@aboctv4182]

I hope you create more videos about programming language.

[@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

[@jamesyancharas]

really nice prof video.

[@toenytv7946]

Great video. Thanks for sharing

[@JsAcademyOfficial]

Thanks for the feedback!

[@ifaduolasamuel7144]

Subscribed already

[@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?

[@SanamSings]

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

[@dzhanerhasan6546]

Holy sh*t! This was genius.

[@mohammadmohayeji]

Nicely Done bro 👏👍

[@JsAcademyOfficial]

Thanks ✌

[@SAIFULISLAM-xd3nw]

So awesome project

[@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!

[@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?

[@letssavetheworldwithasmile]

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

[@abeeblahabdullah8092]

WAOOOOH WAOOH WAAOOOH
Thank you so much !!

[@falortral]

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

[@omkaryadav7445]

You gained one subscriber.Thank You 🙏

[@JsAcademyOfficial]

Welcome to the Academy! 😊

[@mo3azeldesoky713]

thanks man🙏🙏❤❤

[@b-41vishal22]

Thankyou 😊

[@Rovijun21]

Good tuto, thank you

[@JsAcademyOfficial]

I’m glad you found value in it :)

[@freeDonm]

thx duude yr a beast

[@blangkowala2395]

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

[@user-df4vp1gd9w]

i wanna use "×" and "÷" which is times and divide in HTML. but if I use them, your js code cannot calculate / and * (ㅠ.ㅠ) I need help

[@Xusanibragimov1222]

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

[@JsAcademyOfficial]

You’re welcome

[@august8231]

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

[@mygmial4151]

thanks a lot.

[@dennistonye3718]

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

[@mustafa12803]

after 'error' alert and equals process when we click a number its adding the number that before text could anyone fix this

[@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

[@icbinroshen4618]

Thanks

[@sehlaorucova5398]

👍👍👍

[@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

[@singhgagandeep955]

great work

[@JsAcademyOfficial]

Thank you Singh! 😊

[@onuprinceleytoochukwujohn1487]

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

[@lijigireeshlijigireesh7424]

Subscribed

[@thefallenvalley4340]

this is magic

[@BenimaruRBB]

yo this is sick

[@JsAcademyOfficial]

Thank you!

[@bhavyajain2539]

is not for eval how will we make it work for users if we want to address the security concerns

[@mateomerja6462]

This may sound a bit dumb but im new so how do i duplicate the lines of the code in vs studio? sub btw

[@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

[@maniac1441]

Which theme are you using

[@djordjerankovic4503]

When I click any button it shows that number or symbol 18 times (number of buttons in calculator). Why does it happen? Edit: Found the problem, after .map() method, when i was adding event listener, i coded document.addEventListener instead of button.addEventListener

[@JsAcademyOfficial]

Thanks for sharing the solution, yes this way you attached an event listener to all the buttons instead of adding 1 for each button

[@Bodyan]

What the name of the Color Theme used in this video ?

[@uccanh2750]

good video., thanks u so much

[@JsAcademyOfficial]

So nice of you, thanks

[@nusarajaneesha1982]

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?

[@spotify1ful]

Did you manage to get keydown in on this one? Currently trying myself

[@pragyaapunni5682]

👍🏻

[@dhanalakshmis7929]

Not displaying anything while clicking any button,pls help me with that

[@user-df4vp1gd9w]

hoooooolyyy your code is amazing

[@karunakarkoyada69]

sir what is 'e' in the js code line no:6