128 lines
2.9 KiB
JavaScript
Executable file
128 lines
2.9 KiB
JavaScript
Executable file
document.querySelector('#taskInput').addEventListener('keypress', function (e) {
|
|
var key = e.which || e.keyCode;
|
|
if (( key == 13 ) && ( document.querySelector('#taskInput').value.length > 0 )) // 13 is enter
|
|
addToList( this.value.trim() );
|
|
});
|
|
|
|
var taskList = [],
|
|
completedTasks = [];
|
|
|
|
if( JSON.parse( localStorage.getItem( 'taskList' )))
|
|
taskList = JSON.parse( localStorage.getItem( 'taskList' ));
|
|
else
|
|
localStorage.setItem("taskList", JSON.stringify( taskList ));
|
|
|
|
updateCompletedListArray();
|
|
updateListView();
|
|
|
|
function updateCompletedListArray() {
|
|
completedTasks = [];
|
|
|
|
taskList.forEach(function( task ) {
|
|
if( task.done )
|
|
completedTasks.push( taskList.indexOf( task ) + '' );
|
|
});
|
|
}
|
|
|
|
function addToList( task ){
|
|
if( checkDuplicate( task )) {
|
|
// animateInvalid(); // Animates input field with red outline if an invalid input is given
|
|
return;
|
|
}
|
|
|
|
taskList.push({
|
|
name: task,
|
|
done: false
|
|
});
|
|
|
|
updateListView();
|
|
|
|
localStorage.setItem('taskList', JSON.stringify( taskList ));
|
|
document.querySelector('#taskInput').value = '';
|
|
}
|
|
|
|
function updateListView() {
|
|
var ul = document.getElementById('taskList');
|
|
|
|
ul.innerHTML = '';
|
|
|
|
taskList.forEach(function( task ) {
|
|
var listItem = document.createElement('li'),
|
|
taskLabel = document.createElement('label'),
|
|
delBtn = document.createElement('span'),
|
|
checkbox = document.createElement('input');
|
|
|
|
listItem.className = 'task';
|
|
listItem.id = taskList.indexOf( task );
|
|
|
|
taskLabel.className = 'taskLabel';
|
|
taskLabel.textContent = task.name;
|
|
taskLabel.htmlFor = 'c' + taskList.indexOf( task );
|
|
|
|
delBtn.className = 'deleteTaskBtn';
|
|
delBtn.textContent = 'x';
|
|
delBtn.onclick = deleteThisTask;
|
|
|
|
checkbox.className = 'taskCheckbox'
|
|
checkbox.id = 'c' + taskList.indexOf( task );
|
|
checkbox.type = 'checkbox';
|
|
checkbox.checked = task.done;
|
|
checkbox.onclick = toggleChecked;
|
|
|
|
listItem.appendChild( checkbox );
|
|
listItem.appendChild( taskLabel );
|
|
listItem.appendChild( delBtn );
|
|
ul.appendChild( listItem );
|
|
});
|
|
}
|
|
|
|
function toggleChecked(e) {
|
|
var checkStatus = e.target.checked,
|
|
task = e.target.parentElement,
|
|
taskId = task.id,
|
|
removed = false;
|
|
|
|
taskList[taskId].done = checkStatus;
|
|
|
|
if( completedTasks.length === 0 ) {
|
|
completedTasks.push( taskId );
|
|
}
|
|
else {
|
|
completedTasks.forEach(function( index ) {
|
|
if( taskId === index ) {
|
|
completedTasks.splice( completedTasks.indexOf( index ), 1 );
|
|
removed = true;
|
|
}
|
|
});
|
|
|
|
if( !removed ) {
|
|
completedTasks.push( taskId );
|
|
completedTasks.sort();
|
|
}
|
|
}
|
|
|
|
saveLocalList();
|
|
}
|
|
|
|
function checkDuplicate( task ) {
|
|
var matchFound = false;
|
|
|
|
taskList.forEach(function( t ) {
|
|
if( t.name === task )
|
|
matchFound = true;
|
|
});
|
|
|
|
return matchFound;
|
|
}
|
|
|
|
function deleteThisTask(e) {
|
|
taskList.splice( e.target.parentElement.id, 1 );
|
|
|
|
saveLocalList();
|
|
updateCompletedListArray();
|
|
updateListView();
|
|
}
|
|
|
|
function saveLocalList() {
|
|
localStorage.setItem("taskList", JSON.stringify( taskList ));
|
|
}
|