My Contributions

  • A search bar to quickly find item names in the table
    • Algorithm/procedure that iterates through the API (list) of item names then selects ones that match the input of the search bar.
  • A way to “favorite” items in the table and to only show favorited items in the table
    • Saved in localstorage so they remain favorited for the user
      • localStorage is an object (OOP!)

CollegeBoard Requirements/Coding Plan

Row # Requirements Comments
Row 1 Text input in the search bar
New table rows
Change the table to match search
Provide an easy and quick way to find specific items
Replaces table data with rows based on search
Text input and new rows
Row 2 Create new list by indexing the API of items
Being in a list allows for an algorithm to easily iterate through and select needed data
probably gonna be like itemList or something
Data represents the name of the stored items
Row 3 a for loop that checks each item in the list
The list allows for an algorithm to index through each item with a for loop, which would be more complicated without this algorithm because you would have to individually input each string which would become horrible if the list contained a lot of items.
Row 4 search(input) where input is the value of the text box
onKeyPress event
I've described the algorithm like 3 times already you get the idea
Row 5 Compares input to an item in the list then adds that item to a new list if it passes
checks each item in the list
if the item matches the search (if the string of the item name includes the search value) then it gets added to a new list, if not then nothing happens to it
The algorithm starts by creating an empty list then uses a for loop that iterates through the list of item names. It first checks if the item name includes the value from the search, and if it returns true, then that item is appended to the new list then it repeats this check for the next item in the list. If this returns false, it immediately moves to the next item. After each item in the list had been indexed, it runs another procedure that changes the table data based on an array parameter, which here we use the new list so that it only uses data of items that matched the search.
Row 6 search input "boxes"
returns all rows of the table of boxes

Video Features

  • Input: searched item
  • Output: new table rows
  • Functionality: change table to match search input
  • Plan: Search the word “boxes” and the table will have only matching items