goit js hw 11

اقرأ بلغات أخرى: الأوكرانية ، الإنجليزية.

معايير القبول

• تم إنشاء مستودع goit-js-hw-11 .
• يحتوي الواجب المنزلي على رابطين: في ملفات الإخراج وصفحة عمل على GitHub Pages .
• تفتقر وحدة التحكم إلى الأخطاء والتحذيرات عند فتح صفحة معيشة للمهمة.
• يتم تجميع المشروع باستخدام Parcel-Project-Template.
• تم استخدام مكتبة Axios لطلبات HTTP.
• يتم استخدام بناء جملة async/await .
• تم استخدام مكتبة Notiflix للرسائل.
• تتم صياغة الرمز باستخدام Prettier .

المهمة هي العثور على الصور

إنشاء مقدمة من تطبيق البحث وعرض الصور حسب الكلمات الرئيسية. أضف تصميم عناصر الواجهة. انظر video التجريبي للتطبيق.

Image- Search-PP-DMO.MP4

نموذج البحث

يحتوي النموذج أولاً في وثيقة HTML. سيقوم المستخدم بإدخال سطر للبحث في مربع نص ، ويجب إجراء نموذج النموذج بواسطة طلب HTTP.

 < form class =" search-form " id =" search-form " >
  < input
    type =" text "
    name =" searchQuery "
    autocomplete =" off "
    placeholder =" Search images... "
  />
  < button type =" submit " > Search </ button >
</ form > 

http-ass

استخدم واجهة برمجة تطبيقات Pixabay العامة للدعم. سجل ، احصل على مفتاح الوصول الفريد والتعرف على الوثائق.

قائمة خيارات سلسلة الاستعلام التي يجب أن تشير إليها:

• key هو مفتاح الوصول الفريد إلى API.
• q هو مصطلح البحث. ما سيدخله المستخدم.
• image_type - نوع الصورة. هناك حاجة إلى صور فقط ، لذا ضع photo .
• orientation - اتجاه الصورة. ضع قيمة horizontal .
• safesearch - تصفية حسب العمر. ضع قيمة true .

ستكون الإجابة مجموعة من الصور التي ترضي معايير معلمات الاستعلام. يتم وصف كل صورة بواسطة كائن تهتم به فقط بالخصائص التالية:

• webformatURL - رابط لصورة صغيرة لقائمة البطاقات.
• largeImageURL - رابط لصورة كبيرة.
• tags - خط مع وصف الصورة. مناسبة لسمة alt .
• likes - عدد الإعجابات.
• views - عدد المشاهدات.
• comments - عدد التعليقات.
• downloads - عدد التنزيلات.

إذا أعاد الدعم صفيفًا فارغًا ، فلا يوجد شيء مناسب. في هذه الحالة ، أظهر رسالة مع النص "Sorry, there are no images matching your search query. Please try again." . استخدم مكتبة Notiflix للرسائل.

معرض وبطاقة الصورة

يوجد عنصر div.gallery لأول مرة في وثيقة HTML ، ويجب استئجاره لعلامات بطاقة الصور. عند البحث عن كلمة رئيسية جديدة ، تحتاج إلى تنظيف محتويات المعرض تمامًا حتى لا تخلط النتائج.

 < div class =" gallery " >
  <!-- Картки зображень -->
</ div >

قالب ترميز البطاقة لصورة واحدة للمعرض.

 < div class =" photo-card " >
  < img src ="" alt ="" loading =" lazy " />
  < div class =" info " >
    < p class =" info-item " >
      < b > Likes </ b >
    </ p >
    < p class =" info-item " >
      < b > Views </ b >
    </ p >
    < p class =" info-item " >
      < b > Comments </ b >
    </ p >
    < p class =" info-item " >
      < b > Downloads </ b >
    </ p >
  </ div >
</ div > 

ترقيم الصفحات

يدعم Pixabay API ترقيم الصفحات ويوفر معلمات page و per_page . تأكد من أن كل إجابة تأتي 40 كائن (افتراضي 20).

• يجب أن تكون القيمة الأولية لمعلمة page 1 .
• مع كل طلب لاحق ، يجب زيادته بمقدار 1 .
• عند البحث عن كلمة رئيسية جديدة ، يجب إرجاع قيمة page إلى The Original ، حيث سيكون هناك صوف على مجموعة صور جديدة.

يحتوي مستند HTML بالفعل على زر علامات ، على النقر الذي تحتاجه إلى تقديم طلب للمجموعة التالية من الصور وإضافة العلامات إلى العناصر الموجودة في المعرض.

 < button type =" button " class =" load-more " > Load more </ button >

• في الحالة الأولية ، يجب إخفاء الزر.
• بعد الطلب الأول ، يظهر الزر في الواجهة أسفل المعرض.
• في حالة RE -SUB -MOM ، يتم إخفاء الزر أولاً ، وبعد الطلب يتم عرضه مرة أخرى.

رداً على ذلك ، يعيد دعم خاصية totalHits - إجمالي عدد الصور التي تلبي معيار البحث (للحصول على حساب مجاني). إذا كان المستخدم قد وصل إلى نهاية المجموعة ، فاختب الزر وأخرج رسالة بالنص "We're sorry, but you've reached the end of search results." .

بالإضافة إلى ذلك

️ الوظيفة التالية غير مطلوبة لهذه المهمة ، ولكن ستكون ممارسة إضافية جيدة.

رسالة

بعد الطلب الأول مع كل بحث جديد ، احصل على رسالة ستقول عدد الصور التي تم العثور عليها ( totalHits ). نص الرسالة - "Hooray! We found totalHits images."

مكتبة SimpleLightbox

أضف إصدارًا كبيرًا من الصورة مع مكتبة SimpleLightbox لمعرض كامل.

• ستحتاج العلامات إلى لف كل بطاقة صورة في الرابط ، كما هو موضح في الوثائق.
• تحتوي المكتبة على mattode refresh() ، والتي يجب استدعاؤها في كل مرة يتم فيها إضافة مجموعة صور جديدة.

من أجل توصيل رمز مكتبة CSS بالمشروع ، تحتاج إلى إضافة استيراد آخر ، باستثناء ما هو موضح في الوثائق.

 // Описаний в документації
import SimpleLightbox from 'simplelightbox' ;
// Додатковий імпорт стилів
import 'simplelightbox/dist/simple-lightbox.min.css' ;

تمرير الصفحة

قم بعمل تمرير سلس للصفحة بعد طلب وتشغيل كل مجموعة صور لاحقة. إليك رمز رمز ، لكن افهمه بنفسك.

 const { height : cardHeight } = document
  . querySelector ( '.gallery' )
  . firstElementChild . getBoundingClientRect ( ) ;

window . scrollBy ( {
  top : cardHeight * 2 ,
  behavior : 'smooth' ,
} ) ;

فئة لا نهاية لها

بدلاً من زر التحميل المزيد ، يمكنك إجراء تنزيل لا نهاية له من الصور أثناء التمرير. نمنحك حرية العمل الكاملة في التنفيذ ، يمكنك استخدام أي مكتبات.

---

قالب الطرود

كان هذا المشروع سوزدان في الطرود. للحصول على علامة وتعديل مرسى التعرض ليتم اختياره للوثائق.

إعداد مشروع جديد

1. تطابق مع Fersion-lts-version من Node.js. التنزيل والمؤسسات إذا كان ذلك ضروريًا.
2. الزجاج هو مستودع.
3. parcel-project-template ناش ناشمي.
4. قم بإنشاء مستودع فارغ جديد على GitHub.
5. مشروع OTKROI في VSCODE ، ابدأ المصطلح والتضحية بالمشروع مع مستودعات GITHUB بشأن التعليمات.
6. مؤسسات المشروع في Terminal npm install Team.
7. ابدأ وضع الاستنساخ ، تم إصدار أمر npm start .
8. انتقل إلى المتصفح على http: // localhost: 1234. سيتم استبدال هذه المؤامرة بالرجل المصنوع التلقائي في ملفات المشروع.

الملفات والمجلدات

• تقع جميع أنماط ملفات Parshali في src/sass Papquet ويتم استيرادها في ملفات ملفات الصفحات. على سبيل المثال ، بالنسبة إلى index.html ، يسمى ملف النمط index.scss .
• تحديد المجلد src/images . يحسنهم الشوروسي ، ولكن فقط مع استشادة إصدار المشروع من المشروع. كل شيء يذهب إلى مرأى من جهاز الكمبيوتر الخاص بك ، لذلك يمكن أن يكون الكثير من الوقت على السيارات الضعيفة.

نشر

لضبط مشروع DePaza ، من الضروري رسم الكثير من عمليات القطع الإضافية على إعداد مستودعك. تعال إلى علامة التبويب Settings " وفي المقاطع الفرعية Actions ، حدد العنصر General .

حرك المؤامرة إلى المنشور ، حيث يتم أخذ أوباسيا في المسار على أثر الصورة ومن أجل Save . بدون هذه الأعلاف في المجارف ، سيكون هناك نفاثة لأتمتة عملية نشرها.

سيكون إصدار المشروع من المشروع تلقائيًا ويتوقف على صفحات GitHub ، في gh-pages Wet ، يتم تحديث وقت COGD main . على سبيل المثال ، بوشا مستقيمة أو بوشا محاكمة على حمام السباحة أو بوشا مستقيمة. لهذا ، تحتاج إلى تقديم homepage package.json File و build Script ، واضغطت على your_username و your_repo_name الخاص بك ، وإرسال الاسم على github.

 "homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
  "build" : " parcel build src/*.html --public-url /your_repo_name/ "
},

انتقل تقريبًا إلى ضبط GitHub-Repository ( Settings > Pages ) وسوف يستخلص إنتاج الملف من المجلد /root gh-pages ، إذا لم يكن هذا كثيرًا.

حالة Depaza

يتم غزو حالة نشر مقطع متطرف بواسطة أيقونة الأنا من yoditicator.

• اليرقان - مجموعة المشروع و deplese.
• اللون الأخضر - انتهى deploi في تماما.
• اللون الأحمر - في وقت الوبر أو مغرفة أو نشر النشر.

يمكن غارقة المعلومات التفصيلية المؤلمة حول الحالة في الرمز ، وفي تجاوز تبديل Windows على Details .

مؤامرة حية

بسبب الوقت ، بضع أسطول ، أعيش المؤامرة ، يمكنك أن ينضج على العنوان المشار إليه في homepage . على سبيل المثال ، أعيش ماند لهذا المستودع https://goitacademy.github.io/parcel-project-template.

إذا تم فتح مؤامرة صحراوية ، لقتل علامة تبويب Console في مشهد حزم CSS و JS Project ( 404 ). Scork All in Taby المعنى غير المنتظم homepage أو build البرنامج النصي في ملف package.json .

كيف هذا العمل

1. بعد كل دفعة ، يتم إطلاق main نصي خاص (إجراء GitHub) من ملف .github/workflows/deploy.yml .
2. يتم تجميع جميع مستودعات الملفات على الخادم ، حيث يتم تهيئة المشروع ويمرر الحصاد أمام Deplo.
3. إذا مرت جميع الخطوات كثيرًا ، فإن الإنتاج الوحيد لمشاريع ملفات المشروع في طبيب بيطري gh-pages . في الحالة المعاكسة ، سيتم إعطاء في البرنامج النصي المنطقي في المشكلة.