An interactive web application for economics students to practice real-world currency exchange calculations.
Live Demo: your-username.github.io/currency-exchange
- Convert between USD, EUR, GBP, JPY, CAD
- Live exchange rates via ExchangeRate-API (free, no key needed)
- Dynamic 0.5%–2.0% service fee per transaction (randomised)
- Fee alert when fee exceeds 1.5%
- Market Fluctuation button — randomly shifts rates ±5%
- Full transaction history with timestamps
- Running P&L tracking across all transactions
- Dark / Light theme toggle
- LocalStorage persistence — data survives page refresh
- Fully responsive — works on mobile
| Layer | Technology |
|---|---|
| Framework | Vue 3 (CDN) |
| Styling | Pure CSS (Flexbox + Grid) |
| State | Vue reactive / ref / computed |
| Data | ExchangeRate-API + mock fallback |
| Storage | localStorage |
| Hosting | GitHub Pages |
No build step needed — just open index.html in a browser:
git clone https://github.com/YOUR_USERNAME/currency-exchange.git
cd currency-exchange
# Open index.html in your browser
# OR use Live Server in VS Code# 1. Create repo on GitHub named: currency-exchange
# 2. Push your code
git init
git add .
git commit -m "feat: initial project scaffold"
git remote add origin https://github.com/YOUR_USERNAME/currency-exchange.git
git push -u origin main
# 3. Enable GitHub Pages
# Go to repo Settings → Pages → Source: main branch → / (root) → Save
# Live at: https://YOUR_USERNAME.github.io/currency-exchangegit commit -m "feat: initial project scaffold (HTML/CSS structure)"
git commit -m "feat: Vue 3 reactive state + currency conversion engine"
git commit -m "feat: live rate fetching with ExchangeRate-API + fallback"
git commit -m "feat: transaction history + portfolio P&L tracking"
git commit -m "feat: market fluctuation, dark mode, fee alerts, localStorage"
git commit -m "fix: responsive layout fixes for mobile"
git commit -m "docs: add README with setup and deployment instructions"
currency-exchange/
├── index.html # Semantic HTML + Vue template
├── style.css # Responsive CSS (dark/light mode)
├── app.js # Vue 3 application logic
└── README.md # This file
ExchangeRate-API (free tier, no key required):
GET https://api.exchangerate-api.com/v4/latest/USD
Returns rates for all currencies relative to USD. The app gracefully falls back to mock data if the API is unavailable.
Challenges:
- Keeping preview fee stable while user types (solved with
_lockedFeeRate) - Dark mode persistence across page loads (solved with
localStorage+watch) - Handling API failures gracefully (solved with try/catch + seed rates fallback)
Possible Improvements:
- Add a chart showing rate history over time (Chart.js)
- Support more than 5 currencies
- Add a "Compare rates" mode showing all pairs in a matrix
- Real-time WebSocket rate streaming