Vue Dinner Calculator

Vue Dinner Calculator is an application that calculates the cost of a dinner according to the price of dinner per person, the number of people and tips.

Development interface

Is developed with vue.js a Javascript framework. This project has no npm dependencies.

At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax. Render a string template so the data and the DOM are linked, and everything is reactive.
-Vue

Content

It is composed of 3 files:

1. vue.js
   Download Framework Vue.js v2.6.10. Development version, includes helpful console warnings.
2. index.html
   HTML-based template syntax. Structure html with interpolations, bind attributes… This file include below the framework Vue and a file with the application development.
3. app.js
   The Vue instance. Development of the code with data and methods to create your desired behavior.

<script src="js/vue-2.6.10.js"></script>
<script src="js/app.js"></script>

How work

Requirements and functionalities

Vue data

• price
• persons
• tips
• taxes

Vue methods

• increment()
• decrement()
• totalTaxes()
• totalPersons()
• totalTips()

Formules

• Total of the dinner per person with taxes

totalTaxes = (price * (taxes% / 100)) + price

• Total of the dinner the all persons with taxes

totalPersons = totalTaxes() * persons

• Total of the dinner the all persons with taxes and tips

totalTips = (totalPersons() * (tips% / 100)) + totalPersons()

Continue…

Don’t stop learn. It is a basic example to start learning vue.