Room Calculator

Exercise 7 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-->
Room width in feet: <input min="0" ref="input" type="number" value="10" v-model="feetWidth" oninput="validity.valid||(value='');"/><BR/>
Room length in feet: <input min="0" ref="input" type="number" value="10" v-model="feetLength" oninput="validity.valid||(value='');"/><BR/>
<br>The area is {{squareFeet}} square feet.
<br>The area is {{squareMeter}} square meters.

<BR/><BR/>Room width in meters: <input min="0" ref="input" type="number" value="10" v-model="meterWidth" oninput="validity.valid||(value='');"/><BR/>
Room length in meters: <input min="0" ref="input" type="number" value="10" v-model="meterLength" oninput="validity.valid||(value='');"/><BR/>
<br>The area is {{squareFeet2}} square feet.
<br>The area is {{squareMeter2}} square meters.

</div>

JavaScript

var app = new Vue({
  el: '#app',
  components: {
  },
  data: {
   feetWidth: 10,
   feetLength: 10,
   meterWidth: 5,
   meterLength: 5,
   meterConst: 10.7639,
   feetConst: 0.092903
  },
 computed: {
 	squareFeet: function(){
  	return this.feetWidth * this.feetLength;
  },
  squareMeter: function(){
  	return ((this.feetWidth * this.feetLength) / this.meterConst);
  },
  squareFeet2: function(){
  	return this.meterWidth * this.meterLength;
  },
  squareMeter2: function(){
  	return ((this.meterWidth * this.meterLength) / this.feetConst);
  }
 }
})