CSS

• Pseudo Selectors (:hover, :focus, ...)
• Font Management

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

امروز، روز مصاحبه است اما پمبه از شدت هیجان، قادر به حل سوال نیست؛ بنابراین از شما می‌خواهد به او کمک کنید.

توضیحات سوال🔗

پروژه اولیه🔗

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

initial-project-01.zip
├── dynamic.css
├── index.html
└── static.css

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

نکات🔗

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

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

CSS

• Flexbox Layout

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

حال از پمبه خواسته شده، کدهای قبلی نعناع را بازخوانی و آن‌هایی که نادرست هستند را پاک و به شکل درست پیاده‌سازی کند.

این نکته را در نظر بگیرید که دلیل اصلی اخراج نعناع از شرکت، استفادۀ زیاد از margin و padding بود. بنابراین پمبه تصمیم گرفت که به‌هیچ‌وجه از margin استفاده نکند و حداکثر یک بار از padding استفاده نماید. همچنین مدیر پمبه از او خواسته است که در کد خود حتماً از flexbox برای چیدمان المان‌های مختلف استفاده کند.

توضیحات سوال🔗

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

پروژه اولیه🔗

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

initial-project-02.zip
├── icons
│   └── access.svg
│   └── authentication.svg
│   └── bug.svg
│   └── financial.svg
│   └── hardware.svg
│   └── problem.svg
│   └── work.svg
├── dynamic.css
├── index.html
└── static.css

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

• حذف کدهای نادرست قبلی
• استفاده از flexbox برای ایجاد چیدمان و فاصله بین المان‌ها
• جلوگیری از خروج المان‌های داخل flexbox به خارج از صفحه
• افزایش عرض المان‌ها، در صورت وجود فضای کافی
• کاهش عرض المان‌ها، در صورت وجود نداشتن فضای کافی
• حذف Underline از لینک‌ها

نکات🔗

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

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

HTML

• Form Validation
• Input Types (password, checkbox, ...)
• Input Attributes (value, min, max, ...)

CSS

• Flexbox Layout
• Pseudo Selectors (:hover, :focus, ...)
• Font Management

برای استفاده از خدمات شرکت Mockstar، باید در سایت آن عضو شد و از پمبه خواسته شده است تا طرح جدید صفحات ورود و ثبت‌نام را پیاده‌سازی کند.

پمبه برای محک‌زدن توانایی‌هایش می‌خواهد اعتبارسنجی ورودی‌‌های کاربر را بدون استفاده از JavaScript انجام دهد.

توضیحات سوال🔗

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

پروژه اولیه🔗

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

initial-project-03.zip
├── icons
│   ├── email.svg
│   ├── password.svg
│   ├── phone.svg
│   └── user.svg
├── illustrations
│   └── gangster.svg
├── images
│   └── rdr2.webp
├── dynamic.css
├── index.html
└── static.css

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

• اعتبار‌سنجی ورودی‌های کاربر تنها با استفاده از html
• نام کاربری باید از جنس text باشد
• نام کاربری باید حداقل ۳ و حداکثر ۳۲ کاراکتر داشته‌ باشد
• نام کاربری فقط می‌تواند حاوی حروف کوچک و بزرگ انگلیسی‌ و اعداد باشد
• ایمیل باید از جنس email باشد
• تلفن باید از جنس tel باشد
• تلفن با یکی از عبارات زیر شروع شود و در ادامه حاوی ۹ رقم باشد
  • +989
  • 00989
  • 09
• رمز عبور باید از جنس password باشد
• رمز عبور باید حداقل ۸ و حداکثر ۳۲ کاراکتر داشته‌ باشد
• رمز عبور باید حداقل حاوی یک حرف کوچک انگلیسی، یک حرف بزرگ انگلیسی، یک رقم و یکی از کاراکترهای !@#$%^&* باشد
• دکمه‌ها باید از جنس submit باشند
• جابه‌جایی smooth بین بخش‌های register و login

نکات🔗

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

[your-zip-file-name].zip
├── dynamic.css
└── index.html

CSS

• Grid Layout
• Pseudo Selectors (:hover, :focus, ...)
• Pseudo Elements (::before, ::after, ...)
• Font Management

یکی از قابلیت‌هایی که شرکت Mockstar دارد این است که می‌تواند با استفاده از الگوریتم‌های پیشرفتۀ هوش‌ مصنوعی، بازی‌هایی را که ممکن است برای بازیکنان جذاب باشد، به آن‌ها پیشنهاد دهد.

برای این امر، نیاز است پس از آنکه کاربر در سامانه ثبت‌نام کرد، بازی‌های مورد علاقۀ خود را انتخاب کند. بنابراین از پمبه خواسته شده است تا این قسمت را پیاده‌سازی نماید.

مدیر پمبه از او خواسته است که در کد خود حتماً از grid برای چیدمان المان‌های مختلف استفاده کند. همچنین پمبه به تازگی متوجه شده که چیدمان‌های چگال (dense) بسیار کاربردی هستند و قصد دارد در پروژه، آن‌ها را امتحان کند.

توضیحات سوال🔗

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

پروژه اولیه🔗

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

initial-project-04.zip
├── images
│   ├── large
│   │   ├── cod.jpg
│   │   ├── elden-ring.webp
│   │   ├── forza.webp
│   │   ├── god-of-war.jpg
│   │   ├── hellblade.jpg
│   │   ├── rainbow.webp
│   │   ├── rdr2.jpg
│   │   ├── satisfactory.png
│   │   └── spider-man.webp
│   └── small
│       ├── ac.jpg
│       ├── bioshock.jpg
│       ├── blood-born.jpg
│       ├── dark-souls.webp
│       ├── dota2.jpg
│       ├── fortnite.jpg
│       ├── horizon.jpg
│       ├── house-flipper.jpg
│       ├── mortal-kombat.jpg
│       ├── witcher.jpg
│       ├── wow.jpeg
│       └── wow2.jpg
├── dynamic.css
├── index.html
└── static.css

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

• استفاده از grid برای ایجاد چیدمان و فاصله بین المان‌ها
• چیدمان صحیح المان‌ها در ابعاد مختلف صفحه نمایش
• چگال‌بودن چیدمان المان‌ها
• اشغال فضای 1x1 توسط المان‌هایی که دارای کلاس large نیستند
• اشغال فضای 2x2 توسط المان‌هایی که دارای کلاس large هستند
• عدم نمایش checkbox پیش‌فرض مرورگر
• نمایش checkbox شخصی‌سازی‌شده
• بزرگ‌شدن مقیاس تصویر در صورتی که ماوس بر روی آن برود
• بزرگ‌شدن مقیاس تصویر در صورتی که checkbox فعال باشد

نکات🔗

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

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

JavaScript

• DOM Manipulation
• Event Handling
• String Manipulation

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

این نکته را در نظر بگیرید که کیبوردهای Mockstar، در حال حاضر از کلید‌های Windows و Fn و Context پشتیبانی نمی‌کنند؛ بنابراین نیازی نیست که پمبه برای تست این کلید‌ها کدی بنویسد.

توضیحات سوال🔗

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

پروژه اولیه🔗

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

initial-project-06.zip
├── dynamic.js
├── index.html
└── static.css

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

• تا زمانی که کاربر کلیدی را نگه‌داشته است (keydown)، المان متناظر با آن کلید باید کلاس key--held را داشته باشد
• پس از اینکه کاربر کلیدی را رها کرد (keyup)، المان متناظر با آن کلید باید کلاس key--selected را داشته باشد

نکات🔗

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

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

JavaScript

• DOM Manipulation
• Event Handling
• Web Animation API

با گذر زمان و رشد پمبه در شرکت، مدیر پمبه می‌خواهد به او ترفیع بدهد؛ بنابراین از این به‌بعد، اکثر کارهایی که از پمبه خواسته می‌شود، به طور مستقیم مربوط به بازی‌سازی است. به‌عنوان اولین کاری که پمبه باید انجام دهد، از او خواسته شده است تا قسمتی از یک بازی تیراندازی را پیاده‌سازی نماید.

توضیحات سوال🔗

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

پروژه اولیه🔗

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

initial-project-07.zip
├── illustrations
│   ├── bullet.svg
│   ├── crosshair.svg
│   └── pistol.svg
├── dynamic.js
├── index.html
└── static.css

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

• با جا‌به‌جایی ماوس، crosshair باید با استفاده از متغیرهایی که داخل static.css وجود دارند، جا‌به‌جا شود
• همواره زاویۀ pistol باید به گونه‌ای باشد که مگسک آن به وسط crosshair اشاره کند
• چرخش pistol باید نسبت به وسط آن صورت بگیرد
• در صورتی که فاصلۀ ماوس از وسط صفحه کمتر از 240px باشد، باید به pistol کلاس disabled داده شود و کاربر نباید بتواند شلیک کند
• در صورتی که کاربر بر روی صفحه کلیک کند، باید یک img با کلاس bullet و src مساوی‌ با عبارت زیر به body اضافه شود

  ./illustrations/bullet.svg

  Plain text

  Copy
• در لحظۀ ساخت گلوله، موقعیت گوشۀ بالا-چپ آن باید با توجه به spawn-point در نظر گرفته شود
• گلوله باید با توجه به موقعیت ماوس، مسیر 1000px را در یک ثانیه طی نماید و پس از آن از صفحه حذف شود

نکات🔗

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

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

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