Calc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Casio fx-991EX Classwiz</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
margin: 0;
}
.calculator {
width: 300px;
background-color: #202020;
border-radius: 10px;
padding: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
position: relative;
}
.calculator::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(45deg, #333, #555);
border-radius: 15px;
z-index: -1;
}
.brand {
color: white;
font-size: 18px;
font-weight: bold;
position: absolute;
top: 10px;
left: 15px;
}
.model {
color: #4dabf7;
font-size: 12px;
position: absolute;
top: 30px;
left: 15px;
}
.classwiz {
color: #4dabf7;
font-size: 14px;
font-weight: bold;
position: absolute;
top: 12px;
right: 15px;
}
.natural-display {
color: #999;
font-size: 10px;
position: absolute;
top: 30px;
right: 15px;
}
.display-container {
background-color: #dbeef0;
margin-top: 45px;
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
height: 80px;
position: relative;
overflow: hidden;
}
.solar-panel {
position: absolute;
top: 5px;
right: 10px;
width: 60px;
height: 15px;
background: linear-gradient(to right, #333, #555);
border-radius: 2px;
display: flex;
justify-content: space-between;
padding: 1px;
}
.solar-cell {
width: 13px;
height: 13px;
background-color: #222;
border-radius: 1px;
}
.input-area {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 24px;
font-family: 'Courier New', monospace;
width: calc(100% - 20px);
text-align: right;
height: 30px;
overflow: hidden;
}
.result-area {
position: absolute;
top: 20px;
right: 10px;
font-size: 16px;
font-family: 'Courier New', monospace;
color: #555;
width: calc(100% - 20px);
text-align: right;
height: 20px;
overflow: hidden;
}
.keypad {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.btn {
border: none;
border-radius: 5px;
padding: 8px 0;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: all 0.1s;
background-color: #dddddd;
color: #333;
}
.btn:active {
transform: translateY(2px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-gold {
background-color: #d4a017;
color: white;
}
.btn-blue {
background-color: #4dabf7;
color: white;
}
.btn-red {
background-color: #fa5252;
color: white;
}
.btn-dark {
background-color: #555;
color: white;
}
.btn-equal {
background-color: #52b788;
color: white;
}
.shift-indicator {
position: absolute;
top: 50px;
left: 15px;
color: #666;
font-size: 10px;
}
.alpha-indicator {
position: absolute;
top: 65px;
left: 15px;
color: #666;
font-size: 10px;
}
.mode-button {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="calculator">
<div class="brand">CASIO</div>
<div class="model">fx-991EX</div>
<div class="classwiz">ClassWiz</div>
<div class="natural-display">NATURAL-V.P.A.M.</div>
<div class="display-container">
<div class="solar-panel">
<div class="solar-cell"></div>
<div class="solar-cell"></div>
<div class="solar-cell"></div>
<div class="solar-cell"></div>
</div>
<div class="shift-indicator" id="shift-indicator"></div>
<div class="alpha-indicator" id="alpha-indicator"></div>
<div class="result-area" id="result-area"></div>
<div class="input-area" id="input-area">0</div>
</div>
<div class="keypad">
<!-- Row 1 -->
<button class="btn btn-gold" onclick="handleShift()">SHIFT</button>
<button class="btn btn-dark" onclick="handleAlpha()">ALPHA</button>
<button class="btn mode-button" onclick="handleMode()">MODE</button>
<button class="btn btn-red" onclick="clearAll()">AC</button>
<!-- Row 2 -->
<button class="btn btn-blue" onclick="handleLog()">log</button>
<button class="btn btn-blue" onclick="handleLn()">ln</button>
<button class="btn btn-blue" onclick="handleMath()">MATH</button>
<button class="btn btn-blue" onclick="handlePow()">x<sup>y</sup></button>
<button class="btn" onclick="handleDel()">DEL</button>
<!-- Row 3 -->
<button class="btn" onclick="appendOperator('(')">(</button>
<button class="btn" onclick="appendOperator(')')">)</button>
<button class="btn" onclick="appendFunction('√(')">√</button>
<button class="btn" onclick="appendOperator('^2')">x²</button>
<button class="btn" onclick="appendOperator('÷')">÷</button>
<!-- Row 4 -->
<button class="btn" onclick="appendNumber(7)">7</button>
<button class="btn" onclick="appendNumber(8)">8</button>
<button class="btn" onclick="appendNumber(9)">9</button>
<button class="btn" onclick="appendOperator('×')">×</button>
<button class="btn" onclick="memoryRecall()">MR</button>
<!-- Row 5 -->
<button class="btn" onclick="appendNumber(4)">4</button>
<button class="btn" onclick="appendNumber(5)">5</button>
<button class="btn" onclick="appendNumber(6)">6</button>
<button class="btn" onclick="appendOperator('-')">-</button>
<button class="btn" onclick="memoryClear()">MC</button>
<!-- Row 6 -->
<button class="btn" onclick="appendNumber(1)">1</button>
<button class="btn" onclick="appendNumber(2)">2</button>
<button class="btn" onclick="appendNumber(3)">3</button>
<button class="btn" onclick="appendOperator('+')">+</button>
<button class="btn" onclick="memoryAdd()">M+</button>
<!-- Row 7 -->
<button class="btn" onclick="appendNumber(0)">0</button>
<button class="btn" onclick="appendOperator('.')">.</button>
<button class="btn" onclick="appendOperator('×10^')">×10<sup>x</sup></button>
<button class="btn" onclick="appendOperator('Ans')">Ans</button>
<button class="btn btn-equal" onclick="calculate()">=</button>
</div>
</div>
<script>
let inputValue = '0';
let resultValue = '';
let memoryValue = 0;
let lastAnswer = 0;
let resetInput = false;
let shiftActive = false;
let alphaActive = false;
const inputArea = document.getElementById('input-area');
const resultArea = document.getElementById('result-area');
const shiftIndicator = document.getElementById('shift-indicator');
const alphaIndicator = document.getElementById('alpha-indicator');
function updateDisplay() {
inputArea.textContent = inputValue;
resultArea.textContent = resultValue;
shiftIndicator.textContent = shiftActive ? 'SHIFT' : '';
alphaIndicator.textContent = alphaActive ? 'ALPHA' : '';
}
function appendNumber(num) {
if (resetInput || inputValue === '0') {
inputValue = num.toString();
resetInput = false;
} else {
inputValue += num.toString();
}
updateDisplay();
}
function appendOperator(op) {
if (resetInput) {
// If we're starting a new calculation after a result
if (op === '+' || op === '-' || op === '×' || op === '÷') {
inputValue = 'Ans' + op;
} else {
inputValue = op;
}
resetInput = false;
} else {
if (op === '.' && inputValue.split(/[\+\-\×\÷]/).pop().includes('.')) {
// Prevent multiple decimal points in a number
return;
}
inputValue += op;
}
updateDisplay();
}
function appendFunction(func) {
if (resetInput) {
inputValue = func;
resetInput = false;
} else if (inputValue === '0') {
inputValue = func;
} else {
inputValue += func;
}
updateDisplay();
}
function handleShift() {
shiftActive = !shiftActive;
alphaActive = false;
updateDisplay();
}
function handleAlpha() {
alphaActive = !alphaActive;
shiftActive = false;
updateDisplay();
}
function handleMode() {
resultValue = "Basic mode active";
updateDisplay();
setTimeout(() => {
resultValue = "";
updateDisplay();
}, 1500);
}
function handleLog() {
appendFunction('log(');
}
function handleLn() {
appendFunction('ln(');
}
function handleMath() {
resultValue = "MATH menu (basic mode)";
updateDisplay();
setTimeout(() => {
resultValue = "";
updateDisplay();
}, 1500);
}
function handlePow() {
appendOperator('^');
}
function handleDel() {
if (inputValue.length > 1) {
inputValue = inputValue.slice(0, -1);
} else {
inputValue = '0';
}
updateDisplay();
}
function clearAll() {
inputValue = '0';
resultValue = '';
resetInput = false;
updateDisplay();
}
function memoryAdd() {
try {
const currentValue = evaluateExpression(inputValue);
memoryValue += currentValue;
resultValue = 'M+: ' + memoryValue;
resetInput = true;
updateDisplay();
setTimeout(() => {
resultValue = '';
updateDisplay();
}, 1500);
} catch (error) {
resultValue = 'Error';
updateDisplay();
}
}
function memoryRecall() {
inputValue = memoryValue.toString();
updateDisplay();
}
function memoryClear() {
memoryValue = 0;
resultValue = 'Memory cleared';
updateDisplay();
setTimeout(() => {
resultValue = '';
updateDisplay();
}, 1500);
}
function evaluateExpression(expr) {
// Replace mathematical symbols with JavaScript operators
expr = expr.replace(/×/g, '*').replace(/÷/g, '/').replace(/\^/g, '**');
// Handle special functions
expr = expr.replace(/sqrt\((.*?)\)/g, 'Math.sqrt($1)');
expr = expr.replace(/log\((.*?)\)/g, 'Math.log10($1)');
expr = expr.replace(/ln\((.*?)\)/g, 'Math.log($1)');
expr = expr.replace(/Ans/g, lastAnswer);
// Evaluate the expression
return Function('"use strict"; return (' + expr + ')')();
}
function calculate() {
try {
const result = evaluateExpression(inputValue);
resultValue = inputValue + ' =';
inputValue = formatResult(result);
lastAnswer = result;
resetInput = true;
updateDisplay();
} catch (error) {
resultValue = 'Error';
updateDisplay();
}
}
function formatResult(result) {
// Handle different number formats
if (Math.abs(result) < 0.0000001 && result !== 0) {
return result.toExponential(6);
} else if (Math.abs(result) > 9999999999) {
return result.toExponential(6);
} else {
// Limit to 10 significant digits
const resultStr = result.toString();
if (resultStr.includes('.') && resultStr.length > 10) {
if (resultStr.split('.')[0].length >= 10) {
return result.toExponential(6);
} else {
return result.toFixed(10 - resultStr.split('.')[0].length - 1);
}
}
return resultStr;
}
}
</script>
</body>
</html>
Comments
Post a Comment