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 List</title>
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200&display=swap"
            rel="stylesheet">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
        <!-- Custom CSS -->
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <header>
            <h1 class="heading"><i class="bi bi-check2-square"></i> Todo List</h1>
        </header>
        <main>
            <section class="todo-input-container">
                <input type="text" id="todoInput" class="todo-input" placeholder="Please Enter a Task">
                <button class="button" id="addButton">Add Item</button>
            </section>
            <section class="list-container">
                <ul class="list" id="listGroup">

                </ul>
                <div class="save-container">
                    <button class="button" id="saveButton">Save</button>
                </div>

            </section>
        </main>



        <script src="test.js"></script>
    </body>

</html>