|
| Todo list |
### **Step 1: Set Up Your HTML File**
- Open your code editor and create a new file called `index.html`.
- Start with the basic HTML structure:
1. Add a title for the webpage (e.g., "My To-Do List").
2. Include a heading at the top (e.g., `<h1>` tag).
3. Create an input box where users can type in their tasks.
4. Add a button for users to add tasks.
5. Use an unordered list (`<ul>` tag) to display tasks.
**Example layout**: A webpage with a title, an input box, a button, and space for task items.
---
### **Step 2: Create the CSS File for Styling**
- Save a new file called `styles.css` in the same folder as your HTML file.
- Add these elements:
1. Center the content in the middle of the page.
2. Style the input box and button to look clean and modern.
3. Design the list so that tasks are displayed neatly with padding, background, and rounded corners.
**Tip**: viewers can use their creativity for colors, fonts, and spacing.
---
### **Step 3: Add Basic JavaScript to Make It Interactive**
- Create a new file called `script.js` in the same folder as the other files.
- Link this file to your `index.html` using the `<script>` tag at the end of the body section.
- Write a function to:
1. Capture the text from the input box.
2. Add a task to the list when the "Add Task" button is clicked.
3. Clear the input box after adding a task.
---
### **Step 4: Enhance with Interaction**
- how to:
1. Mark tasks as complete when they are clicked (e.g., by applying a "completed" style).
2. Allow tasks to be removed by double-clicking on them.
**Suggestion**: Viewers can use the `addEventListener()` method in JavaScript for these interactions.
---
### **Step 5: Style the Completed Tasks**
- Add a new CSS style for completed tasks (e.g., crossed-out text or faded background).
- how to toggle the "completed" style in JavaScript when a task is clicked.
**Example**: Show how to use the `classList.toggle()` method to switch styles dynamically.
---
### **Step 6: Test the App**
1. Add, complete, and remove tasks.
2. Fix any bugs they encounter along the way.
### **Optional: Challenge for Audience**
- Add local storage to save tasks between page reloads.
- Include filters like "All Tasks," "Completed," or "Pending."
- Customize the app to make it truly their own
