JavaScript

• DOM Manipulation
• Event Handling
• Array Methods (forEach, filter, map, ...)
• Async/Await
• Promise
• Fetch API
• Storage Management (cookie, localStorage, ...)

شرکت Mockstar به تازگی با توجه به آمارهایی که از بازیکنان جمع‌آوری کرده، متوجه شده ‌است که در طی چند ماه گذشته، تعداد بازیکنان ایرانی روبه‌رشد بوده و به‌شدت زیاد شده است؛ بنابراین تصمیم گرفته است تا از زبان فارسی در محصولات خود پشتیبانی کند. حال از پمبه خواسته شده است تا این کار را برای سایت معرفی بازی‌ها انجام دهد.

این نکته را در نظر بگیرید که زمانی که کاربر دوباره وارد صفحه می‌شود، باید زبان سایت و بازی‌ای که آخرین بار مشاهده کرده، بارگذاری شود. مدیر پمبه از او خواسته است که در کد خود فقط از localStorage برای ذخیره‌سازی اطلاعات کاربران استفاده کند.

توضیحات سوال

می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، این فیلم را مشاهده کنید.

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

initial-project-05.zip
├── data
│   └── games.json
├── fonts
│   ├── shabnam.woff
│   └── shabnam-bold.woff
├── icons
│   └── languages.svg
├── images
│   ├── dota2.jpg
│   ├── god-of-war.jpg
│   ├── horizon.jpg
│   └── rdr2.jpg
├── languages
│   ├── en.json
│   └── fa.json
├── dynamic.js
├── index.html
└── static.css

خواسته‌های مسئله

• استفاده از اطلاعات فایل data/games.json برای تغییر نام و عکس بازی‌ها
• استفاده از اطلاعات فایل data/games.json برای تغییر رنگ دکمۀ موجود در nav
• استفاده از اطلاعات فایل‌های موجود در پوشۀ languages برای تغییر زبان سایت
• افزودن صفات langو dir به المان html، متناسب با زبان سایت
• مشخص‌کردن شمارۀ بازی فعلی با استفاده از کلاس active

نکات

• شما تنها مجاز به تغییر در فایل dynamic.js هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود.
• توجه کنید که داوری خودکار بر مبنای ساختار فایل index.html انجام می‌شود.
• برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.

[your-zip-file-name].zip
└── dynamic.js