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: github.com/codyseibert/vue-ca...
🔗Check out Cody Seibert's main channel: / @webdevcody
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: medium.freecodecamp.org

[@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.

[@tinaj1323]

Thanks, now is my equal function perfekt!!

[@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.

[@zraffens5145]

Random question: How'd you get verified just with 3 subscribers?

[@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.

[@AccessCode101]

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

[@elpolodiablo5486]

Stfu

[@Romeo-vt8hq]

Instead of typing a string with number each time you can do 4 and then type(e) { this.result += parseInt(e.target.innerHTML); },

[@stevenkennedy8609]

Great intro video, thank you! Will be sharing

[@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.

[@raymondpcspangcheeseng7410]

thx for giving the code and sharing this calculator

[@hiyayacko]

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

[@kidbrave_7673]

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

[@alexcubed4270]

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

[@JamesMarks]

Seconded

[@_ifly]

did you have solved this problem can you share.

[@alexcubed4270]

@@_ifly equal() { this.current = `${this.operator( parseFloat(this.previous), parseFloat(this.current) )}`; this.previous = null; }

[@malamhari_]

@@alexcubed4270 thanks

[@jamlizzy101]

Totally agree

[@RandallWhite434]

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.

[@saurabhhchavan]

Awersome tutorial ❤️ we want more vuejs project ☺️

[@AwesomeAdijos]

we want more projects with vue :D

[@zinaright]

Sold to VueJs, finally! Thanks

[@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!

[@00el04]

awesome! keep building more vue apps !

[@user-go8cr9wz4z]

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

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

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

[@ki85squared]

Implementing a calculator with strings? That's a bold move, Cotton...

[@devingray1761]

*strategy

[@IsraelCena]

Thanks for demonstrating

[@EnricoDeleoOfficial]

I would have based the calculator on numbers not strings. When I saw the sign() method implemented with character comparison I fell down from my chair :) the right way of switching sign of any number is to multiply it by -1 so it should be this.current * -1

[@TheSETJ]

You've developed a calculator in 20 minutes, that's awesome. Thanks. BTW, it's good if you create another video, developing the same calculator completely, and going into details and best practices.

[@blackblock7583]

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

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@nlt152]

css grid is awesome!!!!!!!!!!!

[@kamalhm-dev]

flexbox is better, fight me

[@nachnamevorname9801]

isnt flexbox just a css grid with one row/column?

[@Ipkpjersi]

Flexbox and CSS Grid are supposed to be used together, they are not competitors.

[@helshabini]

CSS grid is a god send.

[@steverichter1546]

that was outstanding.

[@cliffe_rocker]

This is brilliant.

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

[@jannovaczek3927]

Hi, avesome tutorial. Thanks.

[@kimcodemonkey]

awesome. thanks for sharing..

[@ruspinaspark2549]

Thanks for your informative video in sign method you can multiple this.current *-1 :)

[@user-rx7st2do6p]

Cool, I love grid.

[@ChiakiNanami736]

I understand skipping setup in the video itself, but giving the options used for the Vue CLI in the video's description would have been nice.

[@Ipkpjersi]

He still hasn't given them. Lame.

[@dabhiridaniel847]

make sure you have node js installed then use cmd to install : npm install -g vue-cli

[@krave96]

Hello! You've made a great and simple video. But there's a bug that you don't show on video - if you want to type a new number after calculating, it appends to the result instead of clearing the display)) I fixed it by adding a new variable "Result" to data() and a condition to append() method. Thank you for the video, please continue to do such tutorials. I can suggest you to make an audio player using HTML5 audio and Vue.js

[@_ifly]

great job it solved the division problem too. before this when i was dividing 8 /4 = 0.4 now ok

[@boazcstrike]

Thank you sooo much! :)

[@devIsAjourney]

awesome video

[@user-ru8bq6vl5t]

thanks you for sharing

[@taslimoseni2231]

Had to reduce the speed to 0.5 so I could catch up, nice video though!

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

[@vincentyoumans]

Good job... how about some videos on doing Menu's and Routing. Ideally vue.js . single page . where we just slide a card out of view and transition a new card for its place.

[@LukiausdemKaff]

Hi, thanks for the video. What editor are you using? Thanks in advance.

[@KenKopelson]

Well, first of all, thanks for making this tutorial. I wanted to offer some helpful advice if I may. This is not meant to attack you, or to minimise the nice job you did in presenting the material. What I'd like to offer is the thought that perhaps it would have been much simpler and easier to understand if you had used a "number" data type for a "total" field, and also a "number" data type for the "current" field, which is the current field being entered. It doesn't seem that a "string" type is the right type for a calculator, which is meant to calculate numeric values. For example, if you had made the variable a number, then you could have done the '%' function as: "this.total /= 100.0", and that would be it. When a person presses an operator, you would store the operation into a variable, (such as addition for '+'), and then before you change to a new operator you resolve the current one. You would have to implement a calculation stack if you wanted to support proper operator precedence. You could also have a "total" variable that contains the current total, which is different from the "current" value being entered. To add a new digit to the present "current" you could then do the formula (current * 10 + digit). By doing this, you avoid all this parsing of strings. Javascript is capable of displaying number values easily, either with floating point or with fixed point. i hope this was helpful.

[@iNVICTUX]

Thanks!

[@miroslavmakhruk4102]

You should switch previous and current in your equal method. 50 divided by 4 is 0.08 - it should've rang a bell haven't it?

[@dennyluckes4783]

thank you man!!!! great job, it work!!!

[@anroopvullampathi]

Hii , Thanks for putting calculator example, pls can u keep calendar example...............

[@putude]

Damm you are genius!

[@groce147]

thanks man

[@st1m965]

thanks very interesting

[@KarlOlofsson]

I found it confusing to have a common operator function that switches between lambda functions to do the correct calculation at use, I did not catch that design on the first watching. Any particular reason you choose that design since you have to have different functions for each operand anyway to set them, besides simplifying the "equals" method?

[@nihinlola]

In your equal function, the positions of this.previous and this.current should be switched, else the calculation would not be correct.

[@luzaw4957]

Next video, Chess app with Vue? :D

[@mr.yellow3250]

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 ?

[@Romeo-vt8hq]

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; } }

[@scorpionedge]

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

[@cynicalobserver1118]

Presenting at 1.25x speed by default. I like that.

[@prckomir]

this is only ok if you are operating 2 numbers.. for example 1+2+3 will be 5

[@dabhiridaniel847]

A little bug but can be fixed....just update the equal function : `${this.operator( parseFloat(this.previous), parseFloat(this.current) )}` ; ..............this.previous should come first not the otherwise

[@mariusselvfolgelig]

this.current *= -1; would have been a few less characters in the sign method (If it had been a number of course :P)

[@IanSebryk]

this still works just fine, just with a small tweak: `${parseFloat(this.current) * -1}`. ironically, what he did for percentage was right on the money, logic-wise.

[@Kumar-pw1dm]

Try to make a tutorial on react native has frontend and Laravel has backend, no good tutorial found in online

[@cinthyafrid7474]

Do you have a tutorial that show how to set up everything before working with the code part?

[@BunrakBjj]

Pretty much all you need is: node and npm, then on visual studio code terminal do 1) npm install -g vue-cli 2) vue init webpack nameofproject -respond to the (y/n) 3) cd nameofproject 4) npm run dev This should bring you to the start of this video

[@RobertMion]

For anyone looking to learn more Vue by making the iOS calculator a completely different way, here's a tutorial I wrote on Medium. Bonus: it uses Grid **and** Flexbox: medium.com/@rmion/learn-vue-css-grid-and-flexbox-10-part-beginner-tutorial-20f8c422ea06

[@haytham6776]

is it require to learn typescript for vue ?

[@TheShadetheory]

11:15 I would simply write that as `this.current -= (this.current * 2)`

[@pikachu-fe7tx]

His code was more complex because of his somewhat questionable decision to implement the calculator using strings

[@AishahYusra]

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

[@eduardor.romero3900]

With shortcuts. Holding alt key you can put multiple cursors. Ctrl D for selecting multiple words. Try ctrl alt arrows and shift alt arrows

[@stephenjayh]

I love the vid but feel that this is more of a JS / CSS tutorial lol Why didn’t you separate the numbers into separate components to show off Vue’s reusable component system?

[@Antnix732]

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

[@oinn6216]

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

[@muhammadyusoffjamaluddin]

Why my calc cant event revert back when i am pressing the 'sign' button like your's? 10:50

[@BarrieBM]

Exactly the same

[@KillerInnocentx]

I love you so much

[@TheRocreex]

Wait, so 50/4 = 0.08?

[@jeremyblake]

his divide and subtract is messed up. 3 - 2 will return -1.

[@dabhiridaniel847]

A little bug but can be fixed....just update the equal function : `${this.operator( parseFloat(this.previous), parseFloat(this.current) )}` ; ..............this.previous should come first not the otherwise

[@harrisonfok8267]

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

[@simonzeman6876]

Watch equal() function again. This operator stores a function and you provide parameters in equal()

[@crazycris4]

cursor: pointer

[@spliterr]

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

[@youcef476]

multiword the name must has two for exemple CoolCalculator the name of component has minmum 2 words which are cool and calculator and cool-component same is good

[@marcusaureliusregulus2833]

Good for displaying vue, but terrible ui/ux

[@naspy971]

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

[@lindaojo2]

I really just wanna know how to edit multiple lines specifically like he did here 18:44

[@SunnyKumar-ds5gh]

That was VSCode function. If you are on Mac press option button and click on places where you want your cursors to be. If you want to edit the same lines in the entire file then press command+D to multiple select the similar lines of code.

[@BarrieBM]

hold alt and press where you wanna edit, but seeing this comment was made months ago you prolly figured it out xD

[@lindaojo2]

😂 I figured it out today on my mac, pressing shift'option worked. Thanks

[@kosemekars]

in 20 minutes!

[@jurgentgjeloshaj]

< great video

[@veganize]

jesus christ

[@ludkamotylikova3060]

Its quite difficult. At least for me.

[@maxron6514]

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

[@dm0nic4L]

How does he make it a standalone app without hosting it on the browser @ 4:28?

[@TheSETJ]

It's Mac's calculator app.

[@jaredrubin219]

What IDE is that? Anybody??

[@dimgg5399]

VS Code, it's extremely popular

[@jaredrubin219]

Thanks for the quick reply! Yeah, looks totally awesome.

[@pepijn1231]

50/4 = 0.8 🧐

[@ekshivbhakt2417]

'-${this.current}' not working

[@glenncott]

easy mistake to make. This is the grave accent character ` (the key to the left of the 1 key) not the apostrophe '

[@schiban_]

@@glenncott 2 years later, still being helpful. Thanks!

[@mustaphaabdulmujeeb8980]

This application in cute

[@jeremyleachcodingmofo]

IF YOU ARE LIKE HEY WHY NO CLI INSTRUCTIONS::: HERE THEY ARE. FOR LATEST... CLI v3 In console/terminal, such as ConEmu or XTerm, Terminator, Guake, ITerm, Hyper [anywhere on pc] npm install -g @vue/cli [somewhere on pc like /code] vue create --default hello-world cd hello-world Open the folder with your code editor. With VS Code you can type: code . In the location you want to open. Probably most that support “Folders as projects” do this.

[@leonpilot737]

Just made a sample calculator using VueJs and Vuex. github.com/leon737/Calculator

[@videosostv6065]

AVE JS))

[@PornstarCentral]

Is it me or does he sound like Seth rollins?

[@gtbaba123]

Without telling how to setup is useless for beginners. Even its easy but they get problems.

[@brawndo8726]

I cringed a little over all the type coercion (strings to numbers and back again)

[@user-ct5bo7qf2j]

very bad code. sorry it`s good video as vue & css grid tutorial. However, as for the calculator algorithm - everything`s very bad

[@jbdestiny94]

Влад Иванов Is that you contribution then? Can you improve the code and show to others to learn from! Thanks

[@navi-charlotte]

thumbs down because of the lame implementation of sign(). should have just multplied by -1

[@cliffe_rocker]

This is brilliant.