Merge pull request #308 from eshabaweja/todolist-eshabaweja-branch

thinkswell · web-flow · commit c23f181b30f4 · 2021-10-16T19:21:33.000+05:30
a simple todo list
diff --git a/ToDoList/eshabaweja/README.md b/ToDoList/eshabaweja/README.md
@@ -0,0 +1,8 @@
+# todos
+
+A simple checklist page in which we can store (type and press enter), strike out (left click), and delete (right click) items.
+
+
+
+![To-do app screenshot](assets/todo.png)
+
diff --git a/ToDoList/eshabaweja/assets/script.js b/ToDoList/eshabaweja/assets/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))
+}
diff --git a/ToDoList/eshabaweja/assets/style.css b/ToDoList/eshabaweja/assets/style.css
@@ -0,0 +1,72 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto');
+
+*{
+    box-sizing: border-box;
+}
+
+body{
+    background-color: #ebebeb;
+    color: #444444;
+    font-family:Roboto, sans-serif;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+}
+
+h1{
+    color: #625fff;
+    font-size: 10rem;
+    text-align: center;
+    opacity: 0.4;
+}
+
+form{
+    box-shadow: 0 4px 10px #00000025;
+    max-width: 100%;
+    width: 400px;
+}
+
+.input{
+    border: none;
+    color: #444444;
+    font-size: 2rem;
+    padding: 1rem 2rem;
+    display: block;
+    width: 100%;
+}
+
+.input::placeholder{
+    color: #d5d5d5;
+}
+
+.input:focus{
+    outline: 2px solid #625fff;
+}
+
+.todos{
+    background-color: #ffffff;
+    padding: 0%;
+    list-style-type: none;
+    margin: 0;
+}
+
+.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;
+}
diff --git a/ToDoList/eshabaweja/assets/todo.png b/ToDoList/eshabaweja/assets/todo.png
diff --git a/ToDoList/eshabaweja/index.html b/ToDoList/eshabaweja/index.html
@@ -0,0 +1,23 @@
+<!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">
+    <title>Todo List</title>
+
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    
+    <h1>todos</h1>
+    <form id="form">
+        <input type="text" class="input" id="input" placeholder="Enter your todo" autocapitalize="off" autocomplete="off">
+        <ul class="todos" id="todos"></ul>
+    </form>
+    <small>Left click to toggle completed. <br>
+    Right click to delete to-do.</small>
+
+<script src="assets/script.js"></script>
+</body>
+</html>
