DevPrep
  • Interview Prep
  • Projects
  • Resources
  • Pricing
  • About Us
Submit Question
DevPrep
  • Pricing
  • About Us
Submit Question
← From Beginner to Expert in Fundamentals of Frontend
  • Project 1: The Performance-First Dashboard
  • Project 2: Accessible Video Player
  • Project 3: Markdown Blog Engine
  • Project 4: Browser-Based Code Editor
  • Project 5: Multi-Tab Whiteboard
  • Project 6: Infinite Scroll Image Gallery
  • Project 7: Recipe Optimizer & Converter
  • Project 8: Budget Tracker with Charts
  • Project 9: Typing Speed Test
  • Project 10: Weather App with Time-Travel
  • Project 11: CSS Grid Layout Builder
  • Project 12: Password Vault (Frontend Only)
  • Project 13: Kanban Board (Trello Clone)
  • Project 14: Quiz App with Leaderboard
  • Project 15: Habit Tracker (GitHub Style)
  • Project 16: E-commerce Product Page
  • Project 17: Unit Converter (Expert Mode)
  • Project 18: Music Visualizer
  • Project 19: Flashcard Learning App
  • Project 20: Custom Form Validator
  • Project 21: Virtual Terminal
  • Project 22: Pomodoro Timer (Focus Pro)
  • Project 23: SVG Path Editor
  • Project 24: Movie Database Matchmaker
  • Project 25: Interactive Resume / Portfolio
  • Project 26: Recipe Scraper UI
  • Project 27: Crypto Tracker (Real-Time)
  • Project 28: Find My Pet (PWA)
  • Project 29: Markdown-to-Slide Tool
  • Project 30: Browser Health Dashboard
← From Beginner to Expert in Fundamentals of Frontend

Project 17: Unit Converter (Expert Mode)

35 min read
API IntegrationScientific NotationSearchable DropdownsUnit Conversion MathCaching StrategyConversion History

📋 Project Brief

Build a comprehensive unit converter supporting scientific, financial, and everyday measurements. This includes live currency exchange rates via API, scientific notation for extreme values, and a searchable dropdown system for finding units quickly.

✅ Feature Requirements

Feature 1: Live Currency Exchange

Acceptance Criteria:

  • Fetch real-time exchange rates from a financial API (e.g., exchangerate-api.com)
  • Support at least 30 major currencies
  • Cache rates for 1 hour to reduce API calls
  • Show "Last updated: X minutes ago" timestamp
  • Handle API failures by using cached/fallback rates with a warning badge

Feature 2: Scientific Notation

Acceptance Criteria:

  • Support very large numbers (e.g., kilometers to nanometers: 1 km = 1,000,000,000,000 nm)
  • Automatically switch to scientific notation (e.g., 1 × 10¹²) when numbers exceed 6 digits
  • Support very small numbers (e.g., 0.000001 → 1 × 10⁻⁶)
  • A toggle to switch between standard and scientific notation display

Feature 3: Searchable Dropdowns

Acceptance Criteria:

  • Typing in the unit selector filters the list in real-time
  • Search matches unit name, abbreviation, and category
  • Recent/frequent units appear at the top of the list
  • Keyboard navigation: arrow keys to move, Enter to select

Feature 4: Conversion History

Acceptance Criteria:

  • A side panel shows the last 10 conversions
  • Each entry shows: input value, input unit, output value, output unit, timestamp
  • Clicking a history entry re-populates the converter
  • History persists in localStorage

Feature 5: Reverse Toggle

Acceptance Criteria:

  • A single button swaps the "From" and "To" units instantly
  • The input value stays the same; the result recalculates
  • The button has a rotate animation (↔) on click

📊 Unit Categories

CategoryExample Units
Lengthmm, cm, m, km, in, ft, yd, mi, nm, μm
Weightmg, g, kg, oz, lb, ton, stone
Temperature°C, °F, K
VolumemL, L, gal, qt, pt, cup, tbsp, tsp, fl oz
Speedm/s, km/h, mph, knots
Databit, byte, KB, MB, GB, TB, PB
Timems, s, min, hr, day, week, month, year
CurrencyUSD, EUR, GBP, JPY, INR, + 25 more

🧪 Testing Checklist

  • Unit test all conversion formulas (especially temperature which isn't simple multiplication)
  • Unit test scientific notation formatting
  • Unit test search/filter algorithm
  • Integration test: selecting units and entering a value produces correct output
  • A11y: all dropdowns and inputs properly labeled

🚀 Stretch Goals

  • Add a "Favorites" list for frequently used conversions
  • Implement batch conversion (convert one value to multiple units simultaneously)
  • Add a conversion formula display ("1 mile = 1.60934 kilometers")

Practice

  • JavaScript
  • DSA
  • Machine Coding
  • System Design

Resources

  • Learning Tracks
  • Articles
  • Roadmaps
  • Compare Concepts
  • Glossary
  • Developer Tools
  • All Questions

Company

  • About
  • Pricing

Legal

  • Privacy Policy
  • Terms of Service
DevPrep

© 2026 DevPrep. All rights reserved.