Skip to content

Instantly share code, notes, and snippets.

@eimg
Created January 28, 2024 03:26
Show Gist options
  • Save eimg/e53c4f9a21394a8b734d7954ad88dcc3 to your computer and use it in GitHub Desktop.
Save eimg/e53c4f9a21394a8b734d7954ad88dcc3 to your computer and use it in GitHub Desktop.
Todo List with Vanilla JS for PWD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/all.min.css">
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container" style="max-width:600px">
<a href="#" class="navbar-brand">
Todo <span class="badge bg-danger ms-1">0</span>
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" id="clear" class="nav-link">Clear</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="max-width:600px">
<div class="input-group my-4">
<input type="text" class="form-control">
<button class="btn btn-dark">Add</button>
</div>
<ul id="todo" class="list-group"></ul>
<ul id="done" class="list-group opacity-50 mt-4"></ul>
</div>
<script>
let data = getData();
data.map(item => createItem(item.text, item.done));
function getData() {
return JSON.parse(localStorage.getItem("data")) || [];
}
function saveData(text) {
let data = getData();
data.push({ text, done: false });
localStorage.setItem("data", JSON.stringify(data));
}
function deleteData(text) {
let data = getData();
let result = data.filter(item => item.text != text);
localStorage.setItem("data", JSON.stringify(result));
}
function checkData(text) {
let data = getData();
let result = data.map(item => {
if (item.text == text) item.done = true;
return item;
});
localStorage.setItem("data", JSON.stringify(result));
}
function clearData() {
let data = getData();
let result = data.filter(item => !item.done);
localStorage.setItem("data", JSON.stringify(result));
}
document.querySelector("#clear").onclick = function () {
document.querySelector("#done").textContent = "";
clearData();
}
function updateCount() {
document.querySelector(".badge").textContent =
document.querySelectorAll("#todo li").length;
}
document.querySelector("button").onclick = function () {
let text = document.querySelector("input").value;
if (text == "") return false;
createItem(text);
updateCount();
saveData(text);
document.querySelector("input").value = "";
document.querySelector("input").focus();
}
document.querySelector("input").onkeydown = function (e) {
if (e.key == "Enter") {
document.querySelector("button").onclick();
}
}
function createItem(text, done = false) {
let li = document.createElement("li");
li.classList.add("list-group-item");
li.textContent = text;
let del = document.createElement("a");
del.setAttribute("href", "#");
del.classList.add("fa-solid", "fa-trash", "text-danger", "float-end");
del.onclick = function () {
li.remove();
updateCount();
deleteData(text);
}
li.appendChild(del);
let check = document.createElement("a");
check.setAttribute("href", "#");
check.classList.add("fa-solid", "fa-check", "float-start", "me-2");
check.onclick = function () {
document.querySelector("#done").appendChild(li);
check.remove();
updateCount();
checkData(text);
}
if (!done) li.appendChild(check);
if (done) {
document.querySelector("#done").appendChild(li);
} else {
document.querySelector("#todo").appendChild(li);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment