Design comparison
Solution retrospective
My first API-related project. Made with HTML5, SASS, ReactJS (Axios, useState, useEffect).
What I've learned:
- basics of SASS (using variables and nesting)
- playing with media view for completely responsive design
- basics of useState
- basics of useEffect
- basics of GIT (commit, push) and Github
My considerations
The project took me considerably less time than my very first project (the Rating component). The first one took over 8 hours, whereas this took about 4 hours, mostly spent on getting the Axios.get working, and minutiae CSS details.
CSS: Positioning the button was difficult, played around with negative margins which didn't seem like an elegant solution. Researched alternatives and used transform, instead.
React: Could have used fetch instead of the Axios package, had difficulties implementing the get function and reading data on it. Lots of Googling and reading docs.
Thank you for taking the time to check my work out. I'm very open to any and all comments and suggestions ❤️
Community feedback
- @MatthijsvanderPlasPosted over 2 years ago
Awesome App! Inspiring me to look forward to sass and react. Code looks really clean.
I could only suggest changing the width to a more static display so it doesn’t change depending on the quote it displays. Only the height would adjust slightly.
Some delay on mobile before you can get a new quote, no idea how.
Keep it up!!
Marked as helpful1@nikavolkPosted over 2 years ago@MatthijsvanderPlas Thank you! ☀️
Ohh, I know about the width ... If I set it to a static width, there's this odd, ugly sort of transition when the media query gets triggered, which makes the card sort of jump, whereas if I set it to auto, the width of it just flows beautifully when resizing the display 🙈 But it will look better if I set a static width, true. Thanks! ❤️
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord