From dd8c8a78d5edad6534a6cdb91337f5aea1b651ac Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Thu, 12 Nov 2020 12:06:55 -0500 Subject: [PATCH] Todo list --- todo-list/index.html | 20 ++++++++++++ todo-list/script.js | 65 +++++++++++++++++++++++++++++++++++++++ todo-list/style.css | 72 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 157 insertions(+) create mode 100644 todo-list/index.html create mode 100644 todo-list/script.js create mode 100644 todo-list/style.css diff --git a/todo-list/index.html b/todo-list/index.html new file mode 100644 index 0000000..f11f16a --- /dev/null +++ b/todo-list/index.html @@ -0,0 +1,20 @@ + + + + + + + Todo List + + +

todos

+
+ + + +
+ Left click to toggle completed.
Right click to delete todo + + + + diff --git a/todo-list/script.js b/todo-list/script.js new file mode 100644 index 0000000..ec2ca20 --- /dev/null +++ b/todo-list/script.js @@ -0,0 +1,65 @@ +const form = document.getElementById('form') +const input = document.getElementById('input') +const todosUL = document.getElementById('todos') + +const todos = JSON.parse(localStorage.getItem('todos')) + +if(todos) { + todos.forEach(todo => addTodo(todo)) +} + +form.addEventListener('submit', (e) => { + e.preventDefault() + + addTodo() +}) + +function addTodo(todo) { + let todoText = input.value + + if(todo) { + todoText = todo.text + } + + if(todoText) { + const todoEl = document.createElement('li') + if(todo && todo.completed) { + todoEl.classList.add('completed') + } + + todoEl.innerText = todoText + + todoEl.addEventListener('click', () => { + todoEl.classList.toggle('completed') + updateLS() + }) + + todoEl.addEventListener('contextmenu', (e) => { + e.preventDefault() + + todoEl.remove() + updateLS() + }) + + todosUL.appendChild(todoEl) + + input.value = '' + + updateLS() + } +} + +function updateLS() { + todosEl = document.querySelectorAll('li') + + const todos = [] + + todosEl.forEach(todoEl => { + todos.push({ + text: todoEl.innerText, + completed: todoEl.classList.contains('completed') + }) + }) + + localStorage.setItem('todos', JSON.stringify(todos)) +} \ No newline at end of file diff --git a/todo-list/style.css b/todo-list/style.css new file mode 100644 index 0000000..866d46c --- /dev/null +++ b/todo-list/style.css @@ -0,0 +1,72 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #f5f5f5; + color: #444; + font-family: 'Poppins', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +h1 { + color: rgb(179, 131, 226); + font-size: 10rem; + text-align: center; + opacity: 0.4; +} + +form { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + max-width: 100%; + width: 400px; +} + +.input { + border: none; + color: #444; + font-size: 2rem; + padding: 1rem 2rem; + display: block; + width: 100%; +} + +.input::placeholder { + color: #d5d5d5; +} + +.input:focus { + outline-color: rgb(179, 131, 226); +} + +.todos { + background-color: #fff; + padding: 0; + margin: 0; + list-style-type: none; +} + +.todos li { + border-top: 1px solid #e5e5e5; + cursor: pointer; + font-size: 1.5rem; + padding: 1rem 2rem; +} + +.todos li.completed { + color: #b6b6b6; + text-decoration: line-through; +} + +small { + color: #b5b5b5; + margin-top: 3rem; + text-align: center; +}