This exercise tests your fundamental knowledge of CSS and JavaScript by building an interactive todo list application with CRUD operations, data persistence, and search/filter functionality.

1. Clone this repository

   git clone <repository-url>
   cd frontend-interview-exercise

2. Install dependencies and start development server

   npm install
   npm run dev

   This will automatically open your browser with hot reloading enabled!

3. Alternative: Open directly in browser

   • If you prefer, you can also open index.html directly in your browser
   • But using npm run dev gives you hot reloading (browser refreshes automatically when you save files)

Note: This is a starter template. You'll need to implement all the functionality from scratch!

• Create: Add new todos
• Read: Display todos in a list
• Delete: Remove todos from the list

• Clean, organized layout
• Responsive design for mobile and desktop
• Proper spacing and typography
• Visual feedback for user interactions

• Fetch todos from DummyJSON API
• Implement CRUD operations using REST endpoints
• Handle API responses and errors
• Load todos from API on page load

• Search todos by text content (real-time)
• Sort todos by creation time (newest/oldest first)
• Sort todos alphabetically (A-Z / Z-A)

A fully functional todo application that demonstrates:

• Modern UI/UX principles
• Efficient data management
• Responsive design
• Professional code structure

CSS Skills:

• Layout techniques (Flexbox/Grid)
• Responsive design
• CSS organization and structure
• Visual design principles

JavaScript Skills:

• DOM manipulation
• Event handling
• Fetch API and async/await
• Array methods (filter, sort, search)
• Error handling and API integration
• Code organization

• Start with basic CRUD functionality
• Focus on clean, readable code
• Test API integration early
• Implement search and sort incrementally
• Pay attention to responsive design

This exercise uses your organization's brand fonts:

• Primary Font: Proxima Nova (proxima-nova, ProximaNova)
• Fallback Font: Noto Sans (noto, sans-serif)
• Professional Typography: Consistent font weights and hierarchy

This exercise includes built-in hot reloading for a professional development experience and real API integration using DummyJSON Todos API:

The exercise uses real REST API endpoints for a realistic development experience:

• GET /todos - Fetch all todos
• POST /todos/add - Create new todo
• PUT /todos/{id} - Update todo
• DELETE /todos/{id} - Delete todo

Note: DummyJSON simulates real API behavior but doesn't persist data permanently.

• Automatic browser refresh when you save files
• No setup required - just run npm run dev
• Real API integration - test with actual REST endpoints
• Works with any code editor (VS Code, WebStorm, Sublime, etc.)
• Cross-platform compatibility (Windows, Mac, Linux)

• Port: 3000 (http://localhost:3000)
• File watching: HTML, CSS, and JavaScript files
• Auto-open: Browser opens automatically
• Stop server: Press Ctrl+C in terminal

Focus on demonstrating solid fundamentals. Take your time, test frequently, and show us your problem-solving approach!

Time limit: 90 minutes total