Why my html(Javascript) code doesn't work in vsCode?

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?

//javascript
const open = document.getElementById('click');
const Skill = document.getElementsByClassName('Skill');
open.addEventListener('click' , function() {
    Skill.classList.add('show');
});

//html
  
<nav class="nav-bar">
    <div class="Logocontainer">
 <h1 class="logo"><a href="#">T&S</a></h1>
</div>
 <ul class="Menu">
     <li><a href="#home">Home</a></li>
     <li><a href="#">Team</a></li>
     <li id="click"><a href="#" id="click">My Skills</a></li>
     <li><a href="#about me">About Me</a></li>
    </ul>
</nav>
});

//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;
    }