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.
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 on load page and by clicking the dice icon
- Code Source: (https://github.com/ervn12/adviceGenerator)
- Live Site URL: (https://advice-generatorapi.netlify.app/)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Desktop-first workflow
- Javascript
This API was a little tricky to use because I needed to fetch data on a click event and on page load. To fetch data on click I found that there are max 224 different advices. On page load I had to create a seperate function. Additionally, adding and removing a class to a rotating image on click gave me some trouble. To solve the issues I did the following:
function generateRandomID() {
return Math.floor(Math.random() * 224) + 1;
}
function getFetch() {
const url = `https://api.adviceslip.com/advice/${generateRandomID()}`;
}
To fetch data on load I did the following:
window.onload = function () {
const url = `https://api.adviceslip.com/advice`;
};
I wanted the button image to rotate 360 degrees on every click so I did the following:
let btn = document.querySelector('.image');
document.querySelector('.image').addEventListener('click', rotate);
function rotate() {
btn.classList.add('onclick');
}
}
function getFetch() {
const url = `https://api.adviceslip.com/advice/${generateRandomID()}`;
fetch(url)
.then(res => res.json()) // parse response as JSON
.then(data => {
console.log(data);
document.querySelector('h3').innerText = `advice #${data.slip.id}`;
document.querySelector('p').innerText = `"${data.slip.advice}"`;
btn.classList.remove('onclick'); // class removed after fetch occurs
})
.onclick {
cursor: pointer;
background-color: #52ffa8;
box-shadow: hsl(150deg 100% 66%) 0px 0px 36px;
transform: rotate(360deg);
transition: transform 0.5s ease-in-out;
}
As I do more projects, I want to be able to type less code to avoid repeating code. In this project I could have created a single function that fetched data on page load and on a click event, however I was not able to solve this issue.
Pig Game
|
Time Tracking Dashboard
|
Star Trek - A Field Guide to Aliens
|