OneCompiler

Gongon Ronecris T. -Calculator

1628
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet"href="style.css"/> 
<style>
    input[type="button"] {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin: 5px;
        text-align: center;
        border-radius: 15px;
        border-block:black;
    }
    #result {
        width: 230px;
        height: 50px;
        font-size: 30px;
        margin: 5px;
        text-align: right;
       background-color: violet;
      
    }

body{
margin: 0px;
padding: 0px;
background-color:yellow;
color:red;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
input{
width: 200px;
height: 50px;
font: 50px;
border-radius: 100px;
margin: 100px;
background-color: white;

}

body

</style>
</head> <body> <h1> Calculator</h1> <input type="text" id="result" disabled> <br> <input type="button" value="1" onclick="appendToResult('1')"> <input type="button" value="2" onclick="appendToResult('2')"> <input type="button" value="3" onclick="appendToResult('3')"> <input type="button" value="+" onclick="appendToResult('+')"style="background-color:yellow;"> <br> <input type="button" value="4" onclick="appendToResult('4')"> <input type="button" value="5" onclick="appendToResult('5')"> <input type="button" value="6" onclick="appendToResult('6')"> <input type="button" value="-" onclick="appendToResult('-')"style="background-color:green;"> <br> <input type="button" value="7" onclick="appendToResult('7')"> <input type="button" value="8" onclick="appendToResult('8')"> <input type="button" value="9" onclick="appendToResult('9')"> <input type="button" value="*" onclick="appendToResult('*')"style="background-color:orange;"> <br> <input type="button" value="C" onclick="clearResult()"style="background-color:red;"> <input type="button" value="0" onclick="appendToResult('0')"> <input type="button" value="=" onclick="calculate()"style="background-color:blue;"> <input type="button" value="&#247" onclick="appendToResult('/')"style="background-color:pink;"> <script> function appendToResult(value) { document.getElementById('result').value += value; } function clearResult() { document.getElementById('result').value = ''; } function calculate() { const result = eval(document.getElementById('result').value); document.getElementById('result').value = result; } </script> </body> </html>