This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
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
- Solution URL: FrontendMentor
- Live Site URL: advice-app.vercel
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
- Vue.js - JS framework
- Vite - Frontend tooling
- Tailwind - CSS framework
- Animate.css - CSS animations
- Axios - HTTP Client
I learn how to use async/await and axios to get data from API inside of the vue composition api setup
setup() {
const advice = reactive({ advice: "Wait for your advice", id: "" });
const loadAdvice = async () => {
let response = await axios.get("https://api.adviceslip.com/advice");
advice.advice = response.data.slip.advice;
advice.id = response.data.slip.id;
console.log(response.data.slip.advice);
}; //fetch advice from api
loadAdvice(); //generate the default advice
return { advice, loadAdvice };
},
- Website - Ramon A. Pereira
- Frontend Mentor - @ramonapereira
- Twitter - @ramonnzd