Skip to content

Commit

Permalink
add fix lint
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nikuunj
Nikuunj committed Oct 12, 2024
1 parent 04be7ad commit 58cfc70
Show file tree
Hide file tree
Showing 6 changed files with 230 additions and 172 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ Let's make this project even better together! 🎉

<div align="center">

<a href="https://github.com/Groverio/To-Do-List">
<img src="https://contrib.rocks/image?repo=Groverio/To-Do-List&&max=1000" />
<a href="https://github.com/Anshgrover23/To-Do-List">
<img src="https://contrib.rocks/image?repo=Anshgrover23/To-Do-List&&max=1000" />
</a>
</div>

Expand Down
16 changes: 5 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todo-List</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
</head>
<body>
<div class="container">
<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" />
<button class="js-add-button" onclick="addTodo();">
<button class="js-add-button">
<img src="assets/add-icon.png" alt="Add" width="16" height="16" /> Add
</button>
</div>
<div class="js-add-html js-add-grid"></div>
<div class="js-todo-list"></div>
</div>
<footer>
<p>&copy; 2024 Made with &#10084; by Ansh Grover. All rights reserved.</p>
<p>© 2024 Made with ❤ by Ansh Grover. All rights reserved.</p>
</footer>

<script src="script.js"></script>
</body>
</html>
9 changes: 9 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,6 @@
"eslint": "^9.12.0",
"globals": "^15.11.0",
"prettier": "^3.3.3"
}
},
"dependencies": {}
}
211 changes: 125 additions & 86 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,184 @@
/* 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 += `
<div class="todo-item small-container" data-index="${i}">${todoList[i].name}</div>
<div class="small-container">${todoList[i].date} ${todoList[i].time}</div>
<button class="js-delete-button" onclick="deleteTodo(${i});">
<img src="assets/delete-icon.png" alt="Delete" width="16" height="16">delete
</button>
<button class="js-edit-button" onclick="editTodo(${i});">
<img src="assets/edit-icon.png" alt="Edit" width="16" height="16">edit
</button>`;
}

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 =
'<img src="assets/edit-icon.png" alt="Update" width="16" height="16"> 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 =
'<img src="assets/add-icon.png" alt="Add" width="16" height="16"> 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 = `
<div class="todo-content">
<div class="todo-name">${todo.name}</div>
<div class="todo-datetime">${todo.date} ${todo.time}</div>
</div>
<div class="todo-actions">
<button class="js-edit-button">
<img src="assets/edit-icon.png" alt="Edit" width="16" height="16"> Edit
</button>
<button class="js-delete-button">
<img src="assets/delete-icon.png" alt="Delete" width="16" height="16"> Delete
</button>
</div>
`;

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() {
const inputDateElement = document.querySelector('.js-date-input');
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();
});
Loading

0 comments on commit 58cfc70

Please sign in to comment.