Skip to content
OverviewSolutions
3
Comments
2
Wonk
@Wonkers0

All comments

  • Amulya Prakash•800
    @amulyalovescodingSubmitted almost 2 years ago

    Hello, Frontend Mentor community. This is my FIRST REACT APP & solution to the Calculator app using React JS & Bootstrap challenge.

    Excited to hear all feedback and advice!

    Calculator app using React JS & Bootstrap

    1
    Wonk•120
    @Wonkers0Posted almost 2 years ago

    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
    0
  • Jelissa S•80
    @LunarianDreamSubmitted almost 2 years ago

    The html and CSS was easy, the actual coding was not. I spent two days trying to get the javascript to work right with no success. Adding one thing breaks something else.

    I validated the form using a for loop which works perfectly, but when it's time to submit, the form either doesn't go through or the CSS changes either act wonky or don't go through, or the form isn't responsive at all.

    How can I stop the confirmation div from appearing even if the form isn't validated on click?

    Struggle Form Card Validation CSS Vanilla Javascript

    1
    Wonk•120
    @Wonkers0Posted almost 2 years ago

    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
    0