URL shortening landing page - Responsive - HTML, CSS, JavaScript, API

Community feedback

• 

  Yefree Valdez•840

  @yefreescodingPosted over 1 year ago

  👋 You've done an outstanding job! The live site mirrors the original design perfectly, and all the elements on the webpage (components, links, buttons, images, etc.) are well-organized. Allow me to offer a few suggestions to enhance the readability and comprehensibility of your code:

  • A good technique when adding classes to your components is using the BEM methodology. There's more like this but I think this is one of the best when you're a beginner:

  // BEM = Block Element Modifier
  .header{
  // styles
  }
  .header__nav{
  // syles
  }
  .header__links{
  // styles
  }
  .header__links-red{
  // styles
  }
  

  Here you can learn more about it BEM introduction

  • Remember, when you're coding, consider the possibility that others might review your work. This perspective will guide you to craft more polished code, with apt variable names, solid structure, swift troubleshooting, and efficient debugging. Here's an example to illustrate:

  // This event listener is designed to control the behavior of the navigation menu 
  // and its toggle button.
  
  document.addEventListener('click', e => {
      if (e.target.closest('div') !== burger && e.target.closest('div') === navbar) return;
      if (e.target.closest('div') !== burger && 
      e.target.parentElement.closest('div') === navbar) return;
      if (e.target.closest('div') !== burger && 
      e.target.parentElement.classList.contains('login')) return;
  
      if (e.target.closest('div') === burger && !navbar.classList.contains('active')){
          navbar.classList.add('active');
      } else if (navbar.classList.contains('active')){
          navbar.classList.remove('active');
      }
  })
  

  You can refractor this code to make more readable, the logic clearer and more concise.

  document.addEventListener('click', e => {
    const isBurgerClicked = e.target.closest('div') === burger;
    if (isBurgerClicked) {
      navbar.classList.toggle('active');
      return;
    }
    const isInsideNavbar = e.target.closest('div') === navbar;
    const isInsideNavbarParent = e.target.parentElement.closest('div') === navbar;
    const isInsideLogin = e.target.parentElement.classList.contains('login');
    if (isInsideNavbar || isInsideNavbarParent || isInsideLogin) {
      return;
    }
    navbar.classList.remove('active');
  });
  

  I hope this can help you become a better developer, you're doing really great! keep it up!!

  Marked as helpful

  0

  ---

  

  Giorgi•160

  @giorgi-2001Posted over 1 year ago

  @yefreescoding Thanks a lot! Your suggestions are very helpful. I really like the logic behind the click event. Haven't heard anything about BEM methodology before. Definitely gonna check it out and learn more about it.

  1