DEV Community

Cover image for Day 24 of JavaScriptmas - Test Your Agility Solution
Sekti Wicaksono
Sekti Wicaksono

Posted on

Day 24 of JavaScriptmas - Test Your Agility Solution

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.

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

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!


        <link rel="stylesheet" href="index.css">
        <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 class="target">
            <h3>Target Number: </h3> &nbsp;<h3 id="targetNum"></h3>
        <div class="spin">
            <h3>Spining Wheel: </h3> &nbsp;<h3 id="spinning"></h3>
        <button id="buttonPressed">STOP</button>
        <h4 id="result"></h4>
        <script src="index.js"></script>
Enter fullscreen mode Exit fullscreen mode


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

    text-align: center;

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

    color: blue;
    text-align: center;

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

Enter fullscreen mode Exit fullscreen mode


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))

const spin = async () => {
    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
        } else {
            spinning.innerHTML = i;
            await sleep(75) //Paste this wherever you need to sleep the incrimentor     

function stop(i){
    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`;
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

nithish_13 profile image
Nithish Kumar

Thanks for the content... Really enjoyed a lot :)

flyingduck92 profile image
Sekti Wicaksono • Edited

Thanks hope you learn something. Cheers!