Skip to content
OverviewSolutions
5
Comments
7
Mohit yadav
@yaadevmohit

All comments

  • alfiandwi93•410
    @alfiandwi93Submitted 12 months ago

    Does anyone here know if there is a tool that makes it easier for us to create a wizard form, I made this purely using JavaScript, in making this page I was confused about whether to finish the appearance first or create the appearance and logic at the same time, please give me input

    wizard form multi step form

    1
    Mohit yadav•220
    @yaadevmohitPosted 12 months ago

    Congratulation on a good design. Think you can do logic for this faster with react. Here are few things to also consider with your solution:

    1. Design is good but you still have to implement validation for step 1.
    2. Step 4 change button is not working at all. It should bring back user to step 2 to make changes.
    3. Checkboxes are not working in step 3 properly.
    4. Also consider adding min-height for step 2 options so the height doesn't change with extra tag added (2 months free). It creates a more smoothing UI.

    React will help you with creating this form much faster with hooks and stuff for the logic. But honestly great job with creating this form with vanilla javascript.

    Marked as helpful
    0
  • yahia mahmoud•140
    @yahia997Submitted 12 months ago

    I most challenging thing in this project is to change and collect prices according to plan and monthly or yearly.

    I think that my code needs to be more clean.

    Can you me some tips to enhance my code and clean it, or to make it more reusable?.

    React.js with Next.js using css modules

    1
    Mohit yadav•220
    @yaadevmohitPosted 12 months ago

    Congratulations on completing the challenge. Here are few things to consider for design and your code:

    1. Consider making border thin for inputs in step 1.
    2. You're doing validation for inputs in step 1 but not preventing to move to the next step.
    3. consider adding min height for options containers in step 2 so the height is not abruptly changing with those 2 months free p tags.

    The design looks really solid otherwise and you did a great job. I'll take a look at your code later if I get time and post more feedback. Happy Coding!

    Marked as helpful
    0
  • Aayush Jha•410
    @Aayush895Submitted 12 months ago

    I was able to make the site as close to the mockup as possible but I think that I could have written the javascript code in a much cleaner and optimised way. If anyone can provide some tips or suggestions on how I can optimise the javascript part of this code then I will be really grateful.

    A responsive signup page with basic email validation

    1
    Mohit yadav•220
    @yaadevmohitPosted 12 months ago

    Here are some suggestions after looking at your code:

    1. You need to improve your desktop design for bigger screen sizes as it start stretching too much. Consider adding max-width and max-height to your component-container.
    2. Still need to implement mobile design in case you are not aware.
    3. In javascript, consider using regex for email validation.
    4. For validation you want the errorMsg to stay until the user types a valid email. Try implementing the removal of error message after the submit button if its a valid email.
    5. Modular javascript is a good way to creating reusable code using vanilla javascript. Here's a youtube playlist for that https://www.youtube.com/watch?v=HkFlM73G-hk&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f&ab_channel=LearnCode.academy

    I'll take a look at your code again later in detail and add more suggestions here.

    Marked as helpful
    2
  • Mohit yadav•220
    @yaadevmohitPosted 12 months ago

    Looks good. Could use better class naming like instead of "flex-items", you could use "price-info"

    Marked as helpful
    0
  • paldong-creater•170
    @paldong-createrSubmitted about 1 year ago

    Hi Developer, It took very long time for me to complete this project, the main reason for this is when I find something hard I took lots of long break and try avoiding it. Finally I am very happy to finished this project because I make sure at any cost I will complete it. I find this project very difficult at many point and there may be lots of code, logic and implementation issues. I am open to any kind of suggestion.

    Thanks,

    Multi Step Form made with Vanilla JavaScript

    1
    Mohit yadav•220
    @yaadevmohitPosted about 1 year ago

    Congratulations on finishing the project. Desktop design looks really solid and one of best I've seen so far. I'd like to add some suggestions and point out issues with your code and design(even the obvious ones) :

    1. Footer needs to stick at bottom on mobile screen.
    2. Consider using appropriate html tag (span) for "2 months free" as they are not actually a heading/subheading.
    3. Follow consistent naming conventions for css classes. You're using hyphens and camelCasing and somewhere a mix of both. Although its not a big of a deal and I understand you're probably using camelCase for query selector elements, try to stick with one convention.

    Otherwise your project looks really good and organized. Also, I struggle with the same issue of long breaks and procrastination with difficult tasks and I find not thinking too far ahead. Proper planning needs to be done from design perspective and always try to break it down into smaller manageable tasks to avoid burnouts and getting overwhelmed.

    Marked as helpful
    0
  • Mohit yadav•220
    @yaadevmohitPosted about 1 year ago

    PascalCase is used for naming react components. Also, camelCase is used for naming variables and functions inside the components.

    Marked as helpful
    0
  • Mohit yadav•220
    @yaadevmohitPosted about 1 year ago

    This is really close to the expected desktop design but you didnt make it responsive and implement the mobile design (which i'm hoping you're still working on). Also container width and height for the form and plans in the second step should stay fixed for a better robust experience. Consider adding min-width and min-height in css these container sizes to remain fixed. Also follow proper naming conventions for components and styling files.

    Marked as helpful
    0