I am in the process of creating a simple website that functions as a task management application. Each HTTP method has one endpoint, and the methods being used are GET, POST, PUT, and DELETE. These methods need to be linked to functionalities such as adding, editing, and deleting tasks, setting due dates and reminders, and organizing tasks into categories or projects. However, I am encountering an issue where my delete and edit buttons are not functioning correctly. I will provide the HTML, Client-side JavaScript, and Server-side JavaScript code below.
<!DOCTYPE html>
<html>
<head>
<title>Task.me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<img src="logo.png" alt="Task.me Logo" id="logo">
<h1>Task.me</h1>
</header>
<main>
<form id="add-task-form">
<h2>Add Task</h2>
<div class="form-group">
<label for="new-task">Task:</label>
<input type="text" id="new-task">
</div>
<div class="form-group">
<label for="due-date">Due Date:</label>
<input type="date" id="due-date">
</div>
<div class="form-group">
<label for="category">Category:</label>
<select id="category">
<option value="">--Select a category--</option>
<option value="Personal">Personal</option>
<option value="Work">Work</option>
<option value="School">School</option>
</select>
</div>
<button>Add</button>
</form>
<section id="tasks-section">
<h2>Tasks</h2>
<ul id="task-list">
<!-- List of tasks will go here -->
</ul>
</section>
</main>
<!-- Template for displaying tasks -->
<template id="task-template">
<li class="task-item">
<form class="edit-task-form" hidden>
<div class="form-group">
<label>Task:</label>
<input type="text" class="edit-task-name">
</div>
<div class="form-group">
<label>Due Date:</label>
<input type="date" class="edit-due-date">
</div>
<div class="form-group">
<label>Category:</label>
<select class="edit-category">
<option value="">--Select a category--</option>
<option value="Personal">Personal</option>
<option value="Work">Work</option>
<option value="School">School</option>
</select>
</div>
<button>Save</button>
<button type="button" class="cancel-button">Cancel</button>
</form>
<div class="view-task">
<span class="task-name"></span>
<span class="due-date"></span>
<span class="category"></span>
<button class="edit-button">Edit</button>
<button class="delete-button">Delete</button>
</div>
</li>
</template>
<!-- Your HTML code goes here -->
<script src="script.js"></script>
</body>
</html>
JS CLIENT SIDE
// JavaScript code on the client side
// Function for retrieving tasks from the web service
async function getTasks() {
const response = await fetch("/tasks");
const tasks = await response.json();
return tasks;
}
// Remaining code for handling task operations and display on the HTML follows below
SERVER SIDE
// server/index.js
// JavaScript code on the server side
// Required modules and initial setup for the server-side code
// Remaining code for handling server-side operations follows below
The errors I am encountering when clicking the DELETE and EDIT TASK buttons are displayed in the browser's developer tools:
EDIT BUTTON CLICKED:
Task ID:NaN
Task element: -null
DELETE BUTTON CLICKED:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
RESPONSE:
{
"code": "ER_BAD_FIELD_ERROR",
"errno": 1054,
"sqlMessage": "Unknown column 'NaN' in 'where clause'",
"sqlState": "42S22",
"index": 0,
"sql": "DELETE FROM tasks WHERE id = NaN"
}
Furthermore, I am utilizing a MySQL connection for the database. DATABASE SETUP
I am having trouble identifying the root of the issue. Any assistance provided would be greatly appreciated. Thank you.