Muhammed please post these calculator's
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TI-108 Calculator</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: 260px; background-color: #1e8ed0; border-radius: 10px; padding: 20px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); position: relative; } .brand { position: absolute; top: 15px; left: 20px; color: white; font-weight: bold; } .model { position: absolute; top: 15px; right: 20px; color: white; font-weight: bold; } .display-container { background-color: #d5e7d5; border-radius: 5px; margin-top: 30px; margin-bottom: 15px; padding: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); position: relative; } .display { background-color: #a3b6a3; border-radius: 3px; height: 40px; display: flex; justify-content: flex-end; align-items: center; padding: 0 10px; font-size: 24px; font-family: 'Courier New', monospace; overflow: hidden; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } .keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .btn { border: none; border-radius: 5px; background-color: #f0f0f0; color: #333; font-size: 18px; padding: 15px 0; cursor: pointer; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); transition: all 0.1s; } .btn:active { transform: translateY(2px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .btn-red { background-color: #e06666; color: white; } .btn-blue { background-color: #6fa8dc; color: white; } .btn-equal { background-color: #93c47d; color: white; } .btn-zero { grid-column: span 2; } .solar-panel { height: 8px; background-color: #444; border-radius: 2px; margin-bottom: 10px; display: flex; justify-content: space-between; padding: 0 2px; } .solar-cell { width: 30px; height: 6px; margin-top: 1px; background-color: #222; border-radius: 1px; } </style> </head> <body> <div class="calculator"> <div class="brand">TEXAS INSTRUMENTS</div> <div class="model">TI-108</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="display" id="display">0</div> </div> <div class="keypad"> <button class="btn btn-red" onclick="clearAll()">ON/C</button> <button class="btn btn-blue" onclick="memoryAdd()">M+</button> <button class="btn btn-blue" onclick="memoryRecall()">MRC</button> <button class="btn" onclick="appendOperator('÷')">÷</button> <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="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="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 btn-zero" onclick="appendNumber(0)">0</button> <button class="btn" onclick="appendDecimal()">.</button> <button class="btn btn-equal" onclick="calculate()">=</button> </div> </div> <script> let displayValue = '0'; let currentValue = null; let pendingOperation = null; let memoryValue = 0; let resetDisplay = false; let lastButtonWasEquals = false; const display = document.getElementById('display'); function updateDisplay() { // Limit the display to 8 digits let valueToDisplay = displayValue; if (valueToDisplay.length > 8 && !valueToDisplay.includes('e')) { if (valueToDisplay.includes('.')) { // Truncate decimals to fit valueToDisplay = parseFloat(valueToDisplay).toFixed(8 - valueToDisplay.split('.')[0].length - 1); // Remove trailing zeros valueToDisplay = valueToDisplay.replace(/\.?0+$/, ''); } if (valueToDisplay.length > 8) { // Use scientific notation if still too long valueToDisplay = parseFloat(valueToDisplay).toExponential(4); } } display.textContent = valueToDisplay; } function appendNumber(num) { if (resetDisplay || displayValue === '0' || lastButtonWasEquals) { displayValue = num.toString(); resetDisplay = false; lastButtonWasEquals = false; } else { if (displayValue.length < 8) { displayValue += num.toString(); } } updateDisplay(); } function appendDecimal() { if (resetDisplay) { displayValue = '0.'; resetDisplay = false; lastButtonWasEquals = false; } else if (!displayValue.includes('.')) { displayValue += '.'; } updateDisplay(); } function appendOperator(op) { if (pendingOperation !== null && !resetDisplay) { calculate(); } currentValue = parseFloat(displayValue); pendingOperation = op; resetDisplay = true; lastButtonWasEquals = false; } function calculate() { if (pendingOperation === null) return; const secondValue = parseFloat(displayValue); let result; switch (pendingOperation) { case '+': result = currentValue + secondValue; break; case '-': result = currentValue - secondValue; break; case '×': result = currentValue * secondValue; break; case '÷': if (secondValue === 0) { displayValue = 'Error'; updateDisplay(); pendingOperation = null; resetDisplay = true; return; } result = currentValue / secondValue; break; } displayValue = result.toString(); pendingOperation = null; resetDisplay = true; lastButtonWasEquals = true; updateDisplay(); } function clearAll() { displayValue = '0'; currentValue = null; pendingOperation = null; resetDisplay = false; lastButtonWasEquals = false; updateDisplay(); } function memoryAdd() { memoryValue += parseFloat(displayValue); resetDisplay = true; } function memoryRecall() { displayValue = memoryValue.toString(); resetDisplay = true; updateDisplay(); } </script> </body> </html>
Comments
Post a Comment