Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

frontEndMentor-Multi-step-form

@mohammadjamshidi8

Desktop design screenshot for the Multi-step form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Community feedback

@Naren-ReactDev

Posted

Congratulatiosn on completing the challenge, Design looks good. Functionality wise you may need to implement below:

  1. On confirm button click, in the total amount you need to add only selected addons, it is keep on appending addons price when I go back and click confirm button(may be onclick you can reset exsting selected addons price to 0 and add newly selected addons price).

if (!(arrayForm[3].className.includes('hidden'))) { nextStepBtn.innerHTML = 'confrim' nextStepBtn.classList.add('bg-purplishBlue') let regex = /\d+/ let userPlanePrice = regex.exec(planPrice.innerHTML)

        let userAddOns = $.querySelectorAll('#user-add-price')


        sum =0 // not tested but I feel setting sum=0 here should work
        userAddOns.forEach(add => {
            let x = regex.exec(add.innerHTML)
            sum = Number(x[0]) + sum
        })
  1. On toggle click monthly/yearly amount is not reflecting in the total amount. you may need to update plan price in the total amount on toggle click.

Thanks, Naren

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord