Objective: Create a fully functional To-Do List App using HTML, CSS, and JavaScript. The app will allow users to add, check off, and remove tasks, with data being saved in the browser's localStorage.

Instructions:

1. Create a simple HTML page that contains:
   • A title: "To Do List App".
   • A container for the app with a title, an input field for adding tasks, an "Add" button, and a list to display tasks.


2. CSS Styling:
   • Use CSS to style the app. Here are some requirements:
     • Background: Apply a gradient background.
     • App Layout: Center the to-do app on the page with a clean white background and rounded corners.
     • Input Field: Style the input field to make it responsive and visually appealing.
     • Buttons: Use bright colors for the button and add hover effects to improve user interaction.
     • Task Items: Style the task items with custom bullet icons and make them interactive when checked or deleted.


3. JavaScript Functionality:

   Implement the following functionality:

   1. Add Task:
      • When the user types a task and clicks "Add", the task should be added to the list.
      • If the input is empty, show an alert saying, "You must write something!".
   2. Mark as Completed:
      • When a task is clicked, it should toggle between checked (crossed out) and unchecked.
   3. Remove Task:
      • Add a "delete" button (a small cross) for each task. Clicking this button should remove the task from the list.
   4. Save Data:
      • Store the tasks in the browser’s localStorage so they remain even after refreshing the page.


4. Use of LocalStorage:
   • Ensure that tasks are saved using localStorage so that the list persists after a page refresh. When the page is loaded, the tasks should be loaded back from localStorage.

Key Concepts to Include:

• HTML: Structure of the app, < input >, < button >, and < ul >.< /li >
• CSS: Flexbox, margins, padding, background gradients, and custom button styles.
• CSS: Flexbox, margins, padding, background gradients, and custom button styles.

Bonus (Optional):

• Add a hover effect for tasks and buttons.
• Use different icons for checked and unchecked tasks.
• Style the checked tasks to be greyed out and crossed through.