Untitled
To achieve this, you can use HTML, CSS, and JavaScript. Here's a simple implementation: Code Example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Happy New Year</title> <style> #saika { font-size: 24px; color: blue; cursor: pointer; } #message { margin-top: 20px; font-size: 20px; color: green; } </style> </head> <body> <div id="saika">SAIKA</div> <div id="message"></div> <script> // Get the SAIKA element and message container const saikaElement = document.getElementById("saika"); const messageElement = document.getElementById("message"); // Add a click event listener to display the message saikaElement.addEventListener("click", function () { messageElement.textContent = "HAPPY NEW YEAR"; }); </script> </body> </html> How It Works: 1. HTML: The div with id="saika" displays the clickable text "SAIKA". The div with id="message" is initially empty and will display the message when "SAIKA" is clicked. 2. CSS: Adds styling to make "SAIKA" look clickable (blue color, larger font, and pointer cursor). Styles the message to appear prominently. 3. JavaScript: Listens for a click event on the "SAIKA" text. Updates the content of the #message element to "HAPPY NEW YEAR". Steps to Use: 1. Copy and paste this code into a .html file. 2. Open the file in a web browser. 3. Click on "SAIKA" to see the "HAPPY NEW YEAR" message appear.
Leave a Comment