Skip to content

Commit 99edda8

Browse files
tajulafreentajulafreen
authored
Merge pull request #24 from tajulafreen/Calculator
50Projects-HTML-CSS-JavaScript : Calculator
2 parents b40eccb + d356a56 commit 99edda8

4 files changed

Lines changed: 243 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,17 @@ In order to run this project you need:
243243
</details>
244244
</li>
245245

246+
<li>
247+
<details>
248+
<summary>Calculator</summary>
249+
<p>Calculator is a straightforward and user-friendly tool developed using HTML, CSS, and JavaScript. This beginner-friendly web development project is designed to help users perform basic arithmetic operations such as addition, subtraction, multiplication, and division seamlessly. Users can input numbers and choose an operator to instantly see the calculated result. The calculator also includes functionalities for clearing the input and handling decimal numbers.</p>
250+
<ul>
251+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/Calculator/">Live Demo</a></li>
252+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/Calculator">Source</a></li>
253+
</ul>
254+
</details>
255+
</li>
256+
246257
</ol>
247258

248259
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/Calculator/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
<title>Calculator</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="calculator">
11+
<input type="text" class="calculator-screen" value="" disabled placeholder="0" />
12+
<div class="calculator-keys">
13+
14+
<button type="button" value="7">7</button>
15+
<button type="button" value="8">8</button>
16+
<button type="button" value="9">9</button>
17+
<button type="button" class="operator" value="+">+</button>
18+
19+
<button type="button" value="4">4</button>
20+
<button type="button" value="5">5</button>
21+
<button type="button" value="6">6</button>
22+
<button type="button" class="operator" value="-">-</button>
23+
24+
<button type="button" value="1">1</button>
25+
<button type="button" value="2">2</button>
26+
<button type="button" value="3">3</button>
27+
<button type="button" class="operator" value="*">&times;</button>
28+
29+
<button type="button" value="0">0</button>
30+
<button type="button" class="decimal" value=".">.</button>
31+
<button type="button" class="all-clear" value="all-clear">AC</button>
32+
<button type="button" class="operator" value="/">&divide;</button>
33+
34+
<button type="button" class="equal-sign operator" value="=">=</button>
35+
</div>
36+
</div>
37+
<script src="script.js"></script>
38+
</body>
39+
</html>

‎Source-Code/Calculator/script.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
let firstOperand = '';
2+
let secondOperand = '';
3+
let currentOperator = null;
4+
let awaitingSecondOperand = false;
5+
6+
const display = document.querySelector('.calculator-screen');
7+
const keys = document.querySelector('.calculator-keys');
8+
9+
const updateDisplay = () => {
10+
display.value = awaitingSecondOperand ? secondOperand : firstOperand;
11+
};
12+
13+
const resetCalculator = () => {
14+
firstOperand = '';
15+
secondOperand = '';
16+
currentOperator = null;
17+
awaitingSecondOperand = false;
18+
updateDisplay();
19+
};
20+
21+
const inputNumber = (number) => {
22+
if (awaitingSecondOperand) {
23+
secondOperand += number;
24+
} else {
25+
firstOperand += number;
26+
}
27+
updateDisplay();
28+
};
29+
30+
const inputDecimal = () => {
31+
if (awaitingSecondOperand) {
32+
if (!secondOperand.includes('.')) {
33+
secondOperand += '.';
34+
}
35+
} else if (!firstOperand.includes('.')) {
36+
firstOperand += '.';
37+
}
38+
updateDisplay();
39+
};
40+
41+
const calculate = () => {
42+
let result;
43+
const first = parseFloat(firstOperand);
44+
const second = parseFloat(secondOperand);
45+
46+
if (Number.isNaN(first) || Number.isNaN(second)) return;
47+
48+
switch (currentOperator) {
49+
case '+':
50+
result = first + second;
51+
break;
52+
case '-':
53+
result = first - second;
54+
break;
55+
case '*':
56+
result = first * second;
57+
break;
58+
case '/':
59+
result = first / second;
60+
break;
61+
default:
62+
return;
63+
}
64+
65+
firstOperand = String(result);
66+
secondOperand = '';
67+
awaitingSecondOperand = false;
68+
currentOperator = null;
69+
updateDisplay();
70+
};
71+
const inputOperator = (operator) => {
72+
if (!firstOperand) return;
73+
74+
if (secondOperand) {
75+
calculate();
76+
}
77+
78+
currentOperator = operator;
79+
awaitingSecondOperand = true;
80+
};
81+
82+
keys.addEventListener('click', (event) => {
83+
const { target } = event;
84+
const { value } = target;
85+
86+
if (!target.matches('button')) return;
87+
88+
switch (value) {
89+
case 'all-clear':
90+
resetCalculator();
91+
break;
92+
case '=':
93+
calculate();
94+
break;
95+
case '.':
96+
inputDecimal();
97+
break;
98+
case '+':
99+
case '-':
100+
case '*':
101+
case '/':
102+
inputOperator(value);
103+
break;
104+
default:
105+
if (Number.isInteger(parseFloat(value))) {
106+
inputNumber(value);
107+
}
108+
}
109+
});
110+
111+
document.addEventListener('DOMContentLoaded', updateDisplay);

‎Source-Code/Calculator/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
background: #f9f6ee;
11+
font-family: 'Roboto', sans-serif;
12+
}
13+
14+
.calculator {
15+
border-radius: 10px;
16+
overflow: hidden;
17+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
18+
}
19+
20+
.calculator-screen {
21+
width: 100%;
22+
height: 100px;
23+
border: none;
24+
background-color: #252525;
25+
color: white;
26+
text-align: right;
27+
padding: 10px 20px;
28+
font-size: 2.5rem;
29+
}
30+
31+
.calculator-keys {
32+
display: grid;
33+
grid-template-columns: repeat(4, 1fr);
34+
gap: 10px;
35+
padding: 20px;
36+
background-color: #f1f3f6;
37+
}
38+
39+
button {
40+
height: 60px;
41+
border-radius: 5px;
42+
border: none;
43+
font-size: 1.5rem;
44+
color: white;
45+
background-color: #333;
46+
cursor: pointer;
47+
transition: background-color 0.2s ease;
48+
}
49+
50+
button:hover {
51+
background-color: #555;
52+
}
53+
54+
.operator {
55+
background-color: #f39c12;
56+
}
57+
58+
.operator:hover {
59+
background-color: #d87a0d;
60+
}
61+
62+
.equal-sign {
63+
height: calc(80px + 10px);
64+
grid-column: span 4;
65+
font-size: 30px;
66+
}
67+
68+
.all-clear {
69+
background-color: #e74c3c;
70+
}
71+
72+
.all-clear:hover {
73+
background-color: #c0392b;
74+
}
75+
76+
.decimal {
77+
background-color: #9b59b6;
78+
}
79+
80+
.decimal:hover {
81+
background-color: #8e44ad;
82+
}

0 commit comments

Comments
 (0)