Calculator.ist home page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sleek Silver & Black Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.calculator {
width: 100%;
max-width: 768px;
min-width: 320px;
background-color: black;
border-radius: 10px;
padding: 24px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
border: 2px solid #4A4A4A;
margin: auto;
position: relative;
}
.calculator::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 5px;
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.display {
background-color: black;
height: 96px;
margin-bottom: 24px;
padding: 16px;
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
border: 2px solid #4A4A4A;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
}
.expression {
color: #808080;
font-size: 1rem;
font-weight: 500;
margin-bottom: 4px;
width: 100%;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.result {
color: #D1D9E6;
font-size: 2rem;
font-weight: 500;
width: 100%;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.button {
background-color: black;
border: 2px solid #4A4A4A;
color: #E6ECEF;
border-radius: 8px;
font-size: 1.5rem;
font-weight: 500;
height: 64px;
cursor: pointer;
transition: background-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.button:hover {
background-color: #1A1A1A;
}
.button:active {
background-color: #262626;
}
.button.span-2 {
grid-column: span 2;
height: 64px;
}
.button.span-row-2 {
grid-row: span 2;
height: 144px;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display">
<div class="expression" id="expression"></div>
<div class="result" id="result">0</div>
</div>
<div class="buttons">
<button class="button span-2" onclick="clearAll()">AC</button>
<button class="button" onclick="addOperation('÷')">÷</button>
<button class="button" onclick="addOperation('×')">×</button>
<button class="button" onclick="addNumber('7')">7</button>
<button class="button" onclick="addNumber('8')">8</button>
<button class="button" onclick="addNumber('9')">9</button>
<button class="button" onclick="addOperation('-')">-</button>
<button class="button" onclick="addNumber('4')">4</button>
<button class="button" onclick="addNumber('5')">5</button>
<button class="button" onclick="addNumber('6')">6</button>
<button class="button" onclick="addOperation('+')">+</button>
<button class="button" onclick="addNumber('1')">1</button>
<button class="button" onclick="addNumber('2')">2</button>
<button class="button" onclick="addNumber('3')">3</button>
<button class="button span-row-2" onclick="calculate()">=</button>
<button class="button span-2" onclick="addNumber('0')">0</button>
<button class="button" onclick="addDecimal()">.</button>
</div>
</div>
<script>
let display = '0';
let expressionText = '';
let previousValue = null;
let operation = null;
let resetDisplay = false;
const resultElement = document.getElementById('result');
const expressionElement = document.getElementById('expression');
function updateDisplay() {
resultElement.textContent = display;
expressionElement.textContent = expressionText;
}
function addNumber(number) {
if (display === '0' || resetDisplay) {
display = number;
resetDisplay = false;
} else {
display += number;
}
if (resetDisplay && operation) {
expressionText += number;
} else if (display === '0' || resetDisplay) {
expressionText = previousValue !== null ? `${previousValue} ${operation} ${number}` : number;
} else {
expressionText = previousValue !== null ? `${previousValue} ${operation} ${display}` : display;
}
updateDisplay();
}
function addOperation(op) {
previousValue = parseFloat(display);
operation = op;
resetDisplay = true;
if (expressionText === '') {
expressionText = `${display} ${op}`;
} else if (resetDisplay && operation) {
expressionText = expressionText.slice(0, expressionText.length - 1) + op;
} else {
expressionText = `${expressionText} ${op}`;
}
updateDisplay();
}
function calculate() {
if (previousValue === null || operation === null) return;
const currentValue = parseFloat(display);
let result;
switch (operation) {
case '+':
result = previousValue + currentValue;
break;
case '-':
result = previousValue - currentValue;
break;
case '×':
result = previousValue * currentValue;
break;
case '÷':
result = previousValue / currentValue;
break;
default:
return;
}
display = String(result);
expressionText = `${expressionText} = ${result}`;
previousValue = null;
operation = null;
updateDisplay();
}
function clearAll() {
display = '0';
expressionText = '';
previousValue = null;
operation = null;
resetDisplay = false;
updateDisplay();
}
function addDecimal() {
if (resetDisplay) {
display = '0.';
resetDisplay = false;
expressionText = previousValue !== null ? `${previousValue} ${operation} 0.` : '0.';
} else if (!display.includes('.')) {
display += '.';
if (expressionText === '') {
expressionText = display;
} else if (previousValue !== null && operation) {
if (resetDisplay) {
expressionText = `${previousValue} ${operation} 0.`;
} else {
expressionText = `${previousValue} ${operation} ${display}`;
}
} else {
expressionText = display;
}
}
updateDisplay();
}
updateDisplay();
</script>
</body>
</html>
Comments
Post a Comment