Advice Generator App

Community feedback

• 

  Miroslav•180

  @miroslavdurinPosted over 2 years ago

  Hello and congratulations on completing this challenge!

  JS file looks fine to me, but since you are working with fetched data it would be useful to add a loading spinner while data is being fetched. You could also add some error-handling logic as well. If you need any help, let me know and I'll write you how I would do it :)

  Marked as helpful

  2

  ---

  

  Doston Nabotov•950

  @dostonnabotovPosted over 2 years ago

  @miroslavdurin would love to get some help from you. Great idea to add a loader while data is being fetched and also error-handling logic. Can you help me with that?

  0

  

  Miroslav•180

  @miroslavdurinPosted over 2 years ago

  @dostonnabotov This is one way how you can do it, the only problem is that API is kind of fast, so you can barely see the spinner, perhaps then it's not really necessary. Anyway here's the code for index.js:

  const btnEl = document.querySelector("[data-advice='generator']");
  const textEl = document.querySelector("[data-advice='text']");
  const idEl = document.querySelector("[data-advice='id']");
  const cardEl = document.querySelector(".card__advice");
  const cardNumEl = document.querySelector(".card__number");
  
  const loader = '
    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
  ';
  
  btnEl.addEventListener('click', () => {  
  
    fetch('https://api.adviceslip.com/advice')
    .then(response => {
      if (!response.ok) throw new Error('OOPS! Something went wrong...');
      cardEl.innerHTML = "";
      cardEl.insertAdjacentHTML("afterbegin", loader)
      return response.json()
      
    })
    .then(data => {
      cardEl.innerHTML = "";
      cardEl.insertAdjacentHTML("afterbegin", data.slip.advice)
      idEl.innerText = data.slip.id;
    }).catch(err=>{
      cardEl.innerHTML = "";
      cardNumEl.innerHTML = "";
      cardEl.insertAdjacentHTML("afterbegin", err.message)
    })
  })
  

  And you need to add this to your CSS file:

  .lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }
  .lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
  }
  .lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: -4px 0 0 -4px;
  }
  .lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
  }
  .lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
  }
  .lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
  }
  .lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
  }
  .lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
  }
  .lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
  }
  .lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
  }
  .lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
  }
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  

  I found loading spinner on this link: SPINNERS. I hope that helps...

  Marked as helpful

  1