Video

Written Portion

3a)

3ai)

This program is intended to help users like small businesses easily and quickly find information about items they have in storage to maintain stock.

3aii)

The user searches for pencils and different items from the list matching that name are returned on the table with varying data about them.

3aiii)

The user inputs “Pencils” into the searchbar and only the matching items that were in the table are outputted to the updated table.

3b)

3bi)

var data = [
    {
        "id":1,
        "date":"01-05-2023",
        "action":"Shipped",
        "item":"Pencils",
        "quantity":"1500",
    },
    {
        "id":2,
        "date":"02-07-2023",
        "action":"Delivered",
        "item":"Pens",
        "quantity":"1000",
    },
    {
        "id":3,
        "date":"02-02-2023",
        "action":"Packaged",
        "item":"Markers",
        "quantity":"300",
    },
    {
        "id":4,
        "date":"01-15-2023",
        "action":"In Transit",
        "item":"Highlighters",
        "quantity":"100",
    },
    {
        "id":5,
        "date":"01-05-2023",
        "action":"Shipped",
        "item":"Pencils",
        "quantity":"1500",
    },
    {
        "id":6,
        "date":"02-07-2023",
        "action":"Delivered",
        "item":"Pens",
        "quantity":"1000",
    },
    {
        "id":7,
        "date":"02-02-2023",
        "action":"Packaged",
        "item":"Markers",
        "quantity":"300",
    },
    {
        "id":8,
        "date":"01-15-2023",
        "action":"In Transit",
        "item":"Highlighters",
        "quantity":"100",
    },
    {
        "id":9,
        "date":"01-05-2023",
        "action":"Shipped",
        "item":"Pencils",
        "quantity":"1500",
    }
]

3bii)

searchBar.addEventListener("keyup", function() {
            search(dataList)
        }
    )

3biii)

The list being used in section 3bii is called dataList

3biv)

dataList contains dictionaries corresponding to different items and their properties, including their name, the associated action, the date in which this action occurred, and the quantity of the item.

3bv)

dataList helps manage complexity because it allows the algorithm (shown in section 3ci), search(list) to compare the input to the names of every item in the list in one loop rather than making individual if statements for every single dictionary inside the list. This is especially useful for when there are a much greater number of items, because without the list, this would require an insane amount of if statements in order to check each item.

3c)

3ci)

function search(list) {
    document.getElementById('bruh').innerHTML = " \
    <tr> \
        <th style='width:auto'></th> \
        <th style='width:15%'>Date</th> \
        <th style='width:15%'>Item</th> \
        <th style='width:13%'>Action</th> \
        <th style='width:auto; text-align:right'>Quantity</th> \
        <th></th> \
    </tr> \
    "

    results = []
    input = document.getElementById('searchBar').value.toLowerCase()

    if (input == "" || input == null) {
        getItems(dataList)
    }
    else {
        for (let i = 0; i < list.length; i++) {
            item = list[i]["item"].toLowerCase()

            if (item.includes(input) == true) {
                results.push(list[i])
            }
        }
        if (results.length == 0) {
            document.getElementById('bruh').innerHTML = " \
            <tr> \
                <th style='width:auto'></th> \
                <th style='width:15%'>Date</th> \
                <th style='width:15%'>Item</th> \
                <th style='width:13%'>Action</th> \
                <th style='width:auto; text-align:right'>Quantity</th> \
                <th></th> \
            </tr> \
            <tr><td></td><td colspan='5'><i>No results found.</i></td></tr> \
            "
            getItems(dataList)
        }
        else {
        getItems(results)
        }
    }
}

3cii)

searchBar.addEventListener("keyup", function() {
            search(dataList)
        }
    )

3ciii)

The procedure search(list) takes the input from the search bar and compares it to each element in the list parameter and takes all that match and replaces the data in the table with these matches.

3civ)

The procedure first sets changes the HTML of the table (this is referred to as bruh in my code) to be nothing but the header, then creates an empty list called results for the items that pass the check and also creates a variable called input which is just the value of the search bar input. The next part is the algorithm, which first checks if the search bar is empty, in which it just returns the whole list. If the search bar is not empty, it iterates through each dictionary inside of the list parameter. If the value of the item key includes the input variable, then the dictionary is appended to the results list, otherwise, the algorithm simply moves on to the next dictionary in the list, and repeats this process until each dictionary in list has been checked. After, the algorithm checks if the length of results is zero, to account for there being no matches to the search. In this case, all of the data is displayed again with a note that says there were no matches. For when the length of results is not zero, a row is created and added to the innerHTML of the table for each item in results.

3d)

3di)

First call: Typing “pencils” into the search bar

Second call: Typing “cars” into the search bar

3dii)

The first call is testing for when the search matches an item in the list.

The second call is testing for when the search does not match an item in the list.

3diii)

The first call causes the table to show only rows of items called “Pencils”.

The second call causes the table to show every item in the list with a note at the top that says that there were no matches.