HTMLify
webpage3.html
Views: 604 | Author: demo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!DOCTYPE html> <html> <head> <title>JavaScript Demo Page</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; text-align: center; } .container { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; border: 1px solid #ddd; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } button { background-color: #0074d9; color: #fff; padding: 10px 20px; border: none; border-radius: 3px; font-size: 18px; cursor: pointer; } button:hover { background-color: #0056b3; } </style> </head> <body> <header> <h1>JavaScript Demo Page</h1> </header> <div class="container"> <h2>Basic JavaScript Functionality</h2> <p>Click the button below to see some basic JavaScript in action:</p> <button id="demoButton">Click Me</button> <p id="demoText"></p> </div> <script> // JavaScript function to handle button click function handleButtonClick() { // Select the paragraph element var demoText = document.getElementById("demoText"); // Change the text content of the paragraph demoText.textContent = "Hello, JavaScript! This text was added dynamically."; } // Get the button element by its id var demoButton = document.getElementById("demoButton"); // Attach a click event listener to the button demoButton.addEventListener("click", handleButtonClick); </script> </body> </html> |