Solution that waits for new quotes

Community feedback

• 

  Luis Castillo•380

  @lipe11

  Posted about 3 years ago

  hi,

  I think the timeout worked pretty good. I tried to fast click the button but barely saw it act weirdly.

  However, if you want to get rid of the effect, you might want to try something like throttling. I'll leave a reference here. As a first approach, you could try something like this

  let waiting = false
  
  buttonWrapper.addEventListener("click", (e) => {
    if (waiting) return
    waiting = true
    getAdvice()
    setTimeout(() => {
      waiting = false
    }, 2000);
  })
  

  11

  Marked as helpful
• 

  Ivan•2,610

  @isprutfromua

  Posted about 3 years ago

  also i found some css issues: use only one type of selectors (class or id, but class is preferred)

  .card__text {
  
   ....
  #card-button {
  

  it's better to set class for an image

  #advice-button > img {
    display: block;
  }
  

  it's not good to use nesting selectors with bem methodology

  .card__wrapper > .card__header {
  

  12

  Marked as helpful
• 

  Ivan•2,610

  @isprutfromua

  Posted about 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:

  ✅ you can do it with HTML picture

  function changeDivider() {
    const dividerImg = document.getElementById('divider-img');
  
    if (window.innerWidth > 500) {
      dividerImg.src = 'images/pattern-divider-desktop.svg';
    }
    else {
      dividerImg.src = 'images/pattern-divider-mobile.svg';
    }
  }
  

  ✅ there is no need to prevent event inside the fetching function

  getAdvice(e) {
    e.preventDefault();
  

  11

  Marked as helpful