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
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

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

Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.

Links

• Solution URL: multi-step-form
• Live Site URL: dan-multi-step-form

My process

Built with

• Semantic HTML5 markup
• SCSS custom properties
• Flexbox
• React Hooks
• React - JS library
• Sass - React framework

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

-Data Transfer -Problem with SVG Manipulation

To see how you can add code snippets, see below:

let navigator = useNavigate();
    let location = useLocation();
    const {
        formValue,
        formValue1,
        formValue2,
        formValues15,
        formValues14,
        formValues13 } = location.state;

    const [formErrors, setFormErrors] = useState({});
    const [formValues4, setFormValue4] = useState([]);
    const [formValues5, setFormValue5] = useState([]);
    const [isSubmit, setisSubmit] = useState(false);
    const [isSubmit1, setisSubmit1] = useState(false);
    const [selectedOption, setSelectedOption] = useState('');
    const [selectedOption2, setSelectedOption2] = useState('');
    const [selectedOption3, setSelectedOption3] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        setFormErrors(validate(selectedOption, selectedOption2, selectedOption3));
        setisSubmit(true)
        // console.log(totalValue);
    };

    useEffect(() => {
        setFormValue4(totalValue);
        if (Object.keys(formErrors).length === 0 && isSubmit) {
            if (formValue == null || formValue1 == null || formValue2 == null || formValue === '' || formValue1 === '' || formValue2 === '') {
                const statesToPass = {
                    formValue5: formValues15,
                    formValue1: formValues14,
                    formValue2: formValues13,
                    formValues4: formValues4
                };
                navigator('../Page4', { state: statesToPass });
            } else {
                const statesToPass = {
                    formValue5: formValue,
                    formValue1: formValue1,
                    formValue2: formValue2,
                    formValues4: formValues4
                };
                navigator('../Page4', { state: statesToPass });
            }
            console.log(location.state)
        }
    },
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [formErrors, selectedOption, selectedOption2, selectedOption3, isSubmit])



    const goBack1 = (e) => {
        e.preventDefault();
        setisSubmit1(true);
    }


    useEffect(() => {
        setFormValue5(formValue);
        if (isSubmit1) {
            const statesToPass = {
                formValue5: formValues5,
            };
            navigator('../Page2', { state: statesToPass });
            // console.log(formValues5)
        }
    },
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [selectedOption, selectedOption2, selectedOption3, isSubmit1])

    const validate = (values) => {
        const errors = {};
        if (selectedOption === '' && selectedOption2 === '' && selectedOption3 === '') {
            errors.options = "Please select an plan"
        }
        return errors;
    }

if date looping was thing....lol

Note: Delete this note and the content within this section and replace with your own learnings.

Continued development

-Better Techniques for data tranfer been page modules. -using local storage in the place of useStates

Note: Delete this note and the content within this section and replace with your own plans for continued development.

Useful resources

• Radio-Input - This helped me for working with Radio inputs and alzo the design inspiration. I really liked this pattern and will use it going forward.
• CheckBox - This is an amazing article which helped me finally understand checkBox. I'd recommend it to anyone still learning this concept.

Author

• Website - Daniel Erhisohwode
• Frontend Mentor - @lienadochuko
• Twitter - @erhisO