🍅 CSS Animation Project: Pomodoro Timer

What You're Building

You're going to create a functional Pomodoro timer - a real tool you might actually use while coding! This is a hands-on project where you'll build a beautiful, animated interface using HTML, CSS, and pre-written JavaScript.

What You'll Learn

• HTML-CSS-JavaScript Integration: How to connect HTML elements to JavaScript functionality using IDs
• CSS Animations & Transitions: Creating smooth, professional interactions and state changes
• State Management: Visual representation of different application states (work mode, break mode, paused)
• Responsive Design: Making interfaces that work across all devices
• Performance Optimization: Creating smooth 60fps animations
• Accessibility: Building inclusive user experiences

Project Structure

├── README.md                    # This overview file
├── assets/
│   └── pomodoro_example.png     # Reference screenshot
└── lab/
    ├── README.md                # Detailed project instructions
    ├── package.json             # Dependencies & test scripts
    ├── scripts/
    │   └── submit.sh            # Git integration & submission
    ├── tests/
    │   ├── generate-test-report.js  # HTML test report generator
    │   ├── *.test.js            # 34 comprehensive Jest tests
    │   └── setup.js             # Test configuration
    └── src/
        ├── index.html           # HTML structure (student work)
        ├── styles.css           # CSS styling (student work)
        ├── timer.js             # Pre-built JavaScript functionality
        └── example-implementation.html  # Reference implementation

Testing & Validation

This project includes a comprehensive testing suite with 34 Jest tests that validate:

• ✅ HTML structure and required element IDs
• ✅ Timer functionality (start, pause, reset, mode switching)
• ✅ CSS state management (.work-mode, .break-mode, .paused classes)
• ✅ Display updates and progress indicators
• ✅ Button states and interactions
• ✅ Error handling and graceful degradation

Quick Commands

cd lab/
npm install           # Install dependencies
npm test             # Run all tests
npm run submit <username>  # Generate test report & submit

Git Integration Features

For instructors and automated workflows:

• Automated Testing: Jest test suite with HTML report generation
• Submission System: One-command submission with git branching
• Test Metrics: Pass/fail rates, detailed test breakdowns
• Branch Management: Safe temporary branch creation for submissions
• Report Generation: Beautiful HTML test reports for easy review

Project Timeline

Your project is structured as a progressive build:

1. Understanding & Setup (30 minutes) - Read JavaScript, plan your design
2. Build Structure (1 hour) - Create HTML with required IDs
3. Core Styling (1 hour) - Typography, layout, basic visual design
4. States & Animations (1.5 hours) - Visual states, transitions, progress indicators
5. Polish & Personality (1+ hours) - Themes, micro-interactions, creative features

Getting Started

Navigate to the lab/ directory and follow the detailed instructions in the lab README.md file.

For Students

cd lab/
npm install    # Install test dependencies
npm test       # Check your implementation progress

For Instructors

cd lab/
npm run submit <student-username>  # Generate test report & submission

The testing system provides immediate feedback on implementation progress and generates detailed reports for assessment.