Skip to content

Commit a49f519

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1001 from parthasdey2304/patch-1
Create calculator.html issue #626
2 parents 3c47029 + 2818e12 commit a49f519

File tree

1 file changed

+142
-0
lines changed

1 file changed

+142
-0
lines changed

‎Calculator/parthasdey2304/calculator.html

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<html>
2+
<head>
3+
<title>Calculator</title>
4+
<script src="https://cdn.tailwindcss.com"></script>
5+
</head>
6+
7+
<body class="bg-black">
8+
<div class="w-full h-[720px] bg-black md:flex flex-wrap space-x-32 justify-center md:p-8 p-4">
9+
<div class="h-full md:w-1/3 w-full border rounded-2xl flex-col">
10+
<div class="p-2 h-[150px] flex-col">
11+
<input type="text" id="result" class="border rounded-xl w-full h-full bg-zinc-800 text-white text-right text-5xl font-bold p-2" readonly>
12+
</div>
13+
14+
<!-- This section has all the buttons attached -->
15+
<div class="p-2">
16+
<div class="w-full h-[485px] rounded-xl bg-white flex-col space-y-2 p-2">
17+
<div class="w-full h-[87px] rounded-xl bg-zinc-800 flex space-x-3 justify-between p-2">
18+
<button class="w-full h-[70px] bg-green-600 rounded-xl hover:bg-black text-white duration-800 text-2xl font-bold" onclick="clearResult()">AC</button>
19+
<button class="w-full h-[70px] bg-blue-600 rounded-xl hover:bg-black text-white duration-800 text-2xl font-bold" onclick="append('^')">x <sup class="text-sm">y</sup></button>
20+
<button class="w-full h-[70px] bg-blue-600 rounded-xl hover:bg-black text-white duration-800 text-2xl font-bold" onclick="append('%')">%</button>
21+
<button class="w-full h-[70px] bg-blue-600 rounded-xl hover:bg-black text-white duration-800 text-2xl font-bold" onclick="append('/')">/</button>
22+
</div>
23+
24+
<div class="w-full h-[87px] rounded-xl bg-zinc-800 flex space-x-4 justify-between p-2">
25+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-2xl font-bold" onclick="append(7)">7</button>
26+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-2xl font-bold" onclick="append(8)">8</button>
27+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-2xl font-bold" onclick="append(9)">9</button>
28+
<button class="w-full h-[70px] bg-blue-600 rounded-xl hover:bg-black text-white duration-800 text-2xl font-bold" onclick="append('*')">x</button>
29+
</div>
30+
31+
<div class="w-full h-[87px] rounded-xl bg-zinc-800 flex space-x-4 justify-between p-2">
32+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-2xl font-bold" onclick="append(4)">4</button>
33+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-2xl font-bold" onclick="append(5)">5</button>
34+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-2xl font-bold" onclick="append(6)">6</button>
35+
<button class="w-full h-[70px] bg-blue-600 rounded-xl hover:bg-black text-white duration-800 text-2xl font-bold" onclick="append('-')">-</button>
36+
</div>
37+
38+
<div class="w-full h-[87px] rounded-xl bg-zinc-800 flex space-x-4 justify-between p-2">
39+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-2xl font-bold" onclick="append(1)">1</button>
40+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-2xl font-bold" onclick="append(2)">2</button>
41+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-2xl font-bold" onclick="append(3)">3</button>
42+
<button class="w-full h-[70px] bg-blue-600 rounded-xl hover:bg-black text-white duration-800 text-2xl font-bold" onclick="append('+')">+</button>
43+
</div>
44+
45+
<div class="w-full h-[87px] rounded-xl bg-zinc-800 flex space-x-4 justify-between p-2">
46+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-2xl font-bold" onclick="append(0)">0</button>
47+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-black hover:text-white duration-800 text-3xl font-bold" onclick="append('.')">.</button>
48+
<button class="w-full h-[70px] bg-white rounded-xl hover:bg-red-600 hover:text-white duration-800 text-2xl font-bold" onclick="deleteLastChar()"><=</button>
49+
<button class="w-full h-[70px] bg-black rounded-xl hover:bg-blue-600 text-white duration-800 text-3xl font-bold" onclick="calculate()">=</button>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
55+
<div class="h-full w-1/3 border rounded-xl bg-white/30 flex-col space-y-10 p-4">
56+
<div class="flex justify-between p-2">
57+
<p class="text-3xl font-mono font-bold text-white">History</p>
58+
<button class="text-2xl text-red-500 font-mono font-bold hover:text-red-600 hover:underline underline-offset-4" onclick="deleteHistory()">Delete</button>
59+
</div>
60+
61+
<div class="border h-[530px] rounded-lg flex-col space-y-2 overflow-auto p-2" id="historyList">
62+
<!-- This is where all the history of the calculation get updated! -->
63+
</div>
64+
</div>
65+
</div>
66+
67+
<!-- This is the JavaScript part of the file -->
68+
<script>
69+
// Variables required for the project
70+
let expression = "";
71+
let result = document.getElementById('result');
72+
let history = "";
73+
let historyList = document.getElementById('historyList');
74+
let historyExpression = ""; // Initialize historyExpression variable
75+
76+
function append(st) {
77+
expression += st;
78+
document.getElementById('result').value = expression;
79+
}
80+
81+
function calculate() {
82+
let res = evaluateExpression(expression);
83+
document.getElementById('result').value = res;
84+
expression = res.toString();
85+
historyExpression = expression; // Assign original expression to historyExpression
86+
historyUpdate();
87+
}
88+
89+
function clearResult() {
90+
expression = '';
91+
result.value = '';
92+
}
93+
94+
function deleteLastChar() {
95+
expression = expression.slice(0, -1);
96+
result.value = expression;
97+
}
98+
99+
function evaluateExpression(expression) {
100+
let operators = {
101+
'+': (a, b) => a + b,
102+
'-': (a, b) => a - b,
103+
'*': (a, b) => a * b,
104+
'/': (a, b) => a / b,
105+
'%': (a, b) => a % b,
106+
'^': (a, b) => Math.pow(a, b)
107+
};
108+
109+
let operands = expression.split(/([+\-*/%^])/);
110+
111+
while (operands.length > 1) {
112+
let [leftOperand, operator, rightOperand] = operands.splice(0, 3);
113+
let result = operators[operator](parseFloat(leftOperand), parseFloat(rightOperand));
114+
operands.unshift(result.toString());
115+
}
116+
117+
return parseFloat(operands[0]);
118+
}
119+
120+
// This is to update the panel of history
121+
function historyUpdate() {
122+
history += '<div class="w-full h-[100px] border rounded-xl bg-white flex-col space-y-2 p-1">' +
123+
'<div class="border h-[45%] rounded-xl p-2 flex justify-between">' +
124+
'<p class="font-bold text-right">Expression :</p>' +
125+
'<p class="font-bold text-right">' + historyExpression + '</p>' +
126+
'</div>' +
127+
'<div class="border h-[45%] rounded-xl p-2 flex justify-between">' +
128+
'<p class="font-bold text-right">Result :</p>' +
129+
'<p class="font-bold text-right">' + result.value + '</p>' +
130+
'</div>' +
131+
'</div>\n\n';
132+
133+
historyList.innerHTML = history;
134+
}
135+
136+
function deleteHistory() {
137+
history = "";
138+
historyList.innerHTML = history;
139+
}
140+
</script>
141+
</body>
142+
</html>

0 commit comments

Comments
 (0)