Day 10 - Halloween Coding Challenges 2023 - JavaScript, HTML, CSS, and a pinch of magic

[simong1993]

🎃 Spooky Challenge - Day 10 🎃

The Web Manor's Vault

You stand before the grand vault of the Web Manor. The spirits watch in anticipation as you prepare to enter the code. Will the treasures within be revealed?

---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Web Manor's Vault</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="vault">
        <input type="password" id="vaultCode" placeholder="Enter the code...">
        <button onclick="openVault()">Unlock</button>
        <div class="vault-door"></div>
    </div>
    <div class="vault-message"></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: 20px;
    overflow: hidden;
}

.vault {
    position: relative;
    margin-top: 20px;
    height: 60px;  /* Adjusted height to fit only the input and button */
}

#vaultCode {
    padding: 10px;
    font-size: 1.5em;
}

button {
    padding: 10px 20px;
    font-size: 1.5em;
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    margin-left: 10px;
}

.vault-message {
    margin-top: 10px;
    font-size: 1.5em;
    display: none;
    opacity: 0;  /* Start with fully transparent text */
    transition: opacity 2s;  /* 2 seconds fade transition */
}

function openVault() {
    let code = document.getElementById('vaultCode').value;
    let messageDiv = document.querySelector('.vault-message');

    if (code === "28102018") {
        messageDiv.innerHTML = `
            Congratulations! 🎉<br>
            The code "28/10/2018" is the date our Founder Malcolm first registered our domain name.<br>
            If you've enjoyed this challenge, please share it with others. It helps us a lot, and we've spent a considerable amount of time making this both challenging and fun for you! 🎃<br>
            Lastly, message <a href="https://codeforum.org/members/simong1993.338/" target="_blank">Simong1993</a> for a special on-forum badge to commemorate your achievement!
        `;
        messageDiv.style.display = "block";
        messageDiv.style.opacity = "1";  // Fade in the message
    } else {
        messageDiv.textContent = "The spirits frown upon you. The code seems incorrect.";
        messageDiv.style.display = "block";
        messageDiv.style.opacity = "1";  // Fade in the message
    }
}

---

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

🎃 Thank You, Brave Coders! 🎃

As the candles dim and the haunting hour draws to an end, I'd like to take a moment to express my heartfelt gratitude to every one of you who embarked on this spine-chilling coding journey through the Web Manor. Your tenacity, curiosity, and coding prowess have truly brought the spirits of Halloween to life!

Your participation has made this event more enchanting than we ever imagined. The crypts echoed with your code, the spirits whispered of your solutions, and the shadows danced with your successes. Every challenge, every line of code, and every solution has added to the mystique of this Halloween.

If you've enjoyed this journey as much as we've enjoyed crafting it, please consider sharing it with fellow coders. Your support means the world to us and helps us create even more thrilling adventures in the future.

Remember, the magic of coding isn't just for Halloween; it's a spell you can cast any day of the year. Continue to conjure, create, and code!

Until next time, stay curious, stay coding, and most importantly, stay spooky! 🎃👻

With immense appreciation and spectral delight