Merge branch 'main' into main

Groverio · Oct 26, 2024 · 393c562 · 393c562
2 parents bf33cdc + 2a3498b
commit 393c562
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,10 @@
-# To-Do-List Front Page
-
-<img width="950" alt="{C4591A30-5564-48AD-9ACC-1DAA32FA68B4}" src="https://github.com/user-attachments/assets/08fe8855-92e8-4f07-9aef-e4cba734078b">
-
-# To-Do-List Main Page
+# To-Do-List
 
 <img width="950" alt="{C4591A30-5564-48AD-9ACC-1DAA32FA68B4}" src="https://github.com/user-attachments/assets/927a61f2-0908-4b76-98fd-7a77191b0177">
 
-A simple and interactive To-Do List application built with HTML, CSS, and JavaScript.
+- Simple
+- Interactive
+- Built with HTML, CSS, and JavaScript
 
 ## Features
 
@@ -63,15 +61,7 @@ npm run format
 
 This command will execute Prettier on your project files and apply consistent formatting according to the rules defined in your configuration.
 
-## Contributing to Hacktoberfest 2024 🎉
-
-![hecktoberfest](https://github.com/user-attachments/assets/9352e904-6b2d-495e-8140-1437e385ffdb)
-
-We are excited to participate in **Hacktoberfest 2024**! If you'd like to contribute to this project during Hacktoberfest, here’s how you can get involved:
-
-- **Solve Issues with Hacktoberfest Tag:** Look for issues labeled with the **Hacktoberfest** tag. You can help by resolving these issues and submitting a pull request (PR) with your changes.
-
-- **Submit New Issues:** If you find a bug or have an idea for a new feature, please create a new issue. Describe the issue or feature request clearly, and once it's documented, feel free to submit a pull request with your implementation. I will tag your PR with the **Hacktoberfest** tag once it's ready.
+## Contribution Guide:
 
 For detailed instructions on how to contribute, please check out the [CONTRIBUTING.md](CONTRIBUTING.md) file.
 
@@ -89,12 +79,4 @@ Let's make this project even better together! 🎉
   </a>
 </div>
 
-## Maintainers
-
-This project is actively maintained by:
-
-| ![Maintainer 1](https://github.com/bryans-go.png?size=100) | ![Maintainer 2](https://github.com/Anshgrover23.png?size=100) |
-| :--------------------------------------------------------: | :-----------------------------------------------------------: |
-|       **[Bryans-go](https://github.com/bryans-go)**        |      **[Anshgrover23](https://github.com/Anshgrover23)**      |
-
 Feel free to reach out to either of us for any issues or contributions.
diff --git a/Todo.html b/Todo.html
@@ -47,8 +47,8 @@ <h1 class="subtitle">Todo-List</h1>
           <option value="low">Low</option>
         </select>
         <div class="js-actions-wrapper">
-          <button class="js-add-button">
-            <i class="fa-solid fa-add"></i>
+          <button class="js-add-button" title="Add tasks">
+            <i class="fa-solid fa-add"></i> &nbsp; Add tasks
           </button>
           <button class="js-cancel-button" title="Cancel">
             <i class="fa-solid fa-times"></i>
@@ -59,7 +59,7 @@ <h1 class="subtitle">Todo-List</h1>
         </div>
       </div>
 
-      <!-- Add this new div for sorting buttons -->
+      <!-- Sorting and task counter section -->
       <div class="sort-buttons">
         <div class="sort-filter-container">
           <button class="sort-button" onclick="sortTodos('category')">
@@ -74,7 +74,11 @@ <h1 class="subtitle">Todo-List</h1>
             <option value="completed">Completed</option>
           </select>
         </div>
+
+        <!-- Task Counter Button in the same row as other buttons -->
+        <button class="task-counter-button">Tasks: 0</button>
       </div>
+
       <div class="test">
         <div class="js-add-html js-add-grid js-add-html-tasks"></div>
       </div>

diff --git a/impstyle.css b/impstyle.css
@@ -1,15 +1,10 @@
 body {
   font-family: Arial, sans-serif;
-  background: rgb(136, 0, 255);
-  background: linear-gradient(
-    0deg,
-    rgba(65, 45, 253, 1) 48%,
-    rgba(29, 29, 29, 1) 100%
-  );
+  background: linear-gradient(to bottom, #6b46c1, #9f7aea, #f687b3);
   margin: 0;
   padding: 20px;
-  overflow: hidden;
-  height: 100vh;
+  /* overflow: hidden; */
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -26,7 +21,8 @@ body {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  height: 70vh;
+  min-height: 70vh;
+  /* border:1px black solid */
 }
 
 .toggle-container {
@@ -42,6 +38,12 @@ body {
   justify-content: center;
   text-align: center;
   margin-bottom: 122px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.toggle-container:hover {
+  transform: scale(1.05);
 }
 
 .toggle-heading {
@@ -56,3 +58,14 @@ body {
   color: #555;
   font-family: 'Londrina Outline', cursive;
 }
+
+@media only screen and (max-width: 1100px) {
+  .contain {
+    flex-direction: column;
+    width: fit-content;
+  }
+  .toggle-container {
+    width: 70%;
+    margin-bottom: 12px;
+  }
+}
diff --git a/index.html b/index.html
@@ -46,7 +46,7 @@
 
     <!-- Main Block -->
     <section
-      class="flex justify-center items-center h-screen bg-gradient-to-b from-purple-600 via-indigo-600 to-gray-900"
+      class="flex justify-center items-center h-screen bg-gradient-to-b from-purple-700 via-purple-500 to-pink-400"
     >
       <div class="container mx-auto px-4 text-center text-white">
         <h1 class="text-4xl md:text-6xl font-bold">

diff --git a/package-lock.json b/package-lock.json
diff --git a/script.js b/script.js
@@ -165,13 +165,15 @@ function addTodo() {
 
   // Update the displayed list
   updateTodoList();
+  updateTaskCounter();
 }
 
 function deleteTodo(index) {
   // Remove the specific todo from the list
   todoList.splice(index, 1);
   localStorage.setItem('todoList', JSON.stringify(todoList));
   updateTodoList();
+  updateTaskCounter();
 }
 
 function editTodo(index) {
@@ -201,6 +203,7 @@ function editTodo(index) {
   addButton.innerHTML = '';
   addButton.title = 'Update';
   addButton.appendChild(checkIcon);
+  updateTaskCounter();
 }
 
 function cancelEditTodo() {
@@ -219,6 +222,7 @@ function cancelEditTodo() {
   addButton.innerHTML = '';
   addButton.title = 'Add';
   addButton.appendChild(addIcon);
+  updateTaskCounter();
 }
 
 function updateTodoList() {
@@ -247,6 +251,7 @@ function updateTodoList() {
         ? priorityOrder[a.priority] - priorityOrder[b.priority]
         : priorityOrder[b.priority] - priorityOrder[a.priority];
     }
+    updateTaskCounter();
   });
 
   const addElement = document.querySelector('.js-add-html');
@@ -295,6 +300,9 @@ function updateTodoList() {
       editTodo(index);
     });
   });
+
+  // Call the task counter update function
+  updateTaskCounter();
 }
 
 function setDefaultDateTime() {
@@ -345,6 +353,19 @@ function toggleComplete(index) {
   }
   localStorage.setItem('todoList', JSON.stringify(todoList));
   updateTodoList();
+  updateTaskCounter();
+}
+
+function updateTaskCounter() {
+  const totalTasks = todoList.length;
+
+  // Select the element where the task counter is displayed
+  const taskCounterButton = document.querySelector('.task-counter-button');
+
+  // Update the text of the task counter button
+  if (taskCounterButton) {
+    taskCounterButton.innerText = `Tasks: ${totalTasks}`;
+  }
 }
 
 // Initialize the todo list and set default date and time on page load

diff --git a/style.css b/style.css
@@ -9,13 +9,7 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background: rgb(136, 0, 255);
-  background: linear-gradient(
-    0deg,
-    rgba(136, 0, 255, 1) 24%,
-    rgba(65, 45, 253, 1) 48%,
-    rgba(29, 29, 29, 1) 100%
-  );
+  background: linear-gradient(to bottom, #6b46c1, #9f7aea, #f687b3);
 }
 why-need-link {
   position: absolute;
@@ -30,7 +24,7 @@ why-need-link {
   border-radius: 5px;
   transition: background-color 0.3s ease;
 }
-. .container {
+.container {
   width: 100%;
   max-width: 1000px;
   padding: 20px;
@@ -39,12 +33,24 @@ why-need-link {
 }
 
 .subtitle {
-  text-align: center;
-  color: #f6ac62;
   font-family: 'Londrina Outline', cursive;
-  font-size: 5rem;
-  padding: 8px 16px;
-  text-shadow: 0 3px 10px rgba(10, 10, 10, 40);
+  font-size: 4rem;
+  color: #ff6f61;
+  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  margin: 20px 0;
+  animation: fadeIn 1s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 h1 {
@@ -355,6 +361,27 @@ Animating title
   background-color: #45a049;
 }
 
+.task-counter-button {
+  background-color: #4caf50;
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+  width: auto;
+  margin-left: auto;
+  margin-right: 0;
+}
+
+.task-counter-button:hover {
+  background-color: #45a049; /* Same hover effect as sort button */
+}
+
 .js-filter-input {
   font-size: 15px;
   padding: 10px 15px;