index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todo List Application</title>
    <link rel="stylesheet" href="css/styles.css" />

    <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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="todo-app">
      <header>
        <h1>To-Do List</h1>
      </header>

      <main>
        <form id="task-form" autocomplete="off" onsubmit="handleSubmit(event)">
          <input
            type="text"
            id="task-input"
            placeholder="Enter your task."
            required
          />
          <button type="submit" id="add-task">Add Task</button>
        </form>

        <h2>My Tasks</h2>
        <!-- Empty State -->
        <div id="empty-state" class="empty-card">
          <p>No tasks found. Add a task to get started!</p>
        </div>

        <!-- Task List -->
        <ul id="task-list" class="task-list"></ul>
      </main>

      <footer>
        <p>&copy; 2024 <a target="_blank" href="https://shrimo.com/">Shrimo Innovations Pvt Ltd</a> | Created by <a target="_blank" href="https://www.linkedin.com/in/shrikant9907/">Shrikant Yadav</a></p>
      </footer>
    </div>

    <script src="js/scripts.js"></script>
  </body>
</html>