Pizza Calculator 2

Exercise 8 from 57 Exercises - Part II

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/>
Slices Desired (each): <input min="0" ref="input" type="number" value="10" v-model="slicesDesired" 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 pizzas: {{pizzas}}
<br>Leftover slices: {{slicesLeftover}}


</div>

JavaScript

var app = new Vue({
  el: '#app',
  components: {
  },
  data: {
   people: 10,
   slicesDesired: 5,
   slices: 8
  },
computed: {
 	pizzas: 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 Math.ceil((this.people * this.slicesDesired) / this.slices);
  },
  slicesLeftover: function(){
  	return (this.people * this.slicesDesired) % this.slices;
  }
 }
})