Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 3, Paint a Room - L-Shaped

Here it gets a bit more interesting...the goal is L-shaped.  I should have let people pick the kind of room and used one app.  That's not a difficult mashup.

Fiddle: https://jsfiddle.net/NodToNothing/7jasm205/

All Fiddles: https://jsfiddle.net/user/NodToNothing/fiddles/

This time the challenge was also to make it accessible via mobile.  The nature of Vue is that it works on mobile so I did.....nothing.  That's not entirely true, I added /embedded/result to the URL to make it show on the screen.

https://jsfiddle.net/NodToNothing/7jasm205/embedded/result

So here are three screens showing the fiddle working on my mobile phone.  Reactive changes working as expected.

And some code:

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