This is a responsive Advice Generator App coded as an exercise for advanced HTML, CSS and JS practicing, proposed by the course DevQuest by Dev em Dobro. The project is from Frontend Mentor.
The aim of the exercise was to build the app's interface using HTML and CSS, as close as possible to Frontend Mentor's solution. The interface should be responsive to different screen sizes. The project consumes an API for generating advice. The user should get a new advice every time the dice button is clicked.
I made a modification to the original design, adding a title to introduce the functionality.
![image of project displayed on desktop](design/design-desktop.gif)
![image showing project on mobile size](design/design-tablet.gif)
![image of project displayed on mobile](design/design-mobile.gif)
- Live site URL: https://julianastahelin.github.io/advice-generator-app/
- Frontend Mentor - challenge: https://www.frontendmentor.io/challenges/advice-generator-app-QdUG-13db
- Frontend Mentor - my solution: https://www.frontendmentor.io/solutions/responsive-advice-generator-consuming-api-7Gk-2bnq_F
- HTML 5;
- CSS 3;
- JS.
- Consuming and API with JS
- Using CSS variables;
- Using absolute positioning;
- Positioning elements with CSS flexbox property;
- Using CSS transform property.