From 7c215f0a844775236726c361e1bdea89c99c15b2 Mon Sep 17 00:00:00 2001 From: developedbyed Date: Fri, 28 Aug 2020 14:05:08 +0300 Subject: [PATCH] vanilla todo --- app.js | 141 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 42 ++++++++++++++++ style.css | 139 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 322 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..1d35d48 --- /dev/null +++ b/app.js @@ -0,0 +1,141 @@ +//Select DOM +const todoInput = document.querySelector(".todo-input"); +const todoButton = document.querySelector(".todo-button"); +const todoList = document.querySelector(".todo-list"); +const filterOption = document.querySelector(".filter-todo"); + +//Event Listeners +document.addEventListener("DOMContentLoaded", getTodos); +todoButton.addEventListener("click", addTodo); +todoList.addEventListener("click", deleteTodo); +filterOption.addEventListener("click", filterTodo); + +//Functions + +function addTodo(e) { + //Prevent natural behaviour + e.preventDefault(); + //Create todo div + const todoDiv = document.createElement("div"); + todoDiv.classList.add("todo"); + //Create list + const newTodo = document.createElement("li"); + newTodo.innerText = todoInput.value; + //Save to local - do this last + //Save to local + saveLocalTodos(todoInput.value); + // + newTodo.classList.add("todo-item"); + todoDiv.appendChild(newTodo); + todoInput.value = ""; + //Create Completed Button + const completedButton = document.createElement("button"); + completedButton.innerHTML = ``; + completedButton.classList.add("complete-btn"); + todoDiv.appendChild(completedButton); + //Create trash button + const trashButton = document.createElement("button"); + trashButton.innerHTML = ``; + trashButton.classList.add("trash-btn"); + todoDiv.appendChild(trashButton); + //attach final Todo + todoList.appendChild(todoDiv); +} + +function deleteTodo(e) { + const item = e.target; + + if (item.classList[0] === "trash-btn") { + // e.target.parentElement.remove(); + const todo = item.parentElement; + todo.classList.add("fall"); + //at the end + removeLocalTodos(todo); + todo.addEventListener("transitionend", e => { + todo.remove(); + }); + } + if (item.classList[0] === "complete-btn") { + const todo = item.parentElement; + todo.classList.toggle("completed"); + console.log(todo); + } +} + +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 "uncompleted": + if (!todo.classList.contains("completed")) { + todo.style.display = "flex"; + } else { + todo.style.display = "none"; + } + } + }); +} + +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 removeLocalTodos(todo) { + let todos; + if (localStorage.getItem("todos") === null) { + todos = []; + } else { + todos = JSON.parse(localStorage.getItem("todos")); + } + const todoIndex = todo.children[0].innerText; + todos.splice(todos.indexOf(todoIndex), 1); + localStorage.setItem("todos", JSON.stringify(todos)); +} + +function getTodos() { + let todos; + if (localStorage.getItem("todos") === null) { + todos = []; + } else { + todos = JSON.parse(localStorage.getItem("todos")); + } + todos.forEach(function(todo) { + //Create todo div + const todoDiv = document.createElement("div"); + todoDiv.classList.add("todo"); + //Create list + const newTodo = document.createElement("li"); + newTodo.innerText = todo; + newTodo.classList.add("todo-item"); + todoDiv.appendChild(newTodo); + todoInput.value = ""; + //Create Completed Button + const completedButton = document.createElement("button"); + completedButton.innerHTML = ``; + completedButton.classList.add("complete-btn"); + todoDiv.appendChild(completedButton); + //Create trash button + const trashButton = document.createElement("button"); + trashButton.innerHTML = ``; + trashButton.classList.add("trash-btn"); + todoDiv.appendChild(trashButton); + //attach final Todo + todoList.appendChild(todoDiv); + }); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..8e5b8dc --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + TodoList + + + + + +
+

Ed's Todo List

+
+
+ + +
+ +
+
+
+ +
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..248d1e8 --- /dev/null +++ b/style.css @@ -0,0 +1,139 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); + color: white; + font-family: "Poppins", sans-serif; + min-height: 100vh; +} +header { + font-size: 2rem; +} + +header, +form { + min-height: 20vh; + display: flex; + justify-content: center; + align-items: center; +} +form input, +form button { + padding: 0.5rem; + font-size: 2rem; + border: none; + background: white; +} +form button { + color: #ff6f47; + background: #f7fffe; + cursor: pointer; + transition: all 0.3s ease; +} +form button:hover { + background: #ff6f47; + color: white; +} +.todo-container { + display: flex; + justify-content: center; + align-items: center; +} + +.todo-list { + min-width: 30%; + list-style: none; +} + +.todo { + margin: 0.5rem; + background: white; + font-size: 1.5rem; + color: black; + display: flex; + justify-content: space-between; + align-items: center; + transition: all 1s ease; +} +.filter-todo { + padding: 1rem; +} +.todo li { + flex: 1; +} + +.trash-btn, +.complete-btn { + background: #ff6f47; + color: white; + border: none; + padding: 1rem; + cursor: pointer; + font-size: 1rem; +} +.complete-btn { + background: rgb(11, 212, 162); +} +.todo-item { + padding: 0rem 0.5rem; +} + +.fa-trash, +.fa-check { + pointer-events: none; +} + +.fall { + transform: translateY(10rem) rotateZ(20deg); + opacity: 0; +} + +.completed { + text-decoration: line-through; + opacity: 0.5; +} + +/*CUSTOM SELECTOR */ +select { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + outline: 0; + box-shadow: none; + border: 0 !important; + background-image: none; +} + +/* Custom Select */ +.select { + margin: 1rem; + position: relative; + overflow: hidden; +} +select { + color: #ff6f47; + font-family: "Poppins", sans-serif; + cursor: pointer; + width: 12rem; +} +/* Arrow */ +.select::after { + content: "\25BC"; + position: absolute; + top: 0; + right: 0; + padding: 1rem; + background: #ff6f47; + cursor: pointer; + pointer-events: none; +} +/* Transition */ +/* +.select:hover::after { + transform: scale(1.5); +} +*/