Hallo zusammen!
Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!
Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..
Dankeschön im Voraus!
LG
const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")
document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);
function addTodo(event) {
event.preventDefault();
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
const newTodo = document.createElement("li");
newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`;
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
+
saveLocalTodos(todoInput.value);
const completedButton = document.createElement("button");
completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
const trashButton = document.createElement("button");
trashButton.innerHTML = '<i class="fas fa-trash"></li>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
todoList.appendChild(todoDiv);
todoInput.value = "";
}
function deleteCheck(e) {
const item = e.target;
if(item.classList[0] === "trash-btn") {
const todo = item.parentElement;
todo.classList.add("slide");
removeLocalTodos(todo);
todo.addEventListener("transitionend", function() {
todo.remove();
});
}
if(item.classList[0] === "complete-btn") {
const todo = item.parentElement;
todo.classList.toggle("completed");
}
}
function filterTodo(e) {
const 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 "incomplete":
if(!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
}
});
}
function saveLocalTodos(todo) {
let todos;
if(localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
todos.push(todo);
localStorage.setItem("todos", JSON.stringify(todos));
}
function getLocalTodos() {
let todos;
if(localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
todos.forEach(function(todo) {
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
const newTodo = document.createElement("li");
newTodo.innerText = todo;
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
const completedButton = document.createElement("button");
completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
const trashButton = document.createElement("button");
trashButton.innerHTML = '<i class="fas fa-trash"></li>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
todoList.appendChild(todoDiv);
});
}
function removeLocalTodos(todo) {
let todos;
if(localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
deleteAllTodos.addEventListener("click", removeAllTodos);
const todoIndex = todo.children[0].innerText;
todos.splice(todos.indexOf(todoIndex), 1);
localStorage.setItem("todos", JSON.stringify(todos));
}
Funktioniert leider nicht