The love and the struggle of JavaScript

Going into my first vanilla JavaScript project was one of the most exciting and stressful things to experience at the same time. First off, I was excited to do another project, I was able to test my knowledge on how much I knew JavaScript. What was so stressful about the project was I had to do it as a solo project. The only reason I was stressing about it being a solo project, I didn’t feel fully confident with JavaScript yet. My first hurdle was to develop an idea of an app. My goal was to have a simple app that covered all the fundamentals of JavaScript. Going into this project I decide I wanted to get a good understanding of the fundamentals of JavaScript. My goal was to have full CRUD I wanted to have more practice with the fetch especially with the POST and PATCH methods.

One thing I learn with JavaScript that it can be very messy with your codes. What I really mean is there no correct format or organization when you write out your code in JavaScript. So, I wanted to organize my code by separating them by their functionally. I would even use comments to separate some of the actions I am using within the function. It very important to organize and keeping your code clean. Getting into a habit to do that will definitely benefit you in the long run. Especially if you are writing all your code on one page keeping it clean can help you and others to read your code and understand what happening in each function. Organizing your work can help you find your functions or code that you are looking for especially if your one file has hundreds of lines of code.

The get fetch part of JavaScript was the only thing that came easily to me. When doing my project. My basic understanding of fetch is you are trying to access data from an api. Once you have created that connection to that api, you able to use the data that is provided with that api. For my project, I created my own api which only had two objects. The reason of my small data was I wanted to have an app that allowed the user to create their own dish recipes and just add all those recipes into a data. Knowing that I knew my biggest struggle would be creating a POST and PATCH fetch. Once I was able to get the data from the api, I had to create some elements to be able to display the data on the app. In my project I wanted to create cards for each recipe. I would of an image of the dish on the front side of the card and on the back of the card I would have the ingredients of the dish. If you are building all your elements using JavaScript its important to make sure to add classes to your elements like adding a class to a div. The reason for it, it will help you add css to your app when you have all your elements assigned to a class name.

Once I was able to display my data from the api. I knew my next step was to create POST fetch. I knew this would be a struggle for me. My biggest issue with POST is understand the meaning behind body: JSON.stringify() and the then statements. After struggling and trying to understand how it works. I finally was able to develop some understanding how POST works. As a user we are trying to create and add to the api database. Once the user has created a new data, we translate into a format that the computer can understand. By doing so we are first telling the system that here are some keys and values the user inputted. Take that data format it into a json and send it to the database to store. Basically, that’s what the purpose of the body does in the POST fetch method. We are stringify the users input into json format. After this process this is where the first then statement comes in. It taking that data sending it to the database once that promise is fulfilled it continues to the second then statement. Now that we added the data to the database, we need to bring back that data so we can display it on the app. This was my biggest struggle of understanding how to render the new data. After hours of struggling to understand the then statement. I was finally able to understand in my own way. The way I look at it is we are grabbing that data, since it’s a new data we want to make it into a card like the else of the data that’s being displayed. Since I already have a function that builds a card for me all I have to do is pass the argument into that function and it should create me a new card based on the new data the user has put in.

However, I had to make two POST fetch methods because of my model structure I needed to create a dish data and then use that dish and create a new recipe. On the second POST fetch I did the same thing as the first post when it comes to the body: JSON.stringfiy(). Once I got to the second then statement it got a little tricky because I’m not creating a card because my first POST already did that for me. This time I had to add the recipe to that card. Since the new dish has many ingredients, I needed each ingredient to print on a new line using li and placing it on the back on the card. Knowing the ingredients are in an array of strings I have to iterate through each string. I first had to create a for loop and then for each ingredient have it create a new li element. Once I was able to create a list of the ingredients, I had to append it to a div. that’s associated with the back of the card. After going through two POST fetch I have a better understanding how the POST method works and how the then statements work. The best part of this experience is with all that materials we were taught we are now able to test ourselves on what we have learned and see if we can create an app. Even if you are struggling and understanding JavaScript the best to understand the materials is by creating an app and putting this lesson to the test. It’s a great way to see what you know and where you need to improve. Even though my weakness was the POST and PATCH, I knew I do work harder on those methods so I can have a better understanding of it.