Build a Calculator with Vue.js
HTML-код
- Опубликовано: 12 сен 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?
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
Instead of typing a string with number each time you can do
4
and then
type(e) {
this.result += parseInt(e.target.innerHTML);
},
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 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
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.
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 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.
Awesome tutorial as a simple overview on how vue.js works. Thank you.
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!!!
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
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 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?
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
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
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
we want more projects with vue :D
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
you can enter +/- (I am on Windows) on mac by shift pressing key under escape.
thx for giving the code and sharing this calculator
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, thanks for the video. What editor are you using? Thanks in advance.
awesome! keep building more vue apps !
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?
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
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.
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.
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.
Awersome tutorial ❤️ we want more vuejs project ☺️
In your equal function, the positions of this.previous and this.current should be switched, else the calculation would not be correct.
Sold to VueJs, finally! Thanks
Great intro video, thank you! Will be sharing
CSS grid is a god send.
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?
yeah ,this is good example for VUE，thank you buddy!
Thanks for your informative video
in sign method you can multiple this.current *-1 :)
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?
Thanks for demonstrating
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.
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 only ok if you are operating 2 numbers.. for example 1+2+3 will be 5
Hi, avesome tutorial. Thanks.
Hii ,
Thanks for putting calculator example, pls can u keep calendar example...............
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
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
Had to reduce the speed to 0.5 so I could catch up, nice video though!
Thank u for this awesome video
This is brilliant.
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
didn't anyone notice the critical bug with this is that if you press 1 + 1 + 1 and then press equal, you get 2..
awesome. thanks for sharing..
Presenting at 1.25x speed by default. I like that.
Try to make a tutorial on react native has frontend and Laravel has backend, no good tutorial found in online
is it require to learn typescript for vue ?
that was outstanding.
append('1') - why no to get event.target.innerText ?
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;
}
}
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
Thank you sooo much! :)
I’m new to vue.js but this kinda is a JavaScript tutorial. I mean like is this how vue.js is?
Cool, I love grid.
Why my calc cant event revert back when i am pressing the 'sign' button like your's?
10:50
Exactly the same
thanks you for sharing
Next video, Chess app with Vue? :D
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
Thanks!
Good for displaying vue, but terrible ui/ux
06:25 what kind of black magic did he do here???
thanks man
awesome video
thanks very interesting
Unfortunately with this project we use very few of Vue features.
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
I love you so much
'-${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!
cursor: pointer
What IDE is that? Anybody??
VS Code, it's extremely popular
Thanks for the quick reply! Yeah, looks totally awesome.
in 20 minutes!
How does he make it a standalone app without hosting it on the browser @ 4:28?
It's Mac's calculator app.
< great video
jesus christ
Its quite difficult. At least for me.
Just made a sample calculator using VueJs and Vuex.
github.com/leon737/Calculator
How do you know someone’s using Apple? They’ll tell you.
Without telling how to setup is useless for beginners. Even its easy but they get problems.
50/4 = 0.8 🧐
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.
This application in cute
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
Is it me or does he sound like Seth rollins?
AVE JS))
thumbs down because of the lame implementation of sign(). should have just multplied by -1
This is brilliant.