README.md

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

Overview

The challenge

Users should be able to:

• Complete each step of the sequence
• 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

Screenshot

Links

• Solution URL: Frontend Mentor Solution Page
• Live Site URL: https://multi-step-form-victory.vercel.app

My process

Built with

• Semantic HTML5 markup
• SCSS
• Flexbox
• Mobile-first workflow
• Gulp
• Tailwind CSS - For styles

What I learned

I learnt alot about JS event handlers and some crazy DOM manipulations Like this code I used to render prices on add-ons on the finishing page (there's more to it this is just a snippet haha)

let updateAddOnPriceUI = () => {
    let selectedAdOnsIndexs = addOnsQuery.multiIndexOf(addOnsQuery, true)
    let html = ``

    for (let i = 0; i < selectedAdOnsIndexs.length; i++) {
        if (yearlySelected) {
            html += `<p>+$${addOnsYearly[selectedAdOnsIndexs[i]]}/yr</p>
            `
            allPrices.push(addOnsYearly[selectedAdOnsIndexs[i]])
        } else {
            html += `<p>+$${addOnsMonthly[selectedAdOnsIndexs[i]]}/mo</p>
            `
            allPrices.push(addOnsMonthly[selectedAdOnsIndexs[i]])
        }
    }

    return html
}

Continued development

I want to learn other ways I can write code to be short and readable at the same time too

Useful resources

• Stack Overflow - Used it so much and it helped me see that I can create an 'Array.protoype custom function' as I saw from someone. I really liked this pattern and will use it going forward.

Author

• Frontend Mentor - @Nnadivictory25
• Twitter - @nnvictory001

Acknowledgments

I want thank me for not giving up when I meet bugs :)