Joke's Application

Joke’s Application

In this blog we are going to be building joke application. So every time you toggle or click on the button it’s going to give you a new joke, each time.

How are we getting these jokes? Well It’s form a third party API. We are going to get an object an id, a joke, the status and we are going to take that joke and put it in the application.

How are we going to do it? By using fetch api and making a request into the browser.

If you want to know more about this third party API click here.

What do we need to have?

Good knowledge of Html, Css and JavaScript.

Let’s get started.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Jokes Application</title>
  </head>
  <body>
    <div class="container">
      <h1>Don't Laught Challenge</h1>
      <div class="joke" id="joke">Joke goes here</div>
      <button class="btn" id="jokebtn">Get Another Joke</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>"

Here we have a div with a class of container”, inside of which we have an h1 element and a div with class of “joke” along with a button with an #id of “btn”.

CSS

@import url("https://fonts.googleapis.com/css2?family=Chango&display=swap");

* {
  box-sizing: border-box;
}

body {
  align-items: center;
  background-color: cadetblue;
  font-family: "chango" sans-serif;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 25px;
  height: 100vh;
  color: cadetblue;
}

.container {
  background-color: aliceblue;
  border-radius: 7px;
  box-shadow: 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
  padding: 50px 20px;
  text-align: center;
  max-width: 100%;
  width: 800px;
}

h1 {
  margin: 0;
  opacity: 0.5;
  letter-spacing: 2px;
}

.joke {
  font-size: 30px;
  line-height: 40px;
  margin: 55 auto;
  max-width: 800px;
}

.btn {
  background-color: gray;
  color: white;
  border: 0;
  border-radius: 7px;
  box-shadow: 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 15px 45px;
  font-size: 18px;
  margin-top: 25px;
}

.btn:active {
  transform: scale(0.98);
}

You can use your own style and fonts.

JAVASCRIPT

const jokeElement = document.getElementById("joke");
const jokeBtn = document.getElementById("jokebtn");

jokeBtn.addEventListener("click", getJoke);

getJoke();

async function getJoke() {
  const config = {
    headers: {
      Accept: "application/json"
    }
  };
  const res = await fetch("https://icanhazdadjoke.com", config);
  const data = await res.json();
  jokeElement.innerHTML = data.joke;

We are using fetch for third party Api. And An async function for better execution and its much easier to understand.

Go ahead and try for yourself.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: