This is a solution to the Advice generator app challenge on Frontend Mentor.
This challenge is supposed to be for people learning to work with APIs. The challenge is to build out an advice generator app and get it looking as close to the design as possible. I already have experience with APIs, so I used this challenge to test the Frontend Mentor platform and see how it works.
Desktop View
Hover State and Toast component
Mobile View
As mentioned before, I used this challenge to test the Frontend Mentor platform. I used the provided design and built the app using plain HTML, CSS, and JavaScript. To make the challenge more interesting for me, I added some extra features.
Despite the challenge not asking for it, I added a spinning animation to the button when it's clicked. (GIF coming soon)
I also added a toast component that appears when the user clicks the button. The toast component is a small notification that appears at the top of the screen and disappears after 3 seconds. Multiple toasts stack. The toast component is also animated. (GIF coming soon)
In addition to the toast component, I added a toggle component that allows the user to disable the toast notifications. The user's choice is saved in the local storage, so it persists even after the user refreshes the page.
- Frontend Mentor - @yourusername