86 lines
3.1 KiB
JavaScript
86 lines
3.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const todoList = document.getElementById('todo-list');
|
|
const addForm = document.getElementById('add-todo-form');
|
|
const taskInput = document.getElementById('task-input');
|
|
|
|
addForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
const taskText = taskInput.value.trim();
|
|
if (taskText !== '') {
|
|
fetch('add_task.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `task=${encodeURIComponent(taskText)}`
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const newTodo = document.createElement('li');
|
|
newTodo.className = 'list-group-item d-flex justify-content-between align-items-center';
|
|
newTodo.dataset.id = data.id;
|
|
newTodo.innerHTML = `
|
|
<span>${escapeHTML(taskText)}</span>
|
|
<div>
|
|
<button class="btn btn-success btn-sm done-btn"><i class="fas fa-check"></i></button>
|
|
</div>
|
|
`;
|
|
todoList.prepend(newTodo);
|
|
taskInput.value = '';
|
|
addEventListeners(newTodo);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
function addEventListeners(item) {
|
|
const doneBtn = item.querySelector('.done-btn');
|
|
if (doneBtn) {
|
|
doneBtn.addEventListener('click', function () {
|
|
updateTask(item.dataset.id, 1, item);
|
|
});
|
|
}
|
|
|
|
const undoBtn = item.querySelector('.undo-btn');
|
|
if (undoBtn) {
|
|
undoBtn.addEventListener('click', function () {
|
|
updateTask(item.dataset.id, 0, item);
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateTask(id, isDone, item) {
|
|
fetch('update_task.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `id=${id}&is_done=${isDone}`
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
item.classList.toggle('done');
|
|
const buttonDiv = item.querySelector('div');
|
|
if (isDone) {
|
|
buttonDiv.innerHTML = '<button class="btn btn-warning btn-sm undo-btn"><i class="fas fa-undo"></i></button>';
|
|
} else {
|
|
buttonDiv.innerHTML = '<button class="btn btn-success btn-sm done-btn"><i class="fas fa-check"></i></button>';
|
|
}
|
|
addEventListeners(item);
|
|
}
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.list-group-item').forEach(item => {
|
|
addEventListeners(item);
|
|
});
|
|
|
|
function escapeHTML(str) {
|
|
var p = document.createElement("p");
|
|
p.appendChild(document.createTextNode(str));
|
|
return p.innerHTML;
|
|
}
|
|
});
|