The given web page lets the user add items to a "to-do" list. The up (↑), down (↓), and done (✓) buttons don't do anything yet. Examine the code
The given todo. js file implements three functions:
ready callback function - Registers addBtnClick() as the click callback function for the Add button.
addBtnClick() - Extracts the text typed into the text box and calls addItem() to add the new item.
addItem() - Creates a list item for the newly entered item that contains the item text, up, down, and done buttons. Clicking the up and down buttons calls moveItem(), and clicking the done button calls removeItem().
Modifications
Make the following modifications using jQuery:
Modify moveItem() to move the at the given fromIndex to the given toIndex. Ex: moveItem(0, 1) should move the first (at index 0) to the second (at index 1). Use the jQuery methods detach(), insertBefore(), and insertAfter() where appropriate. Modify removeItem() to remove the at the given index. Ex: removeItem(2) should remove the third (at index 2). Use the jQuery remove() method to remove the appropriate . Add a keydown event callback function that calls addBtnClick() when the Enter key (keyCode 13) is pressed. After the modifications are complete, the user should be able to: Click the up button (↑) to move the item up one spot. Click the down button (↓) to move the item down one spot. Click the down button (✓) to remove the item from the list. Type a new item and press Enter to add the item without having to click the Add button. todo. js: // HTML for the up, down, and done buttons const upButtonHtml = '↑'; const downButtonHtml = '↓'; const doneButtonHtml = '✓'; $(function() { $("#addBtn").click(addBtnClick); // TODO: Add item if user presses Enter }); function addBtnClick() { let itemText = $("#newItemText").val().trim(); // Don't add empty strings if (itemText. length !== 0) { addItem(itemText); // Clear text and put focus back in text input $("#newItemText").val("").focus(); } } function addItem(item) { // Create a new for the list let $newItem = $(`${item}`);
// Up button moves item up one spot
let $upButton = $(upButtonHtml).click(function() {
let index = $(this. parentElement).index();
moveItem(index, index - 1);
});
// Down button moves item down one spot
let $downButton = $(downButtonHtml).click(function() {
let index = $(this. parentElement).index();
moveItem(index, index + 1);
});
// Add click hander for done button
$doneButton = $(doneButtonHtml).click(function() {
// Remove item from list
let index = $(this. parentElement).index();
removeItem(index);
});
// Add all buttons to the new item, and add new item to list
$newItem. append($upButton, $downButton, $doneButton);
$("ol").append($newItem);
}
function moveItem(fromIndex, toIndex) {
// TODO: Complete the function
}
function removeItem(index) {
// TODO: Complete the function
}