momin-riyadh / multi-step-form

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Frontend Mentor - Multi-step form solution

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.

Table of contents

Overview

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.

The challenge

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Javascript

What I learned

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;
};

Continued development

I want to create an e-commerce project, because that allow me practice more advance topics in HTML, CSS and JavaScript

Useful resources

  • 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.

Author

About


Languages

Language:HTML 35.1%Language:CSS 33.8%Language:JavaScript 31.1%