Electronic Calculator by Pila

electronic-calculator-by-pila

Electronic Calculator by Pila
-----------------------------


A [Pen](https://codepen.io/asobo13/pen/JyjmNN) by [Pila Louis](https://codepen.io/asobo13) on [CodePen](https://codepen.io).

[License](https://codepen.io/asobo13/pen/JyjmNN/license).

index.html

<div class="box">
  <div class="display"><input type = "text" randonly size = "18" id="d">
    </div><br>
  <div class="keys">
     <p><input type="button" class="button grey" 

    value="Mrc" onclick='c("......")'><input type="button" 

    class="button grey" value="m-" onclick='v("........")'>
    <input type="button" class="button grey" value="m+" 

    onclick='v(".......")'><input type="button" 

    class="button grey" value="/" onclick='v("/")'></p>
     <p><input type="button" class="button grey" 

    value="7" onclick='v("7")'><input type="button" 

    class="button grey" value="8" onclick='v("8")'>
    <input type="button" class="button grey" value="9" 

    onclick='v("9")'><input type="button" 

    class="button grey" value="*" onclick='v("*")'></p>
     <p><input type="button" class="button grey" 

    value="4" onclick='v("4")'><input type="button" 

    class="button grey" value="5" onclick='v("5")'>
    <input type="button" class="button grey" value="6" 

    onclick='v("6")'><input type="button" 

    class="button grey" value="-" onclick='v("-")'></p>
     <p><input type="button" class="button grey" 

    value="1" onclick='v("1")'><input type="button" 

    class="button grey" value="2" onclick='v("2")'>
    <input type="button" class="button grey" value="3" 

    onclick='v("3")'><input type="button" 

    class="button grey" value="+" onclick='v("+")'></p>
     <p><input type="button" class="button grey" 

    value="0" onclick='v("0")'><input type="button" 

    class="button grey" value="." onclick='v(".")'>
    <input type="button" class="button pink" value="C" 

    onclick='v("")'><input type="button" 

    class="button pink" value="=" onclick='e()'></p>
    </div>
 <footer id="footer" class="text-center">
  <div class="container">
    Done by:
    <a href="https://www.linkedin.com/in/pila-louis-618807116/" target="_blank">
        Pila Louis Asombo</a>
  </div>
</footer>
  </div>

script.js

function c(val)
{
document.getElementById("d").value=val;
}
function v(val)
{
document.getElementById("d").value+=val;
}
function e() 
{ 
try 
{ 
  c(eval(document.getElementById("d").value)) 
} 
catch(e) 
{
  c('Error') 
} 
}  

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

body
{
background-color:#818181;
} 
.box
{
background-color:#3d4543;
height:300px;
width:250px;
border-radius:10px;
position:relative;
top:80px;
left:40%;
} 
.display
{
background-color:#222;
width:220px;
position:relative;
left:15px;
top:20px;
height:40px;
}
.display input
{
position:relative;
left:2px;
top:2px;
height:35px;
color:black;
background-color:#bccd95;
font-size:21px;
text-align:right;
} 
.keys
{
position:relative;
top:15px;
}
.button
{
width:40px;
height:30px;
border:none;
border-radius:8px;
margin-left:17px;
cursor:pointer;
border-top:2px solid transparent;
}
.button.gray
{
color:white;
background-color:#6f6f6f;
border-bottom:black 2px solid;
border-top:2px #6f6f6f solid;
}
.button.pink
{
color:black;
background-color:#ff4561;
border-bottom:black 2px solid;
}
.button.black
{
color:white;
background-color:303030;
border-bottom:black 2px solid;
border-top:2px 303030 solid;
}
.button.orange
{
color:black;
background-color:FF9933;
border-bottom:black 2px solid;
border-top:2px FF9933 solid;
}
.gray:active
{
border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;
}
.pink:active
{
border-top:black 2px solid;
border-bottom:#ff4561 2px solid;
}
.black:active
{
border-top:black 2px solid;
border-bottom:#303030 2px solid;
}
.orange:active
{
border-top:black 2px solid;
border-bottom:FF9933 2px solid;
}
p
{
line-height:10px;
}
#footer {
  font-family: 'Josefin Sans', sans-serif;
  position: relative;
  font-size: 16px;
  font-weight: normal;
  margin-top: 40px;
  width: 100%;
  height: 40px;
}
a,
a:hover,
a:active,
a:visited {
  color: #922031;
  text-decoration: none !important;
  outline: none !important;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />