<div id="container">
  <h1>Have a Dad Joke</h1>
  <p id="joke"></p>
  <button id="btn">New Joke</button>
</div>

body {
  background: #d1c4e9;
  background-image: url('data:image/svg+xml,%3Csvg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.2"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
#container {
  margin: 2ch;
  padding: 1.75ch;
  width: 30rem;
  height: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    #fafafa 64px,
    #ad1457 64px 66px,
    #fafafa 63px 93px,
    #cce0ff 93px 95px,
    #fafafa 95px 125px,
    #cce0ff 125px 127px,
    #fafafa 127px 157px,
    #cce0ff 157px 159px,
    #fafafa 159px 189px,
    #cce0ff 189px 191px,
    #fafafa 191px 221px,
    #cce0ff 221px 223px,
    #fafafa 223px 253px,
    #cce0ff 253px 255px,
    #fafafa 255px 285px,
    #cce0ff 285px 287px,
    #fafafa 287px 217px
  );
  box-shadow: 5px 3px #90a4ae;
  overflow: hidden;
}
p {
  width: 100%;
  height: 10ch;
  padding: 1ch 0;
  line-height: 2rem;
  font-size: 1.5rem;
  overflow-y: auto;
}

p:empty {
  &::before {
    content: "No joke yet...click the button!";
  }
}

button {
  padding: 2ch;
  width: 15ch;
  color: #fafafa;
  background: lighten(#ad1457, 5%);
  border: 2px solid lighten(#ad1457, 5%);
  &:active {
    background: #ad1457;
    border: 2px inset #ad1457;
  }
}

const jokeDisplay = document.getElementById("joke");

async function newJoke() {
  const response = await fetch("https://icanhazdadjoke.com/", {
    headers: {
      Accept: "text/plain"
    }
  });
  return response.text();
}

document.getElementById("btn").addEventListener("click", async () => {
  try {
    const joke = await newJoke();
    console.log(joke);
    jokeDisplay.textContent = joke;
  } catch (err) {
    jokeDisplay.textContent =
      "Uh-oh! The joke machine might be broken. Click the button again.";
    console.log(err);
  }
});