guys, I am trying to get my hamburger button to work but nothing is happening does anyone have any advice?
here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
<title>David Underwood</title>
</head>
<body>
<header>
<a href="/" class="header-logo">
<h3>Welcome</h3>
</a>
<nav>
<img class="union" src="Union.png" alt="menu link" />
</nav>
</header>
<div class="greet">
<div class="top-row-one">
<h2 class="porto">Portoflio</h2>
<h3 class="about-top">About</h3>
<h4 class="con">Contact</h4>
</div>
<div class="text-box">
<h1 class="hi-there">Hey there. I’m <br />David</h1>
<h2 class="hi-there2">
I’m a software <br />
developer
</h2>
</div>
<div class="greeting2">
<h1 class="header-title">Hey there. I’m David.</h1>
<h1>
<span>I’m a software developer</span>
</h1>
</div>
<p class="paragraph1">
I can help you build a product, <br />
feature or website Look through <br />
some of my work and experience! <br />
If you like what you see and have <br />
a project you need coded, <br />
don’t hestiate to contact me.
</p>
<div class="para-box">
<p class="paragraph2">
I can help you build a product , feature or website Look through some
of my work and <br />
experience! If you like what you see and have a project you need
coded, <br />
don’t hestiate to contact me.
</p>
</div>
<div class="icons">
<ul class="icon-row">
<li>
<a href="https://twitter.com/david630"
><img class="tweet" src="twitter.svg" alt="twitter picture"
/></a>
</li>
<li>
<img class="med" src="medium.svg" alt="medium picture" />
</li>
<li>
<a href="https://github.com/david63011"
><img class="git" src="github.svg" alt="git picture"
/></a>
</li>
<li>
<img class="angel" src="angellist.svg" alt="angelist picture" />
</li>
</ul>
</div>
<div class="top-info">
<h1 class="works">
My Recent <br />
Works
</h1>
<img class="Indicator" src="Indicator.png" alt="green line" />
</div>
</div>
<h2 class="works2">My Recent Works</h2>
<section class="grid-containers">
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
</section>
<div class="picture-box">
<section class="about">
<div class="about-me">About Me</div>
</section>
<section class="text-box1">
<div class="text-info1">
<p class="p2">
I can help you build a product, <br />
feature or website Look through <br />
some of my work and experience! If <br />
you like what you see and have a <br />
project you need coded, <br />
don’t hestiate to contact me.
</p>
</div>
</section>
<section class="text-box2">
<div class="text-info2">
<h2 class="text1a">
I can help you build a product , feature or website Look through
some of my work and
</h2>
<h3 class="text-info2b">
experience! If you like what you see and have a project you need
coded,
</h3>
<h4 class="text-info3c">don’t hestiate to contact me.</h4>
</div>
</section>
</div>
<button type="submit" class="resume-btn">Get My Resume</button>
<section class="new-end-section">
<ul class="about-me-end-section">
<li>
<div class="type-of-cards">
<div class="cat-images">
<img src="ball.svg" alt="picture of globe" />
</div>
<h2 class="cat-title">Languages</h2>
<ul class="cat-things">
<li>JavaScript</li>
<li>Ruby</li>
<li>Html</li>
<li>CSS</li>
</ul>
</div>
</li>
<li>
<div class="type-of-cards">
<div class="cat-images">
<img src="frame.svg" alt="picture of globe" />
</div>
<h2 class="cat-title">Frameworks</h2>
<div>
<ul class="cat-things">
<li>Bootstrap</li>
<li>Ruby on rails</li>
<li>RSpec</li>
<li>Capybara</li>
<li>Selenium</li>
</ul>
</div>
</div>
</li>
<li>
<div class="type-of-cards">
<div class="cat-images">
<img src="ball.svg" alt="picture of globe" />
</div>
<h2 class="cat-title">Skills</h2>
<ul class="cat-things">
<li>Codekit</li>
<li>Github</li>
<li>CodePen</li>
<li>GitLab</li>
<li>Terminal</li>
</ul>
</div>
</li>
</ul>
</section>
<footer class="contactpage">
<section class="projects-end">
<h2 class="textline1">I'm always</h2>
<h3 class="textline2">interested in</h3>
<h4 class="textline3">hearing about</h4>
<h5 class="textline4">new projects, so</h5>
<h6 class="textline5">if you'd like to</h6>
<h6 class="textline6">chat please get</h6>
<h6 class="textline7">in touch</h6>
</section>
<section class="projects-2-big">
<div class="new-paragraph">
I'm always interested in hearing about new projects, so if you'd like
to chat please get in touch.
</div>
</section>
<section class="form-section">
<div class="form-container">
<form action="https://formspree.io/f/myyvzkag" method="post">
<ul class="form-info">
<li>
<input
type="text"
maxlength="30"
name="user_name"
class="name-text-box"
id="full-name"
placeholder="Full Name"
required=""
/>
</li>
<li>
<input
type="email"
name="user_email"
class="name-last-text-box"
id="email"
placeholder="Email Address"
required=""
/>
</li>
<li>
<textarea
id="text-box"
name="message"
maxlength="500"
class="enter-form"
cols="30"
rows="10"
placeholder="Enter text here"
required=""
></textarea>
</li>
</ul>
</form>
<input type="submit" value="Get in touch" class="send-btn" />
</div>
<button type="submit" class="touch-btn2">Get in touch</button>
<img class="rec" src="rec.png" alt="long line" />
</section>
<div class="icon-row-footer">
<div class="tweet-connect">
<a href="https://twitter.com/david630"
><img class="tweet" src="twitter.svg" alt="twitter picture"
/></a>
</div>
<img class="med" src="medium.svg" alt="medium picture" />
<div>
<a href="https://github.com/david63011"
><img class="git" src="github.svg" alt="git picture"
/></a>
</div>
<img class="angel" src="angellist.svg" alt="angelist picture" />
</div>
<p class="email">david630@gmail.com</p>
<div class="black">
<img class="Indicator2" src="Indicator.png" alt="green line" />
</div>
</footer>
<!--Footer section end-->
<!--overlay section start-->
<div class="over">
<div class="cancel">
<a href="#"><img src=cancel.png alt="close-icon-button"></a>
</div>
<ul class="main-overlay-menu">
<li>
<a class="menu-item" href="#grid-containers">Portofolio</a>
</li>
<li>
<a class="menu-item" href="#about">About</a>
</li>
<li>
<a class="menu-item" href="#contactpage">Contact</a>
</li>
</ul>
</div>
</body>
</html>
Javascript
const hamburger = document.querySelector('.union');
const overlay = document.querySelector('.over');
const menu = document.querySelector('.main-overlay-menu');
hamburger.addEventListener('click', () => {
overlay.style.display = 'flex';
menu.style.display = 'block';
});
When I click the hamburger icon nothing happens. And I don't know why so any help would be appreciated. I think the javascript is ok but maybe its now so any help on that area would also be apprecaited