Skip to content

Instantly share code, notes, and snippets.

@whal-e3
Created November 1, 2020 09:24
Show Gist options
  • Save whal-e3/f1667896b5d153a8cfa1ea9c9bbafe46 to your computer and use it in GitHub Desktop.
Save whal-e3/f1667896b5d153a8cfa1ea9c9bbafe46 to your computer and use it in GitHub Desktop.
JS form of Task List application
// 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';
}
});
}
@Elite-kun
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment