How to create a calculator using Html, CSS, and JavaScript
Hello, Today we are going to create a simple calculator using Html, CSS, and JavaScript. Firstly, you have to follow me then you can simply get a clear idea about how to create a calculator.
<!DOCTYPE html> <html> <head> <title>Calculator</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form class="calculator" name="calc"> <input type="text"class="value" name="txt" readonly=""> <span class="number clear" onclick="document.calc.txt.value =''">c</span> <span class="number" onclick="document.calc.txt.value +='%'">%</span> <span class="number" onclick="document.calc.txt.value +='/'">/</span> <span class="number" onclick="document.calc.txt.value +='7'">7</span> <span class="number" onclick="document.calc.txt.value +='8'">8</span> <span class="number" onclick="document.calc.txt.value +='9'">9</span> <span class="number" onclick="document.calc.txt.value +='*'">*</span> <span class="number" onclick="document.calc.txt.value +='4'">4</span> <span class="number" onclick="document.calc.txt.value +='5'">5</span> <span class="number" onclick="document.calc.txt.value +='6'">6</span> <span class="number" onclick="document.calc.txt.value +='-'">-</span> <span class="number" onclick="document.calc.txt.value +='1'">1</span> <span class="number" onclick="document.calc.txt.value +='2'">2</span> <span class="number" onclick="document.calc.txt.value +='3'">3</span> <span class="number plus" onclick="document.calc.txt.value +='+'">+</span> <span class="number zero" onclick="document.calc.txt.value +='0'">0</span> <span class="number" onclick="document.calc.txt.value +='.'">.</span> <span class="number equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span> </form> </body> </html>
You can see in the above I add input and span tags within the form tag. It helps to create a simple calculator. Not only that I used JavaScript in the above Html file. You can see within the input tag I defined the class as a value and its name as a txt. from this code you can get the below output.
here you can see within the span tag I used on click .when click on the number it will get the number .for this, I used document.calc.txt.value to get the value of the number field. the document is the root element. it represents the whole HTML document. calc is the name of the form. the form is one of the properties of the HTML document. txt is the attribute name of the input text. value is the property, it returns the value of the input number.
Adding CSS
next I start CSS part to design my calculator. I created a .css file and add below codes to it.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color:#2d3436;
color: #fff;
}
I add display property and its value as flex to the body. flex used to display an element as a block-level flex container. And here I used mi-height value as 100vh. vh implements viewport height. it means it helps to get a full-height interface. If you add the above code in your CSS file you can get the below output.
After that I give position value as relative and set the display property to grid to make a block-level grid container.
.calculator
{
position: relative;
display: grid;
}
However you can see below output clearly.
Now I think you can feel this is not like a calculator. So let’s try to build this as a calculator interface.
.calculator .value
{
grid-column: span 4;
height: 100px;
text-align: center;
border:none;
outline: none;
padding: 10px;
font-size: 20px;
background: #fff;
color: #000;
}
.calculator span
{
display: grid;
width: 60px;
height: 60px;
font-size: 20px;
place-items:center;
border: 1px solid rgba(0,0,0,.1);
}
Moreover, To design input text and span tags, I used the above properties and values. I set the Input text field’s height as 100px. and set background color white and text color as black. Here you can see how I add properties and values to the span tag.
RGBA
An RGBA color value is specified with r-red, g-green, b-blue, a-alpha. here alpha parameter is a number between 0.0(fully transparent) and 1.0. we can get the below output by adding these things to your CSS file.
when clicking the number you can display it is active. For that we have to use: active selector to span tag, it becomes active when you click on it. and the: hover selector to style span tag when you mouse over them.
.calculator span:active , span:hover
{
background: #0fb9b1;
color: #111;
}Then after add the above selectors, output will be like the below.
next, I changed sizes of the clear and plus span tags. For that I used grid-column property and grid-row property.
.calculator span.clear
{
grid-column: span 2;
width: 120px;
font-size: 24px;
background-color: #e84393;
}
.calculator span.plus
{
grid-row: span 2;
height: 120px;
}
After add above code in your css file, you can see changes what we make.
I think now you can create your own calculator using HTML, CSS, and Javascript. Just take a try to do this. It will improve your skills definitely. Please stay tuned with Maztars to know more. Thanks a lot and see you at the next lesson.
