| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | |
| | <style> |
| | body { |
| | font-family: "Arial", sans-serif; |
| | background-color: white; |
| | margin: 0; |
| | padding: 24px; |
| | } |
| | |
| | * { |
| | box-sizing: border-box; |
| | } |
| | |
| | .container { |
| | max-width: 30rem; |
| | margin: auto; |
| | padding: 24px; |
| | border-radius: 8px; |
| | border: 1px solid lightgray; |
| | text-align: center; |
| | } |
| | .container h1 { |
| | margin: 0 0 24px; |
| | } |
| | |
| | #button { |
| | background-color: black; |
| | color: white; |
| | border-radius: 100px; |
| | padding: 8px 16px; |
| | border: none; |
| | cursor: pointer; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <h1> |
| | Space Developer |
| | </h1> |
| | <button id="button"> |
| | Button clicked: 0 |
| | </button> |
| | </div> |
| |
|
| | |
| | <script> |
| | let count = 0; |
| | const button = document.getElementById("button"); |
| | |
| | button.addEventListener("click", (e) => { |
| | count = count + 1; |
| | button.innerHTML = `Button clicked: ${count}` |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| | |
