مقدمة

مرحبًا زملائي المطورين! اليوم، أنا متحمس لمشاركة مشروع ممتع وبسيط عملت عليه مؤخرًا: موقع ويب Advice Generator. يجلب هذا المشروع نصائح عشوائية من واجهة برمجة تطبيقات خارجية ويعرضها على صفحة ويب. إنها طريقة رائعة للتدرب على العمل باستخدام واجهات برمجة التطبيقات (APIs) وإنشاء تطبيقات ويب تفاعلية.

نظرة عامة على المشروع

يعد موقع Advice Generator تطبيقًا مباشرًا يسمح للمستخدمين بالحصول على نصائح عشوائية بنقرة زر واحدة. يستخدم Advice Slip API لجلب النصائح وعرضها على صفحة الويب.

سمات

• جلب النصائح: استرداد النصائح العشوائية من Advice Slip API.
• يعرض النصيحة: يعرض النصيحة مع رقم النصيحة.
• الزر التفاعلي: يمكن للمستخدمين جلب نصيحة جديدة من خلال النقر على زر.

التقنيات المستخدمة

• HTML: لهيكل صفحة الويب.
• CSS: لتصميم صفحة الويب.
• جافا سكريبت: لجلب البيانات من واجهة برمجة التطبيقات وتحديث 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

يحتوي ملف HTML على البنية الأساسية لصفحة الويب، بما في ذلك زر لجلب النصائح وقسم لعرض النصائح.

    

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

CSS

يقوم ملف CSS بتصميم صفحة الويب لجعلها جذابة بصريًا.

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;
}

جافا سكريبت

يجلب ملف JavaScript النصائح من واجهة برمجة التطبيقات ويقوم بتحديث 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);
        });
}

العرض المباشر

يمكنك الاطلاع على العرض التوضيحي المباشر لموقع Advice Generator هنا.

خاتمة

كان إنشاء موقع Advice Generator تجربة ممتعة وتعليمية. لقد ساعدني ذلك في ممارسة العمل مع واجهات برمجة التطبيقات (APIs) وبناء تطبيقات الويب التفاعلية. أتمنى أن تجد هذا المشروع ممتعًا وغنيًا بالمعلومات كما فعلت. لا تتردد في استنساخ المستودع والتلاعب بالرمز. برمجة سعيدة!

الاعتمادات

• يستخدم هذا المشروع واجهة برمجة تطبيقات Advice Slip.

مؤلف

• ابهيشيك جورجار
  • الملف الشخصي على جيثب