a

frontend/css/styles.css

@@ -24,15 +24,10 @@
     radial-gradient(ellipse 600px 500px at 55% 5%, rgba(177, 98, 134, 0.18), transparent),
     radial-gradient(ellipse 500px 400px at 75% 20%, rgba(104, 157, 106, 0.12), transparent),
     linear-gradient(160deg, #1d2021 0%, #282828 45%, #32302f 100%);
-
   min-height: 90vh;
-
   height: auto;
-
   background-size: cover;
-
   background-position: center center;
-
   background-repeat: no-repeat;
 }
 
@@ -62,31 +57,24 @@ footer {
 
 .navbar-toggler {
   border: none !important;
-
   box-shadow: none !important;
 }
 
 .btn-primary {
   background-color: var(--secondary);
-
   color: var(--fg);
-
   border-color: transparent;
 }
 
 .btn-primary:hover {
   background-color: var(--secondary-hover);
-
   color: var(--primary);
-
   border-color: transparent;
 }
 
 form a {
   text-decoration: none;
-
   color: var(--fg);
-
   transition: 0.2s ease-in-out;
 }
 

frontend/dashboard.html

@@ -36,6 +36,10 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
@@ -111,6 +115,28 @@
       </div>
     </div>
   </footer>
+    <!-- Modal -->
+  <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h1 class="modal-title fs-5" id="editTaskModalLabel">Edit Task</h1>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              </div>
+              <div class="modal-body">
+                  <form id="editTaskForm">
+                      <input id="editTaskName" placeholder="Task Name" class="mb-2 form-control shadow-sm" type="text">
+                      <textarea id="editTaskDescription" placeholder="Task Description" rows="7" class="form-control mb-2 shadow-sm"></textarea>
+                      <input id="editDueDate" placeholder="Task Name" class="mb-3 form-control shadow-sm" type="date">
+                  </form>
+              </div>
+              <div class="modal-footer">
+                  <button id="saveButton" type="submit" class="btn btn-primary">Save changes</button>
+              </div>
+          </div>
+      </div>
+  </div>
+
   <script src="./js/api.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"

frontend/features.html

@@ -36,6 +36,10 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>

frontend/index.html

@@ -36,6 +36,10 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>

frontend/js/api.js

@@ -1,170 +1,235 @@
-// GLOBALS
-const $taskForm = document.getElementById('taskForm');
-const $toDoList = document.getElementById('toDoList');
-const $completedList = document.getElementById('completedList');
+const taskForm = document.getElementById('taskForm');
+const toDoList = document.getElementById('toDoList');
+const completedList = document.getElementById('completedList');
+const url = "http://localhost:3001";
 
-// RESET FORM
 function resetForm() {
-    $taskForm.reset();
-};
+  taskForm.reset();
+}
+
+const sortButton = document.getElementById("sortSelect");
+window.addEventListener("DOMContentLoaded", () => {
+  sortButton.value = "default";
+});
+sortButton.addEventListener('change', () => {
+  displayTasks();
+});
 
-// EVENT LISTENERS
 window.addEventListener("DOMContentLoaded", () => {
   displayTasks();
 });
 
-$taskForm.addEventListener("submit", (event) => {
+
+taskForm.addEventListener("submit", (event) => {
   event.preventDefault();
   createNewTask();
 });
 
-
-[$toDoList, $completedList].forEach(list => {
-    list.addEventListener("click", (event) => {
-        if (
-            event.target.classList.contains("done") ||
-            event.target.classList.contains("notDone")
-        ) {
-            toggleTaskStatus(event.target.dataset.id);
+[toDoList, completedList].forEach(list => {
+  list.addEventListener('click', (event) => {
+    if (event.target.classList.contains("done")) {
+      const taskId = event.target.getAttribute("data-id");
+      completeTask(taskId);
     }
+    else if (event.target.classList.contains("notDone")) {
+      const taskId = event.target.getAttribute("data-id");
+      taskNotCompleted(taskId);
+    }
+
     else if (event.target.classList.contains("delete")) {
-            deleteTask(event.target.dataset.id);
+      const taskId = event.target.getAttribute("data-id");
+      deleteTask(taskId);
+    }
+    else if (event.target.classList.contains('edit')) {
+      const task = {
+        id: event.target.getAttribute('data-id'),
+        title: event.target.getAttribute('data-title'),
+        description: event.target.getAttribute('data-description'),
+        dueDate: new Date(event.target.getAttribute('data-due-date'))
+      };
+      const modal = {
+        titleInput: document.getElementById('editTaskName'),
+        descriptionInput: document.getElementById('editTaskDescription'),
+        dueDateInput: document.getElementById('editDueDate'),
+        saveButton: document.getElementById('saveButton')
+      };
+      modal.titleInput.value = task.title;
+      modal.descriptionInput.value = task.description;
+      modal.dueDateInput.value = task.dueDate.toISOString().split('T')[0];
+      modal.saveButton.addEventListener('click', async () => {
+        await editTask(task.id);
+        bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
+      }, { once: true });
     }
   });
 });
 
-// EXAMPLE API
-// async function exampleAPI() {
-//     const response = await fetch("http://localhost:3001/test");
-//     const data = await response.text();
-//     console.log(data);
-// }
-//
-// exampleAPI();
 
-
-// DISPLAY TASKS
 async function displayTasks() {
-
-    const response = await fetch("http://localhost:3001/api/tasks")
-
+  const sortSelect = document.getElementById('sortSelect');
+  const sortBy = sortSelect.value;
+  let query = '';
+  if (sortBy !== 'default') {
+    query = `?sortBy=${sortBy}`;
+  }
+  try {
+    const response = await fetch(`${url}/api/tasks${query}`);
     if (!response.ok) {
       throw new Error(`Failed to get tasks: ${response.status}`);
     }
-
     const data = await response.json();
 
-    try {
     function formatTask(task) {
       const li = document.createElement("li");
-
-            li.classList.add('card', 'p-3', 'mt-2');
-            const done = task.completed
-                ? "text-decoration-line-through opacity-50"
-                : "";
+      li.classList.add("card", "p-3", "shadow-sm", "mt-2");
+      const done = task.completed ? "text-decoration-line-through opacity-50" : "";
       li.innerHTML = `
         <div class="d-flex justify-content-between align-items-start">
           <h4 class="${done} col-11">${task.title}</h4>
-                <button data-id="${task.id}" type="button" class="btn-close delete" aria-label="Close"></button>
+          <button data-id="${task._id}" type="button" class="btn-close delete" aria-label="Close"></button>
         </div>
         <p class="${done}">${task.description}</p>
-            <p class="${done}"><strong>Due: </strong>${task.dueDate}</p>
+        <p class="${done}"><strong>Due: </strong>${new Date(task.dueDate).toLocaleDateString()}</p>
         <div class="d-flex justify-content-between align-items-end">
           <div>
-                        ${task.completed
-                    ? `<button data-id="${task.id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
-                    : `
-                                    <button data-id="${task.id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
-                                    <button data-id="${task.id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
+            ${task.completed ?
+          `<button data-id="${task._id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
+          :
+          `
+                <button data-bs-toggle="modal" data-bs-target="#editModal" data-title="${task.title}" data-description="${task.description}" data-due-date="${task.dueDate}" data-id="${task._id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
+                <button data-id="${task._id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
               `
         }
           </div>
-                    <p class="m-0 ${done}"><strong>Created on: </strong>${task.dateCreated}</p>
+          <p class="m-0 ${done}"><strong>Created on: </strong>${new Date(task.dateCreated).toLocaleDateString()}</p>
         </div>
       `;
-
       return li;
-
     }
-
-        $toDoList.innerHTML = "";
-        $completedList.innerHTML = "";
-
-        const tasks = Array.isArray(data) ? data : [];
-
-        if (!Array.isArray(data)) {
-            console.error("ERROR: Expected an array of tasks from /api/tasks", data);
-        }
-
+    toDoList.innerHTML = "";
+    completedList.innerHTML = "";
+    const tasks = data;
     tasks.forEach(task => {
       const formattedTask = formatTask(task);
-            task.completed
-                ? $completedList.appendChild(formattedTask)
-                : $toDoList.appendChild(formattedTask)
-        })
+      task.completed ? completedList.appendChild(formattedTask) : toDoList.appendChild(formattedTask);
+    });
     resetForm();
-
   } catch (error) {
-        console.error(`ERROR: ${error}`);
+    console.error("Error: ", error);
   }
-
-
 }
-
 async function createNewTask() {
+
   const taskDetails = {
-        title: $taskForm.taskName.value.trim(),
-        description: $taskForm.taskDescription.value.trim(),
-        dueDate: $taskForm.dueDate.value,
+    title: taskForm.taskName.value.trim(),
+    description: taskForm.taskDescription.value.trim(),
+    dueDate: taskForm.dueDate.value
   }
   if (!taskDetails.title || !taskDetails.description || !taskDetails.dueDate) {
-        alert("Please fill in all fields");
-        return;
+    return alert("All fields required!");
   }
-
   try {
-        const response = await fetch("http://localhost:3001/api/tasks/todo", {
+    const response = await fetch(`${url}/api/tasks/todo`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
       body: JSON.stringify(taskDetails)
     });
-
     if (!response.ok) {
-            throw new Error(`Failed to create task: ${response.status}`);
+      throw new Error(`Failed to post task: ${response.status}`);
     }
-
     const data = await response.json();
-        console.log("Task created:", data);
+    console.log(data);
+    displayTasks();
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
+async function completeTask(taskId) {
+  try {
+    const response = await fetch(`${url}/api/tasks/complete/${taskId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ completed: true })
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to complete task: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log("Task completed:", data);
     displayTasks();
-
-
   }
   catch (error) {
-        console.error(`ERROR: ${error}`);
+    console.error("Error:", error);
   }
-
 };
-
-function toggleTaskStatus(taskId) {
-    const task = tasks.find(task => task.id === Number(taskId));
-
-    if (task) {
-        task.completed = !task.completed;
-        displayTasks();
-    }
-}
-
-function deleteTask(taskId) {
-    const taskIndex = tasks.findIndex(task => task.id == taskId);
-    if (taskIndex !== -1) {
-        tasks.splice(taskIndex, 1);
+async function taskNotCompleted(taskId) {
+  try {
+    const response = await fetch(`${url}/api/tasks/notComplete/${taskId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ completed: false })
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to make task incomplete: ${response.status}`);
     }
+    const data = await response.json();
+    console.log("Task not complete:", data);
     displayTasks();
 
-}
+  } catch (error) {
+    console.error("Error:", error);
+  }
+};
+async function deleteTask(taskId) {
+  try {
+    const response = await fetch(`${url}/api/tasks/delete/${taskId}`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to delete task: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log({ message: "Deleted Task:", Task: data });
+    displayTasks();
 
-function convertDate(dateString) {
-    return new Date(dateString).toLocaleDateString("en-AU");
-}
+  } catch (error) {
+    console.error("Error:", error);
+  }
+};
+async function editTask(taskId) {
+  const updatedDetails = {
+    title: document.getElementById('editTaskName').value.trim(),
+    description: document.getElementById('editTaskDescription').value.trim(),
+    dueDate: document.getElementById('editDueDate').value
+  };
+  if (!updatedDetails.title || !updatedDetails.description || !updatedDetails.dueDate) {
+    return alert("All fields required!");
+  }
+
+  try {
+    const response = await fetch(`${url}/api/tasks/update/${taskId}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(updatedDetails)
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to edit task: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log("Edited Task:", data);
+    displayTasks();
+  } catch (error) {
+    console.error("Error:", error);
+  }
+};

frontend/login.html

@@ -36,24 +36,32 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
   </nav>
 
-  <!-- ↓ Page not ready ↓ -->
-  <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-    <div class="container text-center text-white py-5">
-      <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
-
-      <h2 class="mt-5">Page under construction. Check back later!</h2>
-
-      <div class="mt-5">
-        <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
+  <section class="d-flex justify-content-center flex-column align-items-center bg-img">
+      <div class="rounded shadow bg-translucent p-4">
+          <h2 class="mb-3 text-white">Login</h2>
+          <form id="loginForm">
+              <input id="email" placeholder="Email Address" required type="email" class="mb-3 form-control shadow-sm">
+              <input id="password" placeholder="Password" required type="password" class="form-control shadow-sm">
+              <div class="d-flex justify-content-between align-items-center gap-3 mt-3">
+                  <button type="submit" class="btn btn-primary shadow-sm">Login</button>
+                  <div class="text-end">
+                      <a href="./signup.html">Don't have an account yet?</a> 
+                      <br>  
+                      <a href="#">Forgot Password?</a> 
                   </div> 
               </div>
+          </form>
+      </div>
   </section>
-  <!-- ↑ Page not ready ↑ -->
 
   <!-- ↓ Footer ↓ -->
   <footer>

frontend/pricing.html

@@ -36,26 +36,15 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
   </nav>
 
-  <!-- ↓ Page not ready ↓ -->
-  <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-    <div class="container text-center text-white py-5">
-      <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
-
-      <h2 class="mt-5">Page under construction. Check back later!</h2>
-
-      <div class="mt-5">
-        <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
-      </div>
-    </div>
-  </section>
-  <!-- ↑ Page not ready ↑ -->
-
-  <!-- ↓ Footer ↓ -->
   <footer>
     <div class="py-5 container">
       <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">

frontend/signup.html

@@ -36,24 +36,34 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
   </nav>
 
-  <!-- ↓ Page not ready ↓ -->
-  <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-    <div class="container text-center text-white py-5">
-      <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
-
-      <h2 class="mt-5">Page under construction. Check back later!</h2>
-
-      <div class="mt-5">
-        <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
+  <section class="d-flex justify-content-center flex-column align-items-center bg-img">
+      <div class="rounded shadow bg-translucent p-4">
+          <h2 class="mb-3 text-white">Create Account</h2>
+          <form id="signupForm">
+              <input id="firstName" placeholder="First Name" required type="text" class="mb-3 form-control shadow-sm">
+              <input id="lastName" placeholder="Last Name" required type="text" class="mb-3 form-control shadow-sm">
+              <input id="email" placeholder="Email Address" required type="email" class="mb-3 form-control shadow-sm">
+              <input id="password" placeholder="Password" required type="password" class="form-control shadow-sm">
+              <div class="d-flex justify-content-between align-items-center gap-3 mt-3">
+                  <button type="submit" class="btn btn-primary shadow-sm">Sign Up</button>
+                  <div class="text-end">
+                      <a href="./login.html">Already have an account?</a>   
+                      <br> 
+                      <a href="./dashboard.html">Try without an account</a> 
                   </div>
               </div>
+          </form>
+      </div>
   </section>
-  <!-- ↑ Page not ready ↑ -->
 
   <!-- ↓ Footer ↓ -->
   <footer>

frontend/support.html

@@ -36,6 +36,10 @@
           <li class="nav-item">
             <a class="nav-link active" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>

index.js

@@ -1,90 +0,0 @@
-// const { MongoClient, ServerApiVersion } = require('mongodb');
-// const uri = 'mongodb+srv://ugochikay_db_user:bt06DpE6QZqLHZ1x>@cluster0.aqxmamw.mongodb.net/?appName=Cluster0';
-
-//Dependancies
-const express = require("express");
-const cors = require("cors");
-
-const port = 3000;
-const app = express();
-
-//Middleware setup
-app.use(express.json());
-app.use(cors("*")); //change
-
-//API routes
-app.get("/get/example", async (req, res) =>{
-    res.send("Hello this is a Message from Backend")
-})
-
-const tasks = [
-  {
-      id: 1, 
-      completed: false,
-      title:"Wash car",
-      decription: "Make sure I have washed the car well",
-      dueDate: "14/03/2026",
-      dateCreated: new Date(Date.now()).toLocaleString()
-  },
-  {
-      id: 2,
-      completed: true,
-      title: "Audit Report",
-      description: "The Audit Report must be ready by due date",
-      duedate: "16/03/2026",
-      dateCreated: new Date(Date.now()).toLocaleString()
-  },
-  {
-      id: 3,
-      completed: true,
-      title: "Performance Report",
-      description: "The Performance Report must be ready by due date",
-      duedate: "16/03/2026",
-      dateCreated: new Date(Date.now()).toLocaleString()
-  },
-];
-
-//Get all Tasks
-
-app.get("/api/tasks", async (req, res) => {
-    try {
-        res.json(tasks);//Successful, responds to frontend with json list items
-
-    }
-    catch (error){
-        console.error(`Error: ${error}`);//Spits out the message in server console 
-        res.status(500).json({message:"Error grabbing tasks!"});//Responds with error 500 and a JSON mess
-
-    }
-})
-
-// Create a new Task and add it to the tasks array/list
-app.post("/api/tasks/todo", async (req, res) => {
-    try{
-        const {title, description, dueDate} = req.body;
-
-        const newTask = {
-            id: tasks.length + 1,
-            completed: false,
-            title: title,
-            description: description,
-            dueDate: dueDate,
-            dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
-        };
-        tasks.push(newTask);
-        res.json(newTask);
-
-    }
-    catch (error){
-        console.error(`ERROR: ${error}`);
-        res.status(500).json({message: "Error creating the task"});
-
-    }
-});
-
-
-
-//App startup
-app.listen(port, () => {
-    console.log(`To Do App listening on port ${port}`);
-});