एक असली मिनी-ऐप बनाएँ: आइडिया बोर्ड
पेज से ऐप तक
अब तक आपने जो भी बनाया वह एक पेज था — दिखता शानदार था, क्लिक पर रिएक्ट करता था, पर रीफ़्रेश करते ही सब भूल जाता था। आज यह बदलता है। आप अपना पहला असली ऐप बना रहे हैं: डेटा अंदर जाता है, डेटा दिखाया जाता है, और डेटा याद रखा जाता है।
वैसे, ऐप्स का पूरा राज़ यही है। तीन कदम:
- डेटा अंदर — एक इनपुट जहाँ यूज़र कुछ टाइप करता है
- डेटा दिखे — एक लिस्ट जो स्क्रीन पर अपडेट होती है
- डेटा याद रहे — स्टोरेज, ताकि वह कल भी वहीं मिले
Vibe coding में आप वायरिंग बयान नहीं करते — आप फ़्लो बयान करते हैं। आज का प्रोजेक्ट बनाने वाला प्रॉम्प्ट कुछ ऐसा होता है:
"एक बॉक्स जहाँ मैं कोई आइडिया टाइप करूँ, एक बटन जो उसे नीचे की लिस्ट में जोड़ दे, और कल वापस आने पर लिस्ट वहीं की वहीं मिले।"
वह एक वाक्य AI को सब कुछ बता देता है: उसे एक इनपुट चाहिए, क्लिक लिसनर वाला एक बटन, एक लिस्ट जिसमें वह जोड़ता जाए, और "कल" वाले हिस्से के लिए localStorage। आप फ़्लो बयान करते हैं, इनपुट + लिस्ट + स्टोरेज AI सँभालता है।
आप जो ऐप बना रहे हैं वह है आइडिया बोर्ड — अब से आपके हर "अरे, यह तो मैं AI से बना सकता हूँ" वाले पल को पकड़ने की जगह। यक़ीन मानिए, इस कोर्स के बाद ऐसे पल बहुत आएँगे।
निर्देश
एक placeholder के साथ <input id="idea-input"> जोड़ें — आइडिया यहीं से अंदर आते हैं
संकेत: आज़माएँ: `<input id="idea-input" type="text" placeholder="I could build..." class="flex-1 bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm">`
इनपुट के बगल में एक <button id="add-btn"> जोड़ें — वह ट्रिगर जो आइडिया जोड़ता है
नीचे एक खाली <ul id="idea-list"> जोड़ें — आइडिया यहीं दिखाए जाएँगे
<script> में #add-btn पर क्लिक के लिए सुनें: इनपुट की वैल्यू के साथ एक <li> बनाएँ, उसे लिस्ट में जोड़ें, फिर इनपुट खाली करें
इसे याद रखना सिखाएँ: हर add पर आइडिया वाले array को localStorage("vca-ideas") में सेव करें, और पेज खुलने पर सेव किए हुए आइडिया लोड करके दिखाएँ
आपका कोड
इस स्टेप के लिए आप जो बनाना चाहते हैं उसे बताएं और मैं कोड लिख दूंगा — फिर इसे अपने एडिटर में डालने के लिए Apply पर क्लिक करें। यह स्टेप: एक placeholder के साथ <input id="idea-input"> जोड़ें — आइडिया यहीं से अंदर आते हैं