Comprehensive calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comprehensive Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
#calculator {
border: 2px solid #333;
padding: 20px;
width: 320px;
text-align: center;
}
#screen {
width: 90%;
padding: 10px;
font-size: 20px;
text-align: right;
margin-bottom: 10px;
border: 1px solid #ddd;
}
.button-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.button {
padding: 15px;
font-size: 16px;
cursor: pointer;
}
.converter-section {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Comprehensive Calculator</h1>
<div id="calculator">
<input type="text" id="screen" placeholder="0" disabled>
<div class="button-grid">
<button class="button" onclick="appendToScreen('1')">1</button>
<button class="button" onclick="appendToScreen('2')">2</button>
<button class="button" onclick="appendToScreen('3')">3</button>
<button class="button" onclick="setOperation('+')">+</button>
<button class="button" onclick="appendToScreen('4')">4</button>
<button class="button" onclick="appendToScreen('5')">5</button>
<button class="button" onclick="appendToScreen('6')">6</button>
<button class="button" onclick="setOperation('-')">-</button>
<button class="button" onclick="appendToScreen('7')">7</button>
<button class="button" onclick="appendToScreen('8')">8</button>
<button class="button" onclick="appendToScreen('9')">9</button>
<button class="button" onclick="setOperation('*')">×</button>
<button class="button" onclick="clearScreen()">C</button>
<button class="button" onclick="appendToScreen('0')">0</button>
<button class="button" onclick="calculate()">=</button>
<button class="button" onclick="setOperation('/')">÷</button>
</div>
<!-- Additional Operations -->
<div class="button-grid">
<button class="button" onclick="calculateTrigonometry('sin')">sin</button>
<button class="button" onclick="calculateTrigonometry('cos')">cos</button>
<button class="button" onclick="calculateTrigonometry('tan')">tan</button>
<button class="button" onclick="calculateFactorial()">n!</button>
<button class="button" onclick="calculateFibonacci()">Fib</button>
</div>
<!-- Converters -->
<div class="converter-section">
<h3>Currency Converter</h3>
<input type="number" id="currencyInput" placeholder="Amount">
<select id="currencySelect">
<option value="usdToEur">USD to EUR</option>
<option value="eurToUsd">EUR to USD</option>
<option value="pkrtousd">PKR TO USD</option>
<option value="usdtopkr">USD TO PKR</option>
</select>
<button onclick="convertCurrency()">Convert</button>
<p id="currencyResult"></p>
</div>
<div class="converter-section">
<h3>Temperature Converter</h3>
<input type="number" id="tempInput" placeholder="Temperature">
<select id="tempSelect">
<option value="cToF">Celsius to Fahrenheit</option>
<option value="fToC">Fahrenheit to Celsius</option>
</select>
<button onclick="convertTemperature()">Convert</button>
<p id="tempResult"></p>
</div>
<div class="converter-section">
<h3>Distance Converter</h3>
<input type="number" id="distanceInput" placeholder="Distance">
<select id="distanceSelect">
<option value="kmToMiles">Kilometers to Miles</option>
<option value="milesToKm">Miles to Kilometers</option>
</select>
<button onclick="convertDistance()">Convert</button>
<p id="distanceResult"></p>
</div>
<div class="converter-section">
<h3>Time Converter</h3>
<input type="number" id="timeInput" placeholder="Time">
<select id="timeSelect">
<option value="hoursToMinutes">Hours to Minutes</option>
<option value="minutesToSeconds">Minutes to Seconds</option>
</select>
<button onclick="convertTime()">Convert</button>
<p id="timeResult"></p>
</div>
</div>
<script>
let currentOperation = '';
let screen = document.getElementById('screen');
function appendToScreen(value) {
if (screen.value == '0') screen.value = '';
screen.value += value;
}
function setOperation(op) {
currentOperation = op;
screen.value += ` ${op} `;
}
function calculate() {
try {
screen.value = eval(screen.value.replace('×', '*').replace('÷', '/'));
} catch (error) {
screen.value = "Error";
}
}
function clearScreen() {
screen.value = '0';
}
function calculateTrigonometry(func) {
let num = parseFloat(screen.value);
if (func === 'sin') screen.value = Math.sin(num * Math.PI / 180).toFixed(4);
else if (func === 'cos') screen.value = Math.cos(num * Math.PI / 180).toFixed(4);
else if (func === 'tan') screen.value = Math.tan(num * Math.PI / 180).toFixed(4);
}
function calculateFactorial() {
let num = parseInt(screen.value);
let result = 1;
for (let i = 1; i <= num; i++) result *= i;
screen.value = result;
}
function calculateFibonacci() {
let n = parseInt(screen.value);
let series = [0, 1];
for (let i = 2; i < n; i++) {
series.push(series[i - 1] + series[i - 2]);
}
screen.value = series.slice(0, n).join(", ");
}
function convertCurrency() {
let amount = parseFloat(document.getElementById('currencyInput').value);
let conversion = document.getElementById('currencySelect').value;
let result;
if (conversion === "usdToEur") result = amount * 0.85;
else if (conversion === "eurToUsd") result = amount * 1.18;
if (conversion === "pkrtousd") result = amount / 280;
else if (conversion === "usdtopkr") result = amount * 280;
document.getElementById('currencyResult').textContent = `Converted Amount: ${result.toFixed(2)}`;
}
function convertTemperature() {
let temp = parseFloat(document.getElementById('tempInput').value);
let conversion = document.getElementById('tempSelect').value;
let result;
if (conversion === "cToF") result = (temp * 9/5) + 32;
else if (conversion === "fToC") result = (temp - 32) * 5/9;
document.getElementById('tempResult').textContent = `Converted Temperature: ${result.toFixed(2)}`;
}
function convertDistance() {
let distance = parseFloat(document.getElementById('distanceInput').value);
let conversion = document.getElementById('distanceSelect').value;
let result;
if (conversion === "kmToMiles") result = distance * 0.621371;
else if (conversion === "milesToKm") result = distance * 1.60934;
document.getElementById('distanceResult').textContent = `Converted Distance: ${result.toFixed(2)}`;
}
function convertTime() {
let time = parseFloat(document.getElementById('timeInput').value);
let conversion = document.getElementById('timeSelect').value;
let result;
if (conversion === "hoursToMinutes") result = time * 60;
else if (conversion === "minutesToSeconds") result = time * 60;
document.getElementById('timeResult').textContent = `Converted Time: ${result}`;
}
</script>