2,408 रीडिंग

HTML और जावास्क्रिप्ट का उपयोग करके एक सरल कैलकुलेटर बनाने का सबसे अच्छा तरीका

द्वारा Shuseel Baral5m2023/08/01

बहुत लंबा; पढ़ने के लिए

यहां HTML और जावास्क्रिप्ट का उपयोग करके एक सरल कैलकुलेटर बनाने के चरण दिए गए हैं जो पूर्णांक पूर्णांकों पर सरल अंकगणित कर सकते हैं।

featured image - HTML और जावास्क्रिप्ट का उपयोग करके एक सरल कैलकुलेटर बनाने का सबसे अच्छा तरीका

HTML और जावास्क्रिप्ट का उपयोग करके एक सरल कैलकुलेटर बनाना उन वेब डेवलपर्स के लिए एक मजेदार और शैक्षिक कार्य हो सकता है जो अभी शुरुआत कर रहे हैं।

उपयोगकर्ता इंटरफ़ेस डिज़ाइन के लिए HTML और गणना प्रबंधन के लिए जावास्क्रिप्ट की क्षमताओं को मिलाकर, आप सीधे अपने ब्राउज़र में एक इंटरैक्टिव और कार्यशील कैलकुलेटर का निर्माण कर सकते हैं।

इस पोस्ट में, हम आपको शुरुआत से एक बुनियादी कैलकुलेटर बनाने की चरण-दर-चरण प्रक्रिया के बारे में बताएंगे, साथ ही वेब प्रोग्रामिंग के सिद्धांतों की भी खोज करेंगे।

आरंभ करने के लिए, हमें पहले प्रोजेक्ट वातावरण बनाना होगा। हम बुनियादी HTML ढांचा तैयार करेंगे जो हमारे कैलकुलेटर की नींव के रूप में काम करेगा। इसके अलावा, कैलकुलेटर को अधिक आकर्षक बनाने के लिए, हम सीएसएस का उपयोग करके इसका स्वरूप सेट करेंगे।

अंत में, हम अपने कैलकुलेटर में कार्यक्षमता जोड़ने के लिए जावास्क्रिप्ट वातावरण को कॉन्फ़िगर करेंगे।

विषयसूची

HTML और जावास्क्रिप्ट का उपयोग करके एक सरल कैलकुलेटर बनाने के चरण
- 1. यूजर इंटरफ़ेस डिज़ाइन करना
- 1. उपयोगकर्ता इनपुट को संभालना
- 1. गणना करना
एक सरल HTML कैलकुलेटर के लिए पूर्ण HTML कोड
सरल HTML कैलकुलेटर का पूर्वावलोकन
निष्कर्ष

HTML और जावास्क्रिप्ट का उपयोग करके एक सरल कैलकुलेटर बनाने के चरण

टेक्स्ट और बटन इनपुट का उपयोग फॉर्म तत्व के भीतर एक टेबल पर किया जाता है, और ऑनक्लिक इवेंट का उपयोग स्क्रीन पर बटन मान रखने या संख्याओं का आकलन करने के लिए किया जाता था।

1. यूजर इंटरफेस डिजाइन करना

यूजर इंटरफ़ेस (यूआई) कैलकुलेटर का फ्रंट फेस है। हम इनपुट और परिणाम प्रदर्शित करने के लिए एक साफ़ डिस्प्ले बनाएंगे। हम पूर्णांकों और ऑपरेटरों के लिए इंटरैक्टिव बटन भी प्रदान करेंगे। हमारा लक्ष्य एक सहज और उपयोगकर्ता-अनुकूल डिज़ाइन तैयार करना है जो कैलकुलेटर उपयोगकर्ताओं के हर पहलू को समृद्ध करता है।

कैलकुलेटर का यूजर इंटरफ़ेस डिज़ाइन करने के लिए निम्नलिखित चरणों का उपयोग करें।

चरण 1. प्रारंभ में, नीचे दिए गए अनुसार <फ़ॉर्म> तत्व और <बॉडी> टैग के साथ <html> टैग बनाएं।

 <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>

चरण 2. अब, <table> ....</table> टैग का उपयोग करके <form>......</form> टैग के भीतर एक तालिका बनाएं और <tr का उपयोग करके तालिका पंक्ति के तालिका डेटा के भीतर दो प्रकार के इनपुट टेक्स्ट और बटन डालें। <td>….</td></tr> टैग.

 <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>

चरण 3. फिर, <इनपुट> टैग का उपयोग करके बटन बनाएं, और इन बटनों की "आईडी" और "वैल्यू" को <tr><td>....</td></tr> टैग वाली तालिका पंक्ति में सेट करें। नीचे प्रस्तुत है.

 <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>

चरण 4. अंत में, नीचे दिए गए <style>…..</style> टैग के साथ कैलकुलेटर के लिए डिज़ाइन देने के लिए निम्नलिखित सीएसएस कोड जोड़ें।

 <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>

2. उपयोगकर्ता इनपुट को संभालना

#स्टेप 1। नीचे दिए गए अनुसार गणना के इनपुट और परिणाम को प्रदर्शित करने के लिए बनाए गए डिस्प्ले बटन के लिए एक "ऑनकीप्रेस" ईवेंट असाइन करें।

 <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>

चरण 2. नीचे दिए गए अनुसार संख्याओं और अंकगणितीय ऑपरेटरों वाले सभी बटनों के लिए एक ऑनक्लिक ईवेंट असाइन करें।

 <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>

3. गणना करना

सभी अंकगणितीय ऑपरेटरों के लिए एक ऑनक्लिक ईवेंट असाइन करें, क्लियर (सी) बटन के लिए स्थान ("") के साथ एक दोहरा उद्धरण प्रदान करें, और नीचे दिए गए अनुसार ऑनक्लिक ईवेंट पर संख्याओं का मूल्यांकन करने के लिए eval() फ़ंक्शन का उपयोग करें।

 <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>

एक सरल HTML कैलकुलेटर के लिए पूर्ण HTML कोड

 <html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>