2024-01-29 00:02:02 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Todo List Manager</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
margin: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#taskInput, #assigneeInput {
|
|
|
|
|
width: 70%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#addButton {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#taskList {
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.taskItem {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.deleteButton {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: red;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<h2>Todo List Manager</h2>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<input type="text" id="taskInput" placeholder="Add a new task">
|
|
|
|
|
<input type="text" id="assigneeInput" placeholder="Assignee's name">
|
|
|
|
|
<button onclick="addTask()" id="addButton">Add Task</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ul id="taskList"></ul>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function addTask() {
|
2024-01-29 07:36:56 -05:00
|
|
|
var taskInput = document.getElementById("taskInput");
|
|
|
|
|
var assigneeInput = document.getElementById("assigneeInput");
|
|
|
|
|
var taskList = document.getElementById("taskList");
|
|
|
|
|
|
|
|
|
|
if (taskInput.value.trim() === "") {
|
|
|
|
|
alert("Please enter a task!");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var listItem = document.createElement("li");
|
|
|
|
|
listItem.className = "taskItem";
|
|
|
|
|
|
|
|
|
|
var taskText = document.createTextNode(taskInput.value + " - Assigned to: " + assigneeInput.value);
|
|
|
|
|
listItem.appendChild(taskText);
|
|
|
|
|
|
|
|
|
|
var deleteButton = document.createElement("span");
|
|
|
|
|
deleteButton.className = "deleteButton";
|
|
|
|
|
deleteButton.innerHTML = "Delete";
|
|
|
|
|
deleteButton.onclick = function() {
|
|
|
|
|
taskList.removeChild(listItem);
|
|
|
|
|
saveTasks(); // Save tasks after deleting one
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
listItem.appendChild(deleteButton);
|
|
|
|
|
|
|
|
|
|
taskList.appendChild(listItem);
|
2024-01-29 00:02:02 -05:00
|
|
|
|
2024-01-29 07:36:56 -05:00
|
|
|
taskInput.value = "";
|
|
|
|
|
assigneeInput.value = "";
|
2024-01-29 00:02:02 -05:00
|
|
|
saveTasks(); // Save tasks after adding one
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function saveTasks() {
|
|
|
|
|
var taskList = document.getElementById("taskList");
|
|
|
|
|
var tasks = [];
|
|
|
|
|
|
|
|
|
|
// Iterate through the list items and store task text in the tasks array
|
|
|
|
|
for (var i = 0; i < taskList.children.length; i++) {
|
|
|
|
|
tasks.push(taskList.children[i].innerText.trim());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Send tasks to the server for saving
|
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
|
xhr.open("POST", "save_tasks.php", true);
|
|
|
|
|
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
|
|
|
|
|
xhr.send(JSON.stringify({ tasks: tasks }));
|
|
|
|
|
|
|
|
|
|
// Reload tasks after saving to update any changes
|
|
|
|
|
loadTasks();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Load tasks from the server
|
|
|
|
|
function loadTasks() {
|
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
|
xhr.onreadystatechange = function() {
|
|
|
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
|
|
|
var tasks = JSON.parse(xhr.responseText);
|
|
|
|
|
displayTasks(tasks);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
xhr.open("GET", "load_tasks.php", true);
|
|
|
|
|
xhr.send();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Display tasks on the page
|
|
|
|
|
function displayTasks(tasks) {
|
|
|
|
|
var taskList = document.getElementById("taskList");
|
|
|
|
|
|
|
|
|
|
// Clear existing tasks
|
|
|
|
|
while (taskList.firstChild) {
|
|
|
|
|
taskList.removeChild(taskList.firstChild);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Display tasks from the array
|
|
|
|
|
tasks.forEach(function(taskText) {
|
|
|
|
|
var listItem = document.createElement("li");
|
|
|
|
|
listItem.className = "taskItem";
|
|
|
|
|
|
|
|
|
|
var taskTextNode = document.createTextNode(taskText);
|
|
|
|
|
listItem.appendChild(taskTextNode);
|
|
|
|
|
|
|
|
|
|
var deleteButton = document.createElement("span");
|
|
|
|
|
deleteButton.className = "deleteButton";
|
|
|
|
|
deleteButton.innerHTML = "Delete";
|
|
|
|
|
deleteButton.onclick = function() {
|
|
|
|
|
taskList.removeChild(listItem);
|
|
|
|
|
saveTasks(); // Save tasks after deleting one
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
listItem.appendChild(deleteButton);
|
|
|
|
|
|
|
|
|
|
taskList.appendChild(listItem);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Auto-refresh every 5 seconds (adjust as needed)
|
|
|
|
|
setInterval(loadTasks, 5000);
|
|
|
|
|
|
|
|
|
|
// Initial load of tasks when the page is loaded
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
loadTasks();
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
