Skip to content
OverviewSolutions
10
Comments
4

Revin

@revin212Indonesia280 points

Front End Web Development Enthusiast

I’m currently learning...

HTML, CSS (SASS, Tailwind), JavaScript (React JS, Express JS, Gatsby, Next JS )

Latest solutions

View more solutions

Latest comments

  • Revin•280
    @revin212Posted over 2 years ago

    Hello, congrats on completing the project!

    I noticed on the 'preview site', I can only click the dice button once to load the advice content. After that, when I click the button again, the content doesn't change at all.

    I found this problem too before, and I solved it with:

    fetch(url, {cache: "no-store"})

    After I assign the second parameter on the fetch function, the problem is solved for me. I found that solution from here.

    I hope it can help you

    Marked as helpful
    0
  • Revin•280
    @revin212Posted over 2 years ago

    Hello there, congrats for completing the challange!

    I noticed that you can't click the dice button quickly to change the advice text, it have some delay. To reduce the delay, use :

    {cache: "no-store"}

    as the fetch function second argument :

    fetch('https://api.adviceslip.com/advice', {cache: "no-store"})

    It will make the fetched data not stored to the browser's cache

    I hope that helps you!

    Marked as helpful
    1
  • Revin•280
    @revin212Posted over 2 years ago

    Hello there, congrats for completing the challange!

    I noticed that you make the advice quotes manually by yourself, not fetching the data from the API. So I'll give you the script for fetching the data, and sowing it on the webpage :

    const adviceId = document.getElementById('advice-id');
const adviceText = document.getElementById('advice');
const diceBtn = document.getElementById('dice-btn');

let id = 0;
let advice = "";

function displayAdvice(){
    let dataFetch = fetch('https://api.adviceslip.com/advice', {cache: "no-store"})
        .then((response) => response.json())
        .then((data) => {
            id = data.slip.id;
            advice = data.slip.advice;
            adviceId.innerText = `Advice #${id}`;
            adviceText.innerText = `"${advice}"`;
        });
}
displayAdvice();

diceBtn.addEventListener('click', ()=> {
    displayAdvice();
})

    You can set the id of each element that used here :

    id='advice-id' for the title (in your case, the p tag)

    id='advice' for the content (in your case, the div tag with 'content' class)

    id='diceBtn' for the dice button (in your case, the div tag with 'dice' class)

    1
  • Revin•280
    @revin212Posted over 2 years ago

    Hello, nice job for finishing the project!

    You can center the card using "display: flex" on your body tag, "justify-content: center", and "align-items: center".

    use width:50% for the image and the description, and then, set the card max-width to 500px. Your problem is, the image and description didnt fill all the space (100%) of the div "cart" class.

    for the border-radius problem, this might help you:

    use "overflow: hidden;" on the card element (in your case, the div "cart" class).

    0