script.js

const API_URL = "http://localhost:8000"

async function loadJokes(){
    const response = await fetch(`${API_URL}/jokes`);
    const jokes = await response.json();

    let jokeList = Object.entries(jokes)

    console.log(jokeList);

    const listDiv = document.getElementById("joke-list");



    listDiv.innerHTML = jokeList.map(joke => 
        `<h6 class="m-2 p-2 bg-blue-400">${joke[1].joke_text}</h6>`
    ).join('');
}

async function addJoke(joke_text){
    console.log(joke_text)
    try{
        const response = await fetch(`${API_URL}/jokes/add`, {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body : JSON.stringify({"joke_text" : joke_text})
        });
        console.log(response)
        if(response != null){
            loadJokes()
        }
        return response
    } catch (error) {
        console.error('Error:', error);
    }
}

// Add event listener
document.getElementById("joke-btn").addEventListener('click', function(event) {
    const value = document.getElementById('joke-input').value;
    console.log(value)
    if (value != ""){
        addJoke(value);
    }

})

loadJokes();