Created
May 9, 2019 07:45
-
-
Save rickdaalhuizen90/4672958c2d97f1089044c56541bdf29e to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/saciluc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| body { | |
| font-family: sans-serif; | |
| font-size: 1.3em; | |
| } | |
| input { width: 280px; } | |
| input, button {padding: 5px 10px} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app" v-cloak> | |
| <h4>Four Digits Magic Prediction</h4> | |
| <hr> | |
| <input type="number" placeholder="Select a number between 0 and 9999" required> | |
| <button @click="handler">submit</button><br> | |
| <b>Prediction: {{prediction}}</b> | |
| <div v-for="result in numbers"> | |
| {{result}} | |
| </div> | |
| <div v-if="sum"> | |
| <hr> | |
| {{sum}} | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> | |
| <script id="jsbin-javascript"> | |
| new Vue({ | |
| el: '#app', | |
| data: { | |
| prediction: 0, | |
| numbers: [], | |
| sum: false | |
| }, | |
| methods: { | |
| handler: function () { | |
| let userinput = document.querySelector('input').value; | |
| if (this.numbers.length < 5 && userinput > 0 && userinput < 10000) { | |
| let calc = this.calc(userinput); | |
| this.numbers.push( this.filter(calc) ); | |
| } else { | |
| alert(`Number should be between 0 and 10000!`); | |
| } | |
| }, | |
| calc: function (userinput) { | |
| if (this.numbers.length > 0) { | |
| this.numbers.push(this.filter(userinput)); | |
| return 9999 - userinput; | |
| } else { | |
| this.prediction = (userinput - 2) + 20000; | |
| return userinput; | |
| } | |
| }, | |
| makeSum: function () { | |
| this.sum = this.numbers.reduce((sum, value) => { | |
| return parseInt(sum) + parseInt(value); | |
| }, 0); | |
| }, | |
| filter: function (num) { | |
| let str = ''; | |
| for (let i = 0; i <= num; i++) { | |
| if (i<10) { | |
| str = `000${i}`; | |
| } else if (i<100) { | |
| str = `00${i}`; | |
| } else if (i<1000) { | |
| str = `0${i}`; | |
| } else { | |
| str = `${i}`; | |
| } | |
| } | |
| return str; | |
| } | |
| }, | |
| watch: { | |
| numbers: function () { | |
| if (this.numbers.length === 5) { | |
| this.makeSum(); | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css"> body { | |
| font-family: sans-serif; | |
| font-size: 1.3em; | |
| } | |
| input { width: 280px; } | |
| input, button {padding: 5px 10px}</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">new Vue({ | |
| el: '#app', | |
| data: { | |
| prediction: 0, | |
| numbers: [], | |
| sum: false | |
| }, | |
| methods: { | |
| handler: function () { | |
| let userinput = document.querySelector('input').value; | |
| if (this.numbers.length < 5 && userinput > 0 && userinput < 10000) { | |
| let calc = this.calc(userinput); | |
| this.numbers.push( this.filter(calc) ); | |
| } else { | |
| alert(`Number should be between 0 and 10000!`); | |
| } | |
| }, | |
| calc: function (userinput) { | |
| if (this.numbers.length > 0) { | |
| this.numbers.push(this.filter(userinput)); | |
| return 9999 - userinput; | |
| } else { | |
| this.prediction = (userinput - 2) + 20000; | |
| return userinput; | |
| } | |
| }, | |
| makeSum: function () { | |
| this.sum = this.numbers.reduce((sum, value) => { | |
| return parseInt(sum) + parseInt(value); | |
| }, 0); | |
| }, | |
| filter: function (num) { | |
| let str = ''; | |
| for (let i = 0; i <= num; i++) { | |
| if (i<10) { | |
| str = `000${i}`; | |
| } else if (i<100) { | |
| str = `00${i}`; | |
| } else if (i<1000) { | |
| str = `0${i}`; | |
| } else { | |
| str = `${i}`; | |
| } | |
| } | |
| return str; | |
| } | |
| }, | |
| watch: { | |
| numbers: function () { | |
| if (this.numbers.length === 5) { | |
| this.makeSum(); | |
| } | |
| } | |
| } | |
| });</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: sans-serif; | |
| font-size: 1.3em; | |
| } | |
| input { width: 280px; } | |
| input, button {padding: 5px 10px} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| new Vue({ | |
| el: '#app', | |
| data: { | |
| prediction: 0, | |
| numbers: [], | |
| sum: false | |
| }, | |
| methods: { | |
| handler: function () { | |
| let userinput = document.querySelector('input').value; | |
| if (this.numbers.length < 5 && userinput > 0 && userinput < 10000) { | |
| let calc = this.calc(userinput); | |
| this.numbers.push( this.filter(calc) ); | |
| } else { | |
| alert(`Number should be between 0 and 10000!`); | |
| } | |
| }, | |
| calc: function (userinput) { | |
| if (this.numbers.length > 0) { | |
| this.numbers.push(this.filter(userinput)); | |
| return 9999 - userinput; | |
| } else { | |
| this.prediction = (userinput - 2) + 20000; | |
| return userinput; | |
| } | |
| }, | |
| makeSum: function () { | |
| this.sum = this.numbers.reduce((sum, value) => { | |
| return parseInt(sum) + parseInt(value); | |
| }, 0); | |
| }, | |
| filter: function (num) { | |
| let str = ''; | |
| for (let i = 0; i <= num; i++) { | |
| if (i<10) { | |
| str = `000${i}`; | |
| } else if (i<100) { | |
| str = `00${i}`; | |
| } else if (i<1000) { | |
| str = `0${i}`; | |
| } else { | |
| str = `${i}`; | |
| } | |
| } | |
| return str; | |
| } | |
| }, | |
| watch: { | |
| numbers: function () { | |
| if (this.numbers.length === 5) { | |
| this.makeSum(); | |
| } | |
| } | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment