Sentry Calculator

A modern, responsive calculator application built with vanilla JavaScript, HTML, and CSS. Inspired by Sentry's design system with a sleek dark theme and smooth animations.

https://adal3n3.github.io/sentry-calculator/

Features

• Modern UI: Clean, professional interface inspired by Sentry's design language
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Keyboard Support: Full keyboard navigation and input support
• Visual Feedback: Button press animations and ripple effects
• Error Handling: Graceful error handling for edge cases like division by zero
• Accessibility: WCAG compliant with proper focus management and high contrast support

Functionality

• Basic arithmetic operations (addition, subtraction, multiplication, division)
• Decimal number support
• Percentage calculations
• Clear and delete operations
• Keyboard shortcuts for all operations
• Auto-scaling display for long numbers
• Number formatting with thousand separators

Keyboard Shortcuts

• Numbers: 0-9 - Input numbers
• Operations: +, -, *, / - Arithmetic operations
• Decimal: . or , - Add decimal point
• Calculate: = or Enter - Perform calculation
• Clear: Escape or Delete - Clear all
• Backspace: Backspace - Delete last digit
• Percentage: % - Convert to percentage

Technologies Used

• HTML5: Semantic markup structure
• CSS3: Modern styling with CSS Grid, Flexbox, and custom properties
• JavaScript (ES6+): Object-oriented calculator logic with event handling
• Google Fonts: Inter font family for typography

File Structure

Calculator/
├── index.html          # Main HTML structure
├── styles.css          # CSS styles and responsive design
├── script.js           # JavaScript calculator logic
├── tests/              # Test files
│   ├── calculator.test.js
│   └── e2e.test.js
└── README.md           # Project documentation

Getting Started

1. Clone the repository:

   git clone https://github.com/Adal3n3/sentry-calculator.git

2. Navigate to the project directory:

   cd sentry-calculator

3. Open index.html in your web browser or serve it using a local server:

   # Using Python 3
   python -m http.server 8000
   
   # Using Node.js (if you have http-server installed)
   npx http-server

4. Visit http://localhost:8000 in your browser

Design System

The calculator uses a carefully crafted color palette inspired by Sentry:

• Primary Colors: Purple gradient (#9a7aff to #7c5dfa)
• Background: Dark theme with layered backgrounds
• Typography: Inter font family for optimal readability
• Spacing: Consistent 8px grid system
• Shadows: Layered shadows for depth and hierarchy

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Acknowledgments

• Design inspiration from Sentry
• Icons from Heroicons
• Typography from Google Fonts (Inter)