My partner and I finally finished Project 2.
Our project was broken up into four different components. You could count it as five if you include badges array.
The first component was the badge-search file. It served as the home/landing page where all our other components are imported so that they can be rendered.
Our search-bar component was the first component to be rendered into our badge-search file. It took the input from the search bar and saves it into a variable. There was also a function in there that would detect whenever the input was changed.
Then, we have our badge-list component. This component included a significant chunk of the logic needed to make the entire application work. First, it had our updateBadges() function that would render the badge-array located in the API folder. This was all rendered by using a map in the body of the badge-list. When a user searches for something, that searched term is passed along to my searchThis() function. This function does the filtering based on the searched term and returns the array entries that match. Those array entries are passed on to the map to be rendered.
Those array entries would of course be useless without our badge-template component. This component has the HTML and CSS required to actually create the badges. This component was imported and rendered by our badge-list component. Then, the badge-list component is imported and rendered at the bottom of badge-search. This ensures that the badges are live updating, based on the search done by the user. The search-bar talks to the badge-list by passing in a property.
With everything put together, the badge-search component looks like this:
Now how does this look for the user? The user can type anything into the search bar like "Aaron". The filter will then look at all the properties of the badge-array and compare to "Aaron." If "Aaron" shows up anywhere in the badge, whether it was a title or a creator then the badge is returned.
If the searched term doesn't match anything, then none of the badges are returned.
I would say that there were two "hardest" parts. The first one is the conceptualization process. We were purposely given vaguer directions, since the point of the project was to emulate a real world scenario where you are given a task and it is up to you to implement it. We weren't told how to implement anything, so it was a wide open solution which made it tough for me at first. Progress was slow starting out, but once I had a clear plan in my head I was able to take it step by step.
The second "hardest" part was a technical issue. I found the search bar to be kind of difficult. To elaborate, I had trouble with taking a variable, saving it and then having that search-bar component talk to my other components. Another reason it was tough is that, once they start typing that term will keep changing so my components had to adjust to that. Admittedly, I was stuck here for a bit until I was able to get help from Professor Ollendyke.
I will say, the filtering function was easier than I expected. It was still kinda tough, but it was easier than I expected. I was fully expecting that to be my biggest hurdle. Taking Java was definitely helpful, since I kind of just treated that like I was creating a filter method in Java (with some JS tweaks of course).
Overall, it was a pretty tough project to start. But things got a little easier as I worked at it and asked for help along the way. Although it was definitely tough, it was still a pretty enjoyable project. Seeing the application work as intended was definitely a pretty cool feeling.
Top comments (0)