Skip to content

Commit 4297f15

Browse files
Hrishikesh-DalalHrishikesh-Dalal
authored
Merge pull request #194 from Pramod-Munnoli/feat/premium-calculator-enhancements
feat: add premium calculator with theme toggle, animations, and history
2 parents e6aa0f2 + 3a53d89 commit 4297f15

File tree

3 files changed

+1105
-314
lines changed

3 files changed

+1105
-314
lines changed

‎projects/calculator/index.html‎

Lines changed: 65 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,76 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33

44
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Calculator</title>
8-
<link rel="stylesheet" href="styles.css">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Premium Calculator with History</title>
8+
<link rel="stylesheet" href="styles.css">
9+
<script defer src="main.js"></script>
910
</head>
1011

1112
<body>
12-
<div class="calculator">
13-
<div class="display">
14-
<div class="previous-operand" id="previousOperand"></div>
15-
<div class="current-operand" id="currentOperand">0</div>
13+
<div class="theme-toggle-container">
14+
<button class="theme-toggle" aria-label="Toggle Theme" onclick="toggleTheme()">
15+
<svg class="theme-icon" id="themeIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
16+
<circle cx="12" cy="12" r="5"></circle>
17+
<line x1="12" y1="1" x2="12" y2="3"></line>
18+
<line x1="12" y1="21" x2="12" y2="23"></line>
19+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
20+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
21+
<line x1="1" y1="12" x2="3" y2="12"></line>
22+
<line x1="21" y1="12" x2="23" y2="12"></line>
23+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
24+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
25+
</svg>
26+
</button>
1627
</div>
17-
18-
<div class="buttons">
19-
<button class="function" aria-label="All Clear" data-action="clear">AC</button>
20-
<button class="function" aria-label="Backspace" data-action="backspace">⌫</button>
21-
<button class="function" aria-label="Toggle Sign" data-action="toggle-sign">+/-</button>
22-
<button class="operator" aria-label="Divide" data-action="operator" data-operator="÷">÷</button>
23-
24-
<button aria-label="7" data-number="7">7</button>
25-
<button aria-label="8" data-number="8">8</button>
26-
<button aria-label="9" data-number="9">9</button>
27-
<button class="operator" aria-label="Multiply" data-action="operator" data-operator="×">×</button>
28-
29-
<button aria-label="4" data-number="4">4</button>
30-
<button aria-label="5" data-number="5">5</button>
31-
<button aria-label="6" data-number="6">6</button>
32-
<button class="operator" aria-label="Subtract" data-action="operator" data-operator="−">−</button>
33-
34-
<button aria-label="1" data-number="1">1</button>
35-
<button aria-label="2" data-number="2">2</button>
36-
<button aria-label="3" data-number="3">3</button>
37-
<button class="operator" aria-label="Add" data-action="operator" data-operator="+">+</button>
38-
39-
<button class="zero" aria-label="0" data-number="0">0</button>
40-
<button aria-label="Decimal" data-action="decimal">.</button>
41-
<button class="function" aria-label="Percentage" data-action="percentage">%</button>
42-
<button class="equals" aria-label="Equals" data-action="equals">=</button>
28+
29+
<div class="calculator-wrapper" id="calculatorWrapper">
30+
<div class="calculator" id="calculator">
31+
<div class="display">
32+
<button class="clear-history" onclick="clearHistory()" title="Clear History">Clear</button>
33+
<div class="history-container" id="historyContainer">
34+
<!-- History items will be added here -->
35+
</div>
36+
<div class="current-calculation">
37+
<div class="previous-operand" id="previousOperand"></div>
38+
<div class="current-operand" id="currentOperand">0</div>
39+
</div>
40+
</div>
41+
<div class="buttons">
42+
<!-- Row 1: Clear Functions -->
43+
<button class="clear" aria-label="All Clear" data-action="clear">AC</button>
44+
<button class="backspace" aria-label="Backspace" data-action="backspace">⌫</button>
45+
<button class="sign-toggle" aria-label="Toggle Sign" data-action="toggle-sign">+/-</button>
46+
<button class="operator" aria-label="Divide" data-action="operator" data-operator="÷">÷</button>
47+
48+
<!-- Row 2: Numbers 7-9 and Multiply -->
49+
<button aria-label="7" data-number="7">7</button>
50+
<button aria-label="8" data-number="8">8</button>
51+
<button aria-label="9" data-number="9">9</button>
52+
<button class="operator" aria-label="Multiply" data-action="operator" data-operator="×">×</button>
53+
54+
<!-- Row 3: Numbers 4-6 and Subtract -->
55+
<button aria-label="4" data-number="4">4</button>
56+
<button aria-label="5" data-number="5">5</button>
57+
<button aria-label="6" data-number="6">6</button>
58+
<button class="operator" aria-label="Subtract" data-action="operator" data-operator="−">−</button>
59+
60+
<!-- Row 4: Numbers 1-3 and Add -->
61+
<button aria-label="1" data-number="1">1</button>
62+
<button aria-label="2" data-number="2">2</button>
63+
<button aria-label="3" data-number="3">3</button>
64+
<button class="operator" aria-label="Add" data-action="operator" data-operator="+">+</button>
65+
66+
<!-- Row 5: Decimal, Zero, Percentage, Equals -->
67+
<button aria-label="Decimal" data-action="decimal">.</button>
68+
<button aria-label="0" data-number="0">0</button>
69+
<button class="percentage" aria-label="Percentage" data-action="percentage">%</button>
70+
<button class="equals" aria-label="Equals" data-action="equals">=</button>
71+
</div>
72+
</div>
4373
</div>
44-
</div>
45-
<script src="main.js"></script>
4674
</body>
4775

4876
</html>

0 commit comments

Comments
 (0)