Pizza Calculator

Exercise 8 from 57 Exercises

by NodToNothing

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<!-valiidity.valid -checks against the min during typing -->
<!--https://www.w3schools.com/js/js_validation_api.asp-->
Number of People: <input min="0" ref="input" type="number" value="10" v-model="people" oninput="validity.valid||(value='');"/><BR/>
Number of Pizzas: <input min="0" ref="input" type="number" value="10" v-model="pizzas" oninput="validity.valid||(value='');"/><BR/>
Number of Slices per Pizza: <input min="0" ref="input" type="number" value="8" v-model="slices" oninput="validity.valid||(value='');"/><BR/>

<br>Number of slices each: {{slicesEach}}
<br>Leftover slices: {{slicesLeftover}}


</div>

JavaScript

var app = new Vue({
  el: '#app',
  components: {
  },
  data: {
   people: 10,
   pizzas: 10,
   slices: 8
  },
computed: {
 	slicesEach: function(){
  	//return ((this.pizzas * this.slices) % this.people);
    //the disadvantage of f-ed up long math in line, you lose your place, that took a few iterations
    return ((this.pizzas * this.slices) - ((this.pizzas * this.slices) % this.people)) / this.people;
  },
  slicesLeftover: function(){
  	return ((this.pizzas * this.slices) % this.people);
  }
 }
})