Skip to content

Commit 2413170

Browse files
harsh98trivediharsh98trivedi
committed
Minor Change
1 parent 71df070 commit 2413170

File tree

1 file changed

+142
-141
lines changed

1 file changed

+142
-141
lines changed

‎index.html‎

Lines changed: 142 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,153 @@
11
<!DOCTYPE html>
22
<html lang="en" class="light">
33
<head>
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>
45-
46-
<!-- Google tag (gtag.js) -->
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>
45+
46+
<!-- Tailwind CSS -->
47+
<script src="https://cdn.tailwindcss.com"></script>
48+
<script>
49+
tailwind.config = { darkMode: 'class' };
50+
</script>
51+
52+
<!-- Google tag (gtag.js) -->
4753
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45C37D3GB5"></script>
4854
<script>
49-
window.dataLayer = window.dataLayer || [];
50-
function gtag(){dataLayer.push(arguments);}
51-
gtag('js', new Date());
55+
window.dataLayer = window.dataLayer || [];
56+
function gtag(){dataLayer.push(arguments);}
57+
gtag('js', new Date());
5258

53-
gtag('config', 'G-45C37D3GB5');
59+
gtag('config', 'G-45C37D3GB5');
5460
</script>
55-
<script src="scripts/script.js"></script>
56-
57-
<!-- Tailwind CSS -->
58-
<script src="https://cdn.tailwindcss.com"></script>
59-
<script>
60-
tailwind.config = { darkMode: 'class' };
61-
</script>
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' />
61+
<!-- FontAwesome -->
62+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin="anonymous" />
63+
<link rel="stylesheet" href="styles/style.css">
64+
<link rel='icon' type='image/x-icon' href='./images/favicon.ico' />
6765
</head>
6866

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>
67+
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300 select-none">
68+
69+
<main class="flex flex-col items-center justify-center min-h-screen p-4 lg:p-8" role="application" aria-label="Calculator application">
70+
<!-- Header -->
71+
<header class="flex items-center justify-between w-full max-w-3xl mb-6 lg:mb-10">
72+
<!-- Dark Mode Toggle -->
73+
<button id="theme-toggle" aria-pressed="false" aria-label="Toggle dark mode"
74+
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">
75+
<i class="fa-solid fa-sun text-yellow-500 dark:hidden"></i>
76+
<i class="fa-solid fa-moon text-gray-200 hidden dark:block"></i>
77+
</button>
78+
79+
<!-- Title -->
80+
<h1 class="text-3xl sm:text-3xl lg:text-5xl font-extrabold text-amber-500 text-center">CALCULATOR</h1>
81+
82+
<!-- History Button -->
83+
<button id="history-btn" aria-label="Open calculation history"
84+
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">
85+
<i class="fa-solid fa-clock-rotate-left"></i>
86+
</button>
87+
</header>
88+
89+
<!-- Calculator Card -->
90+
<section class="w-full max-w-3xl bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 lg:p-10">
91+
<!-- Screen -->
92+
<div class="mb-8">
93+
<input id="answer" type="text" readonly aria-live="polite"
94+
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" />
95+
</div>
96+
97+
<!-- Buttons Grid -->
98+
<div class="grid grid-cols-4 gap-4 text-xl">
99+
<button value="(" aria-label="Left parenthesis" class="calc-btn">(</button>
100+
<button value=")" aria-label="Right parenthesis" class="calc-btn">)</button>
101+
<button value="C" aria-label="Clear all" class="calc-btn bg-red-500">C</button>
102+
<button value="%" aria-label="Percentage" class="calc-btn">%</button>
103+
104+
<button value="7" class="calc-btn">7</button>
105+
<button value="8" class="calc-btn">8</button>
106+
<button value="9" class="calc-btn">9</button>
107+
<button value="*" aria-label="Multiply" class="calc-btn bg-yellow-400">×</button>
108+
109+
<button value="4" class="calc-btn">4</button>
110+
<button value="5" class="calc-btn">5</button>
111+
<button value="6" class="calc-btn">6</button>
112+
<button value="-" aria-label="Subtract" class="calc-btn bg-yellow-400">−</button>
113+
114+
<button value="1" class="calc-btn">1</button>
115+
<button value="2" class="calc-btn">2</button>
116+
<button value="3" class="calc-btn">3</button>
117+
<button value="+" aria-label="Add" class="calc-btn bg-yellow-400">+</button>
118+
119+
<button value="0" class="calc-btn col-span-2">0</button>
120+
<button value="." aria-label="Decimal" class="calc-btn">.</button>
121+
<button value="/" aria-label="Divide" class="calc-btn bg-yellow-400">÷</button>
122+
123+
<button value="=" aria-label="Equals" class="calc-btn col-span-4 bg-emerald-500">=</button>
124+
</div>
125+
126+
<!-- Footer -->
127+
<p class="mt-6 text-center text-lg">
128+
Made with <i class="fa-solid fa-heart text-red-500"></i> by
129+
<a href="https://harsh98trivedi.github.io" target="_blank" class="text-blue-500 underline">Harsh Trivedi</a>
130+
</p>
131+
</section>
132+
</main>
133+
134+
<!-- History Panel -->
135+
<aside id="history-panel"
136+
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"
137+
aria-hidden="true" aria-label="Calculation history panel">
138+
<div class="flex justify-between items-center mb-4">
139+
<h2 class="text-xl font-bold">History</h2>
140+
<div class="flex gap-2">
141+
<button id="clear-history" aria-label="Clear history"
142+
class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition">Clear</button>
143+
<button id="close-history" aria-label="Close history panel"
144+
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>
145+
</div>
146+
</div>
147+
<div id="history-list" class="space-y-3"></div>
148+
</aside>
149+
150+
151+
<script src="scripts/script.js"></script>
151152
</body>
152153
</html>

0 commit comments

Comments
 (0)