[go: up one dir, main page]
Scribd
Upload
52 views4 pages

Calculator App

This document describes how to create a basic calculator using HTML, CSS and JavaScript. It includes the HTML markup to build the calculator interface with number buttons, operators and a display. It also includes the CSS styling for the calculator components. And it provides the JavaScript code to handle number and operator input, perform calculations, and update the display. The JavaScript code tracks the operands, operator and result, and uses functions to update the display and perform calculations based on the selected operator.

Uploaded by

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

Calculator App

This document describes how to create a basic calculator using HTML, CSS and JavaScript. It includes the HTML markup to build the calculator interface with number buttons, operators and a display. It also includes the CSS styling for the calculator components. And it provides the JavaScript code to handle number and operator input, perform calculations, and update the display. The JavaScript code tracks the operands, operator and result, and uses functions to update the display and perform calculations based on the selected operator.

Uploaded by

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

create a calculator using HTML,CSS and JavaScript

```html
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display">
<div class="buttons">
<button class="operator" value="+">+</button>
<button class="operator" value="-">-</button>
<button class="operator" value="*">*</button>
<button class="operator" value="/">/</button>
<button class="operand" value="7">7</button>
<button class="operand" value="8">8</button>
<button class="operand" value="9">9</button>
<button class="operand" value="4">4</button>
<button class="operand" value="5">5</button>
<button class="operand" value="6">6</button>
<button class="operand" value="1">1</button>
<button class="operand" value="2">2</button>
<button class="operand" value="3">3</button>
<button class="operand" value="0">0</button>
<button class="decimal" value=".">.</button>
<button class="equals" value="=">=</button>
<button class="clear" value="C">C</button>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
```

```css
/* CSS for the calculator */

.calculator {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
}

.display {
width: 280px;
height: 50px;
margin-bottom: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 24px;
text-align: right;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.button {
width: 70px;
height: 70px;
margin: 0;
padding: 0;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 24px;
cursor: pointer;
}

.operator {
background-color: #ff9900;
color: #fff;
}

.operand {
background-color: #fff;
color: #000;
}

.decimal {
background-color: #eee;
color: #000;
}

.equals {
background-color: #009900;
color: #fff;
}

.clear {
background-color: #ff0000;
color: #fff;
}
```

```javascript
// JavaScript for the calculator

const display = document.getElementById('display');


const buttons = document.querySelectorAll('.button');

let firstOperand = null;


let secondOperand = null;
let operator = null;
let result = null;

buttons.forEach((button) => {
button.addEventListener('click', () => {
const value = button.value;

if (/\d/.test(value)) {
// Handle operand input
if (firstOperand === null) {
firstOperand = value;
} else if (secondOperand === null) {
secondOperand = value;
} else {
// Ignore additional operand input
}

updateDisplay();
} else if (value === '.') {
// Handle decimal point input
if (firstOperand && !firstOperand.includes('.')) {
firstOperand += value;
} else if (secondOperand && !secondOperand.includes('.')) {
secondOperand += value;
}

updateDisplay();
} else if (value === 'C') {
// Handle clear input
firstOperand = null;
secondOperand = null;
operator = null;
result = null;

updateDisplay();
} else if (value === '=') {
// Handle equals input
if (firstOperand && secondOperand && operator) {
result = operate(operator, firstOperand, secondOperand);

updateDisplay(result);

firstOperand = null;
secondOperand = null;
operator = null;
}
} else {
// Handle operator input
if (firstOperand && operator === null) {
operator = value;
}

updateDisplay();
}
});
});

function updateDisplay(value = '') {


display.value = value;
}

function operate(operator, a, b) {
a = Number(a);
b = Number(b);
switch (operator) {
case '+':
return a + b;
case '-':
return a - b;
case '*':
return a * b;
case '/':
return a / b;
default:
return null;
}
}
```input

You might also like