diff --git a/README.md b/README.md index 610f759..325a809 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,10 @@ -# To-Do-List Front Page - -{C4591A30-5564-48AD-9ACC-1DAA32FA68B4} - -# To-Do-List Main Page +# To-Do-List {C4591A30-5564-48AD-9ACC-1DAA32FA68B4} -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! ๐ŸŽ‰ -## 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 index b79da30..ce5473c 100644 --- a/Todo.html +++ b/Todo.html @@ -47,8 +47,8 @@

Todo-List

-
- +
+ + +
+
diff --git a/impstyle.css b/impstyle.css index 22d89c1..7426d65 100644 --- 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 index 6f3ea76..e6ff3b9 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@

diff --git a/package-lock.json b/package-lock.json index 5ec4266..8637866 100644 --- a/package-lock.json +++ b/package-lock.json @@ -966,6 +966,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "dev": true, + "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" }, diff --git a/script.js b/script.js index 0634e23..de9a90d 100644 --- a/script.js +++ b/script.js @@ -165,6 +165,7 @@ function addTodo() { // Update the displayed list updateTodoList(); + updateTaskCounter(); } function deleteTodo(index) { @@ -172,6 +173,7 @@ function deleteTodo(index) { 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 index a101990..6061b1a 100644 --- 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;