Answered step by step
Verified Expert Solution
Question
1 Approved Answer
Follow these steps: In this task, you will be required to modify your files from the previous task. Follow these steps: main.js: Modify the displayItems
Follow these steps:
In this task, you will be required to modify your files from the previous task.
Follow these steps:
main.js:
Modify the displayItems function as follows:
Each created list element should contain a span element
with a class named delete. Each span element should
have a value of uD which represents the char acter x
in unicode. The x when clicked will be used later on to
delete items from the list.
As the last line of this function, call the deleteItem
function described below to delete an item from the
grocery list.
Create a function called addItem as follows:
This function should update the grocery items arr ay by
getting the value of the text in the tag and adding
it to the arr ay
If the input text field is empty, display an alert to the user
indicating that they should insert an item. Else, add the
input text to the arr ay
Once the item has been added to the arr ay or the alert
displayed, reset the input texts value to an empty string.
As the last line of this function, call the displayItems
function to display the updated arr ay items.
Create a function called deleteItem as follows:
This function should delete items from the arr ay and the
shopping list display.
Add a click event listener to each element with a
delete class when the event is triggered, delete the item
from the arr ay
Add a click event listener to the HTML element with the ID of
itemList. If the events tag name is a list tag, toggle a checked
class on the event element.
Add a keyup event listener to the HTML element with the ID of
input. If the event key is equal to Enter call the addItem
function to add a new item to the list.
CSS:
All elements with a checked class should have styling that
indicates that the item has been checked off the grocery list.
HTML:
Add an onclick attribute to the HTML element with an
addButton ID When this element is clicked, the function that
updates the grocery list should be called.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started