ecki/JavaScript-from-Beginner-to-Professional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete chapter 13 directory

Browse Source
This commit is contained in:
Karan 2021-11-24 23:07:56 +05:30 committed by GitHub
parent 218bb674aa
commit 80ac2ce98b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 0 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
chapter 13/task List
View File

@ -1,79 +0,0 @@
<!doctype html>
<html>
<head>
<title>JavaScript</title>
<style>
.ready {
background-color: #ddd;
color: red;
text-decoration: line-through ;
}
</style>
</head>
<body>
<div class="main">
<input placeholder="New Item" value="test item" maxlength="30">
<button>Add</button>
</div>
<ul class="output">
</ul>
<script>
const userTask = document.querySelector('.main input');
const addBtn = document.querySelector('.main button');
const output = document.querySelector('.output');
const tasks = JSON.parse(localStorage.getItem('tasklist')) || [];
addBtn.addEventListener('click', createListItem);
if (tasks.length > 0) {
tasks.forEach((task) => {
genItem(task.val, task.checked);
})
}
function saveTasks() {
localStorage.setItem('tasklist', JSON.stringify(tasks));
}
function buildTasks() {
tasks.length = 0;
const curList = output.querySelectorAll('li');
curList.forEach((el) => {
const tempTask = {
val: el.textContent,
checked: false
};
if (el.classList.contains('ready')) {
tempTask.checked = true;
}
tasks.push(tempTask);
})
saveTasks();
}
function genItem(val, complete) {
const li = document.createElement('li');
const temp = document.createTextNode(val);
li.appendChild(temp);
output.append(li);
userTask.value = '';
if (complete) {
li.classList.add('ready');
}
li.addEventListener('click', (e) => {
li.classList.toggle('ready');
buildTasks();
})
return val;
}
function createListItem() {
const val = userTask.value;
if (val.length > 0) {
const myObj = {
val: genItem(val, false),
checked: false
};
tasks.push(myObj);
saveTasks();
buildTasks();
}
}
</script>
</body>
</html>