Answered step by step
Verified Expert Solution
Link Copied!

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 \u00D7, 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

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Database Management Systems Designing And Building Business Applications

Authors: Gerald V. Post

1st Edition

0072898933, 978-0072898934

More Books

Students also viewed these Databases questions

Question

Acceptance of the key role of people in this process of adaptation.

Answered: 1 week ago

Question

preference for well defined job functions;

Answered: 1 week ago