Skip to content

Commit 71df070

Browse files
harsh98trivediharsh98trivedi
committed
Updated the whole UI ✨
1 parent f18629a commit 71df070

File tree

7 files changed

+335
-637
lines changed

7 files changed

+335
-637
lines changed

‎images/heart.png‎

-453 Bytes
Binary file not shown.

‎images/history.png‎

-1023 Bytes
Binary file not shown.

‎index.html‎

Lines changed: 142 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,152 @@
11
<!DOCTYPE html>
2-
<html lang="en">
3-
2+
<html lang="en" class="light">
43
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1 user-scalable=no, shrink-to-fit=no">
7-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8-
<title>Simple Calculator Harsh Trivedi</title>
9-
<link rel="stylesheet" href="./styles/style.css">
10-
<link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap" rel="stylesheet">
11-
<!-- Common Tags -->
12-
<meta content='#171825' name='theme-color' />
13-
<meta name="keywords"
14-
content="Simple JavaScript Calculator, Harsh, JavaScript, Calculator, JavaScript Calculator, JSCalci, JavaScriptCalci, Harsh Trivedi">
15-
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
16-
<meta property="og:title" content="Simple JavaScript Calculator" />
17-
<meta property="og:description"
18-
content="Simple JavaScript Calculator by Harsh Trivedi" />
19-
<meta property="og:image"
20-
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/meta.jpg" />
21-
<meta property="og:url" content="https://harsh98trivedi.github.io/Simple-JavaScript-Calculator/" />
22-
<meta property="og:site_name" content="Simple JavaScript Calculator" />
23-
<meta property="og:locale" content="en_US" />
24-
<meta property="fb:admins" content="245221532650178" />
25-
<meta property="og:type" content="website" />
26-
<meta content='https://www.facebook.com/TheHarshTrivedi' property='article:author' />
27-
<meta property="og:url" content="https://harsh98trivedi.github.io/Simple-JavaScript-Calculator/" />
28-
<!-- Search Engine -->
29-
<meta property="description"
30-
content="Simple JavaScript Calculator by Harsh Trivedi" />
31-
<meta property="image"
32-
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/meta.jpg" />
33-
<!-- Schema.org for Google -->
34-
<meta itemprop="name" content="Simple JavaScript Calculator" />
35-
<meta itemprop="description"
36-
content="Simple JavaScript Calculator by Harsh Trivedi" />
37-
<meta itemprop="image"
38-
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/meta.jpg" />
39-
<!-- Twitter -->
40-
<meta property="twitter:card" content="summary_large_image" />
41-
<meta property="twitter:title" content="Simple JavaScript Calculator" />
42-
<meta property="twitter:description"
43-
content="Simple JavaScript Calculator by Harsh Trivedi" />
44-
<meta property="twitter:creator" content="@harsh98trivedi" />
45-
<meta property="twitter:creator:id" content="@harsh98trivedi" />
46-
<meta property="twitter:image:src"
47-
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/meta.jpg" />
48-
<meta property="twitter:image" content="Calculator by Harsh Trivedi" />
49-
<link rel='icon' type='image/x-icon' href='./images/favicon.ico' />
50-
</head>
51-
<body>
52-
53-
<div class="container">
54-
<h1>
55-
<div class="toggle-container">
56-
<label class="toggle-switch">
57-
<input type="checkbox" id="toggle-mode" />
58-
<span class="toggle-slider"></span>
59-
</label>
60-
</div>
61-
<a class="tittle" onclick="location.reload();">CALCULATOR</a>
62-
<img id="historybutton" src="./images/history.png">
63-
</h1>
64-
<div class="calculator">
65-
<input type="text" name="screen" id="answer" readonly>
66-
<table>
67-
<tr>
68-
<td><button value="(">(</button></td>
69-
<td><button value=")">)</button></td>
70-
<td>
71-
<div class="row">
72-
<div class="col">
73-
<button value="C" onclick="clearAll()">C</button>
74-
</div>
75-
<div class="col">
76-
<button value="CE" onclick="deleteLastEntry()">CE</button>
77-
</div>
78-
</div>
79-
</td>
80-
<td><button value="%">%</button></td>
81-
</tr>
82-
<tr>
83-
<td><button value="7">7</button></td>
84-
<td><button value="8">8</button></td>
85-
<td><button value="9">9</button></td>
86-
<td><button value="*">X</button></td>
87-
</tr>
88-
<tr>
89-
<td><button value="4">4</button></td>
90-
<td><button value="5">5</button></td>
91-
<td><button value="6">6</button></td>
92-
<td><button value="-">-</button></td>
93-
</tr>
94-
<tr>
95-
<td><button value="1">1</button></td>
96-
<td><button value="2">2</button></td>
97-
<td><button value="3">3</button></td>
98-
<td><button value="+">+</button></td>
99-
</tr>
100-
<tr>
101-
<td><button value="0">0</button></td>
102-
<td><button value="." style="font-weight: bold;">.</button></td>
103-
<td><button value="/">/</button></td>
104-
<td><button value="=" style="background-color: #25db72; font-weight: bold; color: #ecf0f1;">=</button></td>
105-
</tr>
106-
</table>
107-
<hr style="max-width: 50vw;">
108-
<div style="font-size:1rem; display: flex; align-items: center; justify-content: center;">
109-
Made with <img style="margin: 0.15rem;" src="./images/heart.png"> by <a style="text-decoration: none; color: #f1c40f; margin-left: 0.25rem;" target="_blank" href="https://harsh98trivedi.github.io">Harsh Trivedi</a>
110-
</div>
111-
</div>
112-
</div>
113-
<div id="bar1" class = "bars"></div>
114-
<div id="bar2" class = "bars"></div>
115-
<div id="history"></div>
116-
<div id="turn">
117-
PLEASE TURN YOUR DEVICE
118-
</div>
119-
</body>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1 user-scalable=no, shrink-to-fit=no">
6+
<meta content='#171825' name='theme-color' />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<meta name="keywords"
9+
content="Simple JavaScript Calculator, Harsh, JavaScript, Calculator, JavaScript Calculator, JSCalci, JavaScriptCalci, Harsh Trivedi">
10+
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
11+
<meta property="og:title" content="Simple JavaScript Calculator" />
12+
<meta property="og:description"
13+
content="Simple JavaScript Calculator by Harsh Trivedi" />
14+
<meta property="og:image"
15+
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/meta.jpg" />
16+
<meta property="og:url" content="https://harsh98trivedi.github.io/Simple-JavaScript-Calculator/" />
17+
<meta property="og:site_name" content="Simple JavaScript Calculator" />
18+
<meta property="og:locale" content="en_US" />
19+
<meta property="fb:admins" content="245221532650178" />
20+
<meta property="og:type" content="website" />
21+
<meta content='https://www.facebook.com/TheHarshTrivedi' property='article:author' />
22+
<meta property="og:url" content="https://harsh98trivedi.github.io/Simple-JavaScript-Calculator/" />
23+
<!-- Search Engine -->
24+
<meta property="description"
25+
content="Simple JavaScript Calculator by Harsh Trivedi" />
26+
<meta property="image"
27+
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/meta.jpg" />
28+
<!-- Schema.org for Google -->
29+
<meta itemprop="name" content="Simple JavaScript Calculator" />
30+
<meta itemprop="description"
31+
content="Simple JavaScript Calculator by Harsh Trivedi" />
32+
<meta itemprop="image"
33+
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/meta.jpg" />
34+
<!-- Twitter -->
35+
<meta property="twitter:card" content="summary_large_image" />
36+
<meta property="twitter:title" content="Simple JavaScript Calculator" />
37+
<meta property="twitter:description"
38+
content="Simple JavaScript Calculator by Harsh Trivedi" />
39+
<meta property="twitter:creator" content="@harsh98trivedi" />
40+
<meta property="twitter:creator:id" content="@harsh98trivedi" />
41+
<meta property="twitter:image:src"
42+
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/images/meta.jpg" />
43+
<meta property="twitter:image" content="Calculator by Harsh Trivedi" />
44+
<title>Simple JavaScript Calculator</title>
12045

121-
<script src="./scripts/hist.js"></script>
122-
<script src="./scripts/calc.js"></script>
12346
<!-- Google tag (gtag.js) -->
12447
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45C37D3GB5"></script>
12548
<script>
126-
window.dataLayer = window.dataLayer || [];
127-
function gtag(){dataLayer.push(arguments);}
128-
gtag('js', new Date());
49+
window.dataLayer = window.dataLayer || [];
50+
function gtag(){dataLayer.push(arguments);}
51+
gtag('js', new Date());
12952

130-
gtag('config', 'G-45C37D3GB5');
53+
gtag('config', 'G-45C37D3GB5');
13154
</script>
55+
<script src="scripts/script.js"></script>
56+
57+
<!-- Tailwind CSS -->
58+
<script src="https://cdn.tailwindcss.com"></script>
13259
<script>
133-
const toggleMode = document.getElementById('toggle-mode');
134-
const container = document.querySelector('.container');
135-
136-
toggleMode.addEventListener('change', function() {
137-
container.classList.toggle('dark-mode');
138-
});
139-
140-
document.addEventListener('keydown', function (event) {
141-
handleKeyPress(event.key);
142-
});
143-
144-
// This function will be responsible for handling the button press from the keyboard..Try thses key also if want you can also chnage these settings,...
145-
function handleKeyPress(key) {
146-
// "Enter" key is pressed, trigger the "=" button press
147-
if (key === 'Enter') {
148-
handleButtonPress('=');
149-
}
150-
// "Delete" or "Backspace" key is pressed, trigger the "CE" button press
151-
if (key === 'Delete' || key === 'Backspace') {
152-
handleButtonPress('CE');
153-
}
154-
//number key is pressed, trigger the corresponding number button press
155-
if (/[0-9]/.test(key)) {
156-
handleButtonPress(key);
157-
}
158-
// operator key is pressed (+, -, *, /, %), trigger the corresponding operator button press
159-
if (/[\.\+\-\*\/%()]/.test(key)) {
160-
handleButtonPress(key);
161-
}
162-
}
163-
function handleButtonPress(value) {
164-
// This function simulates the button press of the calculator for the given value
165-
// Find the corresponding button element based on the value
166-
const button = document.querySelector(`button[value="${value}"]`);
167-
168-
button.classList.add('clicked')
169-
button.click();
170-
171-
setTimeout(() => {
172-
button.classList.remove('clicked')
173-
}, 70)
174-
}
60+
tailwind.config = { darkMode: 'class' };
17561
</script>
176-
</html>
62+
63+
<!-- FontAwesome -->
64+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin="anonymous" />
65+
<link rel="stylesheet" href="styles/style.css">
66+
<link rel='icon' type='image/x-icon' href='./images/favicon.ico' />
67+
</head>
68+
69+
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
70+
71+
<main class="flex flex-col items-center justify-center min-h-screen p-4 lg:p-8" role="application" aria-label="Calculator application">
72+
<!-- Header -->
73+
<header class="flex items-center justify-between w-full max-w-3xl mb-6 lg:mb-10">
74+
<!-- Dark Mode Toggle -->
75+
<button id="theme-toggle" aria-pressed="false" aria-label="Toggle dark mode"
76+
class="flex items-center justify-center w-14 h-14 rounded-full bg-gray-300 dark:bg-gray-700 hover:ring-2 ring-offset-2 ring-amber-400 transition text-2xl">
77+
<i class="fa-solid fa-sun text-yellow-500 dark:hidden"></i>
78+
<i class="fa-solid fa-moon text-gray-200 hidden dark:block"></i>
79+
</button>
80+
81+
<!-- Title -->
82+
<h1 class="text-3xl sm:text-3xl lg:text-5xl font-extrabold text-amber-500 text-center">CALCULATOR</h1>
83+
84+
<!-- History Button -->
85+
<button id="history-btn" aria-label="Open calculation history"
86+
class="flex items-center justify-center w-14 h-14 rounded-full bg-gray-300 dark:bg-gray-700 hover:ring-2 ring-offset-2 ring-amber-400 transition text-2xl">
87+
<i class="fa-solid fa-clock-rotate-left"></i>
88+
</button>
89+
</header>
90+
91+
<!-- Calculator Card -->
92+
<section class="w-full max-w-3xl bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 lg:p-10">
93+
<!-- Screen -->
94+
<div class="mb-8">
95+
<input id="answer" type="text" readonly aria-live="polite"
96+
class="w-full text-right text-4xl sm:text-5xl lg:text-6xl p-6 rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-white focus:outline-none font-semibold" />
97+
</div>
98+
99+
<!-- Buttons Grid -->
100+
<div class="grid grid-cols-4 gap-4 text-xl">
101+
<button value="(" aria-label="Left parenthesis" class="calc-btn">(</button>
102+
<button value=")" aria-label="Right parenthesis" class="calc-btn">)</button>
103+
<button value="C" aria-label="Clear all" class="calc-btn bg-red-500">C</button>
104+
<button value="%" aria-label="Percentage" class="calc-btn">%</button>
105+
106+
<button value="7" class="calc-btn">7</button>
107+
<button value="8" class="calc-btn">8</button>
108+
<button value="9" class="calc-btn">9</button>
109+
<button value="*" aria-label="Multiply" class="calc-btn bg-yellow-400">×</button>
110+
111+
<button value="4" class="calc-btn">4</button>
112+
<button value="5" class="calc-btn">5</button>
113+
<button value="6" class="calc-btn">6</button>
114+
<button value="-" aria-label="Subtract" class="calc-btn bg-yellow-400">−</button>
115+
116+
<button value="1" class="calc-btn">1</button>
117+
<button value="2" class="calc-btn">2</button>
118+
<button value="3" class="calc-btn">3</button>
119+
<button value="+" aria-label="Add" class="calc-btn bg-yellow-400">+</button>
120+
121+
<button value="0" class="calc-btn col-span-2">0</button>
122+
<button value="." aria-label="Decimal" class="calc-btn">.</button>
123+
<button value="/" aria-label="Divide" class="calc-btn bg-yellow-400">÷</button>
124+
125+
<button value="=" aria-label="Equals" class="calc-btn col-span-4 bg-emerald-500">=</button>
126+
</div>
127+
128+
<!-- Footer -->
129+
<p class="mt-6 text-center text-lg">
130+
Made with <i class="fa-solid fa-heart text-red-500"></i> by
131+
<a href="https://harsh98trivedi.github.io" target="_blank" class="text-blue-500 underline">Harsh Trivedi</a>
132+
</p>
133+
</section>
134+
</main>
135+
136+
<!-- History Panel -->
137+
<aside id="history-panel"
138+
class="fixed bottom-0 sm:top-0 sm:right-0 w-full sm:w-[30rem] h-2/5 sm:h-full bg-white dark:bg-gray-800 shadow-lg transform translate-y-full sm:translate-x-full transition-transform z-50 p-4 overflow-y-auto"
139+
aria-hidden="true" aria-label="Calculation history panel">
140+
<div class="flex justify-between items-center mb-4">
141+
<h2 class="text-xl font-bold">History</h2>
142+
<div class="flex gap-2">
143+
<button id="clear-history" aria-label="Clear history"
144+
class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition">Clear</button>
145+
<button id="close-history" aria-label="Close history panel"
146+
class="px-4 py-2 bg-gray-300 dark:bg-gray-700 rounded hover:bg-gray-400 dark:hover:bg-gray-600 transition">Close</button>
147+
</div>
148+
</div>
149+
<div id="history-list" class="space-y-3"></div>
150+
</aside>
151+
</body>
152+
</html>

0 commit comments

Comments
 (0)