Build a fully functional todo list application that demonstrates your CSS and JavaScript fundamentals.

For the best development experience, use the built-in hot reloading:

npm install
npm run dev

This will automatically open your browser and refresh it whenever you save files!

1. Set up the HTML structure - The basic HTML is already provided
2. Style the basic layout - Make it look clean and organized
3. Test the basic form - Ensure the input and button work

1. Create (Add todos)

   • Handle form submission
   • Add new todos to the list
   • Clear input after adding

2. Read (Display todos)

   • Render todos dynamically
   • Show todo text

3. Delete (Remove todos)

   • Handle delete button clicks
   • Remove todos from the list

1. Fetch todos from API

   • Use fetch() to get todos from DummyJSON
   • Handle API responses and errors
   • Load todos on page load

2. Implement CRUD endpoints

   • POST to add new todos
   • PUT to update todo status
   • DELETE to remove todos
   • Handle API success/error responses

1. Search functionality

   • Real-time search as user types
   • Filter todos by text content

2. Sorting functionality

   • Sort by creation time (newest/oldest)
   • Sort alphabetically (A-Z/Z-A)
   • Combine search and sort

1. Update statistics

   • Show total, completed, and active counts
   • Update counts in real-time

2. Responsive design

   • Ensure it works on mobile
   • Test different screen sizes

3. Final testing

   • Test all CRD operations
   • Test search and sort
   • Test API integration

• Layout: Proper use of Flexbox/Grid
• Responsiveness: Mobile-first approach
• Organization: Clean, maintainable CSS
• Visual Design: Professional appearance

• DOM Manipulation: Efficient element selection and updates
• Event Handling: Proper event listeners and delegation
• Data Management: Array methods, filtering, searching, sorting
• Code Organization: Clean, readable structure
• API Integration: Fetch API, async/await, error handling

• Start simple: Get basic functionality working first
• Test frequently: Check your work after each step
• Think about UX: How will users interact with your app?
• Code organization: Keep your functions focused and readable
• Error handling: Consider edge cases (empty inputs, etc.)

• Don't forget to prevent form submission default behavior
• Remember to bind events to dynamically created elements
• Don't hardcode sample data - make it dynamic
• Avoid inline styles - use CSS classes
• Don't forget to escape HTML content for security

Your app should:

• ✅ Allow adding new todos
• ✅ Display todos in a clean list
• ✅ Delete todos
• ✅ Integrate with DummyJSON API
• ✅ Search todos by text
• ✅ Sort by creation time and alphabetically
• ✅ Look professional and responsive

• 0-15 min: Basic structure and styling
• 15-40 min: CRUD operations
• 40-55 min: Data persistence
• 55-75 min: Search and filter
• 75-90 min: Polish and testing

Good luck! Focus on demonstrating solid fundamentals rather than perfect polish.