Skip to content

Commit b315094

Browse files
Harinarayana360Harinarayana360
authored
Add files via upload
1 parent 14e2325 commit b315094

File tree

3 files changed

+121
-0
lines changed

3 files changed

+121
-0
lines changed

‎Advance Calculator/app.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function clearDisplay() {
2+
document.getElementById('result').value = '';
3+
}
4+
5+
function deleteLast() {
6+
const display = document.getElementById('result');
7+
display.value = display.value.slice(0, -1);
8+
}
9+
10+
function appendToDisplay(value) {
11+
const display = document.getElementById('result');
12+
display.value += value;
13+
}
14+
15+
function calculateResult() {
16+
const display = document.getElementById('result');
17+
try {
18+
display.value = eval(display.value.replace('×', '*').replace('÷', '/'));
19+
} catch (e) {
20+
display.value = 'Error';
21+
}
22+
}

‎Advance Calculator/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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>Advanced Calculator</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="calculator">
11+
<div class="display">
12+
<input type="text" id="result" disabled>
13+
</div>
14+
<div class="buttons">
15+
<button class="span-two" onclick="clearDisplay()">C</button>
16+
<button onclick="deleteLast()">DEL</button>
17+
<button onclick="appendToDisplay('/')">÷</button>
18+
<button onclick="appendToDisplay('7')">7</button>
19+
<button onclick="appendToDisplay('8')">8</button>
20+
<button onclick="appendToDisplay('9')">9</button>
21+
<button onclick="appendToDisplay('*')">×</button>
22+
<button onclick="appendToDisplay('4')">4</button>
23+
<button onclick="appendToDisplay('5')">5</button>
24+
<button onclick="appendToDisplay('6')">6</button>
25+
<button onclick="appendToDisplay('-')">-</button>
26+
<button onclick="appendToDisplay('1')">1</button>
27+
<button onclick="appendToDisplay('2')">2</button>
28+
<button onclick="appendToDisplay('3')">3</button>
29+
<button onclick="appendToDisplay('+')">+</button>
30+
<button onclick="appendToDisplay('0')">0</button>
31+
<button onclick="appendToDisplay('.')">.</button>
32+
<button class="span-two" onclick="calculateResult()">=</button>
33+
</div>
34+
</div>
35+
<script src="script.js"></script>
36+
</body>
37+
</html>

‎Advance Calculator/style.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
background: linear-gradient(135deg, #71b7e6, #000000);
8+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9+
}
10+
11+
.calculator {
12+
border: 1px solid #333;
13+
border-radius: 10px;
14+
overflow: hidden;
15+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
16+
}
17+
18+
.display {
19+
background: #333;
20+
color: #fff;
21+
font-size: 2em;
22+
text-align: right;
23+
padding: 20px;
24+
}
25+
26+
.display input {
27+
width: 100%;
28+
border: none;
29+
background: transparent;
30+
color: inherit;
31+
font-size: inherit;
32+
text-align: inherit;
33+
outline: none;
34+
}
35+
36+
.buttons {
37+
display: grid;
38+
grid-template-columns: repeat(4, 1fr);
39+
gap: 1px;
40+
background: #333;
41+
}
42+
43+
button {
44+
padding: 20px;
45+
font-size: 1.5em;
46+
border: none;
47+
background: #fff;
48+
cursor: pointer;
49+
transition: background 0.2s;
50+
}
51+
52+
button:hover {
53+
background: #f0f0f0;
54+
}
55+
56+
button:active {
57+
background: #ddd;
58+
}
59+
60+
.span-two {
61+
grid-column: span 2;
62+
}

0 commit comments

Comments
 (0)