API Consumptions

This day we learnt how to consume API from the internet using the https://official-joke-api.appspot.com/random_joke API. We used this API because it has no API key and API key security is not something we want to think about at this moment. We also took inspiration from this design - https://www.frontendmentor.io/challenges/advice-generator-app-QdUG-13db

All the components used in this code are discussed in previous classes.

Practice challenge

Search the internet to find a few good APIs you would like to use and if you are enthusiastic, make a web application with that API key. (Don’t upload it to github yet, show it to me in person)

A place to find APIs - https://publicapis.io/

Few good/interesting/fun APIs -

https://pokeapi.co/ https://developer.themoviedb.org/docs/getting-started https://musicbrainz.org/doc/MusicBrainz_API

Codes

Joke API Application

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laugh out Loud</title>
    <link rel="stylesheet" href="./style.css" />
</head>
<body>
    <div class="card">
        <p id="setup">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est natus magni beatae aperiam ducimus non itaque rem laborum quidem animi?</p>
        <p id="punchline">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, suscipit.
        </p>
        <button onclick="fetchData()">GG</button>
    </div>
    <script src="./app.js"></script>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    min-height: 100dvh;
    background-color: #191e2d;
    color: white;
    display: grid;
    place-items: center;
    font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}


.card{
    background-color: #424a62;
    padding: 40px;
    border-radius: 20px;
    max-width: 600px;
    position: relative;
}

.card p{
    font-size: 2rem;
    margin-bottom: 5px;
}

.card #setup{
    color: #aaa;
    font-size: 1.8rem;
}

.card button{
    border-radius: 10px;
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
    border: none;
    outline: none;
    background-color: aquamarine;
    cursor: pointer;
    font-size: 1.2rem;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%);
}

.card button:hover{
    background-color: #2cc290;
}

app.js

const setup = document.getElementById("setup");
const punchline = document.getElementById("punchline");

async function fetchData(){
  try {
    let res = await fetch("https://official-joke-api.appspot.com/random_joke")
    res = await res.json()
    setup.innerText = res.setup 
    punchline.innerText = res.punchline
  } catch (error) {
    console.log(err)
  }  
}

fetchData();

/* Using chain function
fetch("https://official-joke-api.appspot.com/random_joke")
    .then(res => res.json())
    .then(res => {
        setup.innerText = res.setup 
        punchline.innerText = res.punchline
    })
    .catch(err => {
        console.log(err)
    })
*/