Skip to content
OverviewSolutions
8
Comments
8
Mr Rainman
@phantomgizmo

All comments

  • P
    Brandon Taylor•250
    @brandontaylor1
    What are you most proud of, and what would you do differently next time?

    I'm still trying to master React, and there are many small elements that I had to consider. I am glad I was able to complete it. I used Tailwind as well for styling

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

    One challenge that I hadn't come across that often was creating RegEx for the inputs, needed a little Stack Overflow and co-pilot help, but I think it works now.

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

    Any thoughts on the project would help. Also, if you encounter any bugs, please let me know.

    Splitter Tip Calculator

    #react
    1
    Mr Rainman•130
    @phantomgizmo

    Hi, the solution looks great! It is responsive, styling is top notch and functions work great as well!

    Just want to add a little thought:

    1. After you fill all fields and you focus on number of people field, the value suddenly become 0 and tip amoount and total become infinity.
    2. After you fill custom tip, you cannot select other tip option

    That's all, good job!

  • Mr Rainman•130
    @phantomgizmo

    First of all, the website looks amazing! It looks identical to the design. Kudos to you.

    There are things that might be improved such as:

    1. Responsiveness at certain breakpoint (between mobile view and desktop view) can be better.
    2. The hover on each activity card might be improved adding hover effect on the ellipsis icon.
  • Mr Rainman•130
    @phantomgizmo

    Looks good to me!

    Only complain is the default outline ring on input when hovering and active state is still there

  • Mr Rainman•130
    @phantomgizmo

    Desktop design looks good.

    But i dont see the mobile version of it.

  • jorge arevalo•50
    @JDev-8
    What are you most proud of, and what would you do differently next time?

    This project has represented a significant challenge in my path as a frontend developer, possibly the most demanding to date. Confronting the specific HTML structure proposed by Frontend Mentor forced me to delve deeper into the use of CSS selectors, exploring various strategies to achieve the desired results. The need to adapt the design to a predefined structure was a stimulating challenge. Through this process, I consolidated my understanding of class selectors, IDs, attributes, and pseudo-classes, learning how to combine them effectively to target specific elements and apply precise styles to them.

    With each challenge, I feel more confident and prepared to take on more complex projects. My journey in the world of frontend continues, and I am eager to continue learning and growing as a developer.

    My solution of Recipe page FrontendMentor Challengue

    1
    Mr Rainman•130
    @phantomgizmo

    The website looks good!

    Maybe it could be improved by making the image more responsive by setting the width with max-width (or max-inline-size) of 100% instead of static width.

    Also the main container (or wrapper) seems to has a min-width on a larger screen. Maybe it could be improved by removing that so it can resize smoothly when user change browser width. My guess is you set min-width so the image won't overflow, so yeah i guess that's still okay.

    Overall, great work!

  • Mr Rainman•130
    @phantomgizmo

    Great work!

    Social links could be improved with a hover state

  • Mr Rainman•130
    @phantomgizmo

    This could be improved by using semantic html element like header, main, and footer.

    Setting image size explicitly might restrict the image on different screen size, it could be improved by setting only max-width and aspect-ratio.

    Marked as helpful
  • Mr Rainman•130
    @phantomgizmo

    I saw a lot of px units on alot of properties. px units scales poorly for device with increased font size. This can be improved by limiting usage of px to small stuff like border width, shadow size, etc.