Spaces:
Running
Running
| <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> |