परिचय

हैलो, साथी डेवलपर्स! आज, मैं एक मज़ेदार और सरल प्रोजेक्ट साझा करने के लिए उत्साहित हूं जिस पर मैंने हाल ही में काम किया है: एक एडवाइस जेनरेटर वेबसाइट। यह प्रोजेक्ट बाहरी एपीआई से यादृच्छिक सलाह प्राप्त करता है और उन्हें एक वेबपेज पर प्रदर्शित करता है। यह एपीआई के साथ काम करने और इंटरैक्टिव वेब एप्लिकेशन बनाने का अभ्यास करने का एक शानदार तरीका है।

परियोजना अवलोकन

एडवाइस जेनरेटर वेबसाइट एक सीधा एप्लिकेशन है जो उपयोगकर्ताओं को एक बटन के क्लिक पर यादृच्छिक सलाह प्राप्त करने की अनुमति देता है। यह सलाह लाने और उसे वेबपेज पर प्रदर्शित करने के लिए एडवाइस स्लिप एपीआई का उपयोग करता है।

विशेषताएँ

• सलाह प्राप्त करता है: सलाह पर्ची एपीआई से यादृच्छिक सलाह प्राप्त करता है।
• सलाह प्रदर्शित करता है: एक सलाह संख्या के साथ सलाह दिखाता है।
• इंटरएक्टिव बटन: उपयोगकर्ता एक बटन पर क्लिक करके नई सलाह प्राप्त कर सकते हैं।

प्रयुक्त तकनीकें

• HTML: वेबपेज की संरचना के लिए।
• सीएसएस: वेबपेज को स्टाइल करने के लिए।
• जावास्क्रिप्ट: एपीआई से डेटा लाने और DOM को अपडेट करने के लिए।

परियोजना संरचना

यहां परियोजना संरचना पर एक त्वरित नज़र है:

Advice-Generator/
├── index.html
├── style.css
└── script.js

इंस्टालेशन

परियोजना शुरू करने के लिए, इन चरणों का पालन करें:

1. रिपोजिटरी क्लोन करें:
   

   git clone https://github.com/abhishekgurjar-in/Advice-Generator.git
   

2. प्रोजेक्ट निर्देशिका खोलें:
   

   cd Advice-Generator
   

3. प्रोजेक्ट चलाएं:

   • आप इसे या तो स्थानीय सर्वर पर चला सकते हैं या बस वेब ब्राउज़र में Index.html फ़ाइल खोल सकते हैं।

प्रयोग

1. वेब ब्राउज़र में वेबसाइट खोलें।
2. नई सलाह पाने के लिए "सलाह प्राप्त करें" बटन पर क्लिक करें।
3. ज्ञान का आनंद लें!

कोड स्पष्टीकरण

एचटीएमएल

HTML फ़ाइल में वेबपेज की मूल संरचना शामिल है, जिसमें सलाह प्राप्त करने के लिए एक बटन और सलाह प्रदर्शित करने के लिए एक अनुभाग शामिल है।

    

        
Advice Generator
        
Click the button to get a piece of advice!
        Get Advice
    
    

सीएसएस

सीएसएस फ़ाइल वेबपेज को दिखने में आकर्षक बनाने के लिए उसे स्टाइल करती है।

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
}

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

जावास्क्रिप्ट

जावास्क्रिप्ट फ़ाइल एपीआई से सलाह प्राप्त करती है और DOM को अपडेट करती है।

document.getElementById('adviceBtn').addEventListener('click', fetchAdvice);

function fetchAdvice() {
    fetch('https://api.adviceslip.com/advice')
        .then(response => response.json())
        .then(data => {
            document.getElementById('advice').innerText = `Advice #${data.slip.id}: ${data.slip.advice}`;
        })
        .catch(error => {
            console.error('Error fetching advice:', error);
        });
}

लाइव डेमो

आप यहां एडवाइस जेनरेटर वेबसाइट का लाइव डेमो देख सकते हैं।

निष्कर्ष

एडवाइस जेनरेटर वेबसाइट बनाना एक मजेदार और शैक्षणिक अनुभव था। इससे मुझे एपीआई के साथ काम करने और इंटरैक्टिव वेब एप्लिकेशन बनाने का अभ्यास करने में मदद मिली। मुझे आशा है कि आपको यह परियोजना मेरी तरह आनंददायक और जानकारीपूर्ण लगेगी। बेझिझक रिपॉजिटरी को क्लोन करें और कोड के साथ खेलें। हैप्पी कोडिंग!

क्रेडिट

• यह प्रोजेक्ट एडवाइस स्लिप एपीआई का उपयोग करता है।

लेखक

• अभिषेक गुर्जर
  • गिटहब प्रोफ़ाइल