var data = (localStorage.getItem('todoList')) ? JSON.parse(localStorage.getItem('todoList')):{
todo: [],
completed: []
};
// Remove and complete icons in SVG format
var removeSVG = '';
var completeSVG = '';
renderTodoList();
// User clicked on the add button
// If there is any text inside the item field, add that text to the todo list
document.getElementById('add').addEventListener('click', function() {
var value = document.getElementById('item').value;
if (value) {
addItem(value);
}
});
document.getElementById('item').addEventListener('keydown', function (e) {
var value = this.value;
if ((e.code === 'Enter' || e.code === 'NumpadEnter') && value) {
addItem(value);
}
});
function addItem (value) {
addItemToDOM(value);
document.getElementById('item').value = '';
data.todo.push(value);
dataObjectUpdated();
}
function renderTodoList() {
if (!data.todo.length && !data.completed.length) return;
for (var i = 0; i < data.todo.length; i++) {
var value = data.todo[i];
addItemToDOM(value);
}
for (var j = 0; j < data.completed.length; j++) {
var value = data.completed[j];
addItemToDOM(value, true);
}
}
function dataObjectUpdated() {
localStorage.setItem('todoList', JSON.stringify(data));
}
function removeItem() {
var item = this.parentNode.parentNode;
var parent = item.parentNode;
var id = parent.id;
var value = item.innerText;
if (id === 'todo') {
data.todo.splice(data.todo.indexOf(value), 1);
} else {
data.completed.splice(data.completed.indexOf(value), 1);
}
dataObjectUpdated();
parent.removeChild(item);
}
function completeItem() {
var item = this.parentNode.parentNode;
var parent = item.parentNode;
var id = parent.id;
var value = item.innerText;
if (id === 'todo') {
data.todo.splice(data.todo.indexOf(value), 1);
data.completed.push(value);
} else {
data.completed.splice(data.completed.indexOf(value), 1);
data.todo.push(value);
}
dataObjectUpdated();
// Check if the item should be added to the completed list or to re-added to the todo list
var target = (id === 'todo') ? document.getElementById('completed'):document.getElementById('todo');
parent.removeChild(item);
target.insertBefore(item, target.childNodes[0]);
}
// Adds a new item to the todo list
function addItemToDOM(text, completed) {
var list = (completed) ? document.getElementById('completed'):document.getElementById('todo');
var item = document.createElement('li');
item.innerText = text;
var buttons = document.createElement('div');
buttons.classList.add('buttons');
var remove = document.createElement('button');
remove.classList.add('remove');
remove.innerHTML = removeSVG;
// Add click event for removing the item
remove.addEventListener('click', removeItem);
var complete = document.createElement('button');
complete.classList.add('complete');
complete.innerHTML = completeSVG;
// Add click event for completing the item
complete.addEventListener('click', completeItem);
buttons.appendChild(remove);
buttons.appendChild(complete);
item.appendChild(buttons);
list.insertBefore(item, list.childNodes[0]);
}