Calculator
This is a basic calculator which helps to calculate basic operations like Add, Substract, Multiply and Divide.
How to create calculator using basic html css and javascript
First you need to create basic html layout as :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
</head>
<body>
</body>
</html>
Explanation :
This is basic html layout code, always when you create html file you need to create this as it is. This shows that web page is created in two parts <head> and <body>, head is the brain of the page, it is not visible on the browser, it contains title of the page, style and links of the external css. And <body> section structure of the website is bieng created. Now let's understand the structure of the our calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
</head>
<body>
<div class="calculator">
<input disabled="" id="display" type="text" />
<div class="buttons">
<button class="clear" onclick="clearDisplay()">C</button>
<button class="operator" onclick="appendValue('/')">/</button>
<button class="operator" onclick="appendValue('*')">*</button>
<button class="operator" onclick="appendValue('-')">-</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button class="operator" onclick="appendValue('+')">+</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="equal" onclick="calculateResult()">=</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="appendValue('0')">0</button>
</div>
</div>
</body>
</html>
Explanation :
Here in the body section we have added some code for our calculator. One main div with class 'calculator', inside of this div we have created two elements, one input field with id 'display' and type 'text' and one div with class 'buttons' which will contains all buttons for our calculator. Read the code carefuly and understand the structure.
Next add some style in head section of the html :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
.calculator {
max-width: 250px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
#display {
width: 100%;
height: 50px;
font-size: 1.5em;
text-align: right;
margin-bottom: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
button {
padding: 15px;
font-size: 1.2em;
border: none;
cursor: pointer;
}
.operator {
background: #f39c12;
color: white;
}
.equal {
background: #27ae60;
color: white;
}
.clear {
background: #e74c3c;
color: white;
}
</style>
</head>
Explanation :
here some style is added to the calculator with targeting classes and id's of the our calculator elements to look like calculator.
Output :
Next add functionality :
<body>
<script>
function appendValue(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculateResult() {
try {
document.getElementById('display').value = eval(document.getElementById('display').value);
} catch (e) {
alert('Invalid Input');
}
}
</script>
</body>
Explanation :
In the End of the body add <script>. In this script we added three functions, one for append values to the diplay input, second is to clear display and third is to evaluate the operations.
Thanks for reading this article if you like this article please comment your review and share with your freinds.
0 Comments