Elm Learning Project

An interactive Elm learning project built to explore functional programming concepts.

Features

🔢 Counter Page

• Interactive counter with increment/decrement
• Random number generation
• Dice rolling simulation
• Color randomization
• History tracking with filters
• Modal dialog for custom value input

🐙 GitHub Repo Viewer

• Fetch GitHub repositories by username
• Display repo details (stars, forks, language, created date)
• HTTP requests with JSON decoding
• Loading states and error handling

🎨 Canvas Animation

• Bouncing ball animation with 60 FPS
• Physics simulation with velocity and boundaries
• Keyboard controls (Arrow keys to move the ball)
• Real-time subscriptions

✅ Todo List Application

• Add, edit, and delete todos
• Inline editing (double-click, Enter/Escape keys)
• Filter by All/Active/Completed
• Clear completed todos
• Active todo counter
• LocalStorage persistence via JavaScript Ports

📊 D3 Chart

• Dynamic data point management (add/remove with labels and values)
• Interactive bar chart rendered with D3.js
• Bidirectional port communication (Elm ↔ JavaScript)
• Click bars to select them (incoming port from JS to Elm)
• Auto-updates chart when data changes (outgoing port from Elm to JS)
• Hover effects and axis labels

Tech Stack

• Elm 0.19.1 - Functional programming language for web apps
• elm/http - HTTP requests
• elm/json - JSON encoding/decoding
• elm/time - Time-based subscriptions
• elm/random - Random number generation
• elm/browser - Browser events and routing
• D3.js v7 - Data visualization library
• JavaScript Ports - Elm-JavaScript interop

Architecture

Built using the Elm Architecture pattern:

• Model - Application state
• Update - State transitions
• View - HTML rendering
• Subscriptions - Side effects (time, keyboard)

Multi-page SPA with URL routing.

Running Locally

Option 1: Using elm reactor (for basic pages)

elm reactor
# Navigate to http://localhost:8000/src/Main.elm

Option 2: Compile + Open HTML (required for ports/localStorage)

elm make src/Main.elm --output=elm.js
# Then open index.html in your browser

Note: Use Option 2 if you want to test the Todo page's localStorage persistence.

What I Learned

• ✅ Elm Architecture (Model-Update-View)
• ✅ Immutability and pure functions
• ✅ Custom types and pattern matching
• ✅ Maybe and Result types for safe error handling
• ✅ Records and type aliases
• ✅ Commands for side effects
• ✅ Subscriptions for continuous events
• ✅ JSON encoding/decoding for type-safe data transfer
• ✅ HTTP requests with RemoteData pattern
• ✅ SVG rendering
• ✅ Multi-page routing with Browser.application
• ✅ Module organization and exposing
• ✅ JavaScript Ports for interop (outgoing/incoming)
• ✅ Bidirectional port communication (Elm ↔ JavaScript)
• ✅ LocalStorage integration via ports
• ✅ D3.js integration for data visualization
• ✅ Custom event decoders (keyboard events)