CSS और JavaScript से टू-डू लिस्ट बनाएं: पूर्ण गाइड

CSS और JavaScript का उपयोग करके एक इंटरैक्टिव टू-डू लिस्ट बनाना वेब डेवलपमेंट सीखने का एक उत्कृष्ट तरीका है। यह DOM मैनिपुलेशन, इवेंट हैंडलिंग, और लोकल स्टोरेज जैसी अवधारणाओं को कवर करता है।

उदाहरण

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> 
    html { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } 
    body { max-width: 500px; margin: 10px auto; } 
    .todoInput { margin-top: 10px; padding: 10px; width: 100%; height: 60px; font-size: 24px; border: 2px solid #333; color: purple; box-sizing: border-box; } 
    li { text-align: left; font-size: 22px; list-style: none; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; cursor: pointer; transition: background 0.3s; } 
    li:hover { background-color: #ffe6e6; color: #cc0000; } 
    .completed { text-decoration: line-through; opacity: 0.6; } 
</style> </head> <body> 
<div style="border: 1px solid #ccc; padding: 20px; border-radius: 8px;"> 
<h1 style="text-align: center; color: #333;">टू-डू लिस्ट उदाहरण</h1> 
<input class="todoInput" placeholder="कुछ जोड़ें (एंटर दबाएं)" /> 
<ul id="list"></ul> 
</div> 
<script> 
    const input = document.querySelector(".todoInput"); 
    const list = document.getElementById("list"); 
    
    function addItem() { 
        const text = input.value.trim(); 
        if (!text) return; 
        
        const li = document.createElement("li"); 
        li.textContent = text; 
        li.onclick = function() { 
            this.classList.toggle("completed"); 
        }; 
        list.appendChild(li); 
        input.value = ""; 
    } 
    
    input.addEventListener("keyup", (e) => { 
        if (e.key === "Enter") addItem(); 
    }); 
</script> </body> </html>

आउटपुट

उपरोक्त कोड एक सुंदर टू-डू लिस्ट बनाता है जहां:

• उपयोगकर्ता इनपुट फील्ड में टेक्स्ट दर्ज करता है
• एंटर दबाने पर आइटम लिस्ट में जुड़ जाता है
• किसी आइटम पर क्लिक करने से वह पूरा हुआ मार्क हो जाता है (स्ट्राइकथ्रू)

संवर्द्धन सुझाव:

1. लोकल स्टोरेज: पेज रिफ्रेश होने पर डेटा सेव करने के लिए localStorage का उपयोग करें
2. डिलीट बटन: प्रत्येक आइटम के लिए डिलीट बटन जोड़ें
3. फिल्टर: सभी/सक्रिय/पूर्ण आइटम दिखाने के लिए फिल्टर बटन जोड़ें
4. ड्रैग एंड ड्रॉप: आइटम्स को पुन: क्रमित करने के लिए SortableJS लाइब्रेरी का उपयोग करें