Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Retirement Calculator

I realized I claimed credit for reading all of chapter two, but had an exercise left, so I thought I'd better get it done today after a bit of Far Cry New Dawn so I'm not strictly lying to myself (my days are sometimes off in my reading list, but in general I try to keep them aligned within a day or two)..

JSFiddle: https://jsfiddle.net/NodToNothing/ehk24y50/
Fiddles: https://jsfiddle.net/user/NodToNothing/fiddles/

Exercise 6 was a retirement calculator.  Amusingly, I can see in that last Fiddle where I'm reusing Vue code and leaving in bits, like the default being Scooter, where it doesn't matter because I'm working with numerics, not strings.  So....ignore those parts.  At the very least, I don't want to hear about it because it doesn't matter except for elegance/purists.  It's not like I have someone sitting nearby to code review my hobby activities.

I did learn a bit more about the difference between computed properties and functions in Vue, so that was useful in the context of this snippet.  No methods in there, but....that's because I really didn't need them once I started playing around a little more.

The code...less than in some of the others.  Vue takes a lot of the work out of things:

HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Current Age: <input min="0" ref="input" type="number" value="55" v-model="currentAge" oninput="validity.valid||(value='');"/><BR/> Age you want to retire: <input min="0" ref="input" type="number" value="65" v-model="retireAge" oninput="validity.valid||(value='');"/><BR/> <br>You have {{yearsToRetire}} years left until you can retire. <br>If's {{currentYear}}, so you can retire in {{retireYear}} <!--interpoloation thingy --> <!--{{ new Date().getFullYear() }}--> </div> JavaScript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { currentAge: 55, retireAge: 65 }, computed: { yearsToRetire: function(){ return this.retireAge - this.currentAge; }, currentYear: function(){ return (new Date()).getFullYear(); }, retireYear: function(){ return this.currentYear + (this.retireAge - this.currentAge); } } })