**مهارت‌های لازم:**
+ آشنایی با `HTML` و `CSS`
---
در گام نخست این مسابقه شما باید لوگوی کداستار را در وسط صفحه قرار دهید.
# توضیحات سوال
برای این کار ما به شما فایل `HTML` و عکس مورد نظر را می‌دهیم. شما باید در فایل `style.css` کدی بزنید که تصویر موجود در فایل `HTML` در مرکز صفحه قرار بگیرد. همچنین پس‌زمینۀ کل بدنه سایت باید یک تصویر گردینت (_Gradient_) باشد.
می‌توانید خروجی نمونه را در این تصویر مشاهده کنید:
# پروژه اولیه
پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/28171/download_problem_initial_project/93641) دانلود کنید.
<details class="blue">
<summary>ساختار فایل‌های این پروژه به این صورت است</summary>
```
initialProject01.zip
├── images
│ └── logo.png
├── index.html
├── main.css
└── style.css
```
</details>
<details class="pink">
<summary>راه اندازی پروژه</summary>
+ ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
+ سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
# راهنمایی
- تصویر گردینت باید به صورت خطی و به سمت پایین راست صفحه باشد.
- رنگ‌های تصویر گردینت از `#f3440e` به `#f02e08` تغییر می‌کند.
- طول (_Width_) تصویر باید `100px` باشد.
**مهارت‌های لازم:**
+ آشنایی با `HTML` و `CSS`
---
ما در ستاره به دنبال ایجاد فروشگاهی برای محصولات‌مان هستیم. در این فروشگاه ۸ محصول برای فروش عرضه می‌شوند که شامل موارد
زیر است:
- محصول A
- محصول B
- محصول C
- محصول D
- محصول E
- محصول F
- محصول G
- محصول H
برای ما بسیار مهم است که کاربران در دستگاه‌ها و نمایشگر‌های مختلف تجربۀ کاربری مناسبی داشته باشند. از همین رو شما باید
به صورت ریسپانیسو (_Responsive_) طراحی کنید.
می‌توانید خروجی نمونه را در این تصویر مشاهده کنید:
تعداد ستون‌ها در عرض‌های مختلف باید به شکل زیر باشد.
عرض صفحه | تعداد ستون
--- | ---
بیشتر از ۱۲۰۰ پیکسل | ۴ ستون
بیشتر از ۸۵۰ پیکسل | ۳ ستون
بیشتر از ۶۵۰ پیکسل | ۲ ستون
در غیر این صورت | ۱ ستون
# پروژه اولیه
پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/28171/download_problem_initial_project/94099) دانلود کنید.
<details class="blue">
<summary>ساختار فایل‌های این پروژه به این صورت است</summary>
```
initialProject02.zip
├── images
│ └── logo.png
├── fonts
│ ├── samim-bold.ttf
│ ├── samim-medium.ttf
│ └── samim.ttf
├── index.html
├── main.css
└── style.css
```
</details>
<details class="pink">
<summary>راه اندازی پروژه</summary>
+ ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
+ سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
# راهنمایی
- پس زمینه کل سایت به رنگ `#fafafa` و پس زمینه هر محصول به رنگ `#1a1a1a` باشد.
- رنگ پس زمینه دکمه موجود بر روی هر محصول `#f02e08` باشد.
- فاصله میان محصولات `20px` باشد.
- انحنای گوشه کاردها `10px` باشد.
- فاصله المان‌های داخلی هر کارت از لبه‌هایش `10px` باشد.
- عرض (_width_) تصویر `100px` باشد.
- حداکثر عرض (_max-width_) تصویر `100%` باشد.
- فاصله عنوان هر محصول تنها از بالا و پایین با تصویر و دکمۀ نمایش`20px` باشد.
- فاصله‌ی عمودی متن دکمه‌ها با حاشیه دکمه‌ها باید `5px` و فاصله افقی آن `15px` باشد.
- خط زیر لینک‌ها نباید نمایان باشد.
- نشانگر ماوس هنگامی که بر روی دکمه‌ها قرار می‌گیرد، باید به علامت اشاره (_Pointer_) تغییر یابد.
- از فونت صمیم که در کنار پروژه برای شما قرار داده شده استفاده کنید و نام خانواده این فونت را 'Samim' قرار دهید.
- رنگ متن عنوان و دکمه نمایش `#fafafa` باشد.
- سایز فونت عنوان `18px` و سایز فونت دکمه نمایش `12px` باشد.
- حداقل عرض دکمه نمایش برابر `100px` باشد.
**مهارت‌های لازم:**
+ آشنایی با `HTML` و `CSS`
---
در این سوال از شما خواسته شده است که با استفاده از CSS لوگوی کداستار را طراحی کنید. این لوگو شامل 5 تگ بسته (_Closing Tag_) است که هر کدام از آن‌ها به مقداری چرخانده شده‌اند.
حال شما باید با استفاده از فایل‌هایی که ما برای شما آماده کرده‌ایم این لوگو را طراحی کنید. دقت داشته باشید به غیر از فایل `style.css` حق تغییر هیچ کدام از فایل‌ها را ندارید.
می‌توانید خروجی نمونه را در این تصویر مشاهده کنید:
# موارد قابل توجه
- برای شما یک عکس کمکی قرار داده شده است شما باید دقیقا همانند این عکس لوگو را طراحی کنید.
- از فونت شبنم که در کنار فایل‌های شما قرار داده شده است برای طراحی استفاده کنید.
# پروژه اولیه
پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/28171/download_problem_initial_project/94214) دانلود کنید.
<details class="blue">
<summary>ساختار فایل‌های این پروژه به این صورت است</summary>
```
initialProject03.zip
├── fonts
│ ├── shabnam-bold.ttf
│ ├── shabnam-light.ttf
│ ├── shabnam-medium.ttf
│ └── shabnam-thin.ttf
├── index.html
├── main.css
├── star-logo.png
├── star-logo-on-quera.png
└── style.css
```
</details>
<details class="pink">
<summary>راه اندازی پروژه</summary>
+ ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
+ سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
# راهنمایی
اعداد زیر اعداد جادوئی هستند از آن‌ها برای طراحی خود استفاده کنید
- `170px`
- `30px`
- `108px`
- `700`
- `-7px`
- `72deg`
- `-90deg`
**مهارت‌های لازم:**
+ آشنایی با `JavaScript`
---
در این سوال از شما می‌خواهیم با تغییر فایل `main.js` در پوشۀ پروژه، کدی بنویسید تا اگر بر روی دکمۀ `Hello, friend!` کلیک شد، عبارت `Hello, Code-Star!` به جای `...` نمایش داده شود.
همچنین با هر بار کلیک بر روی دکمۀ `Change Color` به ترتیب رنگ‌های `#f02e08` و `#0e38a1` به صورت چرخشی به عنوان رنگ پس‌زمینه تعیین شود. به عنوان مثال پس از سه بار کلیک بر روی دکمۀ `Change Color`، رنگ پس‌زمینه به نارنجی تغییر می‌کند.
می‌توانید خروجی نمونه را در این تصویر مشاهده کنید:
# پروژه اولیه
پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/28171/download_problem_initial_project/94215) دانلود کنید.
<details class="blue">
<summary>ساختار فایل‌های این پروژه به این صورت است</summary>
```
initialProject04.zip
├── index.html
├── main.css
└── main.js
```
</details>
<details class="pink">
<summary>راه اندازی پروژه</summary>
+ ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
+ سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
**مهارت‌های لازم:**
+ آشنایی با `JavaScript`
---
از آنجایی که تعداد خودروهای شهر بسیار زیاد شده، از شما می‌خواهیم تا برای مدیریت چراغ‌های راهنمایی به تیم ستاره کمک کنید. در ابتدا شما وظیفۀ مدیریت یک چهارراه را بر عهده دارید.
# پروژه اولیه
پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/28171/download_problem_initial_project/94217) دانلود کنید.
<details class="blue">
<summary>ساختار فایل‌های این پروژه به این صورت است</summary>
```
initialProject05.zip
├── fonts
│ ├── samim-bold.ttf
│ ├── samim-medium.ttf
│ └── samim.ttf
├── data.json
├── index.html
├── main.js
├── main.css
└── traffic.js
```
</details>
<details class="pink">
<summary>راه اندازی پروژه</summary>
+ ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
+ سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
# جزئیات
چهارراه‌های شهرک ترافیک شامل چهار صفحه نمایش (_screen_) می‌باشند که هر کدام از سه چراغِ (_light_) قرمز، زرد و سبز تشکیل شده‌اند. شما باید با ایجاد تغییراتی در فایل `main.js`، بتنظیماتی که پلیس راهور به ما داده است را از فایل data.json بخوانید و با توجه به داده‌هایی که در پاسخ دریافت می‌کنید، زمانِ روشن‌بودنِ چراغ‌ها را تنظیم کنید. توجه داشته باشید، در زمان عملیاتی شدن فایل data.json تغییر می‌کند و شما نباید محتویات این فایل را به جای دیگری منتقل کنید.
می‌توانید نمونه‌ای از این فایل را در اینجا مشاهده کنید:
```json
{
"timeline": {
"top": [
{
"color": "red",
"duration": 0
},
{
"color": "green",
"duration": 20
},
{
"color": "yellow",
"duration": 5
},
{
"color": "red",
"duration": 75
}
],
"right": [
{
"color": "red",
"duration": 25
},
{
"color": "green",
"duration": 20
},
{
"color": "yellow",
"duration": 5
},
{
"color": "red",
"duration": 50
}
],
"bottom": [
{
"color": "red",
"duration": 50
},
{
"color": "green",
"duration": 20
},
{
"color": "yellow",
"duration": 5
},
{
"color": "red",
"duration": 25
}
],
"left": [
{
"color": "red",
"duration": 75
},
{
"color": "green",
"duration": 20
},
{
"color": "yellow",
"duration": 5
},
{
"color": "red",
"duration": 0
}
]
}
}
```
- در صورتی که پاسخ بالا به شما داده شود، خروجی مورد نظر [به این شکل](https://www.dropbox.com/s/frp0oviyl7ow3if/problem05%28timelapse%29.mp4?dl=0) خواهد بود.
(برای مشاهدۀ ویدئو کامل به [این لینک](https://www.dropbox.com/s/usduvc9692dh0k8/problem05.mp4?dl=0) مراجعه کنید.)
- داده‌ها به فرمت `JSON` به شما داده می‌شوند.
- زمانِ روشن‌بودن چراغ‌ها (_duration_) در واحد ثانیه است.
# راهنمایی
- برای رفع ابهامات احتمالی حتماً ویدئو بالا را مشاهده کنید. همچنین توصیه می‌کنیم قبل از شروع کار، فایل‌های `index.html` و `main.css` را بخوانید؛ هر چند که نباید تغییری در این فایل‌ها ایجاد کنید.
- با کلیکِ کاربر بر روی دکمۀ شروع، باید اطلاعات از سرور گرفته شود و وضعیت دکمه به `disabled` تغییر کند.
- صفحات نمایش به طور مستقل کار می‌کنند و شما فقط باید با توجه به زمان‌های در نظر گرفته شده، وضعیتِ هر یک را به طور جداگانه تغییر دهید.
- چراغ‌ها به طور پیشفرض روشن هستند و با اضافه‌کردنِ کلاسِ `off` به المانِ مربوطه، خاموش می‌شوند.
- زمانی که وضعیت یک صفحه نمایش تغییر می‌کند، باید متد `switchLight` را فراخوانی کنید. به عنوان مثال اگر وضعیت صفحه نمایش سمت راست به قرمز تغییر کند، باید از کد `switchLight('right', 'red')` استفاده کنید.
- در هر صفحه نمایش یک شمارشگر (_counter_) وجود دارد که باید در هر لحظه زمانِ باقی‌مانده تا تغییر وضعیتش را نشان دهد.
- شمارشگر هیچگاه نباید به عددِ صفر یا اعداد منفی برسد.
- به طور کلی می‌توان گفت با دریافت مدت زمان‌های روشن بودن هر چراغ هر سمت چهارراه، وظیفه دارید آن چراغ را به ترتیب و مدت زمان داده شده روشن نگه دارید.
# توضیح مثال
برای مثال در داده‌ی داده شده در ابتدا چراغ سمت پایین 50 ثانیه به رنگ قرمز در می‌آید، بعد از آن 25 ثانیه به رنگ سبز و سپس 5 ثانیه به رنگ زرد و سپس 25 ثانیه مجددا به رنگ قرمز در می‌آید . این روند تکرار می‌شود. در این مثال هر دوره 100 ثانیه است.
# نکات
+ تغییرات را تنها در فایل `main.js` اعمال کنید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود.
+ توجه کنید که داوری خودکار بر مبنای نام کلاس‌های فایل `index.html` انجام می‌شود.
+ پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
└── main.js
```