Day 24 of JavaScriptmas - Test Your Agility Solution

#javascript #scrimba #24daysofjavascriptmas

Day 24 (it means the last challenge of 24 days of javascriptmas on Scrimba Platform)

The challenges have been up and down like the rollercoaster for the last 24 Days. From calculation, arrays, DOM Manipulation, simple JS game (like Rolling Dice), show unique numbers/characters, max-min numbers, etc.

Hopefully, they will run another challenge next year or next season, because it really helps me out (and others) to killing time and gives more confident doing code.

Impression
I took a few bootcamp on Scrimba (and still on-going), and start to feel the effect on me when doing this challenge. I hope to anyone of you who will take the course will feel the same and feel the golden-path that this platform offer.
I will give 💯 percent recommendation for anyone who's just start coding or just improving coding knowledge especially on the web development on this platform.
That's my personal opinion on this platform. Hope you guys like it or if you're curious or have interest about the platform offers just visit the site on https://scrimba.com/.

Last Challenge
NOW, let's back to the business, THE LAST challenge is to fix a couple of function that will stop the spinning number.
When the page open, it shows the target number and the user should press the stop button to match the target number.
If stopped number don't match the target show how much the difference from the target number, otherwise YOU WIN!

HTML

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="title">
            <h1>Test your agility!</h1>
            <h3>Push the button at the right time to hit the target number (0-100)</h3>
        </div>
        <div class="target">
            <h3>Target Number: </h3> &nbsp;<h3 id="targetNum"></h3>
        </div>
        <div class="spin">
            <h3>Spining Wheel: </h3> &nbsp;<h3 id="spinning"></h3>
        </div>
        <button id="buttonPressed">STOP</button>
        <h4 id="result"></h4>
        <script src="index.js"></script>
    </body>
</html>

CSS

html, body {
    margin: 0;
    padding: 0;
}

.title{
    text-align: center;
}

.target, .spin{
    display: flex;
    justify-content: center
}

#result{
    color: blue;
    text-align: center;
}

button{
    height: 32px;
    border: 1.5px solid aquamarine;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

Javascript

//globals
var pushed = false //Has the stop button been pushed - false is default
var targetInt; //The target number to stop the wheel on
var spinningElem = document.getElementById('spinning'); //The spinning number

//event listener
document.getElementById("buttonPressed").addEventListener("click", buttonPressed);

//When the stop button is pushed
function buttonPressed(){
    pushed = true;
}

//set the target Int
function setTargetInt(){
    var targetElem = document.getElementById('targetNum');
    targetInt=Math.floor(Math.random() * 101)
    targetElem.innerHTML = targetInt;
}

//sleep const
const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

//EDIT THIS FUNCTION
const spin = async () => {
    //WRITE YOUR CODE HERE
    let spinning = document.getElementById('spinning');
    for(let i=0;i<101;i++) {
        if(i == 100) i = 0;
        if(pushed) {
            stop(i); //Trigger this function when the STOP button has been pushed
            break;
        } else {
            spinning.innerHTML = i;
            await sleep(75) //Paste this wherever you need to sleep the incrimentor     
        }
    }
}

//EDIT THIS FUNCTION
function stop(i){
    //WRITE YOUR CODE HERE
    var result = document.getElementById('result'); //display your result message here

    let diff = Math.abs(targetInt - (i-1));

    if (targetInt == diff) {
        result.innerText = "Congrats! You're spot on!"
    } else if(diff < 10) {
        result.innerText = `Dang! You're ${diff} away from the target`;
    } else {
        result.innerText = `Sorry! You're ${diff} from the target`;
    }
}