Classy Calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultimate Premium Calculator</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #2a2a2a;
transition: background 0.3s ease;
}
.calculator {
background-color: #121212;
border-radius: 16px;
padding: 24px;
border: 2px solid #BAC4C8;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px #BAC4C8;
max-width: 340px;
width: 100%;
position: relative;
transition: all 0.3s ease;
}
.calculator.light-theme {
background-color: #f5f5f5;
border-color: #ccc;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 1px 1px #eee;
}
.history-panel {
background-color: rgba(30,30,30,0.8);
border-radius: 8px;
padding: 10px;
margin-bottom: 15px;
max-height: 100px;
overflow-y: auto;
color: #C8CDD0;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.light-theme .history-panel {
background-color: rgba(240,240,240,0.9);
color: #333;
}
.history-item {
padding: 4px 0;
border-bottom: 1px solid #444;
font-size: 0.85rem;
}
.light-theme .history-item {
border-bottom-color: #ddd;
}
.display {
background-color: #1A1A1A;
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
border: 1px solid #7D8184;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 1px #BAC4C8;
text-align: right;
overflow: hidden;
min-height: 72px;
transition: all 0.3s ease;
}
.light-theme .display {
background-color: #f0f0f0;
border-color: #ccc;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 1px #eee;
}
.display-value {
color: #C8CDD0;
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.3s ease;
}
.light-theme .display-value {
color: #333;
}
.operation-display {
color: #A5A9AB;
font-size: 1.2rem;
min-height: 20px;
transition: color 0.3s ease;
}
.light-theme .operation-display {
color: #666;
}
.memory-indicator {
color: #BAC4C8;
font-size: 0.75rem;
margin-top: 4px;
text-align: right;
transition: color 0.3s ease;
}
.light-theme .memory-indicator {
color: #888;
}
.buttons-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.scientific-panel {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 8px;
}
.btn {
height: 56px;
border-radius: 50%;
border: none;
font-size: 1.25rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.btn-digit {
background-color: #1E1E1E;
color: #E0E0E0;
border: 1px solid #BAC4C8;
}
.light-theme .btn-digit {
background-color: #fff;
color: #333;
border-color: #ccc;
}
.btn-digit:hover {
background-color: #7D8184;
}
.light-theme .btn-digit:hover {
background-color: #e0e0e0;
}
.btn-operation {
background-color: #A5A9AB;
color: #FFF;
}
.light-theme .btn-operation {
background-color: #4a90e2;
color: #fff;
}
.btn-operation:hover {
background-color: #4A4A4A;
}
.light-theme .btn-operation:hover {
background-color: #3a7bc8;
}
.btn-operation.active {
background-color: #4A4A4A;
}
.light-theme .btn-operation.active {
background-color: #3a7bc8;
}
.btn-function {
background-color: #7D8184;
color: #E0E0E0;
}
.light-theme .btn-function {
background-color: #e0e0e0;
color: #333;
}
.btn-function:hover {
background-color: #BAC4C8;
}
.light-theme .btn-function:hover {
background-color: #d0d0d0;
}
.btn-special {
background-color: #BAC4C8;
color: #121212;
}
.light-theme .btn-special {
background-color: #ff7043;
color: #fff;
}
.btn-special:hover {
background-color: #A5A9AB;
}
.light-theme .btn-special:hover {
background-color: #e64a19;
}
.btn-equals {
background-color: #3A3A3A;
color: #FFF;
grid-column: span 3;
border-radius: 28px;
}
.light-theme .btn-equals {
background-color: #4caf50;
color: #fff;
}
.btn-equals:hover {
background-color: #A5A9AB;
}
.light-theme .btn-equals:hover {
background-color: #3d8b40;
}
.btn-animate {
transform: scale(0.95);
transition: transform 0.1s ease;
}
.display-animate {
animation: pulse 0.3s ease;
}
@keyframes pulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
.theme-switcher {
position: absolute;
top: 15px;
right: 15px;
background: #333;
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.light-theme .theme-switcher {
background: #4a90e2;
}
.footer {
color: #A5A9AB;
font-size: 0.75rem;
text-align: center;
margin-top: 16px;
transition: color 0.3s ease;
}
.light-theme .footer {
color: #888;
}
</style>
</head>
<body>
<div class="calculator dark-theme">
<button class="theme-switcher" onclick="toggleTheme()">🌓</button>
<div class="history-panel" id="history"></div>
<div class="display">
<div class="operation-display" id="operation-display"></div>
<div class="display-value" id="display">0</div>
<div class="memory-indicator" id="memory-indicator"></div>
</div>
<div class="scientific-panel">
<button class="btn btn-function" onclick="squareRoot()">√</button>
<button class="btn btn-function" onclick="power()">x^y</button>
<button class="btn btn-function" onclick="logarithm()">log</button>
<button class="btn btn-function" onclick="sine()">sin</button>
<button class="btn btn-function" onclick="toggleDegRad()">DEG</button>
</div>
<div class="buttons-grid">
<button class="btn btn-special" onclick="clearDisplay()">C</button>
<button class="btn btn-function" onclick="clearAll()">AC</button>
<button class="btn btn-function" onclick="inputPercent()">%</button>
<button class="btn btn-operation" onclick="performOperation('÷')">÷</button>
<button class="btn btn-function" onclick="memoryClear()">MC</button>
<button class="btn btn-digit" onclick="inputDigit(7)">7</button>
<button class="btn btn-digit" onclick="inputDigit(8)">8</button>
<button class="btn btn-digit" onclick="inputDigit(9)">9</button>
<button class="btn btn-operation" onclick="performOperation('×')">×</button>
<button class="btn btn-function" onclick="memoryAdd()">M+</button>
<button class="btn btn-digit" onclick="inputDigit(4)">4</button>
<button class="btn btn-digit" onclick="inputDigit(5)">5</button>
<button class="btn btn-digit" onclick="inputDigit(6)">6</button>
<button class="btn btn-operation" onclick="performOperation('-')">−</button>
<button class="btn btn-function" onclick="memorySubtract()">M-</button>
<button class="btn btn-digit" onclick="inputDigit(1)">1</button>
<button class="btn btn-digit" onclick="inputDigit(2)">2</button>
<button class="btn btn-digit" onclick="inputDigit(3)">3</button>
<button class="btn btn-operation" onclick="performOperation('+')">+</button>
<button class="btn btn-function" onclick="memoryRecall()">MR</button>
<button class="btn btn-digit" onclick="inputDigit(0)">0</button>
<button class="btn btn-digit" onclick="inputDecimal()">.</button>
<button class="btn btn-equals" onclick="performOperation('=')">=</button>
</div>
<div class="footer">PROFESSIONAL EDITION</div>
</div>
<script>
// Calculator state
let display = '0';
let previousValue = null;
let operation = null;
let waitingForOperand = false;
let memory = 0;
let lastOperation = null;
let operationDisplay = '';
let isRadians = false;
let currentTheme = 'dark';
let calculationHistory = [];
// DOM elements
const displayElement = document.getElementById('display');
const operationDisplayElement = document.getElementById('operation-display');
const memoryIndicator = document.getElementById('memory-indicator');
const operationButtons = document.querySelectorAll('.btn-operation');
const historyElement = document.getElementById('history');
// Update the display
function updateDisplay() {
displayElement.textContent = formatDisplay(display);
operationDisplayElement.textContent = operationDisplay;
memoryIndicator.textContent = memory !== 0 ? `M: ${formatDisplay(memory)}` : '';
// Update active operation highlighting
operationButtons.forEach(button => {
if (button.textContent === lastOperation && lastOperation !== '=') {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
}
// Format display value
function formatDisplay(value) {
if (typeof value !== 'number') {
value = parseFloat(value);
if (isNaN(value)) return '0';
}
// Handle large numbers with scientific notation
if (Math.abs(value) > 999999999) {
return value.toExponential(6);
}
// Handle decimal places for string values
if (typeof value === 'string' && value.includes('.')) {
const decimalPlaces = value.split('.')[1].length;
return decimalPlaces > 6 ? parseFloat(value).toFixed(6) : value;
}
// Handle decimal places for numbers
if (value % 1 !== 0) {
const strValue = value.toString();
const decimalPlaces = strValue.split('.')[1]?.length || 0;
return decimalPlaces > 6 ? value.toFixed(6) : strValue;
}
return value.toString();
}
// Input a digit
function inputDigit(digit) {
if (waitingForOperand) {
display = String(digit);
waitingForOperand = false;
operationDisplay = '';
} else {
display = display === '0' ? String(digit) : display + digit;
}
updateDisplay();
}
// Input a decimal point
function inputDecimal() {
if (waitingForOperand) {
display = '0.';
waitingForOperand = false;
operationDisplay = '';
} else if (!display.includes('.')) {
display += '.';
}
updateDisplay();
}
// Clear the display
function clearDisplay() {
display = '0';
previousValue = null;
operation = null;
waitingForOperand = false;
lastOperation = null;
operationDisplay = '';
updateDisplay();
}
// Clear everything (including memory)
function clearAll() {
clearDisplay();
memory = 0;
calculationHistory = [];
updateHistoryDisplay();
updateDisplay();
}
// Toggle the sign of the current value
function toggleSign() {
const newValue = parseFloat(display) * -1;
display = String(newValue);
updateDisplay();
}
// Convert to percentage
function inputPercent() {
const value = parseFloat(display);
display = String(value / 100);
updateDisplay();
}
// Perform an operation
function performOperation(nextOperation) {
const inputValue = parseFloat(display);
if (previousValue === null) {
previousValue = inputValue;
operationDisplay = `${formatDisplay(previousValue)} ${nextOperation === '=' ? '' : nextOperation}`;
} else if (operation) {
const currentValue = previousValue || 0;
let newValue;
switch (operation) {
case '+':
newValue = currentValue + inputValue;
break;
case '-':
newValue = currentValue - inputValue;
break;
case '×':
newValue = currentValue * inputValue;
break;
case '÷':
newValue = currentValue / inputValue;
break;
case '^':
newValue = Math.pow(currentValue, inputValue);
break;
default:
newValue = inputValue;
}
previousValue = newValue;
display = String(newValue);
if (nextOperation === '=') {
const calculation = `${formatDisplay(currentValue)} ${operation} ${formatDisplay(inputValue)} = ${formatDisplay(newValue)}`;
addToHistory(calculation);
operationDisplay = '';
} else {
operationDisplay = `${formatDisplay(newValue)} ${nextOperation}`;
}
}
lastOperation = nextOperation;
if (nextOperation === '=') {
operation = null;
previousValue = null;
} else {
operation = nextOperation;
}
waitingForOperand = true;
updateDisplay();
}
// Memory functions
function memoryClear() {
memory = 0;
updateDisplay();
}
function memoryAdd() {
memory += parseFloat(display);
updateDisplay();
}
function memorySubtract() {
memory -= parseFloat(display);
updateDisplay();
}
function memoryRecall() {
display = String(memory);
waitingForOperand = true;
updateDisplay();
}
// Scientific functions
function squareRoot() {
const value = parseFloat(display);
if (value >= 0) {
const result = Math.sqrt(value);
display = String(result);
addToHistory(`√(${formatDisplay(value)}) = ${formatDisplay(result)}`);
animateDisplay();
} else {
display = 'Error';
}
updateDisplay();
}
function power() {
previousValue = parseFloat(display);
operation = '^';
operationDisplay = `${formatDisplay(previousValue)} ^`;
waitingForOperand = true;
updateDisplay();
}
function logarithm() {
const value = parseFloat(display);
if (value > 0) {
const result = Math.log10(value);
display = String(result);
addToHistory(`log(${formatDisplay(value)}) = ${formatDisplay(result)}`);
animateDisplay();
} else {
display = 'Error';
}
updateDisplay();
}
function naturalLog() {
const value = parseFloat(display);
if (value > 0) {
const result = Math.log(value);
display = String(result);
addToHistory(`ln(${formatDisplay(value)}) = ${formatDisplay(result)}`);
animateDisplay();
} else {
display = 'Error';
}
updateDisplay();
}
function sine() {
let value = parseFloat(display);
if (!isRadians) value = value * Math.PI / 180;
const result = Math.sin(value);
display = String(result);
addToHistory(`sin(${formatDisplay(value)}${isRadians ? 'rad' : '°'}) = ${formatDisplay(result)}`);
animateDisplay();
updateDisplay();
}
function cosine() {
let value = parseFloat(display);
if (!isRadians) value = value * Math.PI / 180;
const result = Math.cos(value);
display = String(result);
addToHistory(`cos(${formatDisplay(value)}${isRadians ? 'rad' : '°'}) = ${formatDisplay(result)}`);
animateDisplay();
updateDisplay();
}
function tangent() {
let value = parseFloat(display);
if (!isRadians) value = value * Math.PI / 180;
const result = Math.tan(value);
display = String(result);
addToHistory(`tan(${formatDisplay(value)}${isRadians ? 'rad' : '°'}) = ${formatDisplay(result)}`);
animateDisplay();
updateDisplay();
}
function factorial() {
const value = parseInt(display);
if (value < 0) {
display = 'Error';
} else if (value === 0 || value === 1) {
display = '1';
} else {
let result = 1;
for (let i = 2; i <= value; i++) {
result *= i;
}
display = String(result);
addToHistory(`${value}! = ${formatDisplay(result)}`);
animateDisplay();
}
updateDisplay();
}
function toggleDegRad() {
isRadians = !isRadians;
document.querySelector('[onclick="toggleDegRad()"]').textContent =
isRadians ? 'RAD' : 'DEG';
}
// History functions
function addToHistory(calculation) {
calculationHistory.unshift(calculation);
if (calculationHistory.length > 5) calculationHistory.pop();
updateHistoryDisplay();
}
function updateHistoryDisplay() {
historyElement.innerHTML = calculationHistory.map(item =>
`<div class="history-item">${item}</div>`
).join('');
}
// Theme functions
function toggleTheme() {
const calculator = document.querySelector('.calculator');
if (currentTheme === 'dark') {
calculator.classList.remove('dark-theme');
calculator.classList.add('light-theme');
currentTheme = 'light';
} else {
calculator.classList.remove('light-theme');
calculator.classList.add('dark-theme');
currentTheme = 'dark';
}
}
// Animation effects
function animateDisplay() {
const displayEl = document.getElementById('display');
displayEl.classList.add('display-animate');
setTimeout(() => {
displayEl.classList.remove('display-animate');
}, 300);
}
// Keyboard support
document.addEventListener('keydown', (e) => {
const button = Array.from(document.querySelectorAll('.btn')).find(btn => {
if (e.key === 'Enter' && btn.textContent === '=') return true;
if (e.key === 'Escape' && btn.textContent === 'AC') return true;
if (e.key === btn.textContent) return true;
if ((e.key === '*' || e.key === '/') &&
(btn.textContent === '×' || btn.textContent === '÷')) return true;
if (e.key === 's' && btn.textContent === 'sin') return true;
if (e.key === 'c' && btn.textContent === 'cos') return true;
if (e.key === 't' && btn.textContent === 'tan') return true;
if (e.key === 'l' && btn.textContent === 'log') return true;
if (e.key === 'q' && btn.textContent === '√') return true;
if (e.key === '!' && btn.textContent === 'x!') return true;
if (e.key === '^' && btn.textContent === 'x^y') return true;
return false;
});
if (button) {
button.classList.add('btn-animate');
setTimeout(() => button.classList.remove('btn-animate'), 100);
button.click();
} else if (/[0-9]/.test(e.key)) {
inputDigit(parseInt(e.key));
} else if (e.key === '.') {
inputDecimal();
} else if (e.key === '%') {
inputPercent();
} else if (e.key === 'Backspace') {
clearDisplay();
}
});
// Initialize the display
updateDisplay();
</script>
</body>
</html>
Comments
Post a Comment