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
- Sass
- JavaScript
- Mobile-first workflow
- Fetch API
Fetch function makes the API request, which returns a Promise that resolves with the API response.
const getAdvice = () => {
fetch('https://api.adviceslip.com/advice')
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong');
}})
.then(data => {
console.log(data.slip)
document.getElementById('advice-id').innerHTML = data.slip.id;
document.getElementById('advice-text').innerHTML = `"${data.slip.advice}"`;
}
)
}
getAdvice();