Beer Me: A JavaScript Project.
What’s better than an ice-cold, craft-brewed pale ale on a hot day? Creating (from scratch) your very first dynamic website using HTML, CSS and JavaScript that will help people get those ice-cold, craft-brewed pale ales on hot days!
Having never created a website from start to finish, I was fully expecting to struggle at every turn, and while I did struggle at points, this process really reinforced the fact that I have learned a whole lot in three short weeks. It also reinforced that I am capable of envisioning, creating and problem solving my way through a project.
One of this project’s requirements is accessing data from a server using an application programming interface, or API. APIs provide the processes necessary for people to access databases for use in applications. In searching for the perfect, free, key-less API, I learned that there are APIs for everything, AND, we are constantly using them- whether it’s listening to music, checking the weather, getting directions or looking up a recipe!
I decided to use the Open Brewery DB API for my project. I knew right away I wanted users to be able to search for breweries in the area by zip code. This meant first having to capture the value of the input form and assign it to a variable, then interpolating the variable into the fetch request- no easy feat for a first-timer. After a full day of coding, I finally got it!! Reflecting on that day, I remember thinking, “The hardest part is done.” Boy, was I wrong.
Coding is a lot like constantly putting out little (well, hopefully little) fires. After successfully fetching data from my API by zip code and moving on to functionality of buttons and whatnot, I realized how basic you have to make yourself think when you’re writing code to ensure every component works correctly. For example, the input form will accept text and numbers of all lengths unless there’s code that is checking for that. After a few hours, that fire was extinguished and I was moving onto the next!
After putting out too many fires to count, my darkest day was upon me — I had initialized a GitHub repo, but I hadn’t made a single commit since then. According to GitHub Guides, “GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.” It essentially allows you to save versions or snapshots of your project at pivotal moments in your coding process.
Sometimes while you’re putting out a fire, you accidentally add fuel to it making it so big you need to call the big guns- a previous GitHub commit- to come in and save the day. And if you don’t have a previous commit, you’re essentially on your own figuring out why your code went from decent to broken in a few key strokes... & from recent experience, this can take a LONG time. So, the following commands became my very best friends:
- Adding all files to the staging area in preparation for you to commit them.
2. Committing the changes you’ve made and adding a memo describing what you’ve added to your files.
3. Pushing your committed changes to your GitHub repository.
And voila! You’ve successfully created a snapshot of your project at a functional point that you can access in case you’ve broken it to a point of seemingly no return. Once I learned the importance of adding commits to your GitHub repo, I made it a point to commit after each fire was put out. This is what my final git log looks like:
This project made me feel every emotion under the sun- excitement, frustration, anger, sadness, happiness and finally ACCOMPLISHMENT. I did it! And it’s time for a cold, celebratory, craft-brewed beer. For those curious to see the final product please feel free to check out my Beer Me GitHub repository.
