Mortgage Calculator

Make a Calculator with Vue.js

In this tutorial, you will learn to use Vue.js to develop a fundamental calculator ingredient inside of a web browser.


🔗Check out Cody Seibert’s principal channel:

Learn to code for totally free and get a developer task:

Examine hundreds of articles on programming:

And subscribe for new movies on technological innovation just about every working day:



  1. Thanks for putting this together and demonstrating Vue components and CSS Grid!

    Implementation of the core logic concerned me though for two reasons:
    1) Logic is tightly coupled with the view layer
    2) The core logic sometimes dealt directly with strings (i.e. negating with charAt and concatenation) instead of numbers (val = -val;)

    I broke out the core logic into a lib module and implemented it into the Vue component. Pull request is here:

    Benefits to this approach:
    * Core logic deals entirely with numbers, and string manipulation is left to the view layer
    * Core logic is modular and can be re-used and tested independently of the view layer

    Admittedly there is a lot more code to grok here, but I feel it's in the best interest of
    growing developers to learn this approach of separating core logic from the view layer wherever possible.

    I'm sure my implementation isn't perfect, but at least it demonstrates the best practices of modularity and separation of concerns described above.

    Looking forward to your feedback. Thanks!

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

  3. I took the idea but didn't watched the video to not get influenced: here is my version
    Feedback is appreciated

  4. Is it me or does he sound like Seth rollins?

  5. btn {

    .btn:active {
    transform: scale(0.95);

    This will give you nice button click effect.

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

  7. Damm you are genius!

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

  9. Just made a sample calculator using VueJs and Vuex.

  10. Good tutorial and needed for me how to structure the vue functions/methods etc. Quickly built this with Codesandbox (for those who are asking about setup, this'll get you up and running immediately).
    Changed a few thingies (e.g. the sign working numerical), switched the previous / current so 50 / 8 returns 12.5 instead of .08 or 10 – 2 returns 8 instead of -8. Working version (wip and to be checked) is here:

  11. that was outstanding.

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

  13. is it require to learn typescript for vue ?

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

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

  16. 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: " /= 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.

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


    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.

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

  20. cursor: pointer

  21. thx for giving the code and sharing this calculator

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

  23. Scratching head I thought the style sheet would be in a separate document or file. What am I missing?

  24. </html>
    <tr>< great video </tr>

  25. thanks man

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


Leave a Reply