<html>
<head>
    <title>Ibe Favour's Calculator</title>
    <script type="text/javascript" src="calculator.js"></script>
    <link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
<div id='cal-container'>
    <form name="calculator">
        <input type="text" name="answer" />
        <br>
        <input type="button" value=" 1 " onclick="calculator.answer.value +='1'" />
        <input type="button" value=" 2 " onclick="calculator.answer.value +='2'" />
        <input type="button" value=" 3 " onclick="calculator.answer.value +='3'" />
        <input type="button" value=" + " onclick="calculator.answer.value +='+'" />
        <br>

        <input type="button" value=" 4 " onclick="calculator.answer.value +='4'" />
        <input type="button" value=" 5 " onclick="calculator.answer.value +='5'" />
        <input type="button" value=" 6 " onclick="calculator.answer.value +='6'" />
        <input type="button" value=" - " onclick="calculator.answer.value +='-'" />
        <br>

        <input type="button" value=" 7 " onclick="calculator.answer.value +='7'" />
        <input type="button" value=" 8 " onclick="calculator.answer.value +='8'" />
        <input type="button" value=" 9 " onclick="calculator.answer.value +='9'" />
        <input type="button" value=" X " onclick="calculator.answer.value +='*'" />
        <br>

        <input type="button" value=" c " onclick="calculator.answer.value =''" />
        <input type="button" value=" 0 " onclick="calculator.answer.value +='0'" />
        <input type="button" value=" / " onclick="calculator.answer.value +='/'" />
        <input type="button" value=" = " onclick="calculator.answer.value = eval(calculator.answer.value)" />
        <br>

    </form>
    <div id="agh">
            <p>Ibe Favour Calc</p>
          </div>
        </div>


</body>
</html>







#cal-container {
    position: relative;
    width: 400px;
    border: 2px solid red;
    border-radius: 12px;
    margin: 0px auto;
    padding: 20px 20px 100px 20px;
}
#agh{
    position: relative;
    float: left;
    margin-top: 15px;
}
#agh p{
    font-size: 20px;
    font-weight: 900;
}
input[type=button]{
 background: green;
  width: 20%;
  font-size: 20px;
  font-weight: 900;
  border-radius: 7px;
  margin-left: 13px;
  margin-top: 10px;
}
input[type=button]:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
input[type=button]:hover {
  background-color:  #ff471a;
  color: white;
}
input[type = text]{
    position: relative;
    display: block;
    width: 90%;
    margin: 5px auto;
    font-size: 20px;
    padding: 10px;
    box-shadow: 4px 0px 12px black inset;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.