مرور کلی
این پروژه solution چالش multi-step form در Frontend Mentor (سطح advanced) است. UI کاربر را از اطلاعات شخصی، انتخاب پلن، add-onهای اختیاری و خلاصه تأیید تا صفحه تشکر پیش میبرد. طراحی شامل sidebar پیشرفت در دسکتاپ و نوار step فشرده در موبایل است، مطابق style guide و layoutهای JPG چالش.
چالش
brief بیش از markup استاتیک میخواست: navigation بین stepها با حفظ داده، validation برای فیلد خالی و ایمیل نامعتبر، توقف progress وقتی پلن انتخاب نشده، بهروزرسانی قیمت با switch ماهانه/سالانه و summary دقیق اگر کاربر برگردد و انتخاب را عوض کند. همه بدون framework، با hover/focus و layout responsive از 375px به بالا.
رویکرد
markup را semantic با یک section برای هر step ساختم و visibility را toggle کردم بهجای rebuild DOM. داده فرم در یک state object متمرکز شد و inputها در صفحه ماندند تا برگشت به step قبل مقادیر را حفظ کند. validation روی Next اجرا میشود؛ helperهای pricing برچسب پلن و add-on را با toggle billing بهروز میکنند؛ step summary قبل از confirm total را دوباره حساب میکند.
معماری
HTML/CSS/JS ساده با CSS custom properties از style guide Frontend Mentor، media query موبایل-first و flexbox برای layout کلی. بدون build — deploy بهصورت static روی GitHub Pages. فونت Ubuntu از Google Fonts؛ آیکونها و پسزمینه sidebar از asset pack چالش.
مصالحهها
Vanilla JS وابستگی صفر و hosting آسان دارد، اما logic stepها در یک script است نه component. show/hide برای پنج صفحه سادهتر از routing است، هرچند HTML همه stepها در load اول میآید (برای این اندازه فرم قابل قبول است).
نتایج
همه user storyهای چالش پوشش داده شد: flow کامل، برگشت، summary پویا، layout responsive، پیام validation و stateهای interactive. demo زنده روی GitHub Pages؛ source عمومی در GitHub برای portfolio و submit در Frontend Mentor.
درسهای آموختهشده
حتی فرم کوچک از تصمیم زودهنگام درباره مالکیت state سود میبرد — mix خواندن DOM و state object بدون قانون زود نامرتب میشود. layout موبایل برای overlap sidebar و card بیشتر از flow جاوااسکript iteration خواست. در کار portfolio، جزئیات design (indicator step، error state) به اندازه logic مهم است.