Joke API Project - Final

index.html

<button id="button" type='button'>Get Joke</button>
<p id="setup"></p>
<p id="punchline"></p>
<p id="error"></p>

joke-api-project-final.markdown

Joke API Project - Final

A Pen by Alex Trost on CodePen.

License.

script.js

document.addEventListener("click", function (event) {
  // Checking if the button was clicked
  if (!event.target.matches("#button")) return;

  /*
  Here we send a request to the Joke API
  Then process the response into JSON
  Then pass the data to our renderJoke function.
  */
  fetch("https://official-joke-api.appspot.com/random_joke")
    .then((response) => response.json())
    .then((data) => renderJoke(data))
    .catch(() => renderError());
});

function renderJoke(data) {
  // Get text elements
  const setup = document.getElementById("setup");
  const punchline = document.getElementById("punchline");
  const error = document.getElementById("error");

  // Hide error and render jokes
  error.innerHTML = "";
  setup.innerHTML = data.setup;
  punchline.innerHTML = data.punchline;
}

function renderError() {
  const error = document.getElementById("error");
  error.innerHTML = "Whoops, something went wrong. Please try again later!";
}

style.css

:root {
  --yellow: #f6e767;
  --white: #f6f7f8;
  --black: #2c2e31;
}

* {
  box-sizing: border-box;
}
body {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 2rem;
  place-content: center;
  min-height: 100vh;
  background-color: var(--black);
  color: var(--white);
  text-align: center;
  font-size: 1.25rem;
  font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans",
    "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed",
    "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue",
    Helvetica, Arial, sans-serif;
}

p {
  margin: 2rem 0 0;
}

#button {
  background: var(--yellow);
  color: var(--black);
  padding: 1rem 2rem;
  font-weight: 300;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  transition: 0.1s ease transform;
  cursor: pointer;
}

#button:active {
  transform: translatey(3px);
}

#punchline {
  font-weight: 600;
  font-size: 1.5rem;
}

#error {
  color: #ff4d51;
}