AD

JavaScript DOM Manipulation Tutorial: एक प्रैक्टिकल Daily Expense Tracker बनाकर सीखें कोडिंग के बेसिक कॉन्सेप्ट्स

The Jayhooo Infotech 8/16/2026 03:51:00 AM
JavaScript DOM Manipulation Tutorial: एक प्रैक्टिकल Daily Expense Tracker बनाकर सीखें कोडिंग के बेसिक कॉन्सेप्ट्स

जब आप कोडिंग सीखना शुरू करते हैं, तो सिंटैक्स और डेफिनिशन याद करना सबसे बोरिंग और कम असरदार तरीका होता है। प्रोग्रामिंग सीखने का सबसे बेहतरीन फॉर्मूला है—छोटे और प्रैक्टिकल प्रोजेक्ट्स बनाना। वेब डेवलपमेंट की दुनिया में JavaScript सबसे जरूरी भाषा है, और इसकी असली ताकत दिखती है DOM Manipulation (Document Object Model) में।

इस ट्यूटोरियल में हम केवल थ्योरी नहीं पढ़ेंगे, बल्कि स्टेप-बाय-स्टेप एक रियल-वर्ल्ड "Daily Expense Tracker" (दैनिक खर्च ट्रैकर) बनाएंगे। इसके जरिए आप सीखेंगे कि कैसे जावास्क्रिप्ट की मदद से यूजर इनपुट लेते हैं, स्क्रीन पर डेटा डायनामिक रूप से दिखाते हैं, टोटल खर्च कैलकुलेट करते हैं और आइटम्स को डिलीट करते हैं।

DOM Manipulation क्या है और यह क्यों जरूरी है?

सरल शब्दों में, जब कोई वेब पेज लोड होता है, तो ब्राउज़र HTML कोड को एक ट्री-स्ट्रक्चर में बदल देता है जिसे DOM कहते हैं। JavaScript इस DOM का इस्तेमाल करके आपके वेबपेज के टेक्स्ट, कलर्स, एलिमेंट्स और डेटा को बिना पेज रिफ्रेश किए रियल-टाइम में बदल सकती है।

जब आप किसी बटन पर क्लिक करते हैं और स्क्रीन पर बिना रीलोड हुए कोई नया मैसेज या लिस्ट आ जाती है, तो पर्दे के पीछे DOM Manipulation ही काम कर रहा होता है।

हम क्या बनाने जा रहे हैं? (Project Overview)

हमारे Daily Expense Tracker में निम्नलिखित फीचर्स होंगे:

  • खर्च का नाम (Expense Name) और रकम (Amount) दर्ज करने का इनपुट फॉर्म।
  • "Add Expense" बटन दबाते ही लिस्ट में नया खर्च तुरंत जुड़ना।
  • सारे खर्चों का ऑटोमैटिक टोटल कैलकुलेट होकर नीचे दिखना।
  • गलत एंट्री को हटाने के लिए प्रत्येक आइटम के साथ "Delete" बटन।

Step 1: HTML लेआउट तैयार करना

सबसे पहले अपने कोड एडिटर (जैसे VS Code) में index.html फाइल बनाएं और बेसिक स्ट्रक्चर लिखें:

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Daily Expense Tracker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="tracker-container">
    <h2>दैनिक खर्च ट्रैकर (Expense Tracker)</h2>
    
    <form id="expense-form">
      <input type="text" id="expense-name" placeholder="खर्च का नाम (उदा. चाय/नाश्ता)" required>
      <input type="number" id="expense-amount" placeholder="रकम (₹)" required>
      <button type="submit">खर्च जोड़ें</button>
    </form>

    <h3>खर्चों की सूची</h3>
    <ul id="expense-list"></ul>

    <div class="total-box">
      कुल खर्च: ₹<span id="total-amount">0</span>
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>

Step 2: बेसिक CSS स्टाइलिंग (style.css)

अपने ऐप को साफ-सुथरा और मॉडर्न लुक देने के लिए style.css बनाएं:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f6f9;
  display: flex;
  justify-content: center;
  padding: 40px 10px;
}

.tracker-container {
  background: #ffffff;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 420px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input, button {
  padding: 10px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

button:hover {
  background-color: #0056b3;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

li {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  margin-bottom: 8px;
}

.delete-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.total-box {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
  color: #28a745;
}

Step 3: JavaScript से इंटरएक्टिविटी जोड़ना (app.js)

अब मुख्य लॉजिक की बारी है। हम app.js बनाएंगे और कोड को 4 आसान हिस्सों में समझेंगे।

1. HTML एलिमेंट्स को सेलेक्ट करना

जावास्क्रिप्ट को बताना होगा कि हम किस बटन, इनपुट और लिस्ट के साथ काम करना चाहते हैं:

const expenseForm = document.getElementById('expense-form');
const expenseNameInput = document.getElementById('expense-name');
const expenseAmountInput = document.getElementById('expense-amount');
const expenseList = document.getElementById('expense-list');
const totalAmountDisplay = document.getElementById('total-amount');

// डेटा स्टोर करने के लिए एक ऐरे (Array)
let expenses = [];

2. फॉर्म सबमिट इवेंट और डेटा जोड़ना

जब यूजर फॉर्म सबमिट करेगा, तब हमें पेज को रीलोड होने से रोकना है (Default behavior) और नया ऑब्जेक्ट बनाकर ऐरे में डालना है:

expenseForm.addEventListener('submit', function(event) {
  event.preventDefault(); // फॉर्म को पेज रीलोड करने से रोकता है

  const name = expenseNameInput.value.trim();
  const amount = Number(expenseAmountInput.value);

  if (name !== '' && amount > 0) {
    const newExpense = {
      id: Date.now(), // हर आइटम के लिए एक यूनिक ID
      name: name,
      amount: amount
    };

    expenses.push(newExpense);
    updateUI(); // स्क्रीन को अपडेट करने वाला फंक्शन

    // इनपुट फील्ड्स खाली करें
    expenseNameInput.value = '';
    expenseAmountInput.value = '';
  }
});

3. DOM को अपडेट करने का फंक्शन (Render Logic)

इस फंक्शन में हम HTML लिस्ट को डायनामिक तरीके से तैयार करते हैं और कुल खर्च का टोटल जोड़ते हैं:

function updateUI() {
  // पुरानी लिस्ट साफ करें
  expenseList.innerHTML = '';

  let total = 0;

  // सभी आइटम्स को स्क्रीन पर दिखाना
  expenses.forEach(function(item) {
    total += item.amount;

    const li = document.createElement('li');
    li.innerHTML = `
      <span>${item.name}: ₹${item.amount}</span>
      <button class="delete-btn" onclick="deleteExpense(${item.id})">Delete</button>
    `;
    expenseList.appendChild(li);
  });

  // टोटल खर्च अपडेट करें
  totalAmountDisplay.innerText = total;
}

4. आइटम डिलीट करने का लॉजिक

अगर यूजर किसी खर्च को हटाना चाहता है, तो हम filter मेथड का उपयोग करके उस आइटम को ID के आधार पर हटा देंगे:

function deleteExpense(id) {
  expenses = expenses.filter(function(item) {
    return item.id !== id;
  });
  updateUI(); // डिलीट करने के बाद UI को दोबारा रेंडर करें
}

इस प्रोजेक्ट से आपने कोडिंग के कौन से अहम कॉन्सेप्ट सीखे?

  • DOM Selection: getElementById से HTML के किसी भी एलिमेंट को जावास्क्रिप्ट में कंट्रोल करना।
  • Event Listeners: addEventListener के जरिए यूजर के क्लिक और सबमिट एक्शन को डिटेक्ट करना।
  • State Management: डेटा को एक Array (expenses) में रखना और डेटा बदलने पर स्क्रीन (UI) को रेंडर करना।
  • Dynamic HTML Creation: document.createElement और टेम्पलेट लिटरल्स (Backticks) से रन-टाइम पर नए HTML एलिमेंट्स बनाना।
  • Array Methods: push, forEach और filter का रियल-वर्ल्ड इस्तेमाल।

शुरुआती कोडिंग स्टूडेंट्स द्वारा की जाने वाली 3 गलतियां

  1. event.preventDefault() भूल जाना: फॉर्म सबमिट होते ही पेज तुरंत रीफ्रेश हो जाता है और आपका सारा स्टेट गायब हो जाता है।
  2. स्ट्रिंग और नंबर में भ्रम: इनपुट फील्ड से आने वाली वैल्यू हमेशा स्ट्रिंग होती है। अगर आप Number() या parseInt() नहीं लगाएंगे, तो 100 + 50 मिलकर "10050" बन जाएगा, न कि 150।
  3. यूनिक ID न देना: जब आप लिस्ट से किसी आइटम को डिलीट या एडिट करते हैं, तो Date.now() जैसी यूनिक आईडी का इस्तेमाल करना सबसे सुरक्षित होता है ताकि गलत आइटम डिलीट न हो।

Frequently Asked Questions (FAQ)

1. क्या इस प्रोजेक्ट के डेटा को ब्राउज़र बंद होने के बाद भी सुरक्षित रखा जा सकता है?

हाँ, इसके लिए आप ब्राउज़र के LocalStorage API का उपयोग कर सकते हैं। localStorage.setItem() और localStorage.getItem() की मदद से आप डेटा को यूजर के कंप्यूटर में हमेशा के लिए सेव रख सकते हैं।

2. `innerHTML` और `createElement` में क्या अंतर है?

innerHTML पूरे HTML स्ट्रिंग को पार्स करके रीप्लेस करता है, जो छोटे कामों के लिए आसान है। वहीं document.createElement मेमोरी में सुरक्षित तरीके से नया नोड बनाता है, जिससे सुरक्षा (XSS अटैक से बचाव) और परफॉर्मेंस बेहतर रहती है।

3. क्या यह प्रोजेक्ट React या Vue सीखने से पहले बनाना जरूरी है?

बिल्कुल। React या Vue जैसे फ्रेमवर्क असल में इसी DOM और स्टेट मैनेजमेंट को आसान बनाते हैं। अगर आप वैनिला (Pure) JavaScript में DOM manipulation समझ लेते हैं, तो कोई भी नया फ्रेमवर्क सीखना बच्चों का खेल बन जाता है।

4. अगर मुझे इस प्रोजेक्ट को और एडवांस बनाना हो तो क्या जोड़ना चाहिए?

आप इसमें खर्च की केटेगरी (जैसे Food, Travel, Rent) के लिए ड्रॉपडाउन मेनू, खर्च को एडिट करने का बटन और डेटा को चार्ट के रूप में दिखाने के लिए Chart.js लाइब्रेरी जोड़ सकते हैं।

Tags

Post a Comment

0 Comments

You Can Contact on WhatsApp - 9509503477