HTML

• Form Validation
• Input Types (password, checkbox, ...)
• Input Attributes (value, min, max, ...)

CSS

• Flexbox Layout
• Pseudo Selectors (:hover, :focus, ...)
• Font Management

برای استفاده از خدمات شرکت Mockstar، باید در سایت آن عضو شد و از پمبه خواسته شده است تا طرح جدید صفحات ورود و ثبت‌نام را پیاده‌سازی کند.

پمبه برای محک‌زدن توانایی‌هایش می‌خواهد اعتبارسنجی ورودی‌‌های کاربر را بدون استفاده از JavaScript انجام دهد.

توضیحات سوال

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

پروژه اولیه

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

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

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

• اعتبار‌سنجی ورودی‌های کاربر تنها با استفاده از html
• نام کاربری باید از جنس text باشد
• نام کاربری باید حداقل ۳ و حداکثر ۳۲ کاراکتر داشته‌ باشد
• نام کاربری فقط می‌تواند حاوی حروف کوچک و بزرگ انگلیسی‌ و اعداد باشد
• ایمیل باید از جنس email باشد
• تلفن باید از جنس tel باشد
• تلفن با یکی از عبارات زیر شروع شود و در ادامه حاوی ۹ رقم باشد
  • +989
  • 00989
  • 09
• رمز عبور باید از جنس password باشد
• رمز عبور باید حداقل ۸ و حداکثر ۳۲ کاراکتر داشته‌ باشد
• رمز عبور باید حداقل حاوی یک حرف کوچک انگلیسی، یک حرف بزرگ انگلیسی، یک رقم و یکی از کاراکترهای !@#$%^&* باشد
• دکمه‌ها باید از جنس submit باشند
• جابه‌جایی smooth بین بخش‌های register و login

نکات

• شما تنها مجاز به تغییر در فایل‌های index.html و dynamic.css هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود.
• شما تنها مجاز به تغییر یا اضافه و کم کردنِ Attributeهای فایل index.html هستید و نباید ترتیب المان‌ها را عوض کنید یا المانی را اضافه و کم کنید.
• شما مجاز به استفاده از JavaScript نیستید.
• توجه کنید که داوری خودکار بر مبنای ساختار فایل index.html انجام می‌شود.
• برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.

[your-zip-file-name].zip
├── dynamic.css
└── index.html