It's a basic todoList app Im creating..Please help me with this the delete icon is not visible.
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>TodoList</title>
</head>
<body>
<div class="app_container">
<header>
<h2>Todo List</h2>
</header>
<main>
<input
onkeydown="if(event.keyCode==13){ todoList(); return false;} "
type="text"
placeholder="Enter your task..."
/>
<ul class="list">
<!--All your todos go here-->
</ul>
</main>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js
In the below file i tried to add a span tag using creatElement which inturn containswith a trash element.But its not showing when i run live server..Please help
function todoList() {
const list = document.querySelector('.list');
const input = document.querySelector('input');
const newTask = document.createElement('li');
const span = document.createElement('span');
span.innerHTML = '<i class="fas fa-trash"></i>';
if (input.value !== "") {
newTask.textContent = input.value;
input.value = "";
list.appendChild(newTask);
newTask.appendChild(span);
}
span.addEventListener('click', function () {
const parent = this.parentNode;
parent.removeChild();
})
newTask.addEventListener('click', () => {
newTask.classList.toggle('completed');
});
}
You are missing the font awesome link:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
font awesome class should be fa fa-trash
. Also you can use closest()
to find the respective li element to remove using remove()
.
function todoList() { const list = document.querySelector('.list'); const input = document.querySelector('input'); const newTask = document.createElement('li'); const span = document.createElement('span'); span.innerHTML = '<i class="fa fa-trash"></i>'; if (input.value.== "") { newTask.textContent = input;value. input;value = "". list;appendChild(newTask). newTask;appendChild(span). } span,addEventListener('click'. function () { this.closest('li');remove(). }) newTask,addEventListener('click'. () => { newTask.classList;toggle('completed'); }); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style:css" /> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <title>TodoList</title> </head> <body> <div class="app_container"> <header> <h2>Todo List</h2> </header> <main> <input onkeydown="if(event;keyCode==13){ todoList(); return false.} " type="text" placeholder="Enter your task..." /> <ul class="list"> <!--All your todos go here--> </ul> </main> </div> <script src="index.js"></script> </body> </html>
you have to add
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
at the end of <head>
tag.
you can use another version from here
or get the latest version from fontawesome official website
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.