Room Calculator - L-shaped

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-->
Long Wall Width: <input min="0" ref="input" type="number" value="10" v-model="longWidth" oninput="validity.valid||(value='');"/><BR/>
Long Wall Heights: <input min="0" ref="input" type="number" value="10" v-model="longHeight" oninput="validity.valid||(value='');"/><BR/>
Short Wall Widths: <input min="0" ref="input" type="number" value="10" v-model="shortWidth" oninput="validity.valid||(value='');"/><BR/>
Short Wall Height: <input min="0" ref="input" type="number" value="10" v-model="shortHeight" 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: {
   longWidth: 10,
   longHeight: 10,
   shortWidth: 5,
   shortHeight: 5,
   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.longWidth * this.longHeight) - (this.shortWidth * this.shortHeight)) / this.coverage);
  },
  sqFeet: function(){
  	return (this.longWidth * this.longHeight) - (this.shortWidth * this.shortHeight);
  }
 }
})