Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 3, Room Area

Chapter 3 be all about da math!

Exercise one (or 7, depending on where you start) is calculate the area of a room, with challenges related to using a UI, validating the numbers, and offering meters and feet.  I cheated and did both meters and feet as separate UI bits rather than a drop down because I'm lazy.  I get the drop down.

This does give me an interesting idea...something to ideate on myself.

Here's the Fiddle: https://jsfiddle.net/NodToNothing/uas3foex/23/

The output....

And the code...

HTML: <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 + Vue 2.2.1 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); } } })