CodePen Embed - Generate Jokes (with DOM)

<div class="container">
  <div id="jokes"></div>
  <button id="add-button" onclick="addJoke();" type="button">
    Generate Joke
  </button>
</div>
<script src="app.js"></script>

html,
body {
   margin: 0;
   height: 100%;
   font-family: Arial, Helvetica, sans-serif;
}

body,
.container {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

const jokesDOM = document.getElementById("jokes");

const handleResponse = (data) => {
   jokesDOM.innerHTML = "";
   const p = document.createElement("p");
   const span = document.createElement("span");
   const i = document.createElement("i");
   span.innerText = data.setup + " ";
   i.innerText = data.delivery;
   p.appendChild(span);
   p.appendChild(i);
   jokesDOM.appendChild(p);
};

const addJoke = () => {
   fetch("https://v2.jokeapi.dev/joke/Programming?type=twopart")
      .then((response) => response.json())
      .then((data) => handleResponse(data));
};

This Pen is owned by Suhail Ahmed on CodePen.

See more by @suhailahmed2627 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.