<head>
    <meta charset="utf-8">
<meta name="description" content="Javascript calculator" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Maks website responsive and                                                                         initial scalle allows users to                                                                         zoom in the website -->
    <link rel="stylesheet" href="/style.css">
    
    <title>Calculator</title>
</head>

<body>
    <h1>Basic Calculator</h1>
    <br>
    <div id="calculator">
    <form id="myform" name="calc">
        <input name="display" style="width: 680px;height: 100px;text-align: center;background-color: #1f80c9;"> <br>
        <!--- ROW 1 --->
        <input type="button" value="0" onClick="calc.display.value+='0'">
        <input type="button" value="1" onClick="calc.display.value+='1'">
        <input type="button" value="2" onClick="calc.display.value+='2'">
        <input type="button" value="C" style="background-color: #cc0000;"  onClick="calc.display.value=''"><br>
        <!--- ROW 2 --->
        <input type="button" value="3"  onClick="calc.display.value+='3'"> 
        <input type="button" value="4"  onClick="calc.display.value+='4'"> 
        <input type="button" value="5"  onClick="calc.display.value+='5'"> 
        <input type="button" value="6"  onClick="calc.display.value+='6'"> <br>
        <!--- ROW 3 ---->
        <input type="button" value="7"  onClick="calc.display.value+='7'">
        <input type="button" value="8"  onClick="calc.display.value+='8'">
         <input type="button" value="9"  onClick="calc.display.value+='9'"> 
         <input type="button" value="&#247;" style="background-color: green;"  onClick="calc.display.value+='/'"><br>
         <!--- ROW 4 --->
        <input type="button" value="x" style="background-color: #7db1b2;"  onClick="calc.display.value+='*'"> 
         <input type="button" value="-" style="background-color: #ba55d3;"  onClick="calc.display.value+='-'">
        <input type="button" value="+" style="background-color: #cc5c11;" onClick="calc.display.value+='+'">
        <input type="button" value="="  onClick="calc.display.value=eval(calc.display.value)"> 
        
    </form>
    </div>
</body>
</html>
input{
    width: 150px;
    height: 100px;
    font-size: 75px;
    border-radius: 10px;
    margin: 10px;
    background-color: #000;
    color: #fff;
    border-style: none;
}
#myform{
    margin-top: 20px;
}
h1{
    text-align: center;
    font-size: 80px;
    margin-top: 20px;
}
#calculator{
    width: 700px;
    margin: 0 auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.