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

Multi-step form with Vanilla JS and sass

Maria 70

@mcosme000

Desktop design screenshot for the Multi-step form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


My solution for the multi-step form. I decided to code it first using only Vanilla JS because I knew it was gonna be more challenging and definitely it was! Understanding React and knowing how easy the conditional rendering works with it just made me realize how difficult it is in javascript! It was a good practice, but I can't wait to redo this challenge with React.

I am unsure about some parts of my code and I know I need to refactor because I feel like there were points where I was repeating myself...!

I also need to improve the Monthly/Yearly toggle, for some reason I couldn't figure out how to make it so I ended up with a regular checkbox, not at all close to the real solution...

Community feedback

@0xabdulkhaliq

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️:

  • This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.
  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers
  • For example:
  • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
  • The <footer> typically contains information about the author of the section, copyright data or links to related documents.
  • So resolve the issue by replacing the <div class="app"> element with the proper semantic element <main> in your index.html file to improve accessibility and organization of your page

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

1

Maria 70

@mcosme000

Posted

@0xAbdulKhalid Hi, thank you for your comment. I just updated my solution and changed some divs for the correct elements, not the accessibility report is all clear :)

0

@0xabdulkhaliq

Posted

@mcosme000 Glad you found it helpful ! 🤠

0

@momin-riyadh

Posted

Hello Maria, Nice Work! Could be better in terms of following requirements

  • Complete each step of the sequence( without form fill up next steps will restricted)
  • 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

Moreover, you need to subscribe and to get started, follow this link. It'll take you to the course's website, where you can sign up and start your JavaScript learning journey. Don't worry; the course is beginner-friendly and designed to help you grasp the fundamentals.

1

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