مهارت‌های لازم:

• آشنایی با Html و Css

در این سوال قصد داریم صفحه ورود به سایت بله را با استفاده از Html وCss پیاده سازی کنیم.ظاهر کلی صفحه به شکل زیر است:

پروژه اولیه🔗

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

bale
├── assets
│   ├── fonts
│   │   └── IRANSansWeb.woff2
│   └── images
│       ├── favicon.png
│       ├── flags.png
│       └── home_logo.png
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── integration
│   │   └── sample.spec.js
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── cypress.json
├── index.html
├── package.json
└── styles.css

جزئیات🔗

با در نظر گرفتن نکات زیر، عناصر Html و خصوصیات Css را به فایل های پروژه اضافه کنید:

• لوگو بله را در یک عنصر img در سایت نمایش دهید. این عنصر باید کلاس logo را داشته باشد. در صورتی که لوگو بله با موفقیت لود نشود، متن Bale را به جای عکس نمایش دهید.
• در یک عنصر h2 متنِ "به پیام رسان بله خوش آمدید" را نمایش دهید.
• همچین به عنصر body ویژگی تصویر پس زمینه (background-image) را به گونه ای مقدار دهی کنید که یک linear-gradient با رنگ های #2d2c72 و #4ceeb5 باشد.

نکات🔗

• رنگ های آبی و سبز آبی به ترتیب #2d2c72 و #4ceeb5 هستند.
• تغییرات را تنها در فایل های index.html و styles.css اعمال کنید. تغییرات در بقیه فایل ها نادیده گرفته می شوند.
• در صورتی که می خواهید یک فایل index.html را ارسال کنید تغییرات Css را در فایل index.html ایجاد کنید.
• توجه کنید که داوری خودکار بر مبنای نام کلاس های انجام می‌شود.
• پروژه را با ساختار زیر ارسال کنید.

[your-zip-file-name].zip
|── index.html
└── styles.css

مهارت‌های لازم:

• آشنایی با JS

در این سوال قصد داریم بخشی از بازی نقطه خط را با استفاده از js و بدون استفاده از کتابخانه جانبی پیاده سازی کنیم.ظاهر کلی برنامه بدین صورت است:

پروژه اولیه🔗

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

dots-and-boxes-master
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── integration
│   │   └── sample.spec.js
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── .qsampletest
├── cypress.json
├── index.html
├── index.js
├── package.json
└── style.css

جزئیات🔗

ظاهر این سوال به شکل کامل پیاده سازی شده است. شما باید عملکرد های زیر را با استفاده از جاوا اسکرپیت به بازی اضافه کنید:

• با کلیک کردن بر روی هر کدام از خط ها، با در نظر گرفتن نوبت بازیکن ها، رنگ خط مورد نظر به آبی یا قرمز تغییر پیدا می کند.
• وضیعت نوبت بازیکن ها را یک عنصر با شناسه game_status نمایش دهید.
  • در صورت اینکه نوبت بازیکن قرمز باشد، متن مورد نظر باید Player red's turn و در صورت اینکه نوبت بازیکن آبی باشد متن مورد نظر باید Player blue's turn باشد.
• همچنین در صورت اینکه نشانگر ماوس رو یکی از خط ها برده شود(رویداد mouseenter)، رنگ خط باید مطابق با نوبت بازیکن ها تغییر کند و هنگامی که نشانگر ماوس از روی خط ها به بیرون برده شود(رویداد mouseleave) رنگ خطوط به حالت عادی بر میگردد.

توضیحات فایل index.html و style.css :

• هر کدام از خطوط بازی به عنوان یک عنصر div در نظر گرفته شده اند. خطوط بازی یا horizontal (افقی) هستند یا vertical(عمودی) هستند. برای خطوط افقی کلاس horizontal_line در نظر گرفته شده است و برای خطوط عمودی کلاس vertical_line در نظر گرفته شده است.
• در فایل style.css نیز استایل دهی های لازم جهت قرار گیری المان ها آورده شده است.
• شما نیازی به ایجاد تغییر در فایل های بالا ندارید.

نکات🔗

• رنگ های آبی و قرمز به ترتیب #87ceeb و #fa8072 هستند.
• همچنین کلاس های مربوط به این رنگ ها blue و red هستند.
• تغییرات را تنها در فایل index.js اعمال کنید. تغییرات در بقیه فایل ها نادیده گرفته می شوند.
• توجه کنید که داوری خودکار بر مبنای نام کلاس های انجام می‌شود.
• پروژه را با ساختار زیر ارسال کنید.

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

سطح: متوسط

امتیاز: ۲۰۰

مهارت‌های لازم:

• آشنایی با ReactJS

ظاهر کلی برنامه بدین صورت است:

پروژه اولیه🔗

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

input-validation
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── __tests__
│   │   └── sample.test.js
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── input.js
│   └── validators.js
├── package-lock.json
└── package.json

جزئیات🔗

در این سوال میخواهیم برای کامپوننت Input که ساختیم validation اضافه کنیم. کامپوننت Input را طوری تغییر دهید که با توجه property هایی که به این کامپوننت‌ داده میشود، تگ input مورد نظر را ساخته و ولیدیشن ارور‌ها را نمایش دهد. لیستی از validator ها به این کامپوننت داده میشود که با تابع validate میتوان درست بودن هر مقداری را با توجه به validator ها به دست آورد.

• درهنگام اولین focus روی input اروری نمایش داده نمیشود تا focus از آن برداشته شود اگر اروری وجود داشت نمایش میدهد و از دفعات بعد در هنگام تغییر اگر به اروری برخورد کرد همان لحظه نمایش دهد.
• هنگامی که input معتبر نیست باید کلاس form-input--invalid به div با کلاس form-input اضافه شود و ارور در تگ p بعد از input نمایش داده شود.
• تگ‌ label باید htmlFor به آیدی تگ input داشته باشد.

نکات🔗

• شما تنها مجاز به اعمال تغییرات در فایل input.js هستید.
• پس از اعمال تغییرات، پروژه را zip کرده و ارسال کنید.دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.

ظاهر کلی برنامه بدین صورت است:

پروژه اولیه🔗

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

quera_chat
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── server
│   ├── constants.js
│   └── server.js
├── src
│   ├── __tests__
│   │   └── sample.test.js
│   ├── assets
│   │   ├── font
│   │   │   └── Vazir.ttf
│   │   └── images
│   │       ├── whitenoise-1.png
│   │       └── whitenoise-2.png
│   ├── components
│   │   ├── Message
│   │   │   ├── Message.css
│   │   │   └── Message.js
│   │   ├── MessageForm
│   │   │   ├── MessageForm.css
│   │   │   └── MessageForm.js
│   │   └── MessageList
│   │       ├── MessageList.css
│   │       └── MessageList.js
│   ├── containers
│   │   ├── App.css
│   │   └── App.js
│   ├── index.css
│   ├── index.js
│   └── setupTests.js
├── package.json
└── yarn.lock

جزئیات🔗

در این سوال قصد داریم همانند تصویر بالا، یک چت را شبیه‌سازی کنیم. پس از اجرای دستور‌های نوشته شده در قسمت «راه‌اندازی پروژه» می‌توانید به کمک متد GET اقدام به دریافت فایل مورد نظر از آدرس زیر کنید:

http://localhost:3001/message/[text]

برای مثال با قرار دادن عبارت سلام به جای [text] می‌توانید پاسخ »سلام خوبی؟» را از سرور دریافت کنید. این سوال و پاسخ‌ها باید مستقیماً از سرور دریافت شود و پیاده‌سازی آن برعهده شما نیست، بلکه تنها کافی است به کمک ریکوئست بالا، پاسخ مربوط به متن پیام را دریافت کرده و سپس آن را نمایش دهید.

علاوه بر آن، شما باید از ارسال پیام خالی جلوگیری کنید، به این صورت که تنها پیام‌هایی ارسال می‌شوند و در لیست پیام‌های شما (که قرمز رنگ است) نشان داده می‌شوند که پیام خالی نیستند.

مورد دیگری که در حل سوال سنجیده می‌شود، focus بودن المان <input/> در هنگام رندر شدن صفحه است. یعنی باید به محض لود شدن صفحه -بدون آن که روی باکس نوشتن پیام کلیک کنیم- پس از تایپ کردن، حروف در اینپوت نیز تایپ شوند. (در تصویر سوال به نشانگر ابتدای خط پیام خود را وارد کنید دقت کنید، از ابتدا در وضعیت focus قرار گرفته است)

همچنین در نظر داشته باشید که بعد از ارسال شدن پیام، متن نوشته شده داخل اینپوت هم باید کاملا پاک بشه و برای نوشتن پیام بعدی احتیاجی به دلیت کردن نداشته باشیم.

نکات:

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

نکات🔗

• شما تنها مجاز به اعمال تغییرات در فایل‌های زیر هستید.

/src/containers/App.js

/src/components/MessageForm/MessageForm.js

• لطفا عبارت data-testid را در المان‌های HTML پروژه پاک نکنید، داوری خودکار به کمک آن صورت می‌گیرد.

• پس از اعمال تغییرات، پروژه را zip کرده و ارسال کنید. دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.

پروژه اولیه🔗

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

music-player
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   ├── musics
│   │   │   ├── 1.mp3
│   │   │   ├── 2.mp3
│   │   │   ├── 3.mp3
│   │   │   └── 4.mp3
│   │   ├── next.svg
│   │   ├── pause.svg
│   │   ├── play.svg
│   │   └── prev.svg
│   ├── components
│   │   ├── Button.jsx
│   │   ├── Container.jsx
│   │   ├── MusicTitle.jsx
│   │   └── Progress.jsx
│   ├── containers
│   │   └── MusicPlayer.jsx
│   ├── data
│   │   └── Musics.js
│   ├── models
│   │   └── Audio.js
│   ├── styles
│   │   └── index.css
│   └── index.js
├── README.md
├── package.json
└── yarn.lock

جزئیات🔗

در این سوال ما قصد داریم یک موزیک پلیر ساده طراحی کنیم. ظاهر کلی برنامه بدین صورت است:

در فایل Musics.js موجود در پوشه data لیستی از موزیک ها قرار داده شده است. شکل ایتم های موجود در این فایل به شکل زیر است:

{
  name: string,
  path: string
}

که name نام موزیک و path آدرس فایل آن است که باید توسط مرورگر پخش شود. شما باید برنامه ای طراحی کنید که این موزیک ها را پخش نماید.

مواردی که باید در این سوال رعایت کنید:🔗

• نام موزیک و میزان پخش شده از آن باید مطابق با تصویر بالا نمایش داده شود.
• همچنین این برنامه باید قابلیت پخش و مکث موزیک و رفتن به موزیک قبلی و بعدی را داشته باشد.
• درصورتی که یک موزیک تمام شد موزیک بعدی باید به صورت خودکار پخش شود.
• دکمه موزیک بعدی باید درصورتی که موزیک فعلی آخرین موزیک است در حالت disabled باشد و برای دکمه قبلی اگر موزیک فعلی اولین موزیک بود باید این اتفاق بیافتد.

نکات

• کامپوننت های مورد نیاز در فایل MusicPlayer.jsx آورده شده است.
• props های مورد نیاز کاپموننت های استفاده شده را به آن ها ارسال کنید.
• Object مورد نیاز برای پخش موزیک در فایل Audio.js در پوشه models export شده است.شما باید برای پخش موزیک از این Object استفاده کنید.

نکات🔗

• شما تنها مجاز به اعمال تغییر در فایل MusicPlayer.jsx هستید. پس از اعمال تغییرات، پروژه را zip کرده و ارسال کنید.
• دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.