Hello @olena-ostapenko,
Your solution looks great,
A couple of small suggestions I have are, Instead of using an anchor tag for the button, it would be more semantically correct to use a button element. For instance:
<button class="decor-circle" aria-label="Update Quote">
<img class="dice" src="./images/icon-dice.svg" alt="">
</button>
For the animation it could be simplified in the CSS like so:
/* Defines the rotation animation */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
It might be beneficial to initiate the rotation at the beginning of your function and halt it upon either the successful retrieval of data or in the event of an error. This adjustment ensures the animation runs only while data is being fetched, rather than for a predetermined duration. This was the solution that I came to:
function retriveQuote () {
// Start the rotation animation
button.style.animation = "rotate 1s linear infinite";
fetch('https://api.adviceslip.com/advice')
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok")
}
return response.json();
})
.then(data => {
dynamicIdContainer.innerHTML = `Advice # ${data.slip.id}`;
dynamicQuoteContainer.innerHTML = `“${data.slip.advice}”`;
// Stop the rotation animation when data is received
button.style.animation = 'none';
})
.catch(error => {
console.log('There was a problem with the fetch operation:', error.message);
// Stop the rotation animation upon a fetch error
button.style.animation = 'none';
});
};
retriveQuote();
I hope you find these suggestions helpful! Let me know if you have any questions or if there's anything else I can assist with.
0
