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 :)

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

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

Everything is fun and games until JavaScript starts.

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

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

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 😩

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.

wow, I've studied and watched a ton of YT videos on programming and I have to agree with everyone else on this comment that yours by far has been the more precise and clear. So easy to understand what we're doing. Thank you for this, the videos 3 years old yet super relevant today for me! Thanks

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.

One of the best tutorials I have ever seen like no mistakes or anything Good job GG

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.

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

I came for the calculator, but I left with much more. Thank you for explaining all you do!

21:41 why it's not working? I wrote this.currentOperand = number and it wroked. it added one number each time but when I changed it to this.currentOperand = this.currentOperand.toString() + number.toString() nothing happend..why? there is nothing in the black area.

This tutorial was fine. Well explained. Sometimes you need to understand rather than copy. No programmer remembers every single line of code. +1 sub

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!

I like this course because it is so practical and useful. Thank you so much.

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

Excellent tutorial that’s not too long or complicated. Definitely helpful when starting up with concepts. Appreciate it, bro! Long live! :)

absolutely loved this tutorial!!! THANKS SO MUCH.

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

Thank you a lot. I haven't met such a high quality content about practical JS on KZfaq. Keep it up!

Beautifuly done, im learning a lot with your javascript projects, even the 'old' ones! Thanks man, you're great

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

Dude, such an informative and easy to follow tutorial. Thank you!

hey I learning to code, since 2 months and i saw a lot of calculators, and I think yours are the most efficient, well done and most nice of all of them, incredible job, I miss some concepts, but just for my lack of experience. Thanks again, you have a new subscriber

Really enjoyed walking through this. Tried to work things out before watching the video but I was way off. I understood your explanations so hopefully that means I learned something! I'm going to look for other similar walkthroughs you've made.

Thank you so much. I've learned a little more about CSS and programming style. You're a real good teacher.

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.

i think this is the best of the calculator samples i have found on youtube ,Thank you!

This is the first video of yours that I have watched and you've earned my sub. Javascript isn't my first or even second language so I came into this video expecting to skip around to grab a few snippets of code as syntax examples but I ended up coding along with the video. I know this video is a few years old but keep up the great work!

Really Awesome tutorial!!. So much functionality in just 38 mins ...This is by far the best and complete Calculator tutorial..

Awesome tutorial to practice JS in web design for beginners! Thank you so much!

Wonderful tutorial. I began learning javascript in June 2022, and I'm glad I was able to create this calculator in a timely manner to suit my thought process.

Kyle, thank you so much, I was able to refactor my css quite a bit with this information.

I know I'm late but holy crap dude, thank you so much. You've been a massive help

The channel really deserves it's name. "Web Dev Simplified"!

Great tutorial!! Loved every bit of it. Easy to understand and great concepts as well.

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!

Really appreciate this video. I am at a point where I've studied JavaScript plenty and would like to start applying it. I know that I am not the first to struggle with this transition and I am grateful to have access to this type of content especially for free. Thank you for patiently explaining each steps in a precise and concise manner. Also any advice for someone in my situation would be greatly appreciated!

I've watched so many different videos showing me how to follow along many different projects and none of them made sense until i clicked on yours. you actually go step by step showing how its done and i really appreciate it thank you so much!!

I have watched many JS build calculator videos, and this is definitely one of them.

Thank you so SO much! This helped me a lot.

Kyle, thank you so much for creating this video. I would find it more helpful if you set the html title of the calculator you are working on with us to something along the lines of "New Calculator". This way the viewers can see in the tab if you are demonstrating with the finished calculator, or the one that you are creating. Hope this makes sense. Thank you

Nice tutorial. I like the speed you go at and how you don't go off on tangents or over explain everything. I can see how you can use this program for something else by tweaking the elements to do whatever it is another program might do. Like a calendar for instance

I ran when I first saw this video last year. Guess what !, I came back stronger💪 I used almost 4 hours to implement mine(mimick) Thank you web dev simplified

AWESOME!!! Very practical tutorial and easy to understand. hope to see more tutorials like this.

Thank you for the video, normally we wouldn't find a calculator project using JS classes as I consider this to not be a complete beginner topic, and normally a calculator is a begginer friendly project in theory - but it's so good that you provided us with this alternative. However, since this is not the easiest topic in the world may be slowing things down a bit would help - I found myself having to change the video speed to 0.75 sometimes because when I was still trying to process one thing you did you were already 2 or 3 steps away from where I was. I understand that without that the video might have been too long but I guess better a longer video than one it's hard to follow 😅

Thanks for this tutorial. I just started out on javascript a few weeks ago and I have enjoyed your method of teaching.

Thank you very much for this very good tutorial. I am excited to try out the other beginner friendly projects on your channel.

Damn brilliant the way you just plough through the code and add it on the fly in a precise sequential manner. Kudos!!

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.

Oh man you are awesome, I enjoyed a lot while watching your tutorials.

Began coding for real a week ago (have done some simple coding via iPad earlier). During this project, I learned how to (relatively) effectively find my JS errors through inspect element. More often than not, I also found that the most effective way to correct an error is to rewrite the entire strip of code where the error was found. I got the calculator to do the calculations, but have not yet got the AC or DEL buttons to work properly

At 21:15 when I click on buttons nothing shows in the output. I really don't know what I'm doing wrong.

Outstanding tutorial! Thank you.

I created a calc with no classes - it was a mess - lol but I was very happy that I had most of the same code and capabilities - I am working on writing cleaner code - this video was fun to watch - thank you!

Great project, im new to JavaScript. I 'borrowed' your user interface design and then implemented the logic using React js state/setStates and it's finally working. Next step is to make it mobile responsive then will add it to my portfolio and github.

I have a question, why do you use switch between (for example), "currentOperand" and "currentOperandTextElement" instead of just using "currentOperandTextElement" in every place that uses "currentOperand" or vice versa? From what I noticed you made a variable called "currentOperandTextElement," and that included every operation so why not use that throughout the whole code? I hope my question makes sense.

hey, man awesome video! I was able to build my calculator as well following your method and added several more function, like factorial, exponential and square root all applying the principles I learned from your video, thanks a lot!

Thanks a lot! This is still one of the best tutorials after completing the beginner level

Thanks for the tut! It helped me realize I have a long way to go with javascript

From one Kyle to another, can you give advice on how you set out to tackle a problem given to you? I know this is probably a easy problem for even a junior programmer. I started fine with a good plan but then i soon came into problems and realised my plan wasn't going to work. I had a switch statement going on for the operators and some other stuff but it just got too messy which brought me here.

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.

this is amazing i learned a lot of stuff. i am a begginer so i watch a lot of tutorial like this and i can definetly say that this video is one of the best video i've ever seen. thanks for sharing you made this complicated calculator functions (at least complecated for me ) very easy to understand.

I had a teacher who gave us an exercise to create a calculator in the class. That was frustrating because it was hard to make it in one hour and this discourage me to learn development.😵 But when you see this good man who is explaining how to do it, you will love programming.👨‍🏫

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!

Just gotta say, I absolutely love the slide over you do with your finger to the preview of the calculator!

dude that slide in at the start was clean

Kyle, thank you very much for this awesome mini-tutorial!

This is so overwhelming 🤯

Might be a beginner project but the level of functionality is definitely high level!! I understand what’s going on but I need to practice more in order to develop this level of thinking!! Thank you for uploading it mate!🙏 Just wondering like how long did it take u to develop this level thinking 🤔?

You make it look so easy, fascinating to watch

Love this format dude, instant sub. Working my way towards web3 and reactjs for a communtiy project on the harmony blokchain.

For those who ran into the same problem as me, and couldn't get their buttons to be nice nd square: In the CSS file, under the: .calculator-gird > button put in: height: 100px; If this doesn't work, then play around with the height until it does. Hope this helps!

Kyle you should seriously consider making courses (if you haven't yet). You have a gift for explaining in minutes things I couldn't grasp in hour(s)

Fun project Kyle, thank you! I didn't know it was so simple to create a calculator

21:11 For anyone getting stuck here bc you don't see your number showing up: 1) go to index.html file 2) find the

Thank you Web Dev Simplified. This is a great tutorial.

Thank you so much for the well explained video. You helped me understand a lot of concepts here.

22:03 I had to use and if else statement because I was getting an error for trying to use the .toString() method when this.currentOperand was undefined. I am unsure of why the person who made this video does not get this error and I did but yea in case anyone else encounters the same issue if(this.currentOperand===undefined) { this.currentOperand=number } else{ this.currentOperand=this.currentOperand.toString() + number.toString() }

I like your channel, because you actually talk and explain it.

so useful , finally i saw classes used in tutorial

Really enjoyed the tutorial. Anyone who watched this though and wants to take it a step further, once the user gets a result (i.e. 50+50=100) they can still hit delete to remove digits from the result (100 -> 10 -> 1). Would be good practice fixing this issue.

great video (as usual) i have a question: where does 'currentOperand' from 'this.currentOperand' come from? i never saw you initialize/create it

Loved this tutorial. Helped me a lot!

Thank you very much! I've learn something new again.

The first time I saw this, it was very difficult for me to understand, and I went back to learning the basics, various methods and OOP in 1 week, and actually this code is clean and easy to read.

Very good tutorial! Im still a begnner and followed step by step and it worked perfectly. The only issue I have is when I type many numbers in the calculator, they get out of the calculator. But overall thanks a lot! :D

This is an excellent step-by-step tutorial.

Everybody gansta till it's time for JS

Thanks for this. The JS part seems quite challenging indeed but it'll help for sure!

Wow! This is awesome. I got stuck while trying to build a calculator with vanilla JavaScript. But this video is a very good one.

Superb You are the simplest tutor I ever seen. Thank you so much for your videos :)

"All we need to do is create some files". Web dev simplified indeed ;-)

I've had to wait 33 years to find out that AC stands for All Clear ^^

. sir kyle will sure be with the creator of codes for sure . hes so obidient following each of definitions that i encountered so far . salute to this my man here !

Thank you Kyle, great video!

when did he create currentOperand and previousOperand variables? I dont see it anywhere