https://github.com/binghuan/calculator
This is a simple calculator app
https://github.com/binghuan/calculator
javascript webapp
Last synced: about 2 months ago
JSON representation
This is a simple calculator app
- Host: GitHub
- URL: https://github.com/binghuan/calculator
- Owner: binghuan
- Created: 2013-08-01T16:30:38.000Z (almost 13 years ago)
- Default Branch: gh-pages
- Last Pushed: 2025-07-31T13:11:03.000Z (11 months ago)
- Last Synced: 2025-07-31T17:14:01.218Z (11 months ago)
- Topics: javascript, webapp
- Language: JavaScript
- Homepage: http://studiobinghuan.blogspot.tw/2013/05/calculator.html?view=flipcard
- Size: 1.17 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Calculator
## Overview
A simple, responsive web-based calculator application with offline capabilities. This mobile-friendly calculator provides basic arithmetic operations and can be used without an internet connection after the initial load.
## ๐ Live Demo
- **Web App**: [http://binghuan.github.io/calculator/](http://binghuan.github.io/calculator/)
- **Blog Post**: [http://studiobinghuan.blogspot.tw/2013/05/calculator.html?view=flipcard](http://studiobinghuan.blogspot.tw/2013/05/calculator.html?view=flipcard)
## โจ Features
- **Basic Arithmetic Operations**: Addition (+), Subtraction (-), Multiplication (*), Division (/)
- **Offline Functionality**: Works without internet connection using Application Cache
- **Mobile Optimized**: Responsive design using jQuery Mobile framework
- **Touch-Friendly Interface**: Large buttons optimized for mobile devices
- **Clear Function**: Reset calculator with the "C" button
- **Real-time Display**: Shows calculations as you type
- **Progressive Web App**: Can be added to home screen on mobile devices
## ๐ ๏ธ Technology Stack
- **HTML5**: Structure and semantic markup with offline manifest
- **CSS3**: Styling with jQuery Mobile theme
- **JavaScript**: Calculator logic and event handling
- **jQuery 1.10.1**: DOM manipulation and event handling
- **jQuery Mobile 1.3.1**: Mobile UI framework for responsive design
- **Application Cache**: Enables offline functionality
## ๐ฑ Supported Operations
| Operation | Symbol | Button |
|-----------|--------|--------|
| Addition | + | + |
| Subtraction | - | - |
| Multiplication | * | * |
| Division | / | / |
| Equals | = | = |
| Clear | C | C |
| Numbers | 0-9 | 0-9 |
## ๐ How to Use
1. **Online**: Visit [the live demo](http://binghuan.github.io/calculator/)
2. **Offline**: After first visit, the app will work without internet connection
3. **Mobile**: Add to home screen for app-like experience
### Calculator Instructions:
1. Tap number buttons to input values
2. Tap operation buttons (+, -, *, /) to perform calculations
3. Tap "=" to see the result
4. Tap "C" to clear and start over
5. Calculations are performed left-to-right as you input operations
## ๐ Project Structure
```
calculator/
โโโ index.html # Main HTML file
โโโ calculator.js # Calculator logic and event handlers
โโโ calculator.css # Custom styles
โโโ calculator.appcache # Offline cache manifest
โโโ jquery-1.10.1.min.js # jQuery library
โโโ jquery.mobile-1.3.1.min.js # jQuery Mobile JavaScript
โโโ jquery.mobile-1.3.1.min.css # jQuery Mobile CSS
โโโ Icon.png # App icon
โโโ README.md # This file
โโโ icons/ # Various app icon sizes
โ โโโ Icon-16.png
โ โโโ Icon-32.png
โ โโโ Icon-48.png
โ โโโ ... (various sizes for different devices)
โโโ images/ # UI assets
โโโ ajax-loader.gif
โโโ calculator_icon.png
โโโ ... (jQuery Mobile icons)
```
## ๐ง Installation & Development
### Local Development:
1. Clone the repository:
```bash
git clone https://github.com/binghuan/calculator.git
cd calculator
```
2. Open `index.html` in a web browser or serve it using a local web server:
```bash
# Using Python 3
python -m http.server 8000
# Using Python 2
python -m SimpleHTTPServer 8000
# Using Node.js (if you have http-server installed)
npx http-server
```
3. Navigate to `http://localhost:8000` in your browser
### Deployment:
The app is configured for GitHub Pages deployment. Simply push to the `gh-pages` branch to update the live version.
## ๐ Browser Compatibility
- **Mobile Browsers**: iOS Safari, Android Chrome, Mobile Firefox
- **Desktop Browsers**: Chrome, Firefox, Safari, Edge
- **Offline Support**: All modern browsers with Application Cache support
## ๐ฏ Key Implementation Details
- **State Management**: Uses JavaScript variables to track current value, last operator, and calculation state
- **Event Handling**: jQuery event listeners for all button interactions
- **Calculation Logic**: Handles operator precedence and chained calculations
- **Offline Cache**: Application Cache manifest ensures all resources are cached for offline use
- **Mobile Optimization**: Viewport meta tags and jQuery Mobile for touch-friendly interface
## ๐ Future Enhancements
- [ ] Add decimal point support
- [ ] Implement memory functions (M+, M-, MR, MC)
- [ ] Add scientific calculator functions
- [ ] Implement keyboard support
- [ ] Add calculation history
- [ ] Migrate from deprecated Application Cache to Service Workers
## ๐จโ๐ป About
This is my second web application, created to demonstrate offline web app capabilities and mobile-first design principles. The primary focus was on creating a functional calculator that works seamlessly without an internet connection.
**Powered by BH_Lin**
---
### ไธญๆ่ชชๆ
้ๆฏๆ็็ฌฌไบๅ็ถฒ้ ๆ็จ็จๅผใๆฌ็จๅผ็็นๆงๆฏ๏ผไฝฟ็จ่
ๅฏไปฅๅจ้ข็ท็็ฐๅขไธ๏ผไพ็ถๅฏไปฅไฝฟ็จๆฌ็ถฒ้ ๆ็จ็จๅผใ้ๅ็ฐกๅฎ็่จ็ฎๆฉๆ็จ็จๅผๆฏๆดๅบๆฌ็ๆธๅญธ้็ฎ๏ผไธฆไธ้ๅฐ่กๅ่ฃ็ฝฎ้ฒ่กไบๆไฝณๅใ