Description

Have you ever wished for a simple way to keep track of your tasks? We're going to build a web app that helps you do just that! This project is all about creating a basic to-do list where you can easily add, check off, and manage your daily tasks.

We'll start with a basic design using HTML and CSS. Think of it like drawing the outline of a really useful tool that will help you stay organized.

Objectives

Your HTML file should contain the following elements:

• The <title> of the HTML file should be "To-Do List".

• <input> element with the id #input-task for entering task names.

• <button> element with the id #add-task-button to add tasks when clicked.

• <ul> element with the id #task-list to store tasks.

Inside the <ul>, add three hardcoded tasks using <li> tags. Each <li> should contain:

• An <input> element of checkbox type to mark the task as complete.

• A <span> with the class .task to display the task name.

• A <button> with the class .delete-btn (this won’t perform any action for now).

No need to implement functionality yet—focus on the layout. Feel free to unleash your creativity with the design!

Examples

Example 1: An example of a To-Do list