index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
    <link rel="stylesheet" href="styling.css" /> <!-- External CSS file for styling -->
</head>
<body>
    <header>
        <h1>To Do List</h1> <!-- Main heading for the to-do list -->
        <form id="new-task-form"> <!-- Form to add a new task -->
            <input
                type="text"
                id="new-task-input"
                placeholder="What do you have planned?" /> <!-- Input field for entering a new task -->
            <input
                type="submit"
                id="new-task-submit"
                value="Add task" /> <!-- Submit button for adding a new task -->
        </form>
    </header>
    <main>
        <section class="task-list">
            <h2>Tasks</h2> <!-- Heading for the list of tasks -->
            <div id="tasks"></div> <!-- Container for displaying the tasks -->
        </section>
    </main>
    <script src="script.js"></script> <!-- External JavaScript file for script logic -->
</body>
</html>