In this tutorial, we'll walk you through the process of creating a simple calculator application using HTML, CSS, and JavaScript. This hands-on project will help you understand how to manipulate the DOM, handle user interactions, and implement basic arithmetic operations.
Task 1: Setting Up the HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Simple Calculator</title>
</head>
<body>
<div class="calculator">
<!-- Calculator display -->
<div class="display">0</div>
<!-- Calculator buttons -->
<div class="buttons">
<!-- Buttons go here -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Task 2: Styling the Calculator
Create a styles.css file and add basic styling to the calculator elements.
/* Add styling to the calculator */
.calculator {
width: 300px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
/* Style the display */
.display {
background-color: #f7f7f7;
border: 1px solid #ccc;
padding: 10px;
text-align: right;
font-size: 24px;
margin-bottom: 10px;
}
Task 3: Adding Buttons
Inside the .buttons div, add buttons for numbers and operators.
<!-- Inside the .buttons div -->
<button class="number">1</button>
<button class="number">2</button>
<!-- ... more number buttons ... -->
<button class="operator">+</button>
<button class="operator">-</button>
<!-- ... more operator buttons ... -->
<button class="equals">=</button>
<button class="clear">C</button>
Task 4: Basic Button Functionality
Create a script.js file and add the following code to handle button clicks.
document.addEventListener('DOMContentLoaded', () => {
const display = document.querySelector('.display');
const buttons = document.querySelectorAll('.number, .operator, .equals, .clear');
let currentInput = '';
buttons.forEach(button => {
button.addEventListener('click', () => {
if (button.classList.contains('number')) {
currentInput += button.textContent;
display.textContent = currentInput;
} else if (button.classList.contains('operator')) {
// Handle operator logic
} else if (button.classList.contains('equals')) {
// Handle calculation
} else if (button.classList.contains('clear')) {
currentInput = '';
display.textContent = '0';
}
});
});
});
In the next part of this tutorial, we'll cover Tasks 5 through 17, including handling operator inputs, calculating results, decimal points, error handling, keyboard support, and more.
Stay tuned for the next installment of "Building a Simple Calculator App" where we continue to refine and enhance our calculator's functionality!
