I accept any kind of feedback!
EDIT: Ignore the paragraph below, people already helped me fix my problem with Firefox!
Also I would like to know why my page ins't working correctly on Firefox. The page shows me an advice, but does not let me get another one.
Try this
fetch('https://api.adviceslip.com/advice', { cache: 'no-cache' })
I dont know why not working on mozila.
add no cache property to fetch API
fetch('...', { cache: 'no-cache' })
Hi I finished this challenge and I've got a question. How can I make api call by default like as soon as you open the link? I hardcoded an advice for now. Please review my code and give some advice. I appreciate it. Thank you
You can click the button on the page load. I sent you a pull request in GitHub.
Hi there👋,
you did an amazing job, just to let you know there is no h9 tag in HTML, there is from 1 to 6.
happy coding
Please provide feedback :)
Hi there👋,
You did an amazing job 👏 this tip can help you improve your design:
happy coding
Hi there👋,
Did you notice that advice doesn't change while clicking the button, You can fix with this solution
export const GetAdvice = async () => {
const response = await fetch('https://api.adviceslip.com/advice', {
cache: 'no-cache'
})
.then((response) => response.json())
.then((json) => json['slip']);
return {
id: response['id'],
message: response['advice'],
};
};
Nice work & happy coding.
Hi there👋,
you don't need to add an advice id and increment it by 1, every time the user click the button should get random advice and https://api.adviceslip.com/advice give you random advice.
I propose this solution :
const getAdvice = () => {
fetch("https://api.adviceslip.com/advice", {
cache: 'no-cache'
})
.then((response) => response.json())
.then((data) => {
id.innerHTML = data.slip.id
content.innerHTML = '<q>'+data.slip.advice+'</q>';
});
};
dice.addEventListener('click', getAdvice)
happy coding
Hi there👋,
if you notice while clicking the button the quote doesn't change, this is how you can fix it
const getAdvice = () => {
fetch("https://api.adviceslip.com/advice", {
cache: 'no-cache'
})
.then((response) => response.json())
.then((data) => {
id.innerHTML = data.slip.id;
advice.innerHTML = data.slip.advice;
});
};
Happy coding
Hello!
This is my solution to the project. Every Feedback is appreciated and would help me a lot.
I added a little loading to the page.
Thanks!
Hi there👋
if you notice the quote don't change while clicking the button
you need to clear the cache every time you fetch the data fetch(URL, { cache: 'no-cache' }
try this
const getAdvice = () => {
loadScreen.classList.add("show");
fetch("https://api.adviceslip.com/advice", {
cache: 'no-cache'
}).then((response) => {
return response
.json()
.then((data) => {
adviceId.innerHTML = data.slip.id;
adviceText.innerHTML = data.slip.advice;
loadScreen.classList.remove("show");
})
.catch((error) => {
console.log(Error(error));
loadScreen.classList.remove("show");
});
});
};
For some reason I can't manage to make the code work on the button click but on page refresh it seems to work. Does anyone have an idea of what I'm missing there ? first time working with API and promises to, it was quite complicate to understand how to make things work
Hi there👋,
I have faced this problem before, you need to clear cache every time you use fetch API
This is the solution for your code
function getAdvice(){
fetch('https://api.adviceslip.com/advice', {
cache: 'no-cache'
}).then(response =>{
return response.json();
}).then(adviceData =>{
const adviceObj = adviceData.slip;
resDiv.innerHTML = `<p>${adviceObj.advice}</p>`;
resTitle.innerHTML = `ADVICE #${adviceObj.id}`;
console.log(adviceObj.advice);
}).catch(error =>{
console.log(error);
})
}
``
Hey everybody! 🙃
This is my first Frontend Mentor challenge. I enjoyed the process of building it and learnt a few valuable things along the way!
Thank you for all your feedback and guidance - you guys really made a big difference! 🤩
"Hi ho, hi ho, to the next challenge I go..." 🎶
Happy coding!!
Hi there👋,
you did an amazing job, you can improve your design by giving the container max-width, and to make sure the design does not break on the large screen, you can verify that by zooming out (ctrl -)
Happy coding.
What is the best method for creating a responsive website?
Hi there👋, You need to add a little more detail to your code, the following tips will help you:
and for your question, the best way is to start the design with the mobile-first.
Happy coding.
