کارت محصول
پروژهٔ اولیه
فایل پروژه را میتوانید از طریق این این لینک دانلود کنید.
ساختار پروژه به شکل زیر است:
initial-project/
├─ api/
│ └─ getProduct.js
├─ assets/
│ ├─ spinner.svg
│ └─ watch.png
├─ js/
│ └─ cardAnimation.js
├─ index.html
├─ main.js
└─ style.css
جزئیات پیادهسازی
- در فایل
getProduct.js
، تابعی با همین نام وجود دارد که یک Promise برمیگرداند، که شامل مشخصات محصولات است. - تابع
showToast
را باید با هدف نمایش toaster به کاربر کامل کنید. تگ مورد نظر که دارای آیدیtoast
است را از فایل HTML بهدست بیاورید.
- توجه داشته باشید ۳ ثانیه پس از نمایش toaster، باید از بین برود.
- تابع
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>
تصویر محصول کامل به شکل زیر است :
- در تابع
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 کنید).
- تابع
loadProduct
را باید طوری کامل کنید، که هنگام لودینگ، محتوای زیر درproduct-card
نمایش داده شود:
<img src="assets/spinner.svg" alt="در حال بارگذاری..." class="spinner">
همچنین در این تابع باید تلاش برای دریافت اطلاعات انجام شود. در صورت موفقیت، باید renderProduct
را call کنید و در صورت شکست، showToast
را نمایش دهید و همچنین renderError
را فراخوانی کنید.
- در پایان، هم تابع اصلی که تمام فرایند ها را به درستی اجرا میکند فراخوانی
نکات
- در صورت نیاز برای نمایش {کارت، toaster , ... } از کلاس
show
و برای محو کردن آنها از کلاسhidden
که در فایل CSS از قبل نوشته شدهاند استفاده بکنید. - در بخش جزئیات پیادهسازی، یکسری
<!-- -->
کامنت HTML را مشاهده میکنید که باید در آن قسمتها اطلاعات مربوط به محصول را قرار دهید. - متن ارور باید در
toaster
نمایش داده شود. - برای استفاده از
getProduct.js
ازimport
استفاده کنید.
- اگر با خطا رو به رو شویم :
- اگر محصول موجود یا ناموجود باشد :
آنچه باید آپلود کنید
فایلی که آپلود خواهید کرد باید دارای فرمت .zip
باشد و دارای ساختار زیر باشد:
answer/
├─ main.js
موفق باشید 🌟
ارسال پاسخ برای این سؤال