A lightweight, standalone JavaScript calculator library that renders a fully functional calculator UI using Bootstrap 5 classes. No dependencies required except Bootstrap CSS.
- 🚀 Zero Dependencies - Only requires Bootstrap 5 CSS
- 📱 Responsive Design - Works perfectly on mobile and desktop
- ⌨️ Keyboard Support - Full keyboard navigation and input
- 🎨 Customizable - Easy to override styling with CSS
- 🔢 Mathematical Accuracy - Proper operator precedence and safe evaluation
- 📊 Percentage Calculations - Correctly handles percentage operations (e.g., 1200+18% = 1416)
- 🛡️ Error Handling - Smart error recovery and validation
- 🔄 Multiple Instances - Create multiple calculators on the same page
- 🎯 Lightweight - Under 10KB minified
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><script src="bootstrap-calculator.js"></script><div id="my-calculator"></div>const calculator = new BootstrapCalculator('#my-calculator');
calculator.init();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div id="calculator-container"></div>
</div>
</div>
</div>
<script src="bootstrap-calculator.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const calc = new BootstrapCalculator('#calculator-container');
calc.init();
});
</script>
</body>
</html>new BootstrapCalculator(containerSelector)containerSelector(string): CSS selector for the container element
Initializes the calculator and renders the UI.
calculator.init();Clears the calculator display.
calculator.clear();Returns the current display value as a string.
const currentValue = calculator.getValue();
console.log(currentValue); // "123.45"Sets the display to a specific value.
calculator.setValue('1234');
calculator.setValue(42.5);Removes the calculator UI and cleans up event listeners.
calculator.destroy();The calculator supports full keyboard input when focused:
| Key | Action |
|---|---|
0-9 |
Number input |
. |
Decimal point |
+ - * / |
Mathematical operators |
% |
Percentage |
= or Enter |
Calculate result |
Escape or C |
Clear |
Backspace |
Delete last character |
The calculator uses standard Bootstrap 5 classes, making it easy to customize:
/* Custom display styling */
.calculator-wrapper .calc-display {
background-color: #2d3748;
color: #e2e8f0;
font-family: 'Courier New', monospace;
}
/* Custom button styling */
.calculator-wrapper .calc-btn {
height: 60px;
border-radius: 8px;
transition: all 0.2s ease;
}
/* Number buttons specifically */
.calculator-wrapper .number-btn {
background-color: #f8f9fa;
}
/* Operator buttons */
.calculator-wrapper .btn-outline-primary {
border-color: #007bff;
}.calculator-wrapper- Main wrapper.calc-display- Display input field.calc-btn- All calculator buttons.number-btn- Number buttons only- Standard Bootstrap button classes (
btn-primary,btn-light, etc.)
The calculator follows standard mathematical order of operations:
- Multiplication (
×) and Division (÷) are calculated before Addition (+) and Subtraction (−) - Example:
2+3×4=14(not20)
- Addition/Subtraction:
1200+18%calculates as1200 + (18% of 1200)=1416 - Standalone:
18%calculates as18 ÷ 100=0.18
- Division by zero: Shows "Error: Invalid result"
- Invalid expressions: Shows "Error: Invalid expression"
- Automatic error recovery when starting new calculations
Create multiple calculators on the same page:
// Calculator 1
const calc1 = new BootstrapCalculator('#calculator-1');
calc1.init();
// Calculator 2
const calc2 = new BootstrapCalculator('#calculator-2');
calc2.init();
// They operate independently
calc1.setValue('100');
calc2.setValue('200');- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
Requires ES6 class support and Bootstrap 5 compatible browsers
This calculator intentionally keeps things simple and doesn't include:
- Scientific functions (sin, cos, log, etc.)
- Memory functions (M+, M-, MR, MC)
- History/previous calculations
- Complex number support
- Parentheses for grouping
Contributions are welcome! Please feel free to submit issues and pull requests.
- Clone the repository
- Open
index.htmlin your browser - Make changes to
bootstrap-calculator.js - Test thoroughly across different browsers
MIT License - feel free to use in commercial and personal projects.
Made with ❤️ and Bootstrap 5
If you find this useful, please give it a ⭐ on GitHub!