سلام دوست عزیز😃👋

به آزمون ورودی کارآموزی تابستانه Front-End کداستار خوش آمدید!

مسابقه به مدت ۵ ساعت ادامه خواهد داشت و در مجموع شامل ۷ سوال است که سطح آن‌ها از آسان به سخت متفاوت خواهد بود. برای حل سوالات باید به HTML، CSS و JavaScript مسلط باشید به طوری که ۴ سوال اول مربوط به HTML و CSS هستند و ۳ سوال آخر مربوط به JavaScript می‌باشند. برای حل سوالات JavaScript نیازی به تسلط بر روی Frameworkهایی مانند React و Angular نیست و صرفا دانش JavaScript پایه کافی می‌باشد.

سوالات به گونه‌ای تنظیم شده‌اند که با توجه به دانشی که دارید بتوانید بخشی از نمرۀ سوال را بگیرید. به عنوان مثال اگر نتوانید سوال ۳ را به طور کامل حل کنید، این امکان وجود دارد که بتوانید بخشی از سوال ۴ را حل کنید؛ بنابراین حتما به تمام سوالات مراجعه کنید.

رتبه‌بندی بر اساس مجموع امتیازاتی که از سوالات کسب می‌کنید صورت می‌گیرد؛ همچنین در صورتی که امتیاز دو نفر یکسان شود، کسی که سوالات را در مدت‌زمان کمتری حل کرده باشد، رتبۀ بهتری کسب می‌کند.

در صورتی که درمورد سوالی ابهام داشتید، می‌توانید از قسمت «سوال بپرسید» آن را مطرح کنید.

برای کسب اطلاعات بیشتر به لینک‌های زیر مراجعه کنید:

موفق باشید 😉✌

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: خروجی نمونه برای صفحه register

صفحه login: خروجی نمونه برای صفحه login

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

پروژه اولیه🔗

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

ساختار فایل‌ها
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
Plain text
راه‌اندازی پروژه
  • ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید.
  • سپس فایل index.html را در مرورگر خود باز کنید.

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

  • اعتبار‌سنجی ورودی‌های کاربر تنها با استفاده از 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
Plain text
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.