Skip to content
OverviewSolutions
14
Comments
67
wannacode
@kwngptrl

All comments

  • wannacode•740
    @kwngptrl

    I tried entering a decimal value in the Bill field and it wouldn't let me. Other than that, it's very good.

    Marked as helpful
  • Jstickz•330
    @Jstickz
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact that I was ale to stay on this project till the end because at a point it became difficult but I was able to find my path bit by bit.

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

    The challenges I encountered mainly was how to approach a problem when I come to a point that I have no idea how to solve. But with the help of tolls online I was able to discover answers to the problems and finally got the solutions.

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

    I am doing this alone currently and its not easy having to find answers on your own, I would like a community of people where I can always reach out and ask questions, share ideas and see the perspective of others on how to approach problems in different ways.

    Tip Calculator App

    2
    wannacode•740
    @kwngptrl

    Hello there. Your persistence is commendable. There are some issues that I noticed.

    1. The math for total/person is not adding up. You can look at the screenshot of the challenge to see the following values: A: Bill = $142.55 B: Select Tip% = 15% C: Number of People = 5 D: Tip Amount per Person = ~$4.27 (You got this correct) E: Total per Person = ~$32.79 (Yours was $21.38)

    I believe the equation to get total per person is: (bill * tip% / number of people) + (bill / number of people)

    1. Entering any value in the 'custom' field does not result in any change in the results section.

    2. There should also be an answer for when tip% is zero. It's the case where people want to split, but not want to tip.

    3. The reset button should change color if there is a result in that section.

    4. If you can, enlarge the design for the desktop version (the fonts are too small). The mobile version is fine.

    Also, I could not see the github repo for your solution if there is one. This is going a bit too long now.

    Marked as helpful
  • P
    Timothé Bissonnette•480
    @Fable54321
    What challenges did you encounter, and how did you overcome them?

    For whatever reason, I did desktop first on this one, still worked pretty well, but won't do it again ahah.

    my take on the tip calculator

    #react#react-router#sass/scss#vite
    1
    wannacode•740
    @kwngptrl

    Hmm, for some reason when I'm about to finish typing the final value in either field or selecting the Tip%, the entire thing just disappears and just leaves the background color. This happens in Chrome and Firefox.

    Marked as helpful
  • wannacode•740
    @kwngptrl

    Hi, a very good implementation. The only thing I could critique is the buttons and sometimes the error message in the number of people field do not clear out when the reset button is clicked.

  • wannacode•740
    @kwngptrl

    Nice implementation, but you missed input validation. Entering negative numbers in the input produced negative numbers as answers.

    Also, active states as specified in the design file was not carried out in css on, i.e. :hover { cursor: pointer } and when tip% button selected it should remain in a different color.

    Marked as helpful
  • wannacode•740
    @kwngptrl

    Hi, the caret for Company does not change direction when that submenu is open (unlike Features). The 'overlay' in mobile mode does not cover the entire viewport if the device is in landscape mode. Other than those, it's pretty good.

    Marked as helpful
  • wannacode•740
    @kwngptrl

    Layout works great. But it seems the math is incorrect for Tip Amount / Person. See the sample images in the design folder. So if... Bill = $142.55 Tip% = 15% Number of people=5 Tip Amount / Person = $4.27 or $4.28 <----- Total / Person = $32.79.

    Marked as helpful
  • wannacode•740
    @kwngptrl

    Negative numbers are somehow getting past and messing up the result. Also, if I put something in the custom field, navigate away (by mouse), and then come back I get NaN. I think it'd be better if any value that was previously there (or zero) would result in 0.00 in the right pane, or some value calculated based on what was previously in the custom field.

    It is nice that the up and down arrow keys are increasing/decreasing the values as expected, but you should set a limit so it won't go below zero.

  • wannacode•740
    @kwngptrl

    Clicking reset does not clear the bill and number of people fields in Firefox for me. Other than that, nice job!

  • wannacode•740
    @kwngptrl

    Wow, this behaves like an ATM machine in my country. I don't know if all ATM machines work this way, you know, the digits get added on from the right.

    I probably can't help you with the copy and paste thing, but I just had a quick look-see of your JS and noticed that perhaps you can condense lines 169 through 174 by combining peopleInput.value === "0" || peopleInput.value ==="".

    Also, I noticed that punching the values provided in the design by Frontend Mentor, namely, 142.55 for bill, 15% for tip, and 5 for number of people, it shows the expected result of $4.28 and $32.79. However, if I punch 15.00 in the custom field, I get $3.00 and $31.51 respectively. Now, if I use 100 for bill and 1 for number of people and punch the 5, 10, 15, 25, 50 buttons and punch in the same values in the custom field it WORKS PROPERLY, but not when bill is 200 or 300.

    I also noticed a slight shifting of the content when the input fields for bill, custom and number of people are focused, but since there is no proper CSS reset included, I could not find the cause in the little time I looked at your solution. Cheers.

    Marked as helpful
  • wannacode•740
    @kwngptrl

    For longField change the CSS from border: none; to border: 2px solid transparent; so the slight shifting of the content won't happen when they're active.

    Also, the error message does not disappear even if the field entries are filled. The reset button does not reset the bill and number of people fields.

  • wannacode•740
    @kwngptrl

    Hi, well done layout. However, clicking on 'reset' does not clear any of the buttons or the custom field in the tip% section. Therefore, any previous value there will be used in a future calculation without visual cue, thus confusing users.

  • wannacode•740
    @kwngptrl

    Don't know if it's a React thing, but clicking on the input fields puts the cursor ahead of zero. So doing so and typing automatically makes the value two digits already. Also, I think you forgot the error message.

    Other than that, layout is good and the calculation is on point.

  • wannacode•740
    @kwngptrl

    Nicely done. However, the chevron (the arrows near 'Features' and 'Company') does not return to their position. That is...

    1. If I click on Features, and then I click on Company, the menu(s) behaves as expected but the arrow does not.
    2. If I click on Features twice, or Company twice then it closes, unless it has been messed up because of number 1.
  • wannacode•740
    @kwngptrl

    I think the 'total / person' calculation is incorrect.

  • wannacode•740
    @kwngptrl

    Hi, your error messages seem to occur sporadically. They sometimes show and sometimes don't. For example, I put something long in 'First name' and nothing in the others, but the error still shows for first name. For email, the standard html error message appears and sometimes the programmed error message appears.

    Layout is pretty good though, but I think 'Learn to code by watching others' should be in larger font if this is view on a desktop PC.

  • wannacode•740
    @kwngptrl

    In desktop mode, the error messages overlap with the '!' icon. There's also a weird 'email@example.com' line overlapping 'others' on the left side. Also, perhaps add an @media around 500px for tablets and wider phones.

    Aside from those, it works okay.

  • wannacode•740
    @kwngptrl

    On my actual mobile device, Chrome and Firefox does not display 'share' container properly in landscape mode. Instead it displays the default 'share' bar in portrait mode (not the one with the down pointing arrow).

    On my desktop PC, it behaves differently, too. If I deploy the 'share' container in my browser in fullscreen, the proper floating 'share' container displays as it should, but resizing the window to simulate mobile it won't deploy anymore.

    Now, in dev tools using the mobile simulator, the issue is the same as on an actual mobile device.

    Other than those issues, the layout is great and accurate to the design specifications.