Spaces:

ShivaamShukla
/

mathmaster-pro

Running

App Files Files Community

mathmaster-pro / index.html

ShivaamShukla

on Statistics, Programmer, Financial currenlty its showng nothing add al the advance feature on this

fd9acd5 verified 4 months ago

raw

history blame contribute delete

84.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Advanced Shivaam Shukla Calculator</title>
	<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧮</text></svg>">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#6366f1',
	secondary: '#8b5cf6',
	dark: '#1e293b',
	light: '#f8fafc'
	}
	}
	}
	}
	</script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
	body {
	font-family: 'Inter', sans-serif;
	background: white;
	color: #000000;
	min-height: 100vh;
	}
	.calculator-btn {
	transition: all 0.2s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}
	.calculator-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
	}
	.calculator-btn:active {
	transform: translateY(1px);
	}
	.result-display {
	background: white;
	border: 1px solid #d1d5db;
	border-radius: 0.75rem;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}
	.history-item {
	transition: all 0.3s ease;
	}
	.history-item:hover {
	background: rgba(99, 102, 241, 0.1);
	}
	.mode-selector {
	transition: all 0.3s ease;
	}
	.mode-selector.active {
	background: linear-gradient(90deg, #6366f1, #8b5cf6);
	color: white;
	}
	.matrix-input {
	width: 50px;
	height: 50px;
	text-align: center;
	border: 1px solid #4b5563;
	background: rgba(30, 41, 59, 0.7);
	color: white;
	}
	.matrix-input:focus {
	outline: none;
	border-color: #8b5cf6;
	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
	}
	</style>
	</head>
	<body class="text-black">
	<div class="container mx-auto px-4 py-8">
	<!-- Header -->
	<header class="text-center mb-12">
	<h1 class="text-4xl md:text-5xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">
	Advanced Shivaam Shukla Calculator 🧮
	</h1>
	<p class="text-gray-700 max-w-2xl mx-auto">
	Professional calculator with advanced mathematics, statistics, programming functions, financial calculations, and more. All in one place!
	</p>
	</header>
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
	<!-- Calculator Section -->
	<div class="lg:col-span-2">
	<div class="bg-white rounded-2xl p-6 shadow-xl border border-gray-200">
	<!-- Mode Selector -->
	<div class="flex flex-wrap gap-2 mb-6">
	<button id="basicMode" class="mode-selector active px-4 py-2 rounded-lg">Basic</button>
	<button id="gstMode" class="mode-selector px-4 py-2 rounded-lg">GST</button>
	<button id="unitMode" class="mode-selector px-4 py-2 rounded-lg">Unit Conversion</button>
	<button id="trigMode" class="mode-selector px-4 py-2 rounded-lg">Trigonometry</button>
	<button id="matrixMode" class="mode-selector px-4 py-2 rounded-lg">Matrix</button>
	<button id="scientificMode" class="mode-selector px-4 py-2 rounded-lg">Scientific</button>
	<button id="calculusMode" class="mode-selector px-4 py-2 rounded-lg">Calculus</button>
	<button id="statisticsMode" class="mode-selector px-4 py-2 rounded-lg">Statistics</button>
	<button id="programmerMode" class="mode-selector px-4 py-2 rounded-lg">Programmer</button>
	<button id="financialMode" class="mode-selector px-4 py-2 rounded-lg">Financial</button>
	</div>
	<!-- Display -->
	<div class="result-display">
	<div class="text-right text-gray-500 text-sm h-6 overflow-x-auto whitespace-nowrap" id="historyDisplay"></div>
	<div class="text-right text-3xl font-bold mt-2 h-12 overflow-x-auto whitespace-nowrap" id="mainDisplay">0</div>
	</div>
	<!-- Calculator Inputs - Shared Display Style -->
	<div id="basicCalculator" class="calculator-grid">
	<div class="result-display">
	<div class="grid grid-cols-4 gap-3">
	<button class="calculator-btn bg-red-500 hover:bg-red-600 text-white font-bold py-4 rounded-xl" onclick="clearAll()">AC</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="deleteLast()">DEL</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('(')">(</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay(')')">)</button>

	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('7')">7</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('8')">8</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('9')">9</button>
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('/')">/</button>

	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('4')">4</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('5')">5</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('6')">6</button>
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('*')">×</button>

	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('1')">1</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('2')">2</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('3')">3</button>
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('-')">-</button>

	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('0')">0</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('.')">.</button>
	<button class="calculator-btn bg-secondary hover:bg-purple-600 text-white font-bold py-4 rounded-xl" onclick="calculateResult()">=</button>
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('+')">+</button>
	</div>
	<!-- Statistics Calculator -->
	<div id="statisticsCalculator" class="hidden">
	<div class="result-display">
	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Data Set (comma separated)</label>
	<textarea id="dataSet" class="w-full p-3 rounded-lg bg-gray-100 text-black h-24" placeholder="Enter numbers separated by commas (e.g., 1,2,3,4,5)"></textarea>
	</div>
	<div class="grid grid-cols-2 gap-4 mb-4">
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateStatistics()">Calculate Stats</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearStatistics()">Clear</button>
	</div>
	<div class="bg-gray-100 rounded-xl p-4">
	<div class="grid grid-cols-2 gap-4">
	<div>
	<div class="flex justify-between mb-2">
	<span>Count:</span>
	<span id="statCount" class="font-bold">0</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Sum:</span>
	<span id="statSum" class="font-bold">0</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Mean:</span>
	<span id="statMean" class="font-bold">0</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Median:</span>
	<span id="statMedian" class="font-bold">0</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Mode:</span>
	<span id="statMode" class="font-bold">0</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Range:</span>
	<span id="statRange" class="font-bold">0</span>
	</div>
	</div>
	<div>
	<div class="flex justify-between mb-2">
	<span>Variance:</span>
	<span id="statVariance" class="font-bold">0</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Std Deviation:</span>
	<span id="statStdDev" class="font-bold">0</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Quartile Q1:</span>
	<span id="statQ1" class="font-bold">0</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Quartile Q3:</span>
	<span id="statQ3" class="font-bold">0</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Interquartile Range:</span>
	<span id="statIQR" class="font-bold">0</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Skewness:</span>
	<span id="statSkewness" class="font-bold">0</span>
	</div>
	</div>
	</div>
	</div>
	<div class="mt-4">
	<canvas id="statisticsChart" height="200"></canvas>
	</div>
	</div>
	</div>
	<!-- Programmer Calculator -->
	<div id="programmerCalculator" class="hidden">
	<div class="result-display">
	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Number System Conversion</label>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label class="block text-gray-700 mb-2">Decimal</label>
	<input type="number" id="decInput" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Decimal" onchange="convertNumberSystems()">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Binary</label>
	<input type="text" id="binInput" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Binary" onchange="convertNumberSystems()">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Octal</label>
	<input type="text" id="octInput" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Octal" onchange="convertNumberSystems()">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Hexadecimal</label>
	<input type="text" id="hexInput" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Hexadecimal" onchange="convertNumberSystems()">
	</div>
	</div>
	</div>
	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Bitwise Operations</label>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label class="block text-gray-700 mb-2">First Number (Decimal)</label>
	<input type="number" id="bitNum1" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="First number">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Second Number (Decimal)</label>
	<input type="number" id="bitNum2" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Second number">
	</div>
	</div>
	<div class="grid grid-cols-4 gap-2 mt-2">
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="performBitwise('AND')">AND</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="performBitwise('OR')">OR</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="performBitwise('XOR')">XOR</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="performBitwise('NOT')">NOT</button>
	</div>
	<div class="mt-2 text-center font-bold" id="bitwiseResult">Result: 0</div>
	</div>
	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Advanced Operations</label>
	<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mt-2">
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="shiftBits('left')">Shift Left</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="shiftBits('right')">Shift Right</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="rotateBits('left')">Rotate Left</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="rotateBits('right')">Rotate Right</button>
	</div>
	</div>
	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Logic Operations</label>
	<div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="logicOperation('nand')">NAND</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="logicOperation('nor')">NOR</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="logicOperation('xnor')">XNOR</button>
	</div>
	</div>
	</div>
	</div>
	<!-- Financial Calculator -->
	<div id="financialCalculator" class="hidden">
	<div class="result-display">
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-gray-700 mb-2">Principal Amount ($)</label>
	<input type="number" id="principal" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Principal amount" value="1000">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Interest Rate (%)</label>
	<input type="number" id="interestRate" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Annual interest rate" value="5">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Time Period (Years)</label>
	<input type="number" id="timePeriod" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Time period" value="5">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Compound Frequency</label>
	<select id="compoundFreq" class="w-full p-3 rounded-lg bg-gray-100 text-black">
	<option value="1">Annually</option>
	<option value="2">Semi-annually</option>
	<option value="4">Quarterly</option>
	<option value="12">Monthly</option>
	<option value="365">Daily</option>
	</select>
	</div>
	</div>
	<div class="grid grid-cols-2 gap-4 mb-4">
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateCompoundInterest()">Calculate Compound Interest</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearFinancial()">Clear</button>
	</div>
	<div class="bg-gray-100 rounded-xl p-4 mb-4">
	<div class="flex justify-between mb-2">
	<span>Future Value:</span>
	<span id="futureValue" class="font-bold">$1,280.08</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Total Interest:</span>
	<span id="totalInterest" class="font-bold">$280.08</span>
	</div>
	<div class="flex justify-between">
	<span>APY (Effective Rate):</span>
	<span id="apyRate" class="font-bold">5.12%</span>
	</div>
	</div>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-gray-700 mb-2">Loan Amount ($)</label>
	<input type="number" id="loanAmount" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Loan amount" value="10000">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Annual Interest Rate (%)</label>
	<input type="number" id="loanInterestRate" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Annual interest rate" value="6">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Loan Term (Years)</label>
	<input type="number" id="loanTerm" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Loan term" value="5">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Payments Per Year</label>
	<input type="number" id="paymentsPerYear" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Payments per year" value="12">
	</div>
	</div>
	<div class="grid grid-cols-2 gap-4 mb-4">
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateLoanPayment()">Calculate Loan Payment</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearLoan()">Clear Loan</button>
	</div>
	<div class="bg-gray-100 rounded-xl p-4">
	<div class="flex justify-between mb-2">
	<span>Monthly Payment:</span>
	<span id="monthlyPayment" class="font-bold">$193.33</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>Total Payment:</span>
	<span id="totalPayment" class="font-bold">$11,599.80</span>
	</div>
	<div class="flex justify-between">
	<span>Total Interest:</span>
	<span id="loanTotalInterest" class="font-bold">$1,599.80</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- GST Calculator -->
	<div id="gstCalculator" class="hidden">
	<div class="result-display">
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-gray-700 mb-2">Amount</label>
	<input type="number" id="gstAmount" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Enter amount">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">GST Rate (%)</label>
	<select id="gstRate" class="w-full p-3 rounded-lg bg-gray-100 text-black">
	<option value="5">5%</option>
	<option value="12">12%</option>
	<option value="18" selected>18%</option>
	<option value="28">28%</option>
	</select>
	</div>
	</div>
	<div class="grid grid-cols-2 gap-4 mb-4">
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateGST()">Calculate GST</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearGST()">Clear</button>
	</div>
	<div class="bg-gray-100 rounded-xl p-4">
	<div class="flex justify-between mb-2">
	<span>Net Amount:</span>
	<span id="netAmount" class="font-bold">₹0.00</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>GST Amount:</span>
	<span id="gstResult" class="font-bold">₹0.00</span>
	</div>
	<div class="flex justify-between font-bold text-lg">
	<span>Total Amount:</span>
	<span id="totalAmount" class="font-bold">₹0.00</span>
	</div>
	</div>
	</div>
	</div>
	<!-- Unit Conversion -->
	<div id="unitCalculator" class="hidden">
	<div class="result-display">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
	<div>
	<label class="block text-gray-700 mb-2">From</label>
	<select id="fromUnit" class="w-full p-3 rounded-lg bg-gray-100 text-black">
	<option value="mm">Millimeter (mm)</option>
	<option value="cm" selected>Centimeter (cm)</option>
	<option value="m">Meter (m)</option>
	<option value="km">Kilometer (km)</option>
	<option value="in">Inch (in)</option>
	<option value="ft">Foot (ft)</option>
	<option value="yd">Yard (yd)</option>
	<option value="mi">Mile (mi)</option>
	</select>
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Value</label>
	<input type="number" id="unitValue" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Enter value" value="1">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">To</label>
	<select id="toUnit" class="w-full p-3 rounded-lg bg-gray-100 text-black">
	<option value="mm">Millimeter (mm)</option>
	<option value="cm">Centimeter (cm)</option>
	<option value="m" selected>Meter (m)</option>
	<option value="km">Kilometer (km)</option>
	<option value="in">Inch (in)</option>
	<option value="ft">Foot (ft)</option>
	<option value="yd">Yard (yd)</option>
	<option value="mi">Mile (mi)</option>
	</select>
	</div>
	</div>
	<div class="grid grid-cols-2 gap-4">
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="convertUnits()">Convert</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearUnits()">Clear</button>
	</div>
	<div class="mt-4 text-center text-xl font-bold" id="unitResult">1 cm = 0.01 m</div>
	</div>
	</div>
	<!-- Trigonometry -->
	<div id="trigCalculator" class="hidden">
	<div class="result-display">
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-gray-700 mb-2">Angle (degrees)</label>
	<input type="number" id="trigAngle" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Enter angle" value="45">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Function</label>
	<select id="trigFunction" class="w-full p-3 rounded-lg bg-gray-100 text-black">
	<option value="sin">Sine (sin)</option>
	<option value="cos">Cosine (cos)</option>
	<option value="tan">Tangent (tan)</option>
	<option value="asin">Arcsine (sin⁻¹)</option>
	<option value="acos">Arccosine (cos⁻¹)</option>
	<option value="atan">Arctangent (tan⁻¹)</option>
	</select>
	</div>
	</div>
	<div class="grid grid-cols-2 gap-4">
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateTrig()">Calculate</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearTrig()">Clear</button>
	</div>
	<div class="mt-4 text-center text-xl font-bold" id="trigResult">sin(45°) = 0.7071</div>
	</div>
	</div>
	<!-- Matrix Calculator -->
	<div id="matrixCalculator" class="hidden">
	<div class="result-display">
	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Matrix Size</label>
	<div class="flex gap-2">
	<select id="matrixSize" class="p-2 rounded-lg bg-gray-100 text-black">
	<option value="2">2×2</option>
	<option value="3" selected>3×3</option>
	</select>
	<select id="matrixOperation" class="p-2 rounded-lg bg-gray-100 text-black">
	<option value="transpose">Transpose</option>
	<option value="determinant">Determinant</option>
	<option value="inverse">Inverse</option>
	</select>
	</div>
	</div>

	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Matrix A</label>
	<div id="matrixInputs" class="grid grid-cols-3 gap-2 justify-center">
	<!-- Matrix inputs will be generated here -->
	</div>
	</div>

	<div class="grid grid-cols-2 gap-4">
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateMatrix()">Calculate</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearMatrix()">Clear</button>
	</div>

	<div class="mt-4">
	<label class="block text-gray-700 mb-2">Result</label>
	<div id="matrixResult" class="bg-gray-100 rounded-xl p-4 min-h-[100px] font-mono text-center">
	Result will appear here
	</div>
	</div>
	</div>
	</div>
	<!-- Scientific Calculator -->
	<div id="scientificCalculator" class="hidden">
	<div class="result-display">
	<div class="grid grid-cols-5 gap-2 mb-4">
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.sqrt(')">√</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.pow(')">x^y</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.log(')">ln</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.log10(')">log</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.PI')">π</button>

	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.E')">e</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.sin(')">sin</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.cos(')">cos</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.tan(')">tan</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('!')">!</button>
	</div>
	<div class="grid grid-cols-4 gap-3">
	<button class="calculator-btn bg-red-500 hover:bg-red-600 text-white font-bold py-4 rounded-xl" onclick="clearAll()">AC</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="deleteLast()">DEL</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('(')">(</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay(')')">)</button>

	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('7')">7</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('8')">8</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('9')">9</button>
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('/')">/</button>

	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('4')">4</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('5')">5</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('6')">6</button>
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('*')">×</button>

	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('1')">1</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('2')">2</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('3')">3</button>
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('-')">-</button>

	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('0')">0</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('.')">.</button>
	<button class="calculator-btn bg-secondary hover:bg-purple-600 text-white font-bold py-4 rounded-xl" onclick="calculateResult()">=</button>
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('+')">+</button>
	</div>
	</div>
	</div>
	<!-- Calculus Calculator -->
	<div id="calculusCalculator" class="hidden">
	<div class="result-display">
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-gray-700 mb-2">Function f(x)</label>
	<input type="text" id="functionInput" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="e.g., x^2 + 3*x + 2" value="x^2">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Point (for derivative)</label>
	<input type="number" id="pointInput" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Enter x-value" value="2">
	</div>
	</div>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateDerivative()">Derivative</button>
	<button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateIntegral()">Integral</button>
	<button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearCalculus()">Clear</button>
	</div>
	<div class="bg-gray-100 rounded-xl p-4">
	<div class="flex justify-between mb-2">
	<span>Derivative f'(x):</span>
	<span id="derivativeResult" class="font-bold">2*x</span>
	</div>
	<div class="flex justify-between mb-2">
	<span>f'(<span id="pointValue">2</span>) =</span>
	<span id="derivativeAtPoint" class="font-bold">4</span>
	</div>
	<div class="flex justify-between">
	<span>∫f(x)dx =</span>
	<span id="integralResult" class="font-bold">(1/3)*x^3 + C</span>
	</div>
	</div>
	<div class="mt-4">
	<canvas id="functionChart" height="200"></canvas>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- History and Info Section -->
	<div>
	<div class="bg-white rounded-2xl p-6 shadow-xl mb-8 border border-gray-200">
	<h2 class="text-xl font-bold mb-4 flex items-center">
	<i data-feather="clock" class="mr-2"></i> Calculation History
	</h2>
	<div id="historyList" class="max-h-96 overflow-y-auto">
	<div class="text-gray-500 text-center py-8">
	No calculations yet
	</div>
	</div>
	</div>

	<div class="bg-white rounded-2xl p-6 shadow-xl border border-gray-200">
	<h2 class="text-xl font-bold mb-4 flex items-center">
	<i data-feather="info" class="mr-2"></i> Quick Tips
	</h2>
	<ul class="space-y-3 text-gray-700">
	<li class="flex items-start">
	<i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
	<span>Switch modes using the top buttons</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
	<span>Use parentheses for complex expressions</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
	<span>Scientific functions: sin(), cos(), tan(), sqrt(), etc.</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
	<span>Matrix operations support 2×2 and 3×3 matrices</span>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>

	<script>
	// Global variables
	let currentInput = '0';
	let calculationHistory = [];
	let currentMode = 'basic';
	let functionChart = null;
	// DOM Elements
	const mainDisplay = document.getElementById('mainDisplay');
	const historyDisplay = document.getElementById('historyDisplay');
	const historyList = document.getElementById('historyList');
	// Initialize calculator
	document.addEventListener('DOMContentLoaded', function() {
	feather.replace();
	generateMatrixInputs(3);
	updateDisplay();
	loadHistory();
	initializeChart();
	});
	// Mode switching
	document.querySelectorAll('.mode-selector').forEach(button => {
	button.addEventListener('click', function() {
	document.querySelectorAll('.mode-selector').forEach(btn => btn.classList.remove('active'));
	this.classList.add('active');

	// Hide all calculators
	document.getElementById('basicCalculator').classList.add('hidden');
	document.getElementById('gstCalculator').classList.add('hidden');
	document.getElementById('unitCalculator').classList.add('hidden');
	document.getElementById('trigCalculator').classList.add('hidden');
	document.getElementById('matrixCalculator').classList.add('hidden');
	document.getElementById('scientificCalculator').classList.add('hidden');
	document.getElementById('calculusCalculator').classList.add('hidden');
	document.getElementById('statisticsCalculator').classList.add('hidden');
	document.getElementById('programmerCalculator').classList.add('hidden');
	document.getElementById('financialCalculator').classList.add('hidden');

	// Show selected calculator
	currentMode = this.id.replace('Mode', '');
	document.getElementById(currentMode + 'Calculator').classList.remove('hidden');
	// Update chart when switching to calculus mode
	if (currentMode === 'calculus') {
	updateChart();
	}
	});
	});
	// Basic calculator functions
	function appendToDisplay(value) {
	if (currentInput === '0' && value !== '.') {
	currentInput = value;
	} else {
	currentInput += value;
	}
	updateDisplay();
	}

	function clearAll() {
	currentInput = '0';
	updateDisplay();
	}

	function deleteLast() {
	currentInput = currentInput.slice(0, -1);
	if (currentInput === '') currentInput = '0';
	updateDisplay();
	}

	function calculateResult() {
	try {
	// Replace × with * for evaluation
	let expression = currentInput.replace(/×/g, '*');

	// Handle special functions
	expression = expression.replace(/√/g, 'Math.sqrt');
	expression = expression.replace(/π/g, 'Math.PI');
	expression = expression.replace(/e/g, 'Math.E');

	const result = eval(expression);
	addToHistory(currentInput, result);
	currentInput = result.toString();
	updateDisplay();
	} catch (error) {
	currentInput = 'Error';
	updateDisplay();
	setTimeout(() => {
	currentInput = '0';
	updateDisplay();
	}, 1500);
	}
	}

	function updateDisplay() {
	mainDisplay.textContent = currentInput;
	}
	// GST Calculator
	function calculateGST() {
	const amount = parseFloat(document.getElementById('gstAmount').value) \|\| 0;
	const rate = parseFloat(document.getElementById('gstRate').value) \|\| 0;

	const gstAmount = (amount * rate) / 100;
	const totalAmount = amount + gstAmount;

	document.getElementById('netAmount').textContent = `₹${amount.toFixed(2)}`;
	document.getElementById('gstResult').textContent = `₹${gstAmount.toFixed(2)}`;
	document.getElementById('totalAmount').textContent = `₹${totalAmount.toFixed(2)}`;
	}

	function clearGST() {
	document.getElementById('gstAmount').value = '';
	document.getElementById('netAmount').textContent = '₹0.00';
	document.getElementById('gstResult').textContent = '₹0.00';
	document.getElementById('totalAmount').textContent = '₹0.00';
	}
	// Unit Conversion
	function convertUnits() {
	const fromUnit = document.getElementById('fromUnit').value;
	const toUnit = document.getElementById('toUnit').value;
	const value = parseFloat(document.getElementById('unitValue').value) \|\| 0;

	// Conversion factors to meters
	const conversionFactors = {
	'mm': 0.001,
	'cm': 0.01,
	'm': 1,
	'km': 1000,
	'in': 0.0254,
	'ft': 0.3048,
	'yd': 0.9144,
	'mi': 1609.344
	};

	// Convert to meters first, then to target unit
	const meters = value * conversionFactors[fromUnit];
	const result = meters / conversionFactors[toUnit];

	document.getElementById('unitResult').textContent =
	`${value} ${fromUnit} = ${result.toFixed(6)} ${toUnit}`;
	}

	function clearUnits() {
	document.getElementById('unitValue').value = '1';
	document.getElementById('unitResult').textContent = '1 cm = 0.01 m';
	}
	// Trigonometry
	function calculateTrig() {
	const angle = parseFloat(document.getElementById('trigAngle').value) \|\| 0;
	const func = document.getElementById('trigFunction').value;
	const radians = angle * Math.PI / 180;

	let result;
	switch(func) {
	case 'sin':
	result = Math.sin(radians);
	break;
	case 'cos':
	result = Math.cos(radians);
	break;
	case 'tan':
	result = Math.tan(radians);
	break;
	case 'asin':
	result = Math.asin(angle) * 180 / Math.PI;
	break;
	case 'acos':
	result = Math.acos(angle) * 180 / Math.PI;
	break;
	case 'atan':
	result = Math.atan(angle) * 180 / Math.PI;
	break;
	}

	if (func.startsWith('a')) {
	document.getElementById('trigResult').textContent =
	`${func}(${angle}) = ${result.toFixed(4)}°`;
	} else {
	document.getElementById('trigResult').textContent =
	`${func}(${angle}°) = ${result.toFixed(4)}`;
	}
	}

	function clearTrig() {
	document.getElementById('trigAngle').value = '45';
	document.getElementById('trigResult').textContent = 'sin(45°) = 0.7071';
	}
	// Matrix Calculator
	function generateMatrixInputs(size) {
	const container = document.getElementById('matrixInputs');
	container.innerHTML = '';
	container.className = `grid grid-cols-${size} gap-2 justify-center`;

	for (let i = 0; i < size; i++) {
	for (let j = 0; j < size; j++) {
	const input = document.createElement('input');
	input.type = 'number';
	input.className = 'matrix-input';
	input.id = `matrix-${i}-${j}`;
	input.value = i === j ? '1' : '0'; // Identity matrix default
	container.appendChild(input);
	}
	}
	}

	document.getElementById('matrixSize').addEventListener('change', function() {
	generateMatrixInputs(parseInt(this.value));
	});

	function getMatrixFromInputs() {
	const size = parseInt(document.getElementById('matrixSize').value);
	const matrix = [];

	for (let i = 0; i < size; i++) {
	const row = [];
	for (let j = 0; j < size; j++) {
	const value = parseFloat(document.getElementById(`matrix-${i}-${j}`).value) \|\| 0;
	row.push(value);
	}
	matrix.push(row);
	}

	return matrix;
	}

	function calculateMatrix() {
	const matrix = getMatrixFromInputs();
	const operation = document.getElementById('matrixOperation').value;
	let result;

	try {
	switch(operation) {
	case 'transpose':
	result = transposeMatrix(matrix);
	displayMatrixResult(result, 'Transpose');
	break;
	case 'determinant':
	result = determinant(matrix);
	document.getElementById('matrixResult').innerHTML =
	`Determinant = ${result.toFixed(4)}`;
	break;
	case 'inverse':
	result = inverseMatrix(matrix);
	displayMatrixResult(result, 'Inverse');
	break;
	}
	} catch (error) {
	document.getElementById('matrixResult').innerHTML =
	`Error: ${error.message}`;
	}
	}

	function transposeMatrix(matrix) {
	const result = [];
	for (let i = 0; i < matrix[0].length; i++) {
	result[i] = [];
	for (let j = 0; j < matrix.length; j++) {
	result[i][j] = matrix[j][i];
	}
	}
	return result;
	}

	function determinant(matrix) {
	const size = matrix.length;
	if (size === 2) {
	return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
	}

	let det = 0;
	for (let i = 0; i < size; i++) {
	const minor = [];
	for (let j = 1; j < size; j++) {
	minor.push(matrix[j].filter((_, idx) => idx !== i));
	}
	det += Math.pow(-1, i) * matrix[0][i] * determinant(minor);
	}
	return det;
	}

	function inverseMatrix(matrix) {
	const det = determinant(matrix);
	if (Math.abs(det) < 1e-10) {
	throw new Error('Matrix is singular (determinant is zero)');
	}

	const size = matrix.length;
	if (size === 2) {
	return [
	[matrix[1][1]/det, -matrix[0][1]/det],
	[-matrix[1][0]/det, matrix[0][0]/det]
	];
	}

	// For 3x3 matrices, use adjugate method
	const cofactor = [];
	for (let i = 0; i < size; i++) {
	cofactor[i] = [];
	for (let j = 0; j < size; j++) {
	const minor = [];
	for (let k = 0; k < size; k++) {
	if (k !== i) {
	minor.push(matrix[k].filter((_, idx) => idx !== j));
	}
	}
	cofactor[i][j] = Math.pow(-1, i+j) * determinant(minor);
	}
	}

	const adjugate = transposeMatrix(cofactor);
	return adjugate.map(row => row.map(val => val/det));
	}
	function displayMatrixResult(matrix, operation) {
	let html = `<div class="text-center mb-2 font-bold">${operation}:</div>`;
	html += '<div class="grid gap-1 justify-center" style="grid-template-columns: repeat(' + matrix[0].length + ', auto);">';

	for (let i = 0; i < matrix.length; i++) {
	for (let j = 0; j < matrix[i].length; j++) {
	html += `<div class="matrix-input bg-gray-700">${matrix[i][j].toFixed(2)}</div>`;
	}
	}

	html += '</div>';
	document.getElementById('matrixResult').innerHTML = html;
	}

	function clearMatrix() {
	const size = parseInt(document.getElementById('matrixSize').value);
	for (let i = 0; i < size; i++) {
	for (let j = 0; j < size; j++) {
	document.getElementById(`matrix-${i}-${j}`).value = i === j ? '1' : '0';
	}
	}
	document.getElementById('matrixResult').innerHTML = 'Result will appear here';
	}
	// Statistics functions
	function calculateStatistics() {
	const dataInput = document.getElementById('dataSet').value;
	if (!dataInput.trim()) {
	alert("Please enter a dataset");
	return;
	}

	try {
	const dataArray = dataInput.split(',').map(item => parseFloat(item.trim())).filter(num => !isNaN(num));

	if (dataArray.length === 0) {
	alert("No valid numbers found in dataset");
	return;
	}

	// Calculate basic statistics
	const count = dataArray.length;
	const sum = dataArray.reduce((acc, num) => acc + num, 0);
	const mean = sum / count;

	// Median
	const sortedArray = [...dataArray].sort((a, b) => a - b);
	const median = count % 2 === 0
	? (sortedArray[count/2 - 1] + sortedArray[count/2]) / 2
	: sortedArray[Math.floor(count/2)];

	// Mode
	const frequencyMap = {};
	let maxFrequency = 0;
	let modes = [];

	dataArray.forEach(num => {
	frequencyMap[num] = (frequencyMap[num] \|\| 0) + 1;
	if (frequencyMap[num] > maxFrequency) {
	maxFrequency = frequencyMap[num];
	}
	});

	for (let num in frequencyMap) {
	if (frequencyMap[num] === maxFrequency) {
	modes.push(parseFloat(num));
	}
	}

	const mode = modes.length === dataArray.length ? "No mode" : modes.join(", ");

	// Range
	const range = Math.max(...dataArray) - Math.min(...dataArray);

	// Variance and Standard Deviation
	const squaredDifferences = dataArray.map(num => Math.pow(num - mean, 2));
	const variance = squaredDifferences.reduce((acc, val) => acc + val, 0) / count;
	const stdDev = Math.sqrt(variance);

	// Quartiles
	const q1Index = Math.floor(0.25 * (count - 1));
	const q3Index = Math.floor(0.75 * (count - 1));
	const q1 = sortedArray[q1Index];
	const q3 = sortedArray[q3Index];
	const iqr = q3 - q1;

	// Skewness
	const skewness = (count * squaredDifferences.reduce((acc, val, i) =>
	acc + Math.pow(dataArray[i] - mean, 3), 0)) /
	((count - 1) * (count - 2) * Math.pow(stdDev, 3));

	// Update UI
	document.getElementById('statCount').textContent = count;
	document.getElementById('statSum').textContent = sum.toFixed(2);
	document.getElementById('statMean').textContent = mean.toFixed(4);
	document.getElementById('statMedian').textContent = median.toFixed(4);
	document.getElementById('statMode').textContent = mode;
	document.getElementById('statRange').textContent = range.toFixed(2);
	document.getElementById('statVariance').textContent = variance.toFixed(4);
	document.getElementById('statStdDev').textContent = stdDev.toFixed(4);
	document.getElementById('statQ1').textContent = q1.toFixed(4);
	document.getElementById('statQ3').textContent = q3.toFixed(4);
	document.getElementById('statIQR').textContent = iqr.toFixed(4);
	document.getElementById('statSkewness').textContent = skewness.toFixed(4);

	// Update chart
	updateStatisticsChart(sortedArray);
	} catch (error) {
	alert("Error calculating statistics: " + error.message);
	}
	}

	function updateStatisticsChart(data) {
	const ctx = document.getElementById('statisticsChart').getContext('2d');

	// Destroy existing chart if it exists
	if (window.statisticsChart) {
	window.statisticsChart.destroy();
	}

	// Create histogram data
	const min = Math.min(...data);
	const max = Math.max(...data);
	const binCount = Math.min(10, data.length);
	const binWidth = (max - min) / binCount;

	const bins = Array(binCount).fill(0);
	const labels = [];

	for (let i = 0; i < binCount; i++) {
	labels.push(`${(min + i * binWidth).toFixed(1)} - ${(min + (i + 1) * binWidth).toFixed(1)}`);
	}

	data.forEach(value => {
	const binIndex = Math.min(Math.floor((value - min) / binWidth), binCount - 1);
	bins[binIndex]++;
	});

	window.statisticsChart = new Chart(ctx, {
	type: 'bar',
	data: {
	labels: labels,
	datasets: [{
	label: 'Frequency',
	data: bins,
	backgroundColor: 'rgba(99, 102, 241, 0.7)',
	borderColor: 'rgba(99, 102, 241, 1)',
	borderWidth: 1
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	y: {
	beginAtZero: true,
	title: {
	display: true,
	text: 'Frequency'
	}
	},
	x: {
	title: {
	display: true,
	text: 'Value Range'
	}
	}
	}
	}
	});
	}

	function clearStatistics() {
	document.getElementById('dataSet').value = '';
	document.getElementById('statCount').textContent = '0';
	document.getElementById('statSum').textContent = '0';
	document.getElementById('statMean').textContent = '0';
	document.getElementById('statMedian').textContent = '0';
	document.getElementById('statMode').textContent = '0';
	document.getElementById('statRange').textContent = '0';
	document.getElementById('statVariance').textContent = '0';
	document.getElementById('statStdDev').textContent = '0';
	document.getElementById('statQ1').textContent = '0';
	document.getElementById('statQ3').textContent = '0';
	document.getElementById('statIQR').textContent = '0';
	document.getElementById('statSkewness').textContent = '0';

	// Clear chart
	const ctx = document.getElementById('statisticsChart').getContext('2d');
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
	}
	// Programmer functions
	function convertNumberSystems() {
	const decInput = document.getElementById('decInput');
	const binInput = document.getElementById('binInput');
	const octInput = document.getElementById('octInput');
	const hexInput = document.getElementById('hexInput');

	// Determine which input was changed
	const changedElement = document.activeElement;

	try {
	let decimalValue;

	if (changedElement === decInput) {
	decimalValue = parseInt(decInput.value) \|\| 0;
	} else if (changedElement === binInput) {
	decimalValue = parseInt(binInput.value, 2) \|\| 0;
	} else if (changedElement === octInput) {
	decimalValue = parseInt(octInput.value, 8) \|\| 0;
	} else if (changedElement === hexInput) {
	decimalValue = parseInt(hexInput.value, 16) \|\| 0;
	} else {
	return;
	}

	// Update all fields
	decInput.value = decimalValue;
	binInput.value = decimalValue.toString(2);
	octInput.value = decimalValue.toString(8);
	hexInput.value = decimalValue.toString(16).toUpperCase();
	} catch (error) {
	// Invalid input - do nothing
	}
	}
	function performBitwise(operation) {
	const num1 = parseInt(document.getElementById('bitNum1').value) \|\| 0;
	const num2 = parseInt(document.getElementById('bitNum2').value) \|\| 0;
	let result;

	switch(operation) {
	case 'AND':
	result = num1 & num2;
	break;
	case 'OR':
	result = num1 \| num2;
	break;
	case 'XOR':
	result = num1 ^ num2;
	break;
	case 'NOT':
	result = ~num1;
	break;
	default:
	result = 0;
	}

	document.getElementById('bitwiseResult').textContent = `Result: ${result} (0b${result.toString(2)})`;
	}

	function shiftBits(direction) {
	const num1 = parseInt(document.getElementById('bitNum1').value) \|\| 0;
	const positions = parseInt(document.getElementById('bitNum2').value) \|\| 1;
	let result;

	if (direction === 'left') {
	result = num1 << positions;
	} else {
	result = num1 >> positions;
	}

	document.getElementById('bitwiseResult').textContent = `Result: ${result} (0b${result.toString(2)})`;
	}

	function rotateBits(direction) {
	const num1 = parseInt(document.getElementById('bitNum1').value) \|\| 0;
	const positions = parseInt(document.getElementById('bitNum2').value) \|\| 1;
	let result;

	// 32-bit rotation
	if (direction === 'left') {
	result = (num1 << positions) \| (num1 >>> (32 - positions));
	} else {
	result = (num1 >>> positions) \| (num1 << (32 - positions));
	}

	document.getElementById('bitwiseResult').textContent = `Result: ${result} (0b${result.toString(2)})`;
	}

	function logicOperation(operation) {
	const num1 = parseInt(document.getElementById('bitNum1').value) \|\| 0;
	const num2 = parseInt(document.getElementById('bitNum2').value) \|\| 0;
	let result;

	switch(operation) {
	case 'nand':
	result = ~(num1 & num2);
	break;
	case 'nor':
	result = ~(num1 \| num2);
	break;
	case 'xnor':
	result = ~(num1 ^ num2);
	break;
	default:
	result = 0;
	}

	document.getElementById('bitwiseResult').textContent = `Result: ${result} (0b${result.toString(2)})`;
	}
	// Financial functions
	function calculateCompoundInterest() {
	const principal = parseFloat(document.getElementById('principal').value) \|\| 0;
	const annualRate = (parseFloat(document.getElementById('interestRate').value) \|\| 0) / 100;
	const time = parseFloat(document.getElementById('timePeriod').value) \|\| 0;
	const compoundFreq = parseInt(document.getElementById('compoundFreq').value) \|\| 1;

	// Future Value calculation
	const futureValue = principal * Math.pow(1 + (annualRate / compoundFreq), compoundFreq * time);
	const totalInterest = futureValue - principal;

	// APY calculation
	const apy = (Math.pow(1 + (annualRate / compoundFreq), compoundFreq) - 1) * 100;

	// Update UI
	document.getElementById('futureValue').textContent = `${futureValue.toFixed(2)}`;
	document.getElementById('totalInterest').textContent = `${totalInterest.toFixed(2)}`;
	document.getElementById('apyRate').textContent = `${apy.toFixed(2)}%`;
	}

	function calculateLoanPayment() {
	const loanAmount = parseFloat(document.getElementById('loanAmount').value) \|\| 0;
	const annualInterestRate = (parseFloat(document.getElementById('loanInterestRate').value) \|\| 0) / 100;
	const loanTerm = parseFloat(document.getElementById('loanTerm').value) \|\| 0;
	const paymentsPerYear = parseInt(document.getElementById('paymentsPerYear').value) \|\| 12;

	const monthlyRate = annualInterestRate / paymentsPerYear;
	const totalPayments = loanTerm * paymentsPerYear;

	// Monthly payment calculation
	const monthlyPayment = (loanAmount * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -totalPayments));
	const totalPayment = monthlyPayment * totalPayments;
	const totalInterest = totalPayment - loanAmount;

	// Update UI
	document.getElementById('monthlyPayment').textContent = `${monthlyPayment.toFixed(2)}`;
	document.getElementById('totalPayment').textContent = `${totalPayment.toFixed(2)}`;
	document.getElementById('loanTotalInterest').textContent = `${totalInterest.toFixed(2)}`;
	}

	function clearFinancial() {
	document.getElementById('principal').value = '1000';
	document.getElementById('interestRate').value = '5';
	document.getElementById('timePeriod').value = '5';
	document.getElementById('compoundFreq').value = '1';
	document.getElementById('futureValue').textContent = '$1,280.08';
	document.getElementById('totalInterest').textContent = '$280.08';
	document.getElementById('apyRate').textContent = '5.12%';
	}

	function clearLoan() {
	document.getElementById('loanAmount').value = '10000';
	document.getElementById('loanInterestRate').value = '6';
	document.getElementById('loanTerm').value = '5';
	document.getElementById('paymentsPerYear').value = '12';
	document.getElementById('monthlyPayment').textContent = '$193.33';
	document.getElementById('totalPayment').textContent = '$11,599.80';
	document.getElementById('loanTotalInterest').textContent = '$1,599.80';
	}
	// Calculus functions
	function initializeChart() {
	const ctx = document.getElementById('functionChart').getContext('2d');
	functionChart = new Chart(ctx, {
	type: 'line',
	data: {
	labels: [],
	datasets: [{
	label: 'f(x)',
	data: [],
	borderColor: '#6366f1',
	backgroundColor: 'rgba(99, 102, 241, 0.1)',
	borderWidth: 2,
	fill: true,
	tension: 0.4
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	x: {
	title: {
	display: true,
	text: 'x'
	}
	},
	y: {
	title: {
	display: true,
	text: 'f(x)'
	}
	}
	}
	}
	});
	}

	function updateChart() {
	const funcStr = document.getElementById('functionInput').value \|\| 'x^2';
	const points = [];
	const values = [];

	// Generate data points
	for (let x = -10; x <= 10; x += 0.5) {
	try {
	const expr = funcStr.replace(/\^/g, '**').replace(/x/g, x);
	const y = eval(expr);
	if (isFinite(y)) {
	points.push(x);
	values.push(y);
	}
	} catch (e) {
	// Skip invalid points
	}
	}

	functionChart.data.labels = points;
	functionChart.data.datasets[0].data = values;
	functionChart.data.datasets[0].label = `f(x) = ${funcStr}`;
	functionChart.update();
	}

	function calculateDerivative() {
	const funcStr = document.getElementById('functionInput').value \|\| 'x^2';
	const point = parseFloat(document.getElementById('pointInput').value) \|\| 2;

	// Update point display
	document.getElementById('pointValue').textContent = point;

	// Simple derivative calculation using numerical differentiation
	const h = 1e-5;
	const expr1 = funcStr.replace(/\^/g, '**').replace(/x/g, `(${point + h})`);
	const expr2 = funcStr.replace(/\^/g, '**').replace(/x/g, `(${point - h})`);

	try {
	const f1 = eval(expr1);
	const f2 = eval(expr2);
	const derivative = (f1 - f2) / (2 * h);

	// Symbolic derivative for simple cases
	let symbolicDerivative = "Unknown";
	if (funcStr.includes('x^2')) {
	symbolicDerivative = funcStr.replace('x^2', '2*x');
	} else if (funcStr.includes('x^3')) {
	symbolicDerivative = funcStr.replace('x^3', '3*x^2');
	} else if (funcStr === 'x') {
	symbolicDerivative = '1';
	} else if (!isNaN(parseFloat(funcStr))) {
	symbolicDerivative = '0';
	}

	document.getElementById('derivativeResult').textContent = symbolicDerivative;
	document.getElementById('derivativeAtPoint').textContent = derivative.toFixed(4);

	// Update integral result
	let integral = "Unknown";
	if (funcStr.includes('x^2')) {
	integral = funcStr.replace('x^2', '(1/3)*x^3');
	} else if (funcStr === 'x') {
	integral = '(1/2)*x^2';
	} else if (!isNaN(parseFloat(funcStr))) {
	integral = `${funcStr}*x`;
	}
	document.getElementById('integralResult').textContent = `${integral} + C`;

	// Update chart
	updateChart();
	} catch (e) {
	document.getElementById('derivativeResult').textContent = "Error";
	document.getElementById('derivativeAtPoint').textContent = "Error";
	document.getElementById('integralResult').textContent = "Error";
	}
	}

	function calculateIntegral() {
	// This function is now integrated into calculateDerivative
	calculateDerivative();
	}

	function clearCalculus() {
	document.getElementById('functionInput').value = 'x^2';
	document.getElementById('pointInput').value = '2';
	document.getElementById('derivativeResult').textContent = '2*x';
	document.getElementById('pointValue').textContent = '2';
	document.getElementById('derivativeAtPoint').textContent = '4';
	document.getElementById('integralResult').textContent = '(1/3)*x^3 + C';
	updateChart();
	}
	// History functions
	function addToHistory(expression, result) {
	const historyItem = {
	expression: expression,
	result: result,
	timestamp: new Date()
	};

	calculationHistory.unshift(historyItem);
	if (calculationHistory.length > 20) {
	calculationHistory.pop();
	}

	saveHistory();
	updateHistoryDisplay();
	}

	function updateHistoryDisplay() {
	if (calculationHistory.length === 0) {
	historyList.innerHTML = '<div class="text-gray-500 text-center py-8">No calculations yet</div>';
	return;
	}

	let html = '';
	calculationHistory.forEach((item, index) => {
	html += `
	<div class="history-item p-3 rounded-lg mb-2 cursor-pointer hover:bg-gray-800"
	onclick="loadHistoryItem(${index})">
	<div class="font-mono text-sm">${item.expression} =</div>
	<div class="font-mono font-bold">${item.result}</div>
	<div class="text-xs text-gray-500 mt-1">
	${item.timestamp.toLocaleTimeString()}
	</div>
	</div>
	`;
	});

	historyList.innerHTML = html;
	}

	function loadHistoryItem(index) {
	const item = calculationHistory[index];
	currentInput = item.result.toString();
	updateDisplay();
	}

	function saveHistory() {
	localStorage.setItem('calculatorHistory', JSON.stringify(calculationHistory));
	}

	function loadHistory() {
	const saved = localStorage.getItem('calculatorHistory');
	if (saved) {
	calculationHistory = JSON.parse(saved);
	updateHistoryDisplay();
	}
	}
	// Keyboard support
	document.addEventListener('keydown', function(event) {
	if (currentMode === 'basic' \|\| currentMode === 'scientific') {
	const key = event.key;

	if (key >= '0' && key <= '9' \|\| key === '.' \|\| key === '+' \|\| key === '-' \|\| key === '*' \|\| key === '/') {
	appendToDisplay(key === '*' ? '×' : key);
	} else if (key === 'Enter' \|\| key === '=') {
	calculateResult();
	} else if (key === 'Escape') {
	clearAll();
	} else if (key === 'Backspace') {
	deleteLast();
	} else if (key === '(' \|\| key === ')') {
	appendToDisplay(key);
	}
	}
	});
	</script>
	</body>
	</html>