add animation using gsap

Groverio · Oct 12, 2024 · d1dccd9 · d1dccd9
1 parent ad65dae
commit d1dccd9
Show file tree

Hide file tree

Showing 5 changed files with 223 additions and 472 deletions.
diff --git a/index.html b/index.html
@@ -5,95 +5,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Todo-List</title>
     <link rel="stylesheet" href="style.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
-      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
   </head>
   <body>
     <div class="container">
-      <h1 class="subtitle">Todo-List</h1>
-
+      <h1>Todo-List</h1>
       <div class="js-add-grid">
-        <input
-          type="text"
-          placeholder="Share Your Thoughts"
-          class="js-name-input"
-        />
+        <input type="text" class="js-name-input" placeholder="Task name" />
         <input type="date" class="js-date-input" />
         <input type="time" class="js-time-input" />
-        <select class="js-category-input">
-          <option value="">Select Category</option>
-          <option value="work">Work</option>
-          <option value="personal">Personal</option>
-          <option value="shopping">Shopping</option>
-          <option value="other">Other</option>
-        </select>
-        <select class="js-priority-input">
-          <option value="">Select Priority</option>
-          <option value="high">High</option>
-          <option value="medium">Medium</option>
-          <option value="low">Low</option>
-        </select>
         <button class="js-add-button">
-          <i class="fa-solid fa-add"></i>
+          <img src="assets/add-icon.png" alt="Add" width="16" height="16" /> Add
         </button>
       </div>
-
-      <!-- Add this new div for sorting buttons -->
-      <div class="sort-buttons">
-        <div class="sort-filter-container">
-          <button class="sort-button" onclick="sortTodos('category')">
-            Sort by Category
-          </button>
-          <button class="sort-button" onclick="sortTodos('priority')">
-            Sort by Priority
-          </button>
-          <select class="js-filter-input" onchange="filterTodos()">
-            <option value="all">All</option>
-            <option value="pending">Pending</option>
-            <option value="completed">Completed</option>
-          </select>
-        </div>
-      </div>
-
-      <div class="js-add-html js-add-grid"></div>
+      <div class="js-todo-list"></div>
     </div>
-
-    <footer class="footer">
-      <p>&copy; 2024 Made with &#10084; by Ansh Grover. All rights reserved.</p>
-      <div class="social-media">
-        <a class="insta" href="https://www.instagram.com/"
-          ><i class="fa-brands fa-instagram"></i
-        ></a>
-        <a class="insta" href="https://www.facebook.com/"
-          ><i class="fa-brands fa-facebook"></i
-        ></a>
-        <a class="insta" href="https://x.com/i/flow/login"
-          ><i class="fa-brands fa-x-twitter"></i
-        ></a>
-        <a class="insta" href="https://www.linkedin.com/"
-          ><i class="fa-brands fa-linkedin-in"></i
-        ></a>
-        <a class="insta" href="https://github.com/Groverio"
-          ><i class="fa-brands fa-github"></i
-        ></a>
-        <a class="insta" href="https://www.youtube.com/"
-          ><i class="fa-brands fa-youtube"></i
-        ></a>
-      </div>
+    <footer>
+      <p>© 2024 Made with ❤ by Ansh Grover. All rights reserved.</p>
     </footer>
-
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,5 +17,6 @@
     "eslint": "^9.12.0",
     "globals": "^15.11.0",
     "prettier": "^3.3.3"
-  }
+  },
+  "dependencies": {}
 }