All JavaScript beginner courses I know ignore this topic, but in the age of APIs and AI this is really important: fetch.
Do you know now to use fetch?
Here is a very simple exercise to practice or brush up your fetch skills:
Exercise: Fetch and Display a Random Joke
Create a basic HTML structure:
- Create an
index.htmlfile with the following content:
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch Random Joke</title>
</head>
<body>
<h1>Random Joke</h1>
<button id="fetch-joke-button">Get a Joke</button>
<p id="joke-display"></p>
<script src="script.js"></script>
</body>
</html>
Create a JavaScript file to fetch the joke:
the API you can use is https://official-joke-api.appspot.com/random_joke
Can you do it?
You can find the solution from ChatGPT below:
Solution
-
Create a
script.jsfile with the following content:
javascriptCopy code document.getElementById('fetch-joke-button').addEventListener('click', fetchJoke); function fetchJoke() { fetch('https://official-joke-api.appspot.com/random_joke') .then(response => response.json()) .then(data => { document.getElementById('joke-display').innerText = `${data.setup} - ${data.punchline}`; }) .catch(error => { console.error('Error fetching joke:', error); }); } -
How it works:
- When the "Get a Joke" button is clicked, the
fetchJokefunction is called. - This function uses the
fetchAPI to send a GET request to the "Official Joke API" to get a random joke. - Once the response is received, it is converted to JSON format.
- The joke's setup and punchline are then displayed in the paragraph element with the id
joke-display. - If there is an error during the fetch operation, it is logged to the console.
- When the "Get a Joke" button is clicked, the
Steps to Test
- Open your
index.htmlfile in a web browser. - Click the "Get a Joke" button.
- Observe the random joke displayed on the page.
This exercise will help you understand the basics of making HTTP requests using the fetch API and handling the response data in JavaScript.
Hope you enjoyed!
Have a great day, and enjoy the random jokes 😉
Top comments (0)