Creating Working Calculator using HTML , CSS and JavaScript.

CREATING WORKING "CALCULATOR".

Hey guy's we have create a calculator using

HTML, CSS and JavaScript . eval() function in JavaScript plays very important role in

designing this calculator. We have made this program responsive so whatever will be

the width of device it will work perfectly. This program will really help everyone for

advanced knowledge in JavaScript.

PROGRAM SOURCE CODE :-

<!DOCTYPE html>
<html>
<head>
    <title>Calculator Desgining</title>
    <style type="text/css">
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #011011;
    overflow: hidden;
}

html{
    font-size: 62.5%
}
.main{
    width: 75vw;
    height: 100vh;
    padding-right: 4rem;
    border-right: .3rem solid red;
    color: #fff;
}

.contain{
    width: 70vw;
    height: inherit;
    margin-left: 2rem;
}

#i{width: inherit;
    margin: 4rem 0rem;
    padding: 1rem;
    font-size: 3rem;
    font-family: cursive;
    text-align: right;
    outline: none;
    border: none;
    background:transparent;
    color: #fff;
}

#i:focus{
    outline:.2rem solid #ff0
}

::placeholder{
    font-size: 3rem;
    font-family: cursive;
    color: #fff;
}
.one{
    width: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
}
button{
    flex: 1;
    font-size: 3rem;
    font-family: cursive;
    background:transparent;
    cursor: pointer;
    border:none;
    outline: none;
    color:#fff;
    padding: 1.5rem 0rem
}

#e{
    width: inherit;
    outline: none;
}

#e:hover{
    background: #0000FF;
    color: #fff;
}

button:hover{
    background-color: #fff ;
    color: #001111;
}

.main h1{
    font-family:serif;
    letter-spacing: .1rem;
    font-size: 3rem;
    text-align: center;
    padding: 1rem 0rem
}

.main h2{
    position: absolute;
    right: 18%;
    top:2%;
    font-size: 2rem;
    cursor: pointer;
}

#s{
    position: absolute;
    right: 8%;
    font-size: 2rem
}

p{
    position: absolute;
    right: 17%;
    top:10%;
}

@media(max-width: 800px){
    html{
        font-size: 55%
    }
    .main h2{
        position:absolute;
        top:85%;left: 5%
    }
    #s{
        position: absolute;
        left: 70%
    }
    p{
        position: absolute;
        top: 92%;
        left: 2%
    }
    .contain{
        width: 80vw;
    }
    .main{
        width: 100vw;
        border-right: none;
        display: grid;
        place-items:center;
    }
    button{
        padding: 2rem 0rem
    }
    body{
        overflow:scroll;
    }
}

    </style>
</head>
<body>
    <div class="main">
        <h1>Calaculator</h1>
        <h2>History</h2>
        <h2 id="s">memory</h2>
        <p>
            There's no history yet
        </p>
        <div class="contain">
        <input type="text" id="i" placeholder="0">
    <div class="one">
<button type="submit" onclick="i.value = ' '" title="Clear All">C</button>
<button type="submit" onclick="i.value += '%'" title="Modulus Operator">%</button>
<button type="submit" onclick="i.value += '.'" title="Deciaml Point">.</button>
<button type="submit" onclick="i.value += ''" title="Multiplication"></button>
<button type="submit" onclick="i.value += '/'" title="Division">/</button>
</div>
      <div class="one">
<button type="submit" onclick="f1()" title="square of Number">X<sup>2</sup></button>
<button type="submit" onclick="i.value += '7'">7</button>
<button type="submit" onclick="i.value += '8'">8</button>
<button type="submit" onclick="i.value += '9'">9</button>
<button type="submit" onclick="i.value += '+'" title="Addition">+</button>
        </div>
        <div class="one">
<button type="submit" onclick="f2()" title="Cube of Number.">X<sup>3</sup></button>
<button type="submit" onclick="i.value += '4'">4</button>
<button type="submit" onclick="i.value += '5'">5</button>
<button type="submit" onclick="i.value += '6'">6</button>
<button type="submit" onclick="i.value += '-'" title="Substraction">-</button>
        </div>
        <div class="one">
<button type="submit" onclick="f3()" title="1 upon value">1/x</button>
<button type="submit" onclick="i.value += '1'">1</button>
<button type="submit" onclick="i.value += '2'">2</button>
<button type="submit" onclick="i.value += '3'">3</button>
<button type="submit" onclick="i.value += '0'">0</button>
        </div>
<button type="submit" onclick="i.value = eval(i.value)" id="e" title="Calculate value">=</button>
        </div>
    </div>
    <script type="text/javascript">
        function f1(){
            i.value = (i.value)  (i.value);
        }
        function f2(){
            i.value = (i.value) (i.value)  (i.value);
        }
        function f3()
        {
          i.value = 1/(i.value);
        }
    </script>
</body>
</html>

OUTPUT :-

( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )