Build a Calculator with Vue.js



In this tutorial, you will learn to use Vue.js to create a basic calculator component inside a web browser.

💻Code: https://github.com/codyseibert/vue-calculator

🔗Check out Cody Seibert’s main channel: https://www.youtube.com/channel/UCsrVDPJBYeXItETFHG0qzyw

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 32 Comments

  1. Ashto

    I’m new to vue.js but this kinda is a JavaScript tutorial. I mean like is this how vue.js is?

  2. Access Code

    Wow, this made my vue learning journey a lot more enjoyable. I didn't know we could do these things.

  3. naspy971

    Unfortunately with this project we use very few of Vue features.

  4. Óðinn

    append('1') – why no to get event.target.innerText ?

  5. Aishah Yusra

    how do u change multiple div class names at same time , or how to select multiple div and put same class name at the same time ….

  6. Scorpion Edge

    didn't anyone notice the critical bug with this is that if you press 1 + 1 + 1 and then press equal, you get 2..

  7. Mr.Yellow

    why I cant click the divs as he did ? I added my click function but it doesnt work. Should I replace those divs to button ?

  8. 大西瓜

    yeah ,this is good example for VUE,thank you buddy!

  9. Hey man, thanks for a great video.
    Is there a reason you don't use .concat() ? or just personal preference?

  10. Diego Almeida

    Great video! I'm just starting with Vue.js and was wondering what is the criteria for deciding how to divide an app into reusable components. For example, could I create a Vue component for the keys called keyComponent and each key of the calculator would be an instance of this Vue component?

  11. Cigomba Miler

    Thanks for sharing. This is the easiest implementation of a calculator webapp that I have found so far and I was able to follow it throughly even though it was my first time using Vue.js. Thanks again!

  12. Romeo

    Instead of typing a string with number each time you can do
    <div class="button" @click="type($event)">4</div>

    and then

    type(e) {

    this.result += parseInt(e.target.innerHTML);

    },

  13. Romeo

    My solution for checking whether the dot exists
    // Append Dot only if it doesn't exist

    dot(e) {

    let symbol = e.target.innerHTML;

    if(!this.result.includes(symbol)) {

    this.result += e.target.innerHTML;

    }

    }

  14. Harrison Fok

    I don't really understand the operator part. How does it know what a and b are?
    this.operator = (a, b) => a * b

  15. I don't really care about what this calculator is missing, the most important objective is to understand the concept here, and i think this video pretty much explains it
    Thanks for the great explanation

  16. Max Ron

    How do you know someone’s using Apple? They’ll tell you.

  17. JOHN

    1:1 error Component name "Calculator" should always be multi-word vue/multi-word-component-names

    why this is happening and how do i fix this? ty

  18. KidBrave_

    Great video, I'm just checking this out a a year later trying to find out if I want to learn react or vue and so far vue looking really fun to start building web applications. 😁🙌🏽

Leave a Reply