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
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
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./style.css">
<title>To Do List</title>
</head>
<body>
<header>
<h1>My Tasks</h1>
</header>
<form action="">
<div class="inputs">
<input type="text" class="todo-input">
<input type="date" class="todo-input-two">
</div>
<button class="todo-button" type="submit">
<i class="fas fa-plus-circle fa-lg"></i>
</button>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="incomplete">Incomplete</option>
</select>
</div>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<div class="deleteAll">
<button>Delete All</button>
<button>Change Status</button>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(45deg, rgb(20, 222, 124) 0%, rgb(20, 222, 124) 21%,rgb(25, 190, 119) 21%, rgb(25, 190, 119) 37%,rgb(30, 158, 113) 37%, rgb(30, 158, 113) 46%,rgb(35, 126, 108) 46%, rgb(35, 126, 108) 53%,rgb(39, 94, 103) 53%, rgb(39, 94, 103) 59%,rgb(44, 62, 97) 59%, rgb(44, 62, 97) 77%,rgb(49, 30, 92) 77%, rgb(49, 30, 92) 100%);
background-repeat: no-repeat;
height: 1220px;
color: white;
font-family: "Poppins", sans-serif;
min-height: 100vh;
}
header {
font-size: 1.5rem;
}
header,
form {
min-height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
.inputs {
display: flex;
flex-direction: column;
gap: 10px;
}
form input,
form button {
padding: 0.5rem;
padding-left: 1rem;
font-size: 1.8rem;
border: none;
background: white;
border-radius: 2rem;
}
form button {
color: #311E5C;
background: white;
cursor: pointer;
transition: all 0.3 ease;
margin-left: 0.5rem;
}
form button:hover {
color: white;
background: #311E5C;
}
.fa-plus-circle {
margin-top: 0.3rem;
margin-left: -8px;
}
.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 30%;
list-style: none;
}
.todo {
margin: 0.5rem;
padding-left: 0.5rem;
background: white;
color: black;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.5s;
border-radius: 2rem;
}
.todo li {
flex: 1;
}
.trash-btn,
.complete-btn {
color: white;
border: none;
padding: 1rem;
cursor: pointer;
font-size: 1.5rem;
}
.complete-btn {
background: #311E5C;
}
.trash-btn {
border-top-right-radius: 1.75rem;
border-bottom-right-radius: 1.75rem;
background: #275E67;
}
.todo-item {
padding: 0rem 0.5rem;
}
.fa-trash,
.fa-check-circle {
pointer-events: none;
}
.completed {
text-decoration: line-through;
opacity: 0.5;
}
.slide {
transform: translateX(10rem);
opacity: 0;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
}
.select {
margin: 1rem;
position: relative;
overflow: hidden;
border-radius: 50px;
}
select {
color:#311E5C;
width: 10rem;
height: 3.2rem;
cursor: pointer;
padding: 1rem;
}
.select::after {
content: "\25BC";
position: absolute;
background:#311E5C;
top: 0;
right: 0;
padding: 1rem;
pointer-events: none;
transition: all 0.3s ease;
}
.select:hover::after {
background: white;
color: #311E5C;
}
.deleteAll {
display: flex;
justify-content: center;
gap: 10px;
margin-left: -150px;
margin-top: 35px;
}
.deleteAll button {
padding: 0.5rem;
padding-left: 1rem;
font-size: 30px;
border: none;
background: white;
border-radius: 2rem;
color: #311E5C;
text-transform: uppercase;
cursor: pointer;
}
.deleteAll button:hover {
color: white;
background-color: #311E5C;
}
Javascript:
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));
}
