calculator.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <script>
        function Sup() {
            var exp = document.calc.textview.value;
            document.calc.textview.value = exp.substring(0, exp.length - 1);
        }
    </script>
    <style type="text/css">
    	html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('bg.jpg'); 
    background-position: center;
    background-size: cover;
    min-height: 100vh;
}

h1 {
	text-align: center;
	color: #fff;
	padding-top: 100px;
	font-size: 42px;
}

.calc {
    width: 250px;
    height: 410px;
    padding: 10px 20px;
    border-radius: 4px;
    border: 5px solid white;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -100px;
}

.screen {
    width: 100%;
    height: 50px;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 10px;
    font-size: 20px;
    background: none;
    border-radius: 4px;
    border: 5px solid white;
    box-sizing: border-box;
    color: white;
}

.bn {
    width: 55px;
    height: 55px;
    margin: 2px;
    padding: 9px;
    background: none;
    border-radius: 4px;
    border: 5px solid white;
    box-sizing: border-box;
    color: white;
    font-size: 20px;
    outline: none;
    transition: .5s;
    cursor: pointer;
}

.bn:hover {
    transform: scale(1.08);
    transition: .5s;
}
    </style>
</head>

<body>
	<h1>Basic Calculator</h1>
    <div class="calc">
        <form name="calc">
            <input name="textview" type="textview" class="screen">
        </form>
        <table>
            <tr>
                <td><input type="button" class="bn" value="C" onclick="document.calc.textview.value = ''"></td>
                <td><input style=" font-size: 18px;" type="button" class="bn" value="Sup" onclick="Sup()"></td>
                <td><input type="button" class="bn" value="√" onclick="document.calc.textview.value = Math.sqrt(document.calc.textview.value)"></td>
                <td><input type="button" class="bn" value="/" onclick="document.calc.textview.value += '/'"></td>
            </tr>
            <tr>
                <td><input type="button" class="bn" value="7" onclick="document.calc.textview.value += '7'"></td>
                <td><input type="button" class="bn" value="8" onclick="document.calc.textview.value += '8'"></td>
                <td><input type="button" class="bn" value="9" onclick="document.calc.textview.value += '9'"></td>
                <td><input type="button" class="bn" value="*" onclick="document.calc.textview.value += '*'"></td>
            </tr>
            <tr>
                <td><input type="button" class="bn" value="4" onclick="document.calc.textview.value += '4'"></td>
                <td><input type="button" class="bn" value="5" onclick="document.calc.textview.value += '5'"></td>
                <td><input type="button" class="bn" value="6" onclick="document.calc.textview.value += '6'"></td>
                <td><input type="button" class="bn" value="-" onclick="document.calc.textview.value += '-'"></td>
            </tr>
            <tr>
                <td><input type="button" class="bn" value="1" onclick="document.calc.textview.value += '1'"></td>
                <td><input type="button" class="bn" value="2" onclick="document.calc.textview.value += '2'"></td>
                <td><input type="button" class="bn" value="3" onclick="document.calc.textview.value += '3'"></td>
                <td rowspan="2"><input style=" height: 115px;" type="button" class="bn" value="+" onclick="document.calc.textview.value += '+'"></td>
            </tr>
            <tr>
                <td><input type="button" class="bn" value="0" onclick="document.calc.textview.value += '0'"></td>
                <td><input type="button" class="bn" value="." onclick="document.calc.textview.value += '.'"></td>
                <td><input type="button" class="bn" value="=" onclick="document.calc.textview.value = eval(document.calc.textview.value)"></td>
            </tr>
        </table>
    </div>
</body>

</html>