🎃 Spooky Challenge - Day 2 🎃
Greetings once again, brave soul! As you've ventured past the broken spells of the first day, a new trial emerges from the spectral fog.
The jQuery Decoder
In a world of digital disguise, three numbers stand before your eyes. Two are true, while one tells lies. Decipher their code, unveil the prize.
Below is a haunted script that holds a number hidden in the shadows. Your challenge, should you dare to accept, is to use your knowledge of jQuery and reveal the number that's been tampered with by the spirits.
Hint: The numbers aren't what they seem. Decoding is the key!
🕸️ Platform Suggestion: Need a place to channel your coding magic? Try crafting your solution on CodePen. Create a new pen and conjure the challenge code into it. Remember, sharing the solution with others before the dawn of tomorrow might break the spell!
🔗 Useful Resource: To unravel the mysteries of jQuery and its DOM manipulation powers, check out W3Schools' jQuery Tutorial.
Greetings once again, brave soul! As you've ventured past the broken spells of the first day, a new trial emerges from the spectral fog.
The jQuery Decoder
In a world of digital disguise, three numbers stand before your eyes. Two are true, while one tells lies. Decipher their code, unveil the prize.
Below is a haunted script that holds a number hidden in the shadows. Your challenge, should you dare to accept, is to use your knowledge of jQuery and reveal the number that's been tampered with by the spirits.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spooky Challenge - Day 2</title>
<style>
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;
}
.number {
display: inline-block;
padding: 10px 20px;
font-size: 2em;
border: 2px solid black;
margin: 5px;
}
.highlight {
background-color: red;
color: white;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>The jQuery Decoder</h1>
<p>Use jQuery to decode the hidden numbers and highlight the one that stands alone!</p>
<div class="number" data-encoded="NQ==">5</div> <!-- Base64 for "5" -->
<div class="number" data-encoded="Mw==">3</div> <!-- Base64 for "3" -->
<div class="number" data-encoded="BA==">8</div> <!-- Base64 for "8" -->
<script>
// Your challenge: Use jQuery to decode the numbers.
// Then, find the number that stands alone based on a specific criteria.
// Once found, add the 'highlight' class to make it stand out.
// Hint: The numbers aren't what they seem. Decoding is the key!
</script>
</body>
</html>Hint: The numbers aren't what they seem. Decoding is the key!
🕸️ Platform Suggestion: Need a place to channel your coding magic? Try crafting your solution on CodePen. Create a new pen and conjure the challenge code into it. Remember, sharing the solution with others before the dawn of tomorrow might break the spell!
🔗 Useful Resource: To unravel the mysteries of jQuery and its DOM manipulation powers, check out W3Schools' jQuery Tutorial.
🎃 Spooky Solution - Day 2 🎃
Well done, wise traveler! The spirits are impressed by your prowess and the ghosts whisper tales of your triumph.
The jQuery Decoder's Secret Unveiled:
The cryptic numbers were, in reality, veiled behind a base64 enchantment. By invoking the power of jQuery and the ancient decoding spell, the true number was revealed from the shadows.
Here's the incantation that broke the spectral deception:
With this spell, the number "8" emerged, distinct from its disguised form. Your journey continues, but for now, take a moment to bask in the glow of your achievement. The next challenge awaits, but remember: in this haunted realm, not everything is as it seems...
Well done, wise traveler! The spirits are impressed by your prowess and the ghosts whisper tales of your triumph.
The jQuery Decoder's Secret Unveiled:
The cryptic numbers were, in reality, veiled behind a base64 enchantment. By invoking the power of jQuery and the ancient decoding spell, the true number was revealed from the shadows.
Here's the incantation that broke the spectral deception:
JavaScript:
$(document).ready(function() {
// Loop through each number element
$('.number').each(function() {
// Get the visible number
var visibleNumber = $(this).text();
// Decode the Base64 encoded value from the data-encoded attribute
var decodedNumber = atob($(this).data('encoded'));
// Compare the visible number with the decoded number
if (visibleNumber !== decodedNumber) {
// If they don't match, add the highlight class
$(this).addClass('highlight');
}
});
});With this spell, the number "8" emerged, distinct from its disguised form. Your journey continues, but for now, take a moment to bask in the glow of your achievement. The next challenge awaits, but remember: in this haunted realm, not everything is as it seems...
Last edited:
