79 lines
2.3 KiB
Groff
79 lines
2.3 KiB
Groff
<!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();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|