From 58cfc70b593cacfddd1b9d51f4c7cebe6e6f82d1 Mon Sep 17 00:00:00 2001 From: Nikunj Date: Sat, 12 Oct 2024 20:05:06 +0530 Subject: [PATCH] add fix lint --- README.md | 4 +- index.html | 16 ++-- package-lock.json | 9 ++ package.json | 3 +- script.js | 211 +++++++++++++++++++++++++++------------------- style.css | 159 ++++++++++++++++++---------------- 6 files changed, 230 insertions(+), 172 deletions(-) diff --git a/README.md b/README.md index 640f129..adef21e 100644 --- a/README.md +++ b/README.md @@ -74,8 +74,8 @@ Let's make this project even better together! 🎉
- - + +
diff --git a/index.html b/index.html index 1d874ef..317ed6a 100644 --- a/index.html +++ b/index.html @@ -5,30 +5,24 @@ Todo-List - +

Todo-List

-
- + -
-
+
- diff --git a/package-lock.json b/package-lock.json index 54f577e..dc537d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "to-do-list", "version": "1.0.0", "license": "ISC", + "dependencies": { + "gsap": "^3.12.5" + }, "devDependencies": { "@eslint/js": "^9.12.0", "eslint": "^9.12.0", @@ -656,6 +659,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/gsap": { + "version": "3.12.5", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz", + "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==", + "license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/" + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", diff --git a/package.json b/package.json index 19b8339..26366f8 100644 --- a/package.json +++ b/package.json @@ -17,5 +17,6 @@ "eslint": "^9.12.0", "globals": "^15.11.0", "prettier": "^3.3.3" - } + }, + "dependencies": {} } diff --git a/script.js b/script.js index 0f69ae9..3bee25f 100644 --- a/script.js +++ b/script.js @@ -1,125 +1,158 @@ +/* global gsap */ + let todoList = JSON.parse(localStorage.getItem('todoList')) || []; -let todoListhtml = ''; -console.log(todoList); function addTodo() { const inputNameElement = document.querySelector('.js-name-input'); - let name = inputNameElement.value; const inputDateElement = document.querySelector('.js-date-input'); - let date = inputDateElement.value; const inputTimeElement = document.querySelector('.js-time-input'); - let time = inputTimeElement.value; - // Validation checks + const name = inputNameElement.value.trim(); + const date = inputDateElement.value; + const time = inputTimeElement.value; + if (!name || !date || !time) { alert('Please fill in all fields: task, date, and time.'); - return; + return; // Exit the function if any field is empty } - todoList.push({ name, date, time }); - localStorage.setItem('todoList', JSON.stringify(todoList)); + const newTodo = { name, date, time }; + todoList.push(newTodo); + saveTodoList(); inputNameElement.value = ''; - inputDateElement.value = ''; - inputTimeElement.value = ''; setDefaultDateTime(); - // Update the displayed list with animation - updateTodoList(true); // Pass true to animate on addition + updateTodoList(); + + // Animate the newly added item + const todoListElement = document.querySelector('.js-todo-list'); + const newItem = todoListElement.lastElementChild; + if (newItem) { + gsap.from(newItem, { + opacity: 0, + y: 20, + duration: 0.5, + ease: 'back.out(1.7)', + }); + } } function deleteTodo(index) { - // Create a reference to the element to animate - const itemToDelete = document.querySelector(`.todo-item[data-index="${index}"]`); + const itemToDelete = document.querySelector( + `.todo-item[data-index="${index}"]` + ); - // Animate the item before removing it gsap.to(itemToDelete, { opacity: 0, - scale: 0.5, - duration: 0.3, + x: 100, + duration: 0.5, + ease: 'power2.in', onComplete: () => { - // Remove the specific todo from the list todoList.splice(index, 1); - localStorage.setItem('todoList', JSON.stringify(todoList)); + saveTodoList(); updateTodoList(); }, }); } -function updateTodoList(animate = false) { - // Sort todoList by date and time before rendering - todoList.sort((a, b) => { - const dateA = new Date(a.date + ' ' + a.time); - const dateB = new Date(b.date + ' ' + b.time); - return dateA - dateB; // Sort by ascending date and time - }); +function editTodo(index) { + const todo = todoList[index]; + const inputNameElement = document.querySelector('.js-name-input'); + const inputDateElement = document.querySelector('.js-date-input'); + const inputTimeElement = document.querySelector('.js-time-input'); + const addButton = document.querySelector('.js-add-button'); - const addElement = document.querySelector('.js-add-html'); - todoListhtml = ''; - - for (let i = 0; i < todoList.length; i++) { - todoListhtml += ` - -
${todoList[i].name}
-
${todoList[i].date} ${todoList[i].time}
- - `; - } - - addElement.innerHTML = todoListhtml; - - if (animate) { - // Animate the newly added items - const newItems = document.querySelectorAll('.todo-item'); - newItems.forEach(item => { - gsap.from(item, { - opacity: 0, - scale: 0.5, - duration: 0.3, - }); - }); - } + inputNameElement.value = todo.name; + inputDateElement.value = todo.date; + inputTimeElement.value = todo.time; + + addButton.innerHTML = + 'Update Update'; + addButton.onclick = () => updateTodo(index); + + // Highlight the item being edited + const itemToEdit = document.querySelector( + `.todo-item[data-index="${index}"]` + ); + gsap.to(itemToEdit, { + backgroundColor: '#fffacd', + duration: 0.3, + yoyo: true, + repeat: 1, + }); } function updateTodo(index) { const inputNameElement = document.querySelector('.js-name-input'); const inputDateElement = document.querySelector('.js-date-input'); const inputTimeElement = document.querySelector('.js-time-input'); + const addButton = document.querySelector('.js-add-button'); - // Validation checks - if ( - !inputNameElement.value || - !inputDateElement.value || - !inputTimeElement.value - ) { - alert('Please fill in all fields: task, date, and time.'); - return; - } - - // Update the todo in the list - todoList[index].name = inputNameElement.value; - todoList[index].date = inputDateElement.value; - todoList[index].time = inputTimeElement.value; + const name = inputNameElement.value.trim(); + const date = inputDateElement.value; + const time = inputTimeElement.value; - // Update local storage - localStorage.setItem('todoList', JSON.stringify(todoList)); + todoList[index] = { name, date, time }; + saveTodoList(); - // Clear the input fields inputNameElement.value = ''; - inputDateElement.value = ''; - inputTimeElement.value = ''; + setDefaultDateTime(); - // Change the update button back to an add button - const addButton = document.querySelector('.js-add-button'); - addButton.innerHTML = 'Add'; + addButton.innerHTML = + 'Add Add'; addButton.onclick = addTodo; - // Update the displayed list updateTodoList(); + + // Animate the updated item + const updatedItem = document.querySelector( + `.todo-item[data-index="${index}"]` + ); + if (updatedItem) { + gsap.from(updatedItem, { + scale: 0.8, + duration: 0.5, + ease: 'elastic.out(1, 0.5)', + }); + } +} + +function updateTodoList() { + todoList.sort( + (a, b) => new Date(a.date + ' ' + a.time) - new Date(b.date + ' ' + b.time) + ); + + const todoListElement = document.querySelector('.js-todo-list'); + todoListElement.innerHTML = ''; + + todoList.forEach((todo, index) => { + const todoItem = document.createElement('div'); + todoItem.className = 'todo-item'; + todoItem.setAttribute('data-index', index); + todoItem.innerHTML = ` +
+
${todo.name}
+
${todo.date} ${todo.time}
+
+
+ + +
+ `; + + const editButton = todoItem.querySelector('.js-edit-button'); + const deleteButton = todoItem.querySelector('.js-delete-button'); + + editButton.addEventListener('click', () => editTodo(index)); + deleteButton.addEventListener('click', () => deleteTodo(index)); + + todoListElement.appendChild(todoItem); + }); } function setDefaultDateTime() { @@ -127,19 +160,25 @@ function setDefaultDateTime() { const inputTimeElement = document.querySelector('.js-time-input'); const now = new Date(); - const date = now.toISOString().split('T')[0]; // YYYY-MM-DD format - const time = now.toTimeString().split(' ')[0].slice(0, 5); // HH:MM format + const date = now.toISOString().split('T')[0]; + const time = now.toTimeString().split(' ')[0].slice(0, 5); inputDateElement.value = date; inputTimeElement.value = time; } -// Initialize the todo list and set default date and time on page load +function saveTodoList() { + localStorage.setItem('todoList', JSON.stringify(todoList)); +} + +function setupEventListeners() { + const addButton = document.querySelector('.js-add-button'); + addButton.addEventListener('click', addTodo); +} + document.addEventListener('DOMContentLoaded', () => { updateTodoList(); setDefaultDateTime(); - - // Set focus on the name input field - const inputNameElement = document.querySelector('.js-name-input'); - inputNameElement.focus(); + setupEventListeners(); + document.querySelector('.js-name-input').focus(); }); diff --git a/style.css b/style.css index 2dd0e47..2cf1353 100644 --- a/style.css +++ b/style.css @@ -3,132 +3,147 @@ body { margin: 0; padding: 0; display: flex; - justify-content: center; - align-items: center; - height: 100vh; + flex-direction: column; + min-height: 100vh; background: url('assets/background.png') no-repeat center center fixed; background-size: cover; } +.container { + flex-grow: 1; + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + max-width: 600px; + margin: 0 auto; +} + h1 { - text-align: center; color: #fff; - margin-bottom: 20px; text-shadow: 2px 2px 4px #000; -} - -.js-name-input, -.js-date-input, -.js-time-input { - font-size: 15px; - padding: 10px 15px; - border: 1px solid #ccc; - border-radius: 5px; - background-color: #fff; - color: #333; - outline: none; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; } .js-add-grid { display: grid; - grid-template-columns: 200px 140px 140px 100px; - column-gap: 10px; - row-gap: 10px; - align-content: center; + grid-template-columns: 1fr 1fr 1fr auto; + gap: 10px; background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 100%; - max-width: 600px; - margin: 0 auto; + margin-bottom: 20px; } -.js-add-button { - background-color: green; - color: white; - border: none; +.js-name-input, +.js-date-input, +.js-time-input { font-size: 15px; - font-weight: bold; - cursor: pointer; + padding: 10px; + border: 1px solid #ccc; border-radius: 5px; - padding: 10px 20px; - transition: background-color 0.3s ease; - display: flex; - align-items: center; - justify-content: center; -} - -.js-add-button:hover { - background-color: darkgreen; + background-color: #fff; + color: #333; } +.js-add-button, .js-delete-button, .js-edit-button { - border: none; font-size: 15px; font-weight: bold; cursor: pointer; + border: none; border-radius: 5px; - height: 45px; - padding: 0 15px; + padding: 10px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } -.js-delete-button { - background-color: red; +.js-add-button { + background-color: #4caf50; color: white; } -.js-delete-button:hover { - background-color: darkred; +.js-add-button:hover { + background-color: #45a049; +} + +.js-todo-list { + width: 100%; +} + +.todo-item { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fff; + padding: 15px; + margin-bottom: 10px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.todo-content { + flex-grow: 1; +} + +.todo-name { + font-weight: bold; + margin-bottom: 5px; +} + +.todo-datetime { + font-size: 0.9em; + color: #666; +} + +.todo-actions { + display: flex; + gap: 10px; } .js-edit-button { - background-color: skyblue; + background-color: #2196f3; color: white; } .js-edit-button:hover { - background-color: deepskyblue; + background-color: #0b7dda; } -.small-container { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - border: 1px solid #ccc; - height: 45px; - padding: 0 15px; - border-radius: 5px; - text-align: center; - background-color: #fff; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +.js-delete-button { + background-color: #f44336; + color: white; } -/* Icons */ -.js-add-button img, -.js-delete-button img, -.js-edit-button img { - margin-right: 5px; +.js-delete-button:hover { + background-color: #da190b; } footer { background-color: #fbd0a5; color: #2a2929; text-align: center; - padding: 20px 0; - position: fixed; - width: 100%; - bottom: 0; - font-size: 1rem; + padding: 10px 0; + font-size: 0.9rem; } -footer p { - margin: 0; +@media (max-width: 600px) { + .js-add-grid { + grid-template-columns: 1fr; + } + + .todo-item { + flex-direction: column; + align-items: flex-start; + } + + .todo-actions { + margin-top: 10px; + align-self: flex-end; + } }