Creating Calculator Using HTML & CSS.



Hello Friends , In this blog you'll learn how to create Calculator using only HTML & CSS & DOM.

It is fully functional calculator which works very appropriate and also easy to create.

*Note : Create two files 1st one is HTML file and 2nd one is CSS file and save these two files with its extensions as,

 HTML file : index.html

 CSS file : style.css


HTML and CSS code is as follows :


HTML Code: (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <!--created by 8bit-code-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form class="calculator" name="calc">
       
        <input class="value" type="text" name="txt" readonly="">
        <span class="num clear" onclick="document.calc.txt.value =''">c</span>
        <span class="num" onclick="document.calc.txt.value +='/'">/</span>
        <span class="num" onclick="document.calc.txt.value +='*'">*</span>
        <span class="num" onclick="document.calc.txt.value +='7'">7</span>
        <span class="num" onclick="document.calc.txt.value +='8'">8</span>
        <span class="num" onclick="document.calc.txt.value +='9'">9</span>
        <span class="num" onclick="document.calc.txt.value +='-'">-</span>
        <span class="num" onclick="document.calc.txt.value +='4'">4</span>
        <span class="num" onclick="document.calc.txt.value +='5'">5</span>
        <span class="num" onclick="document.calc.txt.value +='6'">6</span>
        <span class="num plus" onclick="document.calc.txt.value +='+'">+</span>
        <span class="num" onclick="document.calc.txt.value +='3'">3</span>
        <span class="num" onclick="document.calc.txt.value +='2'">2</span>
        <span class="num" onclick="document.calc.txt.value +='1'">1</span>
        <span class="num" onclick="document.calc.txt.value +='0'">0</span>
        <span class="num" onclick="document.calc.txt.value +='00'">00</span>
        <span class="num" onclick="document.calc.txt.value +='.'">.</span>
        <span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
   
    </form>    <!--created by 8bit-code-->
</body>
</html>





 CSS Code: (style.css)

/*created by 8bit-code*/
*  
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
body
{
  display: flex ;
   min-height: 100vh;
  align-items: center;
   justify-content: center; 
   font-size: 25px;
  background: #1c2124;
}                            /*created by 8bit-code*/
.calculator
{
    position: relative;
    display:   grid;
}
.calculator .value
{
    grid-column: span 4;
    height: 100px;
    text-align: right;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 25px;

}
.calculator span
{
    display: grid;
    width: 100px;
    height: 100px;
    color: #fff;
    background: #0c2835;
    place-items: center;
    border: 1px solid rgba(0, 0, 0, .1);
}
.calculator span:active
{
    background: #0754fa;
    color: #111;

}
.calculator span.clear
{
grid-column: span 2;
width:200px ;
background: #fc7b02;
}
.calculator span.plus
{
grid-row: span 2;
height:200px;

}
.calculator span.equal
{
    background: rgb(238, 97, 4);
}

If you have any problems while creating this Calculator you can watch this video.





we are done here. Thank you for showing interest in this blog.