Room Calculator

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-->
Room Length: <input min="0" ref="input" type="number" value="10" v-model="length" oninput="validity.valid||(value='');"/><BR/>
Room Width: <input min="0" ref="input" type="number" value="10" v-model="width" oninput="validity.valid||(value='');"/><BR/>
Paint coverage (square feet per gallon)a: <input min="0" ref="input" type="number" value="350" v-model="coverage" oninput="validity.valid||(value='');"/><BR/>

<br>Square Feet: {{sqFeet}}
<br>Gallons of Paint: {{gallons}}


</div>

JavaScript

var app = new Vue({
  el: '#app',
  components: {
  },
  data: {
   length: 10,
   width: 10,
   coverage: 350
  },
computed: {
 	gallons: 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.length * this.width) / this.coverage);
  },
  sqFeet: function(){
  	return (this.length * this.width);
  }
 }
})