Skip to content

Commit

Permalink
Added Task Categorization and Priority Tagging
Browse files Browse the repository at this point in the history
  • Loading branch information
@SSShogunn
SSShogunn committed Oct 12, 2024
1 parent 4b68c94 commit afa9c17
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 48 deletions.
20 changes: 20 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,30 @@ <h1>Todo-List</h1>
/>
<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" onclick="addTodo();">
<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">
<button class="sort-button" onclick="sortTodos('category')">Sort by Category</button>
<button class="sort-button" onclick="sortTodos('priority')">Sort by Priority</button>
</div>

<div class="js-add-html js-add-grid"></div>
</div>
<footer>
Expand Down
91 changes: 72 additions & 19 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,37 @@ let todoList = JSON.parse(localStorage.getItem('todoList')) || [];
let todoListhtml = '';
console.log(todoList);

let currentSortMethod = 'date'; // Default sort method
let currentSortOrder = 'asc'; // Default sort order for priority
let currentCategorySortOrder = 'asc'; // Default sort order for category

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');
const inputCategoryElement = document.querySelector('.js-category-input');
const inputPriorityElement = document.querySelector('.js-priority-input');

let name = inputNameElement.value;
let date = inputDateElement.value;
let time = inputTimeElement.value;
let category = inputCategoryElement.value;
let priority = inputPriorityElement.value;

// Validation checks
if (!name || !date || !time) {
alert('Please fill in all fields: task, date, and time.');
if (!name || !date || !time || !category || !priority) {
alert('Please fill in all fields: task, date, time, category, and priority.');
return;
}

todoList.push({ name, date, time });
todoList.push({ name, date, time, category, priority });
localStorage.setItem('todoList', JSON.stringify(todoList));

inputNameElement.value = '';
inputDateElement.value = '';
inputTimeElement.value = '';
inputCategoryElement.value = '';
inputPriorityElement.value = '';
setDefaultDateTime();

// Update the displayed list
Expand All @@ -39,11 +50,15 @@ function editTodo(index) {
let inputNameElement = document.querySelector('.js-name-input');
let inputDateElement = document.querySelector('.js-date-input');
let inputTimeElement = document.querySelector('.js-time-input');
let inputCategoryElement = document.querySelector('.js-category-input');
let inputPriorityElement = document.querySelector('.js-priority-input');

// Fill the input fields with the current values
inputNameElement.value = todoList[index].name;
inputDateElement.value = todoList[index].date;
inputTimeElement.value = todoList[index].time;
inputCategoryElement.value = todoList[index].category;
inputPriorityElement.value = todoList[index].priority;

// Change the add button to an update button
const addButton = document.querySelector('.js-add-button');
Expand All @@ -56,25 +71,45 @@ function editTodo(index) {
}

function updateTodoList() {
// Sort todoList by date and time before rendering
// Sort todoList based on the current sort method
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
if (currentSortMethod === 'date') {
const dateA = new Date(a.date + ' ' + a.time);
const dateB = new Date(b.date + ' ' + b.time);
return dateA - dateB;
} else if (currentSortMethod === 'category') {
return currentCategorySortOrder === 'asc'
? a.category.localeCompare(b.category)
: b.category.localeCompare(a.category);
} else if (currentSortMethod === 'priority') {
const priorityOrder = { high: 0, medium: 1, low: 2 };
return currentSortOrder === 'asc'
? priorityOrder[a.priority] - priorityOrder[b.priority]
: priorityOrder[b.priority] - priorityOrder[a.priority];
}
});

const addElement = document.querySelector('.js-add-html');
todoListhtml = '';

for (let i = 0; i < todoList.length; i++) {
todoListhtml += `<div class="small-container">${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>`;
const todo = todoList[i];
todoListhtml += `
<div class="small-container">
<div class="task-info">
<span class="task-name">${todo.name}</span>
<span class="category-tag">${todo.category}</span>
<span class="priority-tag priority-${todo.priority}">${todo.priority}</span>
</div>
</div>
<div class="small-container">${todo.date}</div>
<div class="small-container">${todo.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;
}
Expand All @@ -83,21 +118,27 @@ 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 inputCategoryElement = document.querySelector('.js-category-input');
const inputPriorityElement = document.querySelector('.js-priority-input');

// Validation checks
if (
!inputNameElement.value ||
!inputDateElement.value ||
!inputTimeElement.value
!inputTimeElement.value ||
!inputCategoryElement.value ||
!inputPriorityElement.value
) {
alert('Please fill in all fields: task, date, and time.');
alert('Please fill in all fields: task, date, time, category, and priority.');
return;
}

// Update the todo in the list
todoList[index].name = inputNameElement.value;
todoList[index].date = inputDateElement.value;
todoList[index].time = inputTimeElement.value;
todoList[index].category = inputCategoryElement.value;
todoList[index].priority = inputPriorityElement.value;

// Update local storage
localStorage.setItem('todoList', JSON.stringify(todoList));
Expand All @@ -106,6 +147,8 @@ function updateTodo(index) {
inputNameElement.value = '';
inputDateElement.value = '';
inputTimeElement.value = '';
inputCategoryElement.value = '';
inputPriorityElement.value = '';

// Change the update button back to an add button
const addButton = document.querySelector('.js-add-button');
Expand All @@ -128,6 +171,16 @@ function setDefaultDateTime() {
inputTimeElement.value = time;
}

function sortTodos(sortBy) {
if (sortBy === 'priority') {
currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc'; // Toggle sort order
} else if (sortBy === 'category') {
currentCategorySortOrder = currentCategorySortOrder === 'asc' ? 'desc' : 'asc'; // Toggle category sort order
}
currentSortMethod = sortBy;
updateTodoList();
}

// Initialize the todo list and set default date and time on page load
document.addEventListener('DOMContentLoaded', () => {
updateTodoList();
Expand Down
Loading

0 comments on commit afa9c17

Please sign in to comment.