i've tried everything to get them to work together, this is my first time using js and i cant figure out what is wrong, no matter what I do my js code isn't doing anything.
Html
<!DOCTYPE html>
<html>
<head>
<title>Hot Beans</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/master.css">
<script src="scripts/scripts.js"></script>
<!--Tells the browser what character encoding is used-->
<meta charset="UTF-8">
<meta name="description" content="Hot Beans Website">
<!--keywords for SEO-->
<meta name="keywords" content="About us, Home page, Our history, Facts, Hot beans">
<meta name="author" content="Joshua Kelly">
<!--changes the wesite dimentions to fit a device accordingly-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/3335f31310.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="disable-select">
<nav class="navbar">
<div class="logo"><img src="images/logo.png" alt="Hot Beans Logo" title="Logo"></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="top-row">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Meet The Team</a></li>
<li><a href="#">Vacancies and Qualifications</a></li>
<li><a href="#">Web Dev Courses</a></li>
<li><a href="#">Apply</a></li>
</ul>
</div>
</nav>
</div>
<div class="html-js-css" ><img src="images/html-js-css.png" alt="Picture of Html, JS and CSS logo's" title="html-js-css"></div>
<h1 class="about-us">About Us</h1>
<p class="about-us-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti numquam fugiat iste harum reiciendis? Labore quidem architecto a et minus, ad blanditiis, maiores magni dolorum consectetur ab temporibus quae dolor? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem perspiciatis dolorem animi. Molestiae aspernatur totam perferendis, esse ex ipsam quasi quos consequuntur, sequi veniam dolores error provident soluta quas vitae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto doloremque tenetur facere aut necessitatibus eaque, velit porro hic, placeat suscipit molestiae! Totam eaque ab deleniti illo corrupti hic consequuntur repellat.</p>
<div class="logo-colour"><img src="images/logo-color.png" alt="Banner Hot Beans Logo" title="Hot Beans History"></div>
<div class="history-grid">
<div class="grid-item hist-image-1"><img src="images/beans-can.png"></div>
<div class="grid-item hist-text-1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus error saepe omnis corporis! Voluptates ipsam consequatur voluptatibus magni reiciendis perferendis non harum quis, eius tenetur laborum voluptatum nisi odio beatae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum optio rem blanditiis voluptatum quibusdam nostrum, quasi aut ex architecto dolores. Distinctio, minima? Dicta aperiam voluptatibus blanditiis ratione ullam facilis provident.</div>
<div class="grid-item hist-text-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rerum voluptate eaque vitae voluptatem, ipsam libero vero adipisci, a delectus quisquam expedita soluta sed nulla deleniti maiores distinctio asperiores eveniet? Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, fugit! Reprehenderit sunt ducimus velit, voluptates ab provident molestiae cupiditate delectus at dolores nisi eos totam doloribus earum fuga consectetur accusamus.</div>
<div class="grid-item hist-image-2"><img src="images/favicon.ico"></div>
</div>
<br>
<h1 class="share-us-on">Share Us On</h1>
<div class="share-btn">
<a href="#"><i class="fa-brands fa-square-twitter"></i></a>
<a href="#"><i class="fa-brands fa-square-facebook"></i></a>
<a href="#"><i class="fa-brands fa-square-instagram"></i></a>
Copy Link:
<a href="#"><i class="fa-solid fa-link"></i></a>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body{
margin: 0px;
padding: 0px;
font-family: 'Oleo Script', cursive;
}
img {max-width:50%;}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color:#D9BCA9;
}
.top-row ul{
display: flex;
margin: 0;
padding: 0;
}
.top-row li{
list-style: none;
}
.top-row li a{
text-decoration: none;
padding: 1rem;
display:block;
color: black;
}
.top-row li:hover{
background-color: #e6c6b1;
}
.toggle-button{
position:absolute;
top:.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: black;
border-radius: 10px;
}
@media(max-width: 600px){
.toggle-button{
display: flex;
}
.top-row {
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.top-row ul{
width: 100%;
flex-direction: column;
}
.top-row li{
text-align: center;
}
.top-row li a{
padding: .5rem 1rem;
}
.top-row.active{
display: flex;
}
}
.logo{
margin-right: auto;
max-width: 25%;
}
.disable-select{
user-select: none;
}
.html-js-css{
display: flex;
justify-content: center;
margin-top: 4rem
}
.about-us{
text-align : center;
margin-top: 3rem
}
.about-us-text{
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
.logo-colour{
display: flex;
justify-content: center;
margin-top: 3rem;
background-color: #D9BCA9;
}
.history-grid {
display: grid;
grid-template-columns: 25% 25%;
grid-template-rows: 50% 50%;
margin: 4rem;
text-align: center;
justify-content: center;
gap: 4rem;
}
.hist-image-1, .hist-text-1, .hist-text-2, .hist-image-2{
margin-top: auto;
margin-bottom: auto;
}
@media (max-width: 60em) {
.history-grid{
grid-template-columns: 1fr;
grid-template-rows: repeat(4, 25%);
gap:4rem
}
}
.share-us-on{
text-align : center;
margin-top: 9rem
}
.share-btn{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 217px;
padding: 20px;
background-color: #D9BCA9;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 16px;
}
.share-btn:hover{
transform: scale(1.1)
}
.share-btn a{
color: black;
font-size: 18px;
}
JS
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const topRow = document.getElementsByClassName('top-row')[0]
toggleButton.addEventListener('click', () => {
topRow.classList.toggle('active')
})
the code used to make the burger menu bar is mostly from a tutorial which involved using js for the first time, it worked perfectly for them but even when I pasted there exact code into vscode the burger menu does nothing when clicked on. I've tried different browsers, different file locations, nothing. the code shows no errors in any site I've checked or in vscode itself.
