- How did you start?
We started the project by deciding how we wanted to divide responsibilities between each other. Winston decided that he will attack more of the complex JavaScript and HTML programming. On the other hand, I decided that I will handle the blog posting, cataloging, and CSS sides of the project. We are also working together to assist the main “driver” for each section with peer reviews for feedback and suggestions.
- What did you decide to attack first?
We decided to tackle the conceptually heavy material first. This primarily meant that we tackled the basic API setup before starting to make anything look nice. Because we are still relatively inexperienced with APIs, we performed this by copying what we learned from the professor in a previous video. If anyone is curious about how we did this, we started by making an embedded JSON string inside of a JS file called list-data in the API directory. After that, we simply did a “fetch” request targeted at the file and compiled the results into an Array element. This works because of built-in processes with Vercel.
Even with this visual aid, it took us many hours to get a functional webpage. Messing up with little things caused many headaches for us. Getting this rough draft of the webpage finished was no small feat. If you want to know why there’s barely any CSS implementation yet, we decided that we wanted to focus on producing a functioning concept first, rather than getting too caught up in all the pleasantries of more complex CSS programming.
- What issues have you had?
We had many headaches with setting up the badge-counter element in our badge-list. While setting up the initial property was smooth, we wanted the count value to update dynamically based on how many items were in the array. We made several attempts to create a unique function, but they all kept failing. The main idea of our execution was storing the number of values in a variable set equal to “arrayName.length.” After that, the new variable was supposed to be fed into an updated String for the badge-counter. Eventually, what thankfully succeeded was simply moving our existing code into the updateDirectory function that was already setup.
On the less successful side, we still haven’t figured out how to properly implement a working search function. It’s definitely the most complex part of the project. We were specifically confused on how to change and filter which API elements are displayed based on what’s input into the search bar. We will focus more on this problem in the coming weeks and will work to research more on API fundamentals, in addition to how Vercel changes things. It is our hope that this struggle will be over by next Sunday.
- What concepts translated from Project 1's card?
The largest concept that we brought over from Project 1 is definitely the overall architecture of a card and web component in general. Web components have a unique way of implementing HTML, CSS, and JavaScript based on scoping that we’ve grown accustomed to. The focus that it has on incorporating property elements to initialize each variable for text and images is another thing not found anywhere else. Finally, we plan to bring over our existing knowledge on how to create stateful variables to utilize on our implementations for the search function and proper collapsible functions within the badge.
- What's your next priority?
Our next priority will be getting the search function to work. It is the main feature of this project, yet it is also the aspect which is causing us the most headache. We will ask for help from either the TA, professor, or both in order to solve this problem. In addition to this, we also plan to begin working on the CSS elements of the project around the same time. This will allow us to make it look more like the example that we were given in class.
- What problems are you unsure of how to solve?
As of now, we are still incapable of making the search bar work as intended. To specify our issue, we aren’t sure how to find a way to filter what elements the API displays based on the given input in the search bar. We hope either the TA or professor will aid us in solving this problem. Another source of confusion is how to implement the “Steps to Complete” section of our badge. It’s expected for our implementation to address the possibility of multiple steps; however, we don’t know how to sort API data to individual destinations yet. So far, our API methods have displayed every value at once, but we expect to learn how to address this through our work on the search bar.
Top comments (0)