A comprehensive credit simulator web application for calculating loan payments in Cabo Verde. Built with vanilla JavaScript, HTML, and CSS, featuring a modern UI with dark mode and bilingual support (Portuguese & English).
- Monthly Payment Calculation: Calculate exact monthly payment amounts based on principal, interest rate, and period
- TAEG Support: Use TAEG (Taxa Anual Efetiva Global / Annual Effective Rate) for real cost calculations including fees and insurance
- Flexible Period Input: Enter loan period in months or years
- Real-time Calculations: Results update instantly as you adjust input values
- Interactive Sliders: Range sliders for quick value adjustments with visual feedback
- Form Validation: Real-time validation with error messages for invalid inputs
- Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile devices
- Dark Mode: Toggle between light and dark themes with automatic system preference detection
- Bilingual Support: Switch between Portuguese and English seamlessly (language preference saved automatically)
- Comprehensive Results Card: View monthly payment, TAEG, total amount to pay, and total interest
- Amortization Schedule: Expandable table showing first 12 months of payment breakdown
- Comparison Mode: Capture and compare two different scenarios side-by-side
- Copy Results: Easy one-click copy to clipboard for sharing calculations
- Info Popups: Contextual help buttons with detailed explanations and formulas
- Calculation Method Badge: See which calculation method is being used (Nominal or TAEG)
- Summary Section: Quick overview of calculation parameters and results
- Keyboard Shortcuts:
- Enter: Calculate
- Escape: Close popup
- Success Notifications: Visual feedback for user actions
The app can be installed directly on your device for a native-like experience:
- Install on Android/Desktop: Click the install icon in the browser address bar (Chrome/Edge)
- Install on iOS: Safari → Share → Add to Home Screen
- Offline support: All core assets are cached on first visit — the app works without an internet connection
- Standalone mode: Runs without browser chrome (no address bar) when installed
manifest.json— defines app name, theme colors, icons, and display modesw.js— service worker with cache-first strategy for static assets and network-first fallback for everything else
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No dependencies or build tools required
- Download or Clone:
git clone https://github.com/marovski/simuladorcreditoCV.git
cd simuladorcreditoCV- Open in Browser:
Simply open
index.htmlin your web browser:
- Double-click the file, or
- Right-click → Open with → Browser, or
- Use a local server for best experience
For the best development experience, use Python's built-in server:
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000Then visit: http://localhost:8000
-
Enter Loan Amount (Montante do Crédito):
- Use the slider or input field
- Range: 10,000 - 5,000,000 CVE
-
Set Payment Period (Período de Pagamento):
- Enter value and select months or years
- The slider updates as you type
-
Enter Interest Rate (Taxa Nominal Anual):
- Input the annual interest rate
- Range: 0% - 30%
-
Click Calculate or press Enter:
- Results appear instantly
- Review monthly payment, total cost, and interest
- Check "Usar TAEG fornecida pelo banco"
- Enter TAEG percentage from your bank
- Results update to reflect real cost including all fees and insurance
- Look for "Cronograma de Amortização" section
- Click the toggle button to expand
- View first 12 months of payment breakdown:
- Month number
- Monthly payment amount
- Interest portion
- Remaining balance
- Make initial calculation
- Click "📸 Capturar para Comparação" - saves current scenario
- Adjust loan parameters
- Click button again - compares with saved scenario
- View side-by-side comparison with highlighted differences
- Click the sun/moon icon in the top-right header
- Theme preference is saved automatically
- System preference is detected on first visit
- Click the language button (PT/EN) in the top-right header
- Switch between Portuguese and English instantly
- All content translates dynamically:
- Form labels and buttons
- Error messages
- Help popup information
- Results sections and calculations
- Amortization schedule headers
- Language preference is saved automatically
simuladorcreditoCV/
├── index.html # Main HTML file with form and results
├── styles.css # Complete styling with dark mode support
├── script.js # Core calculation logic and interactivity
├── sw.js # Service worker for offline support (PWA)
├── manifest.json # Web app manifest (PWA)
├── favicon.svg # App icon (finance + CV themed)
└── README.md # This file
- HTML5: Semantic markup structure
- CSS3: Modern styling with CSS variables and animations
- Vanilla JavaScript: No frameworks, pure ES6+
- SVG: Scalable vector icons
- CSS Grid & Flexbox: Responsive layout
PMT = P × [i × (1+i)ⁿ] ÷ [(1+i)ⁿ - 1]
Where:
P = Principal amount
i = Monthly interest rate (annual rate ÷ 12)
n = Number of months
TAEG = [(1 + monthly_rate)^12 - 1] × 100
Total Interest = (Monthly Payment × Number of Months) - Principal
Edit the CSS variables in styles.css:
:root {
--primary: #2563eb; /* Main blue */
--primary-dark: #1e40af; /* Darker blue */
--success: #16a34a; /* Green */
--warning: #ea580c; /* Orange */
--danger: #dc2626; /* Red */
}In index.html, modify slider attributes:
<!-- Amount slider -->
<input type="range" min="10000" max="5000000" step="10000">
<!-- Period slider -->
<input type="range" min="6" max="360" step="1">
<!-- Rate slider -->
<input type="range" min="1" max="30" step="0.5">| Browser | Support |
|---|---|
| Chrome | ✅ Full |
| Firefox | ✅ Full |
| Safari | ✅ Full |
| Edge | ✅ Full |
| IE 11 |
- All calculations are performed locally in your browser
- No data is sent to any server
- Results are only stored in your browser's localStorage (dark mode preference)
The app validates:
- ✅ Amount between 10,000 and 5,000,000 CVE
- ✅ Period greater than 0 months
- ✅ Interest rate between 0% and 30%
- ✅ TAEG must be greater than 0 if enabled
Error messages guide you to correct inputs.
- Personal Loans: Calculate monthly payments for personal credit
- Car Loans: Estimate vehicle financing costs
- Home Mortgages: Preliminary mortgage calculations
- Business Planning: Financial forecasting
- Comparison Shopping: Compare bank offers using TAEG
Currently supports:
- Languages: Portuguese (Portugal/Cape Verde) and English
- Currency Format: Cabo Verde Escudo (CVE)
- Number Format: Locale-specific formatting (pt-CV)
The app automatically remembers your language preference and applies it on every visit.
To add a new language, update the translations object in script.js:
const translations = {
pt: { /* Portuguese translations */ },
en: { /* English translations */ },
es: { // Add Spanish
app: { title: 'Simulador de Crédito', ... },
form: { /* form translations */ },
// ... other sections
}
};
// Then update toggleLanguage() to cycle through: pt → en → es → ptTo modify currency format, edit formatCurrency() in script.js:
function formatCurrency(value) {
return new Intl.NumberFormat('pt-CV', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(value);
}- Amortization schedule shows first 12 months only
- Very large loan amounts may have minor floating-point precision issues
- Mobile: Sliders may be difficult to use on very small screens
Found a bug or have a feature request? Feel free to contribute!
Areas for enhancement:
- PDF export of amortization schedule
- Chart visualization of payment breakdown
- Comparison of multiple scenarios
- Additional languages (Spanish, French, etc.)
MIT License - Feel free to use, modify, and distribute.
Mário Cardoso
- Portfolio: marovski.github.io
- Email: Contact via GitHub
© 2026 Simulador de Crédito Cabo Verde
For questions or issues:
- Check the info buttons (ℹ️) in the app for detailed explanations
- Review this README
- Open an issue on GitHub
- 📲 Progressive Web App (PWA): App is now installable on Android, iOS, and desktop
- 🔌 Offline Support: Core assets cached via service worker — works without internet after first visit
- 🗂️ Web App Manifest: Defines app identity, theme colors, and standalone display mode
- ⚡ Cache-first strategy: Instant load for static assets on repeat visits
- 🌍 Bilingual Support: Portuguese and English language toggle
- 💾 Language preference saved to localStorage
- 🔄 Dynamic translation of all content (forms, results, messages, popups)
- ⚡ Seamless language switching without page reload
- 📖 Complete English documentation and help text
- ✨ Complete UI/UX overhaul
- 🌙 Dark mode support
- 🎨 Enhanced icon-box with animations
- 📊 Amortization schedule
- 🔀 Comparison mode
- 📋 Copy results to clipboard
- ⌨️ Keyboard shortcuts
- 📱 Improved responsive design
- ✅ Form validation with error messages
- 🎯 Interactive range sliders
- Basic loan calculator functionality
- TAEG support
- Form validation
- Responsive layout
Happy calculating! 💰📊