Vasavi

JS/TaskManager.js

@@ -1,76 +1,138 @@
-class TaskManager {
+  class TaskManager {
     constructor(currentId = 0) {
         this.task = [];
         this.currentId = currentId;
-    }
+      }
+
 
     addTask(formname, formAssignedTo, formduedate, formstatus, formdescription) {
         const newTask = {
-            id: this.curentId++,
+            id: this.currentId++,  
             formname: formname,
             formAssignedTo: formAssignedTo,
             formduedate: formduedate,
-          formdescription: formdescription,
-
             formstatus: formstatus,
+            formdescription: formdescription   
         };
+        this.task.push(newTask);
+    };
 
-// console.log(newTask);
+
+    deleteTask(taskId) {
+
+      const newTasks = [];
+          for (let i = 0; i < this.task.length; i++) {
+          const task = this.task[i];
+          if (task.id !== taskId) {
+          newTasks.push(task);
+          }
+
+      }
+
+      this.task = newTasks;
+      console.log(this.task);
+  }
+  /* Update status*/ 
+  // Method to get the task id to update status
+  getTaskById(taskId) {
+    let foundTask;
 
-        this.task.push(newTask);
+    for (let i = 0; i < this.task.length; i++) {
+
+        const task = this.task[i];
+
+      if(task.id === taskId){
+        foundTask = task;
+      };
     };
+    return foundTask;
+        };
+
+    save() {
+        // Create a JSON string of the tasks
+
+      const taskJson = JSON.stringify(this.task);
+  console.log(taskJson);
+      // Store the JSON string in localStorage
+      localStorage.setItem('task', taskJson);
 
+      // Convert the currentId to a string;
+      const currentId = String(this.currentId);
+
+      // Store the currentId in localStorage
+      localStorage.setItem('currentId', currentId);
+
+
+        }
+
+      load() {
+          // Check if any tasks are saved in localStorage
+          if (localStorage.getItem('task')) {
+              // Get the JSON string of tasks in localStorage
+              const taskJson = localStorage.getItem('task');
+      console.log(taskJson);
+              // Convert it to an array and store it in our TaskManager
+              this.task = JSON.parse(taskJson);
+              console.log(this.task);
+          }
+
+          // Check if the currentId is saved in localStorage
+          if (localStorage.getItem('currentId')) {
+              // Get the currentId string in localStorage
+              const currentId = localStorage.getItem('currentId');
+
+              // Convert the currentId to a number and store it in our TaskManager
+              this.currentId = Number(currentId);
+          }
+      }
+
 
-   /*Display list of card*/
+  /*Display list of tasks*/
   render() {
       const taskHtmlList = [];
 
       for(let i = 0; i < this.task.length; i++) {
         const tasks = this.task[i];
-    /*Format date - dd/mm/yyyy */
-      // Get the Javascript object new Date, give it the argument tasks.formduedate, and assign it to a variable
+
         const DueDate = new Date(tasks.formduedate);
       // Save the formatted date in a variable
         const formattedDate = DueDate.getDate() + '/' + (DueDate.getMonth() + 1) + '/' + DueDate.getFullYear();  
 
-        const taskHtml = createTaskHtml(tasks.formname, tasks.formAssignedTo, tasks.formdescription, formattedDate, tasks.formstatus);
+        const taskHtml = createTaskHtml(tasks.id, tasks.formname, tasks.formAssignedTo, formattedDate, tasks.formstatus, tasks.formdescription);
 
         taskHtmlList.push(taskHtml);
       };
         const tasksHtml = taskHtmlList.join('\n');
 
         const taskList = document.querySelector('#task-card');
         taskList.innerHTML = tasksHtml;
+    };
+
 
-    };  
-
-  }
-
-  const createTaskHtml = (formname, formAssignedTo, formdescription, DueDate, formstatus) => {
+  };
+
+  const createTaskHtml = (id, formname, formAssignedTo, formduedate, formstatus, formdescription) => {
 
     return `
-            <li class="list-group-item mt-2">
+            <li data-task-id=${id} class="list-group-item mt-2">
             <div class="d-flex w-100 mt-2 justify-content-between align-items-center">
             <h5>${formname}</h5>
-          <span class="badge ${formAssignedTo === 'Vasavi' ? 'badge-dark' : 'badge-info'}">${formAssignedTo}</span>
-           <span class="badge ${formstatus === 'To do' ? 'badge-success' : 'badge-warning'}">${formstatus}</span>
-
-
-</div>
-         <div class="d-flex w-100 mb-3 justify-content-between">
-            <small>Description: ${formdescription}</small>
-
-
-
-
+            <h5><span style="pull:right;" class="badge ${formstatus === 'To do' || formstatus === 'In progress' || formstatus === 'Review' ? 'badge-warning' : 'badge-success'}">${formstatus}</span></div></h5>
+            <h6><span class="badge ${formAssignedTo === 'Vasavi' ? 'badge-dark' : 'badge-info'}">${formAssignedTo}</span></h6>
+            <div class="d-flex w-100 justify-content-between">
+            <medium><strong>Description:</strong> ${formdescription} </medium>
             </div>
-
-            <div class="d-flex w-100 mt-3 justify-content-between align-items-center">
-            <small>DueDate: ${DueDate}</small>
-
-
+            <div class="d-flex w-100 justify-content-between align-items-center">
+            <medium><strong>Due Date:</strong> ${formduedate} </medium>
+            </div>
+            <div>
+            <button class="btn btn-outline-success done-button float-right ${formstatus === 'To do' || formstatus === 'In progress' || formstatus === 'Review' ? 'visible' : 'invisible'}">Mark As Done</button>
+            <button class="btn delete-button btn-outline-dark text-right">Delete</button>
             </div>
             </li>
-          `;
+            `;
+
   }
-
+
+
+module.exports = TaskManager;

JS/index.js

@@ -1,7 +1,9 @@
-
+// declare a varable and class 
 const taskManager = new TaskManager(0);
+
+taskManager.load();
+taskManager.render();
 const addTaskForm = document.querySelector('#addTaskForm');
-console.log(taskManager);
 
 
 addTaskForm.addEventListener('submit', (event) => {
@@ -16,51 +18,91 @@ addTaskForm.addEventListener('submit', (event) => {
     const status = document.querySelector('#status');
     const errorMessage = document.querySelector('#alertMessage');
 
-
-
+
     const formname = name.value;
     const formAssignedTo = AssignedTo.value;
     const formduedate = duedate.value;
     const formstatus = status.value;
     const formdescription = description.value;
+
+// Form validations
+// Form : Name : Validation
     if(!validFormFieldInput(formname)){
         errorMessage.innerHTML = "Need to add a task name";
         errorMessage.style.display = "block"
-
-    }  
+
+    } 
+    // Form : AssignedTo  : Validation
     else if(!validFormFieldInput(formAssignedTo)){
         errorMessage.innerHTML = "Need to assign someone";
         errorMessage.style.display = "block"
-   
+
     } 
+    // Form DueDate: Validation
     else if(!validFormFieldInput(formduedate)){
         errorMessage.innerHTML = "Need to add a date";
         errorMessage.style.display = "block"
-   
+
     }
+    // Form : status : validation
     else if(!validFormFieldInput(formstatus)){
         errorMessage.innerHTML = "Need to add a status";
         errorMessage.style.display = "block"
 
     }
+    // Form : Description : validation
     else if(!validFormFieldInput(formdescription)){
         errorMessage.innerHTML = "Need to add a task description";
         errorMessage.style.display = "block"
 
     }
+    // Form : alert message for Error : validation 
     else {
     errorMessage.style.display = "none";
     taskManager.addTask(formname, formAssignedTo, formduedate, formstatus, formdescription);
+    //reset or clear form
     event.target.reset();
-  }
-
-
-
-  // Render the tasks
-  taskManager.render();
+}
+    taskManager.save();
+   // Render the tasks
+    taskManager.render();
 });
 
 function validFormFieldInput(data){
-  return data !== null && data !== '';
+    return data !== null && data !== '';
 };
 
+
+ const taskCard = document.querySelector('#task-card');
+
+    taskCard.addEventListener('click', (event) => {
+    if (event.target.classList.contains('done-button')) {
+
+        const button = event.target;
+        const parentTask = button.parentElement.parentElement;
+        const taskId = Number(parentTask.dataset.taskId);
+
+        const task = taskManager.getTaskById(taskId);
+        task.formstatus = 'DONE';
+
+        taskManager.save();
+        taskManager.render();
+    }
+
+    if (event.target.classList.contains('delete-button')) {
+        // Get the parent Task
+
+        const parentTask = event.target.parentElement.parentElement;
+        console.log(parentTask);
+        // Get the taskId of the parent Task.
+        const taskId = Number(parentTask.dataset.taskId);
+        console.log(taskId);
+        // Delete the task
+        taskManager.deleteTask(taskId);
+        console.log(taskId);
+        // Save the tasks to localStorage
+        taskManager.save();
+        // Render the tasks
+        taskManager.render();
+    }
+});

README.md

@@ -1,3 +1,48 @@
 # FinalProject
 For Generation Australia
 
+👋 Hello! 😄 Welcome to "The TaskPlanner Project", a web application built by Vasavi and Lou. It was the final project for the Generation Australia / Academy Xi "Front-end Web Development Bootcamp" undertaken from Oct 2020 to Feb 2021. I hope you will enjoy using it as much as I enjoyed building it!
+
+Application is Live here on : https://loupellegrino.github.io/FinalProject/
+
+# Developer Platforms
+The following tools have been used to develop this application:
+
+HTML
+CSS
+Bootstrap
+Java Script - ECMA Script 6 - Class Constructors and Object Handling
+Testing - mocha
+API Integration - NodeJS and NPM
+Data Handling - Local Storage
+Parcel Bundler and Integration - JSON
+
+# Features
+This Tasklist Application provides the following basic features:
+
+- Add Task to a List with Task Name, Assignee, Status, Description and Due Date.
+- Form validation to ensure all fields are entered before submiting the task.
+- Choose assignee and status from drop down options.
+- Status update button (Mark as Done).
+- Delete Tasks from list and local storage.
+
+# Final Project Sprint Assessments
+We used Agile Methodologies within our project to complete sprints and sprint retrospectives set out by Generation Australia. 
+There were 3 sprints and a total of 10 tasks:
+
+Sprint 1
+- Task 1: Design you App Wireframes
+- Task 2: Implement your Wireframes using Bootstrap
+- Task 3: Create a Task Card layout and a Task List component
+
+Sprint 2
+- Task 4: All form fields are validated
+- Task 5: Add task to task planner
+- Task 6: Display task/s
+
+Sprint 3
+- Task 8: Persisting Data to local storage
+- Task 9: Ability to delete task
+- Task 10: Unit testing using Mocha
+
+We were also assessed on our Technical Skills and Problem Solving skills throughout the project.