JS मिनी प्रोजेक्ट्स
In this page:
Click Counter
एक click counter एक event listener को state के एक टुकड़े के साथ मिलाता है, एक variable जो current count track करता है, और हर बार वह state बदलने पर visible text update करता है।
यह उस core interactive pattern का एक compact प्रदर्शन है जिसे लगभग हर JavaScript app इस्तेमाल करता है: किसी event पर react करना, state update करना, उस state को DOM में दिखाना।
उदाहरण: Click Counter
<button id="btn">Clicked 0 times</button>
<script>
// Declare the variable `count`, set to `0`
let count = 0;
document.getElementById("btn").addEventListener("click", function () {
count++;
// Assign `Clicked ${count} times` to `this.textContent`
this.textContent = `Clicked ${count} times`;
});
</script>To-Do List
एक to-do list किसी text input से एक value पढ़ने, हर item के लिए एक नया DOM element बनाने, और उसे एक list container में जोड़ने को मिलाती है, जो आमतौर पर किसी button click या form submission से trigger होता है।
यह user input को persistent, visible page content में बदलने का एक छोटा पर पूरा उदाहरण है।
उदाहरण: To-Do List
<input id="taskInput">
<button id="addBtn">Add</button>
<ul id="taskList"></ul>
<script>
document.getElementById("addBtn").addEventListener("click", () => {
// Declare the constant `li`, set to `document.createElement("li")`
const li = document.createElement("li");
// Assign `document.getElementById("taskInput").value` to `li.textContent`
li.textContent = document.getElementById("taskInput").value;
// Call `document.getElementById("taskList").appendChild(li)`
document.getElementById("taskList").appendChild(li);
});
</script>Modal Popup
एक modal popup एक hidden panel है, जो आमतौर पर page के बाकी हिस्से के ऊपर बैठने के लिए styled होता है, जो trigger होने पर visible हो जाता है और dismiss होने पर फिर से छिप जाता है, आमतौर पर बाहर click करने या एक close button से।
Core logic बस click events के जवाब में एक class जोड़ना या हटाना है, या display style को toggle करना है।
उदाहरण: Modal Popup
<button id="openBtn">Open Modal</button>
<div id="modal" style="display:none;">Modal content <button id="closeBtn">Close</button></div>
<script>
// Show the modal when the Open button is clicked
document.getElementById("openBtn").onclick = () => document.getElementById("modal").style.display = "block";
// Hide the modal again when the Close button is clicked
document.getElementById("closeBtn").onclick = () => document.getElementById("modal").style.display = "none";
</script>Form Validation
Client-side form validation किसी submit को आगे बढ़ने देने से पहले input values जांचता है, आमतौर पर default submit व्यवहार को रोककर और field values को खाली होने या किसी expected pattern के लिए जांचकर।
यह server तक के round trip का इंतज़ार किए बिना users को तुरंत feedback देता है, हालांकि असली security के लिए server-side validation अभी भी ज़रूरी है।
उदाहरण: Form Validation
<form id="form">
<input id="email">
<button type="submit">Submit</button>
</form>
<script>
document.getElementById("form").addEventListener("submit", (e) => {
// Call `e.preventDefault()`
e.preventDefault();
// Check whether `!document.getElementById("email").value`
if (!document.getElementById("email").value) {
// Print "Email is required" to the console
console.log("Email is required");
}
});
</script>Concepts मिलाना: एक Mini Quiz Widget
एक छोटा quiz widget data-driven content render करने, dynamically बनाए गए options पर clicks सुनने, selection को किसी जाने-पहचाने सही answer से compare करने, और score जैसी running state को update करने को साथ जोड़ता है।
यह यह practice करने के लिए एक अच्छा exercise है कि कई छोटे JavaScript concepts कैसे मिलकर एक interactive feature बनाते हैं।
उदाहरण: Combining Concepts: A Mini Quiz Widget
<p id="question">2 + 2 = ?</p>
<button data-answer="4">4</button>
<button data-answer="5">5</button>
<p id="score">Score: 0</p>
<script>
// Declare the variable `score`, set to `0`
let score = 0;
document.querySelectorAll("button").forEach(btn => {
btn.addEventListener("click", () => {
if (btn.dataset.answer === "4") score++;
document.getElementById("score").textContent = "Score: " + score;
});
});
</script>- elements के मौजूद होने से पहले script चलाना, इसलिए
getElementByIdnullreturn करता है और listener जोड़ने परTypeErrorthrow होता है। - किसी submit handler में
event.preventDefault()भूल जाना, इसलिए form page reload कर देता है और validation message गायब हो जाता है। - input values को numbers की तरह पढ़ना जबकि
input.valueहमेशा एक string होता है।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: