Learning to components in next and typing data with typescript.
Mako
@MakoDoliAll comments
- @GomesViniciusSubmitted over 1 year ago@MakoDoliPosted over 1 year ago
Congrats with learning "next" chapter of react 🎉 I have just a little advice - try to remove 'height: 100vh' as I wasn't able to see whole page, upper and bottom parts were cut off. Looking forward to see this project with working functionality ☺
1 - @MiikePineSubmitted over 1 year ago
this is my first challenge submit.
I found some difficulties in the following things:
1- how to slip the white square in 2, and to put green square taking 50%. (not sure if was supposed to do like that) . btw, I would love to know how it should be done.
2- I know its easy, but some of the javacript logic.
PS. I would love to get some critics, to know what I should do better and what is not well done.
thank you all
Mike
@MakoDoliPosted over 1 year agoGreat job! especially for first submit :) I have a little advice: maybe you should try to set empty 'useState('')' for bill and people instead '0' and '1', because user has to delete those numbers to enter own value. or you can use 'onFocus' attribute on input and change useStates to empty with it. Good luck!
Marked as helpful0 - @Nix7amcmSubmitted over 1 year ago
Edit: I've updated my solution based on the recommendations in the feedback, and the reports. While doing this I tinkered with accessibility in general, and definitely learned a lot more in the process! I'm open to more feedback on this, whether things could be improved further, or if I've done anything wrong, particularly in the way I've added and hidden the h1 element.
The method I used to add the hover effect with the svg on the NFT logo image didn't allow the svg opacity to be 1, as it is tied to the background and therefore the opacity of that. I'd appreciate any feedback on this!
Thanks! 😃
@MakoDoliPosted over 1 year agoGreat job! and I would suggest few details to make it even greater:
- You can freely remove <a> anchor tag from 'logo-container' and use just {cursor: pointer} property for images.
- There is that little stubborn horizontal scroll at the bottom. I suggest to remove {min-width: 100vw} from 'body' styling. It will make scroll disappear and body will still remain of full width. I hope you find this helpful^^ Good luck!
Marked as helpful1 - @jayAEYSubmitted over 1 year ago
I had most of the project done after an hour or two, but ended up spending a couple weeks trying to figure out the animations. Are there any better ways to handle the animations?
@MakoDoliPosted over 1 year agoThis is the best animation I've seen so far for this countdown timer! Excellent work! And your code looks quite clean and compact, I prefer to use separate css files tho. Really impressed of the way you found to flip those stubborn cards.
1