Break down of the Code:

In Order to showcase my knowldge in html and javascript I have developed a fun project. Called Dad Jokes, this was demostrate, My knowldge of Javascript and API's. So here is the brief presentation.

HTML Code

• The code is a simple layout using HTML tags
• It consists of a container div that contains a heading h1, a joke p element, and a button
• The element have assigned id attributes that can be used to reference them in Javascript.

Javascript

The JavaScript code manipulates the HTML elements and interacts with an external API to fetch a dad joke.

Variable Declarations

• I used btnEl and jokeEl variables to store references to the HTML elements with the corresponding id attributes.
• Then I used an apiKey for authentication

1. This asynchronous function is triggered when the button is clicked.
2. It updates the text of the joke element to show "Updating..." and disables the button.
3. It then sends a GET request to the dad joke API using fetch() with the provided URL and options.
4. The response is converted to JSON format using response.json().
5. The first joke from the received data is assigned to the jokeEl element's innerText.
6. If any error occurs during the process, an error message is displayed, and the button is re-enabled.