In this tutorial, you will learn to use Vue.js to create a basic calculator component inside a web browser.
🔗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
This Post Has 32 Comments
Why my calc cant event revert back when i am pressing the 'sign' button like your's?
Hi, thanks for the video. What editor are you using? Thanks in advance.
Wow, this made my vue learning journey a lot more enjoyable. I didn't know we could do these things.
I really just wanna know how to edit multiple lines specifically like he did here 18:44
Unfortunately with this project we use very few of Vue features.
append('1') – why no to get event.target.innerText ?
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 ….
Presenting at 1.25x speed by default. I like that.
didn't anyone notice the critical bug with this is that if you press 1 + 1 + 1 and then press equal, you get 2..
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 ?
This is brilliant.
This is brilliant.
yeah ,this is good example for VUE，thank you buddy!
in 20 minutes!
Hey man, thanks for a great video.
Is there a reason you don't use .concat() ? or just personal preference?
Awersome tutorial ❤️ we want more vuejs project ☺️
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?
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!
Its quite difficult. At least for me.
awesome! keep building more vue apps !
I love you so much
Instead of typing a string with number each time you can do
<div class="button" @click="type($event)">4</div>
this.result += parseInt(e.target.innerHTML);
My solution for checking whether the dot exists
// Append Dot only if it doesn't exist
let symbol = e.target.innerHTML;
this.result += e.target.innerHTML;
50/4 = 0.8 🧐
Good for displaying vue, but terrible ui/ux
I don't really understand the operator part. How does it know what a and b are?
this.operator = (a, b) => a * b
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
Hi, avesome tutorial. Thanks.
How do you know someone’s using Apple? They’ll tell you.
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
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. 😁🙌🏽