@RolandoParadaPuig
Posted
i like it but if you would like to improoveit a little bit you dont need the count down function, apiCooldown, the async/await have the "cooldown" on its own, try this:
/* here you change the btn classes */
rollBtn.classList.add("roll-btn-cd");
rollBtn.classList.remove("roll-btn-ok");
rollBtn.disabled = true;
/* here you call the API */
generatedAdvice();
/* then you change the btn class again */
rollBtn.classList.add("roll-btn-ok");
rollBtn.classList.remove("roll-btn-cd");
rollBtn.disabled = false;
*/ the function finish */
this the "right" way of dooing it, so the app doesn't have that "strange" behaviour when you allready get the data from the API, that delay at the end feels weird. oh and on your css add some transitions so it have more... smooth feeling on the btn
Marked as helpful
@malboyoo
Posted
@RolandoParadaPuig
I think there is some confusion because i named the function "apiCooldown", i just renamed it to "btnCooldown", i made it for the use to avoid pulling the same advice.
Thanks for the transition it's look really better.
@RolandoParadaPuig
Posted
@malboyoo oh no, i know why you use the apiCooldown, its just not needed, let me show it to you here:
"use strict"; const rollBtn = document.querySelector(".roll-btn"); const adviceId = document.querySelector(".advice-title"); const adviceParagraph = document.querySelector(".advice-paragraph"); const url = "https://api.adviceslip.com/advice"; rollBtn.addEventListener("click", () => { // you change the class to the btn rollBtn.classList.add("roll-btn-cd"); rollBtn.classList.remove("roll-btn-ok"); rollBtn.disabled = true; // you call the API generatedAdvice(); // the API finish the calls and you change the btn class again rollBtn.classList.add("roll-btn-ok"); rollBtn.classList.remove("roll-btn-cd"); rollBtn.disabled = false;
});
const generatedAdvice = async () => {
const response = await fetch(url);
if (response.status < 300) {
const advice = await response.json();
const generatedAdvice = advice.slip;
adviceId.textContent = ADVICE #${generatedAdvice.id};
adviceParagraph.textContent = "“" + generatedAdvice.advice + "”";
}
else {
console.log("error while fetching data, status :", response.status);
}
};
generatedAdvice();
try this and you will see what i mean
Marked as helpful
@malboyoo
Posted
@RolandoParadaPuig
actually it was my first time solution then i decide to put style on the button and add a setTimeout().
Without the setTimeout() button is not changing, it's instantly add/remove class.
I think i got some confusion or whatever ahah
@RolandoParadaPuig
Posted
@malboyoo it does change, the "problem" its that your internet its really fast and you dont notice the change, but its better not to set timeOuts unless you really need it (you whant to put an alert for some fixed time or something like that)
