**CSS** - Pseudo Selectors (:hover, :focus, ...) - Font Management --- روزی روزگاری، در سرزمین پریان، دانشجویی به نام پمبه زندگی می‌کرد! یک روز که پمبه درحال چک‌کردن ایمیل‌هایش بود، متوجه شد که شرکت Mockstar ایمیلی به او ارسال کرده است و در آن از او خواسته‌اند که برای مصاحبه به آنجا برود. امروز، روز مصاحبه است اما پمبه از شدت هیجان، قادر به حل سوال نیست؛ بنابراین از شما می‌خواهد به او کمک کنید. ## توضیحات سوال <details class="green"> <summary>تصویر خروجی نمونه</summary>  </details> ## پروژه اولیه پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/139929) دانلود کنید. <details class="blue"> <summary>ساختار فایل‌ها</summary> ``` initial-project-01.zip ├── dynamic.css ├── index.html └── static.css ``` </details> <details class="pink"> <summary>راه‌اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> ## خواسته‌های مسئله | مقدار | ویژگی | وضعیت | المان | | :--------------------------------: | :----------: | :---: | :---: | | `Merienda` | فونت | \- | html | | `--color--body-background` | رنگ پس‌زمینه | \- | body | | `--color--body-foreground` | رنگ | \- | body | | وسط صفحه | موقعیت | \- | h1 | | `4.8rem` | اندازه فونت | \- | h1 | | `transparent` | رنگ | \- | .heart | | `--color--heart-foreground--hover` | رنگ | hover | .heart | ## نکات - شما تنها مجاز به تغییر در فایل `dynamic.css` هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود. - توجه کنید که داوری خودکار بر مبنای ساختار فایل `index.html` انجام می‌شود. - برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید. ``` [your-zip-file-name].zip └── dynamic.css ```

**CSS** - Flexbox Layout --- پمبه در مصاحبه نمرۀ قبولی آورد و در شرکت اسخدام شد. چند وقت پیش، شرکت تصمیم گرفته بود نعناع را که قبل از پمبه آنجا کار می‌کرد، اخراج کند. علت این قضیه، آن بود که نعناع نمی‌توانست طرح‌های مورد نظر را به درستی پیاده‌سازی کند. حال از پمبه خواسته شده، کدهای قبلی نعناع را بازخوانی و آن‌هایی که نادرست هستند را پاک و به شکل درست پیاده‌سازی کند. این نکته را در نظر بگیرید که دلیل اصلی اخراج نعناع از شرکت، استفادۀ زیاد از `margin` و `padding` بود. بنابراین پمبه تصمیم گرفت که **به‌هیچ‌وجه** از `margin` استفاده نکند و **حداکثر یک بار** از `padding` استفاده نماید. همچنین مدیر پمبه از او خواسته است که در کد خود حتماً از `flexbox` برای چیدمان المان‌های مختلف استفاده کند. ## توضیحات سوال <details class="green"> <summary>تصویر خروجی نمونه</summary>  </details> می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، [این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-02.mp4) را مشاهده کنید. ## پروژه اولیه پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/139930) دانلود کنید. <details class="blue"> <summary>ساختار فایل‌ها</summary> ``` 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 ``` </details> <details class="pink"> <summary>راه‌اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> ## خواسته‌های مسئله - حذف کدهای نادرست قبلی - استفاده از flexbox برای ایجاد چیدمان و فاصله بین المان‌ها - جلوگیری از خروج المان‌های داخل flexbox به خارج از صفحه - افزایش عرض المان‌ها، در صورت وجود فضای کافی - کاهش عرض المان‌ها، در صورت وجود نداشتن فضای کافی - حذف Underline از لینک‌ها | مقدار | ویژگی | وضعیت | المان | | :-----------------------------------: | :---------------: | :---: | :---: | | `1rem` | فاصله بین فرزندان | \- | nav | | `--color--nav-link-background` | رنگ پس‌زمینه | \- | a | | `--color--nav-link-background--hover` | رنگ پس‌زمینه | hover | a | | `--color--body-foreground` | رنگ | \- | a | | `0.5rem` | فاصله بین فرزندان | \- | a | | `1rem` | Padding | \- | a | | `0.2rem` | گردی گوشه‌ها | \- | a | ## نکات - شما تنها مجاز به تغییر در فایل `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` انجام دهد. ## توضیحات سوال <details class="green"> <summary>تصاویر خروجی نمونه</summary> صفحه register:  صفحه login:  </details> می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، [این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-03.mp4) را مشاهده کنید. ## پروژه اولیه پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/140012) دانلود کنید. <details class="blue"> <summary>ساختار فایل‌ها</summary> ``` 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 ``` </details> <details class="pink"> <summary>راه‌اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> ## خواسته‌های مسئله - اعتبار‌سنجی ورودی‌های کاربر تنها با استفاده از `html` - نام کاربری باید از جنس `text` باشد - نام کاربری باید حداقل ۳ و حداکثر ۳۲ کاراکتر داشته‌ باشد - نام کاربری فقط می‌تواند حاوی حروف کوچک و بزرگ انگلیسی‌ و اعداد باشد - ایمیل باید از جنس `email` باشد - تلفن باید از جنس `tel` باشد - تلفن با یکی از عبارات زیر شروع شود و در ادامه حاوی ۹ رقم باشد - `+989` - `00989` - `09` - رمز عبور باید از جنس `password` باشد - رمز عبور باید حداقل ۸ و حداکثر ۳۲ کاراکتر داشته‌ باشد - رمز عبور باید حداقل حاوی یک حرف کوچک انگلیسی، یک حرف بزرگ انگلیسی، یک رقم و یکی از کاراکترهای `!@#$%^&*` باشد - دکمه‌ها باید از جنس `submit` باشند - جابه‌جایی `smooth` بین بخش‌های `register` و `login` | مقدار | ویژگی | وضعیت | المان | | :---------------------------------------: | :---------------: | :-----: | :-----------: | | `hidden` | Overflow | \- | main | | `50rem` | عرض | \- | main | | `0.2rem` | گردی گوشه‌ها | \- | main | | `60%` | عرض | \- | form | | `2rem` | Padding | \- | form | | `1rem` | فاصله بین فرزندان | \- | form | | `0.8rem` | اندازه فونت | \- | label > span | | `1.2rem` | عرض | \- | label > img | | `--color--form-input-background` | رنگ پس‌زمینه | \- | label > input | | `--color--form-input-background--invalid` | رنگ پس‌زمینه | invalid | label > input | | `--color--form-button-background` | رنگ پس‌زمینه | \- | button | | `--color--form-button-foreground` | رنگ | \- | button | | `--color--form-button-background--hover` | رنگ پس‌زمینه | hover | button | | `--color--form-paragraph-foreground` | رنگ | \- | p | | `--color--form-link-foreground` | رنگ | \- | a | | `40%` | عرض | \- | section | | `2rem` | Padding | \- | section | | `16rem` | عرض | \- | section > img | ## نکات - شما تنها مجاز به تغییر در فایل‌های `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`) بسیار کاربردی هستند و قصد دارد در پروژه، آن‌ها را امتحان کند. ## توضیحات سوال <details class="green"> <summary>تصاویر خروجی نمونه</summary> عرض `1920px`:  عرض `1366px`:  عرض `800px`:  </details> می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، [این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-04.mp4) را مشاهده کنید. ## پروژه اولیه پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/139931) دانلود کنید. <details class="blue"> <summary>ساختار فایل‌ها</summary> ``` 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 ``` </details> <details class="pink"> <summary>راه‌اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> ## خواسته‌های مسئله - استفاده از `grid` برای ایجاد چیدمان و فاصله بین المان‌ها - چیدمان صحیح المان‌ها در ابعاد مختلف صفحه نمایش - چگال‌بودن چیدمان المان‌ها - اشغال فضای `1x1` توسط المان‌هایی که دارای کلاس `large` **نیستند** - اشغال فضای `2x2` توسط المان‌هایی که دارای کلاس `large` **هستند** - عدم نمایش `checkbox` پیش‌فرض مرورگر - نمایش `checkbox` شخصی‌سازی‌شده - بزرگ‌شدن مقیاس تصویر در صورتی که ماوس بر روی آن برود - بزرگ‌شدن مقیاس تصویر در صورتی که `checkbox` فعال باشد | مقدار | ویژگی | وضعیت | المان | | :-----------------------------: | :---------------: | :-----: | :-------: | | `1rem` | فاصله بین فرزندان | \- | ul | | `1` | مقیاس | \- | img | | `1.025` | مقیاس | hover | img | | `1.025` | مقیاس | checked | img | | `✓` | محتوا | \- | checkmark | | `--color--checkmark-background` | رنگ پس‌زمینه | \- | checkmark | | `--color--checkmark-foreground` | رنگ | \- | checkmark | | `4.8rem` | اندازه فونت | \- | checkmark | | `700` | وزن فونت | \- | checkmark | | وسط المان | موقعیت | \- | checkmark | ## نکات - شما تنها مجاز به تغییر در فایل `dynamic.css` هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود. - توجه کنید که داوری خودکار بر مبنای ساختار فایل `index.html` انجام می‌شود. - برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید. ``` [your-zip-file-name].zip └── dynamic.css ```

**JavaScript** - DOM Manipulation - Event Handling - String Manipulation --- شرکت Mockstar علاوه بر فروش بازی، تجهیزات جانبی مانند ماوس و کیبورد را نیز عرضه می‌کند؛ همچنین سامانه‌ای برای تست صحت این اقلام دارد. حال از پمبه خواسته شده است که قسمت تست کیبورد این سامانه را پیاده‌سازی کند. این نکته را در نظر بگیرید که کیبوردهای Mockstar، در حال حاضر از کلید‌های `Windows` و `Fn` و `Context` پشتیبانی نمی‌کنند؛ بنابراین نیازی نیست که پمبه برای تست این کلید‌ها کدی بنویسد. ## توضیحات سوال <details class="green"> <summary>تصویر خروجی نمونه</summary>  </details> می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، [این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-05.mp4) را مشاهده کنید. ## پروژه اولیه پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/139933) دانلود کنید. <details class="blue"> <summary>ساختار فایل‌ها</summary> ``` initial-project-06.zip ├── dynamic.js ├── index.html └── static.css ``` </details> <details class="pink"> <summary>راه‌اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> ## خواسته‌های مسئله - تا زمانی که کاربر کلیدی را نگه‌داشته است (`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 --- با گذر زمان و رشد پمبه در شرکت، مدیر پمبه می‌خواهد به او ترفیع بدهد؛ بنابراین از این به‌بعد، اکثر کارهایی که از پمبه خواسته می‌شود، به طور مستقیم مربوط به بازی‌سازی است. به‌عنوان اولین کاری که پمبه باید انجام دهد، از او خواسته شده است تا قسمتی از یک بازی تیراندازی را پیاده‌سازی نماید. ## توضیحات سوال <details class="green"> <summary>تصویر خروجی نمونه</summary>  </details> می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، [این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-06.mp4) را مشاهده کنید. ## پروژه اولیه پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/140013) دانلود کنید. <details class="blue"> <summary>ساختار فایل‌ها</summary> ``` initial-project-07.zip ├── illustrations │ ├── bullet.svg │ ├── crosshair.svg │ └── pistol.svg ├── dynamic.js ├── index.html └── static.css ``` </details> <details class="pink"> <summary>راه‌اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> ## خواسته‌های مسئله - با جا‌به‌جایی ماوس، `crosshair` باید با استفاده از متغیرهایی که داخل `static.css` وجود دارند، جا‌به‌جا شود - همواره زاویۀ `pistol` باید به گونه‌ای باشد که مگسک آن به وسط `crosshair` اشاره کند - چرخش `pistol` باید نسبت به وسط آن صورت بگیرد - در صورتی که فاصلۀ ماوس از وسط صفحه کمتر از `240px` باشد، باید به `pistol` کلاس `disabled` داده شود و کاربر نباید بتواند شلیک کند - در صورتی که کاربر بر روی صفحه کلیک کند، باید یک `img` با کلاس `bullet` و `src` مساوی‌ با عبارت زیر به `body` اضافه شود ``` ./illustrations/bullet.svg ``` - در لحظۀ ساخت گلوله، موقعیت گوشۀ بالا-چپ آن باید با توجه به `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` برای ذخیره‌سازی اطلاعات کاربران استفاده کند. ## توضیحات سوال <details class="green"> <summary>تصویر خروجی نمونه</summary>  </details> می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، [این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-07.mp4) را مشاهده کنید. ## پروژه اولیه پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/139932) دانلود کنید. <details class="blue"> <summary>ساختار فایل‌ها</summary> ``` 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 ``` </details> <details class="pink"> <summary>راه‌اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> ## خواسته‌های مسئله - استفاده از اطلاعات فایل `data/games.json` برای تغییر نام و عکس بازی‌ها - استفاده از اطلاعات فایل `data/games.json` برای تغییر رنگ دکمۀ موجود در `nav` - استفاده از اطلاعات فایل‌های موجود در پوشۀ `languages` برای تغییر زبان سایت - افزودن صفات `lang`و `dir` به المان `html`، متناسب با زبان سایت - مشخص‌کردن شمارۀ بازی فعلی با استفاده از کلاس `active` ## نکات - شما تنها مجاز به تغییر در فایل `dynamic.js` هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود. - توجه کنید که داوری خودکار بر مبنای ساختار فایل `index.html` انجام می‌شود. - برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید. ``` [your-zip-file-name].zip └── dynamic.js ```