Array Manipulation

Scenario

You have been assigned to work on a feature that handles large sets of data in the form of arrays. You need to build efficient functionality to add, remove, and filter data from arrays based on user interactions. In this assignment, you will practice manipulating arrays with JavaScript methods and writing code that dynamically handles user inputs.

Learning Objectives

By the end of this activity, you will have demonstrated your ability to:

• Use array methods such as push(), pop(), shift(), and unshift() to manipulate arrays.
• Filter and transform arrays using JavaScript array methods.
• Dynamically display the contents of arrays on a webpage.
• Write clean, maintainable JavaScript code to handle array operations.

Instructions

Task 1: Array Manipulation Basics

1. Create an empty array called shoppingList.
2. Write a function called addItem that takes an item as a parameter and adds it to the shoppingList array.
3. Write a function called removeLastItem that removes the last item from the shoppingList array.
4. Write a function called displayList that logs all items in the shoppingList array to the console.

Task 2: Filter and Search an Array

1. Modify the addItem function to only add the item if it is not already in the shoppingList array.
2. Write a function called filterItems that takes a search term as a parameter and returns all items in the shoppingList that contain that search term (case-insensitive).

Task 3: Render the List in the Browser

1. Create an HTML page with an input field, an “Add Item” button, and an unordered list to display the items.
2. Write a JavaScript function that adds items to the array and updates the displayed list dynamically when the button is clicked.
3. Write another function that removes the last item and updates the displayed list when a “Remove Last Item” button is clicked.

Submission Instructions

1. Complete all of the tasks outlined above.
2. Test your code in a browser and ensure that it works as expected.
3. Submit your code by sharing the link to a GitHub repository containing the files via Canvas.

Reflection Questions

After completing this lab, reflect on the following questions:

1. How did array methods like push() and filter() help you manipulate data in this activity?
2. What challenges did you face when trying to filter and search for items in the array?
3. How would you modify this code to make it more efficient or user-friendly?

Additional Resources

• JavaScript Arrays on MDN 
• JavaScript Array Methods