how to make an html calculator?
HTML से CALCULATOR कैसे बनाते हैं?
आज में आपको इस Post में Step by step बताऊँगा की कैसे आप HTML से एक Calculator बना सकते हैं।
Step:1. सबसे पहले Notepad को open करें। इसके लिये आप Window+R को press करके Run Command को open कीजिये, Run Command Open हो जायेगा।
Fundamental of C
Step:2. अब निम्न HTML CODE को Notepad में Type कीजियें तथा इस File को html_Calculator.html से Save कर दीजिय।
<html><head></head><body><br><div class="cal_body"> <form name="calculator"> <input type="textfield" class="txt" name="ans" value=""> <br> <input type="button" value="1" class="button-1" onclick="document.calculator.ans.value+='1'"> <input type="button" value="2" class="button-2" onclick="document.calculator.ans.value+='2'"> <input type="button" value="3" class="button-3" onclick="document.calculator.ans.value+='3'"> <input type="button" value="+" class="button-addition" onclick="document.calculator.ans.value+='+'"> <br> <input type="button" value="4" class="button-4" onclick="document.calculator.ans.value+='4'"> <input type="button" value="5" class="button-5" onclick="document.calculator.ans.value+='5'"> <input type="button" value="6" class="button-6" onclick="document.calculator.ans.value+='6'"> <input type="button" value="-" class="button-minus" onclick="document.calculator.ans.value+='-'"> <br> <input type="button" value="7" class="button-7" onclick="document.calculator.ans.value+='7'"> <input type="button" value="8" class="button-8" onclick="document.calculator.ans.value+='8'"> <input type="button" value="9" class="button-9" onclick="document.calculator.ans.value+='9'"> <input type="button" value="x" class="button-multiplication" onclick="document.calculator.ans.value+='*'"> <br> <input type="button" value="=" class="button-equal" onclick="document.calculator.ans.value=eval(document.calculator.ans.value)"> <input type="button" value="0" class="button-0" onclick="document.calculator.ans.value+='0'"> <input type="button" value="CE" class="button-reset" onclick="document.calculator.ans.value=' '"> <input type="button" value="÷" class="button-divded" onclick="document.calculator.ans.value+='/'"> <style type="text/css"> .cal_body{background-color:white; position:absolute;background-color:white;border:aqua solid 8px;} .txt{width:213; height:42; color:red; font-size:20; font-style:bold; text-align:center; border:yellow 6px solid;} .button-1{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:blue;} .button-2{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:blue;} .button-3{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:blue;} .button-4{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:blue;} .button-5{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:blue;} .button-6{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:blue;} .button-7{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:blue;} .button-8{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:blue;} .button-9{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:blue;} .button-0{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:blue;} .button-addition{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:green;} .button-minus{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:green;} .button-multiplication{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:green;} .button-divded{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:green;} .button-equal{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:red; font-size:25;background-color:yellow;} .button-reset{border-top:pink 5 solid; border-left:pink 5 solid; border-right:pink 5 solid; border-bottom:pink 5 solid; height:50; width:50;color:white; font-size:25;background-color:red;} </style></form></div> </body></html>Step:3. आप उपरोक्त HTML CODE का OUTPUT यहाँ देख सकते हो, इन codes को बिल्कूल सही से type करे आपको इसी प्रकार का Calculator दिखेगा जैसाकि आप नीचे देख पा रहे हैं।
Leave a Comment