Skip to content

Enhanced Calculator: Scientific Functions, Currency Conversion & 3D UI #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
srj0224 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Enhanced Calculator: Scientific Functions, Currency Conversion & 3D UI #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93fb9c5
Enhance calculator with scientific functions, currency conversion, an…
devin-ai-integration[bot] Sep 3, 2025
3e088b4
Remove author attribution footer for professional calculator appearance
devin-ai-integration[bot] Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 117 additions & 36 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,17 @@
<i class="fa-solid fa-moon text-gray-200 hidden dark:block"></i>
</button>

<!-- Title -->
<h1 class="text-3xl sm:text-3xl lg:text-5xl font-extrabold text-amber-500 text-center">CALCULATOR</h1>
<!-- Title and Mode Selector -->
<div class="flex flex-col items-center">
<h1 class="text-3xl sm:text-3xl lg:text-5xl font-extrabold text-amber-500 text-center mb-4">CALCULATOR</h1>

<!-- Mode Toggle Buttons -->
<div class="flex bg-gray-200 dark:bg-gray-700 rounded-lg p-1">
<button id="mode-basic" class="mode-btn active px-4 py-2 rounded-md text-sm font-semibold transition-all">Basic</button>
<button id="mode-scientific" class="mode-btn px-4 py-2 rounded-md text-sm font-semibold transition-all">Scientific</button>
<button id="mode-currency" class="mode-btn px-4 py-2 rounded-md text-sm font-semibold transition-all">Currency</button>
</div>
</div>

<!-- History Button -->
<button id="history-btn" aria-label="Open calculation history"
Expand All @@ -87,47 +96,119 @@ <h1 class="text-3xl sm:text-3xl lg:text-5xl font-extrabold text-amber-500 text-c
</header>

<!-- Calculator Card -->
<section class="w-full max-w-3xl bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 lg:p-10">
<section class="w-full max-w-3xl bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 lg:p-10 calculator-3d">
<!-- Screen -->
<div class="mb-8">
<input id="answer" type="text" readonly aria-live="polite"
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" />
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 screen-3d" />
</div>

<!-- Basic/Scientific Calculator -->
<div id="calculator-panel" class="calculator-mode">
<!-- Buttons Grid -->
<div class="grid grid-cols-4 gap-4 text-xl" id="basic-grid">
<button value="(" aria-label="Left parenthesis" class="calc-btn">(</button>
<button value=")" aria-label="Right parenthesis" class="calc-btn">)</button>
<button value="C" aria-label="Clear all" class="calc-btn bg-red-500">C</button>
<button value="%" aria-label="Percentage" class="calc-btn">%</button>

<button value="7" class="calc-btn">7</button>
<button value="8" class="calc-btn">8</button>
<button value="9" class="calc-btn">9</button>
<button value="*" aria-label="Multiply" class="calc-btn bg-yellow-400">×</button>

<button value="4" class="calc-btn">4</button>
<button value="5" class="calc-btn">5</button>
<button value="6" class="calc-btn">6</button>
<button value="-" aria-label="Subtract" class="calc-btn bg-yellow-400">−</button>

<button value="1" class="calc-btn">1</button>
<button value="2" class="calc-btn">2</button>
<button value="3" class="calc-btn">3</button>
<button value="+" aria-label="Add" class="calc-btn bg-yellow-400">+</button>

<button value="0" class="calc-btn col-span-2">0</button>
<button value="." aria-label="Decimal" class="calc-btn">.</button>
<button value="/" aria-label="Divide" class="calc-btn bg-yellow-400">÷</button>

<button value="=" aria-label="Equals" class="calc-btn col-span-4 bg-emerald-500">=</button>
</div>

<!-- Scientific Functions Grid -->
<div class="grid grid-cols-5 gap-3 text-lg mt-4 scientific-only" id="scientific-grid">
<button value="sin(" class="calc-btn bg-blue-500 text-white">sin</button>
<button value="cos(" class="calc-btn bg-blue-500 text-white">cos</button>
<button value="tan(" class="calc-btn bg-blue-500 text-white">tan</button>
<button value="log(" class="calc-btn bg-blue-500 text-white">log</button>
<button value="ln(" class="calc-btn bg-blue-500 text-white">ln</button>

<button value="sqrt(" class="calc-btn bg-purple-500 text-white">√</button>
<button value="pow(" class="calc-btn bg-purple-500 text-white">x^y</button>
<button value="3.14159" class="calc-btn bg-purple-500 text-white">π</button>
<button value="2.71828" class="calc-btn bg-purple-500 text-white">e</button>
<button id="deg-rad-toggle" class="calc-btn bg-green-500 text-white">DEG</button>
</div>
</div>

<!-- Buttons Grid -->
<div class="grid grid-cols-4 gap-4 text-xl">
<button value="(" aria-label="Left parenthesis" class="calc-btn">(</button>
<button value=")" aria-label="Right parenthesis" class="calc-btn">)</button>
<button value="C" aria-label="Clear all" class="calc-btn bg-red-500">C</button>
<button value="%" aria-label="Percentage" class="calc-btn">%</button>

<button value="7" class="calc-btn">7</button>
<button value="8" class="calc-btn">8</button>
<button value="9" class="calc-btn">9</button>
<button value="*" aria-label="Multiply" class="calc-btn bg-yellow-400">×</button>

<button value="4" class="calc-btn">4</button>
<button value="5" class="calc-btn">5</button>
<button value="6" class="calc-btn">6</button>
<button value="-" aria-label="Subtract" class="calc-btn bg-yellow-400">−</button>

<button value="1" class="calc-btn">1</button>
<button value="2" class="calc-btn">2</button>
<button value="3" class="calc-btn">3</button>
<button value="+" aria-label="Add" class="calc-btn bg-yellow-400">+</button>

<button value="0" class="calc-btn col-span-2">0</button>
<button value="." aria-label="Decimal" class="calc-btn">.</button>
<button value="/" aria-label="Divide" class="calc-btn bg-yellow-400">÷</button>

<button value="=" aria-label="Equals" class="calc-btn col-span-4 bg-emerald-500">=</button>
<!-- Currency Converter -->
<div id="currency-panel" class="calculator-mode hidden">
<div class="space-y-6">
<!-- Amount Input -->
<div>
<label class="block text-sm font-medium mb-2">Amount</label>
<input id="currency-amount" type="number" placeholder="Enter amount"
class="w-full p-4 text-2xl rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-400" />
</div>

<!-- Currency Selectors -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-2">From</label>
<select id="currency-from" class="w-full p-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-400">
<option value="USD">USD - US Dollar</option>
<option value="EUR">EUR - Euro</option>
<option value="GBP">GBP - British Pound</option>
<option value="JPY">JPY - Japanese Yen</option>
<option value="CAD">CAD - Canadian Dollar</option>
<option value="AUD">AUD - Australian Dollar</option>
<option value="CHF">CHF - Swiss Franc</option>
<option value="CNY">CNY - Chinese Yuan</option>
<option value="INR">INR - Indian Rupee</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-2">To</label>
<select id="currency-to" class="w-full p-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-400">
<option value="EUR">EUR - Euro</option>
<option value="USD">USD - US Dollar</option>
<option value="GBP">GBP - British Pound</option>
<option value="JPY">JPY - Japanese Yen</option>
<option value="CAD">CAD - Canadian Dollar</option>
<option value="AUD">AUD - Australian Dollar</option>
<option value="CHF">CHF - Swiss Franc</option>
<option value="CNY">CNY - Chinese Yuan</option>
<option value="INR">INR - Indian Rupee</option>
</select>
</div>
</div>

<!-- Convert Button -->
<button id="convert-btn" class="w-full calc-btn bg-emerald-500 text-white text-xl py-4">
Convert Currency
</button>

<!-- Result Display -->
<div id="currency-result" class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 text-center text-xl font-semibold min-h-[60px] flex items-center justify-center">
Enter amount and click convert
</div>

<!-- Exchange Rate Info -->
<div id="exchange-rate-info" class="text-sm text-gray-600 dark:text-gray-400 text-center">
Exchange rates updated in real-time
</div>
</div>
</div>

<!-- Footer -->
<p class="mt-6 text-center text-lg">
Made with <i class="fa-solid fa-heart text-red-500"></i> by
<a href="https://harsh98trivedi.github.io" target="_blank" class="text-blue-500 underline">Harsh Trivedi</a>
</p>
</section>
</main>

Expand Down
Loading