This is a solution to the Advice generator app challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Generate a new piece of advice by clicking the dice icon
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Fetch API
This is the 2nd time I'm using picture tag to show different images for different screen sizes.
<picture>
<source media="(min-width: 500px)" srcset="./images/pattern-divider-desktop.svg">
<img src="./images/pattern-divider-mobile.svg" alt="divider">
</picture>
This is the first time I'm using cache property for fetchAPI
await fetch("https://api.adviceslip.com/advice",{ cache: "no-cache" })
- Cache Property - This is the link for cache property at Mozilla's website.
- Github - @doganfurkan
- Frontend Mentor - @doganfurkan