gifthlahla/zim-currency-converter
Domain:
digital infrastructureRecord type:
software
Creator:
gif
Host:
A minimalist, real-time currency converter for Zimbabwe and the SADC region built with vanilla HTML, CSS & JavaScript, featuring live rates, light/dark themes, and a clean 60-30-10 design system.
## Introduction
Zim Currency Converter is a static, vanilla‑JavaScript app (index.html, style.css, script.js) that queries ExchangeRate‑API v6 for per‑base exchange rates, caches responses for 60 seconds, and presents accessible, keyboard‑navigable custom selects. The app uses locale‑aware formatting and includes light/dark themes and in‑memory caching for snappy responses.
Note: for this demo the API key is stored in `script.js` and will be visible to end users. For production deployments, proxy requests through a backend or use provider-side restrictions to avoid exposing API keys client-side.
---
## 🚀 Live Demo
> **gifthlahla.github.io
---
|---|---|
|---|---|
| Structure | HTML5 (Semantic, Accessible) |
| Styling | CSS3 (Custom Properties, Flexbox, Media Queries) |
| Logic | Vanilla JavaScript (ES6+, Strict Mode) |
| API | ExchangeRate-API (free tier) |
| Hosting | GitHub Pages |
**Zero dependencies** — no npm, no frameworks, no build tools.
---
## Screenshots
| Light Mode | Dark Mode |
|---|---|
| | |
---
## Project Structure
```
zim-currency-converter/
├── index.html # Page structure & semantic markup
├── style.css # Complete design system & responsive styling
├── script.js # API calls, DOM logic, currency formatting
├── assets/
│ └── favicon.svg # App favicon
├── README.md # This file
├── SCOPE.md # Master task checklist
├── PROGRESS.md # Development tracking log
└── SKILL.md # Design constitution & AI rules
```
---
## How It Works
1. Select your base currency (default: ZWL)
2. Select your target currency (default: ZAR)
3. Enter the amount to convert
4. Click **Convert** — the app fetches the live exchange rate and displays the result
5. Use the **swap button** (⇄) to quickly reverse the currency pair
6. Toggle the **theme button** (☀️/🌙) to switch between light and dark modes
---
## Review Summary
- **Implementation:** Single-file static app using `in …