how to create a simple calculator

using below this code you can create a simple calculator,
copy html code in your html file, And copy css code in your css file

---

HTML CODE:
<form action="" name="calculator" id="calform">
<input type="text" name="screen" disabled="" class="caltext"><hr/>
<input type="button" class="calbutton" value="√" onclick="calculator.screen.value=Math.sqrt(calculator.screen.value)">
<input type="button" class="calbutton" value="CE" onclick="calculator.screen.value=''">
<input type="button" class="calbutton" value="C" onclick="calculator.screen.value=''">
<input type="button" class="calbutton" value="←"onclick="calculator.screen.value=calculator.screen.value.slice(0,-1)">
<input type="button" value="7" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='7'">
<input type="button" value="8" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='8'">
<input type="button" value="9" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='9'">
<input type="button" value="+" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='+'">
<input type="button" value="4" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='4'">
<input type="button" value="5" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='5'">
<input type="button" value="6" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='6'">
<input type="button" value="-" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='-'">
<input type="button" value="1" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='1'">
<input type="button" value="2" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='2'">
<input type="button" value="3" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='3'">
<input type="button" value="*" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='*'">
<input type="button" value="0" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='0'">
<input type="button" value="." class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='.'">
<input type="button" value="=" class="calbutton" onclick="calculator.screen.value=eval(calculator.screen.value)">
<input type="button" value="/" class="calbutton" onclick="calculator.screen.value=calculator.screen.value+='/'">
</form> CSS CODE:
#calform{width:250px;border:1px solid #ddd;margin-top:10px;background:radial-gradient(circle,red,blue); box-shadow:0px 3px 5px 5px; } .caltext{ width:100%;margin-bottom:5px;height:40px;padding:5px 10px;text-align:right;font-size:36px; background-color:#00477e;color:white;box-sizing:border-box; } .calbutton{ width:50px;margin-top:5px;font-size:25px;box-sizing:border-box;text-align:justify;margin:0 auto; padding:5px 10px;margin-left:7px;margin-bottom:5px; }