Skip to content
Submitted 3 months ago

Tip calculator app using React

#bem#react
P
Rafael Dias•1,040
@rafaeldgeo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud to use React in this challenge because it's requires several interactions. I would like to plan more each component.

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

The difficulty this challenge it's because there's several interactions with different components. It's necessary manipulate each correctly, then I had that understand the function of each them.

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

I would like help with React

Community feedback

  • verakissyou17•500
    @verakissyou17Posted 3 months ago

    @rafaeldgeo for styling in React you can use styled components. Here is a video that can help you 👉 styled components

    Marked as helpful
    1
    P
    Rafael Dias•1,040
    @rafaeldgeoPosted 3 months ago

    @verakissyou17 Thanks! I will see this video.

    0
  • Dylan Heslop•2,340
    @dylan-dot-cPosted 3 months ago

    Cool solution bro but there are a lot of things you can improve on.

    1. Folder Structure: if you gonna have a separate css file for each component it's better to have a folder that has the Js code and css styles for each component.
    2. Responsiveness: The website isn't fully reponsive on small devices, it looks the same as on desktop...
    3. Class combination: There is a better way to join class names, you could use a library like clsx or something else.
    4. Your solution is good, but I feel you make it a bit too complex in terms of the code you wrote.

    Overall this is a good solution. I completed this solution with Vue, so tell me what you think about it when you take a look.

    Marked as helpful
    1
    P
    Rafael Dias•1,040
    @rafaeldgeoPosted 3 months ago

    Hi @dylan-dot-c,

    Thank you for your observations. They are very important for me. This is my third challenge using react. I have to learn many things yet.

    I used three breakpoints (1440px, 768px and 375px), I like to use responsive fluid, so I avoid hard break as Bootstrap and Tailwind. The layouts change only in this breakpoints.

    Congratulation for you challenge! It's very good. My suggestion, in bill input, number people input and custom input, you could avoit values negatives and letters. When the user click in radio buttom, you could clearn custom input.

    Sorry my English!

    0
    Dylan Heslop•2,340
    @dylan-dot-cPosted 3 months ago

    @rafaeldgeo No worries bro, just make sure that the queries match to correct sizes as my phone is a little over 375 so I see a squished 2 column layout.

    Take care God bless

    1
  • verakissyou17•500
    @verakissyou17Posted 3 months ago

    Congratulations for your work on this project! 👏

    1

Please log in to post a comment

Log in with GitHub

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