Spaces:
Running
Running
File size: 11,493 Bytes
a6d24ff |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Random Chuck Norris Jokes</title>
<style>
body{font-family:Arial,sans-serif;text-align:center}
h1{color:#ff6700;}
#jokeButton{padding:1rem 2rem;border-radius:.5rem;background-color:#ffcc00;cursor:pointer;transition:opacity.2s ease-in-out}
#jokeButton:hover{opacity:.9}
#jokeDisplay{margin-top:2rem;max-width:80%;margin-left:auto;margin-right:auto}
</style>
</head>
<body>
<h1>Welcome to Random Chuck Norris Jokes!</h1>
<button id="jokeButton">Fetch Joke</button>
<p id="jokeDisplay"></p>
<script>
// Add listener for button click
document.getElementById('jokeButton').addEventListener('click', function() {
// Fetch joke data from endpoint
fetch("https://api.chucknorris.io/jokes/random")
.then(function(response){
return response.json();
}).then(function(data){
var oldJokeNode = document.querySelector("#jokeDisplay");
if (oldJokeNode!== null && oldJokeNode.childNodes[0]!= undefined){
oldJokeNode.replaceChild(document.createTextNode(data.value), oldJokeNode.childNodes[0]);
} else {
// No child node exists yet - append text directly
oldJokeNode.appendChild(document.createTextNode(data.value));
}
});
});
</script>
</body>
</html> |