Построение Todo-List с нуля с помощью Html, CSS и Javascript(LocalStorage).

Как дела у технарей, вы когда-нибудь создавали список дел с помощью Javascript, и элементы в приложении удалялись сразу после перезагрузки или вы когда-нибудь задавались вопросом, как можно создать список дел с помощью Javascript?

Если да, то эта статья для вас, в ней мы создадим список дел с нуля, используя Html, CSS и Javascript, мы также воспользуемся преимуществами Javascript’s LocalStorage API для сохранения данных.

Давайте приступим,

Содержание

ПРЕОБРАЗОВАТЕЛИ
Установка
Теперь давайте писать код!
Что происходит здесь?
Что здесь происходит?
Что происходит здесь?
Посмотрите, как я это делаю на youtube.
ПРИМЕЧАНИЕ

ПРЕОБРАЗОВАТЕЛИ

Редактор кода: Чтобы продолжить, пожалуйста, убедитесь, что у вас установлен любой редактор кода на ваш выбор, в этой статье использовался Visual Studio Code (VS Code), но вы можете использовать любой редактор кода на ваш выбор.
Веб-браузер: Нам также понадобится веб-браузер, вы можете использовать любой веб-браузер на ваш выбор, в этой статье использовался Brave.
Live Server (необязательно): Live Server — это расширение Visual Studio Code, которое перезагружает вашу веб-страницу при каждом изменении статических файлов. Вам не обязательно использовать это расширение, особенно если вы не используете VS Code.

Установка

Создайте папку на вашем компьютере и откройте ее с помощью редактора кода.
Создайте 3 файла в рабочей области: index.html, style.css и src.js. После этого ваше рабочее пространство должно выглядеть как на картинке ниже (для пользователей vs Code).

Откройте файл index.html в удобном для вас браузере, если вы используете vscode и у вас установлен live server, нажмите на ссылку Go Live в правом нижнем углу редактора кода. Live server откроет ваш проект в браузере и будет автоматически перезагружать веб-страницу при внесении изменений в ваш код.

Теперь давайте писать код!

В ваш файл index.html добавьте следующий код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-wrapper">
        <div class="action-wrapper">
            <input type="text" id="input"> <button id="add_btn">Add</button>
        </div>
        <div class="list-wrapper" id="item_list_container">

        </div>
    </div>
    <script src="src.js"></script>
</body>
</html>

Вход в полноэкранный режим Выйти из полноэкранного режима

Что происходит здесь?

Ничего особенного, приведенный выше код представляет собой базовую HTML-страницу, которая отражает структуру нашей веб-страницы.
Однако есть несколько моментов, на которые следует обратить внимание. В теге head нашего кода есть <link rel="stylesheet" href="style.css">, он используется для ссылки файла style.css, который мы создали изначально, на нашу HTML страницу, чтобы мы могли использовать CSS файл для оформления нашей HTML страницы, также прямо перед закрывающим тегом body у нас есть <script src="src.js"></script> он используется для загрузки src.js файла в нашу HTML страницу.

В файл style.css добавьте следующий код

.main-wrapper{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 0%;
}
.action-wrapper{
    padding: 30px;
}
.action-wrapper input{
    font-size: 1rem;
    padding: 10px;
    border: blue 1px solid;
}
.action-wrapper button, .item-actions button{
    padding: 12px;
    background-color: blue;
    color: white;
    font-weight: bolder;
    border: solid 1px rgb(112, 153, 153);
}
.action-wrapper button:hover, .item-actions button:hover{
    background-color: white;
    color: black;
    border: blue 1px solid;
    cursor: pointer;
}
.list-item{  
    width: 100%;
    margin: 20px 0%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.item-name{
    padding: 10px;
    font-size: 1.2rem;
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Что здесь происходит?

Это просто базовый код CSS для добавления некоторых простых стилей на нашу веб-страницу.

В файл src.js добавьте следующий код

const id = (x) => {
    return document.getElementById(x);
}
let input = id('input');
let addBtn = id('add_btn');
let listContainer = id('item_list_container');
let itemList = localStorage.itemList ? JSON.parse(localStorage.itemList) : [];


const renderList = () => {
    listContainer.innerHTML = ``;
    for (let i = itemList.length - 1; i > 0; i--) {
        listContainer.innerHTML += `
            <div class="list-item">
                <div class="item-name">
                    ${itemList[i]}
                </div>
                <div class="item-actions">
                    <button onclick="editItem(${i})">Edit</button>
                    <button onclick="deleteItem(${i})">Delete</button>
                </div>
            </div>
        `;
    }
}

const addEvent = () => {
    let value = input.value;
    if (value.length > 0) {
        itemList.push(value);
        input.value = "";
    } else {
        alert("Please specify a name for your task");
    }
    localStorage.itemList = JSON.stringify(itemList);
    renderList();
}

const deleteItem = (index)=>{
    let item = itemList[index];
    if(item != undefined){
        itemList.splice(index, 1);
        localStorage.itemList = JSON.stringify(itemList);
        renderList();
    }else{
        alert("Item has already been deleted.");
    }
}

const editItem = (index)=>{
    let item = itemList[index];
    if(item != undefined){
        let ask = prompt(`Change "${item}" to : `);
        if(ask.length > 0){
            itemList[index] = ask;
            localStorage.itemList = JSON.stringify(itemList);
            renderList();
        }
    }else{
        alert("Item not available in list.");
    }
}

addBtn.addEventListener("click", (e) => {
    e.preventDefault();
    addEvent();
})

renderList();

Войти в полноэкранный режим Выйти из полноэкранного режима

Что происходит здесь?

Приведенный выше код отвечает за обработку всех действий, выполняемых на нашей веб-странице. Это объяснение кода по блокам. :

В начале нашего файла мы имеем

const id = (x) => {
    return document.getElementById(x);
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Функция id — это сокращение, используемое для получения элементов из DOM путем передачи id элемента. Функция была создана для того, чтобы просто сократить метод document.getElementById().

Объявления переменных

let input = id('input');
let addBtn = id('add_btn');
let listContainer = id('item_list_container');
let itemList = localStorage.itemList ? JSON.parse(localStorage.itemList) : [];