You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.4 KiB
82 lines
2.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="index.css">
|
|
<title>To-do-list</title>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<div id="myDIV" class="header">
|
|
<h2>My To Do List</h2>
|
|
<input type="text" id="myInput" placeholder="Title...">
|
|
<span onclick="newElement()" class="addBtn">Add</span>
|
|
</div>
|
|
|
|
<ul id="myUL">
|
|
<li>Hit the gym</li>
|
|
<li class="checked">Pay bills</li>
|
|
<li>Meet George</li>
|
|
<li>Buy eggs</li>
|
|
<li>Read a book</li>
|
|
<li>Organize office</li>
|
|
</ul>
|
|
</body>
|
|
</html> |