Skip to content
OverviewSolutions
7
Comments
3
Simon
@Simplify4Me2

All comments

  • Simon•180
    @Simplify4Me2

    Hi @1of1baw,

    First off, congrats on completing the challenge! 🎉 A lot of great things going on here, using clean and well-organized code.

    I noticed a tiny typo in your HTML file. On line 8, the ype attribute should be type. That's likely why it's duplicated.

    Instead of using input type="text", you could switch them to type="number". It gives a more intuitive experience for users by showing the numeric keypad on mobile.

    Good that you're using new Date(year, month, 0).getDate() to validate days! But a small remark: you're checking validity of the day even before confirming if the month and year are valid.

    I hope this wasn't too nittpicky 😅 Happy coding ⚡⚡

    Marked as helpful
  • Simon•180
    @Simplify4Me2

    Hi @dev-paulL,

    Great solution! A smooth setup using Tailwind, Vite and React ⚡

    Just a tiny detail, but I noticed you're using after:content-['»'] and its equivalent for quotes. Maybe try using “ and ”. Those polished touches can really make a difference!

    Loving the Tailwind variables, but a little remark —Tailwind’s docs recommend defining them in your main.css or index.css file (you can check it out here: Tailwind Customizing Colors). Also, instead of using dark, consider naming with shades (e.g., gray-700), as it might offer more flexibility for future changes.

    And while I'm being nitpicky, I noticed an empty alt attribute on an image - giving it a meaningful value will help with accessibility, plus it's good for SEO!

    Overall, great job! Keep up the awesome work and happy coding 🍵🍵

  • Jordan Davenport•1,180
    @jjdavenport
    What are you most proud of, and what would you do differently next time?

    First form validation using react.

    What challenges did you encounter, and how did you overcome them?

    The difference between vanilla js and react for validation.

    What specific areas of your project would you like help with?

    Any feedback is appreciated.

    Ping coming soon page

    #react#vite#tailwind-css
    1
    Simon•180
    @Simplify4Me2

    Hello @jjdavenport,

    Congratz on completing the challenge! It looks good 👍

    I noticed that the current workflow isn't mobile-first, which might be why the mobile design lacks margins and has larger font sizes. Shifting to a mobile-first approach could help optimize the layout for smaller screens. You could also consider the PerfectPixel browser extension to ensure your design matches the mockups more precisely.

    You've definitely paid good attention to semantic HTML. The header tag is currently in the main tag, though. Typically, the header should be a sibling of main rather than a child to maintain proper semantic structure. Also, the ul element used for social media icons could be more appropriate as a nav element, indicating these icons are a form of navigation.

    In React, your approach of having components depend directly on assets/data.json might reduce flexibility. Passing this data through as props could enhance the reusability of your components. The validation logic you've implemented looks like a great candidate for a custom hook. This could keep your components clean and focused.

    Keep up the great work and happy coding ⚡⚡

    Marked as helpful