109 lines
2.5 KiB
JavaScript
109 lines
2.5 KiB
JavaScript
|
|
|
|
|
|
|
|
|
|
// to do list
|
|
var todos = [{
|
|
text: "take out the trash",
|
|
done: false,
|
|
id: 0
|
|
}];
|
|
var currentTodo = {
|
|
text: "",
|
|
done: false,
|
|
id: 0
|
|
}
|
|
document.getElementById("todo-input").oninput = function (e) {
|
|
currentTodo.text = e.target.value;
|
|
};
|
|
/*
|
|
//jQuery Version
|
|
$('#todo-input').on('input',function(e){
|
|
currentTodo.text = e.target.value;
|
|
});
|
|
*/
|
|
function DrawTodo(todo) {
|
|
var newTodoHTML = `
|
|
<div class="pb-3 todo-item" todo-id="${todo.id}">
|
|
<div class="input-group">
|
|
|
|
<div class="input-group-text">
|
|
<input type="checkbox" onchange="TodoChecked(${todo.id})" aria-label="Checkbox for following text input" ${todo.done&& "checked"}>
|
|
</div>
|
|
|
|
<input type="text" readonly class="form-control ${todo.done&&" todo-done "} " aria-label="Text input with checkbox" value="${todo.text}">
|
|
|
|
<button todo-id="${todo.id}" class="btn btn-outline-secondary bg-danger text-white" type="button" onclick="DeleteTodo(this);" id="button-addon2 ">X</button>
|
|
|
|
</div>
|
|
</div>
|
|
`;
|
|
var dummy = document.createElement("DIV");
|
|
dummy.innerHTML = newTodoHTML;
|
|
document.getElementById("todo-container").appendChild(dummy.children[0]);
|
|
/*
|
|
//jQuery version
|
|
var newTodo = $.parseHTML(newTodoHTML);
|
|
$("#todo-container").append(newTodo);
|
|
*/
|
|
}
|
|
|
|
function RenderAllTodos() {
|
|
var container = document.getElementById("todo-container");
|
|
while (container.firstChild) {
|
|
container.removeChild(container.firstChild);
|
|
}
|
|
/*
|
|
//jQuery version
|
|
$("todo-container").empty();
|
|
*/
|
|
for (var i = 0; i < todos.length; i++) {
|
|
DrawTodo(todos[i]);
|
|
}
|
|
}
|
|
RenderAllTodos();
|
|
|
|
function DeleteTodo(button) {
|
|
var deleteID = parseInt(button.getAttribute("todo-id"));
|
|
/*
|
|
//jQuery version
|
|
var deleteID = parseInt($(button).attr("todo-id"));
|
|
*/
|
|
for (let i = 0; i < todos.length; i++) {
|
|
if (todos[i].id === deleteID) {
|
|
todos.splice(i, 1);
|
|
RenderAllTodos();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function TodoChecked(id) {
|
|
todos[id].done = !todos[id].done;
|
|
RenderAllTodos();
|
|
}
|
|
|
|
function CreateTodo() {
|
|
newtodo = {
|
|
text: currentTodo.text,
|
|
done: false,
|
|
id: todos.length
|
|
}
|
|
todos.push(newtodo);
|
|
RenderAllTodos();
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|