After many years of college studying both Finance and Communications, I was never really sold as to whether that is something I wanted to pursue for the rest of my life. It kept me wondering for several years as to what I could amount my career to in a field where I wasn’t overly interested. Fast forward a couple of years later, I have found a passion and love for the world of Software Development, beginning my Journey in 2022 with the Flatiron School Software Engineering Program.

Working in Software Implementation for over 6 months, I got to see first hand what a day in the life of a software developer is. I was intrigued by the foreign language on their screen and the problem solving aspect they were faced with each and every day. I had a few discussions with different developers and gained a strong interest in what the industry looked like.

My journey began with some front end knowledge, with a goal of understanding the fundamentals around HTML, CSS and more specifically Javascript. The beginning is always a challenging experience… learning all the lingo of the industry and gaining an understanding of the basic fundamentals across all coding languages was an important step which I had to take.

The javascript language was quickly one that I began to love working with, seeing the forgiveness it had with its error codes along with the endless functionalities it has in being able to use the eventListener functions to create operational buttons, forms and a lot more.

One of the most enjoyable aspects that I have learned and used in practice is the ability to fetch from an API and see real life data come to fruition on my own web page. Throughout my Phase 1 project containing mostly Javascript, I utilized an oauth API which allowed me to fetch thousands of beers from their database and display them on my webpage.

To do this, I created a variable called ‘fetchRandomBeer’ (so I could easily refer to the function later on) and then created the fetch request, inserting the link to the endpoint which I am retrieving my data from.

The following steps revolve around creating the ‘.then()’ method, which essentially is a promise. If successful, it will return the data you are fetching, if not, it will then return an error of ‘undefined’. This sequence made quick sense to me in practice, however it did take me some time to get a firm grasp of the theory behind this. Once I began reading some extra literature, including the likes of MDN and geeksforgeeks, I understood the importance of this function as it assists with troubleshooting and ensuring you are collecting the correct data.

In terms of the web page I created, one of my initial difficulties was to only generate one specific beer to then render onto my page. My initial request looked like:

// Beer API Calls
const fetchRandomBeer = () => {
    fetch("https://api.punkapi.com/v2/beers/random")
        .then(resp => resp.json())
        .then(data => {
           renderBeerPage(data)
        })
}

This was displaying undefined values once I was attempting to render an individual beer onto my page. After a few too many hours of wondering how to do this, I realized it was the simple error of not singling out one random beer from the array. To do this, I chose to just grab the first beer from each random array, being [0]. After that, it thankfully returned a response!

// Beer API Calls
const fetchRandomBeer = () => {
    fetch("https://api.punkapi.com/v2/beers/random")
        .then(resp => resp.json())
        .then(data => {
           renderBeerPage(data[0])
        })
}

After this successful request was made, I was able to console log the data and view the array in the web browser, posing the question as to what information I wanted to generate on my page.To keep the page as clean and concise as possible, I chose to append only the necessary information to my web page. I did this by utilizing the name of each data point inside the array.

.name
.description

The second major feat that I was over the moon to accomplish, was posting all beers that I liked into my own page/ db.json. This was done by creating a ‘liked’ button to the random beer page which would link it onto my next page. This honestly wasn’t too difficult to create.

 btn.innerText = "Sounds Tasty!"
    btn.classList.add("btn")

I found that my struggles came from being able to append this running list onto the new page, only with information that I needed. When I initially was running the fetch request, I was receiving the entire array of the beer, including all 20+ different types of information about it. Very similar to my earlier struggles, this again was solved by adding the ‘.name’ into the JSON.stringify line.

const tastyBeer = beer => {
    fetch ("http://localhost:3000/liked", {
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        body: JSON.stringify({beer: beer.name})

This time around, I knew this is what I had to do to solidify only the name of the beer onto the page, however I was entering the ‘.name’ in the wrong areas of the code. I initially was entering it in the code that iterates over each liked beer to create the unordered list. This was returning me an ‘undefined’ error in my web page.

// Render and iterate over the liked beers
const renderBeer = () => {
    const ul = document.createElement("ul");
    likedBeers.forEach(beer => newRenderBeer(beer, ul))
    primaryDiv().appendChild(ul);
}

const newRenderBeer = (beer, ul) => {
    const li = document.createElement("li");
    li.innerText = beer.beer
    ul.appendChild(li);
}

I have had an enjoyable experience throughout learning Javascript, with the trials and tribulations attributing to the strong learning curve required to start thinking like a Web Developer.