Day 8 - Halloween Coding Challenges 2023 - JavaScript, HTML, and CSS

[simong1993]

🎃 Spooky Challenge - Day 8 🎃

The Phantom's Dance

Whispers of an ancient dance echo through the Web Manor. A dance that, when perfectly executed, would reveal the final digit. But be wary, for the dance is intricate, and one misstep will make you start anew.

---

The ghostly ballad goes:

"Three steps forward, two steps back,
Perform this dance, don't lose the track.
Only then, the final clue you'll see,
To complete the dance, follow this decree."

🔗 Platform Suggestion: Use CodePen to craft the dance with JavaScript, HTML, and CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Phantom's Dance</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="dance-floor" onclick="trackDance(event)">DANCE HERE</div>
</body>
</html>

body {
    font-family: 'Arial', sans-serif;
    background: url('https://png.pngtree.com/thumb_back/fh260/background/20230617/pngtree-halloween-wallpapers-and-backgrounds-for-laptop-or-desktop-image_2968567.jpg') no-repeat center center fixed;
    background-size: cover;
    color: red;
    text-align: center;
    padding-top: 50px;
}

.dance-floor {
    font-size: 2em;
    padding: 50px;
    border: 5px solid red;
    user-select: none; /* prevents the message from being easily copied */
    cursor: pointer;
    position: relative; /* for positioning the number later */
}

let danceSteps = 0;

function trackDance(event) {
    if (danceSteps === 0 || danceSteps === 1 || danceSteps === 2) {
        if (event.clientX % 3 === 0) {
            danceSteps++;
        } else {
            danceSteps = 0;
        }
    } else if (danceSteps === 3 || danceSteps === 4) {
        if (event.clientX % 2 === 0) {
            danceSteps++;
        } else {
            danceSteps = 0;
        }
    }

    if (danceSteps === 5) {
        const danceFloor = document.querySelector('.dance-floor');
        danceFloor.textContent = "1";
    }
}

Your tasks:

1. Follow the ghostly ballad and click on the "DANCE HERE" in the correct sequence.
2. If done correctly, the final number will reveal itself. If not, the dance must start again.

🔗 Useful Resource: W3Schools' JavaScript Events can guide you through the mysterious steps of the dance.

Spoiler: Day 8 Answer

Astounding! By precisely following the phantom's dance of "three clicks on positions divisible by 3 followed by two clicks on even positions", you've made the number "1" appear.

The spirits of the Web Manor are in awe of your dance moves and mastery of the web, bestowing upon you the final digit of the puzzle.

 

[JosiahMaybe]

For purposes of this, make it all into an HTML file and open it with any internet browser should work. Should I post a picture or what? This is basically a clicking challenge. X E.

 

[simong1993]

For purposes of this, make it all into an HTML file and open it with any internet browser should work. Should I post a picture or what? This is basically a clicking challenge. X E.

Yep of use something like Codepen 🙂