I found this awesome API database on GitHub:

https://github.com/toddmotto/public-apis

and I just went direct to my favorite thing in the world, the api of dog fun facts.

https://kinduff.github.io/dog-api/

and I used the most classic fetch API writing learned from the video (not using await yet)

fetch('<https://dog-api.kinduff.com> ')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response error');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Fetch error:', error);
    });

However I only got errors saying that the data I got is not a valid JSON file. After consulting with Chat, Chat says the response I got from the endpoint is probably not JSON. I’m not sure why a different data type would cause response.ok = false tho.

image.png

After getting the right response, I realized that IT IS hard to debug and get the variable without writing with async functions. I rewrite it (with chat’s help…) and got the facts from the API. Then I set up a button, that triggers fetching the response every time on click and put the content into a div.

image.png

Screen Recording 2024-09-24 at 19.52.55.mov