Building a Dynamic To-Do List in Local Storage Using JavaScript

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building a Dynamic To-Do List in Local Storage Using JavaScript </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>

<div class="add text-center my-4">
            <label for="add" class="add text-dark">Add a new todo:</label>
            <div class="input-btn-div">
                <input type="text" class="form-control m-auto todo-input">
                <button class="todo-btn btn form-control">ADD</button>
            </div>
        </div>
        
        <ul class="list-group todo-list mx-auto text-light">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                Going to delhi
                <i class="far fa-trash-alt delete"></i>
            </li>

<li class="list-group-item d-flex justify-content-between align-items-center">
                <span>Attend Metting</span>
                <i class="far fa-trash-alt delete"></i>
            </li>
        </ul>
    </div>
</body>

</html>

CSS Copied

.container {
            max-width: 450px;
        }

input[type=text],
        input[type=text]:focus {
            color: #333;
            border: none;
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(0, 0, 0, .2);
            height: 42px;
            box-shadow: none;
        }

li.list-group-item {
            background-color: #423a6f;
            color: #F8F9FA;
        }

.delete {
            cursor: pointer;
        }

label.add {
            margin-bottom: 0;
            font-size: 18px;
            color: #555;
            font-weight: 600;
        }

.input-btn-div {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 15px;
        }

.todo-btn {
            background-color: rgb(96, 96, 96);
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            height: 42px;
            width: fit-content;
            padding: 0 25px;
        }

JS Copied

var todoInput = document.querySelector('.todo-input');
        var todoBtn = document.querySelector('.todo-btn');
        var todoList = document.querySelector('.todo-list')
        var todoDataArray = []
        function addTodoList() {
            var createLi = document.createElement("li");
            createLi.className = "list-group-item d-flex justify-content-between align-items-center";
            var deleteIcon = document.createElement('i');
            deleteIcon.className = "far fa-trash-alt delete"