Creating My First API Javascript Webpage
Tags: javascript, html, css, api
Published: 2022-02-07 19:39:05

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](boredapi.com), 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](https://developer.edamam.com/edamam-docs-recipe-api), that would give me a lot of information on recipes, everything from images, ingredients, dietary information, as well as other info. 

![recipe information](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cm61457hxr9irzcackt.png)

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);
    })
```

![Ingredients](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dhsg5toywuu0d98tki9.png)

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](https://www.npmjs.com/package/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. 

![Page gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbofrmcxlfemftbn3m2t.gif)
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.