A Single Page Task management application
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
#taskInput, #taskCode, #taskDeadline, #devName {
width: 200px;
height: 20px;
margin: 5px;
}
#taskList {
margin-top: 10px;
}
.task {
margin: 5px 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Task Manager</h1>
<input type="text" id="taskInput" placeholder="New task">
<input type="text" id="taskCode" placeholder="Task code">
<input type="date" id="taskDeadline">
<input type="text" id="devName" placeholder="Assigned developer">
<button id="addTaskButton">Add Task</button>
<div id="taskList"></div>
<script>
$(document).ready(function() {
// Load tasks from local storage
if (localStorage.getItem('tasks')) {
$('#taskList').html(localStorage.getItem('tasks'));
}
// Add new task
$('#addTaskButton').click(function() {
var task = $('#taskInput').val();
var code = $('#taskCode').val();
var deadline = $('#taskDeadline').val();
var dev = $('#devName').val();
if (task !== '' && code !== '' && deadline !== '' && dev !== '') {
var taskData = '<div class="task">' + task + ' (Code: ' + code + ', Deadline: ' + deadline + ', Developer: ' + dev + ') <button class="editTaskButton">Edit</button> <button class="deleteTaskButton">Delete</button></div>';
if ($('#taskList').html().indexOf(taskData) === -1) { // Check for duplicates
$('#taskList').append(taskData);
$('#taskInput').val('');
$('#taskCode').val('');
$('#taskDeadline').val('');
$('#devName').val('');
localStorage.setItem('tasks', $('#taskList').html());
} else {
alert('Duplicate task!');
}
} else {
alert('All fields are mandatory!');
}
});
// Edit task on click
$(document).on('click', '.editTaskButton', function() {
var taskData = $(this).parent().text().split(' (Code: ');
var task = taskData[0];
var code = taskData[1].split(', Deadline: ')[0];
var deadline = taskData[1].split(', Deadline: ')[1].split(', Developer: ')[0];
var dev = taskData[1].split(', Developer: ')[1].split(') Edit Delete')[0];
$('#taskInput').val(task);
$('#taskCode').val(code);
$('#taskDeadline').val(deadline);
$('#devName').val(dev);
$(this).parent().remove();
localStorage.setItem('tasks', $('#taskList').html());
});
// Remove task on click
$(document).on('click', '.deleteTaskButton', function() {
$(this).parent().remove();
localStorage.setItem('tasks', $('#taskList').html());
});
});
</script>
</body>
</html>
This application allows you to add tasks to a list by filling in the input fields and clicking the “Add Task” button. Each task requires a task name, a unique task code, a deadline, and the name of the assigned developer. The tasks are stored in the browser’s local storage, so they persist even after the page is refreshed. To edit a task, click the “Edit” button next to it. The task data will be loaded into the input fields for you to modify. Click the “Add Task” button to save the changes. To remove a task, click the “Delete” button next to it. The task will be removed from the list and the change will be reflected in the local storage. Please note that this is a very basic implementation and does not include features like task prioritization or sorting. It’s a good starting point for a more complex task management application. Happy coding!
Pretty portion of content. I just stumbled upon your website and in accession capital to claim that I get actually loved account your blog posts. Any way I will be subscribing to your feeds and even I fulfillment you get right of entry to persistently rapidly.
Simply a smiling visitant here to share the love (:, btw outstanding pattern.