Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: rgb(66, 31, 92);
        }
        form{
            width:400px;
            margin:auto;
            border:solid 3pt rgb(197, 174, 202);
            padding:6px;
        }
        input{
            margin:5px;
            background-color: rgb(189, 161, 215);
            font-size: medium;
            border: solid 3pt rgb(199, 178, 204);
        }
        input[type=button]{
            width:80px;
            border-radius:10px;
            height:50px;
            border:solid 3pt rgb(171, 159, 184);
        }
        h1{
            text-align: center;
            color: rgb(177, 158, 191);

        }
        footer{
            text-align: center;
            padding: 10px;
            font-weight: 700;
            color: rgb(190, 163, 193);
        }
        input[type=text]{
           color: rgb(0, 0, 0);
        }
    </style>
</head>
<body>
    <h1>Calculator</h1>
    <form name="calform">
        <input type="text" id="answer" naame="answer"/>
        

        <input type="button" value="C" onclick="calform.answer.value=''"/>
      <br>
        <input type="button" value="1" onclick="calform.answer.value+='1'"/>

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

        <input type="button" value="7" onclick="calform.answer.value+='7'"/>

        <input type="button" value="8" onclick="calform.answer.value+='8'"/>

        <input type="button" value="9" onclick="calform.answer.value+='9'"/>

        <input type="button" value="*" onclick="calform.answer.value+='*'"/>
        <br>
        <input type="button" value="/" onclick="calform.answer.value+='/'"/>
        <input type="button" value="0" onclick="calform.answer.value+='0'"/>
        <input type="button" value="." onclick="calform.answer.value+='.'"/>
        <input type="button" value="%" onclick="calform.answer.value+='%'"/>
        <br>
        <input type="button" value="x^2" onclick="squarenumber()">
        <input type="button" value="sqrt" onclick="squareroot()">
        <input type="button" value="^" onclick="calform.answer.value='**'">
        <input type="button" value="=" onclick="calform.answer.value=eval(calform.answer.value)" />
    </form>
    
    <script>
        function squarenumber(){
            let value=calform.answer.value;
            calform.answer.value=Math.pow(value,2);
        }

        function squareroot(){
            let value=calform.answer.value;
            if(value>=0){
                calform.answer.value=Math.sqrt(value)
            }
            else{
                calform.aanswer.value="error"
            }
        }
    </script>
</body>
<footer>
    AKSHITA VASU [DEPARTMENT OD CSE ]
</footer>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter