Build a Calculator with Vue.js
Vložit
- čas přidán 7. 09. 2024
- In this tutorial, you will learn to use Vue.js to create a basic calculator component inside a web browser.
💻Code: github.com/cod...
🔗Check out Cody Seibert's main channel: / @webdevcody
--
Learn to code for free and get a developer job: www.freecodeca...
Read hundreds of articles on programming: medium.freecod...
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.
Thanks, now is my equal function perfekt!!
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.
Random question: How'd you get verified just with 3 subscribers?
Instead of typing a string with number each time you can do
4
and then
type(e) {
this.result += parseInt(e.target.innerHTML);
},
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
Seconded
did you have solved this problem can you share.
@@_ifly
equal() {
this.current = `${this.operator(
parseFloat(this.previous),
parseFloat(this.current)
)}`;
this.previous = null;
}
@@alexcubed4270 thanks
Totally agree
Wow, this made my vue learning journey a lot more enjoyable. I didn't know we could do these things.
Stfu
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.
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.
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 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
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
css grid is awesome!!!!!!!!!!!
flexbox is better, fight me
isnt flexbox just a css grid with one row/column?
Flexbox and CSS Grid are supposed to be used together, they are not competitors.
Awesome tutorial as a simple overview on how vue.js works. Thank you.
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.
He still hasn't given them. Lame.
make sure you have node js installed then use cmd to install : npm install -g vue-cli
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
great job it solved the division problem too. before this when i was dividing 8 /4 = 0.4 now ok
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. 😁🙌🏽
Implementing a calculator with strings? That's a bold move, Cotton...
*strategy
we want more projects with vue :D
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?
thank you man!!!! great job, it work!!!
awesome! keep building more vue apps !
Sold to VueJs, finally! Thanks
thx for giving the code and sharing this calculator
you can enter +/- (I am on Windows) on mac by shift pressing key under escape.
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!
Hi, avesome tutorial. Thanks.
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.
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?
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
Thanks for your informative video
in sign method you can multiple this.current *-1 :)
yeah ,this is good example for VUE，thank you buddy!
Awersome tutorial ❤️ we want more vuejs project ☺️
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;
}
}
Thank you for sharing. This video is great for learning Vue.js!
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.
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.
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?
In your equal function, the positions of this.previous and this.current should be switched, else the calculation would not be correct.
Great intro video, thank you! Will be sharing
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
Thanks for demonstrating
CSS grid is a god send.
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
this.current *= -1; would have been a few less characters in the sign method (If it had been a number of course :P)
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.
Hii ,
Thanks for putting calculator example, pls can u keep calendar example...............
this is only ok if you are operating 2 numbers.. for example 1+2+3 will be 5
Hi, thanks for the video. What editor are you using? Thanks in advance.
Had to reduce the speed to 0.5 so I could catch up, nice video though!
This is brilliant.
Thank u for this awesome video
thanks you for sharing
Wait, so 50/4 = 0.08?
his divide and subtract is messed up. 3 - 2 will return -1.
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
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 ?
Thanks!
didn't anyone notice the critical bug with this is that if you press 1 + 1 + 1 and then press equal, you get 2..
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?
Cool, I love grid.
awesome. thanks for sharing..
thanks man
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?
that was outstanding.
Thank you sooo much! :)
thanks very interesting
I don't really understand the operator part. How does it know what a and b are?
this.operator = (a, b) => a * b
Watch equal() function again. This operator stores a function and you provide parameters in equal()
Do you have a tutorial that show how to set up everything before working with the code part?
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
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
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
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 ....
With shortcuts. Holding alt key you can put multiple cursors. Ctrl D for selecting multiple words. Try ctrl alt arrows and shift alt arrows
06:25 what kind of black magic did he do here???
append('1') - why no to get event.target.innerText ?
Presenting at 1.25x speed by default. I like that.
11:15 I would simply write that as `this.current -= (this.current * 2)`
His code was more complex because of his somewhat questionable decision to implement the calculator using strings
Try to make a tutorial on react native has frontend and Laravel has backend, no good tutorial found in online
awesome video
Good for displaying vue, but terrible ui/ux
I’m new to vue.js but this kinda is a JavaScript tutorial. I mean like is this how vue.js is?
is it require to learn typescript for vue ?
I love you so much
Why my calc cant event revert back when i am pressing the 'sign' button like your's?
10:50
Exactly the same
Next video, Chess app with Vue? :D
in 20 minutes!
Damm you are genius!
I really just wanna know how to edit multiple lines specifically like he did here 18:44
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.
hold alt and press where you wanna edit, but seeing this comment was made months ago you prolly figured it out xD
😂 I figured it out today on my mac, pressing shift'option worked. Thanks
Unfortunately with this project we use very few of Vue features.
cursor: pointer
Its quite difficult. At least for me.
What IDE is that? Anybody??
VS Code, it's extremely popular
Thanks for the quick reply! Yeah, looks totally awesome.
< great video
jesus christ
'-${this.current}' not working
easy mistake to make. This is the grave accent character ` (the key to the left of the 1 key) not the apostrophe '
@@glenncott 2 years later, still being helpful. Thanks!
How do you know someone’s using Apple? They’ll tell you.
Just made a sample calculator using VueJs and Vuex.
github.com/leon737/Calculator
How does he make it a standalone app without hosting it on the browser @ 4:28?
It's Mac's calculator app.
50/4 = 0.8 🧐
This application in cute
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.
Is it me or does he sound like Seth rollins?
AVE JS))
Without telling how to setup is useless for beginners. Even its easy but they get problems.
I cringed a little over all the type coercion (strings to numbers and back again)
very bad code. sorry
it`s good video as vue & css grid tutorial.
However, as for the calculator algorithm - everything`s very bad
Влад Иванов
Is that you contribution then? Can you improve the code and show to others to learn from! Thanks
thumbs down because of the lame implementation of sign(). should have just multplied by -1
This is brilliant.