stuff

update page title to use app name
add task delete modal and alert
2026-05-07 16:40:27 +08:00 · 2026-05-05 17:22:37 +08:00 · 2026-05-05 17:00:42 +08:00
10 changed files with 121 additions and 73 deletions
--- a/Documentation.docx
+++ b/Documentation.docx
--- a/Documentation.pdf
+++ b/Documentation.pdf
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Dashboard</title>
+  <title>BusketLisk &#x2022; Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
  <link rel="stylesheet" href="./css/styles.css" />
@@ -92,7 +92,8 @@
            <div class="d-flex gap-2 flex-wrap mb-3">
              <button type="button" class="btn btn-outline-light quick-date-btn" data-quick="today">Today</button>
              <button type="button" class="btn btn-outline-light quick-date-btn" data-quick="tomorrow">Tomorrow</button>
-              <button type="button" class="btn btn-outline-light quick-date-btn" data-quick="nextWeek">Next week</button>
+              <button type="button" class="btn btn-outline-light quick-date-btn" data-quick="nextWeek">Next
                week</button>
            </div>
            <button type="submit" class="btn btn-primary shadow-sm px-5">
              Create Task
@@ -156,6 +157,28 @@
      </div>
    </div>
  </footer>
  <!-- Toast-style alert container, populated by showAlert() in api.js -->
  <div id="alertContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1080;"></div>
  <!-- Delete confirmation modal -->
  <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteTaskModalLabel" 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="deleteTaskModalLabel">Delete Task</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="mb-0">Are you sure you want to delete this task? This action cannot be undone.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button id="confirmDeleteButton" type="button" class="btn btn-danger">Delete</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
@@ -167,7 +190,8 @@
        <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>
+            <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>
--- a/frontend/features.html
+++ b/frontend/features.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Features</title>
+  <title>BusketLisk &#x2022; Features</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
  <link rel="stylesheet" href="./css/styles.css" />
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Home</title>
+  <title>BusketLisk &#x2022; Home</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
  <link rel="stylesheet" href="./css/styles.css" />
@@ -50,7 +50,8 @@
    <section class="d-flex justify-content-center flex-column align-items-center bg-img text-center px-3">
      <h1 class="display-2 text-white">Stay organised with BucketLisk</h1>
      <p class="lead text-white-50 col-12 col-md-8 col-lg-6 mt-3">
-        The simple, no-nonsense to-do app that keeps your team on track, from morning stand-up to end-of-quarter shipping.
+        The simple, no-nonsense to-do app that keeps your team on track, from morning stand-up to end-of-quarter
        shipping.
      </p>
      <div class="d-flex justify-content-center align-items-center gap-3 mt-4 flex-wrap">
        <a href="./dashboard.html" class="btn btn-primary btn-lg px-5">Try it for free</a>
@@ -102,9 +103,11 @@
              When you're done, tick it off and move it to the completed column to keep the momentum going.
            </p>
            <ul class="list-unstyled">
-              <li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">Sort by due date or created date</li>
+              <li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">Sort by due date or created
                date</li>
              <li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">Edit any task inline</li>
-              <li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">Works on desktop, tablet and mobile</li>
+              <li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">Works on desktop, tablet and
                mobile</li>
            </ul>
            <a href="./dashboard.html" class="btn btn-primary px-4 mt-3">Open the dashboard</a>
          </div>
@@ -160,7 +163,8 @@
      <div class="container py-5">
        <div class="rounded shadow bg-translucent p-4 p-lg-5 col-12 col-lg-8 mx-auto text-white text-center">
          <p class="fs-4 fst-italic mb-4">
-            "We switched our whole team over in a week. Everyone actually uses it, and that's the first time I've ever said that about a task tool."
+            "We switched our whole team over in a week. Everyone actually uses it, and that's the first time I've ever
            said that about a task tool."
          </p>
          <p class="mb-0"><strong>Jamie L.</strong></p>
          <p class="text-white-50 mb-0">Operations Lead, Greenfield Studio</p>
--- a/frontend/js/api.js
+++ b/frontend/js/api.js
@@ -42,6 +42,20 @@ function resetForm() {
  taskForm.reset();
 }
 function showAlert(message, variant = 'success') {
  const container = document.getElementById('alertContainer');
  if (!container) return;
  const alert = document.createElement('div');
  alert.className = `alert alert-${variant} alert-dismissible fade show shadow-sm`;
  alert.role = 'alert';
  alert.innerHTML = `
    ${message}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  `;
  container.appendChild(alert);
  setTimeout(() => bootstrap.Alert.getOrCreateInstance(alert).close(), 3000);
 }
 const sortButton = document.getElementById("sortSelect");
 window.addEventListener("DOMContentLoaded", () => {
  sortButton.value = "default";
@@ -93,7 +107,11 @@ taskForm.addEventListener("submit", (event) => {
    else if (event.target.classList.contains("delete")) {
      const taskId = event.target.getAttribute("data-id");
-      deleteTask(taskId);
+      const confirmButton = document.getElementById('confirmDeleteButton');
      confirmButton.addEventListener('click', async () => {
        await deleteTask(taskId);
        bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
      }, { once: true });
    }
    else if (event.target.classList.contains('edit')) {
      const task = {
@@ -148,7 +166,7 @@ function formatTask(task) {
  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" data-bs-toggle="modal" data-bs-target="#deleteModal" aria-label="Close"></button>
    </div>
    <p class="${done}">${task.description}</p>
    <p class="${done}"><strong>Due: </strong>${new Date(task.dueDate).toLocaleDateString()}</p>
@@ -328,6 +346,7 @@ async function deleteTask(taskId) {
    const data = await response.json();
    console.log({ message: "Deleted Task:", Task: data });
    displayTasks();
    showAlert('Task deleted successfully.');
  } catch (error) {
    console.error("Error:", error);
--- a/frontend/login.html
+++ b/frontend/login.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Login</title>
+  <title>BusketLisk &#x2022; Login</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
  <link rel="stylesheet" href="./css/styles.css" />
--- a/frontend/pricing.html
+++ b/frontend/pricing.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Pricing</title>
+  <title>BusketLisk &#x2022; Pricing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
  <link rel="stylesheet" href="./css/styles.css" />
--- a/frontend/signup.html
+++ b/frontend/signup.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Signup</title>
+  <title>BusketLisk &#x2022; Signup</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
  <link rel="stylesheet" href="./css/styles.css" />
--- a/frontend/support.html
+++ b/frontend/support.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Support</title>
+  <title>BusketLisk &#x2022; Support</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
  <link rel="stylesheet" href="./css/styles.css" />
@@ -69,7 +69,8 @@
            <form id="contactForm">
              <input name="name" type="text" class="form-control mb-3 shadow-sm" placeholder="Your name" required>
              <input name="email" type="email" class="form-control mb-3 shadow-sm" placeholder="Your email" required>
-              <textarea name="message" rows="5" class="form-control mb-3 shadow-sm" placeholder="How can we help?" required></textarea>
+              <textarea name="message" rows="5" class="form-control mb-3 shadow-sm" placeholder="How can we help?"
                required></textarea>
              <button type="submit" class="btn btn-primary px-4">Send message</button>
            </form>
            <hr class="border-light my-4">
Author	SHA1	Message	Date
Tim Basten	abd3458606	stuff	2026-05-07 16:40:27 +08:00
Tim Basten	8841b571c9	update page title to use app name	2026-05-05 17:22:37 +08:00
Tim Basten	cf2df504b1	add task delete modal and alert	2026-05-05 17:00:42 +08:00