Added a simple TODO list manager
This commit is contained in:
parent
a805638920
commit
54093e75e0
|
|
@ -59,8 +59,8 @@
|
|||
</div>
|
||||
</li>
|
||||
<li class="faq-item">
|
||||
<div class="question">Why do we use it?</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="question">Where can I find the TODO list for staff?</div>
|
||||
<div class="answer">You'll found it <a href="todo.html">here</a>.</div>
|
||||
</li>
|
||||
<li class="faq-item">
|
||||
<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