divyansh000915 · Devansh3059 · Oct 1, 2020 · Oct 1, 2020 · Oct 8, 2021 · Oct 8, 2021
diff --git a/app.js b/app.js
@@ -1,4 +1,4 @@
-//Selectors
+//DOM Selectors
 const todoInput = document.querySelector('.todo-input');
 const todoButton = document.querySelector('.todo-button');
 const todoList = document.querySelector('.todo-list');
@@ -50,6 +50,7 @@ function addTodo (Event){
 
 
 }
+//Function to delete
 
 function deleteCheck(e){
     //console.log(e.target);
@@ -73,6 +74,7 @@ function deleteCheck(e){
         todo.classList.toggle("completed");
     }
 }
+//Filtering Function
 
 function filterTodo(e){
     const todos = todoList.childNodes;
@@ -169,4 +171,4 @@ function removeLocalTodos(todo){
     const todoIndex = todo.children[0].innerText;
     todos.splice(todos.indexOf(todoIndex),1);
     localStorage.setItem('todos', JSON.stringify(todos));
-}
+}
diff --git a/index.html b/index.html
@@ -1,35 +1,46 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400&display=swap" rel="stylesheet">    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
+        integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
     <title>T0-DO List</title>
 </head>
+
 <body>
-    <header>
-        <h1>My To Do List</h1>
-    </header>
-    <form>
-        <input type="text" class="todo-input">
-        <button class="todo-button" type="submit">
-            <i class="fas fa-plus-square"></i>
-        </button>
-        <div class="select">
-            <select name="todos" class="filter-todo">
-                <option value="all" selected class="custom">All</option>
-                <option value="completed" class="custom">Completed</option>
-                <option value="incomplete" class="custom">Incomplete</option>               
-            </select>
+    <div class="custom-container">
+        <div class="head">
+            <header>
+                <h1>My To Do List</h1>
+            </header>
+        </div>
+        //Enter you work here
+        <div class="form-container">
+            <form>
+                <input type="text" class="todo-input" placeholder="Enter text here">
+                <button class="todo-button" type="submit">
+                    <i class="fas fa-plus-square"></i>
+                </button>
+                <div class="select">
+                    <select name="todos" class="filter-todo">
+                        <option value="all" selected class="custom">All</option>
+                        <option value="completed" class="custom">Completed</option>
+                        <option value="incomplete" class="custom">Incomplete</option>
+                    </select>
+                </div>
+            </form>
+
+        </div>
+        <div class="todo-container">
+            <ul class="todo-list"></ul>
         </div>
-    </form>
-    <div class="todo-container">
-        <ul class="todo-list"></ul>
     </div>
-
-
     <script src="app.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/style.css b/style.css
@@ -3,6 +3,11 @@
     padding: 0;
     box-sizing: border-box;
 
+}*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
 }
 
 body{
@@ -11,7 +16,9 @@ body{
     font-family: 'Poppins' , sans-serif; 
     min-height: 100vh;
 }
-
+.custom-container{
+    margin-top: 100px;
+}
 header {
     font-size: 1.5rem;
 }
@@ -108,15 +115,6 @@ select{
     outline: none;
     border: none;
 }
-
-/* option{
-    position: absolute;
-    top: 30px;
-    background-color: #f9f9f9;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
-} */
-
 .select{
     margin: 1rem;
     position: relative;
@@ -160,4 +158,136 @@ select {
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-} */
+} */
+
+body{
+    background-image: linear-gradient(120deg,#f3d87e, #fda085);
+    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;
+}
+
+form input, form button{
+    padding: 0.5rem;
+    font-size: 2rem;
+    border: none;
+    background: white;
+}
+
+form button{
+    color: #fda085;
+    background: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+form button:hover{
+    background: #fda085;
+    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;
+    color: black;
+    font-size: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 0.5s ease;
+}
+
+.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(108, 255, 108);
+}
+
+.todo-item{
+    padding: 0rem 0.5rem;
+}
+
+.fa-trash, .fa-check{
+    pointer-events: none;
+}
+
+.completed{
+    text-decoration: line-through;
+    opacity: 0.5;
+}
+
+.fall{
+    /*transform: translateY(8rem) rotateZ('20deg');*/
+    transform: translateY(8rem) rotateZ(20deg);
+    opacity : 0;
+}
+
+select{
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    outline: none;
+    border: none;
+}
+.select{
+    margin: 1rem;
+    position: relative;
+    overflow: hidden;
+}
+
+select {
+    color: #ff6f47;
+    width: 10rem;
+    cursor: pointer;
+    padding: 1rem;
+}
+
+.select::after {
+    content: "\25BC";
+    position: absolute;
+    background: #ff6f47;
+    top: 0;
+    right: 0;
+    padding: 1rem;
+    pointer-events: none;
+    transition: all 0.3s ease;
+}
+
+.select:hover::after{
+    background: white;
+    color: #ff6f47;
+}