In this article, we'll create a simple calculator using HTML, CSS and JavaScript. This calculator will perform basic arithmetic operations such as addition, subtraction, multiplication and division. It will have a user-friendly interface and provide accurate results for various calculations.
Final Output Preview Image:
Prerequisites / Technologies Used:
- HTML
- CSS
- JavaScript
Approach / Functionalities:
- Create a user interface with buttons for numbers, operators and special functions.
- Implement event listeners to handle user interactions with the calculator buttons.
- Write functions to perform arithmetic operations based on user input.
- Update the display to show the current input and result.
- Ensure proper error handling for invalid inputs or operations.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calculator {
background-color: #A9A9A9;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
}
.display {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
color: #333;
font-size: 24px;
padding: 10px;
text-align: right;
margin-bottom: 10px;
}
.btn-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.btn {
background-color: #e0e0e0;
border: none;
border-radius: 5px;
color: #333;
cursor: pointer;
font-size: 20px;
padding: 15px 0;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="btn-container">
<button class="btn" onclick="clearDisplay()">C</button>
<button class="btn" onclick="appendNumber('7')">7</button>
<button class="btn" onclick="appendNumber('8')">8</button>
<button class="btn" onclick="appendNumber('9')">9</button>
<button class="btn" onclick="addOperator('+')">+</button>
<button class="btn" onclick="appendNumber('4')">4</button>
<button class="btn" onclick="appendNumber('5')">5</button>
<button class="btn" onclick="appendNumber('6')">6</button>
<button class="btn" onclick="addOperator('-')">-</button>
<button class="btn" onclick="appendNumber('1')">1</button>
<button class="btn" onclick="appendNumber('2')">2</button>
<button class="btn" onclick="appendNumber('3')">3</button>
<button class="btn" onclick="addOperator('*')">*</button>
<button class="btn" onclick="appendNumber('0')">0</button>
<button class="btn" onclick="appendNumber('.')">.</button>
<button class="btn" onclick="calculate()">=</button>
<button class="btn" onclick="addOperator('/')">/</button>
</div>
</div>
<script>
let displayValue = '0';
let currentValue = 0;
let operator = null;
let awaitingNextOperand = false;
function updateDisplay() {
const display = document.getElementById('display');
display.textContent = displayValue;
}
function clearDisplay() {
displayValue = '0';
updateDisplay();
}
function appendNumber(number) {
if (awaitingNextOperand) {
displayValue = number;
awaitingNextOperand = false;
} else {
displayValue = displayValue === '0' ? number : displayValue + number;
}
updateDisplay();
}
function addOperator(op) {
if (operator !== null && !awaitingNextOperand) {
calculate();
}
currentValue = parseFloat(displayValue);
operator = op;
awaitingNextOperand = true;
}
function calculate() {
const value = parseFloat(displayValue);
switch (operator) {
case '+':
currentValue += value;
break;
case '-':
currentValue -= value;
break;
case '*':
currentValue *= value;
break;
case '/':
if (value !== 0) {
currentValue /= value;
} else {
currentValue = 'Error';
}
break;
default:
return;
}
displayValue = currentValue.toString();
operator = null;
awaitingNextOperand = true;
updateDisplay();
}
</script>
</body>
</html>
Output :
Post a Comment