Solution that waits for new quotes

Community feedback

• 

  Luis Castillo•380

  @lipe11Posted over 2 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);
  })
  

  Marked as helpful

  1

  ---

  

  P

  Grog the Frog•480

  @GregLyonsPosted over 2 years ago

  @lipe11 Thanks for pointing that out. I've applied throttling in a previous project when making calls to an API, but I didn't know it well enough to realize that I should apply it here as well. The video was helpful, too!

  I realize now the issue: I was putting removal for the "--disabled" class on a 2-second timeout, but I was allowing such a timeout to be set on every click of the button, even when it was disabled. So if I clicked on the button rapidly, say:

  1. once, (when the button is enabled, which disables the button)
  2. again, one second later (while the button is still disabled)
  3. again, two seconds later (when it becomes enabled again),

  then the timeout from step 2 would enable the button at 3 seconds (only one second after step 3), rather than at 4 seconds (two seconds after step 3, as intended). Your suggestion is precisely the way to avoid this.

  0
• 

  Ivan•2,630

  @isprutfromuaPosted over 2 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 {
  

  Marked as helpful

  1

  ---

  

  P

  Grog the Frog•480

  @GregLyonsPosted over 2 years ago

  @isprutfromua

  I'll keep these BEM pointers in mind for the future, thanks!

  0

  

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  @GregLyons I am glad that my help was useful to you

  Cheers, peace and happy coding!

  0
• 

  Ivan•2,630

  @isprutfromuaPosted over 2 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();
  

  Marked as helpful

  1

  ---

  

  P

  Grog the Frog•480

  @GregLyonsPosted over 2 years ago

  @isprutfromua

  I didn't know about the <picture> element, thanks! I can think of a lot of challenges where I should've used that...

  0