|
|
<!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> |
|
|
|
