This is a solution to the Advice Generator App Challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Generate random avice from API
- Live Site URL: https://kens-visuals.github.io/advice-generator-app/
- Solution URL: https://www.frontendmentor.io/solutions/advice-generator-app-with-react-and-styled-components-CkRsCR7Q9
- React
- Styled Components
- stoic-quotes API
- Semantic HTML5 markup
- CSS Flexbox
- CSS Grid
- Mobile-first workflow
This wasn't the first time of me working with API, but a similar project was on my list for a while. Now, thanks to Frontend Mentor's good-looking design, I've got a random Stoic advice generator that I'm using on a daily basis. Although the initial API was different, I wanted to build something that my friends and I will use on a daily basis. And when I add the website to my phone's home screen, it feels like a legit app. I'm pretty pumped on this, and as would Epictetus say, "He is a wise man who does not grieve for the things which he has not, but rejoices for those which he has.".
I'm planning on adding animation to this project, I'm currently learning Framer Motion. Perhaps, my up-and-coming projects will already include animations.
- stoic-quotes API - The API that's providing all these wonderful quotes.
- CSS Box Shadows - My go to list for box shadows.
- Medium - @kens_visuals
- CodePen - @kens-visuals
- Codewars - @kens_visuals
- Frontend Mentor - @kens-visuals