index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width, initial-scale=1.0"> -->
    <link rel="stylesheet" href="todo-styling.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>MyTodoList</h1>
        <input type="text" name="search" id="search" placeholder="Search tasks...">
     </header>   

    <div class="container">
        <div id="alertBox"></div>

        <form class="todo-entry" id="todoEntry">
            <input type="text" id="todoInput" placeholder="Add a new task">
            <input type="submit" id="addButton" value="Add">
        </form>

        <div class="todo-list">
            <h2>Tasks</h2>
            <ul id="list">
                <!-- List items will be added here dynamically -->
            </ul>
        </div>
    </div>

    <script src="todo-action.js"></script>
</body>
</html>