Skip to content
OverviewSolutions
3
Comments
2

Wonk

@Wonkers0Austin, Texas120 points

Hello 👋

Latest solutions

Latest comments

  • Wonk•120
    @Wonkers0

    Awesome, this is great for your first react app 👍

    There is a bit of overflow (scrollable area) with the calculator being I think a bit too tall, but it's not a big deal 👈

    One thing I noticed is that on the themes slider the circle moves rigidly left-to-right, maybe try adding a transition using CSS? 💨

    Over all cool solution, do you plan on using react in your future projects as well? 🤔

    Marked as helpful
  • Wonk•120
    @Wonkers0

    Hello 👋

    I've looked through your solution and it looks like there's some issues with your implementation, but no worries! 😇

    First, I like your front end code, it looks like you incorporated the design correctly; However on the mobile version the cards are positioned relative to the left side of the screen, so on slightly wider phones or tablets they won't be centered (see image): https://imgur.com/a/YGheFTg

    This is because of the following styles that you've added to the cards: .card_back { left: 3em; top: 1em; }

    and

    .card_front { left: 0; top: 6em; }

    Here is what you can add to position the cards correctly: https://pastebin.com/BidqgFUp (Frontend Mentor refuses to format the code correctly so view it on pastebin)

    Also, you were supposed to update the details on the image cards to be the same as the ones in the form using javascript, but if you chose not to then I understand 👍

    Finally, it seems that I cannot submit the form; Whenever I try I can see the confirmation menu appear and disappear instantly; This might be caused by your usage of html forms, maybe try having the confirm button at the bottom of the form as a button element instead of an input of type "form-submit", and then validate the form using an "onclick" event on the button.

    Best of luck, and if you have any questions, don't hesitate to ask! 🙋‍♂️

    Marked as helpful