Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/bleckwolf25/thegreatcalculator

A super advanced, performant, responsive, accessible and ease of use calculator.
https://github.com/bleckwolf25/thegreatcalculator

app calculator calculator-application calculator-javascript html-css-javascript html5 webapp webapplication

Last synced: 5 months ago
JSON representation

A super advanced, performant, responsive, accessible and ease of use calculator.

Awesome Lists containing this project

README 

          
# The Great Calculator



A modern, enterprise-grade scientific calculator web application with advanced features, accessibility support, and Progressive Web App capabilities. Built with a modular architecture and comprehensive testing suite.



## โœจ Features



### ๐Ÿงฎ Core Calculator Functions



- **Basic Operations**: Addition, subtraction, multiplication, division

- **Scientific Functions**: Trigonometric (sin, cos, tan), logarithmic (ln, log), exponential, factorial

- **Advanced Math**: Square root, power functions, parentheses support

- **Memory Operations**: Store, recall, clear memory (MS, MR, MC)

- **Constants**: ฯ€ (Pi) and other mathematical constants



### ๐ŸŽจ User Experience



- **Dual Themes**: Dark/Light mode with system preference detection

- **Responsive Design**: Optimized for desktop, tablet, and mobile devices

- **Touch & Gesture Support**: Swipe gestures and haptic feedback

- **Keyboard Navigation**: Full keyboard support with shortcuts

- **Visual Feedback**: Button animations and state indicators



### โ™ฟ Accessibility Features



- **Screen Reader Support**: ARIA labels, live regions, and semantic HTML

- **Keyboard Navigation**: Tab order, focus management, and shortcuts

- **Motor Accessibility**: Large touch targets, dwell control, sticky keys

- **Cognitive Support**: Simplified interface options, confirmations, contextual help

- **Visual Accessibility**: High contrast mode, large text, color blindness support

- **Voice Control**: Speech recognition for hands-free operation



### ๐Ÿ“ฑ Progressive Web App (PWA)



- **Offline Support**: Full functionality without internet connection

- **Installable**: Add to home screen on mobile and desktop

- **Service Worker**: Background sync and caching strategies

- **App-like Experience**: Native app feel with web technologies



### ๐Ÿ”ง Advanced Features



- **Undo/Redo**: Multi-level operation history with state management

- **Formula Management**: Save and recall custom formulas

- **PDF Export**: Export calculation history and results

- **Performance Monitoring**: Real-time performance metrics and optimization

- **Error Boundaries**: Graceful error handling and recovery

- **Bundle Optimization**: Code splitting and lazy loading



## ๐ŸŒ Live Demo



Visit **[The Great Calculator](https://the-great-calculator.vercel.app)** to try it out!



## ๐Ÿ› ๏ธ Technologies & Architecture



### Frontend Stack



- **HTML5**: Semantic markup with accessibility features

- **CSS3**: Modern styling with CSS Grid, Flexbox, and custom properties

- **JavaScript (ES6+)**: Modular architecture with ES modules

- **Vite**: Build tool with HMR and optimization

- **PWA**: Service Worker, Web App Manifest, and offline capabilities



### Development Tools



- **TypeScript**: Type annotations and JSDoc documentation

- **ESLint**: Code linting with security and accessibility rules

- **Prettier**: Code formatting and style consistency

- **Jest**: Unit testing with 95%+ coverage requirement

- **Playwright**: End-to-end testing and accessibility auditing



### Infrastructure & Deployment



- **Vercel**: Serverless deployment with edge functions

- **GitHub Actions**: CI/CD pipeline with automated testing and deployment

- **CodeQL**: Security analysis and vulnerability scanning

- **Dependabot**: Automated dependency updates



### Performance & Monitoring



- **Web Vitals**: Core Web Vitals monitoring and optimization

- **Bundle Analysis**: Code splitting and tree shaking

- **Performance API**: Real-time performance metrics

- **Error Tracking**: Comprehensive error boundary system



## ๐Ÿš€ Getting Started



### Prerequisites



- Node.js 18+ and npm

- Modern browser with ES6+ support



### Installation



1. **Clone the repository:**



   ```bash

   git clone https://github.com/BleckWolf25/TheGreatCalculator.git

   cd TheGreatCalculator

   ```



2. **Install dependencies:**



   ```bash

   npm install

   ```



3. **Start development server:**



   ```bash

   npm run dev

   ```



4. **Open your browser:**

   Navigate to `http://localhost:3000`



### Alternative: Direct Usage



For quick testing, you can open `index.html` directly in a modern browser, though some features may require a local server.



## ๐Ÿงช Development



### Available Scripts



```bash

# Development

npm run dev              # Start development server with HMR

npm run build           # Build for production

npm run preview         # Preview production build



# Testing

npm run test            # Run unit tests

npm run test:coverage   # Run tests with coverage report

npm run test:e2e        # Run end-to-end tests

npm run test:all        # Run all tests



# Code Quality

npm run lint            # Run ESLint

npm run lint:fix        # Fix ESLint issues

npm run format          # Format code with Prettier



# PWA & Performance

npm run build:pwa       # Build PWA version

npm run optimize        # Run bundle optimization

npm run analyze         # Analyze bundle size



# Deployment

npm run deploy          # Deploy to Vercel

npm run deploy:preview  # Deploy preview version

```



### Testing Strategy



- **Unit Tests**: Jest with 95%+ coverage requirement

- **E2E Tests**: Playwright for cross-browser testing

- **Accessibility Tests**: Automated a11y auditing with axe-core

- **Performance Tests**: Lighthouse CI and Web Vitals monitoring



### Project Structure



```text

src/

โ”œโ”€โ”€ js/

โ”‚   โ”œโ”€โ”€ modules/           # Modular calculator components

โ”‚   โ”‚   โ”œโ”€โ”€ core/         # Core functionality (state, operations)

โ”‚   โ”‚   โ”œโ”€โ”€ ui/           # User interface components

โ”‚   โ”‚   โ”œโ”€โ”€ accessibility/ # Accessibility features

โ”‚   โ”‚   โ”œโ”€โ”€ export/       # Export functionality

โ”‚   โ”‚   โ”œโ”€โ”€ performance/  # Performance monitoring

โ”‚   โ”‚   โ””โ”€โ”€ vercel/       # Vercel integration

โ”‚   โ”œโ”€โ”€ main.js           # Application entry point

โ”‚   โ””โ”€โ”€ moduleLoader.js   # Dynamic module loading

โ”œโ”€โ”€ css/                  # Stylesheets

โ”œโ”€โ”€ styles/               # Theme files

โ””โ”€โ”€ assets/               # Static assets

```



## ๐Ÿค Contributing



We welcome contributions! Please follow these guidelines:



### Development Workflow



1. **Fork the repository**

2. **Create a feature branch:**



   ```bash

   git checkout -b feature/amazing-feature

   ```



3. **Make your changes** following our coding standards

4. **Run tests:**



   ```bash

   npm run test:all

   npm run lint

   ```



5. **Commit using Conventional Commits:**



   ```bash

   git commit -m "feat(calculator): add new scientific function"

   ```



6. **Push and create a Pull Request**



### Coding Standards



- **ES6+ JavaScript** with JSDoc documentation

- **Semantic HTML5** with ARIA attributes

- **CSS3** with custom properties and modern features

- **95%+ test coverage** for new features

- **Accessibility-first** development approach



### Commit Message Format



We use [Conventional Commits](https://www.conventionalcommits.org/):



- `feat:` New features

- `fix:` Bug fixes

- `docs:` Documentation changes

- `style:` Code style changes

- `refactor:` Code refactoring

- `test:` Test additions/modifications

- `chore:` Maintenance tasks



## ๐Ÿ“„ License



This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.



## ๐Ÿ™ Acknowledgments



- **Design Inspiration**: iOS Calculator and Material Design

- **Accessibility Guidelines**: WCAG 2.1 AA standards

- **Performance Best Practices**: Web.dev and Core Web Vitals

- **Testing Methodologies**: Testing Library and Playwright communities



## ๐Ÿ”„ Automated Releases



This project uses [semantic-release](https://semantic-release.gitbook.io/) for fully automated versioning and changelog generation.



### How It Works



- **Automated Versioning**: Version numbers determined from commit messages

- **Changelog Generation**: Automatic changelog updates in [CHANGELOG.md](./CHANGELOG.md)

- **GitHub Releases**: Automated release creation with release notes

- **CI/CD Integration**: Releases triggered by GitHub Actions



### Release Process



Releases are automatically triggered when commits are pushed to the `main` branch. The release type is determined by commit message prefixes:



- `fix:` โ†’ Patch release (1.0.1)

- `feat:` โ†’ Minor release (1.1.0)

- `feat!:` or `BREAKING CHANGE:` โ†’ Major release (2.0.0)



## ๐Ÿ“Š Project Status



- โœ… **Production Ready**: Deployed and actively maintained

- โœ… **PWA Compliant**: Installable with offline support

- โœ… **Accessibility Compliant**: WCAG 2.1 AA standards

- โœ… **Performance Optimized**: Core Web Vitals passing

- โœ… **Security Hardened**: Regular security audits and updates



## ๐Ÿ”— Links



- **Live Demo**: [the-great-calculator.vercel.app](https://the-great-calculator.vercel.app)

- **Repository**: [GitHub](https://github.com/BleckWolf25/TheGreatCalculator)

- **Issues**: [Bug Reports & Feature Requests](https://github.com/BleckWolf25/TheGreatCalculator/issues)

- **Discussions**: [Community Discussions](https://github.com/BleckWolf25/TheGreatCalculator/discussions)



---



## ๐Ÿ‘จโ€๐Ÿ’ป Author



**Built with โค๏ธ by [Bleckwolf25](https://github.com/BleckWolf25)**



> Making mathematics accessible to everyone