JavaScript: Update your shopping list activity to use jQuery instead of (JS) standard document object methods. Your implementation should use jQuery to select, add, remove elements, and react to events instead of DOM methods like getElementById, appendChild, addEventListener, etc. Below the JS HTML and JS Shopping List HTML: Shopping List Shopping List Shopping List JS: function addItem(event) { var list = document.getElementById('shoppingList'); var item = document.createElement('li'); var input = document.createElement('input'); var deleteButton = document.createElement('input'); deleteButton.setAttribute('type', 'button'); deleteButton.setAttribute('value','X'); deleteButton.setAttribute('class', 'deleteButton'); deleteButton.addEventListener('click', removeItem, false); input.setAttribute('type', 'text'); input.setAttribute('placeholder', 'List item'); item.appendChild(input); item.appendChild(deleteButton); list.appendChild(item); }
JavaScript: Update your shopping list activity to use jQuery instead of (JS) standard document object methods. Your implementation should use jQuery to select, add, remove elements, and react to events instead of DOM methods like getElementById, appendChild, addEventListener, etc.
Below the JS HTML and JS
Shopping List HTML:
<html>
<head>
<title>Shopping List</title>
</head>
<style>
body {
background-color: #f9f9f9;
font-family: arial;
}
li {
list-style: none;
padding: 5px;
}
.addButton {
padding: 5px 10px;
background-color: #8214c1;
border: none;
border-radius: 3px;
color: white;
font-size: 1em;
}
.deleteButton {
background-color: #f9f9f9;
color: #8214c1;
font-size: 1em;
border: none;
}
input[type=text] {
border: none;
border-bottom: 1px solid grey;
background-color: #f9f9f9;
font-size: 1.2em;
}
input[type=text]:focus {
outline: none;
}
</style>
<body>
<h1>Shopping List</h1>
<ul id='shoppingList'>
</ul>
<input type="button" class="addButton" onclick="addItem()" value="Add Item">
<script type='text/javascript' src='events-activity-answer.js'></script>
</body>
</html>
Shopping List JS:
function addItem(event) {
var list = document.getElementById('shoppingList');
var item = document.createElement('li');
var input = document.createElement('input');
var deleteButton = document.createElement('input');
deleteButton.setAttribute('type', 'button');
deleteButton.setAttribute('value','X');
deleteButton.setAttribute('class', 'deleteButton');
deleteButton.addEventListener('click', removeItem, false);
input.setAttribute('type', 'text');
input.setAttribute('placeholder', 'List item');
item.appendChild(input);
item.appendChild(deleteButton);
list.appendChild(item);
}
function removeItem(event) {
var listItem = event.target.parentNode;
var list = listItem.parentNode;
list.removeChild(listItem);
}
Step by step
Solved in 4 steps with 4 images
