Recreate that functionality using HTML and JavaScript Setup and List creation Cr
ID: 3909667 • Letter: R
Question
Recreate that functionality using HTML and JavaScriptSetup 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 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 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
Explanation / Answer
<html>
<head>
<style>
* {
box-sizing: border-box;
}
/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
}
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: #f9f9f9;
}
/* Darker background-color on hover */
ul li:hover {
background: #ddd;
}
/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
/* Style the header */
.header {
background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
</style>
</head>
<body>
<form>
<script>
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
</script>
<div id="myDIV" class="header">
<input type="text" id="myInput" placeholder=>
<span class="addBtn">Add</span>
</div>
<ul id="myUL">
</ul>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.