Skip to content

Commit 3e924ff

Browse files
king04amanking04aman
committed
add project: Calculator
1 parent 2118fa7 commit 3e924ff

File tree

4 files changed

+122
-0
lines changed

4 files changed

+122
-0
lines changed

‎Calculator/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Calculator
2+
**A basic calculator built using HTML, CSS, and JavaScript**
3+
This project allows users to perform simple arithmetic operations such as addition, subtraction, multiplication, and division.
4+
5+
### Functionalities
6+
- **Basic Operations**: Supports addition, subtraction, multiplication, and division.
7+
- **Clear Functionality**: Allows users to clear the display.
8+
- **Error Handling**: Displays an error message for invalid operations.
9+
10+
## Description
11+
This JavaScript Desktop Calculator is a simple and user-friendly web application. It features a straightforward interface where users can input numbers and operators using buttons. The calculator evaluates the expression when the user clicks the "=" button and displays the result. If the input is invalid, it shows an error message. The design is clean, ensuring a pleasant user experience.
12+
13+
## Prerequisites
14+
- `HTML`: Used for structuring the calculator interface.
15+
- `CSS`: Used for styling the calculator and making it visually appealing.
16+
- `JavaScript`: Handles the calculator's functionality and operations.
17+
18+
## Installing Instructions
19+
Explain how to set up and run your package/script on the user's local machine. Include steps like:
20+
1. Clone the repository:
21+
```bash
22+
git clone https://github.com/king04aman/All-In-One-Javascript-Projects.git
23+
```
24+
2. Navigate to the project directory:
25+
```bash
26+
cd All-In-One-Javascript-Projects/Calculator
27+
```
28+
3. Open `index.html` in a web browser.
29+
30+
## Author
31+
- Aman Kumar (@[king04aman](https://github.com/king04aman))

‎Calculator/index.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="style.css">
8+
<title>JavaScript Desktop Calculator</title>
9+
</head>
10+
<body>
11+
<h1>Basic Calculator</h1>
12+
<br/>
13+
<form id="myform" name="calc">
14+
<input name="display" style="width:675px;height:100px;text-align:center;background-color:#1f80c9;" readonly></br>
15+
<input type="button" value="0">
16+
<input type="button" value="1">
17+
<input type="button" value="2">
18+
<input type="button" value="+" style="background-color:#cc5c11"></br>
19+
<input type="button" value="3">
20+
<input type="button" value="4">
21+
<input type="button" value="5">
22+
<input type="button" value="-" style="background-color:#ba55d3"></br>
23+
<input type="button" value="6">
24+
<input type="button" value="7">
25+
<input type="button" value="8">
26+
<input type="button" value="x" style="background-color:#7db1b2"></br>
27+
<input type="button" value="9">
28+
<input type="button" value="C">
29+
<input type="button" value="=" style="background-color:#cc0000">
30+
<input type="button" value="&#247" style="background-color:green"></br>
31+
</form>
32+
<script src="main.js"></script>
33+
</body>
34+
</html>

‎Calculator/main.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const form = document.getElementById('myform');
2+
3+
// Function to append value to the display
4+
function appendToDisplay(value) {
5+
form.display.value += value;
6+
}
7+
8+
// Function to clear the display
9+
function clearDisplay() {
10+
form.display.value = '';
11+
}
12+
13+
// Function to evaluate the expression in the display
14+
function calculate() {
15+
try {
16+
form.display.value = eval(form.display.value.replace(/x/g, '*'));
17+
} catch (error) {
18+
form.display.value = 'Error';
19+
}
20+
}
21+
22+
// Assign event listeners to buttons
23+
document.querySelectorAll('input[type=button]').forEach(button => {
24+
button.addEventListener('click', function() {
25+
const value = this.value;
26+
27+
if (value === 'C') {
28+
clearDisplay();
29+
} else if (value === '=') {
30+
calculate();
31+
} else {
32+
appendToDisplay(value);
33+
}
34+
});
35+
});

‎Calculator/style.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
input {
2+
width: 150px;
3+
height: 100px;
4+
font-size: 75px;
5+
border-radius: 10px;
6+
margin: 10px;
7+
background-color: #000;
8+
color: #fff;
9+
border-style: none;
10+
}
11+
12+
#myform {
13+
margin-left: 225px;
14+
margin-top: 20px;
15+
}
16+
17+
h1 {
18+
text-align: center;
19+
font-size: 80px;
20+
margin-right: 150px;
21+
margin-top: 20px;
22+
}

0 commit comments

Comments
 (0)