Github Link:
https://github.com/naseer909/LAB-ASSIGNMENT-JQUERY-API-CRUD
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task Manager</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Task Manager</h1>
<form id="taskForm">
<input type="text" id="taskInput" placeholder="Enter task...">
<button type="submit">Add Task</button>
</form>
<ul id="taskList"></ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Styles.css
/* Styles for Task Manager */
h1 {
text-align: center;
}
form {
margin-bottom: 20px;
}
input[type="text"] {
width: 70%;
padding: 8px;
}
button {
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 8px;
}
.deleteBtn {
background-color: #dc3545;
color: #fff;
border: none;
cursor: pointer;
padding: 4px 8px;
margin-left: 10px;
}
.deleteBtn:hover {
background-color: #c82333;
}
App.js
$(document).ready(function(){
// Function to fetch tasks from the server
function fetchTasks() {
$.ajax({
url: 'http://your-api-url/tasks',
method: 'GET',
success: function(tasks) {
displayTasks(tasks);
}
});
}
// Function to display tasks on the page
function displayTasks(tasks) {
$('#taskList').empty();
tasks.forEach(function(task) {
$('#taskList').append(`<li>${task.name} <button
class="deleteBtn" data-id="${task.id}">Delete</button></li>`);
});
}
// Initial fetch of tasks when the page loads
fetchTasks();
// Form submission to add a new task
$('#taskForm').submit(function(event){
event.preventDefault();
var taskName = $('#taskInput').val();
$.ajax({
url: 'http://your-api-url/tasks',
method: 'POST',
data: { name: taskName },
success: function(){
fetchTasks(); // Refresh task list after adding
$('#taskInput').val(''); // Clear input field
}
});
});
// Event delegation for delete buttons
$('#taskList').on('click', '.deleteBtn', function(){
var taskId = $(this).data('id');
$.ajax({
url: `http://your-api-url/tasks/${taskId}`,
method: 'DELETE',
success: function(){
fetchTasks(); // Refresh task list after deletion
}
});
});
});
Screenshot
