timmybee/diploma_todoapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: timmybee:584ef9cbb7d0f5223c5d6bf543987b44981b079a
Branches Tags
timmybee:master
...
compare: timmybee:master
Branches Tags
timmybee:master

3 Commits
584ef9cbb7 ... master

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
10 changed files with 121 additions and 73 deletions
Expand all files Collapse all files

BIN
Documentation.docx Normal file
View File

Binary file not shown.

BIN
Documentation.pdf Normal file
View File

Binary file not shown.

66
frontend/dashboard.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" /> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
<link rel="stylesheet" href="./css/styles.css" /> <link rel="stylesheet" href="./css/styles.css" />
@@ -92,7 +92,8 @@
<div class="d-flex gap-2 flex-wrap mb-3"> <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="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="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> </div>
<button type="submit" class="btn btn-primary shadow-sm px-5"> <button type="submit" class="btn btn-primary shadow-sm px-5">
Create Task Create Task
@@ -156,26 +157,49 @@
</div> </div>
</div> </div>
</footer> </footer>
<!-- Modal --> <!-- Toast-style alert container, populated by showAlert() in api.js -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true"> <div id="alertContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1080;"></div>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <!-- Delete confirmation modal -->
<div class="modal-header"> <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteTaskModalLabel" aria-hidden="true">
<h1 class="modal-title fs-5" id="editTaskModalLabel">Edit Task</h1> <div class="modal-dialog modal-dialog-centered">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-content">
</div> <div class="modal-header">
<div class="modal-body"> <h1 class="modal-title fs-5" id="deleteTaskModalLabel">Delete Task</h1>
<form id="editTaskForm"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<input id="editTaskName" placeholder="Task Name" class="mb-2 form-control shadow-sm" type="text"> </div>
<textarea id="editTaskDescription" placeholder="Task Description" rows="7" class="form-control mb-2 shadow-sm"></textarea> <div class="modal-body">
<input id="editDueDate" placeholder="Task Name" class="mb-3 form-control shadow-sm" type="date"> <p class="mb-0">Are you sure you want to delete this task? This action cannot be undone.</p>
</form> </div>
</div> <div class="modal-footer">
<div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button id="saveButton" type="submit" class="btn btn-primary">Save changes</button> <button id="confirmDeleteButton" type="button" class="btn btn-danger">Delete</button>
</div> </div>
</div>
</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">
<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> </div>
<script src="./js/api.js"></script> <script src="./js/api.js"></script>

2
frontend/features.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" /> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
<link rel="stylesheet" href="./css/styles.css" /> <link rel="stylesheet" href="./css/styles.css" />

14
frontend/index.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" /> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
<link rel="stylesheet" href="./css/styles.css" /> <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"> <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> <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"> <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> </p>
<div class="d-flex justify-content-center align-items-center gap-3 mt-4 flex-wrap"> <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> <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. When you're done, tick it off and move it to the completed column to keep the momentum going.
</p> </p>
<ul class="list-unstyled"> <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">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> </ul>
<a href="./dashboard.html" class="btn btn-primary px-4 mt-3">Open the dashboard</a> <a href="./dashboard.html" class="btn btn-primary px-4 mt-3">Open the dashboard</a>
</div> </div>
@@ -160,7 +163,8 @@
<div class="container py-5"> <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"> <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"> <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>
<p class="mb-0"><strong>Jamie L.</strong></p> <p class="mb-0"><strong>Jamie L.</strong></p>
<p class="text-white-50 mb-0">Operations Lead, Greenfield Studio</p> <p class="text-white-50 mb-0">Operations Lead, Greenfield Studio</p>

23
frontend/js/api.js
View File

@@ -42,6 +42,20 @@ function resetForm() {
taskForm.reset(); 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"); const sortButton = document.getElementById("sortSelect");
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
sortButton.value = "default"; sortButton.value = "default";
@@ -93,7 +107,11 @@ taskForm.addEventListener("submit", (event) => {
else if (event.target.classList.contains("delete")) { else if (event.target.classList.contains("delete")) {
const taskId = event.target.getAttribute("data-id"); 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')) { else if (event.target.classList.contains('edit')) {
const task = { const task = {
@@ -148,7 +166,7 @@ function formatTask(task) {
li.innerHTML = ` li.innerHTML = `
<div class="d-flex justify-content-between align-items-start"> <div class="d-flex justify-content-between align-items-start">
<h4 class="${done} col-11">${task.title}</h4> <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> </div>
<p class="${done}">${task.description}</p> <p class="${done}">${task.description}</p>
<p class="${done}"><strong>Due: </strong>${new Date(task.dueDate).toLocaleDateString()}</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(); const data = await response.json();
console.log({ message: "Deleted Task:", Task: data }); console.log({ message: "Deleted Task:", Task: data });
displayTasks(); displayTasks();
showAlert('Task deleted successfully.');
} catch (error) { } catch (error) {
console.error("Error:", error); console.error("Error:", error);

32
frontend/login.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" /> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
<link rel="stylesheet" href="./css/styles.css" /> <link rel="stylesheet" href="./css/styles.css" />
@@ -46,21 +46,21 @@
</nav> </nav>
<section class="d-flex justify-content-center flex-column align-items-center bg-img"> <section class="d-flex justify-content-center flex-column align-items-center bg-img">
<div class="rounded shadow bg-translucent p-4"> <div class="rounded shadow bg-translucent p-4">
<h2 class="mb-3 text-white">Login</h2> <h2 class="mb-3 text-white">Login</h2>
<form id="loginForm"> <form id="loginForm">
<input id="email" placeholder="Email Address" required type="email" 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"> <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"> <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> <button type="submit" class="btn btn-primary shadow-sm">Login</button>
<div class="text-end"> <div class="text-end">
<a href="./signup.html">Don't have an account yet?</a> <a href="./signup.html">Don't have an account yet?</a>
<br> <br>
<a href="#">Forgot Password?</a> <a href="#">Forgot Password?</a>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</section> </section>
<!-- ↓ Footer ↓ --> <!-- ↓ Footer ↓ -->

2
frontend/pricing.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" /> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
<link rel="stylesheet" href="./css/styles.css" /> <link rel="stylesheet" href="./css/styles.css" />

36
frontend/signup.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" /> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
<link rel="stylesheet" href="./css/styles.css" /> <link rel="stylesheet" href="./css/styles.css" />
@@ -46,23 +46,23 @@
</nav> </nav>
<section class="d-flex justify-content-center flex-column align-items-center bg-img"> <section class="d-flex justify-content-center flex-column align-items-center bg-img">
<div class="rounded shadow bg-translucent p-4"> <div class="rounded shadow bg-translucent p-4">
<h2 class="mb-3 text-white">Create Account</h2> <h2 class="mb-3 text-white">Create Account</h2>
<form id="signupForm"> <form id="signupForm">
<input id="firstName" placeholder="First Name" required type="text" class="mb-3 form-control shadow-sm"> <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="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="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"> <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"> <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> <button type="submit" class="btn btn-primary shadow-sm">Sign Up</button>
<div class="text-end"> <div class="text-end">
<a href="./login.html">Already have an account?</a> <a href="./login.html">Already have an account?</a>
<br> <br>
<a href="./dashboard.html">Try without an account</a> <a href="./dashboard.html">Try without an account</a>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</section> </section>
<!-- ↓ Footer ↓ --> <!-- ↓ Footer ↓ -->

5
frontend/support.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" /> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
<link rel="stylesheet" href="./css/styles.css" /> <link rel="stylesheet" href="./css/styles.css" />
@@ -69,7 +69,8 @@
<form id="contactForm"> <form id="contactForm">
<input name="name" type="text" class="form-control mb-3 shadow-sm" placeholder="Your name" required> <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> <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> <button type="submit" class="btn btn-primary px-4">Send message</button>
</form> </form>
<hr class="border-light my-4"> <hr class="border-light my-4">