سلام دوست عزیز😃👋
به مسابقه «**ورودی بوت‌کمپ کداستار - Frontend**» خوش آمدی!
لینکهای مفید برای شرکت در مسابقه
+ [قوانین شرکت در مسابقه](https://quera.org/course/assignments/2693/problems/33523)
+ [قالب صورت سوالات تکنولوژی](https://quera.org/course/assignments/2693/problems/16283)
+ [آشنایی با تست نمونه](https://quera.org/course/assignments/2693/problems/42815)
+ [داوری Front-end](https://quera.org/course/assignments/5546/problems)
هرگونه **ارتباط با سایر شرکتکنندگان** و یا **استفاده از ابزارهای تولید کد، مثل chatGPT و...** در مسابقات کوئرا ممنوع است و بعد از شناسایی **از لیست شرکتکنندگان مسابقه حذف میشوید**.
در طول مسابقه، می‌توانید سؤالات خود را از قسمت «[سوال بپرسید](https://quera.org/contest/clarification/85280/)» مطرح کنید.
موفق باشید 😉✌
# کارت محصول
_szd6.gif)
# پروژه‌ٔ اولیه
فایل پروژه را می‌توانید از طریق این [این لینک](/contest/assignments/85280/download_problem_initial_project/291492/) دانلود کنید.
ساختار پروژه به شکل زیر است:
```plaintext
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` است قرار دهد:
```html
<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` به این شکل خواهد بود:
```html
<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` استفاده کنید.
+ اگر با خطا رو به رو شویم :
_l6lb.png)
+ اگر محصول موجود یا ناموجود باشد :
# آنچه باید آپلود کنید
فایلی که آپلود خواهید کرد باید دارای فرمت `.zip` باشد و دارای ساختار زیر باشد:
```plaintext
answer/
├─ main.js
```
موفق باشید 🌟
کارت محصول
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.