Recreate that functionality using HTML and JavaScript

Setup and List creation

Create your form in HTML. An input field and an "Add" button. Apply id attributes to unique elements that need to be easily targeted.

Use the following data to create your list and display that list on the page as shown in the video.

listData = ["Crab","Lobster", "Scallops"];

Delete functionality

Create rollovers for each list item so that a "delete" image shows on rollover and disappears on rollout (use the proper event names for rollover and rollout).

When users hit the delete image, remove that item from the list.

Edit/Update functionality

When a user clicks on a list item, provide an input field to the left of the list item content that allows the user to type a value.

If the User presses the "Enter" key at this point, update that list item content with their input.

If the User presses the "Esc" key at this point, remove the input field.

Remember that the list items and their associated delete images and input boxes are all created by JavaScript.

If you are having difficulty programming parts of this application but you can find alternative ways to execute the same functionality, I will consider it. For example, if you can't code the "Delete" button as described above, but you can program code that allows a user to remove the list item via a doubleclick event instead, I will allow it. Same general functionality but it is executed differently.

OPTIONALLY, you may add a 3-second timer so that a list item auto-saves if a user has stopped typing in the input field that updates the list item.

Targeting form elements and values 1 Arrays 1 DOM manipulation 5 Event Handling 2 Keyboard events 1

Please send me this answer using notepadd++ for web development. Here is a problem i didn't post the video. But please answer this question as soon as possible