Skip to content

CLAUDE.md

Latest commit

 

History

History
135 lines (109 loc) · 5.05 KB

CLAUDE.md

File metadata and controls

135 lines (109 loc) · 5.05 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Development Commands

This is a static web application with no build system. To run the application:

  1. Open index.html directly in a browser
  2. For local development with live reload, use a simple HTTP server: 
    python3 -m http.server 8000
    Then visit http://localhost:8000

No build, lint, or test commands exist. The application runs entirely in the browser.

Architecture Overview

Module Structure (script.js)

The application uses IIFE (Immediately Invoked Function Expression) modules for separation of concerns:

  1. CardManager (CardManager module):

    • Manages all card data (default cards + user-created cards)
    • Handles filtering, sorting, and navigation
    • Persists user cards to localStorage (biologyCards_user)
    • Public API: init(), getCards(), addUserCard(), applyFilters(), etc.

  2. UIController (UIController module):

    • Updates DOM elements for card display
    • Manages card flip animations and thumbnails
    • Shows notifications (toast-style messages)
    • Public API: updateCardDisplay(), flipCard(), showNotification(), etc.

  3. FilterController (FilterController module):

    • Handles search input and taxonomy dropdown filters
    • Manages active filter tags with removal buttons
    • Debounces search input (300ms)
    • Public API: init(), applyFilters(), clearAllFilters()

  4. CardCreation (CardCreation module):

    • Manages the card creation modal with form validation
    • Provides image URL preview and validation
    • Creates new cards with unique IDs (user-${timestamp}-${random})
    • Public API: openModal(), closeModal()

  5. QuizEngine (QuizEngine module):

    • Generates 10-question quizzes with two question types:
      • Identification: "Which organism is shown?" with 4 multiple-choice options
      • True/False: Statements based on card details
    • Tracks score (10 points per correct), streak, and timer (60 seconds)
    • Shows detailed results with performance breakdown
    • Public API: init(), startQuiz()

  6. BiologyFlashcards (Main application):

    • Initializes all modules and sets up event listeners
    • Handles keyboard shortcuts for navigation
    • Coordinates between modules
    • Entry point: BiologyFlashcards.init() called on DOMContentLoaded

Data Structure

Card objects have this structure:

{
  id: "elephant-african" (or "user-{timestamp}-{random}"),
  title: "African Elephant",
  imageUrl: "https://...",
  taxonomy: {
    kingdom: "Animalia",
    phylum: "Chordata",
    class: "Mammalia"
  },
  details: {
    description: "...",
    habitat: "...",
    diet: "...",
    size: "...",
    distribution: "...",
    conservation: "...",
    funFact: "..."
  },
  categories: ["animal", "mammal", "herbivore", "endangered", "large"],
  difficulty: "easy" | "medium" | "hard"
}

Key Features & Implementation Details

  • Card Flipping: CSS 3D transforms with .flipped class toggle
  • Filter System: Combines taxonomy dropdowns and text search; filters apply immediately
  • Thumbnail Navigation: Clickable thumbnails with active state highlighting
  • Keyboard Shortcuts:
    • Arrow keys: Navigate cards
    • Space/F: Flip card
    • S: Shuffle cards
    • R: Reset card order
    • Home/End: Jump to first/last card
    • In quiz mode: Numbers 1-4 select options, Space/Enter next question, Escape close quiz
  • Notifications: Toast-style messages with 3-second auto-dismiss
  • Image Handling: Fallback placeholders when images fail to load
  • LocalStorage Key: biologyCards_user stores array of user-created cards

Default Dataset

Six biology cards are included by default:

  1. African Elephant (Animalia, Chordata, Mammalia)
  2. Monarch Butterfly (Animalia, Arthropoda, Insecta)
  3. Giant Sequoia (Plantae, Tracheophyta, Pinopsida)
  4. Fly Agaric Mushroom (Fungi, Basidiomycota, Agaricomycetes)
  5. Great White Shark (Animalia, Chordata, Chondrichthyes)
  6. Venus Flytrap (Plantae, Tracheophyta, Magnoliopsida)

CSS Architecture

  • Uses CSS Grid for layout, Flexbox for components
  • Responsive design with three breakpoints (900px, 600px)
  • Color scheme: Green-based (#2c5530 primary) with complementary colors
  • Modal system with overlay and animation
  • Quiz-specific styles with visual feedback states

External Dependencies

  • FontAwesome (CDN) for icons
  • Google Fonts: "Roboto" (sans-serif), "Roboto Slab" (serif)
  • Unsplash images for default cards (URLs in defaultCards array)

Development Guidelines

  1. Adding New Features: Follow the IIFE module pattern. Add new modules after existing ones but before the main application.
  2. Styling: Use the existing color variables and responsive patterns. Add new styles before the responsive media queries.
  3. Data Changes: Update the defaultCards array in CardManager if adding/removing default cards.
  4. Testing: Manual testing in browser; no automated test suite exists.
  5. Browser Compatibility: Uses modern JavaScript (ES6+) and CSS3 features.