سلام دوست عزیز😃👋
به آزمون ورودی کارآموزی تابستانه Front-End کداستار خوش آمدید!
مسابقه به مدت ۵ ساعت ادامه خواهد داشت و در مجموع شامل ۷ سوال است که سطح آنها از آسان به سخت متفاوت خواهد بود. برای حل سوالات باید به HTML، CSS و JavaScript مسلط باشید به طوری که ۴ سوال اول مربوط به HTML و CSS هستند و ۳ سوال آخر مربوط به JavaScript میباشند.
برای حل سوالات JavaScript نیازی به تسلط بر روی Frameworkهایی مانند React و Angular نیست و صرفا دانش JavaScript پایه کافی میباشد.
سوالات به گونهای تنظیم شدهاند که با توجه به دانشی که دارید بتوانید بخشی از نمرۀ سوال را بگیرید. به عنوان مثال اگر نتوانید سوال ۳ را به طور کامل حل کنید، این امکان وجود دارد که بتوانید بخشی از سوال ۴ را حل کنید؛ بنابراین حتما به تمام سوالات مراجعه کنید.
رتبهبندی بر اساس مجموع امتیازاتی که از سوالات کسب میکنید صورت میگیرد؛ همچنین در صورتی که امتیاز دو نفر یکسان شود، کسی که سوالات را در مدتزمان کمتری حل کرده باشد، رتبۀ بهتری کسب میکند.
در صورتی که درمورد سوالی ابهام داشتید، میتوانید از قسمت «سوال بپرسید» آن را مطرح کنید.
برای کسب اطلاعات بیشتر به لینکهای زیر مراجعه کنید:
+ [آموزش کار با Quera](https://quera.org/course/assignments/2693/problems/8772)
+ [سایت کداستار](https://code-star.ir/)
+ [کانال تلگرام کداستار](https://t.me/code_star)
موفق باشید 😉✌
سلام دوست عزیز😃👋
به آزمون ورودی کارآموزی تابستانه Front-End کداستار خوش آمدید!
مسابقه به مدت ۵ ساعت ادامه خواهد داشت و در مجموع شامل ۷ سوال است که سطح آنها از آسان به سخت متفاوت خواهد بود. برای حل سوالات باید به HTML، CSS و JavaScript مسلط باشید به طوری که ۴ سوال اول مربوط به HTML و CSS هستند و ۳ سوال آخر مربوط به JavaScript میباشند.
برای حل سوالات JavaScript نیازی به تسلط بر روی Frameworkهایی مانند React و Angular نیست و صرفا دانش JavaScript پایه کافی میباشد.
سوالات به گونهای تنظیم شدهاند که با توجه به دانشی که دارید بتوانید بخشی از نمرۀ سوال را بگیرید. به عنوان مثال اگر نتوانید سوال ۳ را به طور کامل حل کنید، این امکان وجود دارد که بتوانید بخشی از سوال ۴ را حل کنید؛ بنابراین حتما به تمام سوالات مراجعه کنید.
رتبهبندی بر اساس مجموع امتیازاتی که از سوالات کسب میکنید صورت میگیرد؛ همچنین در صورتی که امتیاز دو نفر یکسان شود، کسی که سوالات را در مدتزمان کمتری حل کرده باشد، رتبۀ بهتری کسب میکند.
در صورتی که درمورد سوالی ابهام داشتید، میتوانید از قسمت «سوال بپرسید» آن را مطرح کنید.
برای کسب اطلاعات بیشتر به لینکهای زیر مراجعه کنید:
موفق باشید 😉✌
**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
```
Authentication
HTML
- Form Validation
- Input Types (password, checkbox, ...)
- Input Attributes (value, min, max, ...)
CSS
- Flexbox Layout
- Pseudo Selectors (:hover, :focus, ...)
- Font Management
برای استفاده از خدمات شرکت Mockstar، باید در سایت آن عضو شد و از پمبه خواسته شده است تا طرح جدید صفحات ورود و ثبتنام را پیادهسازی کند.
پمبه برای محکزدن تواناییهایش میخواهد اعتبارسنجی ورودیهای کاربر را بدون استفاده از JavaScript
انجام دهد.
توضیحات سوال🔗
تصاویر خروجی نمونه
صفحه register:

صفحه login:

میتوانید برای بررسی دقیقتر نتیجۀ نهایی،
این فیلم
را مشاهده کنید.
پروژه اولیه🔗
پروژه اولیه را از این لینک دانلود کنید.
ساختار فایلها
راهاندازی پروژه
- ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید.
- سپس فایل
index.html
را در مرورگر خود باز کنید.
خواستههای مسئله🔗
- اعتبارسنجی ورودیهای کاربر تنها با استفاده از
html
- نام کاربری باید از جنس
text
باشد
- نام کاربری باید حداقل ۳ و حداکثر ۳۲ کاراکتر داشته باشد
- نام کاربری فقط میتواند حاوی حروف کوچک و بزرگ انگلیسی و اعداد باشد
- ایمیل باید از جنس
email
باشد
- تلفن باید از جنس
tel
باشد
- تلفن با یکی از عبارات زیر شروع شود و در ادامه حاوی ۹ رقم باشد
- رمز عبور باید از جنس
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
انجام میشود.
- برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.