Build A Calculator With JavaScript Tutorial

Projects are the best way to learn JavaScript, and a calculator is one of the best projects to choose. A calculator covers all the complex interactions with UI and JavaScript while still being simple enough for people of any skill level.

In this video I will walk you through the steps it takes to build a completely modern calculator using JavaScript best practices. If you want to learn JavaScript or improve your JavaScript skill this is a must do project.

📚 Materials:

🧠 Concepts Covered:

- How to use ES6 classes to organize code
- How to sync JavaScript code with a UI
- CSS Grid
- Flexbox
- The best way to cleanly handle user input
- How to debug complicated edge cases

🌎 Find Me Here:

#JavaScript #WebDevelopment #Programming

[danielvillegas]

After 10 months of learning HTML+CSS+JS and some React, I just tried making a calculator and realized I couldn't. Now, I watch this video and realized I REALLY couldn't. Lol.

Edit 2: July 2023, Two years later, making a 6 figure salary as a front end dev, and I know I still wouldn't be able to make a calculator this good all by myself. Don't give up guys! Learning to code takes time!

Edit: I just landed a full time, fully remote front end job guys! Self taught 100%, took me almost two years but it is possible, don't give up! Take the time you need to learn things and master them, even if it seems impossible at first, you can do it :)

[renan.almeidah]

I challenged myself and was able to create a % (percentage) button, and transformed everything to work with commas instead of periods as decimal separator because of my locale. Now, I will try to create a memory side panel which will store the last 5 calculations.

Thank you so much for this video!

I never had so much fun learning JavaScript, because all I did was copying and pasting code from the internet into my little web widgets. Now, I could fully understand concepts and took notes of everything that never entered my head, such as arrow functions and constructor classes.

[skh.visuals]

I've watched a TON of JS calculator tutorials, even inspected codes from actual online calculators to find the best way to approach it
and you are hands down the best when it comes to efficiency and logic, +1 sub

[kartikugemuge]

I was here a week ago I understood nothing .. I hustled some js concepts and now this is so clear .. not a video for beginners but great for people in the learning phase .. the way you used events is so cool!! Never thought u could call functions from an event .. makes everything soo much simpler

[matthew]

I'm not proud to admit this, but this is how I learned what AC means on a calculator.

[jewels]

Shit. I started to learn JS 1-2 months ago, but went back to CSS because I realised I didn't really grasp the concepts and swepted over the topics too hastily.
Now I thought I had a base understanding of JS, but coming back to it, I'm realising I'm definitely still in the 'frustrated learning' phase 😩

[edgarspujats]

I built my own calculator, it works completely fine. But watching this video i realised how far i am from being good. Your code is so clean and structured, and the methods are so optimal. I need to learn more JavaScript...

[davidarogunre]

Me: I can build a calculator
Me after watching this video:I don't know Javascript

[lowiehojas]

I tried to create a calculator in javascript and was unsuccessful; but I never thought it would be this complicated.
I still couldn't totally grasp on how the Class works.
Your work is amazing!

[peaklegacy]

I am brand new to JS and this helped me a TON. I couldn't get an understanding as to how JS worked at all so I decided just to follow along with a project. After almost 4 hours of following along and debugging my mistakes I finally finished! This definitely helped me build a foundation in JavaScript.

[neatpolygons]

You're amazing :) as an experienced dev who came from other languages I find it very dull watching other tutorials that go through the basics very slowly. I really enjoyed watching you work and following at the same time. great work.

[pahkah.]

Alot of coding but ive mostly been doing HTML and CSS which ive enjoyed alot. But now im putting my feet in the JavaScript waters and i can say its alot atm but ima keep practicing to get better! Wish me luck!

[HostDotPromo]

This is awesome, seems like you can build everything with javascript these days 🔥

[gambit]

I made your 40 min video last about 2 hours from taking notes and trying to absorb the concept, instead of just code-along, and it was a very very helpful experience. Than you so much!


One piece of advice: maybe make the background-color on the calculator being constructed in a different tone! Sometimes I got a scare from seeing advance functions in the finished one, but thinking it was the under construction. Of course, not on this video, but on future ones (looking forward to them!)


again, thanks!

[sandVidz]

Everything is fun and games until JavaScript starts.

[NoudvD]

Correct me if I'm wrong. To get a data attribute through the dataset object, get the property by the part of the attribute name after data- . Then it is converted to camelCase. In this case the data-current-operand attribute in the HTML file is converted to currentOperand. This is how JS reads values from data attributes.

[halusky]

Appreciate this! I've been coding with JS for a couple of years already, but I'm prepping for a FAANG interview and severely need to brush up on my vanilla JS skills (I've been in React World for way too long). The class-based approach is definitely the way to go, and it's something that I've always avoided implementing in my own solutions in favor of just cramming my JS file full of variables and functions.

Very clean and very organized.

[meryemar]

your voice makes me comfortable. I really appreciate that you making these videos.

[MVIVN]

I'm just sitting here watching this in disbelief and feeling utterly useless and defeated. I have spent the past 3 days trying to make a JavaScript calculator and I could only get it partially working, but couldn't work out how to make it do several things, and each time I tried to solve those problems the calculator got worse (more things broken, more errors, stopped working) and I've accepted that despite all my learning efforts I'm just not good enough to do a project like this yet. I've been learning Javascript on and off for 5 months so far, and admittedly that's not a very long time, but I thought I was far enough along my journey to complete this calculator assignment. This video has humbled me and shown me that I'm completely and utterly useless at the moment. Gonna need several years of learning to be able to make an entire calculator as quickly and perfectly as it was done in this video.

[skudnu]

amazing tutorial, not exactly for beginners, since you take a lot of stuff for granted when it comes to the javascript part, but for me that was exactly what i was looking for