When I first began brainstorming for my Phase 1 Project at Flatiron School I knew my ideas were more advanced than my skills. I realized almost immediately that I would have to scale back my process to fit my skill set. What I didn’t know is I knew more than what I gave myself credit for. Imposter syndrome was very heavily present in my thoughts as I realized I had no idea how to build a web app from scratch.
This lead me to restructure my program around something I would like to find useful. I have been a TV and cinema fan for as long as I can remember. I even took a few college courses geared towards the field when I was in my undergraduate program at UNC Charlotte. I figured I would build an app that would allow you to search for a tv show. I chose this specifically because I cannot recall how may times I’ve heard someone say “I can’t remember the show name but it had the word ____ in the title”. That is how “TV Information Base” was born.
After building the necessary files in Visual Studio Code I realized I had no idea how to begin. This had been the bane of my existence since beginning at Flatiron. I read through the material, feel like I have a grasp of the ask, and boom! I have no idea where to begin. I have since realized that you just have to start. It doesn’t have to be pretty. It doesn’t have to be extremely long or drawn out. It doesn’t even have to be right! Just start. I knew I needed a main page, a home page, and to be able to search for the tv show. That is how I built my 3 const.
Then I proceeded to build my function to search the show. After researching public API’s TV Maze seemed to be the best choice to build my project. A list for the results would be easy to read and bullet points break up the information. After fetching the URL I made a new const that would produce the list that I needed to display on the screen. The term iterate was not a foreign term before entering the Software Engineering program. However, it was lost on me for much of the beginning of Phase 1. For some reason I could not quite understand it but after building the app I understand what it means to “iterate through the results”. Doing so and using forEach allowed the results to be shown in the way I wanted them to. According to MDN Web Docs, “The forEach() method executes a provided function once for each array element.”.
Once that was complete I created a button that would allow users to click on it to show they have watched a particular show in the search results list. This button also have an event listener that would alert them with a message. That message was a simple “You’ve seen this before”. Adding some level of interactivity aside from entering a search parameter was a feature I added later after having further thoughts on the length of my project. It was a stretch goal as I had no clue how to add the feature. It turned out adding the code in wasn’t too far off from what I entered. I reached out for assistance and realized I didn’t pass in “button” to appendChild. Once, I did that the page my stretch goal was accomplished.
The rest of the code involved hiding the search list once the page was reset from clicking on “TV Information Base”, resetting the search form, hiding the “Watched” button once the page is reset, and having a home page set.
My favorite part of the project was being creative with the HTML and CSS. I found a few gifs from some of my favorite shows and added them onto the left side of the screen. Later on I may try and move the images around and add more images.
Although the Web app is not the most detailed project I’ve seen. I am proud of what I built. It is a fully functioning web app that I constructed 100% from my own work. I had help along the way from my instructors, but I had to put in the work and not be afraid to seek help. Asking for help seems like such an easy concept to reach but it can be very difficult when you want to figure things out on your own. I am excited to see how I can build onto the concepts from Phase 1 as we head into Phase 2.
Top comments (0)