D4mations.com

Build A Calculator With JavaScript Tutorial



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

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

📚 Materials:

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

d4mer

, , , , , , ,

32 responses to “Build A Calculator With JavaScript Tutorial”

  3. 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()
    })
    })

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

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

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

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

Leave a Reply