This is a solution to the Advice generator app challenge on Frontend Mentor.
Users are 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
- Mobile-first workflow
- Vue - JS library
- Nuxt.js - Vue framework
- Tailwind - For styles
I learned how to make API calls in Nuxt from external APIs:
async function getQuote() {
try {
const timestamp = new Date().getTime();
const url = `https://api.adviceslip.com/advice?_=${timestamp}`; // Prevent caching
const response = await fetch(url);
const data = await response.json();
advice.value = data.slip.advice;
id.value = data.slip.id;
} catch (error) {
console.error('Error fetching advice:', error);
}
}
- Vue docs
- Cool Tailwind video
- The Mozilla references for HTML and CSS are always useful.
- LeetCode - @SerbanUntu
- Github - @SerbanUntu
- Frontend Mentor - @SerbanUntu