Build A Calculator With JavaScript Tutorial
Why Stack Overflow recommends it
Stack Overflow users link it as a beginner-friendly calculator project to follow along with, and many questions come from people who coded along and got stuck.
Recommended by 2 people across 2 different months, 2020 to 2023.
What it is
A 39-minute tutorial by Web Dev Simplified that builds a complete calculator in plain JavaScript, using ES6 classes to organize the code, CSS Grid and Flexbox for layout, and techniques for handling user input and edge cases. Source code is provided on GitHub.
What people said
Recommends YuTing · 2021-08 · Stack Overflow · on “HTML/JavaScript Convert Strings to Numbers”
You can try split to split number and operator, then the string will be easier to handle. For example: inputString is equal to 11+12 let result = 0; let stringArray = inputString.split(/[\+\-\*\/]+/); \\ ["11", "12"] let firstNumber = parseFloat(stringArray[0]); \\ 11 let secondNumber = parseFloat(stringArray[1]); \\ 12 let operator = inputString.replace(/[0123456789.]/g, ''); \\ "+" switch (operator) { case '+': result = firstNumber + secondNumber; break; case '-': result = firstNumber - secondNumber; break; case '*': result = firstNumber * secondNumber; break; case '/': result = firstNumber / secondNumber; break; } Or you can just checkout this Build A Calculator With JavaScript Tutorial [
Recommends Sütemény András · 2021-09 · Stack Overflow · on “I want to create a simple calculator in jQuery”
First you have some problems on the html code too... no TR, TD closing tags, BR is strongly not advised to place like this... and I assume your basic knowledge in javascript, and problem solving is lacking of experience. But don't give up! Programing is fun. Try to do some vanillia JS for practising first before JQuery. Or try to follow along some tutorial video like this one: [this video]
Cites nirajan kharel · 2020-06 · Stack Overflow · on “What problems do JavaScript Classes solve?”
Hi Brad, thanks for the answer. And yes, as a beginner learner, I was watching a JavaScript tutorial on building a calculator( [this video] ). I just couldn't wrap my mind around the reason instructor would use class in his project. And in this class object the key: value pairs are previous and current digit in calculator. Apologies for my grammar.
Cites Ryu Hiroyama · 2022-06 · Stack Overflow · on “Why does my Vanilla JS Calculator's number change at the 17th digit?”
It's a basic calculator made by the youtube channel Web Dev Simplified. He did a [this video] on it, which I followed along and basically made the same thing. Both his example calculator and mine has the same problem, where if I pressed on any of the number buttons (for example '1') 17 or more times, the numbers entered after the 16th digit displays as a different number for some reason (17th digit becomes '2' and not '1'). It does this with any number entered. I don't understand why. I attached a codepen link [LINK] so that you can see both his code and the code output. You will find the display output in this part of the HTML code: <div class="output"> <div data-previous-operand class="previous
Cites Fricken00b · 2022-11 · Stack Overflow · on “I cannot get the html doc to load the javascript to make my calculator working”
I've followed this calculator video on YouTube. I have 3 files in a folder .html, .css & .js. I open the calculator by double-clicking the HTML file which seems to load up fine in opera with the CSS changing the appearance, however the functionality of the buttons do not work at all. Now I have double-checked the code and even gone as far as cheating with the resource material to be sure it's not an error in the code. I feel that the JavaScript isn't being read/used at all when it loads up. [this video] class calculator { constructor(perviousOperandTextElement, currentOperandTextElement) { this.perviousOperandTextElement = perviousOperandTextElement this.currentOperandTextElement = currentOperand
Cites peulers number · 2023-10 · Stack Overflow · on “Running into a problem when adding following line”
I just started with Programming and watched this tutorial to build a Calculator with Java script: Here:( [this video] ) I am almost at 24:12min in the video, but I encounter a problem after putting in the next line of code that he mentions after 24:12 min. The UpdateDisplay function does not work properly for me. Before typing this "this.previousOperandTextElement.innerText = this.previousOperand" everything works fine. But after that my numbers from my input dont get displayed anymore at all. class Calculator { constructor(previousOperandTextElement, currentOperandTextElement) { this.previousOperandTextElement = previousOperandTextElement; this.currentOperandTextElement = currentOperandTextEleme