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 :)
that is a sad truth. many bootcamps students end up like this. even me lol. I know people who claim to be full-stack developers because they did udemy courses, but when you tell them to build a calculator, they are clueless. It is not as simple as it seems. Better to work hard on as many projects as possible, and if you really get stuck, let;s say, for a week, find help. I got stuck on this, so here I am :D
@Josiah Eridius I've been learning Js from scratch for 4 months 8 hours a day and I have not noticed any improvement. I still don't get logic and some difficult parts as async.and that's just a theory.! It gets event worse when I see the real code bro...a disaster
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
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 😩
now what you should do is go through a bunch of videos relating to concepts only. These project based tutorials are helpful to learn about practical uses for concept you may not know but they don't help you understand them. When ever you do these project tutorials you should write down on a piece of paper of the concepts and methods you were not familiar and do some research on them after wards.
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
I did same thing u did on this calculator code but my was showing different things from CSS stage I crossed every code nothing was missing why I'm not getting exactly how the calculator u display looks and works pls I need to guidelines here
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.
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...
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.
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.
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!
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 🤔?
@@westernpigeon Good job for this guy but I think he should use other names as the constructor's variable because when you have something like this.x =x x x this.x, you won't get a clue! I pretty much understood everything to the point when he put "this.operation" as undefined. I didn't get that. Maybe he made that assignment in order to use it later as a condition but I am not sure. Also, the last part was not so easy to understand. A very good and mind-blowing project all in one! Good job!!
@@westernpigeon I was about saying the same thing, the functionality and the concept is too advanced for a beginner. This is a real life calculator and for learning.
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.
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.
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
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.
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!
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.
Don't feel defeated. Everyone's learning capabilities are different and the guy you are watching has years of experience at Javascript and programming in general. Break the problem down, write it down if it helps, and take it slow and you'll be able to solve it.
@@ayushsoni5050 Thank you, I appreciate your supportive words a lot. It's really difficult sometimes because I started my coding journey late (I am already in my 30s) in the hopes of maybe unlocking some better career opportunities in the future for my family's benefit, so when I make a lot of effort and still fail I start to get really down on myself and think that maybe I'm just not cut out for this type of stuff. I will try to keep things in perspective and try not to rush through things, just one step at a time and keep learning something new every day.
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 😅
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
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!
@@pramodreddypandiri194 This usually happens when you are missing the definition for a function. Hard to fix errors without seeing the code. Maybe you mispelled the name of the function when you defined it. You define the function like function name() {} or store it in a variable like this const name = () => {}. But basically look for your function deleteButton and make you spelled it correctly. If not go Stackoverflow your new best friend :).
@@cosme2441 hey bro, in 2 years ago you said this "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 now I'm in the same position.. how are you going with javascript today ?? you are already working in a company or something ?? thanks.
@@ygaaaoo Hey hey, I am currently making a living of working as a freelancer. It's not yet that tech money but good enough I don't have a side job. Currently working on a few projects. My advice, don't stress so much about how good you are. Just start building and study specific things as you need them when running into problems. My experience is concepts are a lot easier to learn, when you need to apply them. Also don't give up, enjoy the process and give yourself a break when you get super stuck! But struggle a little first.
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!
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!
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
hear me out, lol. I'm just literally a newbie in js, I'm even confused on what's the difference between value and variable before I start watching this tutorial. it goes well not until I reached the middle where the js is implemented (when press a button, there must be numbers that'll come out). it took half an hour or whole hour on brainstorming and repeating the same codes all over again just to fix the invisible error hahaha. but my js code remains the same as well as the result. I went back to the html part and figured out that I didn't put the “defer” after the src="script.js"._. it's the only problem I encountered. the rest did worked fine and I built my very first calculator, thanks to this tutorial. now, if it seems like there's an error on your code, I highly suggest for you to look all over again even the smallest part of your code. also, go with the flow whenever he saves the code and refresh the local server.
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.
Thank you so much for this great tutorial/walkthrough. I learned some new css, and I hope to incorporate it into some future projects. The grid is particularly nice. I'm currently adding some of my own functionality to the calculator (sin, cos, +/-, etc.) and I'm looking forward to using it with my son (4) who has been playing with numbers and calculators a lot recently. I was able to follow along with most of the javascript here, and your tutorials have been part of my growth on that learning curve. Your content is appreciated, and your vids have been a pleasant mental distraction when I need to get away from work every so often. All the best to you! :)
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.
Did it, still face the same issue, google isn't helping me with the error either. I tried to console log the button inside the event listener and it gave me this: : : : Uncaught TypeError: Cannot set properties of undefined (setting 'innerText') at Calculator.updateDisplay (script.js:32:46) at HTMLButtonElement. (script.js:57:16)
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
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.👨🏫
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() }
Ya I also had same problem. it's a mystery to me why the author has no problem (Undefuned.toString() Problem!!) my code is better, it is on point click. will add 0. appendNumber(number){ if(this.currentOperand === undefined){ this.currentOperand = number; } else if (number === '.' && this.currentOperand.includes('.')){ return } else if (this.currentOperand === '.') { return this.currentOperand = '0.'+ number } else { this.currentOperand = this.currentOperand.toString() + number.toString() }
decided to remake this using svelte. My 2 rules with using svelte are: 1. no selecting elements using document.query 2. if something needs to be cloned multiple times create a component for it (and make a list that will bind to that element to comply with rule 1)
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
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!
This course is really helpful, but I've found one little problem. When you make any calculation (afther pressing '='), and if you enter another number it just adds it to the equation we calculated. It can be fixed by adding new variable (var equalChecker) and in the compute method you set the value to 1, and check the value in appendNumber method. If the value is 1 it changes currentOperand in just number.toString(), and the value of equalChecker is reset to 0. I think it's just nice upgrade to the program. I don't mean anything bad with this comment just wanna help a little bit. Have a great day!
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 had the same thought when I was watching the video. He created it to store the incoming values. By saying this.currentOperand he essentially initialized it there. It was an empty variable to be used later.
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!!
@@benfichter5351 those are the classes of the divs you're talking about (current-operand and not currentOperand), he's asking about the variables that appear out of 'nowhere' at 18:51. Good explanation can be found in another comment here (comment chain starting with the comment of shubham).
I'm a beginner and have been struggling with how to get the functionality in place. This helps (I want to try and build it without copying), but I have 2 questions: 1. How do you know when to use classes? Can this be done without classes? 2. Does this JS code take operator precedence into account (which happens when you use your mobile and built-in calculator app, for example)
clases in javascript are not important, you can create the same thing without using them. there are more tutorials out there on youtube that don't use clases at all.
I really liked the video. I went step by step through the video and made the same one myself. There are still a few bugs in this calc. I am a beginner so I do not have much idea about how to fix them. It would be great if you made another video fixing these bugs and adding a couple more features on this calc. Some of the bugs that found doing a couple of calculations are: 1. If we enter an operator after a number, for example, a '+' but then we want to put multiply sign '*', it does not update and stays on '+'. 2. When we get an answer after pressing the equals button, and then we want to enter another value, instead of clearing the current operand and starting from the blank, it joins the current operand and that becomes a bigger number. 3. It is really frustrating to use the calculator without a cursor. We can only erase things from one end instead of where we want. 4. If we enter an operator after a number and the current operand becomes the previous operand, and then we want to go to the previous operand and change something there, we cannot do that by pressing the delete key. That number just gets stuck there. 5. It would be great if we can enter the values on the calc through our keyboard instead of clicking on the screen.
If there was a git repo, we could compare what the final result is to what was typed in the typealong section. Other than that it was good job. Devesh, if you post your final set of code in a repo, I can at least compare against my typealong version.
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
just finished coding-along with the video! 3 years later and I hope I'm not too late :D I'm gonna learn more about JS and come back to this project and improve a few things: - after clicking the "=", the result should be immutable - right now if you enter a few numbers after the calculation, the numbers will be appended to the result - hitting "=" multiple times will repeat calculations - a history panel for the recent calculations (store in local memory and persistent even after closing the browser) thank you for the inspiration!
On the fly? Don't think so. rather there's more work than we think, making videos like this takes some time and dedication, and of course a lot of hard work behind the scenes.
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.
Hello, this is awesome tutorial. i learnt more things about Javascript, but I have one question. how currentoperand previusoperand and operation works since they aren't defined. thank you
That drove me crazy as well. Its just the class's properties but you don't explicitly define them. Instead of declaring it inside the Calculator class, you are just declaring and assigning at the same time. What I didn't understand was how the hell happened that if I modify this.currentTextOperand it also modified my currentTextOperand innerText property of my html element. I didn't quite got that...
@@sonagi98 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.
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.
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.
There must be something you're missing out because at 20:45 when it comes to testing, none of my buttons work like yours do. I click on a button but it does not respond and append to the current screen! I've been starring at my code for ages but looks like I've followed everything to a tee. Please help
It's a great tutorial but I noticed a small bug if we click on decimal point and then directly click on any operation it should prevent that but it doesn't. For example if we enter '.+' if should not allow it but it displays it in previous operand text element. I fixed it by adding another OR statement in chooseOperation method like this: const decimalDigitsString = this.currentOperand.toString().split('.')[1]; if(this.currentOperand === '' || decimalDigitsString === '') return; It solved the problem for me.
great but i have another problem if you can help me Uncaught TypeError: Cannot set property 'innerText' of null at Calculator.update_display () at HTMLButtonElement. i'm getting this problem the value does not go to update display function
Huge fan of you and your work Web Dev. I actually noticed the other day that you even take the time to format your videos playback rate to move a little faster. I enjoy your style of content delivery as well as your structure in your workflow as you move throughout your demonstration in your videos. To be honest im very impressed with your productions, but most importantly I really appreciate your hard work and your content for your my primary source I turn to for the youtube web dev content. It would be cool if you mentioned your other pipelines in your videos such as your github or linked in to be able to network with you on different levels. Keep up the awesome work Kyle. Plus also its cool you always make your production with Dragon Ball Z OG hair styles.
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.
Kinda understand the basis but, what if we want to make multiple operation in one go before click the equal button? For example like this : 123 + 456 * 789 Based on the code you've explained, it will computate the addition first, because the code serve the first come, not by the computation that the user expected. Likewise when multiple operation used in a single line like 1 + 2 - 3 * 4 / 5 + 6 - 7 * 8 / 9 etc... we got multiple operation which the multiplication and division has to be computated first before addition and subtraction I would be like to hear some explanation logic regarding this opinion of mine Btw, your videos really inspire me a lot, big thanks Sir
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!
Wow. I got it to work. Way back in 1995 or so people asked me if I could please, please help them with page layout using tables and this new thing called frames. I do have progress a bit but it is nice to see a full example of many modern practices. Could you please add some references to other videos where each technique used is explained in more detail? A link next to each of the Concepts covered would be great. Another thing that could be useful is the correct name of the tricks/techniques used so we can google it for more information. Thanks in advance.
Thanks for this tutorial.❤❤ This is the best tutorial I found for developing a calculator, with all error handlings like no leading zeroes. Just to add up, we need to convert the current operand to a string inside appendNumber function, where we used .includes to check for a decimal, improves functionality. Replacing if (number === "." && this.currentOperand.includes('.')) { With if (number === "." && this.currentOperand.toString().includes('.')) { Once again thanks for this amazing tutorial😁😁
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
I had made my own calculator, with different methods and it works perfectly. This method is more advanced and much cleaner, easier once you grasp how the class is working. If anyone understands and can share, I'm confused on how current and previous operand is defined in the class. Specifically in the clear function. We have currentoperandTextElement defined but then we started using just currentOperand and it works but I don't understand how it is defined.
Hi :) the method "this" is able to define new keys in object's. The moment he worte "this.currentOperand" in the "clear" function, the key (currentOperand) was added with an empty string value. I recommend you to console.log the word "this", once with the word "this" in the clear function and once without and see the diffrence.
The html part, great. The css part, great, the Javascript section of the tutorial was incredibly hard to follow especially when it came to implementing the all clear function.
@WDS I've one word for your hard work - Your videos are awesome and so much knowledgeable, as I always tells to my friend look these kind of video I also have one question about the compatible. We know that my ES6 feature are not supported by old browser, In that case what we should take care about the functionality
Hey, im stuck at the part where you first implemented the javascript code and tested it. i have the code exactly like how you have it but the numbers dont go into the output(currentOperand). i even tried retyping all of the code over again. what do i do?
i am pro in c++ but haven't familarize with syntax of javascript yet. It clears me the most of things even OOP i.e class. As an expert , the code this person is typing is very mangeable and easy to understand.
Ok, you're so fast on your explanation. It could be really nice to explain slowly passing through the concepts for people that are beginning all studying on JS, because at the end we just watched an expert programming doing that easily.
The numbers append to the result of compute. So I added checking if equals is used to complete the compute then clear the results. Thanks for this tutorial.
Damn, I thought learning to code in javascript would be easy, so i started doing this whole thing side-by-side with you, but around 20minute mark, my calculator wasnt updatingCurrentOperand, right after we setted up the numbers button to add them. It just didnt wanna do that. I spent like good hour rewatching the video a bit back, trying to find what's wrong in my code and i just couldnt for the life of me find anything wrong with it. Then i got ur script code from github, copy-pasted it into my script and it also wasnt doing anything. So rn im confused, if my VSC misses an extentsion to work properly like shown in the video, is it outdated and some things about the methods changed or what?
I built this calculator and learned a lot. Last week, at information science class, the teacher told I can get an A if I build a calculator, because he didn't believe I can do this. And I got an A !😆
. 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 !
Hi there, it didn't work for my since minute 20... numbers don't show in the calculator screen :/ I've copy all just it is, and still don't work. Any guess? Thanks!
Ricardo Arros as soon as I add toString to the appendNumber mine stops functioning.cross checked it, all looks good, but console says cannot read properly ‘toString’.......
@@sullyswrldd My clear function and appending number function didn't work either, and I found a solution - change them to this: clear() { this.currentOperandText.innerText = '' this.previousOperandText.innerText = '' this.operation = undefined } appendNumber(number) { this.currentOperand = number.toString() }
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 :)
that is a sad truth. many bootcamps students end up like this. even me lol. I know people who claim to be full-stack developers because they did udemy courses, but when you tell them to build a calculator, they are clueless. It is not as simple as it seems. Better to work hard on as many projects as possible, and if you really get stuck, let;s say, for a week, find help. I got stuck on this, so here I am :D
@Josiah Eridius totally agree. It is a different story when you try to build smh on your own lmao. did you move on during this month?
@Josiah Eridius I've been learning Js from scratch for 4 months 8 hours a day and I have not noticed any improvement. I still don't get logic and some difficult parts as async.and that's just a theory.! It gets event worse when I see the real code bro...a disaster
@Josiah Eridius I know I shouldn't be freaked out but tryna grasp these concepts and struggling with comprehending them makes me question myself...
@Titan Coder its not recommended but for calculators its ok. Its a real gimme. Thats how i finished mine.
I'm not proud to admit this, but this is how I learned what AC means on a calculator.
You are not alone!
same here!!!
all clear, i was todays' years old
same bud, i was thinking that my life was useless this whole time when i just found out that ac means all clear
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
Thank you! I am really glad you enjoyed it.
@Titan Coder Try this repo: github.com/UmarAlFarooq/SimpleCalc
@Titan Coder eval is bad mmkay
thanks for the comment and your work, helps to rank developers' videos
@Titan Coder theres a reason why someone might not want to eval()
Me: I can build a calculator
Me after watching this video:I don't know Javascript
that exactly what happened to me omg i thought i knew JavaScript
LOL
same lmao
@Dominic Forest how javascript works with you???
me too lol
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 😩
yeahhh same here. this driving me crazy🤯
Bruh Counter Strike: Source is dead
Same here😂
Keep on learning. I started to learn code last oct-nov and got my first job in may. Wage suck, but as of yet so does my code.
now what you should do is go through a bunch of videos relating to concepts only. These project based tutorials are helpful to learn about practical uses for concept you may not know but they don't help you understand them. When ever you do these project tutorials you should write down on a piece of paper of the concepts and methods you were not familiar and do some research on them after wards.
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
Hey can you please explain me how is he accessing clear() function property this.currentOperand and this.previousOperand to another functions?
@@StrangerDanger352 i recommend you watch a video on how 'this' works, i think that will answer your questions
I did same thing u did on this calculator code but my was showing different things from CSS stage I crossed every code nothing was missing why I'm not getting exactly how the calculator u display looks and works pls I need to guidelines here
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.
I am trying to follow this tutorial, a beginner here.
And that was exactly my plan to add to this project, last 5-10 calculations would look cool.
currently challenging my self to turn it into a scientific calculator, the break throughs feel like I could rule the world LMAOO
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...
hey , can you update us
I was only able to actually understand what he was doing up until minute 21 or so. Feeling dumb now. >_>
@@wasserruebenvergilbungsvirus I am have a problem about at that time where my numbers are not showing up
@@bluepants8140 Did you figure it out?
@@arif2336 Nope
This is awesome, seems like you can build everything with javascript these days 🔥
You really can. JavaScript has become increasingly useful and powerful over the years.
@@c.sch.6101 world*
@@c.sch.6101 lol
@@kaifrabi5244 *designed to work and not to feel
@@WebDevSimplified embedded systems
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.
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.
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!
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 🤔?
this is not a beginners project. someone who just just starting to learn JS would not understand this at all.
@@westernpigeon Good job for this guy but I think he should use other names as the constructor's variable because when you have something like this.x =x x x this.x, you won't get a clue! I pretty much understood everything to the point when he put "this.operation" as undefined. I didn't get that. Maybe he made that assignment in order to use it later as a condition but I am not sure. Also, the last part was not so easy to understand. A very good and mind-blowing project all in one! Good job!!
@@westernpigeon I was about saying the same thing, the functionality and the concept is too advanced for a beginner. This is a real life calculator and for learning.
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.
You learned in 4 hours is what you're saying ? :)))
Wait are you saying it took you 4 hour to follow THIS guy and make a calculator
How were you not stuck after 20mins.
I can't get the output on the display@@21Dimen
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.
That is exactly correct.
@NoudvD63 Thanks for asking that. I'm new to JScript and had the same question.
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
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.
Everything is fun and games until JavaScript starts.
he's bad at explaining js in this video i guess he oversimplified it too much
JavaScript is fine enough, go see Java.
+
@@21thcenturytoad ?⏪
@Saumil no not at all
One of the best tutorials I have ever seen
like no mistakes or anything
Good job
GG
This tutorial was fine. Well explained. Sometimes you need to understand rather than copy. No programmer remembers every single line of code. +1 sub
your voice makes me comfortable. I really appreciate that you making these videos.
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!
Hey bruh will it be possible for you to share me the notes you've made?!!
it'll be so nice of you if you can...
@@lost2024 did you just refer to him as "bruh"
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.
Don't feel defeated.
Everyone's learning capabilities are different and the guy you are watching has years of experience at Javascript and programming in general.
Break the problem down, write it down if it helps, and take it slow and you'll be able to solve it.
@@ayushsoni5050 Thank you, I appreciate your supportive words a lot. It's really difficult sometimes because I started my coding journey late (I am already in my 30s) in the hopes of maybe unlocking some better career opportunities in the future for my family's benefit, so when I make a lot of effort and still fail I start to get really down on myself and think that maybe I'm just not cut out for this type of stuff. I will try to keep things in perspective and try not to rush through things, just one step at a time and keep learning something new every day.
How is it going?
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 😅
I am getting this error
"deleteButton.addEventListener is not a function"
please help
It is meant to be button.addeventlistener
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
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 am getting this error
"deleteButton.addEventListener is not a function"
please help
@@pramodreddypandiri194 This usually happens when you are missing the definition for a function. Hard to fix errors without seeing the code. Maybe you mispelled the name of the function when you defined it. You define the function like function name() {} or store it in a variable like this const name = () => {}. But basically look for your function deleteButton and make you spelled it correctly. If not go Stackoverflow your new best friend :).
@@cosme2441 hey bro, in 2 years ago you said this "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 now I'm in the same position.. how are you going with javascript today ?? you are already working in a company or something ?? thanks.
@@cosme2441 I think you are a good programmer now
@@ygaaaoo Hey hey, I am currently making a living of working as a freelancer. It's not yet that tech money but good enough I don't have a side job. Currently working on a few projects.
My advice, don't stress so much about how good you are. Just start building and study specific things as you need them when running into problems. My experience is concepts are a lot easier to learn, when you need to apply them.
Also don't give up, enjoy the process and give yourself a break when you get super stuck! But struggle a little first.
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!
still doesn't work :(
@@Sqeedys add as he said : height 100px plus a witdh 100px and then in the .span-two witdh: 200px;
try this
.calculator-grid {
align-content: center
}
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!
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
I like this course because it is so practical and useful. Thank you so much.
You are very welcome!
hear me out, lol.
I'm just literally a newbie in js, I'm even confused on what's the difference between value and variable before I start watching this tutorial. it goes well not until I reached the middle where the js is implemented (when press a button, there must be numbers that'll come out). it took half an hour or whole hour on brainstorming and repeating the same codes all over again just to fix the invisible error hahaha. but my js code remains the same as well as the result. I went back to the html part and figured out that I didn't put the “defer” after the src="script.js"._. it's the only problem I encountered. the rest did worked fine and I built my very first calculator, thanks to this tutorial. now, if it seems like there's an error on your code, I highly suggest for you to look all over again even the smallest part of your code. also, go with the flow whenever he saves the code and refresh the local server.
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.
Thank you so much for this great tutorial/walkthrough. I learned some new css, and I hope to incorporate it into some future projects. The grid is particularly nice. I'm currently adding some of my own functionality to the calculator (sin, cos, +/-, etc.) and I'm looking forward to using it with my son (4) who has been playing with numbers and calculators a lot recently. I was able to follow along with most of the javascript here, and your tutorials have been part of my growth on that learning curve. Your content is appreciated, and your vids have been a pleasant mental distraction when I need to get away from work every so often.
All the best to you! :)
At 21:15 when I click on buttons nothing shows in the output. I really don't know what I'm doing wrong.
i encountered the same problem.
any leads on how you rectified it
same needs help.
I came for the calculator, but I left with much more. Thank you for explaining all you do!
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.
Moreover, you can just keep typing "answer"
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
idk if that was a typo, but its defer inside the script tag and not "deter", should work now
@@pareekshithachar3788 Thanks so much!! XD
Did it, still face the same issue, google isn't helping me with the error either.
I tried to console log the button inside the event listener and it gave me this:
:
:
:
Uncaught TypeError: Cannot set properties of undefined (setting 'innerText')
at Calculator.updateDisplay (script.js:32:46)
at HTMLButtonElement. (script.js:57:16)
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
Thank you so much. I've learned a little more about CSS and programming style. You're a real good teacher.
That is awesome! I'm really glad my videos are able to help.
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.👨🏫
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()
}
Ya I also had same problem
Thank you for the fix!
Ya I also had same problem.
it's a mystery to me why the author has no problem (Undefuned.toString() Problem!!)
my code is better, it is on point click. will add 0.
appendNumber(number){
if(this.currentOperand === undefined){
this.currentOperand = number;
}
else if (number === '.' && this.currentOperand.includes('.')){
return
}
else if (this.currentOperand === '.') {
return this.currentOperand = '0.'+ number
}
else {
this.currentOperand = this.currentOperand.toString() + number.toString()
}
Thank you for the fix!
had the same problem, thanks for the fix mate!
decided to remake this using svelte. My 2 rules with using svelte are:
1. no selecting elements using document.query
2. if something needs to be cloned multiple times create a component for it (and make a list that will bind to that element to comply with rule 1)
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
The channel really deserves it's name. "Web Dev Simplified"!
I've had to wait 33 years to find out that AC stands for All Clear ^^
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!
This is so overwhelming 🤯
We have to have strong fundamentals. Be toughest 💪
This course is really helpful, but I've found one little problem. When you make any calculation (afther pressing '='), and if you enter another number it just adds it to the equation we calculated. It can be fixed by adding new variable (var equalChecker) and in the compute method you set the value to 1, and check the value in appendNumber method. If the value is 1 it changes currentOperand in just number.toString(), and the value of equalChecker is reset to 0. I think it's just nice upgrade to the program. I don't mean anything bad with this comment just wanna help a little bit. Have a great day!
Excellent tutorial that’s not too long or complicated. Definitely helpful when starting up with concepts. Appreciate it, bro! Long live! :)
no to long
i think this is the best of the calculator samples i have found on youtube ,Thank you!
AWESOME!!! Very practical tutorial and easy to understand. hope to see more tutorials like this.
Thank you. There are a ton more tutorials just like this one on my channel to checkout and plenty more coming.
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.
great video (as usual)
i have a question: where does 'currentOperand' from 'this.currentOperand' come from? i never saw you initialize/create it
In javascript you do not need to initialize a variable on an object. If you do not set a variable on an object it will default to undefined.
I had the same thought when I was watching the video. He created it to store the incoming values. By saying this.currentOperand he essentially initialized it there. It was an empty variable to be used later.
dude that slide in at the start was clean
"All we need to do is create some files". Web dev simplified indeed ;-)
😂
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!!
when did he create currentOperand and previousOperand variables? I dont see it anywhere
At the very beginning. Go to 0:00 and just watch for like 2-3 mins. You should find it
@@benfichter5351 those are the classes of the divs you're talking about (current-operand and not currentOperand), he's asking about the variables that appear out of 'nowhere' at 18:51. Good explanation can be found in another comment here (comment chain starting with the comment of shubham).
I don't understand either, how these currentOperand and previousOperand works!
He created them in the clear() function
in the constructor
Beautifuly done, im learning a lot with your javascript projects, even the 'old' ones! Thanks man, you're great
I am getting this error
"deleteButton.addEventListener is not a function"
please help
I'm a beginner and have been struggling with how to get the functionality in place. This helps (I want to try and build it without copying), but I have 2 questions:
1. How do you know when to use classes? Can this be done without classes?
2. Does this JS code take operator precedence into account (which happens when you use your mobile and built-in calculator app, for example)
clases in javascript are not important, you can create the same thing without using them.
there are more tutorials out there on youtube that don't use clases at all.
yeah! different programmer uses different logic's
I really liked the video. I went step by step through the video and made the same one myself. There are still a few bugs in this calc. I am a beginner so I do not have much idea about how to fix them. It would be great if you made another video fixing these bugs and adding a couple more features on this calc.
Some of the bugs that found doing a couple of calculations are:
1. If we enter an operator after a number, for example, a '+' but then we want to put multiply sign '*', it does not update and stays on '+'.
2. When we get an answer after pressing the equals button, and then we want to enter another value, instead of clearing the current operand and starting from the blank, it joins the current operand and that becomes a bigger number.
3. It is really frustrating to use the calculator without a cursor. We can only erase things from one end instead of where we want.
4. If we enter an operator after a number and the current operand becomes the previous operand, and then we want to go to the previous operand and change something there, we cannot do that by pressing the delete key. That number just gets stuck there.
5. It would be great if we can enter the values on the calc through our keyboard instead of clicking on the screen.
If there was a git repo, we could compare what the final result is to what was typed in the typealong section. Other than that it was good job. Devesh, if you post your final set of code in a repo, I can at least compare against my typealong version.
Really Awesome tutorial!!. So much functionality in just 38 mins ...This is by far the best and complete Calculator tutorial..
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
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)
just finished coding-along with the video! 3 years later and I hope I'm not too late :D
I'm gonna learn more about JS and come back to this project and improve a few things:
- after clicking the "=", the result should be immutable - right now if you enter a few numbers after the calculation, the numbers will be appended to the result
- hitting "=" multiple times will repeat calculations
- a history panel for the recent calculations (store in local memory and persistent even after closing the browser)
thank you for the inspiration!
Damn brilliant the way you just plough through the code and add it on the fly in a precise sequential manner. Kudos!!
On the fly? Don't think so. rather there's more work than we think, making videos like this takes some time and dedication, and of course a lot of hard work behind the scenes.
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.
Hello, this is awesome tutorial. i learnt more things about Javascript, but I have one question. how currentoperand previusoperand and operation works since they aren't defined.
thank you
That drove me crazy as well. Its just the class's properties but you don't explicitly define them. Instead of declaring it inside the Calculator class, you are just declaring and assigning at the same time. What I didn't understand was how the hell happened that if I modify this.currentTextOperand it also modified my currentTextOperand innerText property of my html element. I didn't quite got that...
@@sonagi98 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.
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.
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.
Thank you a lot. I haven't met such a high quality content about practical JS on UA-cam. Keep it up!
There must be something you're missing out because at 20:45 when it comes to testing, none of my buttons work like yours do. I click on a button but it does not respond and append to the current screen! I've been starring at my code for ages but looks like I've followed everything to a tee. Please help
I have same issue. I don't know what to do now.
Wow. I'm getting really good at watching these JavaScript tutorials.
Haha same
@@AssasynCounterExtrem I decided to do a WebDev udemy course and I can actually make basic websites now 😊
@@lukes5631 do you have a job? I don't. I m in a pitfall
It's a great tutorial but I noticed a small bug if we click on decimal point and then directly click on any operation it should prevent that but it doesn't. For example if we enter '.+' if should not allow it but it displays it in previous operand text element.
I fixed it by adding another OR statement in chooseOperation method like this:
const decimalDigitsString = this.currentOperand.toString().split('.')[1];
if(this.currentOperand === '' || decimalDigitsString === '') return;
It solved the problem for me.
great but i have another problem if you can help me
Uncaught TypeError: Cannot set property 'innerText' of null
at Calculator.update_display ()
at HTMLButtonElement.
i'm getting this problem the value does not go to update display function
@@dexterkhan1293 Do you get this every time you click some button or after clicking certain button or operation?
@@ayeshayaqoob8084 no i get error when i click on number buttons only not on others buttons
@@dexterkhan1293 check with the line number bro compare it with actual code
@Ayesha Yaqoob This is a great fix bro
Huge fan of you and your work Web Dev. I actually noticed the other day that you even take the time to format your videos playback rate to move a little faster. I enjoy your style of content delivery as well as your structure in your workflow as you move throughout your demonstration in your videos. To be honest im very impressed with your productions, but most importantly I really appreciate your hard work and your content for your my primary source I turn to for the youtube web dev content. It would be cool if you mentioned your other pipelines in your videos such as your github or linked in to be able to network with you on different levels. Keep up the awesome work Kyle. Plus also its cool you always make your production with Dragon Ball Z OG hair styles.
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.
Can you share what basics And methods you back to learn
Kinda understand the basis but, what if we want to make multiple operation in one go before click the equal button?
For example like this :
123 + 456 * 789
Based on the code you've explained, it will computate the addition first, because the code serve the first come, not by the computation that the user expected. Likewise when multiple operation used in a single line like 1 + 2 - 3 * 4 / 5 + 6 - 7 * 8 / 9 etc... we got multiple operation which the multiplication and division has to be computated first before addition and subtraction
I would be like to hear some explanation logic regarding this opinion of mine
Btw, your videos really inspire me a lot, big thanks Sir
Dude, such an informative and easy to follow 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!
absolutely loved this tutorial!!! THANKS SO MUCH.
Wow. I got it to work.
Way back in 1995 or so people asked me if I could please, please help them with page layout using tables and this new thing called frames.
I do have progress a bit but it is nice to see a full example of many modern practices.
Could you please add some references to other videos where each technique used is explained in more detail?
A link next to each of the Concepts covered would be great.
Another thing that could be useful is the correct name of the tricks/techniques used so we can google it for more information.
Thanks in advance.
I know I'm late but holy crap dude, thank you so much. You've been a massive help
Thanks for this tutorial.❤❤ This is the best tutorial I found for developing a calculator, with all error handlings like no leading zeroes. Just to add up, we need to convert the current operand to a string inside appendNumber function, where we used .includes to check for a decimal, improves functionality.
Replacing
if (number === "." && this.currentOperand.includes('.')) {
With
if (number === "." && this.currentOperand.toString().includes('.')) {
Once again thanks for this amazing tutorial😁😁
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
Use word-break on your output div in your CSS just as he showed in the tutorial and your
numbers will move onto the next line.
I have watched many JS build calculator videos, and this is definitely one of them.
I had made my own calculator, with different methods and it works perfectly. This method is more advanced and much cleaner, easier once you grasp how the class is working. If anyone understands and can share, I'm confused on how current and previous operand is defined in the class. Specifically in the clear function. We have currentoperandTextElement defined but then we started using just currentOperand and it works but I don't understand how it is defined.
it works because of the appendNumber function
I tried many times but didn't work! can you please help me
@@hanishmuhammed5454 Where is the problem?
i have the same problem.
Hi :) the method "this" is able to define new keys in object's. The moment he worte "this.currentOperand" in the "clear" function, the key (currentOperand) was added with an empty string value. I recommend you to console.log the word "this", once with the word "this" in the clear function and once without and see the diffrence.
The html part, great. The css part, great, the Javascript section of the tutorial was incredibly hard to follow especially when it came to implementing the all clear function.
Everybody gansta till it's time for JS
I've just been watching some html and css videos to learn it and this has helped me start to understand javascript
@WDS
I've one word for your hard work - Your videos are awesome and so much knowledgeable, as I always tells to my friend look these kind of video
I also have one question about the compatible. We know that my ES6 feature are not supported by old browser, In that case what we should take care about the functionality
Hey, im stuck at the part where you first implemented the javascript code and tested it. i have the code exactly like how you have it but the numbers dont go into the output(currentOperand). i even tried retyping all of the code over again.
what do i do?
same
same
Try putting this
document.addEventListener(
"DOMContentLoaded",
function() {
//code
});
same
@@danial9864 thanx, works for me I put { before everything in JavaScript and close this script } ) after all javascript
i am pro in c++ but haven't familarize with syntax of javascript yet. It clears me the most of things even OOP i.e class. As an expert , the code this person is typing is very mangeable and easy to understand.
Ok, you're so fast on your explanation.
It could be really nice to explain slowly passing through the concepts for people that are beginning all studying on JS, because at the end we just watched an expert programming doing that easily.
You can reset your playback speed to become slower, I do that.
@@adaezeikemefuna9592 explaining fast means he doesn't mean that he is talking fast. 😂😂 he is explaining the concepts quickly.
Interesting about Calculator: ua-cam.com/video/m2uz52bEWRs/v-deo.html
He talks fast too@@Ro19975
Awesome tutorial to practice JS in web design for beginners! Thank you so much!
The numbers append to the result of compute. So I added checking if equals is used to complete the compute then clear the results.
Thanks for this tutorial.
Damn, I thought learning to code in javascript would be easy, so i started doing this whole thing side-by-side with you, but around 20minute mark, my calculator wasnt updatingCurrentOperand, right after we setted up the numbers button to add them. It just didnt wanna do that. I spent like good hour rewatching the video a bit back, trying to find what's wrong in my code and i just couldnt for the life of me find anything wrong with it. Then i got ur script code from github, copy-pasted it into my script and it also wasnt doing anything. So rn im confused, if my VSC misses an extentsion to work properly like shown in the video, is it outdated and some things about the methods changed or what?
same here, the js stopped working when appendNumber was modified to convert the numbers to string.
@@milananderle4400 same
you forgot this.clear() in constructor so during first call of appendNumber the this.currentOperand is of type undefined that why
@@pranavjibhakate5869 no that is not why
@@bluepants8140 that was the problem for me atleast
Kyle, thank you so much, I was able to refactor my css quite a bit with this information.
I built this calculator and learned a lot. Last week, at information science class, the teacher told I can get an A if I build a calculator, because he didn't believe I can do this. And I got an A !😆
. 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 !
Outstanding tutorial! Thank you.
You're welcome
Oh man you are awesome, I enjoyed a lot while watching your tutorials.
Hi there, it didn't work for my since minute 20... numbers don't show in the calculator screen :/ I've copy all just it is, and still don't work. Any guess? Thanks!
Ricardo Arros as soon as I add toString to the appendNumber mine stops functioning.cross checked it, all looks good, but console says cannot read properly ‘toString’.......
@@rusmw Yeah, I have the same problem.
@@sullyswrldd My clear function and appending number function didn't work either, and I found a solution - change them to this:
clear() {
this.currentOperandText.innerText = ''
this.previousOperandText.innerText = ''
this.operation = undefined
}
appendNumber(number) {
this.currentOperand = number.toString()
}
@@aidenpd1006 Your a Godsend m8, thanks
Aiden Deffner mine still doesn’t work :((
Could it be something in the HTML?