Created
November 1, 2020 09:24
-
-
Save whal-e3/f1667896b5d153a8cfa1ea9c9bbafe46 to your computer and use it in GitHub Desktop.
JS form of Task List application
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Define UI variables | |
const form = document.querySelector('#task-form'); | |
const taskList = document.querySelector('.collection'); | |
const clearBtn = document.querySelector('.clear-tasks'); | |
const filter = document.querySelector('#filter'); | |
const taskInput = document.querySelector('#task'); | |
// Load all event listeners | |
loadEventListeners(); | |
function loadEventListeners() { | |
// DOM load event | |
document.addEventListener('DOMContentLoaded', getTasks); | |
// Add task event | |
form.addEventListener('submit', addTask); | |
// Remove task event | |
taskList.addEventListener('click', removeTask); | |
// Clear task events | |
clearBtn.addEventListener('click', clearTasks); | |
// Filter task event | |
filter.addEventListener('keyup', filterTasks); | |
} | |
// Get Tasks from local storage | |
function getTasks() { | |
let tasks; | |
if (localStorage.getItem('tasks') === null) { | |
tasks = []; | |
} else { | |
tasks = JSON.parse(localStorage.getItem('tasks')); | |
} | |
tasks.forEach(function (task) { | |
// Create li element + add class | |
const li = document.createElement('li'); | |
li.className = 'collection-item'; | |
// Create text node and append to li | |
li.appendChild(document.createTextNode(task)); | |
// Create new link element + add class | |
const link = document.createElement('a'); | |
link.className = 'delete-item secondary-content'; | |
// Add icon html | |
link.innerHTML = '<i class="fa fa-remove"></i>'; | |
// Append the link to li | |
li.appendChild(link); | |
// Append li to ul | |
taskList.appendChild(li); | |
}); | |
} | |
// Add Task | |
function addTask(e) { | |
if (taskInput.value === '') { | |
alert('Add a task'); | |
return; | |
} | |
// Create li element + add class | |
const li = document.createElement('li'); | |
li.className = 'collection-item'; | |
// Create text node and append to li | |
li.appendChild(document.createTextNode(taskInput.value)); | |
// Create new link element + add class | |
const link = document.createElement('a'); | |
link.className = 'delete-item secondary-content'; | |
// Add icon html | |
link.innerHTML = '<i class="fa fa-remove"></i>'; | |
// Append the link to li | |
li.appendChild(link); | |
// Append li to ul | |
taskList.appendChild(li); | |
// Store task in Local Storage | |
storeTaskInLocalStorage(taskInput.value); | |
// Clear input | |
taskInput.value = ''; | |
e.preventDefault(); | |
} | |
// Store Task | |
function storeTaskInLocalStorage(task) { | |
let tasks; | |
if (localStorage.getItem('tasks') === null) { | |
tasks = []; | |
} else { | |
tasks = JSON.parse(localStorage.getItem('tasks')); | |
} | |
tasks.push(task); | |
localStorage.setItem('tasks', JSON.stringify(tasks)); | |
} | |
// Remove Task | |
function removeTask(e) { | |
if (e.target.parentElement.classList.contains('delete-item')) { | |
if (confirm('Are u sure?')) { | |
e.target.parentElement.parentElement.remove(); | |
// Remove from Local Storage | |
removeTaskFromLocalStorage(e.target.parentElement.parentElement); | |
} | |
} | |
} | |
// Remove from Local Storage | |
function removeTaskFromLocalStorage(taskItem) { | |
let tasks; | |
if (localStorage.getItem('tasks') === null) { | |
tasks = []; | |
} else { | |
tasks = JSON.parse(localStorage.getItem('tasks')); | |
} | |
tasks.forEach(function (task, index) { | |
if (taskItem.textContent === task) { | |
tasks.splice(index, 1); | |
} | |
}); | |
localStorage.setItem('tasks', JSON.stringify(tasks)); | |
} | |
// Clear Task | |
function clearTasks(e) { | |
// taskList.innerHTML = ''; | |
// Recommended | |
while (taskList.firstChild) { | |
taskList.removeChild(taskList.firstChild); | |
} | |
// https://jsperf.com/innerhtml-vs-removechild | |
// Clear from Local storage | |
clearTasksFromLocalStorage(); | |
} | |
// Clear from Local storage | |
function clearTasksFromLocalStorage() { | |
localStorage.clear(); | |
} | |
function filterTasks(e) { | |
const text = e.target.value.toLowerCase(); | |
document.querySelectorAll('.collection-item').forEach(function (task) { | |
const item = task.firstChild.textContent; | |
if (item.toLowerCase().indexOf(text) != -1) { | |
task.style.display = 'block'; | |
} else { | |
task.style.display = 'none'; | |
} | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
is this particular project very popular?
or you learnt from brad traversy
and is
function storeTaskinLocalStorage(task){
};
a particular command because when I tried improvising by changing the name of the function it did not work