کارت محصول

پروژه‌ٔ اولیه

فایل پروژه را می‌توانید از طریق این این لینک دانلود کنید.

ساختار پروژه به شکل زیر است:

initial-project/
├─ api/
│  └─ getProduct.js
├─ assets/
│  ├─ spinner.svg
│  └─ watch.png
├─ js/
│  └─ cardAnimation.js
├─ index.html
├─ main.js
└─ style.css

جزئیات پیاده‌سازی

1. در فایل getProduct.js، تابعی با همین نام وجود دارد که یک Promise برمی‌گرداند، که شامل مشخصات محصولات است.
2. تابع showToast را باید با هدف نمایش toaster به کاربر کامل کنید. تگ مورد نظر که دارای آیدی toast است را از فایل HTML به‌دست بیاورید.

• توجه داشته باشید ۳ ثانیه پس از نمایش toaster، باید از بین برود.

3. تابع renderProduct باید اطلاعات محصول را در فرمت زیر و در تگی که دارای آیدی product-card است قرار دهد:

<div class="card-header">
  <img class="product-image" src="<!-- آدرس عکس -->" alt="<!-- آدرس عکس -->" />
  <div class="badge <!-- کلاس بر اساس وضعیت موجودی -->">
    <!-- وضعیت موجودی محصول -->
  </div>
</div>
<div class="card-body">
  <h2 class="product-title"><!-- عنوان محصول --></h2>
  <p class="product-brand">
    برند:
    <!-- برند محصول -->
  </p>
  <p class="product-category">
    دسته‌بندی:
    <!-- دسته‌بندی محصول -->
  </p>
  <p class="product-price"><!-- قیمت محصول --></p>
  <p class="product-description"><!-- توضیحات محصول --></p>
  <div class="product-rating">
    <span>
      ⭐
      <!-- امتیاز محصول -->
    </span>
    |
    <span>
      فروش:
      <!-- فروش محصول -->
      عدد
    </span>
  </div>
</div>

تصویر محصول کامل به شکل زیر است :

4. در تابع renderEror در صورتی که دریافت اطلاعات محصول با مشکل مواجه شد، محتوای داخلی product-card به این شکل خواهد بود:

<p style="color: var(--error-color); font-weight: bold;">خطا در بارگذاری اطلاعات</p>
<button id="retry-btn" class="retry-btn">تلاش مجدد</button>

• همچنین دکمه‌ای با آیدی retry-btn وجود دارد که باید برای آن یک event کلیک تعریف کنید تا با کلیک روی آن، سعی دوباره برای دریافت اطلاعات انجام شود (تابع نوشته‌شده برای این کار را call کنید).

5. تابع loadProduct را باید طوری کامل کنید، که هنگام لودینگ، محتوای زیر در product-card نمایش داده شود:

<img src="assets/spinner.svg" alt="در حال بارگذاری..." class="spinner">

همچنین در این تابع باید تلاش برای دریافت اطلاعات انجام شود. در صورت موفقیت، باید renderProduct را call کنید و در صورت شکست، showToast را نمایش دهید و همچنین renderError را فراخوانی کنید.

6. در پایان، هم تابع اصلی که تمام فرایند ها را به درستی اجرا می‌کند فراخوانی

نکات

1. در صورت نیاز برای نمایش {کارت، toaster , ... } از کلاس show و برای محو کردن آن‌ها از کلاس hidden که در فایل CSS از قبل نوشته شده‌اند استفاده بکنید.
2. در بخش جزئیات پیاده‌سازی، یک‌سری <!-- --> کامنت HTML را مشاهده می‌کنید که باید در آن قسمت‌ها اطلاعات مربوط به محصول را قرار دهید.
3. متن ارور باید در toaster نمایش داده شود.
4. برای استفاده از getProduct.js از import استفاده کنید.

• اگر با خطا رو به رو شویم :

• اگر محصول موجود یا ناموجود باشد :

آنچه باید آپلود کنید

فایلی که آپلود خواهید کرد باید دارای فرمت .zip باشد و دارای ساختار زیر باشد:

answer/
├─ main.js

موفق باشید 🌟