This challenge offers a great opportunity to enhance your JavaScript skills by creating a 3-step registration form with distinct sections, allowing you to test and improve your JavaScript proficiency.
- Create a multi-step registration page that matches the given design.
- Use HTML to create the basic structure.
- Add form, inputs, buttons, stepper,... according to the design.
- Add validations to the inputs: name and email input should be required and email input should only accept email format.
- Use Vanilla JavaScript to add interactivity.
- Users should not be able to continue to the next step if inputs are empty or the topic is not selected.
- Users can continue to the next step if inputs are filled or topic is selected.
- Users should know which step they are at.
- When users click confirm, they should see an alert with '✅ Success' message.
- The page should be responsive on different screen sizes.
- Deploy the solution and submit Repository URL and Demo URL.
- Vite
- BEM
- fontsource fonts:
- More validations for name input.
- Should be at least 5 characters.
- Should be at most 15 characters.
- Should only contain letters.
- Restart event.
- Create a stepper slider with CSS and JavaScript.
- Movement transition between steps.
- Create an alert with CSS and JavaScript.
- Movement transition
- Time bar
To clone and run this application, you'll need Git, Node.js and pnpm installed on your computer. From your command line:
# Clone this repository
git clone https://github.com/Hdoc1509/dev-challenges
# install workspace dependencies
cd dev-challenges && pnpm install
# Run multi-step-form in dev-mode
cd vanilla/multi-step-form
pnpm run dev --open