How to Create Normal Calculator through HTML

MTML code for Calculator:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>User-Friendly Calculator</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”calculator”>
<input type=”text” id=”display” placeholder=”0″ disabled>
<div class=”buttons”>
<button id=”clear”>C</button>
<button id=”backspace”>⌫</button>
<button>%</button>
<button>÷</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>×</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<button class=”double”>0</button>
<button>.</button>
<button class=”double”>=</button>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>

CSS code for Calculator

body {
display: flex;
justify-content: center;
align-items: center;
height: 340vh;
background-color: #f0f0f0;
margin: 0;
font-family: ‘Arial’, sans-serif;
}

.calculator {
width: 265px;
padding: 20px;
background: #fff;
border-radius: 18px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

input#display {
width: 100%;
height: 40px;
margin-bottom: 10px;
text-align: right;
font-size: 18px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
border-radius: 4px;
background: #e9e9e9;
}

.buttons button {
width: 23%;
padding: 20px;
font-size: 16px;
margin: 5px 0;
cursor: pointer;
border: none;
background-color: #e7e7e7;
border-radius: 4px;
transition: background-color 0.3s;
}

.buttons button:hover {
background-color: #d4d4d4;
}

.buttons .double {
width: 50%;
}

.buttons button:active {
background-color: #c4c4c4;
}

Java Script for Normal Calculator:

document.addEventListener(‘DOMContentLoaded’, function() {
const display = document.getElementById(‘display’);
const buttons = document.querySelectorAll(‘.buttons button’);

// Attach click event listeners to buttons
buttons.forEach(button => {
button.addEventListener(‘click’, function() {
const value = this.textContent;
processInput(value);
});
});

// Function to process calculator input
function processInput(value) {
if (value === ‘C’) {
clearDisplay();
} else if (value === ‘⌫’ || value === ‘Backspace’) {
backspace();
} else if (value === ‘=’ || value === ‘Enter’) {
calculate();
} else {
inputValue(value);
}
}

// Handle keyboard input
document.addEventListener(‘keydown’, function(e) {
// Prevent default behavior for certain keys
if ([‘Enter’, ‘Backspace’].includes(e.key)) {
e.preventDefault();
}
// Map certain keys to calculator button values
const keyMap = {
‘Enter’: ‘=’,
‘/’: ‘÷’,
‘*’: ‘×’,
‘-‘: ‘-‘,
‘+’: ‘+’,
‘.’: ‘.’,
‘Backspace’: ‘⌫’
};

const key = (keyMap[e.key] || e.key);
if ((key >= ‘0’ && key <= ‘9’) || Object.values(keyMap).includes(key)) {
processInput(key);
}
});

function clearDisplay() {
display.value = ‘0’;
}

function backspace() {
display.value = display.value.slice(0, -1) || ‘0’;
}