[go: up one dir, main page]
Scribd
Upload
6 views6 pages

WT 4

This document contains the source code for a simple calculator web application. It includes HTML for structure, CSS for styling, and JavaScript for functionality, allowing users to perform basic arithmetic operations. The calculator features a display, buttons for numbers and operations, and input validation for user interactions.

Uploaded by

manoj Thorat.105
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
6 views6 pages

WT 4

This document contains the source code for a simple calculator web application. It includes HTML for structure, CSS for styling, and JavaScript for functionality, allowing users to perform basic arithmetic operations. The calculator features a display, buttons for numbers and operations, and input validation for user interactions.

Uploaded by

manoj Thorat.105
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/ 6

Source Code:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.calculator {
background-color: #333;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
padding: 15px;
width: 280px;
}

.display-container {
margin-bottom: 15px;
}

#calculation {
width: 100%;
height: 20px;
background-color: #333;
border: none;
color: #ccc;
font-size: 0.9rem;
text-align: right;
padding: 5px;
box-sizing: border-box;
}

#display {
width: 100%;
height: 50px;
background-color: #eee;
border: none;
border-radius: 5px;
font-size: 1.5rem;
text-align: right;
padding: 5px;
box-sizing: border-box;
}

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

button {
height: 50px;
border: none;
border-radius: 5px;
font-size: 1.2rem;
cursor: pointer;
}

.number {
background-color: #444;
color: white;
}

.operation {
background-color: #ff9500;
color: white;
}

.clear {
background-color: #a5a5a5;
color: black;
}

.equals {
background-color: #ff9500;
color: white;
}

.special {
background-color: #5bc0de;
color: white;
}

.double {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display-container">
<div id="calculation"></div>
<input type="text" id="display" readonly>
</div>
<div class="buttons">
<button class="clear" onclick="clearDisplay()">AC</button>
<button class="special" onclick="square()">x²</button>
<button class="operation" onclick="appendOperator('/')">÷</button>
<button class="operation" onclick="appendOperator('*')">×</button>
<button class="number" onclick="appendNumber('7')">7</button>
<button class="number" onclick="appendNumber('8')">8</button>
<button class="number" onclick="appendNumber('9')">9</button>
<button class="operation" onclick="appendOperator('-')">-</button>

<button class="number" onclick="appendNumber('4')">4</button>


<button class="number" onclick="appendNumber('5')">5</button>
<button class="number" onclick="appendNumber('6')">6</button>
<button class="operation" onclick="appendOperator('+')">+</button>

<button class="number" onclick="appendNumber('1')">1</button>


<button class="number" onclick="appendNumber('2')">2</button>
<button class="number" onclick="appendNumber('3')">3</button>
<button class="equals" onclick="calculate()">=</button>

<button class="number double" onclick="appendNumber('0')">0</button>


<button class="number" onclick="appendDecimal()">.</button>
</div>
</div>

<script>
let displayValue = '0';
let firstOperand = null;
let operator = null;
let waitingForSecondOperand = false;

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


const calculation = document.getElementById('calculation');
display.value = displayValue;

function appendNumber(number) {
// Input validation for maximum length
if (displayValue.length >= 12 && !waitingForSecondOperand) {
alert("Maximum input length reached");
return;
}

if (waitingForSecondOperand) {
displayValue = number;
waitingForSecondOperand = false;
} else {
displayValue = displayValue === '0' ? number : displayValue + number;
}
display.value = displayValue;
}

function appendDecimal() {
if (waitingForSecondOperand) {
displayValue = '0.';
waitingForSecondOperand = false;
} else if (!displayValue.includes('.')) {
displayValue += '.';
}
display.value = displayValue;
}
function appendOperator(nextOperator) {
const inputValue = parseFloat(displayValue);

// Validate input
if (isNaN(inputValue)) {
alert("Please enter a valid number");
return;
}

if (firstOperand === null) {


firstOperand = inputValue;
} else if (operator) {
const result = performCalculation();
displayValue = String(result);
firstOperand = result;
}

waitingForSecondOperand = true;
operator = nextOperator;
display.value = displayValue;
updateCalculationDisplay();
}

function updateCalculationDisplay() {
if (firstOperand !== null) {
let operatorSymbol = operator;
if (operator === '*') operatorSymbol = '×';
if (operator === '/') operatorSymbol = '÷';

calculation.textContent = firstOperand + ' ' + operatorSymbol + ' ';


}
}

function performCalculation() {
const secondOperand = parseFloat(displayValue);

if (isNaN(firstOperand) || isNaN(secondOperand)) {
return secondOperand;
}

let result = 0;
switch (operator) {
case '+':
result = firstOperand + secondOperand;
break;
case '-':
result = firstOperand - secondOperand;
break;
case '*':
result = firstOperand * secondOperand;
break;
case '/':
// Add validation for division by zero
if (secondOperand === 0) {
alert("Cannot divide by zero");
return firstOperand;
}
result = firstOperand / secondOperand;
break;
default:
return secondOperand;
}

// Handle large numbers and round to avoid floating point issues


if (result.toString().length > 12) {
result = parseFloat(result.toFixed(8));
}

return result;
}

function square() {
const currentValue = parseFloat(displayValue);

// Validate input
if (isNaN(currentValue)) {
alert("Please enter a valid number");
return;
}

const result = currentValue * currentValue;

// Show calculation
calculation.textContent = currentValue + '² = ';

// Update display
displayValue = String(result);
display.value = displayValue;

// Reset operation state


firstOperand = result;
operator = null;
waitingForSecondOperand = false;
}

function calculate() {
if (!operator || firstOperand === null) return;

const secondOperand = parseFloat(displayValue);

// Validate input
if (isNaN(secondOperand)) {
alert("Please enter a valid number");
return;
}

// Show complete calculation


let operatorSymbol = operator;
if (operator === '*') operatorSymbol = '×';
if (operator === '/') operatorSymbol = '÷';
calculation.textContent = firstOperand + ' ' + operatorSymbol + ' ' + secondOperand + ' = ';

const result = performCalculation();


displayValue = String(result);

// Reset for next calculation


firstOperand = result;
operator = null;
waitingForSecondOperand = false;
display.value = displayValue;
}

function clearDisplay() {
displayValue = '0';
firstOperand = null;
operator = null;
waitingForSecondOperand = false;
display.value = displayValue;
calculation.textContent = '';
}
</script>
</body>
</html>

Output:-

You might also like