Event Delegation
Clicking the red "X" at the right of an item will delete that item.
Clicking on the item will style it with a strike-through to show that it has been picked up.
Entering an item in the input field at the bottom will add the item if either the "+" button is clicked or the "Enter" key is pressed.
Using Delegation
1. Add a click event handler to the list element (ul). This will handle events for both the removing and the marking actions.
2. Add a console.log() in the event handler to display the tagName of the target. Notice that when you click on an item in the list you get "LI" but when you click on the red "X" you get "SPAN".
Clicking the item
2. If it was, then add the class completed to the target element. That will cause it to be displayed lighter and with a strike-through.Use an if statement to determine if the element clicked was an li element.
2. If it was, then add the class completed to the target element. That will cause it to be displayed lighter and with a strike-through.
Clicking the red "X"
1. Use another if statement to determine if the element clicked was a span element. 2. If it was, delete the li. (This is the target's parent element not the span itself).
Adding a new item
We want this event to happen two different ways, when the "+" button is clicked or when the "Enter" key is pressed. Therefore we will create a named function that we can use twice.
1. Add a click event handler to the a element (the plus sign) that will console.log a message.
2. Add a keydown event handler on the input element that will console.log a different message.
3. Create a named function that will add a new li element at the bottom of the list with whatever is in the input field. (Hint: input fields have a property value to get the string entered in the field. textContent does not work with inputs.) Make sure you look at the HTML file and create new li elements that look just like the ones that are there. I.E. Make sure you create a span element in it so the red "X" will appear.
4. Call this function from each of the event handlers to add the item.
5. Add code to the keydown event handler to make sure it only adds an item if the "Enter" key is pressed. (Hint: remember the event.key property?)
6. Clear the input box after creating a new list item. (Hint: input elements don't have a textContent property since they are "Empty Elements". The value property is used instead.)
Solution start here
Introduction: TODO List are the lists that we generally use to maintain our day to day tasks or list of everything that we have to do, It is helpful in planning our daily schedules. We can add moretasks any time and delete a tasks which is completed.
1. Getting Started with HTML
The first step of our JavaScript project is adding HTML.
The HTML file will contain all the elements we need to show on our page when it loads.
The document also includes the location of our CSS and JavaScript files that we will create in the further sections.
The following is the content of your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 6b - Event Delegation</title>
<link rel='stylesheet' href= "style.css" />
<script src= "script.js" defer></script>
</head>
<body>
<div>
<h1>Shopping List</h1>
<ul class='todo-list'>
<li class='todo-item'>Pepsi
<span class='remove'></span></li>
<li class='todo-item'>Honey Nut Cheerios
<span class='remove'></span></li>
<li class='todo-item'>Frozen Pizza
<span class='remove'></span></li>
<li class='todo-item'>Potato Chips
<span class='remove'></span></li>
<li class='todo-item'>Milk
<span class='remove'></span></li>
</ul>
<p class='todo-new'>
<input id='new-item-text' type='text' />
<a id='add-item' href='#'>+</a>
</p>
</div>
</body>
</html>
.2. Making the webpage attractive Using css file
body {
background-color: #5F9EA0;
font-family: Helvetica, Arial, sans-serif;
}
body > div {
width: 300px;
margin:50px auto;
}
h1 {
text-align: center;
}
.todo-list {
list-style: none;
padding: 0px;
}
.todo-item {
border: 2px solid #444;
margin-top: -2px;
padding: 10px;
cursor: pointer;
display: block;
background-color: #ffffff;
}
.todo-new {
display: block;
margin-top: 10px;
content: "20S";
}
.todo-new input[type='text']
{
width: 260px;
height: 22px;
border: 2px solid #444;
}
.todo-new a {
font-size: 1.5em;
color: black;
text-decoration: none;
background-color: #ffffff;
border: 2px solid #444;
display: block;
width: 24px;
float: right;
text-align: center;
}
.todo-new a:hover {
background-color: #0EB0dd;
}
.remove {
float: right;
font-family: Helvetica, Arial, sans-serif;
font-size: 0.8em;
color: #dd0000;
}
.remove:before {
content: 'X';
}
.remove:hover {
color: #ffffff;
}
.todo-item::after:hover{
background-color: #dd0000;
color: white;
}
.todo-item:hover {
background-color: #0EB0FF;
color: white;
}
.completed {
text-decoration: line-through;
opacity: 0.5;
}
3. Complete JavaScript code
function event_handler(e) {
console.log(e.target.tagName);
if (e.target.tagName == "LI")
{
e.target.classList.add("completed");
}
else if (e.target.tagName == "SPAN")
{
e.target.parentNode.remove();
}
else
{
console.log("Unknown TagName: " + e.target.tagName)
}
}
document.getElementsByClassName('todo-list')[0].addEventListener('click', event_handler);
function add_new_item()
{
const list = document.getElementsByClassName('todo-list')[0];
const item = document.createElement('li');
item.classList.add('todo-item');
const spantag = document.createElement('span');
spantag.classList.add('remove');
const input_field = document.getElementById('new-itemtext').value;
item.innerHTML = input_field;
item.appendChild(spantag);
console.log(item);
list.appendChild(item);
document.getElementById('new-item-text').value = '';
}
document.getElementById('add-item').addEventListener('click', () => {
console.log("the plus sign Pressed");
add_new_item();
});
document.getElementById('new-itetext').addEventListener('keydown', (e) => {
if (e.key == 'Enter' || e.keyCode == 13) {
console.log("key " + e.keyCode + " Pressed in Text Field!");
add_new_item();
}
});The styling of the webpage is perfect. It is time to change the page from static to dynamic. We will achieve this task with the help of JavaScript. First we create event handler function. in this function if condition check e.target.tagName == "LI"
.
condition is true then performe e.target.classList.add("completed"). completed is the class name define it html file. after that one more conditon e.target.tagName == "SPAN".
conditon is true then cll remove funtion for revome node then else part.after that we use
document.getElementsByClassName to get todo-list class from html file.when we get elementByclass name then we have use indexing [0] other it is show error massage,
after that we add event listener and cll event handler by onclick.
Then we have created new function it's name is add new_item in this function we define variable it's name list and assign element which class name todo-list using DOM.
after that create li element and assign to item variable then add class todo-item on item node after that create span tag and then add class remove on span tag .
Get inpu field value by Id and then assign to input_field variable after that put input_field text to item node using innerHTML.
Then append chlid node span tag on item node after that append child node item on list node.then out of function add one event listener on element which have id add-item then cll add new_item() onclick.
Then one more event linstener in this event we check enter key is pressed or e.keyCode == 13 it is key code of enter key ,condition is ture cll add add_new_item().
If you have project or assignment files, You can send atcontact@codersarts.com directly
Comentarios