<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="robots" content="index, follow" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>HOME - novacaine.net</title> <meta name="description" content="Simple calculator for answer." /> <link href="https://www.selajar.com/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-YTE0SYF2SL"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-YTE0SYF2SL'); </script> <style> html { font-size: 62.5%; box-sizing: border-box; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; } .calculator { border: 1px solid #ccc; border-radius: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; } .calculator-screen { width: 100%; font-size: 5rem; height: 80px; border: none; background-color: #252525; color: #fff; text-align: right; padding-right: 20px; padding-left: 10px; } button { height: 60px; background-color: #fff; border-radius: 3px; border: 1px solid #c4c4c4; background-color: transparent; font-size: 2rem; color: #333; background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15); text-shadow: 0 1px rgba(255,255,255,.4); } button:hover { background-color: #eaeaea; } .operator { color: #337cac; } .all-clear { background-color: #f0595f; border-color: #b0353a; color: #fff; } .all-clear:hover { background-color: #f17377; } .equal-sign { background-color: #2e86c0; border-color: #337cac; color: #fff; height: 100%; grid-area: 2 / 4 / 6 / 5; } .equal-sign:hover { background-color: #4e9ed4; } .calculator-keys { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; padding: 20px; } </style></head> <body> <div class="calculator" id="calculator"> <input aria-labelledby="calculator" type="text" class="calculator-screen" value="" disabled /> <div class="calculator-keys"> <button type="button" class="operator" value="+">+</button> <button type="button" class="operator" value="-">-</button> <button type="button" class="operator" value="*">×</button> <button type="button" class="operator" value="/">÷</button> <button type="button" value="7">7</button> <button type="button" value="8">8</button> <button type="button" value="9">9</button> <button type="button" value="4">4</button> <button type="button" value="5">5</button> <button type="button" value="6">6</button> <button type="button" value="1">1</button> <button type="button" value="2">2</button> <button type="button" value="3">3</button> <button type="button" value="0">0</button> <button type="button" class="decimal" value=".">.</button> <button type="button" class="all-clear" value="all-clear">AC</button> <button type="button" class="equal-sign operator" value="=">=</button> </div> </div> <script> const calculator = { displayValue: '0', firstOperand: null, waitingForSecondOperand: false, operator: null, }; function inputDigit(digit) { const { displayValue, waitingForSecondOperand } = calculator; if (waitingForSecondOperand === true) { calculator.displayValue = digit; calculator.waitingForSecondOperand = false; } else { calculator.displayValue = displayValue === '0' ? digit : displayValue + digit; } } function inputDecimal(dot) { if (calculator.waitingForSecondOperand === true) { calculator.displayValue = "0." calculator.waitingForSecondOperand = false; return } if (!calculator.displayValue.includes(dot)) { calculator.displayValue += dot; } } function handleOperator(nextOperator) { const { firstOperand, displayValue, operator } = calculator const inputValue = parseFloat(displayValue); if (operator && calculator.waitingForSecondOperand) { calculator.operator = nextOperator; return; } if (firstOperand == null && !isNaN(inputValue)) { calculator.firstOperand = inputValue; } else if (operator) { const result = calculate(firstOperand, inputValue, operator); calculator.displayValue = `${parseFloat(result.toFixed(7))}`; calculator.firstOperand = result; } calculator.waitingForSecondOperand = true; calculator.operator = nextOperator; } function calculate(firstOperand, secondOperand, operator) { if (operator === '+') { return firstOperand + secondOperand; } else if (operator === '-') { return firstOperand - secondOperand; } else if (operator === '*') { return firstOperand * secondOperand; } else if (operator === '/') { return firstOperand / secondOperand; } return secondOperand; } function resetCalculator() { calculator.displayValue = '0'; calculator.firstOperand = null; calculator.waitingForSecondOperand = false; calculator.operator = null; } function updateDisplay() { const display = document.querySelector('.calculator-screen'); display.value = calculator.displayValue; } updateDisplay(); const keys = document.querySelector('.calculator-keys'); keys.addEventListener('click', event => { const { target } = event; const { value } = target; if (!target.matches('button')) { return; } switch (value) { case '+': case '-': case '*': case '/': case '=': handleOperator(value); break; case '.': inputDecimal(value); break; case 'all-clear': resetCalculator(); break; default: if (Number.isInteger(parseFloat(value))) { inputDigit(value); } } updateDisplay(); }); </script></body></html>
