Creating a simple calculator is a great project to start with JavaScript. This tutorial will guide you through creating a basic calculator that performs addition, subtraction, multiplication and division. We will use HTML for the structure, CSS for styling and JavaScript for functionality.
Prerequisites
Before starting this tutorial you should have a basic understanding of:
- HTML
- CSS
- JavaScript
Step-by-Step Guide
1. Setting Up the HTML
First, we need to create the structure of our calculator using HTML. Create an index.html file and add the following 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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="btn" onclick="clearDisplay()">C</button>
<button class="btn" onclick="appendNumber('/')">/</button>
<button class="btn" onclick="appendNumber('*')">*</button>
<button class="btn" onclick="deleteNumber()">DEL</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="appendNumber('-')">-</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="appendNumber('+')">+</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="appendNumber('.')">.</button>
<button class="btn btn-equal" onclick="computeResult()">=</button>
<button class="btn btn-zero" onclick="appendNumber('0')">0</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. Styling the Calculator with CSS
Next, let's add some styles to make our calculator look good. Create a styles.css file and add the following code:
body { display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.calculator {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
}
.display {
background-color: #222;
color: #fff;
font-size: 2em;
padding: 10px;
text-align: right;
border-radius: 5px;
margin-bottom: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.btn {
background-color: #f1f1f1;
border: none;
padding: 20px;
font-size: 1.2em;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #ddd;
}
.btn-equal {
grid-column: span 2;
background-color: #007bff;
color: #fff;
}
.btn-equal:hover {
background-color: #e69500;
}
.btn-zero {
grid-column: span 2;
}
3. Adding Functionality with JavaScript
Now, let's add the JavaScript to make our calculator functional. Create a script.js file and add the following code:
let display = document.getElementById('display');let currentNumber = '';
let previousNumber = '';
let operator = '';
function appendNumber(number) {
if (number === '.' && currentNumber.includes('.')) return;
currentNumber += number;
updateDisplay();
}
function updateDisplay() {
display.innerText = currentNumber;
}
function clearDisplay() {
currentNumber = '';
previousNumber = '';
operator = '';
display.innerText = '0';
}
function deleteNumber() {
currentNumber = currentNumber.slice(0, -1);
if (currentNumber === '') {
display.innerText = '0';
} else {
updateDisplay();
}
}
function computeResult() {
let result;
const prev = parseFloat(previousNumber);
const current = parseFloat(currentNumber);
if (isNaN(prev) || isNaN(current)) return;
switch (operator) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
result = prev / current;
break;
default:
return;
}
currentNumber = result;
operator = '';
previousNumber = '';
updateDisplay();
}
function appendOperator(op) {
if (currentNumber === '') return;
if (previousNumber !== '') {
computeResult();
}
operator = op;
previousNumber = currentNumber;
currentNumber = '';
}
// Adding event listeners for operator buttons
document.querySelectorAll('.btn').forEach(button => {
button.addEventListener('click', () => {
if (button.innerText === '+' || button.innerText === '-' || button.innerText === '*' || button.innerText === '/') {
appendOperator(button.innerText);
}
});
});
Conclusion
Created a simple calculator using HTML, CSS and JavaScript. This project helps you understand how to manipulate the DOM, handle events and perform basic arithmetic operations in JavaScript. You can further extend this calculator by adding more features such as additional operators, keyboard support and more advanced functions.
FAQs
Q1: How can I add more operations to the calculator?
You can add more operations by updating the computeResult function in the JavaScript code and adding corresponding buttons in the HTML.
Q2: Can I use a different styling for the calculator?
Yes, you can customize the CSS file to change the appearance of the calculator as per your preference.
Q3: How can I make the calculator responsive?
To make the calculator responsive, use media queries in your CSS to adjust the layout and size of the calculator on different screen sizes.
Post a Comment