Scribd
Upload
12 views2 pages

Calculator

The document outlines the code for a simple calculator application using HTML, CSS, and JavaScript. It includes buttons for numbers and operations, as well as functions to append numbers, set operations, calculate results, and clear the display. The calculator is styled with CSS for layout and appearance.

Uploaded by

Justus Cyril
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views2 pages

Calculator

The document outlines the code for a simple calculator application using HTML, CSS, and JavaScript. It includes buttons for numbers and operations, as well as functions to append numbers, set operations, calculate results, and clear the display. The calculator is styled with CSS for layout and appearance.

Uploaded by

Justus Cyril
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML width: 23%;

<div class="calculator"> <input type="text" id="display" readonly> <br> padding: 10px;


<button onclick="appendNumber('7')">7</button> margin: 2px;
<button onclick="appendNumber('8')">8</button> font-size: 18px;
<button onclick="appendNumber('9')">9</button> }
<button onclick="setOperation('/')">÷</button> <br>
<button onclick="appendNumber('4')">4</button> JAVASCRIPT
<button onclick="appendNumber('5')">5</button> let display = document.getElementById('display');
<button onclick="appendNumber('6')">6</button> let currentInput = '';
<button onclick="setOperation('*')">×</button> <br> let previousInput = '';
<button onclick="appendNumber('1')">1</button> let operator = null;
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button> function appendNumber(number) {
<button onclick="setOperation('-')">−</button> <br> currentInput += number;
<button onclick="appendNumber('0')">0</button> display.value = currentInput;
<button onclick="clearDisplay()">C</button> }
<button onclick="calculateResult()">=</button>
<button onclick="setOperation('+')">+</button> </div> function setOperation(op) {
if (currentInput === '') return; // Prevents setting operation without a
CSS number
.calculator if (previousInput !== '') {
{ calculateResult(); // Automatically calculate if there's a previous
width: 200px; operation
margin: 100px auto; }
padding: 20px; operator = op;
border: 1px solid #ddd; previousInput = currentInput;
border-radius: 5px; currentInput = '';
text-align: center; }
font-family: Arial, sans-serif;
} function calculateResult() {
input let result;
{ const prev = parseFloat(previousInput);
width: 100%; const current = parseFloat(currentInput);
padding: 10px;
font-size: 18px; if (isNaN(prev) || isNaN(current)) return; // Prevents calculation without
margin-bottom: 10px; valid numbers
}
button switch (operator) {
{ case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
result = current !== 0 ? prev / current : 'Error';
break;
default:
return;
}
display.value = result;
previousInput = result;
currentInput = '';
operator = null;
}

function clearDisplay() {
currentInput = '';
previousInput = '';
operator = null;
display.value = '';
}

You might also like