Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 3, Pizza Slices

Exercise 8: Pizza Party

I think my default is now Vue - I'm getting lazy.  I have the numeric validation figured out and the hooks, so it's just easy to cut and paste and modify.  Or fork and set as base and modify, if you're fiddling.  The big rule in this exercise...no partial pieces of pizza.

There's a part b to ask how many pieces each person wants and then calculate full pizzas.  That's primarily different math, but I"m going to do it anyway.

The JSFiddle: https://jsfiddle.net/NodToNothing/tuv89sf6/

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