From b6ea1a42cd086e47aaa151ce9ae789dd97005ca3 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Mon, 22 Apr 2024 14:38:21 +0200 Subject: [PATCH 01/69] Imported the helper functions as well as the data from the taskFunction.js & initialData.js files --- index.js | 75 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 38 insertions(+), 37 deletions(-) diff --git a/index.js b/index.js index e54d2c6..5da6082 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,7 @@ // TASK: import helper functions from utils // TASK: import initialData - +import { getTasks, createNewTask, patchTask, putTask, deleteTask } from ".utils/taskFunction.js"; +import initialData from ".initialData.js"; /************************************************************************************************************************************************* * FIX BUGS!!! @@ -9,7 +10,7 @@ // Function checks if local storage already has data, if not it loads initialData to localStorage function initializeData() { if (!localStorage.getItem('tasks')) { - localStorage.setItem('tasks', JSON.stringify(initialData)); + localStorage.setItem('tasks', JSON.stringify(initialData)); localStorage.setItem('showSideBar', 'true') } else { console.log('Data already exists in localStorage'); @@ -31,7 +32,7 @@ function fetchAndDisplayBoardsAndTasks() { displayBoards(boards); if (boards.length > 0) { const localStorageBoard = JSON.parse(localStorage.getItem("activeBoard")) - activeBoard = localStorageBoard ? localStorageBoard ; boards[0]; + activeBoard = localStorageBoard ? localStorageBoard ; boards[0]; elements.headerBoardName.textContent = activeBoard styleActiveBoard(activeBoard) refreshTasksUI(); @@ -47,7 +48,7 @@ function displayBoards(boards) { const boardElement = document.createElement("button"); boardElement.textContent = board; boardElement.classList.add("board-btn"); - boardElement.click() { + boardElement.click() { elements.headerBoardName.textContent = board; filterAndDisplayTasksByBoard(board); activeBoard = board //assigns active board @@ -78,20 +79,20 @@ function filterAndDisplayTasksByBoard(boardName) { const tasksContainer = document.createElement("div"); column.appendChild(tasksContainer); - filteredTasks.filter(task => task.status = status).forEach(task => { + filteredTasks.filter(task => task.status = status).forEach(task => { const taskElement = document.createElement("div"); taskElement.classList.add("task-div"); taskElement.textContent = task.title; taskElement.setAttribute('data-task-id', task.id); // Listen for a click event on each task and open a modal - taskElement.click() => { + taskElement.click() => { openEditTaskModal(task); }); - tasksContainer.appendChild(taskElement); - }); + tasksContainer.appendChild(taskElement); }); +}); } @@ -102,20 +103,20 @@ function refreshTasksUI() { // Styles the active board by adding an active class // TASK: Fix Bugs function styleActiveBoard(boardName) { - document.querySelectorAll('.board-btn').foreach(btn => { - - if(btn.textContent === boardName) { - btn.add('active') + document.querySelectorAll('.board-btn').foreach(btn => { + + if (btn.textContent === boardName) { + btn.add('active') } else { - btn.remove('active'); + btn.remove('active'); } }); } function addTaskToUI(task) { - const column = document.querySelector('.column-div[data-status="${task.status}"]'); + const column = document.querySelector('.column-div[data-status="${task.status}"]'); if (!column) { console.error(`Column not found for status: ${task.status}`); return; @@ -133,8 +134,8 @@ function addTaskToUI(task) { taskElement.className = 'task-div'; taskElement.textContent = task.title; // Modify as needed taskElement.setAttribute('data-task-id', task.id); - - tasksContainer.appendChild(); + + tasksContainer.appendChild(); } @@ -171,7 +172,7 @@ function setupEventListeners() { }); // Add new task form submission event listener - elements.modalWindow.addEventListener('submit', (event) => { + elements.modalWindow.addEventListener('submit', (event) => { addTask(event) }); } @@ -179,7 +180,7 @@ function setupEventListeners() { // Toggles tasks modal // Task: Fix bugs function toggleModal(show, modal = elements.modalWindow) { - modal.style.display = show ? 'block' => 'none'; + modal.style.display = show ? 'block' => 'none'; } /************************************************************************************************************************************************* @@ -187,42 +188,42 @@ function toggleModal(show, modal = elements.modalWindow) { * **********************************************************************************************************************************************/ function addTask(event) { - event.preventDefault(); + event.preventDefault(); //Assign user input to the task object - const task = { - - }; - const newTask = createNewTask(task); - if (newTask) { - addTaskToUI(newTask); - toggleModal(false); - elements.filterDiv.style.display = 'none'; // Also hide the filter overlay - event.target.reset(); - refreshTasksUI(); - } + const task = { + + }; + const newTask = createNewTask(task); + if (newTask) { + addTaskToUI(newTask); + toggleModal(false); + elements.filterDiv.style.display = 'none'; // Also hide the filter overlay + event.target.reset(); + refreshTasksUI(); + } } function toggleSidebar(show) { - + } function toggleTheme() { - + } function openEditTaskModal(task) { // Set task details in modal inputs - + // Get button elements from the task modal // Call saveTaskChanges upon click of Save Changes button - + // Delete task using a helper function and close the task modal @@ -232,13 +233,13 @@ function openEditTaskModal(task) { function saveTaskChanges(taskId) { // Get new user inputs - + // Create an object with the updated task details // Update task using a hlper functoin - + // Close the modal and refresh the UI to reflect the changes @@ -247,7 +248,7 @@ function saveTaskChanges(taskId) { /*************************************************************************************************************************************************/ -document.addEventListener('DOMContentLoaded', function() { +document.addEventListener('DOMContentLoaded', function () { init(); // init is called after the DOM is fully loaded }); From e33ad59c4c9dddec605fcd8a6ad45333a9cbfc2b Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Mon, 22 Apr 2024 20:47:14 +0200 Subject: [PATCH 02/69] Fixed the ternary operator by replacing the semi-colon with a colon --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 5da6082..2f61846 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,7 @@ // TASK: import helper functions from utils // TASK: import initialData import { getTasks, createNewTask, patchTask, putTask, deleteTask } from ".utils/taskFunction.js"; -import initialData from ".initialData.js"; +import { initialData } from ".initialData.js"; /************************************************************************************************************************************************* * FIX BUGS!!! @@ -32,7 +32,7 @@ function fetchAndDisplayBoardsAndTasks() { displayBoards(boards); if (boards.length > 0) { const localStorageBoard = JSON.parse(localStorage.getItem("activeBoard")) - activeBoard = localStorageBoard ? localStorageBoard ; boards[0]; + activeBoard = localStorageBoard ? localStorageBoard : boards[0]; elements.headerBoardName.textContent = activeBoard styleActiveBoard(activeBoard) refreshTasksUI(); From f5409eb7be6c163068a663527f81d00946e96b4a Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 23 Apr 2024 13:53:31 +0200 Subject: [PATCH 03/69] Corrected the paths for my imports, added a comment, included a semi-colon to correct my HTML, and got the elements from the DOM --- index.html | 299 ++++++++++++++++++++++++++++++++--------------------- index.js | 15 ++- 2 files changed, 193 insertions(+), 121 deletions(-) diff --git a/index.html b/index.html index 816d6af..b1958b7 100644 --- a/index.html +++ b/index.html @@ -1,154 +1,217 @@ - - - - + + + - - + + Agile Board Task Management - + - +
- - -
-
- -
-
- -

TODO

-
- -
-
- -
-
- -

DOING

-
- -
-
- -
-
- -

DONE

-
- -
-
-
-
+ +
+
+ +
+
+ +

DONE

+
+ +
+
+ +
-
-
- - -
-
- -
-
- - -
-
- - - -
-
+
+
+ + +
+
+ +
+
+ + +
+
+ + + +
+
-
- - + diff --git a/index.js b/index.js index 2f61846..0fbca17 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,7 @@ // TASK: import helper functions from utils // TASK: import initialData -import { getTasks, createNewTask, patchTask, putTask, deleteTask } from ".utils/taskFunction.js"; -import { initialData } from ".initialData.js"; +import { getTasks, createNewTask, patchTask, putTask, deleteTask } from "./utils/taskFunction.js"; +import { initialData } from "./initialData.js"; /************************************************************************************************************************************************* * FIX BUGS!!! @@ -19,7 +19,15 @@ function initializeData() { // TASK: Get elements from the DOM const elements = { - + headerBoardName: document.getElementById('header-board-name'), + hideSideBarBtn: document.getElementById('hide-side-bar-btn'), + showSideBarBtn: document.getElementById('show-side-bar-btn'), + createNewTaskBtn: document.getElementById('create-task-btn'), + modalWindow: document.getElementById(''), + editTaskModal: document.getElementsByClassName(''), + toggleModal: document.getElementById(''), + filterDiv: document.getElementById('filterDiv'), + themeSwitch: document.getElementById(''), } let activeBoard = "" @@ -32,6 +40,7 @@ function fetchAndDisplayBoardsAndTasks() { displayBoards(boards); if (boards.length > 0) { const localStorageBoard = JSON.parse(localStorage.getItem("activeBoard")) + // Replaced the semi-colon with a colon activeBoard = localStorageBoard ? localStorageBoard : boards[0]; elements.headerBoardName.textContent = activeBoard styleActiveBoard(activeBoard) From 44f61393fbc04afeeca866b2cebc1804e15f8edd Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 23 Apr 2024 13:55:39 +0200 Subject: [PATCH 04/69] Used the equality operator '===' for comparison --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 0fbca17..9f2182b 100644 --- a/index.js +++ b/index.js @@ -73,7 +73,7 @@ function displayBoards(boards) { // TASK: Fix Bugs function filterAndDisplayTasksByBoard(boardName) { const tasks = getTasks(); // Fetch tasks from a simulated local storage function - const filteredTasks = tasks.filter(task => task.board = boardName); + const filteredTasks = tasks.filter(task => task.board === boardName); // Ensure the column titles are set outside of this function or correctly initialized before this function runs From 871938b50bf18a0ee341a6e2e18e4e0876da49b0 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 23 Apr 2024 13:59:04 +0200 Subject: [PATCH 05/69] Fixed the click event syntax by using an event listener --- index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 9f2182b..526306f 100644 --- a/index.js +++ b/index.js @@ -73,7 +73,7 @@ function displayBoards(boards) { // TASK: Fix Bugs function filterAndDisplayTasksByBoard(boardName) { const tasks = getTasks(); // Fetch tasks from a simulated local storage function - const filteredTasks = tasks.filter(task => task.board === boardName); + const filteredTasks = tasks.filter(task => task.board === boardName); // Used the equality operator '===' for comparison // Ensure the column titles are set outside of this function or correctly initialized before this function runs @@ -95,13 +95,13 @@ function filterAndDisplayTasksByBoard(boardName) { taskElement.setAttribute('data-task-id', task.id); // Listen for a click event on each task and open a modal - taskElement.click() => { + taskElement.addEventListener('click', () => { // Added an event listener openEditTaskModal(task); }); - tasksContainer.appendChild(taskElement); + tasksContainer.appendChild(taskElement); + }); }); -}); } From 010afc39318a381da2961bb4cff8f856f6b2ea24 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 23 Apr 2024 14:02:07 +0200 Subject: [PATCH 06/69] Fixed the forEach loop syntax by adding "classList' methods --- index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 526306f..93edb16 100644 --- a/index.js +++ b/index.js @@ -115,10 +115,12 @@ function styleActiveBoard(boardName) { document.querySelectorAll('.board-btn').foreach(btn => { if (btn.textContent === boardName) { - btn.add('active') + // Added the 'classList' method + btn.classList.add('active'); } else { - btn.remove('active'); + // Added the 'classList' method + btn.classList.remove('active'); } }); } From 21e57bd1d9aebf7328b86c838ec0e8383dcf8883 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 23 Apr 2024 14:04:02 +0200 Subject: [PATCH 07/69] Corrected ternary operator syntax --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 93edb16..b414565 100644 --- a/index.js +++ b/index.js @@ -191,7 +191,8 @@ function setupEventListeners() { // Toggles tasks modal // Task: Fix bugs function toggleModal(show, modal = elements.modalWindow) { - modal.style.display = show ? 'block' => 'none'; + // Corrected ternary operator syntax + modal.style.display = show ? 'block' : 'none'; } /************************************************************************************************************************************************* From 9b1b59c79cf78dd5d7af323e6c36f830494b02c5 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 23 Apr 2024 14:49:53 +0200 Subject: [PATCH 08/69] Fixed the click event syntax for the 'cancelEditBtn' element --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index b414565..ba8cf33 100644 --- a/index.js +++ b/index.js @@ -154,7 +154,7 @@ function addTaskToUI(task) { function setupEventListeners() { // Cancel editing task event listener const cancelEditBtn = document.getElementById('cancel-edit-btn'); - cancelEditBtn.click() => toggleModal(false, elements.editTaskModal)); + cancelEditBtn.addEventListener('click', () => toggleModal(false, elements.editTaskModal)); // Cancel adding new task event listener const cancelAddTaskBtn = document.getElementById('cancel-add-task-btn'); From 0230a6d05dda71b3292f850a68d02fabef5799b7 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 23 Apr 2024 14:51:10 +0200 Subject: [PATCH 09/69] Fixed the click event syntax for the 'hideSideBarBtn' element --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index ba8cf33..7f59f78 100644 --- a/index.js +++ b/index.js @@ -170,7 +170,7 @@ function setupEventListeners() { }); // Show sidebar event listener - elements.hideSideBarBtn.click() => toggleSidebar(false)); + elements.hideSideBarBtn.addEventListener('click', () => toggleSidebar(false)); elements.showSideBarBtn.click() => toggleSidebar(true)); // Theme switch event listener From 893e47fb6f791c9d01bf1977d781c880b37901c9 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 23 Apr 2024 14:52:29 +0200 Subject: [PATCH 10/69] Fixed the click event syntax for the 'showSideBarBtn' element --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 7f59f78..1abea6a 100644 --- a/index.js +++ b/index.js @@ -171,7 +171,7 @@ function setupEventListeners() { // Show sidebar event listener elements.hideSideBarBtn.addEventListener('click', () => toggleSidebar(false)); - elements.showSideBarBtn.click() => toggleSidebar(true)); + elements.showSideBarBtn.addEventListener('click', () => toggleSidebar(true)); // Theme switch event listener elements.themeSwitch.addEventListener('change', toggleTheme); From 04914f6114d7a96711ef09788dd8e8de3b090e75 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 09:26:06 +0200 Subject: [PATCH 11/69] Added to my elements object, specified the ID in line 54 by adding a # --- index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 1abea6a..f14c3ba 100644 --- a/index.js +++ b/index.js @@ -22,12 +22,13 @@ const elements = { headerBoardName: document.getElementById('header-board-name'), hideSideBarBtn: document.getElementById('hide-side-bar-btn'), showSideBarBtn: document.getElementById('show-side-bar-btn'), - createNewTaskBtn: document.getElementById('create-task-btn'), - modalWindow: document.getElementById(''), + createNewTaskBtn: document.getElementById('create-task-btn'), // add-modal-task-window + modalWindow: document.getElementById('new-task-modal-window'), editTaskModal: document.getElementsByClassName(''), toggleModal: document.getElementById(''), filterDiv: document.getElementById('filterDiv'), - themeSwitch: document.getElementById(''), + themeSwitch: document.getElementById('switch'), + columnDivs: document.getElementById('column-div'), } let activeBoard = "" @@ -51,7 +52,7 @@ function fetchAndDisplayBoardsAndTasks() { // Creates different boards in the DOM // TASK: Fix Bugs function displayBoards(boards) { - const boardsContainer = document.getElementById("boards-nav-links-div"); + const boardsContainer = document.getElementById("#boards-nav-links-div"); // added # boardsContainer.innerHTML = ''; // Clears the container boards.forEach(board => { const boardElement = document.createElement("button"); From 5714c36f81352da78908554e971a99965444fcdc Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 09:27:05 +0200 Subject: [PATCH 12/69] Added an event listener to fix the click event syntax --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index f14c3ba..f82a826 100644 --- a/index.js +++ b/index.js @@ -58,13 +58,13 @@ function displayBoards(boards) { const boardElement = document.createElement("button"); boardElement.textContent = board; boardElement.classList.add("board-btn"); - boardElement.click() { + boardElement.addEventListener('click', () => { elements.headerBoardName.textContent = board; filterAndDisplayTasksByBoard(board); activeBoard = board //assigns active board localStorage.setItem("activeBoard", JSON.stringify(activeBoard)) styleActiveBoard(activeBoard) - }; + }); // added eventlistener to fix click event boardsContainer.appendChild(boardElement); }); From 95f20174965659a5620d973a900bdd7fb385e5c7 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 09:28:31 +0200 Subject: [PATCH 13/69] Fixed the equality operator '===' for comparison --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index f82a826..4370d25 100644 --- a/index.js +++ b/index.js @@ -64,7 +64,7 @@ function displayBoards(boards) { activeBoard = board //assigns active board localStorage.setItem("activeBoard", JSON.stringify(activeBoard)) styleActiveBoard(activeBoard) - }); // added eventlistener to fix click event + }); // added eventlistener to fix click event boardsContainer.appendChild(boardElement); }); @@ -89,7 +89,7 @@ function filterAndDisplayTasksByBoard(boardName) { const tasksContainer = document.createElement("div"); column.appendChild(tasksContainer); - filteredTasks.filter(task => task.status = status).forEach(task => { + filteredTasks.filter(task => task.status === status).forEach(task => { const taskElement = document.createElement("div"); taskElement.classList.add("task-div"); taskElement.textContent = task.title; From f6f6c852e933b324e9d59e83a651c1881b0bad1f Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 09:39:37 +0200 Subject: [PATCH 14/69] Specified the elements for the navigation sidebar, and the primary layout --- index.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 4370d25..3434d48 100644 --- a/index.js +++ b/index.js @@ -19,15 +19,24 @@ function initializeData() { // TASK: Get elements from the DOM const elements = { + // Navigation Sidebar headerBoardName: document.getElementById('header-board-name'), + sideBar: document.querySelector('.side-bar'), + sideBarDiv: document.getElementById('side-bar-div'), hideSideBarBtn: document.getElementById('hide-side-bar-btn'), showSideBarBtn: document.getElementById('show-side-bar-btn'), - createNewTaskBtn: document.getElementById('create-task-btn'), // add-modal-task-window + sideLogoDiv: document.getElementById('logo'), + themeSwitch: document.getElementById('switch'), + boardsNavLinksDiv: document.getElementById('boards-nav-links-div'), + + // Primary layout (header, add task button) + header: document.getElementById('header'), + dropdownBtn: document.getElementById('dropdownBtn'), + createNewTaskBtn: document.getElementById('create-task-btn'), modalWindow: document.getElementById('new-task-modal-window'), editTaskModal: document.getElementsByClassName(''), toggleModal: document.getElementById(''), filterDiv: document.getElementById('filterDiv'), - themeSwitch: document.getElementById('switch'), columnDivs: document.getElementById('column-div'), } @@ -89,7 +98,7 @@ function filterAndDisplayTasksByBoard(boardName) { const tasksContainer = document.createElement("div"); column.appendChild(tasksContainer); - filteredTasks.filter(task => task.status === status).forEach(task => { + filteredTasks.filter(task => task.status === status).forEach(task => { // Used the equality operator '===' for comparison const taskElement = document.createElement("div"); taskElement.classList.add("task-div"); taskElement.textContent = task.title; From 4502b18ab74b6df29b80140e0e9e827ec073b34d Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 09:46:11 +0200 Subject: [PATCH 15/69] Completed the elements for the nav sidebar, header and add task button layout, and started on the elements for the task columns area --- index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.js b/index.js index 3434d48..040505a 100644 --- a/index.js +++ b/index.js @@ -31,7 +31,12 @@ const elements = { // Primary layout (header, add task button) header: document.getElementById('header'), + addNewTaskBtn: document.getElementById('add-new-task-btn'), + deleteBoardBtn: document.getElementById('delete-board-btn'), dropdownBtn: document.getElementById('dropdownBtn'), + editBoardBtn: document.getElementById('edit-board-btn'), + + // Primary layout (main area for task columns) createNewTaskBtn: document.getElementById('create-task-btn'), modalWindow: document.getElementById('new-task-modal-window'), editTaskModal: document.getElementsByClassName(''), From 197e32c4855e17ca049342534633a26a963c7cbe Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 09:47:05 +0200 Subject: [PATCH 16/69] Specified the filter div --- index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 040505a..ede465c 100644 --- a/index.js +++ b/index.js @@ -41,8 +41,11 @@ const elements = { modalWindow: document.getElementById('new-task-modal-window'), editTaskModal: document.getElementsByClassName(''), toggleModal: document.getElementById(''), - filterDiv: document.getElementById('filterDiv'), + columnDivs: document.getElementById('column-div'), + + // Filter div + filterDiv: document.getElementById('filterDiv'), } let activeBoard = "" From b59dbd533786832aff81bbc09e883ef3ccb7417f Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 09:50:15 +0200 Subject: [PATCH 17/69] Completed assigning the key:value pairs for the main area of the task columns --- index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index ede465c..32590e4 100644 --- a/index.js +++ b/index.js @@ -37,12 +37,15 @@ const elements = { editBoardBtn: document.getElementById('edit-board-btn'), // Primary layout (main area for task columns) + columnDivs: document.getElementById('column-div'), + tasksContainer: document.querySelector('.tasks-container'), + createNewTaskBtn: document.getElementById('create-task-btn'), modalWindow: document.getElementById('new-task-modal-window'), editTaskModal: document.getElementsByClassName(''), toggleModal: document.getElementById(''), - columnDivs: document.getElementById('column-div'), + // Filter div filterDiv: document.getElementById('filterDiv'), From 7d5708e3cc31cc3d336c1bc5fec795755e03f806 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 09:56:14 +0200 Subject: [PATCH 18/69] Completed the key:value pairs for the new task modal --- index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 32590e4..c6c2c69 100644 --- a/index.js +++ b/index.js @@ -40,13 +40,17 @@ const elements = { columnDivs: document.getElementById('column-div'), tasksContainer: document.querySelector('.tasks-container'), - createNewTaskBtn: document.getElementById('create-task-btn'), + // New task modal(form for adding a new task) modalWindow: document.getElementById('new-task-modal-window'), + descInput: document.getElementById('desc-input'), + titleInput: document.getElementById('title-input'), + selectStatus: document.getElementById('select-status'), + cancelAddTaskBtn: document.getElementById('cancel-add-task-btn'), + createNewTaskBtn: document.getElementById('add-new-task-btn'), + editTaskModal: document.getElementsByClassName(''), toggleModal: document.getElementById(''), - - // Filter div filterDiv: document.getElementById('filterDiv'), } From 7520f008498a06c874e03a9c80f26f9e6b8e4598 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 10:06:20 +0200 Subject: [PATCH 19/69] Completed the key:value pairs for the edit task modal --- index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index c6c2c69..ae5b569 100644 --- a/index.js +++ b/index.js @@ -48,8 +48,14 @@ const elements = { cancelAddTaskBtn: document.getElementById('cancel-add-task-btn'), createNewTaskBtn: document.getElementById('add-new-task-btn'), - editTaskModal: document.getElementsByClassName(''), - toggleModal: document.getElementById(''), + // Edit task modal(form for editing an existing task's details) + cancelEditBtn: document.getElementById('cancel-edit-btn'), + deleteTaskBtn: document.getElementById('delete-task-btn'), + editTaskDescInput: document.getElementById('edit-task-desc-input'), + editTaskTitleInput: document.getElementById('edit-task-title-input'), + editSelectStatus: document.getElementById('edit-select-status'), + editTaskForm: document.getElementById('edit-task-form'), + editTaskModal: document.querySelector('.edit-task-modal-window'), // Filter div filterDiv: document.getElementById('filterDiv'), From a44931120237dca9f2d09ffafaf013c6f24e77fd Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 10:11:05 +0200 Subject: [PATCH 20/69] Removed the # --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index ae5b569..87babe9 100644 --- a/index.js +++ b/index.js @@ -82,7 +82,7 @@ function fetchAndDisplayBoardsAndTasks() { // Creates different boards in the DOM // TASK: Fix Bugs function displayBoards(boards) { - const boardsContainer = document.getElementById("#boards-nav-links-div"); // added # + const boardsContainer = document.getElementById("boards-nav-links-div"); boardsContainer.innerHTML = ''; // Clears the container boards.forEach(board => { const boardElement = document.createElement("button"); From 21ea012be9566cb89885d7d2615cdfd45278274d Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 10:24:52 +0200 Subject: [PATCH 21/69] Included a variable with the titles for each column --- index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 87babe9..99b6e93 100644 --- a/index.js +++ b/index.js @@ -88,18 +88,25 @@ function displayBoards(boards) { const boardElement = document.createElement("button"); boardElement.textContent = board; boardElement.classList.add("board-btn"); - boardElement.addEventListener('click', () => { + boardElement.addEventListener('click', () => { // Added eventlistener to fix click event elements.headerBoardName.textContent = board; filterAndDisplayTasksByBoard(board); activeBoard = board //assigns active board localStorage.setItem("activeBoard", JSON.stringify(activeBoard)) styleActiveBoard(activeBoard) - }); // added eventlistener to fix click event + }); boardsContainer.appendChild(boardElement); }); } +const columnTitles = { + todo: 'TODO', + doing: 'DOING', + done: 'DONE', +} + + // Filters tasks corresponding to the board name and displays them on the DOM. // TASK: Fix Bugs function filterAndDisplayTasksByBoard(boardName) { From 9d081be1eb1e95658634f6217ae9d12316bc3d97 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 10:30:22 +0200 Subject: [PATCH 22/69] Included a variable that represents the status of a task --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 99b6e93..77aad2f 100644 --- a/index.js +++ b/index.js @@ -100,7 +100,7 @@ function displayBoards(boards) { } -const columnTitles = { +const columnTitles = { // Added a variable for the various column titles todo: 'TODO', doing: 'DOING', done: 'DONE', @@ -118,6 +118,7 @@ function filterAndDisplayTasksByBoard(boardName) { elements.columnDivs.forEach(column => { const status = column.getAttribute("data-status"); // Reset column content while preserving the column title + const columnTitle = columnTitles[status]; // This variable represents the status of a task column.innerHTML = `

${status.toUpperCase()}

From e67c8a51d457a5850ed75a6edd99b3418603dc87 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 10:36:01 +0200 Subject: [PATCH 23/69] Appended taskElement to tasksContainer, to ensure that the newly created task is visually added to the appropriate section of the UI, making it visible to the user --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 77aad2f..9deea49 100644 --- a/index.js +++ b/index.js @@ -185,7 +185,7 @@ function addTaskToUI(task) { taskElement.textContent = task.title; // Modify as needed taskElement.setAttribute('data-task-id', task.id); - tasksContainer.appendChild(); + tasksContainer.appendChild(taskElement); // Appended taskElement to tasksContainer, to ensure that the newly created task is visually added to the appropriate section of the UI, making it visible to the user } From 9ebc8b254e47b3a9775a6c6504ad2284980ad728 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 13:12:42 +0200 Subject: [PATCH 24/69] Corrected the import file, removed the call functions, changed from fetchingthe columnDivs by ID to a query selector, corrected the forEach method --- index.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 9deea49..18d7288 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,6 @@ // TASK: import helper functions from utils // TASK: import initialData -import { getTasks, createNewTask, patchTask, putTask, deleteTask } from "./utils/taskFunction.js"; +import { getTasks, createNewTask, patchTask, putTask, deleteTask } from "./utils/taskFunctions.js"; import { initialData } from "./initialData.js"; /************************************************************************************************************************************************* @@ -17,6 +17,8 @@ function initializeData() { } } +initializeData(); + // TASK: Get elements from the DOM const elements = { // Navigation Sidebar @@ -37,7 +39,7 @@ const elements = { editBoardBtn: document.getElementById('edit-board-btn'), // Primary layout (main area for task columns) - columnDivs: document.getElementById('column-div'), + columnDivs: document.querySelectorAll('.column-div'), // document.getElementsByClassName('column-div'), tasksContainer: document.querySelector('.tasks-container'), // New task modal(form for adding a new task) @@ -67,6 +69,7 @@ let activeBoard = "" // TASK: FIX BUGS function fetchAndDisplayBoardsAndTasks() { const tasks = getTasks(); + console.log(tasks) const boards = [...new Set(tasks.map(task => task.board).filter(Boolean))]; displayBoards(boards); if (boards.length > 0) { @@ -114,7 +117,6 @@ function filterAndDisplayTasksByBoard(boardName) { const filteredTasks = tasks.filter(task => task.board === boardName); // Used the equality operator '===' for comparison // Ensure the column titles are set outside of this function or correctly initialized before this function runs - elements.columnDivs.forEach(column => { const status = column.getAttribute("data-status"); // Reset column content while preserving the column title @@ -151,7 +153,7 @@ function refreshTasksUI() { // Styles the active board by adding an active class // TASK: Fix Bugs function styleActiveBoard(boardName) { - document.querySelectorAll('.board-btn').foreach(btn => { + document.querySelectorAll('.board-btn').forEach(btn => { if (btn.textContent === boardName) { // Added the 'classList' method @@ -189,7 +191,6 @@ function addTaskToUI(task) { } - function setupEventListeners() { // Cancel editing task event listener const cancelEditBtn = document.getElementById('cancel-edit-btn'); From f813216296eceb08f3a0810cda6bbd1196fbdc7a Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 13:29:17 +0200 Subject: [PATCH 25/69] Retrieved values from the browser's local storage --- index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.js b/index.js index 18d7288..943efb0 100644 --- a/index.js +++ b/index.js @@ -213,6 +213,9 @@ function setupEventListeners() { elements.hideSideBarBtn.addEventListener('click', () => toggleSidebar(false)); elements.showSideBarBtn.addEventListener('click', () => toggleSidebar(true)); + // Show the button + //elements.showSideBarBtn.style.display = 'block'; + // Theme switch event listener elements.themeSwitch.addEventListener('change', toggleTheme); @@ -243,6 +246,9 @@ function addTask(event) { event.preventDefault(); //Assign user input to the task object + const task_id = JSON.parse(localStorage.getItem('id')); // Retrieves value from browser's local storage + + const task = { }; From fc79a963235068897a5c7d471f1ba50c2ff4bc8a Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 13:30:52 +0200 Subject: [PATCH 26/69] Set the 'titleInput" variable to capture the value entered in an input field --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 943efb0..1ae83e6 100644 --- a/index.js +++ b/index.js @@ -247,7 +247,7 @@ function addTask(event) { //Assign user input to the task object const task_id = JSON.parse(localStorage.getItem('id')); // Retrieves value from browser's local storage - + const titleInput = elements.titleInput.value; // Captures the value entered in an input field, such as a task title. const task = { From 01a1475118fdb64ace04244228e4f4a3c3aeb040 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 13:32:29 +0200 Subject: [PATCH 27/69] Set the descInput variable to capture the value entered in a textarea field --- index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.js b/index.js index 1ae83e6..7407feb 100644 --- a/index.js +++ b/index.js @@ -248,6 +248,8 @@ function addTask(event) { //Assign user input to the task object const task_id = JSON.parse(localStorage.getItem('id')); // Retrieves value from browser's local storage const titleInput = elements.titleInput.value; // Captures the value entered in an input field, such as a task title. + const descInput = elements.descInput.value; // Captures the value entered in a textarea field, such as a task description. + const task = { From 4a385e2f7328c82f4b363f532587a4df47ba7a98 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 13:34:30 +0200 Subject: [PATCH 28/69] Set the 'selectStatus' variable to capture the selected value from a dropdown list, indicating the status or category of the task --- index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 7407feb..4d50735 100644 --- a/index.js +++ b/index.js @@ -247,9 +247,9 @@ function addTask(event) { //Assign user input to the task object const task_id = JSON.parse(localStorage.getItem('id')); // Retrieves value from browser's local storage - const titleInput = elements.titleInput.value; // Captures the value entered in an input field, such as a task title. - const descInput = elements.descInput.value; // Captures the value entered in a textarea field, such as a task description. - + const titleInput = elements.titleInput.value; // Captures value entered in an input field, such as a task title. + const descInput = elements.descInput.value; // Captures value entered in a textarea field, such as a task description. + const selectStatus = elements.selectStatus.value; // Captures selected value from a dropdown list, indicating the status or category of the task const task = { From 188a3ab156c33bd4bb86bec864ab688b73b6e2fd Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 13:42:13 +0200 Subject: [PATCH 29/69] Completed the functionality of the 'task' object --- index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 4d50735..2076125 100644 --- a/index.js +++ b/index.js @@ -251,8 +251,13 @@ function addTask(event) { const descInput = elements.descInput.value; // Captures value entered in a textarea field, such as a task description. const selectStatus = elements.selectStatus.value; // Captures selected value from a dropdown list, indicating the status or category of the task + // 'task' object to store info such as ID, title, etc. const task = { - + 'id': task_id, + 'title': titleInput, + 'description': descInput, + 'status': selectStatus, + 'board': activeBoard, }; const newTask = createNewTask(task); if (newTask) { From 016a975bc1cc14f9be24a4ed7484a3d9e656342b Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 13:58:27 +0200 Subject: [PATCH 30/69] Completed the 'toggleSideBar' function, allowing it to control the visibility of the sidebar --- index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 2076125..a90f5f5 100644 --- a/index.js +++ b/index.js @@ -270,8 +270,9 @@ function addTask(event) { } -function toggleSidebar(show) { - +function toggleSidebar(show) { // Controls the visibility of a sidebar in the user interface + elements.sideBar.style.display = show ? 'block' : 'none'; + elements.showSideBarBtn.style.display = show ? 'none' : 'block'; } function toggleTheme() { From 46870bd3925f52dd4db83f76fec194c063a591e0 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:14:19 +0200 Subject: [PATCH 31/69] Got the current theme from the local storage or set it to default --- index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index a90f5f5..6a7c03b 100644 --- a/index.js +++ b/index.js @@ -255,7 +255,7 @@ function addTask(event) { const task = { 'id': task_id, 'title': titleInput, - 'description': descInput, + 'desc': descInput, 'status': selectStatus, 'board': activeBoard, }; @@ -269,12 +269,19 @@ function addTask(event) { } } - function toggleSidebar(show) { // Controls the visibility of a sidebar in the user interface elements.sideBar.style.display = show ? 'block' : 'none'; elements.showSideBarBtn.style.display = show ? 'none' : 'block'; } +// Declared isLightTheme variable and assign it with boolean value true +// let isLightTheme; + +// Get current theme from local storage or set to default (light) +const currentMode = localStorage.getItem('mode') || 'light'; +let isLightTheme = currentMode === 'light'; + + function toggleTheme() { } From a0b3051a9ede0007d620404ed158cde0ab110451 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:15:31 +0200 Subject: [PATCH 32/69] Set the SVG source based on the current mode --- index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.js b/index.js index 6a7c03b..8ec03b2 100644 --- a/index.js +++ b/index.js @@ -269,6 +269,7 @@ function addTask(event) { } } + function toggleSidebar(show) { // Controls the visibility of a sidebar in the user interface elements.sideBar.style.display = show ? 'block' : 'none'; elements.showSideBarBtn.style.display = show ? 'none' : 'block'; @@ -281,6 +282,10 @@ function toggleSidebar(show) { // Controls the visibility of a sidebar in the u const currentMode = localStorage.getItem('mode') || 'light'; let isLightTheme = currentMode === 'light'; +// Set the initial SVG source based on the current mode +let sideLogoDivSrc = isLightTheme ? './assets/logo-dark.svg' : './assets/logo-light.svg'; +elements.sideLogoDiv.src = sideLogoDivSrc; + function toggleTheme() { From eb772850bd9446f75c1162c8c7ddbbf80d177ca7 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:17:05 +0200 Subject: [PATCH 33/69] Removed a comment --- index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/index.js b/index.js index 8ec03b2..f22f0ce 100644 --- a/index.js +++ b/index.js @@ -275,8 +275,6 @@ function toggleSidebar(show) { // Controls the visibility of a sidebar in the u elements.showSideBarBtn.style.display = show ? 'none' : 'block'; } -// Declared isLightTheme variable and assign it with boolean value true -// let isLightTheme; // Get current theme from local storage or set to default (light) const currentMode = localStorage.getItem('mode') || 'light'; From eb7f6b16f825f1fb3bc1e1bd60d7966009f4539e Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:21:35 +0200 Subject: [PATCH 34/69] Set a variable to toggle between different themes --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index f22f0ce..5ad8579 100644 --- a/index.js +++ b/index.js @@ -286,7 +286,8 @@ elements.sideLogoDiv.src = sideLogoDivSrc; function toggleTheme() { - + const isLightMode = document.body.classList.contains('light-mode'); + document.body.classList.toggle('light-theme'); } From 82b64734a0e66fab07bac3a6c23e7be122717613 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:22:07 +0200 Subject: [PATCH 35/69] Corrected the referencing --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 5ad8579..40af869 100644 --- a/index.js +++ b/index.js @@ -287,7 +287,7 @@ elements.sideLogoDiv.src = sideLogoDivSrc; function toggleTheme() { const isLightMode = document.body.classList.contains('light-mode'); - document.body.classList.toggle('light-theme'); + document.body.classList.toggle('light-mode'); } From 20465c0230d61567711c1d43448028832e9e9cca Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:25:19 +0200 Subject: [PATCH 36/69] Set the user's preferences in the local storage --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 40af869..37a76e0 100644 --- a/index.js +++ b/index.js @@ -288,10 +288,10 @@ elements.sideLogoDiv.src = sideLogoDivSrc; function toggleTheme() { const isLightMode = document.body.classList.contains('light-mode'); document.body.classList.toggle('light-mode'); + localStorage.setItem('light-theme', !isLightMode ? 'enabled' : 'disabled'); } - function openEditTaskModal(task) { // Set task details in modal inputs From 10b80597fbc3373d9023062b6dccba8fc5812b1b Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:32:37 +0200 Subject: [PATCH 37/69] Included a line that handles the toggling between modes --- index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.js b/index.js index 37a76e0..e53be76 100644 --- a/index.js +++ b/index.js @@ -289,9 +289,13 @@ function toggleTheme() { const isLightMode = document.body.classList.contains('light-mode'); document.body.classList.toggle('light-mode'); localStorage.setItem('light-theme', !isLightMode ? 'enabled' : 'disabled'); + + isLightTheme = !isLightTheme; // Handles switching of themes } + + function openEditTaskModal(task) { // Set task details in modal inputs From 161f56db33501b30603de71278848586ddf45926 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:33:22 +0200 Subject: [PATCH 38/69] Included a line that would update the logo based on the selected mode --- index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.js b/index.js index e53be76..fec4b50 100644 --- a/index.js +++ b/index.js @@ -291,6 +291,8 @@ function toggleTheme() { localStorage.setItem('light-theme', !isLightMode ? 'enabled' : 'disabled'); isLightTheme = !isLightTheme; // Handles switching of themes + sideLogoDivSrc = isLightTheme ? './assets/logo-dark.svg' : './assets/logo-light.svg'; // Updates logo displayed on UI based on selected theme + } From c5b91f4b8c7c8746170bf93997d5f797b9b81b5a Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:34:38 +0200 Subject: [PATCH 39/69] Ensured that the selected mode would be stored in localStorage --- index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.js b/index.js index fec4b50..2293be0 100644 --- a/index.js +++ b/index.js @@ -292,6 +292,8 @@ function toggleTheme() { isLightTheme = !isLightTheme; // Handles switching of themes sideLogoDivSrc = isLightTheme ? './assets/logo-dark.svg' : './assets/logo-light.svg'; // Updates logo displayed on UI based on selected theme + elements.sideLogoDiv.src = sideLogoDivSrc; + localStorage.setItem('mode', isLightTheme ? 'light' : 'dark'); // Store selected theme in localStorage } From 2940fe72ca32be5a2edd1e698f02ed6ed6bdfca4 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:35:54 +0200 Subject: [PATCH 40/69] Ensured that the corresponding SVG was stored in local storage --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 2293be0..e1c74c3 100644 --- a/index.js +++ b/index.js @@ -294,7 +294,7 @@ function toggleTheme() { sideLogoDivSrc = isLightTheme ? './assets/logo-dark.svg' : './assets/logo-light.svg'; // Updates logo displayed on UI based on selected theme elements.sideLogoDiv.src = sideLogoDivSrc; localStorage.setItem('mode', isLightTheme ? 'light' : 'dark'); // Store selected theme in localStorage - + localStorage.setItem('sideLogoDiv', sideLogoDivSrc); // Store selected SVG source in localStorage } From 5c6056f310fa4ee37b6301ed52cd54d76868e02b Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:45:47 +0200 Subject: [PATCH 41/69] Set the 'value' property to populate task's title in the input field for editing --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index e1c74c3..3549df1 100644 --- a/index.js +++ b/index.js @@ -298,10 +298,9 @@ function toggleTheme() { } - - function openEditTaskModal(task) { // Set task details in modal inputs + elements.editTaskTitleInput.value = task.title; // Populates task's title in an input field for editing // Get button elements from the task modal @@ -316,6 +315,7 @@ function openEditTaskModal(task) { toggleModal(true, elements.editTaskModal); // Show the edit task modal } + function saveTaskChanges(taskId) { // Get new user inputs From 6c06b9aa14ba5a445f1af8f5599d1b072555daa0 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:47:33 +0200 Subject: [PATCH 42/69] Set the value of the 'editTaskDescInput' element to populate the description of the task for editing --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index 3549df1..a9bfe3d 100644 --- a/index.js +++ b/index.js @@ -301,6 +301,7 @@ function toggleTheme() { function openEditTaskModal(task) { // Set task details in modal inputs elements.editTaskTitleInput.value = task.title; // Populates task's title in an input field for editing + elements.editTaskDescInput.value = task.description; // Populates task's description in input field for editing // Get button elements from the task modal From 898484e7668ddc4b1522d8caaa682651ae918507 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 14:50:15 +0200 Subject: [PATCH 43/69] Set the 'value' property of the "editSelectStatus' element to select the status option in a dropdown input based on task's status --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index a9bfe3d..f342a52 100644 --- a/index.js +++ b/index.js @@ -302,7 +302,7 @@ function openEditTaskModal(task) { // Set task details in modal inputs elements.editTaskTitleInput.value = task.title; // Populates task's title in an input field for editing elements.editTaskDescInput.value = task.description; // Populates task's description in input field for editing - + elements.editSelectStatus.value = task.status; // Sets selected status // Get button elements from the task modal From 567540fb097e0eaeae1d8f8587a917f0c40e98df Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:02:36 +0200 Subject: [PATCH 44/69] Retrieved the button elements in order to delete tasks 'deletetaskBtn' and save any changes made to the tasks 'saveChangesBtn' --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index f342a52..1c10d0a 100644 --- a/index.js +++ b/index.js @@ -305,7 +305,8 @@ function openEditTaskModal(task) { elements.editSelectStatus.value = task.status; // Sets selected status // Get button elements from the task modal - + const saveChangesBtn = document.getElementById('save-task-changes-btn'); + const deleteTaskBtn = document.getElementById('delete-task-btn'); // Call saveTaskChanges upon click of Save Changes button From bbd350b447e24e6fe0db9c8b0793b7c1d463f292 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:04:12 +0200 Subject: [PATCH 45/69] Included comments for the variables --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 1c10d0a..e500867 100644 --- a/index.js +++ b/index.js @@ -305,8 +305,8 @@ function openEditTaskModal(task) { elements.editSelectStatus.value = task.status; // Sets selected status // Get button elements from the task modal - const saveChangesBtn = document.getElementById('save-task-changes-btn'); - const deleteTaskBtn = document.getElementById('delete-task-btn'); + const saveChangesBtn = document.getElementById('save-task-changes-btn'); // Retrieves element from HTML that represents a button that saves changes made to task + const deleteTaskBtn = document.getElementById('delete-task-btn'); // Retrieves element from HTML that represents a button that deletes task // Call saveTaskChanges upon click of Save Changes button From 12e81495dd9cef2e22b052f7aa2851eec28acc09 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:08:42 +0200 Subject: [PATCH 46/69] Called saveTaskChanges upon click of Save Changes button to save the task changes, then 'refreshTasksUI' to reflect those changes on the user interface --- index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index e500867..8f2ba91 100644 --- a/index.js +++ b/index.js @@ -309,7 +309,10 @@ function openEditTaskModal(task) { const deleteTaskBtn = document.getElementById('delete-task-btn'); // Retrieves element from HTML that represents a button that deletes task // Call saveTaskChanges upon click of Save Changes button - + saveChangesBtn.addEventListener('click', () => { + saveTaskChanges(task.id); + refreshTasksUI(); + }); // Delete task using a helper function and close the task modal From 2a1d822e8479079c1e7d1cbd67470f7d240a6f6a Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:15:41 +0200 Subject: [PATCH 47/69] Included an event listener that triggers deletion of specified task 'deleteTask(task.id)', while also hiding the task modal, and then refreshing the tasks UI --- index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 8f2ba91..9ae3c76 100644 --- a/index.js +++ b/index.js @@ -315,7 +315,11 @@ function openEditTaskModal(task) { }); // Delete task using a helper function and close the task modal - + deleteTaskBtn.addEventListener('click', () => { + deleteTask(task.id); + toggleModal(false, elements.editTaskModal); + refreshTasksUI(); + }) toggleModal(true, elements.editTaskModal); // Show the edit task modal } From cdc49ca9e87ba0379f18156ed0a24ce7bb5ed9c7 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:16:12 +0200 Subject: [PATCH 48/69] Included a comment --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 9ae3c76..608515a 100644 --- a/index.js +++ b/index.js @@ -315,7 +315,7 @@ function openEditTaskModal(task) { }); // Delete task using a helper function and close the task modal - deleteTaskBtn.addEventListener('click', () => { + deleteTaskBtn.addEventListener('click', () => { // Included an event listener that triggers deletion of specified task 'deleteTask(task.id)', while also hiding the task modal, and then refreshing the tasks UI deleteTask(task.id); toggleModal(false, elements.editTaskModal); refreshTasksUI(); From 635f510b7d6d95a23d7b9a9ef172b0ee8f2a9fb5 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:39:41 +0200 Subject: [PATCH 49/69] Retrieved the task ID from the local storage --- index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 608515a..0722498 100644 --- a/index.js +++ b/index.js @@ -322,17 +322,19 @@ function openEditTaskModal(task) { }) toggleModal(true, elements.editTaskModal); // Show the edit task modal + refreshTasksUI(); } function saveTaskChanges(taskId) { // Get new user inputs + const task_id = JSON.parse(localStorage.getItem('id')); // Fetches task ID from local storage // Create an object with the updated task details - // Update task using a hlper functoin + // Update task using a helper functoin // Close the modal and refresh the UI to reflect the changes From 362e495195b439029b8ecc4a20d5f5cd0f5c12c7 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:42:02 +0200 Subject: [PATCH 50/69] Retrieved the value entered to allow users to input or edit the title of task --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index 0722498..4a3f26a 100644 --- a/index.js +++ b/index.js @@ -329,6 +329,7 @@ function openEditTaskModal(task) { function saveTaskChanges(taskId) { // Get new user inputs const task_id = JSON.parse(localStorage.getItem('id')); // Fetches task ID from local storage + const titleInput = elements.editTaskTitleInput.value; // Fetches current value entered that aloows users to input/edit title of a task // Create an object with the updated task details From 039ced65ed1b0b0161a5c7b971290d6541c9d037 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:45:22 +0200 Subject: [PATCH 51/69] Added a user input that allows users to input or edit description or details of a task --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index 4a3f26a..c2833b7 100644 --- a/index.js +++ b/index.js @@ -330,6 +330,7 @@ function saveTaskChanges(taskId) { // Get new user inputs const task_id = JSON.parse(localStorage.getItem('id')); // Fetches task ID from local storage const titleInput = elements.editTaskTitleInput.value; // Fetches current value entered that aloows users to input/edit title of a task + const descriptionInput = elements.editTaskDescInput.value; // Allows users to input/edit description or details of a task // Create an object with the updated task details From 6a1874cfa8ad908fa62790b69144030f6617ff39 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:46:41 +0200 Subject: [PATCH 52/69] Included the 'selectStatus' user input so that the user could choose the status of the task --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index c2833b7..e131577 100644 --- a/index.js +++ b/index.js @@ -331,7 +331,7 @@ function saveTaskChanges(taskId) { const task_id = JSON.parse(localStorage.getItem('id')); // Fetches task ID from local storage const titleInput = elements.editTaskTitleInput.value; // Fetches current value entered that aloows users to input/edit title of a task const descriptionInput = elements.editTaskDescInput.value; // Allows users to input/edit description or details of a task - + const selectStatus = elements.editSelectStatus.value; // Chooses the status of the task // Create an object with the updated task details From 21474760614c566db11fae4262c9ebd7cda9b071 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:49:19 +0200 Subject: [PATCH 53/69] Created an object 'updatedtask' that updates the information for a task (title, description, status and the board it belongs to) --- index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index e131577..40b18c1 100644 --- a/index.js +++ b/index.js @@ -334,7 +334,13 @@ function saveTaskChanges(taskId) { const selectStatus = elements.editSelectStatus.value; // Chooses the status of the task // Create an object with the updated task details - + const updatedTask = { + id: task_id, + title: titleInput, + description: descriptionInput, + status: selectStatus, + board: activeBoard, + }; // Update task using a helper functoin From 1d81c0a68a95d15c271a0563ce1dbb086bd909ee Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 15:55:23 +0200 Subject: [PATCH 54/69] Included a function that took two arguments to update tasks identified by 'taskId' with new data provided in 'updatedTask' --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 40b18c1..3e0befb 100644 --- a/index.js +++ b/index.js @@ -342,8 +342,8 @@ function saveTaskChanges(taskId) { board: activeBoard, }; - // Update task using a helper functoin - + // Update task using a helper function + patchTask(taskId, updatedTask); // Takes two arguments to update task identified by 'taskId' with new data provided in 'updatedTask' // Close the modal and refresh the UI to reflect the changes From d2657b887957632cb765dcd10faee513b8d7d3ad Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 21:29:26 +0200 Subject: [PATCH 55/69] Added the 'displayStoredTasks' function to retrieve the tasks from the local storage --- index.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/index.js b/index.js index 3e0befb..62c6fc7 100644 --- a/index.js +++ b/index.js @@ -267,6 +267,7 @@ function addTask(event) { event.target.reset(); refreshTasksUI(); } + location.reload(); } @@ -346,10 +347,18 @@ function saveTaskChanges(taskId) { patchTask(taskId, updatedTask); // Takes two arguments to update task identified by 'taskId' with new data provided in 'updatedTask' // Close the modal and refresh the UI to reflect the changes + location.reload(); + toggleModal(false, elements.editTaskModal); refreshTasksUI(); } +const displayStoredTasks = () => { + // Retrieving the tasks from localStorage + const storedTasks = localStorage.getItem('tasks'); + +} + /*************************************************************************************************************************************************/ document.addEventListener('DOMContentLoaded', function () { From 321352cecf19fd38ec316df350f4474942a89967 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 21:31:34 +0200 Subject: [PATCH 56/69] Parsing the JSON string to an array of tasks --- index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.js b/index.js index 62c6fc7..ae30d02 100644 --- a/index.js +++ b/index.js @@ -357,6 +357,10 @@ const displayStoredTasks = () => { // Retrieving the tasks from localStorage const storedTasks = localStorage.getItem('tasks'); + if (storedTasks) { + // Parsing the JSON string to an array of tasks + const tasks = JSON.parse(storedTasks); + } } /*************************************************************************************************************************************************/ From 17c38f803829c2c0b9e5e39c80fd753956893916 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 21:34:07 +0200 Subject: [PATCH 57/69] Logged the tasks to the console in the if statement --- index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.js b/index.js index ae30d02..bc5e583 100644 --- a/index.js +++ b/index.js @@ -360,6 +360,11 @@ const displayStoredTasks = () => { if (storedTasks) { // Parsing the JSON string to an array of tasks const tasks = JSON.parse(storedTasks); + + // Logging tasks to console + console.log(tasks); + } else { + } } From 4613d73c5de4a01d7f34610c38bf726ac4b51b20 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 21:41:07 +0200 Subject: [PATCH 58/69] Completed the if-else statement to console a statement when no tasks have been found in localStorage --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index bc5e583..07cff05 100644 --- a/index.js +++ b/index.js @@ -364,7 +364,7 @@ const displayStoredTasks = () => { // Logging tasks to console console.log(tasks); } else { - + console.log('No tasks stored in localStorage') } } From e2d3e9dc16bd2d747493b0db4444569a59de6377 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 21:50:16 +0200 Subject: [PATCH 59/69] Calling the function to display stored tasks --- index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.js b/index.js index 07cff05..33847fe 100644 --- a/index.js +++ b/index.js @@ -368,6 +368,9 @@ const displayStoredTasks = () => { } } +// Calling the function to display the stored tasks +displayStoredTasks(); + /*************************************************************************************************************************************************/ document.addEventListener('DOMContentLoaded', function () { From 579cb251e87bd17c680ca23c4b824b85e680fb3e Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 22:08:36 +0200 Subject: [PATCH 60/69] Included an if statement to check ensure the correct logo image is displayed based on the stored value --- index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.js b/index.js index 33847fe..5097c4f 100644 --- a/index.js +++ b/index.js @@ -378,6 +378,9 @@ document.addEventListener('DOMContentLoaded', function () { }); function init() { + if (localStorage.getItem('sideLogoDiv') === './assets/logo-light.svg') { + elements.sideLogoDiv.src = './assets/logo-light.svg'; + } setupEventListeners(); const showSidebar = localStorage.getItem('showSideBar') === 'true'; toggleSidebar(showSidebar); From 2f70470e9864b6f0fa3f0baa91ef90144b3fe916 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 24 Apr 2024 23:08:06 +0200 Subject: [PATCH 61/69] Corrected any bugs in order to get the application almost entirely functional --- index.js | 71 ++++++++++++++++++++++++++++++-------------------------- 1 file changed, 38 insertions(+), 33 deletions(-) diff --git a/index.js b/index.js index 5097c4f..9f00926 100644 --- a/index.js +++ b/index.js @@ -103,13 +103,12 @@ function displayBoards(boards) { } -const columnTitles = { // Added a variable for the various column titles +const columnTitles = { todo: 'TODO', doing: 'DOING', done: 'DONE', } - // Filters tasks corresponding to the board name and displays them on the DOM. // TASK: Fix Bugs function filterAndDisplayTasksByBoard(boardName) { @@ -120,7 +119,7 @@ function filterAndDisplayTasksByBoard(boardName) { elements.columnDivs.forEach(column => { const status = column.getAttribute("data-status"); // Reset column content while preserving the column title - const columnTitle = columnTitles[status]; // This variable represents the status of a task + const columnTitle = columnTitles[status]; column.innerHTML = `

${status.toUpperCase()}

@@ -213,9 +212,6 @@ function setupEventListeners() { elements.hideSideBarBtn.addEventListener('click', () => toggleSidebar(false)); elements.showSideBarBtn.addEventListener('click', () => toggleSidebar(true)); - // Show the button - //elements.showSideBarBtn.style.display = 'block'; - // Theme switch event listener elements.themeSwitch.addEventListener('change', toggleTheme); @@ -251,14 +247,14 @@ function addTask(event) { const descInput = elements.descInput.value; // Captures value entered in a textarea field, such as a task description. const selectStatus = elements.selectStatus.value; // Captures selected value from a dropdown list, indicating the status or category of the task - // 'task' object to store info such as ID, title, etc. + // 'task' object to store info such as title, description, etc. const task = { - 'id': task_id, - 'title': titleInput, - 'desc': descInput, - 'status': selectStatus, - 'board': activeBoard, + title: document.getElementById('title-input').value, + desc: document.getElementById('desc-input').value, + status: document.getElementById('select-status').value, + board: activeBoard, }; + const newTask = createNewTask(task); if (newTask) { addTaskToUI(newTask); @@ -267,7 +263,6 @@ function addTask(event) { event.target.reset(); refreshTasksUI(); } - location.reload(); } @@ -279,23 +274,29 @@ function toggleSidebar(show) { // Controls the visibility of a sidebar in the u // Get current theme from local storage or set to default (light) const currentMode = localStorage.getItem('mode') || 'light'; -let isLightTheme = currentMode === 'light'; +let isLightMode = currentMode === 'light'; // Set the initial SVG source based on the current mode -let sideLogoDivSrc = isLightTheme ? './assets/logo-dark.svg' : './assets/logo-light.svg'; +let sideLogoDivSrc = isLightMode ? './assets/logo-dark.svg' : './assets/logo-light.svg'; elements.sideLogoDiv.src = sideLogoDivSrc; function toggleTheme() { - const isLightMode = document.body.classList.contains('light-mode'); - document.body.classList.toggle('light-mode'); - localStorage.setItem('light-theme', !isLightMode ? 'enabled' : 'disabled'); - - isLightTheme = !isLightTheme; // Handles switching of themes - sideLogoDivSrc = isLightTheme ? './assets/logo-dark.svg' : './assets/logo-light.svg'; // Updates logo displayed on UI based on selected theme - elements.sideLogoDiv.src = sideLogoDivSrc; - localStorage.setItem('mode', isLightTheme ? 'light' : 'dark'); // Store selected theme in localStorage - localStorage.setItem('sideLogoDiv', sideLogoDivSrc); // Store selected SVG source in localStorage + //const isDarkTheme = document.body.classList.contains('dark-theme'); + //localStorage.setItem('dark-theme', isDarkTheme? 'enabled' :'disabled'); + if (localStorage.getItem('light-theme') == 'enable') { + document.body.classList.toggle('light-theme', false); + localStorage.setItem('light-theme', 'disable'); + let img = document.getElementById('logo'); + img.src = './assets/logo-dark.svg'; + } + else { + document.body.classList.toggle('light-theme', true); + localStorage.setItem('light-theme', 'enable'); + let img = document.getElementById('logo'); + img.src = './assets/logo-light.svg'; + + } } @@ -308,11 +309,12 @@ function openEditTaskModal(task) { // Get button elements from the task modal const saveChangesBtn = document.getElementById('save-task-changes-btn'); // Retrieves element from HTML that represents a button that saves changes made to task const deleteTaskBtn = document.getElementById('delete-task-btn'); // Retrieves element from HTML that represents a button that deletes task + const cancelEditTaskBtn = document.getElementById('cancel-edit-btn'); // Call saveTaskChanges upon click of Save Changes button saveChangesBtn.addEventListener('click', () => { saveTaskChanges(task.id); - refreshTasksUI(); + toggleModal(false, elements.editTaskModal); }); // Delete task using a helper function and close the task modal @@ -320,7 +322,11 @@ function openEditTaskModal(task) { deleteTask(task.id); toggleModal(false, elements.editTaskModal); refreshTasksUI(); - }) + }); + + cancelEditTaskBtn.addEventListener('click', () => { + toggleModal(false, elements.editTaskModal); + }); toggleModal(true, elements.editTaskModal); // Show the edit task modal refreshTasksUI(); @@ -336,7 +342,6 @@ function saveTaskChanges(taskId) { // Create an object with the updated task details const updatedTask = { - id: task_id, title: titleInput, description: descriptionInput, status: selectStatus, @@ -347,13 +352,12 @@ function saveTaskChanges(taskId) { patchTask(taskId, updatedTask); // Takes two arguments to update task identified by 'taskId' with new data provided in 'updatedTask' // Close the modal and refresh the UI to reflect the changes - location.reload(); + // location.reload(); toggleModal(false, elements.editTaskModal); - refreshTasksUI(); } -const displayStoredTasks = () => { +/*const displayStoredTasks = () => { // Retrieving the tasks from localStorage const storedTasks = localStorage.getItem('tasks'); @@ -369,7 +373,7 @@ const displayStoredTasks = () => { } // Calling the function to display the stored tasks -displayStoredTasks(); +displayStoredTasks(); */ /*************************************************************************************************************************************************/ @@ -378,9 +382,10 @@ document.addEventListener('DOMContentLoaded', function () { }); function init() { - if (localStorage.getItem('sideLogoDiv') === './assets/logo-light.svg') { + // Ensure that the correct logo image is displayed based on the stored value + /* if (localStorage.getItem('sideLogoDiv') === './assets/logo-light.svg') { elements.sideLogoDiv.src = './assets/logo-light.svg'; - } + } */ setupEventListeners(); const showSidebar = localStorage.getItem('showSideBar') === 'true'; toggleSidebar(showSidebar); From fb52459a5528669b4c8a17b1390f0eb4b21c7ce6 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Thu, 25 Apr 2024 09:57:12 +0200 Subject: [PATCH 62/69] Completed the Intro for my README.md --- README1.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 README1.md diff --git a/README1.md b/README1.md new file mode 100644 index 0000000..2f88f58 --- /dev/null +++ b/README1.md @@ -0,0 +1,15 @@ +# JSL11: Portfolio Piece: Agile Board - Kanban Task Management App + +# Introduction + +The task was to use the provided user stories to identify and fix bugs in the code, as well as to develop our own functions to extend the application's capabilities. The goal was to enhance the application by crafting code to meet specific functionalities outlined in the user stories, like managing task details and their lifecycle, toggling theme customization, etc. + +# Elements Included + +# Reflections + +# Areas of Mastery + +# Challenges Faced + +# Overall Learning Experience From 5b22e23c9f3452aeeccdff3f6f3529cf9ee010da Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Thu, 25 Apr 2024 10:08:27 +0200 Subject: [PATCH 63/69] Completed the elements section --- README1.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README1.md b/README1.md index 2f88f58..f5d4bff 100644 --- a/README1.md +++ b/README1.md @@ -1,11 +1,15 @@ # JSL11: Portfolio Piece: Agile Board - Kanban Task Management App +**LOOM video link:** [] + # Introduction The task was to use the provided user stories to identify and fix bugs in the code, as well as to develop our own functions to extend the application's capabilities. The goal was to enhance the application by crafting code to meet specific functionalities outlined in the user stories, like managing task details and their lifecycle, toggling theme customization, etc. # Elements Included +Some of the elements in this project were buttons, input fields, modal elements, header elements, and sidebar elements. + # Reflections # Areas of Mastery From bdf848f65a9c66856064b148f4879632fcf3f77a Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Thu, 25 Apr 2024 10:16:30 +0200 Subject: [PATCH 64/69] Completed the reflections section --- README.md | 22 +++++++++++++++------- README1.md | 2 ++ 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index ffe9815..47e37da 100644 --- a/README.md +++ b/README.md @@ -3,14 +3,13 @@ Welcome to the Agile Board project, the final project for the JSL course! In this portfolio piece project, you will be stepping into the shoes of a juniour developer tasked with bringing a Kanban Task Management App to life. You're not starting from scratch, though. In this project, you are tasked with tackling the provided user stories to both identify and fix bugs in the code, as well as to develop your own functions to extend the application's capabilities. Key assignments include importing utility functions, initializing data, and diving into debugging tasks such as setting up data correctly in local storage, dynamically displaying boards and tasks, and enhancing user interactions. Additionally, you will enhance the application by crafting code to meet specific functionalities outlined in the user stories, like managing task details and their lifecycle, toggling theme customization, and ensuring the persistence of data through local storage. This blend of debugging and creative coding invites you to apply your critical thinking and problem-solving skills in a hands-on manner, equipping you for the intricacies of real-world software development scenarios. - We're providing you with a head start: - **Starter Code**: You will receive starter code for the user interface (UI) of the application. This includes the basic layout and some of the JavaScript (JS) functionality needed to make the app interactive. - **Your Mission**: Your main task is to complete the app by implementing the features described in the provided user stories. These stories outline the functionality that users expect from the app, such as adding, editing, and deleting tasks, as well as customizing themes and managing the task lifecycle. -- **🪲Important Note on Debugging🚨:** In the sections of the project where you are tasked with debugging the code, *it's crucial to focus on identifying and correcting errors within the existing functions rather than undertaking a complete refactoring of the code.* This means you will need to carefully analyze the provided starter code to pinpoint syntax errors, logical mistakes, or any bugs that prevent the application from functioning as intended. **The goal is to improve and repair the codebase by making precise adjustments, ensuring that the original structure, function logic and intended functionality are preserved.** This approach not only aligns with the project's requirements but also hones the essential skill of debugging— a critical competency for any developer. +- **🪲Important Note on Debugging🚨:** In the sections of the project where you are tasked with debugging the code, _it's crucial to focus on identifying and correcting errors within the existing functions rather than undertaking a complete refactoring of the code._ This means you will need to carefully analyze the provided starter code to pinpoint syntax errors, logical mistakes, or any bugs that prevent the application from functioning as intended. **The goal is to improve and repair the codebase by making precise adjustments, ensuring that the original structure, function logic and intended functionality are preserved.** This approach not only aligns with the project's requirements but also hones the essential skill of debugging— a critical competency for any developer. ### Walkthrough by Coach Kenneth @@ -42,12 +41,10 @@ To complete this challenge, follow these steps: 5. Push your local Git repository to your GitHub account. 6. Verify that the changes have been successfully pushed to your GitHub repository. -🚨 Make sure that you clear the localStorage as you are building your project. This will help with checking that the tasks are loading correctly. +🚨 Make sure that you clear the localStorage as you are building your project. This will help with checking that the tasks are loading correctly. ![alt text](assets/clear-localStorage.gif) - - ## What You Need to Include: 1. Ensure that your code includes the necessary modifications to meet the challenge requirements. @@ -55,12 +52,14 @@ To complete this challenge, follow these steps: # Agile Board Project Feature List -In this Agile Board Project Feature List, you're introduced to a comprehensive suite of functionalities designed to enrich your Kanban Task Management App. +In this Agile Board Project Feature List, you're introduced to a comprehensive suite of functionalities designed to enrich your Kanban Task Management App. As you embark on implementing these features, remember the value of tackling the project one small task at a time. This approach not only makes the process more manageable but also ensures that you can focus on the quality of each feature, leading to a more robust and user-friendly application. Your journey through this project is a great opportunity to apply and hone your skills, so take it step by step and enjoy the learning experience. ![alt text](assets/task-management-feature.gif) + # Task Interaction and Detail Management + - **Clicking an Individual Task for Details**: As a user, I want to click on an individual task so that I can view its details and make edits if necessary. - **Opening the Task Edit Modal**: As a user, I want to open a modal window when adding or editing tasks to easily input task information. - **Updating the Task Title**: As a user, I want to update the task title within the modal to change how it’s displayed on the board. @@ -75,22 +74,29 @@ As you embark on implementing these features, remember the value of tackling the - **Viewing Task Details**: As a user, I want to view detailed information about a task to understand its scope and requirements fully. ![alt text](assets/delete-feature.gif) + # Task Deletion and Confirmation Mechanisms + - **Clicking "Delete Task" Button**: As a user, I want to click a "Delete Task" button within the task edit modal so I can remove tasks that are no longer necessary. - **Immediate UI Update on Task Deletion**: As a user, I expect a task to disappear from the UI immediately after I confirm its deletion to reflect the current state of my task list. -![alt text]() + ![alt text]() # Theme Customization + - **Switching to Dark Mode**: As a user, I want to switch to dark mode so that I can reduce eye strain in low-light conditions. - **Switching Back to Light Mode**: As a user, I want to switch back to light mode from dark mode to better suit bright environments and see the logo update accordingly. ![alt text](assets/sidebar-feature.gif) + # Managing the Sidebar + - **Hiding the Side Bar for More Workspace**: As a user, I want the ability to hide the side bar to gain more workspace. - **Opening the Side Bar for Navigation and Options**: As a user, I want to easily open the side bar to navigate between boards. ![alt text](assets/add-task-feature.gif) + # Task Lifecycle Management + - **Clicking "Add New Task" to Start Adding a Task**: As a user, I want to click the "Add New Task" button so I can begin the process of adding a new task to my board. - **Modal Opens for New Task Input**: As a user, I expect the modal to open when I click "Add New Task" to provide me with a form to input the task's details. - **Adding a Title to the New Task**: As a user, I want to be able to add a title to my new task so I can clearly identify it on the board. @@ -102,7 +108,9 @@ As you embark on implementing these features, remember the value of tackling the - **Editing New Task Details**: As a user, I want to edit the details of the New Task to correct or update information as needed. ![alt text](assets/localStorage-feature.gif) + # Local Storage and Data Persistence + - **Saving New Tasks in localStorage**: As a user, I want my newly created tasks to be saved in localStorage so that my tasks persist even when I close or refresh the browser. - **Reflecting Task Updates in localStorage**: As a user, I expect tasks that I update to have their changes reflected in localStorage so that any modifications are not lost. - **Removing Deleted Tasks from localStorage**: As a user, I want tasks that I delete to be removed from localStorage so that my task list remains accurate and up-to-date. diff --git a/README1.md b/README1.md index f5d4bff..554f2cc 100644 --- a/README1.md +++ b/README1.md @@ -14,6 +14,8 @@ Some of the elements in this project were buttons, input fields, modal elements, # Areas of Mastery +**Task Management:** I believe I was able to maneouvre through creating, editing, deleting, and displaying the tasks according to their boards and status proficiently. + # Challenges Faced # Overall Learning Experience From 283883f33b851986c8aab738410b5913b4f5769c Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Thu, 25 Apr 2024 10:21:37 +0200 Subject: [PATCH 65/69] Completed the challenges section --- README1.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README1.md b/README1.md index 554f2cc..a3e5d07 100644 --- a/README1.md +++ b/README1.md @@ -18,4 +18,6 @@ Some of the elements in this project were buttons, input fields, modal elements, # Challenges Faced +I think this was so far the most demanding project to complete. There were many challenges, one of them being managing the data in localStorage, and ensuring the correct selection and manipulation of DOM elements. + # Overall Learning Experience From 725104f05ed21be57741cb123fb1ba6741b28094 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Thu, 25 Apr 2024 10:26:42 +0200 Subject: [PATCH 66/69] Completed the learning experience section --- README1.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README1.md b/README1.md index a3e5d07..35c217b 100644 --- a/README1.md +++ b/README1.md @@ -21,3 +21,5 @@ Some of the elements in this project were buttons, input fields, modal elements, I think this was so far the most demanding project to complete. There were many challenges, one of them being managing the data in localStorage, and ensuring the correct selection and manipulation of DOM elements. # Overall Learning Experience + +Having to fix all the bugs while combining what little UI styling knowledge I have with concepts like DOM manipulation, UI/UX implementation, and event handling almost had me at my breaking point but opened my eyes to daily activities in industry and helped me build on my troubleshooting and overall coding skills. From a7c1ca25d14012b979332f02d7a01002a9e3eb2b Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Thu, 25 Apr 2024 10:33:07 +0200 Subject: [PATCH 67/69] Included user stories --- README1.md | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/README1.md b/README1.md index 35c217b..acbad6a 100644 --- a/README1.md +++ b/README1.md @@ -23,3 +23,60 @@ I think this was so far the most demanding project to complete. There were many # Overall Learning Experience Having to fix all the bugs while combining what little UI styling knowledge I have with concepts like DOM manipulation, UI/UX implementation, and event handling almost had me at my breaking point but opened my eyes to daily activities in industry and helped me build on my troubleshooting and overall coding skills. + +# User Stories: Task Interaction and Detail Management + +- **Clicking an Individual Task for Details**: As a user, I want to click on an individual task so that I can view its details and make edits if necessary. +- **Opening the Task Edit Modal**: As a user, I want to open a modal window when adding or editing tasks to easily input task information. +- **Updating the Task Title**: As a user, I want to update the task title within the modal to change how it’s displayed on the board. +- **Updating the Task Description**: As a user, I want to update the task description within the modal so I can better describe what needs to be done. +- **Updating the Task Status**: As a user, I want to update the current status of a task (todo, doing, done) to track its progress. +- **Saving Task Changes**: As a user, I want to save the changes I make to a task so that the updated details are stored and displayed. +- **Updating the UI with Task Changes**: As a user, I expect the changes I make to a task to be reflected immediately on the UI without needing to refresh. +- **Deleting a Task from the Edit Modal**: As a user, I want the ability to delete a task directly from the edit modal if it’s no longer needed. +- **Canceling Edits Without Saving**: As a user, I want to be able to cancel my edits and close the modal without saving to avoid accidental changes. +- **Editing Task Details**: As a user, I want to edit the details of an existing task to correct or update information as needed. +- **Easy Navigation Between Task Statuses**: As a user, I want to easily move tasks between statuses (todo, doing, done) to reflect their current progress. +- **Viewing Task Details**: As a user, I want to view detailed information about a task to understand its scope and requirements fully. + +![alt text](assets/delete-feature.gif) + +# Task Deletion and Confirmation Mechanisms + +- **Clicking "Delete Task" Button**: As a user, I want to click a "Delete Task" button within the task edit modal so I can remove tasks that are no longer necessary. +- **Immediate UI Update on Task Deletion**: As a user, I expect a task to disappear from the UI immediately after I confirm its deletion to reflect the current state of my task list. + ![alt text]() + +# Theme Customization + +- **Switching to Dark Mode**: As a user, I want to switch to dark mode so that I can reduce eye strain in low-light conditions. +- **Switching Back to Light Mode**: As a user, I want to switch back to light mode from dark mode to better suit bright environments and see the logo update accordingly. + +![alt text](assets/sidebar-feature.gif) + +# Managing the Sidebar + +- **Hiding the Side Bar for More Workspace**: As a user, I want the ability to hide the side bar to gain more workspace. +- **Opening the Side Bar for Navigation and Options**: As a user, I want to easily open the side bar to navigate between boards. + +![alt text](assets/add-task-feature.gif) + +# Task Lifecycle Management + +- **Clicking "Add New Task" to Start Adding a Task**: As a user, I want to click the "Add New Task" button so I can begin the process of adding a new task to my board. +- **Modal Opens for New Task Input**: As a user, I expect the modal to open when I click "Add New Task" to provide me with a form to input the task's details. +- **Adding a Title to the New Task**: As a user, I want to be able to add a title to my new task so I can clearly identify it on the board. +- **Adding a Description to the New Task**: As a user, I want to be able to add a description to my new task to provide more details about what needs to be done. +- **Selecting a Status for the New Task**: As a user, I want to select a status for my new task (e.g., Todo, Doing, Done) to categorize it based on its progress. +- **Creating the New Task**: As a user, I want to click a "Create Task" button in the modal to save the new task to the board. +- **New Task Appears in UI Under Correct Status**: As a user, I expect the new task to appear in the UI under the correct status column immediately after creation. +- **Viewing New Task Details**: As a user, I want to view detailed information about the New Task to understand its scope and requirements fully. +- **Editing New Task Details**: As a user, I want to edit the details of the New Task to correct or update information as needed. + +![alt text](assets/localStorage-feature.gif) + +# Local Storage and Data Persistence + +- **Saving New Tasks in localStorage**: As a user, I want my newly created tasks to be saved in localStorage so that my tasks persist even when I close or refresh the browser. +- **Reflecting Task Updates in localStorage**: As a user, I expect tasks that I update to have their changes reflected in localStorage so that any modifications are not lost. +- **Removing Deleted Tasks from localStorage**: As a user, I want tasks that I delete to be removed from localStorage so that my task list remains accurate and up-to-date. From 9a148827e64786499023c6d029e12c9bcf904252 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Thu, 25 Apr 2024 10:35:10 +0200 Subject: [PATCH 68/69] Rnamed the README.md and deleted the instructional one --- README.md | 62 ++++++++++------------------------------- README1.md | 82 ------------------------------------------------------ 2 files changed, 14 insertions(+), 130 deletions(-) delete mode 100644 README1.md diff --git a/README.md b/README.md index 47e37da..acbad6a 100644 --- a/README.md +++ b/README.md @@ -1,64 +1,30 @@ -### [JSL11] Agile Board - Kanban Task Management App +# JSL11: Portfolio Piece: Agile Board - Kanban Task Management App -Welcome to the Agile Board project, the final project for the JSL course! In this portfolio piece project, you will be stepping into the shoes of a juniour developer tasked with bringing a Kanban Task Management App to life. You're not starting from scratch, though. In this project, you are tasked with tackling the provided user stories to both identify and fix bugs in the code, as well as to develop your own functions to extend the application's capabilities. Key assignments include importing utility functions, initializing data, and diving into debugging tasks such as setting up data correctly in local storage, dynamically displaying boards and tasks, and enhancing user interactions. +**LOOM video link:** [] -Additionally, you will enhance the application by crafting code to meet specific functionalities outlined in the user stories, like managing task details and their lifecycle, toggling theme customization, and ensuring the persistence of data through local storage. This blend of debugging and creative coding invites you to apply your critical thinking and problem-solving skills in a hands-on manner, equipping you for the intricacies of real-world software development scenarios. -We're providing you with a head start: +# Introduction -- **Starter Code**: You will receive starter code for the user interface (UI) of the application. This includes the basic layout and some of the JavaScript (JS) functionality needed to make the app interactive. +The task was to use the provided user stories to identify and fix bugs in the code, as well as to develop our own functions to extend the application's capabilities. The goal was to enhance the application by crafting code to meet specific functionalities outlined in the user stories, like managing task details and their lifecycle, toggling theme customization, etc. -- **Your Mission**: Your main task is to complete the app by implementing the features described in the provided user stories. These stories outline the functionality that users expect from the app, such as adding, editing, and deleting tasks, as well as customizing themes and managing the task lifecycle. +# Elements Included -- **🪲Important Note on Debugging🚨:** In the sections of the project where you are tasked with debugging the code, _it's crucial to focus on identifying and correcting errors within the existing functions rather than undertaking a complete refactoring of the code._ This means you will need to carefully analyze the provided starter code to pinpoint syntax errors, logical mistakes, or any bugs that prevent the application from functioning as intended. **The goal is to improve and repair the codebase by making precise adjustments, ensuring that the original structure, function logic and intended functionality are preserved.** This approach not only aligns with the project's requirements but also hones the essential skill of debugging— a critical competency for any developer. +Some of the elements in this project were buttons, input fields, modal elements, header elements, and sidebar elements. -### Walkthrough by Coach Kenneth +# Reflections -Jump into the walkthrough of the project and starter code here: https://www.youtube.com/watch?v=aD8Wx9PGYSc +# Areas of Mastery -### Project Overview +**Task Management:** I believe I was able to maneouvre through creating, editing, deleting, and displaying the tasks according to their boards and status proficiently. -As a newly hired developer at Agile Board, a fictional company specializing in innovative task management solutions, you'll embark on an exciting journey to enhance their flagship Kanban Task Management App. +# Challenges Faced -![alt text](assets/JSL11_solution.gif) +I think this was so far the most demanding project to complete. There were many challenges, one of them being managing the data in localStorage, and ensuring the correct selection and manipulation of DOM elements. -Your journey through this project will involve several key activities: +# Overall Learning Experience -1. **Exploring the Starter Code**: Begin by familiarizing yourself with the UI and JS functionality we've provided. This will give you a solid understanding of the project's current state and what needs to be done. -2. **Completing User Stories**: Dive into the user stories, which are your roadmap to completing the project. Each story is a feature or functionality that your app needs to support. Your goal is to write the JS code necessary to bring these stories to life. -3. **Testing and Debugging**: As you implement each feature, test your app to ensure it works as expected. Debug any issues that arise to ensure a smooth user experience. -4. **Reflecting on Your Work**: Once you've completed the user stories, take a step back and review your app. Consider the challenges you faced, what you learned, and how you might improve the app further. +Having to fix all the bugs while combining what little UI styling knowledge I have with concepts like DOM manipulation, UI/UX implementation, and event handling almost had me at my breaking point but opened my eyes to daily activities in industry and helped me build on my troubleshooting and overall coding skills. -This project is designed to be both challenging and rewarding, providing you with hands-on experience in web development. By the end, you'll have a functional Kanban Task Management App that you can showcase in your portfolio. Ready to get started? Let's dive in! - -## What You Need to Do: - -To complete this challenge, follow these steps: - -1. Clone the provided Starter Code Repository to your local development environment: [Starter Code Repository](https://github.com/CodeSpace-Academy/Final_Project_StudentNo_Classcode_Group_Name-Surname_JSL11). -2. Open the cloned project in your code editor. -3. Code your solution to the user stories. -4. Commit your changes to your local Git repository with meaningful commit messages. -5. Push your local Git repository to your GitHub account. -6. Verify that the changes have been successfully pushed to your GitHub repository. - -🚨 Make sure that you clear the localStorage as you are building your project. This will help with checking that the tasks are loading correctly. - -![alt text](assets/clear-localStorage.gif) - -## What You Need to Include: - -1. Ensure that your code includes the necessary modifications to meet the challenge requirements. -2. Your GitHub repository should contain the updated code files. - -# Agile Board Project Feature List - -In this Agile Board Project Feature List, you're introduced to a comprehensive suite of functionalities designed to enrich your Kanban Task Management App. - -As you embark on implementing these features, remember the value of tackling the project one small task at a time. This approach not only makes the process more manageable but also ensures that you can focus on the quality of each feature, leading to a more robust and user-friendly application. Your journey through this project is a great opportunity to apply and hone your skills, so take it step by step and enjoy the learning experience. - -![alt text](assets/task-management-feature.gif) - -# Task Interaction and Detail Management +# User Stories: Task Interaction and Detail Management - **Clicking an Individual Task for Details**: As a user, I want to click on an individual task so that I can view its details and make edits if necessary. - **Opening the Task Edit Modal**: As a user, I want to open a modal window when adding or editing tasks to easily input task information. diff --git a/README1.md b/README1.md deleted file mode 100644 index acbad6a..0000000 --- a/README1.md +++ /dev/null @@ -1,82 +0,0 @@ -# JSL11: Portfolio Piece: Agile Board - Kanban Task Management App - -**LOOM video link:** [] - -# Introduction - -The task was to use the provided user stories to identify and fix bugs in the code, as well as to develop our own functions to extend the application's capabilities. The goal was to enhance the application by crafting code to meet specific functionalities outlined in the user stories, like managing task details and their lifecycle, toggling theme customization, etc. - -# Elements Included - -Some of the elements in this project were buttons, input fields, modal elements, header elements, and sidebar elements. - -# Reflections - -# Areas of Mastery - -**Task Management:** I believe I was able to maneouvre through creating, editing, deleting, and displaying the tasks according to their boards and status proficiently. - -# Challenges Faced - -I think this was so far the most demanding project to complete. There were many challenges, one of them being managing the data in localStorage, and ensuring the correct selection and manipulation of DOM elements. - -# Overall Learning Experience - -Having to fix all the bugs while combining what little UI styling knowledge I have with concepts like DOM manipulation, UI/UX implementation, and event handling almost had me at my breaking point but opened my eyes to daily activities in industry and helped me build on my troubleshooting and overall coding skills. - -# User Stories: Task Interaction and Detail Management - -- **Clicking an Individual Task for Details**: As a user, I want to click on an individual task so that I can view its details and make edits if necessary. -- **Opening the Task Edit Modal**: As a user, I want to open a modal window when adding or editing tasks to easily input task information. -- **Updating the Task Title**: As a user, I want to update the task title within the modal to change how it’s displayed on the board. -- **Updating the Task Description**: As a user, I want to update the task description within the modal so I can better describe what needs to be done. -- **Updating the Task Status**: As a user, I want to update the current status of a task (todo, doing, done) to track its progress. -- **Saving Task Changes**: As a user, I want to save the changes I make to a task so that the updated details are stored and displayed. -- **Updating the UI with Task Changes**: As a user, I expect the changes I make to a task to be reflected immediately on the UI without needing to refresh. -- **Deleting a Task from the Edit Modal**: As a user, I want the ability to delete a task directly from the edit modal if it’s no longer needed. -- **Canceling Edits Without Saving**: As a user, I want to be able to cancel my edits and close the modal without saving to avoid accidental changes. -- **Editing Task Details**: As a user, I want to edit the details of an existing task to correct or update information as needed. -- **Easy Navigation Between Task Statuses**: As a user, I want to easily move tasks between statuses (todo, doing, done) to reflect their current progress. -- **Viewing Task Details**: As a user, I want to view detailed information about a task to understand its scope and requirements fully. - -![alt text](assets/delete-feature.gif) - -# Task Deletion and Confirmation Mechanisms - -- **Clicking "Delete Task" Button**: As a user, I want to click a "Delete Task" button within the task edit modal so I can remove tasks that are no longer necessary. -- **Immediate UI Update on Task Deletion**: As a user, I expect a task to disappear from the UI immediately after I confirm its deletion to reflect the current state of my task list. - ![alt text]() - -# Theme Customization - -- **Switching to Dark Mode**: As a user, I want to switch to dark mode so that I can reduce eye strain in low-light conditions. -- **Switching Back to Light Mode**: As a user, I want to switch back to light mode from dark mode to better suit bright environments and see the logo update accordingly. - -![alt text](assets/sidebar-feature.gif) - -# Managing the Sidebar - -- **Hiding the Side Bar for More Workspace**: As a user, I want the ability to hide the side bar to gain more workspace. -- **Opening the Side Bar for Navigation and Options**: As a user, I want to easily open the side bar to navigate between boards. - -![alt text](assets/add-task-feature.gif) - -# Task Lifecycle Management - -- **Clicking "Add New Task" to Start Adding a Task**: As a user, I want to click the "Add New Task" button so I can begin the process of adding a new task to my board. -- **Modal Opens for New Task Input**: As a user, I expect the modal to open when I click "Add New Task" to provide me with a form to input the task's details. -- **Adding a Title to the New Task**: As a user, I want to be able to add a title to my new task so I can clearly identify it on the board. -- **Adding a Description to the New Task**: As a user, I want to be able to add a description to my new task to provide more details about what needs to be done. -- **Selecting a Status for the New Task**: As a user, I want to select a status for my new task (e.g., Todo, Doing, Done) to categorize it based on its progress. -- **Creating the New Task**: As a user, I want to click a "Create Task" button in the modal to save the new task to the board. -- **New Task Appears in UI Under Correct Status**: As a user, I expect the new task to appear in the UI under the correct status column immediately after creation. -- **Viewing New Task Details**: As a user, I want to view detailed information about the New Task to understand its scope and requirements fully. -- **Editing New Task Details**: As a user, I want to edit the details of the New Task to correct or update information as needed. - -![alt text](assets/localStorage-feature.gif) - -# Local Storage and Data Persistence - -- **Saving New Tasks in localStorage**: As a user, I want my newly created tasks to be saved in localStorage so that my tasks persist even when I close or refresh the browser. -- **Reflecting Task Updates in localStorage**: As a user, I expect tasks that I update to have their changes reflected in localStorage so that any modifications are not lost. -- **Removing Deleted Tasks from localStorage**: As a user, I want tasks that I delete to be removed from localStorage so that my task list remains accurate and up-to-date. From 2109daff6ec0ef0b49d5b6cbcf6720d5f48ff348 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Thu, 25 Apr 2024 15:27:14 +0200 Subject: [PATCH 69/69] Included the link for my LOOM video, and uncommented the 'displayStoredTasks' function --- README.md | 2 +- index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index acbad6a..234945c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # JSL11: Portfolio Piece: Agile Board - Kanban Task Management App -**LOOM video link:** [] +**LOOM video link:** [https://www.loom.com/share/598da8757e9648289d5f563aaadeb155?sid=ed38ce5b-51ee-4536-9b4a-3333e1d5c6b6] # Introduction diff --git a/index.js b/index.js index 9f00926..e5070ae 100644 --- a/index.js +++ b/index.js @@ -357,7 +357,7 @@ function saveTaskChanges(taskId) { refreshTasksUI(); } -/*const displayStoredTasks = () => { +const displayStoredTasks = () => { // Retrieving the tasks from localStorage const storedTasks = localStorage.getItem('tasks'); @@ -373,7 +373,7 @@ function saveTaskChanges(taskId) { } // Calling the function to display the stored tasks -displayStoredTasks(); */ +displayStoredTasks(); /*************************************************************************************************************************************************/