Creating My First API Javascript Webpage

flugelg — Mon, 07 Feb 2022 19:39:05 +0000

The first task of any project is to figure out what you want to do it on. I was searching through public APIs but wasn't getting anywhere. I just couldn't find one that interested me or I wasn't sure how I would use them. As I was aimlessly searching I had an idea, maybe there was an api that returns something random. Since I was searching randomly, I thought, why don't I create a page that returns a random task or activity. I then found boredapi, which does exactly what I was looking for. It would give a random activity to do, you can have different variables like the amount of people the activity involves or the price of the activity. You would use a query like this

http://www.boredapi.com/api/activity/

to output the random activity. I had made a simple page based on this. You would press a button and it would just display the activity, however I couldn't figure out how to make this look better or more functional. I also didn't really like the activities it displayed because I wouldn't like to do most of them so I went back on the search for a different API. I thought, what can be useful to me? Everyday during or before work I wonder what I should eat for lunch, so I decided to create a webpage that would give me options on food to make for lunch. I found a nice API, Adamam, that would give me a lot of information on recipes, everything from images, ingredients, dietary information, as well as other info.

I thought this would be a good API to use. From there I started to get working on remaking my project. I started with a simple search box where you can put in any food or ingredient and would output a recipe containing your desired food and the ingredients for the recipe. Since the ingredients are an array I used a forEach() method to iterate the array and display it on an unordered list.

ingredientsArray.forEach((ingr) =>{ //iterate array for left ingredients
        let li = document.createElement("li");
        li.textContent = ingr.text;
        ingredientsLeft.appendChild(li);
    })

I thought that the page looked a little plain and it would be a little more functional if you had more than one option, so since the API gave 20 results I decided to display 2 results instead of just one. These results would just be rendered side by side. I would display the food label, an image, and the ingredients list. I could display a lot more information but I wanted it to look simple and I could expand on the idea later if I pleased. If I wanted to save the food I had to make a button to favorite it. I placed that button above the image and below the label, to simulate backend I used json-server. Favoriting the food would put the food name into a json object. To do this I would just create an event listener that would make an array out of the current food label. This array would be passed to a fetch request that would then add the label to a db.json file inside the directory.

document.querySelector('#favorite').addEventListener('click', function(){
        console.log(document.querySelector('#foodLabel1').textContent);
        let favorited1 = [document.querySelector('#foodLabel1').textContent];
        favoriteFoods(favorited1);

function favoriteFoods(favorited){
    fetch("http://localhost:3000/favorites", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
        },
        body: JSON.stringify(favorited)
    })
    .then(res =>res.json())
    .then(food => console.log(food))
}

I created my own logo to put over the search bar to make it look a little less plain. As a little add-on I added a vegan checkbox, since my girlfriend is vegan a vegan option would be nice. This would just change the API query a little to only search for vegan options based on the food inputed. The only thing left to do is to add to my CSS so it would all align how I wanted it. After that was done I completed my first API javascript project. It wasn't the most complicated project but I think it turned out nice. There are ways I can add-on to this project in the future to make it more functional and give more options to the user if I wished. But, for my first full project I considered it a success.

For my next project I hope to use lessons learned from this one, like trying different methods for the same results, asking questions when stuck, and just thinking about how I would like to use the product if I was the user.

DEV Community: flugelg

Creating My First API Javascript Webpage