In this article, we will explore a simple calculator built using HTML and JavaScript.
This calculator allows users to perform basic arithmetic operations such as addition, subtraction, multiplication, and division.
The code is straightforward and serves as a great starting point for anyone looking to understand how to create interactive web applications.
HTML Structure: The calculator is structured using HTML elements, including a display area and buttons for user interaction.
JavaScript Functionality: JavaScript is used to handle user input, update the display, and perform calculations.
Event Handling: Each button has an onclick event that triggers a specific action when clicked.
Code Structure
The code is divided into two main parts: the HTML structure and the JavaScript functionality.
The HTML part consists of a div container that holds the calculator’s display and buttons.
The JavaScript part initializes a variable to keep track of the current input and updates the display accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<div class="container">
<div id="calculator">
<input type="text" name="" id="display" readonly>
<div class="button-container">
<button class="button" onclick="currentDispaly = '';
document.querySelector('#display').value = currentDispaly">c</button>
<button class="button" onclick="currentDispaly = currentDispaly + '1';
document.querySelector('#display').value = currentDispaly">1</button>
<button class="button" onclick="currentDispaly = currentDispaly + '2';
document.querySelector('#display').value = currentDispaly">2</button>
<button class="button" onclick="currentDispaly = currentDispaly + '+';
document.querySelector('#display').value = currentDispaly">+</button>
<button class="button" onclick="currentDispaly = currentDispaly + '3';
document.querySelector('#display').value = currentDispaly">3</button>
<button class="button" onclick="currentDispaly = currentDispaly + '4';
document.querySelector('#display').value = currentDispaly">4</button>
<button class="button" onclick="currentDispaly = currentDispaly + '-';
document.querySelector('#display').value = currentDispaly">-</button>
<button class="button" onclick="currentDispaly = currentDispaly + '5';
document.querySelector('#display').value = currentDispaly">5</button>
<button class="button" onclick="currentDispaly = currentDispaly + '6';
document.querySelector('#display').value = currentDispaly">6</button>
<button class="button" onclick="currentDispaly = currentDispaly + '*';
document.querySelector('#display').value = currentDispaly">*</button>
<button class="button" onclick="currentDispaly = currentDispaly + '7';
document.querySelector('#display').value = currentDispaly">7</button>
<button class="button" onclick="currentDispaly = currentDispaly + '8';
document.querySelector('#display').value = currentDispaly">8</button>
<button class="button" onclick="currentDispaly = currentDispaly + '/';
document.querySelector('#display').value = currentDispaly">/</button>
<button class="button" onclick="
let result = eval(currentDispaly);
currentDispaly = result;
document.querySelector('#display').value = currentDispaly">=</button>
<button class="button" onclick="currentDispaly = currentDispaly + '0';
document.querySelector('#display').value = currentDispaly">9</button>
<button class="button" onclick="currentDispaly = currentDispaly + '0';
document.querySelector('#display').value = currentDispaly">0</button>
<button class="button" onclick="currentDispaly = currentDispaly + '.';
document.querySelector('#display').value = currentDispaly">.</button>
</div>
</div>
</div>
<script>
let currentDispaly = '';
document.querySelector('#display').value = currentDispaly;
</script>
</body>
</html>#calculator.css
#calculator {
border: 1px solid #000;
border-radius: 5px;
width: 200px;
}
#display {
margin: 10px;
width: 85%;
font-size: 30px;
}
.button-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.button {
width: 45px;
height: 45px;
margin: 3px;
}this simple calculator demonstrates how to use HTML and JavaScript to create an interactive web application.
By understanding the structure and functionality of the code, you can easily modify and expand upon this basic calculator to
include more features or improve its design. Whether you’re a beginner or looking to refresh your skills,
this project is a great way to practice your coding abilities. Happy coding 🙂
Leave a Reply