Add filters and projects with minor design changes

dist/index.html

@@ -21,11 +21,11 @@
  <i class="gg-inbox"></i>
  <p>Inbox</p>
  </div>
- <div class="js-sidebar__today">
+ <div class="js-sidebar__today filter">
  <i class="gg-calendar-today"></i>
  <p>Today</p>
  </div>
- <div class="js-sidebar__seven-days">
+ <div class="js-sidebar__seven-days filter">
  <i class="gg-calendar-dates"></i>
  <p>Next 7 Days</p>
  </div>
@@ -46,6 +46,7 @@
  <button class="js-new-task-button" id="task-button">+</button>
  <dialog class="task-modal">
  <form action="" class="modal-form">
+ <div class="modal-project-name">Project</div>
  <input type="text" class="task-title" placeholder="Task title">
  <textarea class="task-description" placeholder="Task description"></textarea>
  <div class="task-date-container">

src/create-task.js

@@ -14,6 +14,7 @@ export function selectAllTasksItems() {
  const editTaskBtn = document.querySelectorAll('.js-edit-task-button');
  const taskText = document.querySelectorAll('.js-task-input');
  const taskForm = document.querySelectorAll('.js-task-form');
+ const projectName = document.querySelectorAll('js-task-project-name');
  return {
  taskContainer,
  taskInput,
@@ -22,6 +23,7 @@ export function selectAllTasksItems() {
  editTaskBtn,
  taskText,
  taskForm,
+ projectName,
  };
 }
 
@@ -33,9 +35,10 @@ export function checkEmptyTasks() {
  return false;
 }
 
-function createTaskId(taskContainer) {
+function createTaskId(project, taskContainer) {
  if (getTaskHistory()) taskContainer.setAttribute('id', `${getTaskHistory().length}`);
  else taskContainer.setAttribute('id', '0');
+ taskContainer.setAttribute('data-project', project);
 }
 
 export function changeTaskStatus(taskStatus, id) {
@@ -65,6 +68,7 @@ export function renderTask() {
  const displayPriority = document.createElement('span');
  const editTaskBtn = document.createElement('button');
  const deleteTaskBtn = document.createElement('button');
+ const projectName = document.createElement('div');
  taskSection.appendChild(taskContainer);
  taskContainer.classList.add('js-task-container');
  taskContainer.append(displayPriority, taskForm, displayDueDate, editTaskBtn, deleteTaskBtn);
@@ -78,6 +82,7 @@ export function renderTask() {
  taskInput.type = 'text';
  displayDueDate.classList.add('display-task-due-date');
  displayPriority.classList.add('display-task-priority');
+ projectName.classList.add('js-task-project-name');
  taskInput.before(taskCheckBox);
  return {
  taskContainer,
@@ -87,10 +92,10 @@ export function renderTask() {
  editTaskBtn,
  deleteTaskBtn,
  taskForm,
+ projectName,
  };
 }
 
-/* save new tasks to each project separately */
 export function createTask(project) {
  const {
  taskContainer,
@@ -101,15 +106,16 @@ export function createTask(project) {
  deleteTaskBtn,
  taskForm,
  } = renderTask();
- createTaskId(taskContainer);
+ const taskHistory = getTaskHistory(project);
+ createTaskId(project, taskContainer);
  function taskEventHandler(e) {
  e.preventDefault();
  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'] : '';
+ const dueDate = taskHistory[taskContainer.id] ? taskHistory[taskContainer.id]['task-due-date'] : '';
+ const priority = taskHistory[taskContainer.id] ? taskHistory[taskContainer.id]['task-priority'] : '';
  saveTasksLocalStorage({
- project,
+ projectName: project,
  taskId: taskContainer.id,
  taskTitle: taskInput.value,
  taskDescription: '',
@@ -122,11 +128,15 @@ export function createTask(project) {
  }
  taskContainer.addEventListener('submit', (e) => taskEventHandler(e));
  taskForm.addEventListener('focusout', (e) => taskEventHandler(e));
- editTaskBtn.addEventListener('click', () => showModal(taskContainer.id));
- displayDueDate.addEventListener('click', () => showModal(taskContainer.id));
+ editTaskBtn.addEventListener('click', () => {
+ showModal(project, taskContainer.id);
+ });
+ displayDueDate.addEventListener('click', () => {
+ showModal(project, taskContainer.id);
+ });
  deleteTaskBtn.addEventListener('click', () => {
- removeTasksLocalStorage(taskContainer.id, taskContainer);
- updateTaskId();
+ removeTasksLocalStorage(project, taskContainer.id, taskContainer);
+ updateTaskId(project);
  });
  taskCheckBox.addEventListener('change', (e) => {
  taskEventHandler(e);

src/display-module.js

@@ -1,8 +1,5 @@
 import { createTask, changeTaskStatus, selectAllTasksItems } from './create-task';
-import { editTaskModal, displayTaskPriority } from './taskModal';
-import { updateTaskId } from './storage';
-
-const projectHeader = document.querySelector('.project-header');
+import { displayTaskPriority } from './taskModal';
 
 export function displayInbox(project) {
  const taskSection = document.querySelector('.js-task-section');
@@ -19,15 +16,12 @@ export function displayInbox(project) {
  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']}`);
+ 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();
  }
 }
 
@@ -41,12 +35,10 @@ export function getTodayTasks() {
  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);
@@ -62,12 +54,5 @@ export function getNextWeekTasks() {
  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
-}

src/index.js

@@ -29,7 +29,7 @@ weeklyFilter.addEventListener('click', () => {
 });
 
 newTaskBtn.addEventListener('click', () => {
- if (!checkEmptyTasks()) createTask();
+ if (!checkEmptyTasks()) createTask(projectHeader.textContent);
 });
 newProjectBtn.addEventListener('click', () => {
  if (!checkEmptyProjectNames()) {

src/projects.js

@@ -78,7 +78,7 @@ export function createProject(project) {
  newTaskBtn.style.display = 'block';
  projectNames.push(projectName.value);
  setProjectNames(projectNames);
- setProject(getTaskHistory(projectName.value), projectName.value);
+ setProject(projectName.value, getTaskHistory(projectName.value));
  displayInbox(getTaskHistory(projectName.value));
  projectInputForm.blur();
  }

src/storage.js

@@ -9,15 +9,15 @@ export const setWeeklyTasks = (tasks) => localStorage.setItem('Weekly', JSON.str
 
 export function
 saveTasksLocalStorage({
- projectName = projectHeader.textContent,
+ projectName = '',
  taskId = '',
  taskTitle = '',
  taskDescription = '',
  taskDueDate = '',
  taskPriority = '',
  taskFinished = false,
 }) {
- const taskHistory = getTaskHistory();
+ const taskHistory = getTaskHistory(projectName);
  if (taskId) {
  taskHistory.splice(taskId, 1, {
  project: projectName,
@@ -43,22 +43,21 @@ saveTasksLocalStorage({
  sortLocalStorage();
 }
 
-export function removeTasksLocalStorage(taskId, element, projectName = projectHeader.textContent) {
- const taskHistory = getTaskHistory();
+export function removeTasksLocalStorage(projectName, taskId, element) {
+ const taskHistory = getTaskHistory(projectName);
  if (taskId) {
  taskHistory.splice(taskId, 1);
  setProject(projectName, taskHistory);
  }
  element.remove();
 }
 
-export function updateTaskId() {
- // I have three taskHistory variables in separate functions to refresh the array with new data
- const taskHistory = getTaskHistory();
+export function updateTaskId(project) {
+ const taskHistory = getTaskHistory(project);
  const tasks = document.querySelectorAll('.js-task-container');
  for (let i = 0; i < tasks.length; i += 1) {
+ if (taskHistory) taskHistory[i]['task-id'] = `${i}`;
  tasks[i].setAttribute('id', `${i}`);
- taskHistory[i]['task-id'] = `${i}`;
  }
  setProject(undefined, taskHistory);
 }

src/style.css

@@ -5,7 +5,6 @@
 * {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
- /* background-color: #181A1B; */
  }
 
  :root{
@@ -39,7 +38,6 @@ body {
  align-items: center;
  color: var(--nav-text-color);
  margin: 0 24px;
- /* height: 100%; */
  grid-area: nav;
 }
 
@@ -61,7 +59,6 @@ body {
 #sidebar{
  display: flex;
  flex-direction: column;
- /* border-radius: 15px; */
  gap: 5px;
  grid-area: side-bar;
  background-color: var(--sidebar-bg-color);
@@ -100,7 +97,6 @@ body {
 .js-sidebar__projects input {
  border: none;
 }
-/* , .js-project-name:hover, .js-project-name:hover::placeholder */
 
 .js-project-form:hover, .js-new-project:hover{
  background-color: #4070f4;
@@ -213,7 +209,6 @@ body {
  color: var(--content-text-color);
  gap: 10px;
  padding: 10px 10px;
- /* background-color: inherit; */
  border: solid rgb(71, 71, 71, 0.5) 1px;
 }
 
@@ -240,7 +235,6 @@ body {
 }
 .js-task-input:focus{
  outline:none;
- /* background-color: #282B2D; */
 }
 
 .display-task-due-date {
@@ -262,7 +256,7 @@ body {
  background-color: transparent;
  background-image: url(./images/edit-solid-24.png);
  filter: invert(50%);
- /* background-repeat: no-repeat; */
+ background-repeat: no-repeat;
 }
 
 .js-delete-task-button {

src/taskModal.js

@@ -1,11 +1,11 @@
 import { saveTasksLocalStorage, getTaskHistory } from './storage';
 
 const taskModal = document.querySelector('.task-modal');
+const projectName = document.querySelector('.modal-project-name');
 const taskTitle = document.querySelector('.task-title');
 const taskDescription = document.querySelector('.task-description');
 const taskDueDate = document.querySelector('#task-date');
 const closeModal = document.querySelector('.modal-close');
-const saveModalBtn = document.querySelector('.task-submit');
 const taskPriorityLow = document.getElementById('priority-low');
 const taskPriorityMedium = document.getElementById('priority-medium');
 const taskPriorityHigh = document.getElementById('priority-high');
@@ -30,18 +30,24 @@ export function displayTaskPriority(priority, id) {
  if (priority === 'high') taskContainer[id].style.borderLeft = 'solid red 4px';
 }
 
-export function updateTask(id) {
+export function updateTask(project, id) {
  const displayTaskDate = document.querySelectorAll('.display-task-due-date');
  const taskText = document.querySelectorAll('.js-task-input');
- taskText[id].value = taskTitle.value;
- displayTaskDate[id].textContent = taskDueDate.value;
- displayTaskPriority(getTaskPriority(), id);
+ const container = document.querySelectorAll('.js-task-container');
+ for (let i = 0; i < container.length; i += 1) {
+ if (container[i].id === id && container[i].dataset.project === project) {
+ taskText[i].value = getTaskHistory(project)[id]['task-title'];
+ displayTaskDate[i].textContent = getTaskHistory(project)[id]['task-due-date'];
+ displayTaskPriority(getTaskPriority(project), i);
+ return;
+ }
+ }
 }
 
-export function editTaskModal(project) {
- saveModalBtn.addEventListener('click', (e) => {
- const taskCheckBox = document.querySelectorAll('.js-task-checkbox');
+function createEventListenersForModal(project) {
+ taskModal.addEventListener('submit', (e) => {
  e.preventDefault();
+ const taskCheckBox = document.querySelectorAll('.js-task-checkbox');
  saveTasksLocalStorage({
  projectName: project,
  taskId: taskModal.id,
@@ -51,26 +57,28 @@ export function editTaskModal(project) {
  taskPriority: getTaskPriority(),
  taskFinished: taskCheckBox[taskModal.id].checked,
  });
+ updateTask(project, taskModal.id);
  taskModal.close();
- updateTask(taskModal.id);
- });
+ }, { once: true });
  closeModal.addEventListener('click', () => taskModal.close());
 }
 
-export function showModal(id) {
+export function showModal(project, id) {
+ const taskHistory = getTaskHistory(project);
  taskModal.showModal();
  taskModal.setAttribute('id', `${id}`);
- if (getTaskHistory()[id]) {
- taskTitle.value = getTaskHistory()[id]['task-title'];
- taskDescription.value = getTaskHistory()[id]['task-description'];
- taskDueDate.value = getTaskHistory()[id]['task-due-date'];
- if (taskPriorityLow.value === getTaskHistory()[id]['task-priority']) {
+ if (getTaskHistory(project)[id]) {
+ projectName.textContent = project;
+ taskTitle.value = taskHistory[id]['task-title'];
+ taskDescription.value = taskHistory[id]['task-description'];
+ taskDueDate.value = taskHistory[id]['task-due-date'];
+ if (taskPriorityLow.value === taskHistory[id]['task-priority']) {
  taskPriorityLow.checked = true;
  } else taskPriorityLow.checked = false;
- if (taskPriorityMedium.value === getTaskHistory()[id]['task-priority']) {
+ if (taskPriorityMedium.value === taskHistory[id]['task-priority']) {
  taskPriorityMedium.checked = true;
  } else taskPriorityMedium.checked = false;
- if (taskPriorityHigh.value === getTaskHistory()[id]['task-priority']) {
+ if (taskPriorityHigh.value === taskHistory[id]['task-priority']) {
  taskPriorityHigh.checked = true;
  } else taskPriorityHigh.checked = false;
  } else {
@@ -81,4 +89,5 @@ export function showModal(id) {
  taskPriorityMedium.checked = false;
  taskPriorityHigh.checked = false;
  }
+ createEventListenersForModal(project);
 }