Add files via upload

doc22940 · Apr 20, 2020 · 5a11c55 · 5a11c55
1 parent d817c89
commit 5a11c55
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,54 @@
+const addForm = document.querySelector('.add');
+const list = document.querySelector('.todos');
+const deleteIcon = document.querySelector('.delete');
+const search = document.querySelector('.search input');
+
+const createTemplate = todo =>{
+    const html = `
+    <li class="list-group-item d-flex justify-content-between align-items-center">
+        <span>${todo}</span>
+        <i class="far fa-trash-alt delete"></i>
+    </li>
+    `;
+
+    list.innerHTML += html;
+
+
+}
+
+//add todo
+addForm.addEventListener('submit', e =>{
+    e.preventDefault();
+
+    const todo = addForm.add.value.trim();
+
+    if(todo.length){
+        createTemplate(todo);
+        addForm.reset();
+    }
+});
+
+//delete todo
+
+list.addEventListener('click', e =>{
+    if(e.target.classList.contains('delete')){
+        e.target.parentElement.remove();
+    }
+});
+
+const filteredTodos = (term) =>{
+    Array.from(list.children)
+      .filter(todo => !todo.textContent.toLowerCase().includes(term))
+      .forEach(todo => todo.classList.add('filtered'));
+
+    Array.from(list.children)
+    .filter(todo => todo.textContent.toLowerCase().includes(term))
+    .forEach(todo => todo.classList.remove('filtered'));  
+};
+
+//keyup
+search.addEventListener('keyup', () =>{
+    const term = search.value.trim().toLowerCase();
+
+    filteredTodos(term);
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+
+    <link rel="stylesheet" href="style.css">
+    <title>Todo List</title>
+</head>
+<body>
+
+        <div class="container">
+
+                <header class="text-center text-light my-4">
+                  <h1 class="mb-4">Todo List</h1>
+                  <form class="search">
+                    <input class="form-control m-auto" type="text" name="search" placeholder="search todos" />
+                  </form>
+                </header>
+
+                <ul class="list-group todos mx-auto text-light">
+                  <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <span>play mariokart</span>
+                    <i class="far fa-trash-alt delete"></i>
+                  </li>
+                  <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <span>defeat ganon in zelda</span>
+                    <i class="far fa-trash-alt delete"></i>
+                  </li>
+                  <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <span>make a veggie pie</span>
+                    <i class="far fa-trash-alt delete"></i>
+                  </li>
+                </ul>
+
+                <form class="add text-center my-4">
+                  <label class="text-light">Add a new todo...</label>
+                  <input class="form-control m-auto" type="text" name="add" />
+                </form>
+
+              </div>
+
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,24 @@
+body{
+    background: #352f5b;
+}
+.container{
+    max-width: 500px;
+}
+input[type=text],
+input[type=text]:focus{
+    outline: none;
+    color: #fff;
+    border: none;
+    background: rgba(0,0,0,0.2);
+    max-width: 400px;
+}
+.todos li{
+    background: #423a6f;
+}
+.delete{
+    cursor: pointer;
+}
+
+.filtered{
+    display: none !important;
+}