Skip to content

Commit

Permalink
Add filters and change colors
Browse files Browse the repository at this point in the history
  • Loading branch information
mxzmr committed Jan 10, 2023
1 parent 6b31b4d commit def8582
Show file tree
Hide file tree
Showing 10 changed files with 400 additions and 268 deletions.
13 changes: 7 additions & 6 deletions dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,21 @@
<title>Document</title>
</head>
<body>
<nav>
<div class="logo">
<i class='bx bx-menu menu-icon'></i>
<span class="logo-name">TodoList</span>
</div>
<div id="sidebar">
<div class="sidebar_inbox-filters">
<div class="sidebar__inbox">
<div class="js-sidebar__inbox">
<i class="gg-inbox"></i>
<p>Inbox</p>
</div>
<div class="sidebar__today">
<div class="js-sidebar__today">
<i class="gg-calendar-today"></i>
<p>Today</p>
</div>
<div class="sidebar__seven-days">
<div class="js-sidebar__seven-days">
<i class="gg-calendar-dates"></i>
<p>Next 7 Days</p>
</div>
Expand All @@ -39,9 +38,11 @@
<button type="button" class="js-new-project">+ New Project</button>
</div>
</div>
</nav>
<div id="content">
<div class="project-name">Inbox</div>
<div class="project-header">Inbox</div>
<div class="js-task-section">

</div>
<button class="js-new-task-button" id="task-button">+</button>
<dialog class="task-modal">
<form action="" class="modal-form">
Expand Down
105 changes: 67 additions & 38 deletions src/create-task.js
Original file line number Diff line number Diff line change
@@ -1,59 +1,62 @@
/*
add task priority indicator or text to the task and refactor the code separate functions
from inside create task function
********************************
*/

import {
saveTasksLocalStorage,
removeTasksLocalStorage,
changeTaskIdAfterDelete,
updateTaskId,
getTaskHistory,
} from './storage';
import { showModal } from './taskModal';

export function selectTaskItem() {
export function selectAllTasksItems() {
const taskContainer = document.querySelectorAll('.js-task-container');
const taskInput = document.querySelectorAll('.js-task-input');
const taskCheckBox = document.querySelectorAll('.js-task-checkbox');
const displayDueDate = document.querySelectorAll('.display-task-due-date');
const editTaskBtn = document.querySelectorAll('.js-edit-task-button');
const displayTaskDate = document.querySelectorAll('.display-task-due-date');
const taskText = document.querySelectorAll('.js-task-input');
const taskForm = document.querySelectorAll('.js-task-form');
return {
taskContainer,
taskInput,
taskCheckBox,
displayDueDate,
editTaskBtn,
displayTaskDate,
taskText,
taskForm,
};
}

export function checkEmptyTasks() {
const taskInput = document.querySelectorAll('.js-task-input');
for (let i = 0; i < taskInput.length; i += 1) {
if (!taskInput[i].value) return true;
}
return false;
}

function createTaskId(taskContainer) {
if (getTaskHistory()) taskContainer.setAttribute('id', `${getTaskHistory().length}`);
else taskContainer.setAttribute('id', '0');
}

export function changeTaskStatus(taskStatus, id) {
// const taskContainer = document.querySelectorAll('.js-task-container');
// const taskInput = document.querySelectorAll('.js-task-input');
// const editTaskBtn = document.querySelectorAll('.js-edit-task-button');
const {
taskContainer,
taskInput,
editTaskBtn,
} = selectAllTasksItems();
if (taskStatus) {
selectTaskItem().taskContainer[id].style.opacity = '0.4';
selectTaskItem().taskInput[id].disabled = true;
selectTaskItem().editTaskBtn[id].disabled = true;
taskContainer[id].style.opacity = '0.4';
taskInput[id].disabled = true;
editTaskBtn[id].disabled = true;
} else {
selectTaskItem().taskContainer[id].style.opacity = '1';
selectTaskItem().taskInput[id].disabled = false;
selectTaskItem().editTaskBtn[id].disabled = false;
taskContainer[id].style.opacity = '1';
taskInput[id].disabled = false;
editTaskBtn[id].disabled = false;
}
}

export function createTask(task, taskDescription, date, taskPriority) {
const content = document.querySelector('#content');
const addTaskBtn = document.querySelector('.js-new-task-button');
export function renderTask() {
const taskSection = document.querySelector('.js-task-section');
const taskContainer = document.createElement('div');
const taskForm = document.createElement('form');
const taskInput = document.createElement('input');
Expand All @@ -62,8 +65,7 @@ export function createTask(task, taskDescription, date, taskPriority) {
const displayPriority = document.createElement('span');
const editTaskBtn = document.createElement('button');
const deleteTaskBtn = document.createElement('button');
content.appendChild(taskContainer);
taskContainer.after(addTaskBtn);
taskSection.appendChild(taskContainer);
taskContainer.classList.add('js-task-container');
taskContainer.append(displayPriority, taskForm, displayDueDate, editTaskBtn, deleteTaskBtn);
taskForm.classList.add('js-task-form');
Expand All @@ -77,30 +79,57 @@ export function createTask(task, taskDescription, date, taskPriority) {
displayDueDate.classList.add('display-task-due-date');
displayPriority.classList.add('display-task-priority');
taskInput.before(taskCheckBox);
taskInput.focus();
return {
taskContainer,
taskInput,
taskCheckBox,
displayDueDate,
editTaskBtn,
deleteTaskBtn,
taskForm,
};
}

/* save new tasks to each project separately */
export function createTask(project) {
const {
taskContainer,
taskInput,
taskCheckBox,
displayDueDate,
editTaskBtn,
deleteTaskBtn,
taskForm,
} = renderTask();
createTaskId(taskContainer);
function taskEventHandler(e) {
e.preventDefault();
saveTasksLocalStorage(
taskContainer.id,
taskInput.value,
taskDescription,
date,
taskPriority,
taskCheckBox.checked,
);
taskInput.blur();
if (taskInput.value) {
// If task-due-date and task-priority are undefined, assign an empty string to them.
const dueDate = getTaskHistory()[taskContainer.id] ? getTaskHistory()[taskContainer.id]['task-due-date'] : '';
const priority = getTaskHistory()[taskContainer.id] ? getTaskHistory()[taskContainer.id]['task-priority'] : '';
saveTasksLocalStorage({
project,
taskId: taskContainer.id,
taskTitle: taskInput.value,
taskDescription: '',
taskDueDate: dueDate,
taskPriority: priority,
taskFinished: taskCheckBox.checked,
});
taskInput.blur();
}
}
taskContainer.addEventListener('submit', (e) => taskEventHandler(e));
taskForm.addEventListener('focusout', (e) => taskEventHandler(e));
editTaskBtn.addEventListener('click', () => showModal(taskContainer.id));
displayDueDate.addEventListener('click', () => showModal(taskContainer.id));
deleteTaskBtn.addEventListener('click', () => {
removeTasksLocalStorage(taskContainer.id, taskContainer);
changeTaskIdAfterDelete();
updateTaskId();
});
taskCheckBox.addEventListener('change', () => {
taskEventHandler();
taskCheckBox.addEventListener('change', (e) => {
taskEventHandler(e);
changeTaskStatus(taskCheckBox.checked, taskContainer.id);
// console.log(e);
});
}
73 changes: 73 additions & 0 deletions src/display-module.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { createTask, changeTaskStatus, selectAllTasksItems } from './create-task';
import { editTaskModal, displayTaskPriority } from './taskModal';
import { updateTaskId } from './storage';

const projectHeader = document.querySelector('.project-header');

export function displayInbox(project) {
const taskSection = document.querySelector('.js-task-section');
taskSection.replaceChildren();
if (project) {
project.map((task, id) => {
createTask(task.project);
const {
taskContainer,
taskInput,
taskCheckBox,
displayDueDate,
} = selectAllTasksItems();
taskInput[id].value = task['task-title'];
displayDueDate[id].textContent = task['task-due-date'];
taskCheckBox[id].checked = task['task-finished'];
// taskContainer[id].setAttribute('id', `${task['task-id']}`);
taskInput[id].blur();
displayTaskPriority(task['task-priority'], id);
changeTaskStatus(task['task-finished'], id);
return undefined;
});
// Filters don't need to change task id
if (projectHeader.textContent !== 'Today' && projectHeader.textContent !== 'Next 7 Days') updateTaskId();
editTaskModal();
}
}

export function getTodayTasks() {
const todayDate = new Date().toISOString().slice(0, 10);
const todayTasks = [];
Object.entries(localStorage).map(([key, value]) => {
const tasks = JSON.parse(value);
return tasks.map((task) => {
if (todayDate === task['task-due-date']) return todayTasks.push(task);
return undefined;
});
});
// setTodayTasks(todayTasks);
return todayTasks;
}

export function getNextWeekTasks() {
// const getWeeklyTasks = localStorage.getItem('Weekly');
const todayDate = new Date();
const todayDateFormatted = new Date().toISOString().slice(0, 10);
const nextWeek = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() + 7);
const nextWeekFormatted = nextWeek.toISOString().slice(0, 10);
const nextWeekTasks = [];
Object.entries(localStorage).map(([key, value]) => {
const tasks = JSON.parse(value);
return tasks.map((task) => {
if (
task['task-due-date'] > todayDateFormatted
&& task['task-due-date'] <= nextWeekFormatted
) return nextWeekTasks.push(task);
return undefined;
});
});
// console.log(getWeeklyTasks);
// if (!selectAllTasksItems().taskInput.value) setWeeklyTasks(nextWeekTasks);
return nextWeekTasks;
}

function findTaskInStorage() {
// find this specific task in the local storage by using the project name and task id
// then splice the old task with the new task
}
1 change: 1 addition & 0 deletions src/images/bx-trash.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/images/bx-trash.svg:Zone.Identifier
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[ZoneTransfer]
ZoneId=3
ReferrerUrl=https://boxicons.com/?query=tras
HostUrl=https://boxicons.com/static/svg/regular/bx-trash.svg
80 changes: 33 additions & 47 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,55 +1,41 @@
import { compareAsc, format } from 'date-fns';
// import { compareAsc, format } from 'date-fns';
import './style.css';
import { createTask, changeTaskStatus, selectTaskItem } from './create-task';
import { editTask, displayTaskPriority } from './taskModal';
import { createTask, checkEmptyTasks } from './create-task';
import { displayInbox, getNextWeekTasks, getTodayTasks } from './display-module';
import { getTaskHistory } from './storage';
import { createProject, checkEmptyProjectNames } from './projects';
import { createProject, checkEmptyProjectNames, displayProjects } from './projects';

const projectHeader = document.querySelector('.project-header');
const newTaskBtn = document.querySelector('.js-new-task-button');
const newProjectBtb = document.querySelector('.js-new-project');
const inbox = document.querySelector('.sidebar__inbox');
const today = document.querySelector('.sidebar__today');
const nextWeekTasks = document.querySelector('.sidebar__seven-days');
const newProjectBtn = document.querySelector('.js-new-project');
const inbox = document.querySelector('.js-sidebar__inbox');
const todayFilter = document.querySelector('.js-sidebar__today');
const weeklyFilter = document.querySelector('.js-sidebar__seven-days');

function getTodayTasks() {
const todayDate = new Date().toISOString().slice(0, 10);
const todayTasks = [];
// console.log(getTaskHistory('inbox')[0]['task-due-date']);
for (let i = 0; i < getTaskHistory().length; i += 1) {
if (todayDate === getTaskHistory('inbox')[i]['task-due-date']) todayTasks.push(getTaskHistory('inbox')[i]);
}
console.log(todayTasks);
}
inbox.addEventListener('click', () => {
projectHeader.textContent = 'Inbox';
newTaskBtn.style.display = 'block';
displayInbox(getTaskHistory('Inbox'));
});
todayFilter.addEventListener('click', () => {
displayInbox(getTodayTasks());
projectHeader.textContent = 'Today';
newTaskBtn.style.display = 'none';
});
weeklyFilter.addEventListener('click', () => {
displayInbox(getNextWeekTasks());
projectHeader.textContent = 'Next 7 Days';
newTaskBtn.style.display = 'none';
});

function displayInbox(taskHistory) {
if (taskHistory) {
// eslint-disable-next-line array-callback-return
taskHistory.map((task, id) => {
createTask(task['task-title'], task['task-description'], task['task-due-date'], task['task-priority'], task['task-finished']);
selectTaskItem().taskInput[id].value = task['task-title'];
selectTaskItem().displayDueDate[id].textContent = task['task-due-date'];
selectTaskItem().taskCheckBox[id].checked = task['task-finished'];
selectTaskItem().taskContainer[id].setAttribute('id', `${id}`);
selectTaskItem().taskInput[id].blur();
displayTaskPriority(task['task-priority'], id);
changeTaskStatus(task['task-finished'], id);
});
editTask();
}
}displayInbox(getTaskHistory());
// inbox.addEventListener('click', displayTasks);
// nextWeekTasks.addEventListener('click', displayTasks);
today.addEventListener('click', () => {
const todayDate = new Date().toISOString().slice(0, 10);
const displayTodayTasks = [];
// console.log(getTaskHistory('inbox')[0]['task-due-date']);
for (let i = 0; i < getTaskHistory().length; i += 1) {
if (todayDate === getTaskHistory('inbox')[i]['task-due-date']) displayTodayTasks.push(getTaskHistory('inbox')[i]);
}
console.log(displayTodayTasks);
newTaskBtn.addEventListener('click', () => {
if (!checkEmptyTasks()) createTask();
});
newTaskBtn.addEventListener('click', createTask);
newProjectBtb.addEventListener('click', () => {
createProject();
checkEmptyProjectNames();
newProjectBtn.addEventListener('click', () => {
if (!checkEmptyProjectNames()) {
createProject();
}
});

displayInbox(getTaskHistory('Inbox'));
displayProjects();
Loading

0 comments on commit def8582

Please sign in to comment.