Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 1 Part g/h

Ok....now it gets tricky.  I'm supposed to turn the tip calculator into a GUI, and then a GUI with a slide.  I could just use C#, but that's pretty week.  I might as well go VB COM (and in case that's offensive, I still have a secret santa program running on VB COM including Outlook integration for almost 15+ years.  I compiled it and just use it...I'm too lazy to update.  If I went digging, I probably have tgXML around as well, my treasure generator using XML in VB COM for AD&D third edition).  So I was thinking I might try pure javascript, but then thought, well, I'll have to pull in bootstrap and this npm live-server thing is cool, but ultimately sort of a waste of my time and disk space.  And as soon as I thought that, I thought, why don't I just use Angular?  And that made me think, that seems so heavy...oh yeah, people use Vue and React. I pondered React, but realized I have a developer on my team who keeps telling me how wonderful it is so, being the obstinate person I am, I used Vue, on JSFiddle so I could use someone's pre-fiddled fun circle slider, and save my work without having to find it locally.

My biggest issue wasn't the basic structure of Vue, it was trying to parseFloat and Math.roundup and get it to work within the framework of Vue without concatenating.

Here it was doing the stupid concatenation instead of math, which really annoyed me, because it wasn't a Vue-specific issue.

Here I fixed it.  You can see where I started to put it into a function instead of inline, which is better, but I was lazy and just proving my point (that I could do it).

You can play with it here...
https://jsfiddle.net/NodToNothing/e6c7amk9/1/

And here's the code using a cheater textarea....

HTML: <div id="app"> <circle-slider v-model="val7" @touchmove="$refs.input.blur()" ></circle-slider> Tip%: <input ref="input" type="number" v-model.number="val7" /><BR/> Bill$: <input ref="input" type="number" value="100" v-model="bill"/><BR/> Tip Total: <input ref="input" type="number" :value=Math.round(parseFloat((val7/100*bill)*100))/100 /></BR> Total$: <input ref="input" type="number" :value=Math.round((parseFloat(bill)+parseFloat(val7/100*bill))*100)/100 /> <!--{{total}} --> </div> Javascript with Vue2.2.1 inclusion and vue-circle-slider@1.0.0 from https://unpkg.com/vue-circle-slider@1.0.0 var app = new Vue({ el: '#app', components: { circleslider: VueCircleSlider.VueCircleSlider }, data: { val7: 10, message: "Bob was here", bill: 100 }, computed:{ total: function(){ return parseFloat(this.bill) + parseFloat(this.val7/100 * this.bill); } } })