This is a solution to the Multi-step form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This project is a multi-step form that allows users to select a package and subscribe to an online gaming service. The form is broken up into 4 steps: 1) Fill in a form, 2) Select a plan, 3) Select add-ons, and 4) Review and confirm the order. The user can go back to a previous step to update their selections. The final step shows a summary of the user's selections and allows them to confirm their order.
Users should be able to:
- Complete each step of the sequence
- Go back to a previous step to update their selections
- See a summary of their selections on the final step and confirm their order
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Receive form validation messages if:
- A field has been missed
- The email address is not formatted correctly
- A step is submitted, but no selection has been made
- Solution URL: Solution
- Live Site URL: Multi-step Form
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Javascript
I learned how to use the HTML5 form validation API to validate user input. I also learned how to use the HTML5 progress element to show the user's progress through the form. I also learned how to use the HTML datasets attribute to dynamically add elements based on the datasets values.
Most specifically, I learned how to style a checkbox, based on its state - checked or unchecked.
<div class="progress-bar__step" data-step="0">
<div class="progress-bar__step__circle ">1</div>
<div class="progress-bar__step__text">Your info</div>
</div>
input[type='checkbox']:checked {
accent-color: var(--global-accent-color);
}
const validateForm = () => {
const formInputs = document.querySelectorAll('.main--section-form input');
let formValid = true;
formInputs.forEach(input => {
const error = input.previousElementSibling.lastElementChild;
if (input.value === '') {
formValid = false;
error.style.visibility = 'visible';
input.classList.add('invalid');
} else if (input.name === 'email') {
if (!input.value.includes('@') || !input.value.includes('.')) {
formValid = false;
error.style.visibility = 'visible';
input.classList.add('invalid');
}
} else {
error.style.visibility = 'hidden';
input.classList.remove('invalid');
}
});
return formValid;
};
I want to create an e-commerce project, because that allow me practice more advance topics in HTML, CSS and JavaScript
- Figma - This helped me to have a closer idea of sizes and positions of the individual elements on the page since I only had images from the challenge. I really liked this pattern and will use it going forward.
- mdn web docs - I explored this severally throughout the project to have a deeper understanding of certain concepts.
- Website - Adekunle Adesokan
- Frontend Mentor - @kunle-coded
- Twitter - @kunle_ronald