I'm looking to enhance my simple todo list with a download and upload function. I want to be able to save the list in local storage and then upload or download it from a server code. Below is a link to my code: https://jsfiddle.net/zahrashokri/uqkn6t3y/3 Here is my JavaScript code:
var todoButton = document.querySelector(".todo-button");
var todoList = document.querySelector(".todo-list");
var filterOption = document.querySelector(".filter-todo");
//Event listeners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("click", filterTodo);
function addTodo(event) {
event.preventDefault();
var todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
var newTodo = document.createElement("li");
newTodo.innerText = todoInput.value;
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
var completedButton = document.createElement("button");
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
var trashButton = document.createElement("button");
trashButton.innerHTML = '<i class= "fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
var editButton = document.createElement("button");
editButton.innerHTML = '<i class= "fas fa-edit"></i>';
editButton.classList.add("edit-btn");
todoDiv.appendChild(editButton);
todoList.appendChild(todoDiv);
todoInput.value = "";
}
function deleteCheck(e) {
var item = e.target;
if (item.classList[0] === "trash-btn") {
var todo = item.parentElement;
todo.remove();
}
if (item.classList[0] === "complete-btn") {
var todo = item.parentElement;
todo.classList.toggle("completed");
}
//if (item.classList[0]==="edit-btn"){
//}
}
function filterTodo(e) {
var todos = todoList.childNodes;
todos.forEach(function(todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
}
});
}