Skip to main content

Task 25: Events & DOM – Click a Button to Reveal a Surprise Message

Start with Affirmation​

  • "I am destined for greatness. Every step I take brings me closer to my goals. I embrace challenges, knowing they are stepping stones to success. My mind is focused, my heart is determined, and my actions are aligned with my dreams."

Daily Affirmations for Success

  • ✅ I am capable, confident, and unstoppable.
  • ✅ Success flows to me because I take consistent action.
  • ✅ I attract opportunities that align with my purpose.
  • ✅ My hard work and persistence create abundance.
  • ✅ I am always learning, growing, and evolving.
  • ✅ I believe in my potential and trust my journey.
  • ✅ I turn setbacks into comebacks with resilience.
  • ✅ I am grateful for every success, big and small.

Success Reflection​

"Every effort I made today has planted seeds for my future success. I release any doubts and trust the process. My dreams are possible, and I am getting closer every day. I am grateful, I am strong, and I am ready for more!"

💪 Repeat daily, feel the power, and watch your success unfold!

Task Answer - Video Link​

🔹 If you don’t understand the task, watch the video above for the answer.

Task​

Step 1​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>🎉 Surprise Message App</title>
</head>
<body>
  <h1>Click the Button for a Surprise! 🎁</h1>
  <button id="revealBtn">Show Surprise</button>
  <p id="message" style="display: none;">🎉 You’re awesome! Keep coding! 🚀</p>

  <!-- Link to JavaScript -->
  <script src="script.js"></script>
</body>
</html>

Step 2​

// Step 1: Get elements from the DOM
const button = document.getElementById("revealBtn");
const message = document.getElementById("message");

// Step 2: Add a click event to the button
button.addEventListener("click", () => {
  // Step 3: Reveal the hidden message
  message.style.display = "block";
});

CANVA Link​

Vison Board - Lukas - Canva Link