Skip to content
OverviewSolutions
10
Comments
4
Revin
@revin212

All comments

  • JAILBREAK•60
    @JAILBREAK-101Submitted almost 2 years ago

    Hello guys, this is my second Frontend Mentor challenge completed and submitted. I found nothing complicated while building this project because I had spent some time with Javascript Promises and the fetch API method in Javascript. This enabled me to understand Asynchronous JS to some extent of applying it to Real World Projects, such as this one. I am so happy that i'm starting to submit challenges that I started and had finished, and the ones I just started and recently finished. Still taking on more challenges, to grow stronger in my Frontend Skills. Please feel free to support me with your recommendations about my project, and feedback on how I applied my code to this project and other ones coming. Thank you.

    MY OWN ADVICE GENERATOR WITH JS AND API.

    1
    Revin•280
    @revin212Posted almost 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 almost 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 almost 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
  • Endo_hr•60
    @EndoHrSubmitted almost 2 years ago

    During this challenge, I faced too many questions and problems. If you r able to answer, please help me to figure.

    1. To centering that card, I used position: relative (left, top). But I think it's not good idea to do responsive thing. I thought I had to use display: flex then (justify, align to center). But when I did that I don't know my align-items didn't work, so I just Googled and found I had to set the height of the card 100%, but to do that, I can't use border-radius (cuz my height is now 100%). I had more problems, but this one is the hardest one to figure.

    Product-preview-card-component

    4
    Revin•280
    @revin212Posted almost 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