दोस्तों आज हम HTML, CSS और javascript की मदद से एक कैल्क्युलेटर बनाएंगे तो जादा देर न करते हुए सुरु करते है।
दोस्तों कैल्क्युलेटर बनाने के लिए पहले हमें समझना होगा कि
HTML, CSS और javascript होता क्या है।
HTML क्या है?
एचटीएमएल ( HyperText Markup Language HTML) वेब पन्नों और वेब आधारित एप बनाने में इस्तेमाल होने वाली एक मार्कअप भाषा है। वेब ब्राउज़र द्वारा किसी वेबसाइट के पन्ने को खोलने पर उसके वेब सर्वर से एचटीएमएल के रूप में दस्तावेज (डॉक्युमेंट) प्राप्त होता है, जिसे वेब ब्राउज़र मल्टीमीडिया वेब पन्ने में बदल देता है।
सामान्य तथ्य: संचिकानाम विस्तार, इंटरनेट मीडिया प्रकार ...
इसमें सीएसएस (CSS) और जावास्क्रिप्ट (JS) का भी इस्तेमाल कर सकते हैं, जो इसे और भी उपयोगी बना देता है। ये जावास्क्रिप्ट में लिखे किसी प्रोग्राम को वेब पन्नों में दिखा या इस्तेमाल कर सकता है और सीएसएस के द्वारा इसके रूप और आकार को हम तय भी कर सकते हैं। वर्ल्ड वाइड वेब कॉन्सोर्शियम (W3C), जो एचटीएमएल और सीएसएस के मानक का रखरखाव करती आ रही है, सीएसएस के इस्तेमाल को 1997 से प्रोत्साहित कर रही है।
अधिक जानने के लिए क्लिक करें
CSS क्या है?
कैस्केडिंग स्टाइल शीट (सीएसएस) एक स्टाइल शीट भाषा है जो एक मार्कअप भाषा जैसे एचटीएमएल में लिखी गई दस्तावेज की प्रस्तुति का वर्णन करती है। सीएसएस वर्ल्ड वाइड वेब की एक आधारशिला तकनीक है, आम भाषा में हम कह सकते है कि CSS किसी भी वेबसाइट की सुंदरता और डिजाइन को दर्शाता है।
JavaScript क्या है?
जावास्क्रिप्ट एक कम्प्यूटर प्रोग्रामिंग भाषा है। यह एक स्क्रिप्टिंग भाषा है और मुख्यतः क्लाएंट साइड में वेबपेज के निर्माण में प्रयुक्त होती है।
यद्यपि इसके नाम में जावा शब्द आया हुआ है, तथापि इसका जावा नामक प्रोग्रामिंग भाषा से कोई सम्बन्ध नही है। हाँ, जावा तथा जावास्क्रिप्ट दोनो का सिन्टैक्स, सी के सिन्टैक्स से प्रभावित है। जावास्क्रिप्ट की डिजाइन के मुख्य सिद्धान्त सेल्फ (Self) नामक प्रोग्रामिंग भाषा से लिये गये हैं।
हम कह सकते है कि javascript किसी भी वेबसाइट का दिमाग होता है।
तो दोस्तों आपने जान लिया कि HTML,CSS, और JAVASCRIPT क्या होते है तो अब चलिए हम अपने कैल्क्युलेटर को बनाना सुरु करते है।
पहले हम अपने calculator का ढांचा बनाएंगे और हम जानते है कि वेबसाइट का ढांचा हम HTML ki मदद से बनते है तो चलिए लिखते है अपना HTML कोड।
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://sayyednaa.github.io/Calculator/css/style.css">
<title>Calculator</title>
</head>
<body>
<div class="container">
<h1>Calculator : Designed and Developed By :- Sayyed Nawab Abdul Ali </h1>
<div class="calculator">
<input type="text" id="screen">
<table>
<tr>
<td></td>
<td class="bb"><button class="bb">Back</button></td>
<td><button>C</button></td>
<td><button>%</button></td>
</tr>
<tr>
<td><button>7</button></td>
<td><button>8</button></td>
<td><button>9</button></td>
<td><button>X</button></td>
</tr>
<tr>
<td><button>4</button></td>
<td><button>5</button></td>
<td><button>6</button></td>
<td><button>-</button></td>
</tr>
<tr>
<td><button>1</button></td>
<td><button>2</button></td>
<td><button>3</button></td>
<td><button>+</button></td>
</tr>
<tr>
<td><button>0</button></td>
<td><button>.</button></td>
<td><button>/</button></td>
<td><button>=</button></td>
</table>
</div>
</div>
</body>
<script src="https://sayyednaa.github.io/Calculator/js/index.js"></script>
</html>
सिर्फ ढांचा बना लेने से हमारा कैल्क्युलेटर अच्छा और सुंदर नहीं दिखेगा तो हमे इसे और सुंदर और आकर्षक बनाना होगा, तो आप जानते ही होंगे कि वेबसाईट को सुंदर और आकर्षक बनाने के लिए हम CSS का इस्तेमाल करते है। तो चलिए करते है कैल्क्युलेटर को डिजाइन और बनाते है इसको सुंदर और आकर्षक।
.container{
text-align: center;
}
.calculator{
margin: auto;
display: inline-block;
border: 2px solid red;
padding: 14px;
background-color: slategrey;
width: 253px;
border-radius: 46px;
}
input{
font-size: 25px;
border: 2px solid green;
border-radius: 21px;
height: 54px;
width: 246px;
margin-bottom: 28px;
}
button{
font-size: 25px;
color: white;
background-color: green;
height: 42px;
width: 56px;
border-radius: 20px;
}
.bb{
font-size: 10px;
}
दोस्तों हमने अपने website ko सुंदर और आकर्षक तो बना लिया है लेकिन हम इससे कुछ कर नहीं सकते इसको काम करने के लिए हम कह सकते है कि इसको दिमाग देने के लिए हमे इसमें javascript कि मदद से इसको दिमाग देना होगा जिससे कि ये यूजर द्वारा दिए गए इनपुट को कैलकुलेशन कर सके तो आइए देते है हम इसको दिमाग :-
let screen=document.getElementById('screen');
buttons = document.querySelectorAll('button');
let screenValue = '';
for (item of buttons) {
item.addEventListener('click', (e) => {
buttonText = e.target.innerText;
console.log('Button text is ', buttonText);
if (buttonText == 'X') {
buttonText = '*';
screenValue += buttonText;
screen.value = screenValue;
}
else if (buttonText == 'C') {
screenValue = "";
screen.value = screenValue;
}
else if (buttonText == '=') {
screen.value = eval(screenValue);
}
else {
screenValue += buttonText;
screen.value = screenValue;
}
})
}
पूरा कोड (वेबसाइट) डाउनलोड करने कि लिए क्लिक करे
अगर आपको हमारा काम आपको अच्छा लगे तो मुझे GitHub पर फॉलो करे
My GitHub Profile
0 Comments