Простой список дел с JavaScript, отличный способ освежить свои навыки.

Вы должны понимать следующие вещи:

  1. Управление DOM с помощью JavaScript
  2. Начальная загрузка
  3. Веб-хранилище HTML 5 (местное хранилище здесь, для сохранения данных)
  4. IIFE для регистрации ваших слушателей
  5. Выявление модульного шаблона, если вы планируете разбивать функции на разные модули

Если вам тоже это кажется простым, попробуйте сделать это за 2 часа, лично я сделал это за 2 часа.

Задачи, которые необходимо выполнить

  1. Добавить новую задачу
  2. Удалить добавленную задачу
  3. Удалить полный список добавленных задач
  4. Обновлять сохраненные данные в локальном хранилище при удалении задачи
  5. Обновлять сохраненные данные в локальном хранилище после очистки всех задач
  6. Проверки по мере необходимости

Остановитесь здесь и сначала попробуйте самостоятельно выполнить вышеперечисленные 6 задач, в противном случае у вас есть ссылка на полный код по указанной ниже основной ссылке GitHub

GitHub Gist Link: https://gist.github.com/bhuwanpandey7/9adf0ea4949afbf7eb2be7fc2c07270e

Вот пример снимка

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="todo.css">
<title>Document</title>
</head>
<body>
<div class="container mt-2" style="margin-left: 30% !important;">
<div class="row">
<div class="center col-12">
<div class="card w-50 justify-content-right">
<div class="card-header">
<h4 class="h4">New Task</h2>
<input type="text" id='newTask' name='newTask' class="form-control border-top-0 border-left-0 border-right-0" placeholder="Enter task here...">
<button type="button" class="btnAddTask btn btn-sm btn-success float-right mt-2">
<i class="fa fa-plus" aria-hidden="true"></i> Add Task
</button>
</div>
<div class="card-body">
<h3 class="h3">Task List</h3>
<ul class="addedTasks" id="addedTasks">
<hr>
</ul>
</div>
<div class="card-footer">
<button type="button" class="btnClearTasks btn btn-sm btn-danger float-right">
<i class="fa fa-trash-o" aria-hidden="true"></i> Clear Tasks
</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="dataPersistance.js"></script>
<script src="constants.js"></script>
<script src="todo.js"></script>
</html>

JS — разбивка JS в разных файлах приведена в основной ссылке на GitHub, приведенной вверху

const NoTaskAdded = "No tasks added to the list";
let addedTasksList = [];
function setDataToLocalStorage(key, data) {
localStorage.setItem(key, stringify(data));
}
function getLocalStorageData(key) {
return JSON.parse(localStorage.getItem(key));
}
function clearLocalStorageData(key) {
localStorage.clear();
}
function removeLocalStorageItem(key) {
localStorage.removeItem(key)
}
function updateLocalStorageData(key, data) {
if (key)
localStorage.removeItem(key);
localStorage.setItem(key, stringify(data));
}
function stringify(data) {
return JSON.stringify(data);
}
function parse(data) {
return JSON.parse(data);
}
(() => {
let firstLoad = true;
// new task input box
const newTaskInput = document.querySelector('#newTask');
// add new task button
const btnAddTask = document.querySelector('.btnAddTask');
// addedTasks list box
const addedTasks = document.querySelector('.addedTasks');
// addedTasks.innerHTML = NoTaskAdded;
// btn Clear Tasks
const btnClearTasks = document.querySelector('.btnClearTasks');
// event listener to add new task
btnAddTask.addEventListener('click', addTask);
// add event listener to clear all tasks
btnClearTasks.addEventListener('click', clearTasks);
// add event listener to remove individual task
addedTasks.addEventListener('click', removeTask);
// load saved tasks event listener
document.addEventListener('DOMContentLoaded', loadTasks);
// load tasks
function loadTasks() {
const data = getLocalStorageData('addedTasks');
if (data && data.length) {
data.forEach(element => {
createNewTaskItem(element);
});
}
}
// clear individual task event listener
function removeTask(event) {
if (event.target.parentElement.classList.contains('deleteTask')) {
if (confirm('Are you sure you want ot remove this task?')) {
const taskList = getLocalStorageData('addedTasks');
const index = taskList.indexOf(event.target.parentElement.parentElement.textContent.trim());
taskList.splice(index, 1);
setDataToLocalStorage('addedTasks', taskList);
event.target.parentElement.parentElement.remove();
} else {
return;
}
}
}
// clear all tasks event listener
function clearTasks() {
while (addedTasks.firstChild) {
addedTasks.firstChild.remove();
}
addedTasks.className = 'noTask';
}
// create individual li for task list
function createNewTaskItem(newTaskInput) {
const liElem = document.createElement('li');
liElem.classList.add('ml-4');
liElem.appendChild(document.createTextNode(newTaskInput));
const delLink = document.createElement('a');
delLink.classList.add('deleteTask');
delLink.innerHTML = '<i class="fa fa-trash-o float-right ml-8 text-danger"> </i>';
liElem.appendChild(delLink);
const hr = document.createElement('hr');
liElem.appendChild(hr);
addedTasks.appendChild(liElem);
}
// add task event listener
function addTask() {
if (addedTasks.children.length === 1 && firstLoad) {
addedTasks.firstChild.remove();
firstLoad = false;
}
if (newTaskInput.value) {
createNewTaskItem(newTaskInput.value);
if (getLocalStorageData('addedTasks')) {
addedTasksList = getLocalStorageData('addedTasks');
addedTasksList.push(newTaskInput.value);
updateLocalStorageData('addedTasks', addedTasksList);
} else {
addedTasksList.push(newTaskInput.value);
setDataToLocalStorage('addedTasks', addedTasksList)
}
newTaskInput.value = '';
} else {
alert('Enter valid task name');
}
}
})();

CSS

* {
margin: 0;
padding: 0;
}
html,
body {
box-sizing: border-box;
font-size: 16px;
}
.noTask {
font-size: smaller;
}

Удачного обучения!!