Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Simple Math

I was right.  The simple math exercise was really, really simple.  Use Vue and it'll lock the format to numeric, has a UI, autoupdates the answers and, with a min and a bit of javascript (validity.valid) enforces 0+, aka no negative numbers, per the exercise challenges.

Fiddle: https://jsfiddle.net/NodToNothing/f18vahdp
Fiddles: https://jsfiddle.net/user/NodToNothing/fiddles/

Output working as advertised:

The Fiddle code...

HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Number 1: <input min="0" ref="input" type="number" value="Scooter" v-model="num1" oninput="validity.valid||(value='');"/><BR/> Number 2: <input min="0" ref="input" type="number" value="Scooter" v-model="num2" oninput="validity.valid||(value='');"/><BR/> <br>Sum: {{sum}} <br>Difference: {{sub}} <br>Division: {{div}} <br>Multiply: {{multi}} </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { num1: 800, num2: 40 }, computed:{ sum: function(){ return this.num1 + this.num2; }, sub: function(){ return this.num1 - this.num2; }, multi: function(){ return this.num1 * this.num2; }, div: function(){ return this.num1 / this.num2; } } })