این پروژه شامل یک کامپوننت OTP است که با استفاده از HTML، CSS و JavaScript پیاده‌سازی شده است. این کامپوننت به کاربر اجازه می‌دهد تا یک کد ۵ رقمی وارد کند و سپس پیام موفقیت یا خطا را نمایش دهد.
- ورودی تنها اعداد: فقط اعداد مجاز هستند و حروف یا کاراکترهای غیرمجاز پذیرفته نمی‌شوند.
- پیام خطا: اگر عدد وارد شده "00000" باشد، یک پیام خطا و تغییر رنگ مرزی نمایش داده می‌شود.
- ورودی دینامیک: پس از پر شدن تمام ورودی‌ها، یک پیام موفقیت نمایش داده می‌شود.
- سازگاری با موبایل: در حالت موبایل، کیبورد تنها اعداد را نمایش می‌دهد.
- فایل‌های
index.html,styles.css, وscript.jsرا در یک پوشه قرار دهید. - فایل
index.htmlرا در مرورگر باز کنید.
- پوشه پروژه را باز کنید.
- فایل
index.htmlرا در مرورگر وب باز کنید تا کامپوننت OTP را مشاهده کنید.
- برای طراحی خلاقانه و بهتر، می‌توانید از رنگ‌ها، اندازه‌ها و انیمیشن‌های اضافی استفاده کنید.
- در حالت موبایل، طراحی باید به گونه‌ای باشد که ورودی‌ها به راحتی قابل مشاهده و استفاده باشند.
پارت اول این خط از کد تضمین می‌کند که کد جاوااسکریپت پس از بارگذاری کامل محتوای HTML اجرا می‌شود. DOMContentLoaded یک رویداد است که وقتی HTML کامل بارگذاری شد (بدون انتظار برای لود کامل تصاویر و فایل‌های CSS)، اجرا می‌شود. این کمک می‌کند تا مطمئن شوید همه inputها و دیگر عناصر موجود در DOM آماده استفاده هستند.
پارت دوم این خط از کد تمام عناصر ورودی (input) که کلاس otp-input دارند را انتخاب و به عنوان یک لیست از NodeList ها در متغیر otpInputs ذخیره می‌کند. querySelectorAll تمام عناصر مطابق با یک selector مشخص (در اینجا .otp-input) را انتخاب می‌کند.
پارت سوم این خط از کد، عنصر HTML با شناسه error-message (که برای نمایش پیام‌های خطا استفاده می‌شود) را انتخاب و در متغیر errorMessage ذخیره می‌کند.
پارت چهارم: این بخش از کد، یک حلقه forEach روی تمامی ورودی‌های OTP ایجاد می‌کند. هر بار که کاربر یک کاراکتر در ورودی وارد می‌کند، رویداد input فراخوانی می‌شود. اگر طول ورودی برابر با 1 باشد و این ورودی آخرین ورودی نباشد (index < otpInputs.length - 1)، فوکوس به ورودی بعدی منتقل می‌شود. این باعث می‌شود که کاربر بتواند بدون نیاز به کلیک بر روی ورودی بعدی، مستقیماً وارد کردن اعداد را ادامه دهد.
پارت پنجم این بخش از کد، رویداد keypress را برای هر ورودی (input) ثبت می‌کند. هر بار که کاربر کلیدی را فشار می‌دهد، این رویداد بررسی می‌کند که آیا کلید فشرده شده یک عدد (0-9) است یا خیر. اگر کلید وارد شده یک عدد نباشد، رویداد به طور پیش‌فرض لغو می‌شود و ورودی (input) هیچ کاراکتری را دریافت نمی‌کند.
پارت ششم این تابع checkOTP، کل کد OTP را بررسی می‌کند. ابتدا یک متغیر otp به صورت یک رشته خالی ایجاد می‌شود که بعداً تمام ورودی‌های OTP در آن جمع می‌شود. متغیر isComplete برای بررسی اینکه آیا تمامی ورودی‌ها پر شده‌اند یا خیر استفاده می‌شود. حلقه forEach روی هر ورودی (input) اجرا می‌شود: اگر هر ورودی خالی باشد، متغیر isComplete به false تغییر می‌کند. مقدار هر ورودی به متغیر otp اضافه می‌شود. اگر isComplete باشد (یعنی تمامی ورودی‌ها پر شده باشند): اگر کد OTP وارد شده برابر با '00000' باشد، پیام خطا به کاربر نمایش داده می‌شود و تمامی ورودی‌ها قرمز می‌شوند. در غیر این صورت، یک alert با مقدار OTP نمایش داده می‌شود و پیام خطا مخفی می‌شود. همچنین رنگ مرز ورودی‌ها به حالت عادی باز می‌گردد.
\طراح نسیم رضایی