It is the third challenge I have done! :D
I had some issues trying to keep the footer fixed at the bottom. If possible, I would appreciate your feedback about it and what else you see that I can improve!
Anyway, I really appreciate any help you can provide. ☺️
Each individual card aren't supposed to have rounded corners. It’s a little distracting that the whole card changes size when you hover over the button. The page is not responsive and breaks on mobile devices.
Your closing div was missing for the div opened on line 19.
It's not quite done yet. There is no border radius on the container class holding the cards. You need to remove the border from the learn more buttons. It breaks on some common devices like the IPhone 8 Plus.
Any feedback would be appreciated. In particular:
Your border-radius isn’t correct when the cards go vertical. Looking at your code, the section tag should probably be a main. It’s semantically not a section.
.card--container { display: flex; border-radius: 10px; overflow: hidden; }
This will apply the border-radius and works better than styling the individual cards with a radius. Then just remove where you implemented border-radius on the individual cards.
This is the most JavaScript I've written for a challenge! Should the display show NaN and Infinity or just '0.00' when the inputs aren't filled in? I think I started out with an organized approach, but by the end, felt it could be simplified! Should I have kept more variables on a global scope? Should I have had more functions?
It doesn’t calculate. It just displays NaN and Infinity for me. Tip Amount and Total should never read NaN or Infinity. You can use an If to display the placeholder text when the calculations equal NaN or Infinity. The input fields shouldn’t allow non-numerical character input except for a comma and period.
The responsiveness breaks, and the app is clipping on iPhone 12 Mini and Galaxy S20. Both have a max-width of 360px in portrait mode. I understand is hard to know if you don't have an app that displays multiple devices for you.
Hey everyone! Just finished this challenge and would love some feedback. I have an issue with the hover state of the learn more links, the grid expands when hovered and I am not sure why.
Your solution is not responsive. Best practice is to start with mobile first.
hello! im really happy with this one since i finished it in less than 3h Yeayy!!! \o/.
But i have a couple of questions regarding some issues that ive encountered.
body { display: flex; flex-direction: column; justify-content: center; align-items: center; }
when i media query flex to transition from mobile to desktop, the cards begin split from one each other instead of staying together. why is this happening? and why the snippet above is making it work? im not quite sure i understand it completely.
and the second one is that if i use a container in order to border all my cards once like the snippet below
.container{ border-radius: 10px; overflow: hidden;
when i eventually reach the media query and have to flex the container, since the cards reside inside it, the border property stops working and my cards appear without border-radius, and because of that, i had to give border radius on cards 1/3 and include a media query for 1/3 again since the border radius shifts from when it goes column>row.
if anyone could give me an answer as to why these things are happening and how i could solve these issues i would be extremely grateful!!
cheers!
It's because main doesn't have a width. I added this and commented out the body.
main { width: fit-content; margin-inline: auto; }
Practicing React. If you have any suggestions, feel free to comment.
Have you considered removing the arrows in the number input fields since they aren't in the original design? You might also limit the number of people field to not accept less than 1.
Also might prevent the calculation when the output will be infinity.
Overall nice job!
any feedback is welcome :).
The double-tap to zoom feature on mobile makes using the calculator hard. It's not hard to disable. Keyboard input seems incomplete, '.', 'enter', 'backspace' and 'return' did nothing.
