Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
8

Mr Rainman

@phantomgizmo130 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Tip Calculator with Typescript, React.JS, Tailwindcss

    #react#react-hook-form#typescript#tailwind-css

    Mr Rainman•130
    Submitted 3 months ago
    1. Code readability
    2. Performance optimization

    1 comment
  • Time tracking dashboard w/ React, typescript and tailwindcss

    #react#typescript#tailwind-css

    Mr Rainman•130
    Submitted 3 months ago
    1. Design pattern
    2. General improvement on readability of the code
    3. Styling

    1 comment
  • Newsletter Sign Up with React Typescript and Tailwindcss


    Mr Rainman•130
    Submitted 4 months ago
    1. I struggle about z-index when creating shadow for a button. I learnt about an element will create stacking context if it has position other than static and z-index other than auto or 0. I set the button position to relative and z-index to 1 and before pseudo-element position to absolute and z-index of -1. But it only move the before pseudo-element below button text and stil on top of button background color.

    1 comment
  • Article Preview using CSS and JS


    Mr Rainman•130
    Submitted 5 months ago

    1 comment
  • Recipe Main Page using CSS


    Mr Rainman•130
    Submitted 5 months ago

    1 comment
  • Social links profile using CSS


    Mr Rainman•130
    Submitted 5 months ago

    1 comment
View more solutions

Latest comments

  • P
    Brandon Taylor•250
    @brandontaylor1
    Submitted 3 months ago
    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
    Posted 3 months ago

    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!

  • Yonerfy•210
    @Yonerfy
    Submitted 3 months ago

    CSS GRID, VUE.JS

    #vite#vue#tailwind-css
    1
    Mr Rainman•130
    @phantomgizmo
    Posted 3 months ago

    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.
  • Kravchenko Evgeny•250
    @evgeniy8509
    Submitted 4 months ago

    Newsletter-sign-up-form-with-success-message

    1
    Mr Rainman•130
    @phantomgizmo
    Posted 4 months ago

    Looks good to me!

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

  • lulungar•120
    @lulungar
    Submitted 5 months ago

    using onclick in js

    1
    Mr Rainman•130
    @phantomgizmo
    Posted 5 months ago

    Desktop design looks good.

    But i dont see the mobile version of it.

  • jorge arevalo•50
    @JDev-8
    Submitted 5 months ago
    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
    Posted 5 months ago

    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!

  • Haruna Zakariyau•40
    @BabatundeXBT
    Submitted 5 months ago

    Social Link

    1
    Mr Rainman•130
    @phantomgizmo
    Posted 5 months ago

    Great work!

    Social links could be improved with a hover state

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub