Build a Calculator with Vue.js

--

[RobertHolak]

In your equal() method you need to switch the order of current and previous. Otherwise 10 / 5 comes out to 0.5 instead of 2. Aside from that little logic bug, this was really helpful since I am learning Vue at the moment myself.

[Update] I was going to make a pull request but there's already one there for this bug.

[a_rob]

Hi, in the equal function 'this.previous' should be the first and 'this.current' should be the second argument
equal() {
this.current = `${this.operator(parseFloat(this.previous), parseFloat(this.current))}`
this.previous = null
}
otherwise, minus operator will give you inverted results.


thank you for you great work.

[cigomba]

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!

[i_youtube_]

Awesome tutorial as a simple overview on how vue.js works. Thank you.

[AccessCode]

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

[SilvetaGui]

Very nice tutorial. However, the part who took my attention was definitely your fluency using your editor.

It even made me question if I should make the switch from IntelliJ to VSCode.

[stevenkennedy]

Great intro video, thank you! Will be sharing

[raymondpcspangcheeseng]

thx for giving the code and sharing this calculator

[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. 😁🙌🏽

[RandallWhite]

I think a good next step would be to show how this calculator could be made into a component for nesting into a larger project. Thanks for the video.

[Deliverant]

Hey cody thanks for the video, do you have any plan on a new big Fullstack project like the one you did with vue+express? This time maybe with nuxt, would be the best thing ever

[hiyayacko]

Thank you for sharing. This video is great for learning Vue.js!

[alexcubed]

21:13 “50 divided by 4 equals 0.08”
You switched the a and b in the calling the operator function. A should be previous and b should be current

[Romeo-vthq]

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 +=
},

[enginedavey]

Another suggestion could be to enhance the app to use vuex to show state management in vue. By the way great video. I built a similar app using vanilla js and it took me a lot longer than 22 mins. Vue is great!

[blackblock]

you can enter +/- (I am on Windows) on mac by shift pressing key under escape.

[saurabhhchavan]

Awersome tutorial ❤️ we want more vuejs project ☺️

[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?

[eyadbereh]

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

[saelfaer]

what's up with the operator clicked state... why does the append method need to check that. your setPrevious could just as well reset current instead of setting an operator clicked flag no?