HTML, CSS और JavaScript का उपयोग करके रेसिपी बुक कैसे बनाएँ

प्रोजेक्ट्स आपके HTML, CSS और JavaScript कौशल को बेहतर बनाने और महत्वपूर्ण अवधारणाओं और तकनीकों को सुदृढ़ करने का एक शानदार तरीका है।

एक प्रोजेक्ट जिसके साथ आप शुरुआत कर सकते हैं वह एक रेसिपी बुक है, जिसे आप Google क्रोम या फ़ायरफ़ॉक्स जैसे ब्राउज़र में चला सकते हैं।

रेसिपी बुक में, वेबपेज के बाईं ओर एक सेक्शन शामिल है जहाँ उपयोगकर्ता नई रेसिपी जोड़ सकता है। पृष्ठ के दाईं ओर, उपयोगकर्ता मौजूदा व्यंजनों को देख और खोज सकता है।

उपयोगकर्ता को नई रेसिपी जोड़ने के लिए कैसे कहें

प्रारंभिक सामग्री को HTML, CSS और JavaScript फ़ाइलों में जोड़ें। यदि आप वेब विकास अवधारणाओं से अपरिचित हैं, तो ऐसे कई स्थान हैं जहाँ आप कर सकते हैं वेब विकास ऑनलाइन सीखें.

आप इसमें पूरी रेसिपी बुक का उदाहरण भी देख सकते हैं गिटहब रेपो.

1. एक नई HTML फ़ाइल में मूल HTML संरचना जोड़ें, जिसे index.html कहा जाता है:

   एचटीएमएल>
   <एचटीएमएल>
   <सिर>
   <शीर्षक>पकाने की विधि ऐपशीर्षक>
   सिर>
   <शरीर>
   <एनएवी>
   <एच 1>पकाने की विधि ऐपएच 1>
   एनएवी>
   <डिवकक्षा="कंटेनर">
    सामग्री यहाँ 
   डिव>
   शरीर>
   एचटीएमएल>

instagram viewer
2. कंटेनर वर्ग के अंदर, पृष्ठ को बाएँ स्तंभ और दाएँ स्तंभ में अलग करें:

   <डिवकक्षा="वाम-स्तंभ">
   डिव>
   <डिवकक्षा="दक्षिण पक्ष क़तार">
   डिव>

3. बाएं कॉलम के अंदर, उपयोगकर्ता के लिए एक नया नुस्खा जोड़ने के लिए एक फॉर्म जोड़ें। उपयोगकर्ता नुस्खा का नाम, सामग्री सूची और विधि दर्ज कर सकता है:

   <h3>रेसिपी जोड़ेंh3>
   <प्रपत्र>
   <लेबलके लिए="नुस्खा-नाम">नाम:लेबल>
   <इनपुटप्रकार="मूलपाठ"पहचान="नुस्खा-नाम"आवश्यक>
   <बीआर />
   <लेबलके लिए="नुस्खा सामग्री">अवयव:लेबल>
   <पाठ क्षेत्रपहचान="नुस्खा सामग्री"पंक्तियों="5"आवश्यक>पाठ क्षेत्र>
   <बीआर />
   <लेबलके लिए="नुस्खा-विधि">तरीका:लेबल>
   <पाठ क्षेत्रपहचान="नुस्खा-विधि"पंक्तियों="5"आवश्यक>पाठ क्षेत्र>
   <बीआर />
   <बटनप्रकार="जमा करना">रेसिपी जोड़ेंबटन>
   प्रपत्र>

4. HTML फ़ाइल के हेड टैग में, Style.css नामक एक नई CSS फ़ाइल का लिंक जोड़ें। फ़ाइल को अपनी HTML फ़ाइल के समान फ़ोल्डर में बनाएँ:

   <जोड़नासंबंधित="शैली पत्रक"href="शैलियाँ.सीएसएस">

5. CSS फ़ाइल के अंदर, समग्र पृष्ठ के लिए कुछ स्टाइलिंग जोड़ें:

   शरीर {
   फुहारा परिवार: सान्स सेरिफ़;
   }
   एनएवी {
   पृष्ठभूमि का रंग: #333;
   पद: हल किया गया;
   ऊपर: 0;
   चौड़ाई: 100%;
   गद्दी: 20पिक्सल;
   बाएं: 0;
   रंग: सफ़ेद;
   पाठ संरेखित: केंद्र;
   }
   कंटेनर {
   दिखाना: मोड़ना;
   फ्लेक्स-दिशा: पंक्ति;
   औचित्य-सामग्री: अंतरिक्ष के बीच;
   अंतर: 150पिक्सल 5%;
   }
   .वाम-स्तंभ {
   चौड़ाई: 25%;
   }
   ।दक्षिण पक्ष क़तार {
   चौड़ाई: 65%;
   }

6. के लिए कुछ स्टाइलिंग जोड़ें व्यंजनों को जोड़ें प्रपत्र:

   प्रपत्र {
   दिखाना: मोड़ना;
   फ्लेक्स-दिशा: कॉलम;
   }
   लेबल {
   मार्जिन नीचे: 10पिक्सल;
   }
   इनपुट[प्रकार ="मूलपाठ"], पाठ क्षेत्र {
   गद्दी: 10पिक्सल;
   मार्जिन नीचे: 10पिक्सल;
   बॉर्डर-त्रिज्या: 5पिक्सल;
   सीमा: 1पिक्सलठोस#सीसीसी;
   चौड़ाई: 100%;
   बॉक्स आकार: सीमा बॉक्स;
   }
   बटन[प्रकार ="जमा करना"] {
   गद्दी: 10पिक्सल;
   पृष्ठभूमि का रंग: #3338;
   रंग: #फफ्फ;
   सीमा: कोई नहीं;
   बॉर्डर-त्रिज्या: 5पिक्सल;
   कर्सर: सूचक;
   }

7. अपनी HTML फ़ाइल में बॉडी टैग के नीचे, script.js नामक JavaScript फ़ाइल का लिंक जोड़ें। फ़ाइल को उसी फ़ोल्डर में बनाएँ:

   <शरीर>
    संतुष्ट 
   <लिखी हुई कहानीस्रोत="स्क्रिप्ट.जेएस">लिखी हुई कहानी>
   शरीर>

8. script.js के अंदर, querySelector मेथड का उपयोग करें डोम को पार करें और पृष्ठ से प्रपत्र तत्व प्राप्त करें।

   कॉन्स्ट रूप = दस्तावेज़क्वेरी चयनकर्ता ('प्रपत्र');

9. उपयोगकर्ता द्वारा फ़ॉर्म में दर्ज किए गए व्यंजनों को संग्रहीत करने के लिए एक नई सरणी बनाएँ:

   होने देना व्यंजन विधि = [];

10. एक नए फ़ंक्शन में, नाम, सामग्री और विधि फ़ील्ड को प्रपत्र के माध्यम से दर्ज करें। आप अमल भी कर सकते हैं क्लाइंट-साइड फॉर्म सत्यापन अमान्य इनपुट को रोकने के लिए, या यह जांचने के लिए कि कोई नुस्खा पहले से मौजूद है या नहीं।

    समारोहहैंडल सबमिट करें(आयोजन) {
    // डिफॉल्ट फॉर्म सबमिशन व्यवहार को रोकें
     घटना.रोकथाम ();
    
    // नुस्खा का नाम, सामग्री और विधि इनपुट मान प्राप्त करें
    कॉन्स्ट नाम इनपुट = दस्तावेज़क्वेरी चयनकर्ता ('#नुस्खा-नाम');
    कॉन्स्ट इंग्रइनपुट = दस्तावेज़क्वेरी चयनकर्ता ('#नुस्खा-सामग्री');
    कॉन्स्ट विधि इनपुट = दस्तावेज़क्वेरी चयनकर्ता ('#रेसिपी-विधि');
    कॉन्स्ट नाम = nameInput.value.trim ();
    कॉन्स्ट सामग्री = ingrInput.value.trim ()। विभाजन (',')।नक्शा(मैं => i.ट्रिम ());
    कॉन्स्ट विधि = methodInput.value.trim ();
    }

11. यदि इनपुट मान्य हैं, तो उन्हें रेसिपी ऐरे में जोड़ें:

    अगर (नाम && सामग्री। लंबाई> 0 && तरीका) {
    कॉन्स्ट newRecipe = {नाम, सामग्री, विधि};
     रेसिपी.पुश (नई रेसिपी);
    }

12. प्रपत्र पर इनपुट साफ़ करें:

    नाम इनपुट। मान = '';
    ingrInput.value = '';
    विधि इनपुट। मान = '';

13. हैंडलसबमिट () फ़ंक्शन के बाद, जोड़ें एक घटना श्रोता जब उपयोगकर्ता फॉर्म सबमिट करता है तो फ़ंक्शन को कॉल करने के लिए:

    फॉर्म.ऐडइवेंट लिस्टनर ('जमा करना', हैंडल सबमिट करें);

14. एक ब्राउज़र में index.html खोलें और बाईं ओर फॉर्म देखें:

जोड़े गए व्यंजनों को कैसे प्रदर्शित करें

आप पृष्ठ के दाईं ओर नुस्खा सरणी में संग्रहीत व्यंजनों को प्रदर्शित कर सकते हैं।

1. HTML फ़ाइल में, दाएँ कॉलम के अंदर व्यंजनों की सूची प्रदर्शित करने के लिए एक div जोड़ें। यदि कोई रेसिपी नहीं है तो संदेश प्रदर्शित करने के लिए एक और div जोड़ें:

   <डिवकक्षा="दक्षिण पक्ष क़तार">
   <डिवपहचान="नुस्खा-सूची">डिव>
   <डिवपहचान="नो-रेसिपी">आपके पास कोई रेसिपी नहीं है।डिव>
   डिव>

2. व्यंजनों की सूची के लिए कुछ CSS स्टाइलिंग जोड़ें:

   #नुस्खा सूची {
   दिखाना: जाल;
   ग्रिड-टेम्प्लेट-कॉलम: दोहराना(स्वत: फ़िट, न्यूनतम अधिकतम(300पिक्सल, 1फादर));
   ग्रिड-गैप: 20पिक्सल;
   }
   #नो-रेसिपी {
   दिखाना: मोड़ना;
   पृष्ठभूमि का रंग: #FFCCCC;
   गद्दी: 20पिक्सल;
   बॉर्डर-त्रिज्या: 8पिक्सल;
   मार्जिन टॉप: 44पिक्सल;
   }

3. जावास्क्रिप्ट फ़ाइल के शीर्ष पर, व्यंजनों की सूची और त्रुटि संदेश प्रदर्शित करने के लिए उपयोग किए जाने वाले HTML तत्व प्राप्त करें:

   कॉन्स्ट नुस्खा सूची = दस्तावेज़क्वेरी चयनकर्ता ('#नुस्खा सूची');
   कॉन्स्ट नो रेसिपी = दस्तावेज़.getElementById('नो-रेसिपी');

4. एक नए फ़ंक्शन के अंदर, रेसिपी सरणी में प्रत्येक रेसिपी के माध्यम से लूप करें। प्रत्येक रेसिपी के लिए, उस रेसिपी को प्रदर्शित करने के लिए एक नया div बनाएँ:

   समारोहप्रदर्शन व्यंजनों() {
    रेसिपी लिस्ट. इनर HTML = '';
    रेसिपी। प्रत्येक के लिए ((नुस्खा, सूचकांक) => {
   कॉन्स्ट रेसिपीडिव = दस्तावेज़.क्रिएट एलिमेंट ('डिव');
    });
   }

5. नाम, सामग्री और विधि प्रदर्शित करने के लिए अलग-अलग रेसिपी डिव में कुछ सामग्री जोड़ें। Div में डिलीट बटन भी शामिल होगा। आप इस कार्यक्षमता को बाद के चरणों में जोड़ेंगे:

   रेसिपीडिव.इनरएचटीएमएल = `
   ${रेसिपी.नाम}</h3>
   
   
   <मज़बूत>अवयव:मज़बूत></p>
   
   
   
    ${रेसिपी.इनग्रेडिएंट्स.मैप(आईएनजीआर =>`
   ${आईएनजीआर}
   `)।जोड़ना('')}
    </ul>
   <मज़बूत>तरीका:मज़बूत></p>
   
   ${रेसिपी.मेथड</p>
   कक्षा="डिलीट-बटन" डेटा-इंडेक्स ="${सूचकांक}">हटाएं</button>`;
   

6. Div को स्टाइल करने के लिए एक वर्ग जोड़ें:

   रेसिपीडिव.क्लासलिस्ट.ऐड ('व्यंजन विधि');

7. नई div को रेसिपी लिस्ट HTML एलिमेंट में जोड़ें:

   रेसिपी लिस्ट.एपेंड चाइल्ड (रेसिपीडिव);

8. CSS फ़ाइल में वर्ग के लिए स्टाइलिंग जोड़ें:

   ।व्यंजन विधि {
   सीमा: 1पिक्सलठोस#सीसीसी;
   गद्दी: 10पिक्सल;
   बॉर्डर-त्रिज्या: 5पिक्सल;
   डब्बे की छाया: 0 2पिक्सल 4पिक्सलrgba(0,0,0,.2);
   }
   ।व्यंजन विधिh3 {
   मार्जिन टॉप: 0;
   मार्जिन नीचे: 10पिक्सल;
   }
   ।व्यंजन विधिउल {
   अंतर: 0;
   गद्दी: 0;
   सूची-शैली: कोई नहीं;
   }
   ।व्यंजन विधिउलली {
   मार्जिन नीचे: 5पिक्सल;
   }

9. जांचें कि क्या एक से अधिक व्यंजन हैं। यदि ऐसा है, तो त्रुटि संदेश छुपाएं:

   noRecipes.style.display = recipes.length > 0? 'कोई नहीं': 'फ्लेक्स';

10. रेसिपी ऐरे में नई रेसिपी जोड़ने के बाद, हैंडलसबमिट () फ़ंक्शन के अंदर नए फ़ंक्शन को कॉल करें:

    प्रदर्शन व्यंजन ();

11. ब्राउज़र में index.html खोलें:
12. सूची में व्यंजनों को जोड़ें और उन्हें दाईं ओर दिखाई देते हुए देखें:

व्यंजनों को कैसे हटाएं

आप पर क्लिक करके व्यंजनों को हटा सकते हैं मिटाना नुस्खा के निर्देशों के नीचे बटन।

1. डिलीट बटन के लिए कुछ CSS स्टाइलिंग जोड़ें:

   .डिलीट-बटन {
   पृष्ठभूमि का रंग: #dc3545;
   रंग: #फफ्फ;
   सीमा: कोई नहीं;
   बॉर्डर-त्रिज्या: 5पिक्सल;
   गद्दी: 5पिक्सल 10पिक्सल;
   कर्सर: सूचक;
   }
   .डिलीट-बटन: होवर {
   पृष्ठभूमि का रंग: #c82333;
   }

2. जावास्क्रिप्ट फ़ाइल में, एक नुस्खा हटाने के लिए एक नया कार्य जोड़ें:

   समारोहहैंडलडिलीट(आयोजन) {
   }

3. JavaScript ईवेंट का उपयोग करके, उस रेसिपी का इंडेक्स ढूंढें जिस पर उपयोगकर्ता ने क्लिक किया:

   अगर (event.target.classList.contains('डिलीट-बटन')) {
   कॉन्स्ट अनुक्रमणिका = event.target.dataset.index;
   }

4. रेसिपी सरणी से चयनित रेसिपी को हटाने के लिए इंडेक्स का उपयोग करें:

   रेसिपी.स्प्लिस (सूचकांक, 1);

5. पेज पर प्रदर्शित व्यंजनों की सूची को ताज़ा करें:

   प्रदर्शन व्यंजन ();

6. उपयोगकर्ता द्वारा डिलीट बटन पर क्लिक करने पर हैंडलडिलीट () फ़ंक्शन को कॉल करने के लिए एक ईवेंट श्रोता जोड़ें:

   रेसिपी लिस्ट.ऐडइवेंट लिस्टनर ('क्लिक', हैंडलडिलीट);

7. एक ब्राउज़र में index.html खोलें। डिलीट बटन देखने के लिए रेसिपी जोड़ें:

व्यंजनों की खोज कैसे करें

कोई निश्चित रेसिपी मौजूद है या नहीं यह जांचने के लिए आप सर्च बार का उपयोग करके व्यंजनों की खोज कर सकते हैं।

1. राइट-कॉलम के अंदर, व्यंजनों की सूची से पहले एक खोज बार जोड़ें:

   <डिवपहचान="खोज अनुभाग">
   <h3>व्यंजनों की सूचीh3>
   <लेबलके लिए="खोज बॉक्स">खोज:लेबल>
   <इनपुटप्रकार="मूलपाठ"पहचान="खोज बॉक्स">
   डिव>

2. खोज बार लेबल के लिए CSS स्टाइल जोड़ें:

   लेबल[के लिए ="खोज बॉक्स"] {
   दिखाना: अवरोध पैदा करना;
   मार्जिन नीचे: 10पिक्सल;
   }

3. script.js में, खोज बॉक्स का HTML तत्व प्राप्त करें:

   कॉन्स्ट सर्चबॉक्स = दस्तावेज़.getElementById('खोज बॉक्स');

4. एक नए फ़ंक्शन के अंदर, एक नई सरणी बनाएं जिसमें ऐसी रेसिपी हों जिनका नाम खोज इनपुट से मेल खाता हो:

   समारोहखोज(जिज्ञासा) {
   कॉन्स्ट फ़िल्टर किए गए व्यंजन = व्यंजन। फ़िल्टर (व्यंजन विधि => {
   वापस करना रेसिपी.नाम.टूलोवरकेस().शामिल है (क्वेरी.टूलोवरकेस());
    });
   }

5. स्क्रीन पर वर्तमान में प्रदर्शित व्यंजनों की सूची साफ़ करें:

   रेसिपी लिस्ट. इनर HTML = '';

6. खोज परिणाम से मेल खाने वाली प्रत्येक फ़िल्टर की गई रेसिपी के माध्यम से लूप करें, और एक नया div तत्व बनाएँ:

   फ़िल्टर किए गए व्यंजन। प्रत्येक के लिए (व्यंजन विधि => {
   कॉन्स्ट नुस्खाईएल = दस्तावेज़.क्रिएट एलिमेंट ('डिव'); 
   });

7. फ़िल्टर की गई रेसिपी के लिए HTML सामग्री को div में जोड़ें:

   रेसिपीEl.innerHTML = `
   ${रेसिपी.नाम}</h3>
   
   
   <मज़बूत>अवयव:मज़बूत></p>
   
   
   
    ${रेसिपी.इनग्रेडिएंट्स.मैप(आईएनजीआर =>`
   ${आईएनजीआर}
   `)।जोड़ना('')}
    </ul>
   <मज़बूत>तरीका:मज़बूत></p>
   
   ${रेसिपी.मेथड</p>
   कक्षा="डिलीट-बटन" डेटा-इंडेक्स ="${recipes.indexOf (नुस्खा)}">
    मिटाना
    </button>`;
   

8. समान स्टाइलिंग के लिए समान रेसिपी क्लास जोड़ें। पृष्ठ पर प्रदर्शित सूची में नया div जोड़ें:

   नुस्खाEl.classList.add ('व्यंजन विधि');
   रेसिपीलिस्ट.एपेंडचाइल्ड (रेसिपीईएल);

9. जब उपयोगकर्ता खोज बार में टाइप करता है तो खोज () फ़ंक्शन को कॉल करने के लिए ईवेंट श्रोता जोड़ें:

   searchBox.addEventListener('इनपुट', घटना => खोज (event.target.value));

10. हैंडलडिलीट () फ़ंक्शन के अंदर, सूची को ताज़ा करने के लिए, यदि उपयोगकर्ता किसी आइटम को हटाता है, तो खोज बॉक्स को साफ़ करें:

    सर्चबॉक्स.वैल्यू = '';

11. नया खोज बार देखने के लिए किसी वेब ब्राउज़र में index.html खोलें, और कुछ रेसिपी जोड़ें:
12. रेसिपी सूची को फ़िल्टर करने के लिए सर्च बार में रेसिपी का नाम जोड़ें:

एचटीएमएल, सीएसएस और जावास्क्रिप्ट के साथ प्रोजेक्ट बनाना

यह प्रोजेक्ट दर्शाता है कि एक साधारण रेसिपी बुक के लिए फ्रंट-एंड इंटरफ़ेस कैसे बनाया जाए। ध्यान दें कि कोई बैकएंड सर्वर नहीं है और ऐप डेटा को बनाए नहीं रखता है; यदि आप पृष्ठ को रीफ़्रेश करते हैं, तो आप अपने परिवर्तन खो देंगे। एक संभावित विस्तार जिस पर आप काम कर सकते हैं वह स्थानीय स्टोरेज का उपयोग करके डेटा को सहेजने और लोड करने के लिए एक तंत्र है।

अपने वेब डेवलपमेंट स्किल्स को बेहतर बनाने के लिए, अन्य मज़ेदार प्रोजेक्ट एक्सप्लोर करना जारी रखें, जिन्हें आप अपने कंप्यूटर पर बना सकते हैं।