Article Preview

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted 22 days ago

  Hey Josh, nice job.

  For the based on screen size question: you can use window.innerWidth;

  function () {
    const w = window.innerWidth;
    if (w <= 880) {
     this
    } else {
     that
    }
  };
  

  Rather than main, applying flex to the body for the future might be better for centering. Because there are going to be header, footer and etc. too. Since you used flexbox, you can also use items-center instead of the mx-auto.

  Nice transations, a little hover effect on the anchor tags might be nice too.

  1
• 

  Huy Phan•2,300

  @huyphan2210Posted 22 days ago

  Hi, @jboys

  I checked out your solution and I have some thoughts:

  • "How can I trigger different JavaScript functions (or the same function with different arguments) based on device type or screen size?" This can be handled by checking the screen size whenever users click the button. For example:

  function toggle() {
    const screenWidth = window.innerWidth; // Get viewport width
    if (screenWidth <= 1024) {
      // Code for handling panel
    } else {
      // Code for handling menu
    }
  }
  

  • You can also check the device type by using navigator.userAgent, but keep in mind that it’s not entirely reliable because user-agent strings can be inconsistent across devices and browsers.
  • Things could be simpler if #menu and #panel were the same element instead of separate ones—this could be managed using CSS alone. If you're open to it, I'd recommend diving into pure CSS to build layouts. It can provide a deeper understanding, which will also help when you use any CSS library (like Tailwind).

  Hope this helps!

  1