# جدول‌ اطلاعات  # پروژه‌ٔ اولیه فایل پروژه را می‌توانید از طریق این [این لینک](/contest/assignments/85280/download_problem_initial_project/291493/) دانلود کنید. ساختار پروژه به شکل زیر است: ``` initial_project/ ├─ js/ │ └─ data.js ├─ index.html ├─ main.js └─ styles.css ``` در فایل `data.js`، تابعی وجود دارد که اطلاعات لیستی از ماشین‌ها در آن موجود است. # جزئیات پیاده‌سازی ۱. اینپوت، سلکتور و تیبل را می‌توانید از طریق آیدی‌های زیر بدست آورید: + `searchInput` + `yearFilter` + `carsTable` ۲. این خط را مشاهده کنید: ```js fetchCarsData().then() ``` با ادامه دادن آن، اطلاعات ماشین‌ها را به‌دست آورید. ۳. تابع `renderCars` را به‌گونه‌ای پیاده‌سازی کنید که: + اگر لیست خالی بود، `emptyListString` به‌عنوان محتوای بدنهٔ تیبل نمایش داده شود.  + اگر لیست شامل آیتم بود، برای هر آیتم یک ردیف جدول با ۴ ستون زیر نمایش داده شود: ```html <td><!-- نام ماشین --></td> <td><!-- مدل ماشین --></td> <td><!-- سال ساخت ماشین --></td> <td><!-- رنگ ماشین --></td> ``` 4. تابع `createYearFilterList` را طوری کامل کنید که : + منوی کشویی سال، بر اساس داده‌های ماشین‌ها ساخته شود. + داده‌های ماشین شامل سال ساخت است. + سال‌ها به‌صورت نزولی مرتب شوند   ۵. تابع `applyFilters` را طوری کامل کنید که: + بر اساس محتوای سرچ‌شده یا سال انتخاب‌شده یا ترکیب هر دو، محتوای تیبل را فیلتر کند. ```js searchInput.addEventListener("input"); ``` + ادامه این ایونت را به‌گونه‌ای بنویسید که **۲.۵ ثانیه پس از توقف تایپ کاربر**، عملیات فیلتر انجام و تیبل آپدیت شود. 6. این خط را مشاهده کنید : ```js yearFilter.addEventListener("change"); ``` + ادامه این ایونت را به‌گونه‌ای بنویسید که **۱ ثانیه پس از انتخاب سال**، عملیات فیلتر انجام و تیبل آپدیت شود. # نکات ۱. هر زمان که کاربر شروع به تایپ کرد یا سالی را انتخاب نمود، **فارغ از بازه‌های زمانی**، باید فوراً **اسپینر لودینگ** با استفاده از تابع `showSpinner` نمایش داده شود. ۲. بازه‌های زمانی ذکرشده **حتماً باید رعایت شوند**. در غیر این صورت، هدف برنامه محقق نخواهد شد. ۳. تغییرات فیلترها فقط باید در **بدنهٔ تیبل** اعمال شوند. # آنچه باید آپلود کنید فایلی که آپلود خواهید کرد باید دارای فرمت `.zip` باشد و دارای ساختار زیر باشد: ``` answer/ └─ main.js ``` موفق باشید 🌟

حل سؤال در بانک سؤالات