snowprint/halloween-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c2338e307ae324e074d1f9104a318fc090ca6ba8
halloween-test/specs/001-mcdonald-s-it/tasks.md
snowprint 3b355148b7 feat(tasks): generate implementation tasks for Halloween event page 
Created comprehensive task breakdown with 32 tasks across 7 phases:

Phase 3.1: Setup & Structure (T001-T004)
- HTML5 skeleton and semantic structure
- Metadata, favicon, and CSS framework
- Foundation for all subsequent tasks

Phase 3.2: Content Creation (T005-T011)
- ASCII art for desktop and mobile versions
- Bilingual event information (EN/CN)
- Halloween decorations and activities
- Footer content

Phase 3.3: Styling & Visual Design (T012-T017)
- Terminal color scheme (#000000, #00FF00, #FFBF00)
- Monospace typography and layout
- Blinking cursor animation (CSS @keyframes)
- Responsive media queries (mobile/tablet/desktop)

Phase 3.4: Countdown Functionality (T018-T022)
- Countdown timer structure and JavaScript
- GMT+8 timezone handling
- State management (before/active/ended)
- Edge case testing

Phase 3.5: Accessibility & Compliance (T023-T025)
- ARIA labels for screen readers
- Language attributes for bilingual content
- WCAG 2.1 AA verification (21:1 contrast)

Phase 3.6: Testing & Validation (T026-T031)
- HTML5 validation
- Cross-browser testing (Chrome/Firefox/Safari/Edge)
- Responsive design testing
- Performance testing (< 50KB, < 1s load)
- Accessibility testing (WAVE, contrast checker)
- Full quickstart validation

Phase 3.7: Polish & Documentation (T032)
- Update README with deployment instructions
- Version 1.0.0 release notes in CHANGELOG

Task Organization:
- 32 tasks total, dependency-ordered
- Single-file constraint (all modify index.html)
- Content preparation can be planned in parallel
- Testing tasks can run concurrently
- Clear dependencies and blocking relationships

Key Constraints:
- File size must be < 50KB
- Load time must be < 1 second
- WCAG 2.1 AA compliance required
- Works on Chrome, Firefox, Safari, Edge
- Responsive: 320px to 1920px+

Ready for: /implement command or manual execution

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-04 19:23:42 +08:00

17 KiB
Raw Blame History

Tasks: McDonald's IT Halloween Event Page

Input: Design documents from /specs/001-mcdonald-s-it/ Prerequisites: plan.md ✅, research.md ✅, data-model.md ✅, contracts/ ✅, quickstart.md ✅ File to Create: index.html (single self-contained HTML file)

Execution Flow (main)

1. Load plan.md from feature directory ✅
   → Tech stack: HTML5, CSS3, JavaScript ES6+
   → Structure: Single self-contained HTML file
2. Load optional design documents ✅
   → data-model.md: 4 entities (Event, Countdown, VisualTheme, Content)
   → contracts/: page-content.schema.json
   → research.md: 10 technical decisions
   → quickstart.md: 10 test categories
3. Generate tasks by category ✅
   → Setup: HTML skeleton, structure
   → Content: ASCII art, bilingual text
   → Styling: CSS, responsive design
   → Functionality: Countdown timer
   → Accessibility: ARIA, WCAG compliance
   → Testing: Validation, performance
   → Polish: Documentation
4. Apply task rules ✅
   → Same file (index.html) = sequential for core structure
   → Different sections = can plan in parallel [P]
   → Tests before implementation (TDD principle)
5. Number tasks sequentially (T001-T032) ✅
6. Generate dependency graph ✅
7. Create parallel execution examples ✅
8. Validate task completeness ✅
   → Schema has validation? Yes
   → All entities covered? Yes
   → All test scenarios included? Yes
9. Return: SUCCESS (tasks ready for execution) ✅

Format: [ID] [P?] Description

  • [P]: Can run in parallel (independent planning/preparation tasks)
  • Include exact file paths in descriptions
  • All implementation tasks modify index.html

Path Conventions

  • Single file project: index.html at repository root
  • Specs directory: /specs/001-mcdonald-s-it/
  • Tests: Manual testing via quickstart.md

Phase 3.1: Setup & Structure

  • T001 Create index.html with HTML5 doctype and basic structure

    • File: index.html
    • Add: <!DOCTYPE html>, <html lang="en">, <head>, <body>
    • Add viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • Dependencies: None
    • Blocks: All other tasks

  • T002 Add page metadata and favicon

    • File: index.html → <head> section
    • Add: <title>2025 MITA Halloween</title>
    • Add: <meta charset="UTF-8">
    • Add: Meta description (see spec.md FR-035)
    • Add: Data URI favicon with 🎃 emoji
    • Dependencies: T001
    • Reference: research.md decision #10

  • T003 Set up semantic HTML5 structure

    • File: index.html → <body> section
    • Add: <header>, <main>, <section> for countdown, event info, activities, decorations
    • Add: <footer> for "McDonald's IT Academy"
    • Add: Placeholder <pre> tags for ASCII art
    • Dependencies: T001
    • Reference: research.md decision #1

  • T004 Create CSS structure in <style> tag

    • File: index.html → <head> section
    • Add: <style> tag with organized sections (base, typography, layout, responsive)
    • Add: CSS reset/normalize basics
    • Dependencies: T001
    • Reference: research.md decision #5

Phase 3.2: Content Creation

Note: These tasks can be prepared in parallel as content, then added to index.html sequentially

  • T005 [P] Design McDonald's ASCII art (desktop version)

    • File: index.html → <header> → <pre class="ascii-desktop">
    • Create: McDonald's logo with Golden Arches M using ASCII characters
    • Constraints: Monospace font compatible, centered, ~15-20 lines height
    • Add: ARIA label "McDonald's Logo"
    • Dependencies: T003
    • Reference: spec.md FR-001, research.md decision #2

  • T006 [P] Design McDonald's ASCII art (mobile version)

    • File: index.html → <header> → <pre class="ascii-mobile">
    • Create: Simplified McDonald's logo for mobile (< 768px)
    • Constraints: Legible on small screens, ~8-10 lines height
    • Add: Same ARIA label
    • Dependencies: T003
    • Reference: spec.md FR-024, research.md decision #3

  • T007 [P] Add "i'm lovin' IT" tagline with cursor

    • File: index.html → <header> → after ASCII art
    • Add: <p class="tagline" lang="en">i'm lovin' IT<span class="cursor">_</span></p>
    • Dependencies: T003
    • Reference: spec.md FR-002

  • T008 [P] Create Halloween ASCII decorations

    • File: index.html → <section class="decorations">
    • Add: Halloween-themed ASCII art (pumpkins, ghosts, bats) or emojis 🎃👻🦇
    • Add: Multiple decorations in <pre> tags
    • Dependencies: T003
    • Reference: spec.md FR-006

  • T009 [P] Write bilingual event information content

    • File: index.html → <section class="event-info">
    • Add: Date, time, location, organizer (English + Chinese alternating)
    • Add: lang="en" and lang="zh-CN" attributes on each <p>
    • Content from: data-model.md Event entity
    • Dependencies: T003
    • Reference: spec.md FR-008 to FR-016, research.md decision #7

  • T010 [P] Add activities and notes content

    • File: index.html → <section class="activities">
    • Add: Bilingual list of activities (Cosplay, Debugging Games, Lucky Draw)
    • Add: Notes (costumes encouraged, food provided)
    • Dependencies: T003
    • Reference: spec.md FR-013, FR-014

  • T011 Add footer content

    • File: index.html → <footer>
    • Add: "McDonald's IT Academy" text
    • Dependencies: T003
    • Reference: spec.md FR-015

Phase 3.3: Styling & Visual Design

  • T012 Implement base color scheme and typography

    • File: index.html → <style> section
    • Add: body { background: #000000; color: #00FF00; }
    • Add: Font stack: font-family: "Courier New", Monaco, Consolas, Menlo, monospace;
    • Add: Accent color class: .accent { color: #FFBF00; }
    • Dependencies: T004
    • Reference: spec.md FR-003 to FR-005, data-model.md VisualTheme

  • T013 Style ASCII art and tagline

    • File: index.html → <style> section
    • Add: pre { text-align: center; line-height: 1.2; }
    • Add: .tagline { text-align: center; font-size: 20px; }
    • Add: Default .ascii-mobile { display: none; }
    • Dependencies: T012
    • Reference: research.md decision #2, #3

  • T014 Create blinking cursor animation

    • File: index.html → <style> section
    • Add: @keyframes blink with 50% opacity toggle
    • Add: .cursor { animation: blink 1s step-end infinite; }
    • Add: @media (prefers-reduced-motion: reduce) to disable for accessibility
    • Dependencies: T012
    • Reference: spec.md FR-002, research.md decision #8

  • T015 Implement responsive media queries

    • File: index.html → <style> section
    • Add: @media (max-width: 767px) for mobile
    • Add: ASCII art switching (hide desktop, show mobile)
    • Add: Font size adjustments for readability
    • Add: @media (min-width: 768px) and (max-width: 1023px) for tablet
    • Dependencies: T013
    • Reference: spec.md FR-021 to FR-025, research.md decision #3

  • T016 Style countdown timer display

    • File: index.html → <style> section
    • Add: .countdown { text-align: center; font-size: 24px; color: #FFBF00; }
    • Add: Styling for days/hours/minutes/seconds layout
    • Dependencies: T012
    • Reference: spec.md FR-017

  • T017 Style event info and bilingual content

    • File: index.html → <style> section
    • Add: .event-info p { text-align: center; margin: 0.5rem 0; }
    • Add: Language-specific styling if needed
    • Dependencies: T012
    • Reference: spec.md FR-012

Phase 3.4: Countdown Functionality

Critical: These tasks must be done sequentially (same JavaScript block)

  • T018 Create countdown HTML structure

    • File: index.html → <section class="countdown">
    • Add: Container div with id countdown-display
    • Add: Spans for days, hours, minutes, seconds
    • Add: Noscript fallback: <noscript>Enable JavaScript for live countdown</noscript>
    • Dependencies: T003
    • Reference: spec.md FR-017 to FR-020

  • T019 Implement countdown JavaScript logic

    • File: index.html → <script> tag before </body>
    • Add: Target date calculation (Oct 31 2025 18:00 GMT+8 = 10:00 UTC)
    • Add: Event end date (Oct 31 2025 21:00 GMT+8 = 13:00 UTC)
    • Add: updateCountdown() function to calculate time difference
    • Dependencies: T018
    • Reference: data-model.md Countdown entity, research.md decision #4

  • T020 Add countdown timezone handling

    • File: index.html → <script> section
    • Add: UTC to GMT+8 conversion logic
    • Add: User timezone detection and calculation
    • Ensure: Countdown shows correct time for users in any timezone
    • Dependencies: T019
    • Reference: spec.md FR-018, FR-020

  • T021 Implement countdown state management

    • File: index.html → <script> section
    • Add: Status check (before/active/ended)
    • Add: Display "🎃 EVENT STARTING NOW! 🎃" when countdown reaches zero
    • Add: Display "👻 EVENT COMPLETED - Thanks for joining! 👻" after event ends
    • Add: Update display every 1000ms (1 second)
    • Dependencies: T020
    • Reference: data-model.md Countdown states, research.md edge cases

  • T022 Test countdown edge cases

    • File: index.html → verify in browser dev tools
    • Test: Set system time to just before event (should count down)
    • Test: Set system time to event start (should show "EVENT STARTING NOW")
    • Test: Set system time to after event (should show "EVENT COMPLETED")
    • Test: Disable JavaScript (should show noscript message)
    • Dependencies: T021
    • Reference: quickstart.md Edge Case Testing

Phase 3.5: Accessibility & Compliance

  • T023 [P] Add ARIA labels for screen readers

    • File: index.html → throughout document
    • Add: aria-label on ASCII art elements
    • Add: role attributes where appropriate
    • Add: aria-live="polite" on countdown for screen reader updates
    • Dependencies: T003, T018
    • Reference: spec.md FR-032

  • T024 [P] Add language attributes for bilingual content

    • File: index.html → all bilingual elements
    • Verify: lang="en" on English paragraphs
    • Verify: lang="zh-CN" on Chinese paragraphs
    • Verify: <html lang="en"> as primary language
    • Dependencies: T009, T010
    • Reference: spec.md FR-033, research.md decision #7

  • T025 [P] Verify WCAG 2.1 AA compliance

    • File: index.html
    • Test: Contrast ratios (Green #00FF00 on black = 21:1, Amber #FFBF00 on black = 12:1)
    • Test: Keyboard navigation (all interactive elements accessible)
    • Test: Screen reader compatibility (test with VoiceOver/NVDA)
    • Dependencies: T012, T023, T024
    • Reference: spec.md FR-031, FR-034, research.md decision #6

Phase 3.6: Testing & Validation

Note: Execute testing tasks after implementation is complete

  • T026 Run HTML5 validation

    • Tool: https://validator.w3.org/
    • Upload: index.html
    • Fix: Any errors or critical warnings
    • Target: Zero errors, clean validation
    • Dependencies: All implementation tasks (T001-T025)
    • Reference: quickstart.md section 10

  • T027 Manual browser testing (all target browsers)

    • Test in: Chrome, Firefox, Safari, Edge (latest versions)
    • Verify: All features work consistently
    • Check: Visual appearance, countdown functionality, responsiveness
    • Fix: Any browser-specific issues
    • Dependencies: All implementation tasks
    • Reference: quickstart.md section 8

  • T028 Responsive design testing

    • Test: Desktop (1024px+), tablet (768-1023px), mobile (320-767px)
    • Verify: ASCII art switches correctly
    • Verify: No horizontal scroll on any size
    • Verify: All content readable without zooming
    • Use: Browser DevTools responsive mode
    • Dependencies: T015, all content tasks
    • Reference: quickstart.md section 5, spec.md FR-021 to FR-025

  • T029 Performance testing

    • Check: File size (must be < 50KB) 
      ls -lh index.html
    • Check: Load time (must be < 1 second)
      • Use: Browser DevTools Network tab
    • Check: Animation performance (60fps for cursor blink)
      • Use: Browser DevTools Performance tab
    • Optimize: If any metrics fail
    • Dependencies: All implementation tasks
    • Reference: quickstart.md section 7, spec.md FR-026 to FR-030

  • T030 Accessibility testing

    • Run: WAVE accessibility checker (https://wave.webaim.org/)
    • Run: Contrast checker (verify 21:1 and 12:1 ratios)
    • Test: Screen reader navigation
    • Test: Keyboard-only navigation
    • Fix: Any accessibility issues found
    • Dependencies: T023, T024, T025
    • Reference: quickstart.md section 6, spec.md FR-031 to FR-035

  • T031 Execute full quickstart validation

    • Run: All tests in quickstart.md
    • Complete: Quick Test (2 min) checklist
    • Complete: Full Test Suite (15 min) checklist
    • Complete: Edge Case Testing
    • Document: Any issues found and fixes applied
    • Dependencies: All implementation and testing tasks
    • Reference: quickstart.md (entire document)

Phase 3.7: Polish & Documentation

  • T032 Update project documentation
    • File: README.md
    • Add: Deployment instructions (how to host index.html)
    • Add: Usage instructions (how to view the page)
    • Add: Feature description and screenshots
    • File: CHANGELOG.md
    • Add: Version 1.0.0 release notes with all features
    • Dependencies: T031 (validation complete)
    • Reference: plan.md Phase 3+ Expected Deliverables

Dependencies Graph

T001 (HTML5 structure)
  ├─→ T002 (metadata) → All tasks
  ├─→ T003 (semantic HTML) → T005-T011, T018
  └─→ T004 (CSS structure) → T012-T017

Content (T005-T011) [Can prepare in parallel, add sequentially]
  └─→ Must follow T003

Styling (T012-T017)
  T012 (base colors) → T013, T014, T016, T017
  T013 (ASCII styling) → T015
  T014 (cursor animation) [parallel with T013]
  T015 (responsive) → requires T013
  T016, T017 [parallel, depend on T012]

Countdown (T018-T022) [MUST be sequential - same JS block]
  T018 → T019 → T020 → T021 → T022

Accessibility (T023-T025) [Can run in parallel]
  T023, T024 [parallel]
  T025 → requires T012, T023, T024

Testing (T026-T031) [After all implementation]
  All require: T001-T025 complete
  T026, T027, T028 [can run in parallel]
  T029 → requires all implementation
  T030 → requires T023, T024, T025
  T031 → requires all testing tasks

Documentation (T032)
  → requires T031 (validation complete)

Parallel Execution Examples

Setup Phase (Can't parallelize - same file)

# Must run sequentially - all modify index.html
# T001 → T002 → T003 → T004

Content Preparation (Can plan in parallel, implement sequentially)

# Prepare content separately, then add to index.html
# T005: Draft desktop ASCII art
# T006: Draft mobile ASCII art
# T007: Draft tagline
# T008: Draft decorations
# T009: Draft bilingual content
# T010: Draft activities
# Then add all to index.html sequentially

Testing Phase (Can parallelize different checks)

# After implementation complete:
# Run these in parallel (different validation tools)
Task: "Run HTML5 validation at validator.w3.org"
Task: "Manual browser testing in Chrome, Firefox, Safari, Edge"
Task: "Responsive design testing with DevTools"

Notes

  • Single file constraint: Most tasks modify index.html, so true parallelization is limited
  • Content preparation: Can draft content separately, then integrate sequentially
  • Testing: Multiple validation tasks can run in parallel using different tools
  • TDD adaptation: For static page, "tests" are validation criteria from quickstart.md
  • Commit strategy: Commit after each phase (Structure, Content, Styling, Countdown, Accessibility, Testing, Docs)

Validation Checklist

GATE: Verified during task generation

  • All contracts have corresponding tests (Schema → T026 validation)
  • All entities have coverage (Event → T009, Countdown → T018-T022, VisualTheme → T012-T017, Content → T009-T010)
  • Testing comes after implementation (T026-T031 require T001-T025)
  • Parallel tasks are truly independent (T023-T025 for accessibility, T026-T028 for different validations)
  • Each task specifies exact file path (index.html or specific tools)
  • No conflicting parallel tasks (content prep vs implementation separated)

Success Criteria

✅ All tasks complete when:

  • index.html exists and is functional
  • File size < 50KB ✅
  • Load time < 1 second ✅
  • HTML5 validation passes ✅
  • WCAG 2.1 AA compliance verified ✅
  • All browsers work (Chrome, Firefox, Safari, Edge) ✅
  • Responsive on all devices ✅
  • Countdown timer functions correctly ✅
  • Documentation updated ✅

Ready for: Deployment and user testing

Total Tasks: 32 Estimated Time: 8-12 hours (including testing) Complexity: Medium (single file, but detailed requirements) Risk Areas: ASCII art legibility on mobile, countdown timezone accuracy, file size constraint