I did this code by seeing a website dev.to, I code each and every line of the code used in that project, but still, my toggle button is not working properly. I don't know why. if possible anybody plz explain that span tag in my code with the javascript code.

<style>
      @media only screen and (max-width: 768px) {

    .hamburger .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}
</style>
<header class="header">
      <nav class="navbar">
        <a href="#" class="nav-logo">jerome</a>
        <ul class="nav-menu">
          <li class="nav-item"><a href="#" class="nav-link">home</a></li>

          <li class="nav-item"><a href="#" class="nav-link">About</a></li>

          <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>

          <li class="nav-item"><a href="#" class="nav-link">services</a></li>
        </ul>
        <div class="humburger">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </div>
      </nav>
    </header>

    <script>
      const hamburger = document.querySelector(".hamburger");
      const navMenu = document.querySelector(".nav-menu");

      hamburger.addEventListener('click', mobileMenu);

      function mobileMenu() {
        hamburger.classList.toggle("active");
        navMenu.classList.toggle("active");
      }```