script.js

// access the root div in index.html
const app = document.getElementById('root');

// create a container as a div in the html
const container = document.createElement('div');
container.setAttribute('class', 'container');

// place the container on the website
app.appendChild(container);

// create a card as a div (this is a container for the joke!)
const card = document.createElement('div');
card.setAttribute('class', 'card');

// text placeholder
const p = document.createElement('p');

function generateJoke() {
    var joke = "";
  // fetch JSON data from the API
    return fetch("https://icanhazdadjoke.com/", {
        headers: {
            Accept: "application/json"
        },
        method: 'GET', // defines the method
    }).then(resp => {
        return resp.json()
    }).then(r => {
        console.log(r);
        joke = r.joke; // gets the joke element from the JSON file

        r.joke = r.joke.substring(0, 300);
        p.textContent = `${r.joke}...`; // displays the joke element in the text placeholder on the website
      
        // places the card on the container
        container.appendChild(card); 
      
        // places the text on the card
        card.appendChild(p);

    })

}