Why javascript doesnt work for me???
HTML <!DOCTYPE html> <html> <head> <title>ItsMyDoggo</title> <link rel="stylesheet" type="text/css" href="ItsMyDoggo.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <div class="logo">ItsMyDoggo</div> <ul class="navbar"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT ME</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">PROJECTS</a></li> <li><a href="#">CONTACT</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </header> <script src="app.js"></script> </body> </html> CSS * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #FFF597; } header { width: 100%; height: 80px; background-color: #FF7373; display: flex; justify-content: space-around; line-height: 80px; } header .logo { font-size: 30px; font-weight: 900; font-family: monospace; text-transform: uppercase; color: #fff; } header ul { display: flex; justify-content: space-around; width: 50%; margin-left: 10%; } header ul li { list-style: none; } header ul li a { text-decoration: none; font-size: 20px; font-weight: 900; color: #fff; font-family: sans-serif; } .burger { margin-top: 24px; display: none; } .burger div { width: 25px; height: 3px; background-color: #FFF597; margin: 5px; } @media screen and (max-width: 1024px) { body { overflow-x: hidden; } .burger { display: block; } header ul { position: absolute; display: flex; flex-direction: column; align-items: center; width:50%; top: 79px; height: calc(100vh - 80px); background-color: #FF7373; right: 0; transform: translateX(100%); } .nav-active { transform: translateX(0%); } } Javascript const navSlide = () => { const burger = document.querySelector(".burger"); const navbar = document.querySelector(".navbar"); burger.addEventListener('cl