Card component with using fetch API

Community feedback

• 

  Ivan•2,610

  @isprutfromua

  Posted over 3 years ago

  One more thing: you are not catchnig an await errors, if server is down or smthing like this. Please handle it inside try / catch

  10

  Marked as helpful
• 

  Ivan•2,610

  @isprutfromua

  Posted over 3 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills🛠️

  your solution looks great, however, if you want to improve it, you can follow these steps:

  ✅ animation looks broken. Keyframes should looks like this

  @keyframes slidein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  

  ✅ move function declaration outside of the eventlistener adding

  dice.addEventListener("click", function () {
    async function getAdvice() {
      const adviceObject = await fetch("https://api.adviceslip.com/advice");
      const realAdvice = await adviceObject.json();
      const { advice, id } = realAdvice.slip;
      adviceText.classList.add("animate");
      adviceText.innerText = `"${advice}"`;
      adviceId.innerText = `#${id}`;
    }
    getAdvice();
    adviceText.classList.remove("animate");
  });
  

  ✅ don't use tag selectors. When you add CSS directly on tags, your markup can’t change. Your style is tightly coupled to your DOM, and any change increases the risk of breaking things.

  h1 {
    color: hsl(150, 100%, 66%);
    letter-spacing: 3.5px;
    text-align: center;
    font-size: 0.8rem;
    padding: 1.5rem 0 1rem 0;
  }
  p {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: hsl(193, 38%, 86%);
  }
  
  

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  10

  Marked as helpful
• 

  Shuaib•640

  @JustShuaib

  Posted over 3 years ago

  Thank you so much Ivan, I really appreciate you taking your time and going through my code. 😊 For the animation, I actually saw it on MDN used that way, that was why I used it. But I've changed it.

  By moving the function declaration outside the event listener, you mean I should define the function elsewhere and call it inside the event listener right? I'll handle the errors now too. I didn't think of it while implementing the code😄 I really appreciate your feedback and I'm definitely upvoting!

  00