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); } } })

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

Variation #2....do a circular room.  I find that to be less about coding and more about reminding myself of basic geometry.  It's less code than the square room in some respects.

Fiddle: https://jsfiddle.net/NodToNothing/7buham4g/
All Fiddles: https://jsfiddle.net/user/NodToNothing/fiddles/

JS Fiddle Code:
HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Room Radius: <input min="0" ref="input" type="number" value="10" v-model="radius" 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: { radius: 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.radius * 3.14 * this.radius) / this.coverage); }, sqFeet: function(){ return (this.radius * 3.14 * this.radius); } } })

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

Room area....did I already do  a room area/paint calculator?  I did...I did that room calculator.  This one is for finding the amount of paint.  So it's a bit of a mash up of the last exercise (pizzas) with a Math.ceil() and the area calculator.  This first swipe took moments.

Fiddle: https://jsfiddle.net/NodToNothing/x4bm0cys/

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

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

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); } } })