title: Why my html(Javascript) code doesn't work in vsCode?
body: <p>this is a simple code that helps HTML to execute a code that will open a box-modal. But for whatever reason, it doesn't seem to do anything while I write it in Vscode but it works perfectly fine while I write it in 'code-pen'. pls, tell meWhy my javascript is not working like that?</p>
  <pre><code>//javascript
  const open = document.getElementById('click');
  const Skill = document.getElementsByClassName('Skill');
  open.addEventListener('click' , function() {
      Skill.classList.add('show');
  });
  </code></pre>
  <pre><code>//html
    
  &lt;nav class=&quot;nav-bar&quot;&gt;
      &lt;div class=&quot;Logocontainer&quot;&gt;
   &lt;h1 class=&quot;logo&quot;&gt;&lt;a href=&quot;#&quot;&gt;T&amp;S&lt;/a&gt;&lt;/h1&gt;
  &lt;/div&gt;
   &lt;ul class=&quot;Menu&quot;&gt;
       &lt;li&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Team&lt;/a&gt;&lt;/li&gt;
       &lt;li id=&quot;click&quot;&gt;&lt;a href=&quot;#&quot; id=&quot;click&quot;&gt;My Skills&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=&quot;#about me&quot;&gt;About Me&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  });
  </code></pre>
  <pre><code>//css
  .Skill{
      display: flex;
       margin-left: 500px;
       background-color: black;
       width: 800px;
       height: 200px;
       border-radius:10px;
       color: white;
       font-weight: bold;
       align-items: center;
       justify-content: center;
       display: none;
      }
  .Skill.show{
    display:block;
      }
  </code></pre>