In this post, we would look at how to create a calculator and what you need to create it. Don't worry you don't have to be a mathematical guru to make this work. All you just need is a basic understanding of HTML, CSS and a little bit of Javascript.
In fact having no knowledge of Javascript at all is completely okay as we would not need a script file.
Now let's get started.
We create our index.html file and using emmet abbreviation come up with the header tags and things necessary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Calculator </title>
</head>
<body>
</body>
</html>
Having gotten the above, we can start coding our calculator. Our calculator would be contained inside two divs. For this calculator we would be using a form.
<div classname="container">
<div classname="calc">
<form name="calculator">
</form>
</div>
</div>
After creating the layout of our calculator we can start filling it in with the necessary tags. First off we create an input tag with a placeholder. This input tag is where our calculations would be displayed. We would give it a class so that we can style it and an id so that we can target this particular input as we would be needing it later. We would also give it a readonly attribute so as to make our input field uneditable by the user.
<div classname="container">
<div classname="calc">
<form name="calculator">
<input type="text" class="btn" id="display" placeholder="0" readonly>
<br>
</form>
</div>
</div>
After doing this we would give our calculator numbers and basic arithmetic operators. We also go with an input tag but in this case instead of giving it a type of text we would give it a type of button because we want our numbers to look like a button. We also give a value with the number or operator we would want to appear on our screen. The
tag is used so that we can end that line and go to the other line.
<div classname="container">
<div classname="calc">
<form name="calculator">
<input type="text" class="btn" id="display" placeholder="0" readonly>
<br>
<input type="button" class="button" value="7">
<input type="button" class="button" value="8">
<input type="button" class="button" value="9">
<input type="button" class="button mathbutton" value="+">
<br>
<input type="button" class="button" value="4">
<input type="button" class="button" value="5">
<input type="button" class="button" value="6">
<input type="button" class="button" value="-">
<br>
<input type="button" class="button" value="1">
<input type="button" class="button" value="2">
<input type="button" class="button" value="3">
<input type="button" class="button" value="×">
<br>
<input type="button" class="button" value="C">
<input type="button" class="button" value="0">
<input type="button" class="button" value="/">
<input type="button" class="button" value="=">
</form>
</div>
</div>
With this we have done the basic structure for our calculator. We just need to make it functioning and this is where a little bit of Javascript comes in. We don't need to add a script file all we need to do is just to add a line of code to each input tag which is the onclick function.
The onclick property is an event handler that specifies the action to be taken when the element associated with it is clicked.
The function 'calculator.display.value' refers to the value displayed on the calculator's display.
The '+=' concatenates the current value on display with any string added to it. In other words it appends the string to the existing value on display so that when an input button is clicked, the action will update the calculator's display by appending the associated number to the existing value.
The property 'eval' is used to calculate the numbers.
<div classname="container">
<div classname="calc">
<form name="calculator">
<input type="text" class="btn" id="display" placeholder="0" readonly>
<br>
<input type="button" class="button" value="7" onclick="calculator.display.value += '7' ">
<input type="button" class="button" value="8" onclick="calculator.display.value += '8' ">
<input type="button" class="button" value="9" onclick="calculator.display.value += '9' ">
<input type="button" class="button mathbutton" value="+" onclick="calculator.display.value += '+' ">
<br>
<input type="button" class="button" value="4" onclick="calculator.display.value += '4' " >
<input type="button" class="button" value="5" onclick="calculator.display.value += '5' ">
<input type="button" class="button" value="6" onclick="calculator.display.value += '6' ">
<input type="button" class="button" value="-" onclick="calculator.display.value += '-' " >
<br>
<input type="button" class="button" value="1" onclick="calculator.display.value += '1' " >
<input type="button" class="button" value="2" onclick="calculator.display.value += '2' ">
<input type="button" class="button" value="3" onclick="calculator.display.value += '3' " >
<input type="button" class="button" value="*" onclick="calculator.display.value += '*' " >
<br>
<input type="button" class="button" value="C" onclick="calculator.display.value += ' ' " >
<input type="button" class="button" value="0" onclick="calculator.display.value += '0' ">
<input type="button" class="button" value="/"onclick="calculator.display.value += '/' " >
<input type="button" class="button" value="=" onclick="calculator.display.value= eval(calculator.display.value)">
</form>
</div>
</div>
Now your calculator is ready. You can style it however you want. Thanks for reading and Happy Coding!
View Full Code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Calculator </title>
</head>
<body>
<div classname="container">
<div classname="calc">
<form name="calculator">
<input type="text" class="btn" id="display" placeholder="0" readonly>
<br>
<input type="button" class="button" value="7" onclick="calculator.display.value += '7' ">
<input type="button" class="button" value="8" onclick="calculator.display.value += '8' ">
<input type="button" class="button" value="9" onclick="calculator.display.value += '9' ">
<input type="button" class="button mathbutton" value="+" onclick="calculator.display.value += '+' ">
<br>
<input type="button" class="button" value="4" onclick="calculator.display.value += '4' " >
<input type="button" class="button" value="5" onclick="calculator.display.value += '5' ">
<input type="button" class="button" value="6" onclick="calculator.display.value += '6' ">
<input type="button" class="button" value="-" onclick="calculator.display.value += '-' " >
<br>
<input type="button" class="button" value="1" onclick="calculator.display.value += '1' " >
<input type="button" class="button" value="2" onclick="calculator.display.value += '2' ">
<input type="button" class="button" value="3" onclick="calculator.display.value += '3' " >
<input type="button" class="button" value="*" onclick="calculator.display.value += '*' " >
<br>
<input type="button" class="button" value="C" onclick="calculator.display.value += ' ' " >
<input type="button" class="button" value="0" onclick="calculator.display.value += '0' ">
<input type="button" class="button" value="/"onclick="calculator.display.value += '/' " >
<input type="button" class="button" value="=" onclick="calculator.display.value= eval(calculator.display.value)">
</form>
</div>
</div>
</body>
</html>
Top comments (0)