• Thursday , 21 November 2019

Build A Calculator With JavaScript Tutorial

Code Canyon



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

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

📚 Materials:

Code: https://github.com/WebDevSimplified/Vanilla-JavaScript-Calculator

🧠 Concepts Covered:

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

🌎 Find Me Here:

Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified

#JavaScript #WebDevelopment #Programming

Original source

3d Ocean

Related Posts

32 Comments

  1. Romeo
    October 23, 2019 at 18:03

    It's a bit difficult way to make calculator for me. So many CSS values and pieces of JS that I haven't learned yet. But anyway thanks.

  2. Pspisripoff
    October 23, 2019 at 18:03

    I love javascript, cuz it NEVER WORKS and when it doesnt work IT GIVES NO HINTS why its not working

  3. kit live
    October 23, 2019 at 18:03

    class calculator{
    constructor(previousOperandTextElement, currentOperandTextElement){
    this.previousOperandTextElement = previousOperandTextElement
    this.currentOperandTextElement = currentOperandTextElement
    this.clear()
    }

    clear(){
    this.currentOperand= ''
    this.previousoperand = ''
    this.operation = undefined
    }

    delete() {

    }

    appendNumber(number){
    if (number === '.' && this.currentOperand.includes('.')) return
    this.currentOperand = this.currentOperand.toString() + number.toString()
    }
    chooseOperation(Operation) {
    if (this.currentOperand === '') return
    if(this.previousoperand !== ''){
    this.compute()
    }
    this.operation = operation
    this.previousoperand = this.currentOperand
    this.currentOperand = ''

    }

    compute() {

    }

    updateDisplay(){
    this.currentOperandTextElement.innerText=this.currentOperand
    this.previousOperandTextElement.innerText=this.previousoperand

    }
    }

    const numberButtons = document.querySelectorAll('[data-number]')
    const operationButtons = document.querySelectorAll('[data-operation]')
    const equalsButton = document.querySelector('[data-equals]')
    const deleteButton = document.querySelector('[data-delete]')
    const allClearButton = document.querySelector('[data-all-clear]')
    const previousOperandTextElement = document.querySelector('[data-previous-operand]')
    const currentOperandTextElement = document.querySelector('[data-current-operand]')

    const calculator = new calculator(previousOperandTextElement, currentOperandTextElement)

    numberButtons.forEach(button => {
    button.addEventListener('click', () => {
    calculator.appendNumber(button.innerText)
    calculator.updateDisplay()
    })
    })

    oprationButtons.forEach(button => {
    button.addEventListener('click', () => {
    calculator.chooseOperation(button.innerText)
    calculator.updateDisplay()
    })
    })

  4. Rinku Chaudhari
    October 23, 2019 at 18:03

    really great video i've learned a lot of new things about JS. Thanksss❤

  5. Deorabbin Jibe Asuncion
    October 23, 2019 at 18:03

    2nd try: how can i add a negative input function?

  6. Le Gend
    October 23, 2019 at 18:03

    Master, Accept my humble Respect from Bangladesh 💘💥

  7. hassan abdullah
    October 23, 2019 at 18:03

    What i have to do If i want to add sin cos and tan funcation?

  8. Zain Ansari
    October 23, 2019 at 18:03

    please give the code i copied the exact thing but its not coming same i am using sublime text 3

  9. ahmed Rukon
    October 23, 2019 at 18:03

    How do I round out the edges of buttons in calculator?

  10. IDEAL_MINDS
    October 23, 2019 at 18:03

    Am having issues calling my "calculator-grid"

  11. Noman Abid
    October 23, 2019 at 18:03

    can you slow down? nobody's running on ya!

  12. Gabby Cepeda
    October 23, 2019 at 18:03

    Great tutorial! Wondering if there's a reason why you didn't put the script tag at the bottom of the body instead of deferring it?

  13. Azim Lit.
    October 23, 2019 at 18:03

    You're a genius!

  14. Ali Çelebi
    October 23, 2019 at 18:03

    Excellent video! More please 🙂

  15. Michele Zucca
    October 23, 2019 at 18:03

    Thanks a lot for another great tutorial! One thing many have probably pointed already, in my opinion, you should really work on the pace of your speech, you speak extremely fast when explaining things, and slowing down the playback time it's quite annoying cause the voice is all distorted (imo). This might cause some viewers to quit your tutorial halfway through. Your content and logic are great and clear, and the use of data instead of classes in HTML for the reference in JS is super smart. Keep up the great work, you're killing it!

  16. Jkzubayer Hossain
    October 23, 2019 at 18:03

    How to writing coad
    Software name?

  17. Josh Unwin
    October 23, 2019 at 18:03

    I had to wrap my code within a window.addEventListener('load', function) to get it work, any idea why?

  18. Dimitrije Zivkovic
    October 23, 2019 at 18:03

    How he can use in clear function (this.previousOperand, this.currentOperand) when he defined it like a this.previousOperandTextElement and this.currentOperandTextElement because it's two different functions? Don't get it

  19. Aunort Ryder
    October 23, 2019 at 18:03

    Nice video, but In the very begining you executed 32+69 giving you the result of 101, then you multiplyed it by 36 and somewhat got 3.636 instead of 3636. But after you clicked "delete" it deleted the last charcter -> the result became 363 like it was correct result but had visual comma bug. Why so?

  20. Raul Barriga
    October 23, 2019 at 18:03

    Thanks for including the code below the video. By the way, on your code, the division on the js file compute switch statement needs to be the same as the html file.

  21. Camboi52
    October 23, 2019 at 18:03

    in my html file, my <script> tag is red for some reason. I think it's formatted correctly, but for some reason it's red. I need a fix because it doesn't output correctly

  22. Vitor Marques
    October 23, 2019 at 18:03

    Can anybody give me a light? I can't click on any of the numbers on the calculator 🙁 the code is correct but I can't click on the numbers.

  23. Norbert Mor
    October 23, 2019 at 18:03

    Cool! I added four buttons for memory support: mc, m +, m-, mr.
    I have expanded the delete method so that it also allows you to delete the operator and the previous number: https://codepen.io/abmstudio/pen/oNvwPWV

  24. Mark Hunt
    October 23, 2019 at 18:03

    i have one problem so far… 🙂 I stopped on 22min. console log give me this error = Uncaught TypeError: Cannot read property 'toString' of undefined
    at Calculator.appendNumber (main.js:13)
    at HTMLButtonElement.<anonymous> (main.js:44)

  25. Pratap Singh Rathour
    October 23, 2019 at 18:03

    Why it is showing – document is not defined in script.js file..where we are declaring variables

  26. [GD] Sigatarius
    October 23, 2019 at 18:03

    im getting errors all over the place in the CSS file ;-;

  27. Beau Sherman
    October 23, 2019 at 18:03

    Hey great job on the tutorials! I learn more from your projects than from many of the online courses I take! Do you have a recommendation for which order to watch your JavaScript project tutorials in if you're a beginner? Like from easiest to hardest? Thank you!

  28. 이태혁
    October 23, 2019 at 18:03

    Thank you so much. This video is SO HELPFUL.

  29. Link Chen
    October 23, 2019 at 18:03

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

  30. Jake Punton
    October 23, 2019 at 18:03

    Very thorough tutorial. Great work.

  31. renan brayner
    October 23, 2019 at 18:03

    finalmente um branquinho gostoso não tava mais aguentando indiano nessa porra

  32. Vasyl Malendevych
    October 23, 2019 at 18:03

    I'm stuck at 5:54, nothing changes after I add gradient.. when I try to open With Live Server. I thought I made some mistakes but I copied your source code and tried to Live it, still all I get is the result at 5:54

Leave A Comment

You must be logged in to post a comment.