HTML, CSS और JavaScript का उपयोग करके एक साधारण कैलकुलेटर कैसे बनाएं

जावास्क्रिप्ट सीखने का सबसे अच्छा तरीका प्रोजेक्ट बनाना है। यदि आप एक अच्छा वेब डेवलपर बनना चाहते हैं, तो आपको जल्द से जल्द बनाना शुरू करना होगा। आप एक साधारण कैलकुलेटर, डिजिटल घड़ी, स्टॉपवॉच आदि जैसे शुरुआती स्तर के प्रोजेक्ट बनाकर शुरू कर सकते हैं।

इस लेख में, आप सीखेंगे कि HTML, CSS और जावास्क्रिप्ट का उपयोग करके एक साधारण कैलकुलेटर कैसे बनाया जाता है। यह कैलकुलेटर जोड़, घटाव, गुणा और भाग जैसे बुनियादी गणितीय कार्य कर सकता है।

आएँ शुरू करें।

कैलकुलेटर के घटक

कैलकुलेटर में निम्नलिखित घटक होते हैं:

गणितीय संचालिका : जोड़ (+), घटाव (-), गुणा (*), और भाग (/)।

अंक और दशमलव बटन : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .

डिस्प्ले स्क्रीन : यह गणितीय अभिव्यक्ति और परिणाम प्रदर्शित करता है।

Clear Screen Button : यह सभी गणितीय मूल्यों को साफ़ करता है।

कैलकुलेट बटन (=) : यह गणितीय व्यंजक का मूल्यांकन करता है और परिणाम देता है।

कैलकुलेटर परियोजना की फ़ोल्डर संरचना

एक रूट फोल्डर बनाएं जिसमें HTML, CSS और JavaScript फाइलें हों। आप अपनी इच्छानुसार फाइलों को नाम दे सकते हैं। यहां रूट फोल्डर को कैलकुलेटर नाम दिया गया है। मानक नामकरण परंपरा के अनुसार, HTML, CSS और JavaScript फ़ाइलों को क्रमशः index.html , styles.css और script.js नाम दिया गया है।

HTML कोड

index.html फ़ाइल खोलें और निम्न कोड पेस्ट करें:

संबंधित: मूल HTML कोड को समझने के चरण

 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Simple Calculator using HTML, CSS and JavaScript </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class = "calculator" >
<tr>
<td colspan = "3"> <input class = "display-box" type = "text" id = "result" disabled /> </td>
<!-- clearScreen() function clear all the values -->
<td> <input class = "button" type = "button" value = "C" onclick = "clearScreen()" style = "background-color: #fb0066;" /> </td>
</tr>
<tr>
<!-- display() function display the value of clicked button -->
<td> <input class = "button" type = "button" value = "1" onclick = "display('1')" /> </td>
<td> <input class = "button" type = "button" value = "2" onclick = "display('2')" /> </td>
<td> <input class = "button" type = "button" value = "3" onclick = "display('3')" /> </td>
<td> <input class = "button" type = "button" value = "/" onclick = "display('/')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "4" onclick = "display('4')" /> </td>
<td> <input class = "button" type = "button" value = "5" onclick = "display('5')" /> </td>
<td> <input class = "button" type = "button" value = "6" onclick = "display('6')" /> </td>
<td> <input class = "button" type = "button" value = "-" onclick = "display('-')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "7" onclick = "display('7')" /> </td>
<td> <input class = "button" type = "button" value = "8" onclick = "display('8')" /> </td>
<td> <input class = "button" type = "button" value = "9" onclick = "display('9')" /> </td>
<td> <input class = "button" type = "button" value = "+" onclick = "display('+')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "." onclick = "display('.')" /> </td>
<td> <input class = "button" type = "button" value = "0" onclick = "display('0')" /> </td>
<!-- calculate() function evaluate the mathematical expression -->
<td> <input class = "button" type = "button" value = "=" onclick = "calculate()" style = "background-color: #fb0066;" /> </td>
<td> <input class = "button" type = "button" value = "*" onclick = "display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

कैलकुलेटर की संरचना <तालिका> टैग का उपयोग करके बनाई गई है। <तालिका> टैग में पाँच पंक्तियाँ होती हैं जो कैलकुलेटर के पाँच क्षैतिज खंडों का प्रतिनिधित्व करती हैं। प्रत्येक पंक्ति <tr> टैग का उपयोग करके बनाई गई है। प्रत्येक <tr> टैग में <td> टैग (तालिका डेटा) होता है जिसमें कैलकुलेटर की डिस्प्ले स्क्रीन और बटन होते हैं।

सीएसएस कोड

Styles.css फ़ाइल खोलें और निम्न कोड पेस्ट करें:

सम्बंधित: सरल सीएसएस कोड उदाहरण जो आप १० मिनट में सीख सकते हैं

 @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
.button {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
.button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}

उपरोक्त CSS का उपयोग कैलकुलेटर को स्टाइल करने के लिए किया जाता है। .class चयनकर्ता का उपयोग विशिष्ट वर्ग विशेषता वाले तत्वों के चयन के लिए किया जाता है। .Calculator, .display बॉक्स वाले और .button वर्ग चयनकर्ताओं क्रमशः शैली तालिका संरचना, डिस्प्ले स्क्रीन, और कैलकुलेटर के बटन के लिए उपयोग किया जाता है। Google फोंट से ऑर्बिट्रॉन फ़ॉन्ट-फ़ैमिली आयात करने के लिए @import का उपयोग किया जाता है।

संबंधित: CSS बॉक्स-छाया का उपयोग कैसे करें: ट्रिक्स और उदाहरण

जावास्क्रिप्ट कोड

script.js फ़ाइल खोलें और निम्न कोड पेस्ट करें:

 // This function clear all the values
function clearScreen() {
document.getElementById("result").value = "";
}

// This function display values
function display(value) {
document.getElementById("result").value += value;
}
// This function evaluates the expression and return result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

जावास्क्रिप्ट कोड को समझना

क्लीयरस्क्रीन () , डिस्प्ले () , और कैलकुलेट () फ़ंक्शन का उपयोग कैलकुलेटर में कार्यक्षमता जोड़ने के लिए किया जाता है।

समाशोधन मूल्य

ClearScreen () फ़ंक्शन परिणाम की आईडी का उपयोग करके DOM तक पहुँचता है और इसे एक खाली स्ट्रिंग निर्दिष्ट करके इसके मान को साफ़ करता है।

 function clearScreen() {
document.getElementById("result").value = "";
}

मूल्य प्रदर्शित करना

डिस्प्ले () फ़ंक्शन परिणाम की आईडी का उपयोग करके DOM तक पहुँचता है और क्लिक किए गए बटन के मान को परिणाम में जोड़ता है।

 function display(value) {
document.getElementById("result").value += value;
}

अभिव्यक्ति का मूल्यांकन

गणना () फ़ंक्शन परिणाम की आईडी का उपयोग करके DOM तक पहुँचता है और eval () फ़ंक्शन का उपयोग करके अभिव्यक्ति का मूल्यांकन करता है। अभिव्यक्ति का मूल्यांकन मूल्य फिर से परिणाम को सौंपा गया है।

नोट : eval () फ़ंक्शन का उपयोग जावास्क्रिप्ट में एक पैरामीटर के रूप में दिए गए एक्सप्रेशन का मूल्यांकन करने के लिए किया जाता है। यह गणितीय व्यंजक का मूल्यांकित परिणाम देता है।

 function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

यदि आप इस लेख में उपयोग किए गए संपूर्ण स्रोत कोड को देखना चाहते हैं, तो यहां GitHub रिपॉजिटरी है । इसके अलावा, यदि आप इस परियोजना के लाइव संस्करण को देखना चाहते हैं, तो आप इसे GitHub के माध्यम से भी देख सकते हैं।

संबंधित: शुरुआती के लिए उपयुक्त पायथन परियोजना विचार

कूल प्रोग्रामिंग प्रोजेक्ट विकसित करें

आप परियोजनाओं को विकसित करके अपने इंजीनियरिंग कौशल को अगले स्तर तक बढ़ा सकते हैं। चाहे आप एक नौसिखिया हों या आप कुछ समय के बाद कोडिंग में वापस आ रहे हों, विकासशील परियोजनाएं आपके आत्मविश्वास को बढ़ाने में एक बड़ी मदद हो सकती हैं।

आप शतरंज गेम, टू-डू लिस्ट ऐप, वेट कनवर्ज़न टूल, टिक टैक टो गेम, रॉक पेपर कैंची गेम, वेब स्क्रेपर विद पायथन, लॉग इन सिस्टम, चैटबॉट, स्नेक गेम, टेट्रिस गेम, टिप कैलकुलेटर जैसे कई सरल प्रोजेक्ट आज़मा सकते हैं। , उलटी गिनती घड़ी, यूआरएल शॉर्टनर, आदि।

इन परियोजनाओं के साथ अपने हाथ गंदे करें और एक बेहतर डेवलपर बनें।