https://github.com/mah-shamim/simple-calculator
Create a basic calculator that can perform addition, subtraction, multiplication, and division.
https://github.com/mah-shamim/simple-calculator
Last synced: 25 days ago
JSON representation
Create a basic calculator that can perform addition, subtraction, multiplication, and division.
- Host: GitHub
- URL: https://github.com/mah-shamim/simple-calculator
- Owner: mah-shamim
- License: mit
- Created: 2024-07-28T20:25:20.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-08-01T19:32:13.000Z (9 months ago)
- Last Synced: 2025-02-12T17:53:24.211Z (3 months ago)
- Language: HTML
- Size: 18.6 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simple Calculator
## Create a basic calculator that can perform addition, subtraction, multiplication, and division.
Creating a basic calculator with PHP, CSS, and AJAX involves a few key components:
1. **Frontend (HTML + CSS + JavaScript/AJAX)**: This handles the user interface and interactions.
2. **Backend (PHP)**: This handles the calculation logic and returns the results.
### 1. Frontend: HTML + CSS + JavaScript/AJAX
**HTML (index.html)**:
```html
Simple Calculator
```
**CSS (styles.css)**:
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.calculator {
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
padding: 10px;
width: 200px;
}
#display {
width: 100%;
height: 40px;
margin-bottom: 10px;
text-align: right;
font-size: 24px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.buttons button {
width: 45px;
height: 45px;
font-size: 18px;
margin: 2px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #f9f9f9;
cursor: pointer;
}
.buttons button:hover {
background-color: #e0e0e0;
}
```
**JavaScript (script.js)**:
```javascript
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
var display = document.getElementById('display');
var expression = display.value;
if (expression) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'calculate.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
if (xhr.status === 200) {
display.value = xhr.responseText;
}
};
xhr.send('expression=' + encodeURIComponent(expression));
}
}
```
### 2. Backend: PHP
**PHP (calculate.php)**:
```php
```
### Explanation
1. **Frontend (HTML + CSS + JavaScript/AJAX)**:
- **HTML**: Provides the basic structure of the calculator, including buttons for digits and operations.
- **CSS**: Styles the calculator to make it look better.
- **JavaScript/AJAX**:
- `appendToDisplay(value)`: Appends the clicked button's value to the display.
- `clearDisplay()`: Clears the display.
- `calculate()`: Sends the expression to `calculate.php` via AJAX, receives the result, and displays it.
2. **Backend (PHP)**:
- **calculate.php**:
- Receives the expression from the client.
- Sanitizes the expression to prevent security issues.
- Uses `eval()` to compute the result of the expression.
- Returns the result to the frontend.
This setup provides a functional basic calculator with a clean interface and responsive behavior using AJAX to handle calculations.
