Added a simple TODO list manager
This commit is contained in:
parent
a805638920
commit
54093e75e0
|
|
@ -59,8 +59,8 @@
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="faq-item">
|
<li class="faq-item">
|
||||||
<div class="question">Why do we use it?</div>
|
<div class="question">Where can I find the TODO list for staff?</div>
|
||||||
<div class="answer">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
|
<div class="answer">You'll found it <a href="todo.html">here</a>.</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="faq-item">
|
<li class="faq-item">
|
||||||
<div class="question">Where does it come from?</div>
|
<div class="question">Where does it come from?</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<?php
|
||||||
|
// Load tasks from the flat-file database (tasks.txt)
|
||||||
|
$tasks = file_exists("tasks.txt") ? explode("\n", file_get_contents("tasks.txt")) : [];
|
||||||
|
echo json_encode($tasks);
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?php
|
||||||
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||||
|
$data = json_decode(file_get_contents("php://input"), true);
|
||||||
|
|
||||||
|
// Store tasks in a flat-file database (tasks.txt)
|
||||||
|
file_put_contents("tasks.txt", implode("\n", $data["tasks"]));
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
<!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() {
|
||||||
|
// Existing addTask function remains the same
|
||||||
|
|
||||||
|
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>
|
||||||
Loading…
Reference in New Issue