Ok, long story short, I have a coding background but 0 html, css, JS work. I am taking an online file to build a website. I imbedded the CSS/HTML/JS into one file. It runs the HTML and CSS, but the JS does not activate. Code is below. (It creates a drop down menu) How can I make it auto run? (What I’ve googled the JS has to be “ran” and its not doing that. (yes ik its long, the part are separated like this: (This is all open source code, ik it works because I’ve tested it on sites)
//START OF REAL CODE
<html lang="en">
<head>
<style type = "text/css">
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
background: #f7f6ff;
}
h2 {
margin: 16px;
}
.container {
margin-top: 100px;
padding: 32px;
}
.select-box {
position: relative;
display: flex;
width: 400px;
flex-direction: column;
}
.select-box .options-container {
background: #2f3640;
color: #f5f6fa;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
order: 1;
}
.selected {
background: #2f3640;
border-radius: 8px;
margin-bottom: 8px;
color: #f5f6fa;
position: relative;
order: 0;
}
.selected::after {
content: "";
background: url("img/arrow-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
transition: all 0.4s;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
overflow-y: scroll;
margin-top: 54px;
}
.select-box .options-container.active + .selected::after {
transform: rotateX(180deg);
top: -6px;
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: #0d141f;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: #525861;
border-radius: 0 8px 8px 0;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box .option:hover {
background: #414b57;
}
.select-box label {
cursor: pointer;
}
.select-box .option .radio {
display: none;
}
/* Searchbox */
.search-box input {
width: 100%;
padding: 12px 16px;
font-family: "Roboto", sans-serif;
font-size: 16px;
position: absolute;
border-radius: 8px 8px 0 0;
z-index: 100;
border: 8px solid #2f3640;
opacity: 0;
pointer-events: none;
transition: all 0.4s;
}
.search-box input:focus {
outline: none;
}
.select-box .options-container.active ~ .search-box input {
opacity: 1;
pointer-events: auto;
}
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>GTCoding</title>
<link rel="stylesheet" href="style.css" />
</style>
<script type = "text/javascript"
const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");
const optionsList = document.querySelectorAll(".option");
selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
searchBox.value = "";
filterList("");
if (optionsContainer.classList.contains("active")) {
searchBox.focus();
}
});
optionsList.forEach(o => {
o.addEventListener("click", () => {
selected.innerHTML = o.querySelector("label").innerHTML;
optionsContainer.classList.remove("active");
});
});
searchBox.addEventListener("keyup", function(e) {
filterList(e.target.value);
});
const filterList = searchTerm => {
searchTerm = searchTerm.toLowerCase();
optionsList.forEach(option => {
let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
if (label.indexOf(searchTerm) != -1) {
option.style.display = "block";
} else {
option.style.display = "none";
}
});
};
</script>
</head>
<body>
<div class="container">
<h2>Video Category</h2>
<div class="select-box">
<div class="options-container">
<div class="option">
<input
type="radio"
class="radio"
id="automobiles"
name="category"
/>
<label for="automobiles">Automobiles</label>
</div>
<div class="option">
<input type="radio" class="radio" id="film" name="category" />
<label for="film">Film & Animation</label>
</div>
<div class="option">
<input type="radio" class="radio" id="science" name="category" />
<label for="science">Science & Technology</label>
</div>
<div class="option">
<input type="radio" class="radio" id="art" name="category" />
<label for="art">Art</label>
</div>
<div class="option">
<input type="radio" class="radio" id="music" name="category" />
<label for="music">Music</label>
</div>
<div class="option">
<input type="radio" class="radio" id="travel" name="category" />
<label for="travel">Travel & Events</label>
</div>
<div class="option">
<input type="radio" class="radio" id="sports" name="category" />
<label for="sports">Sports</label>
</div>
<div class="option">
<input type="radio" class="radio" id="news" name="category" />
<label for="news">News & Politics</label>
</div>
<div class="option">
<input type="radio" class="radio" id="tutorials" name="category" />
<label for="tutorials">Tutorials</label>
</div>
</div>
<div class="selected">
Select Video Category
</div>
<div class="search-box">
<input type="text" placeholder="Start Typing..." />
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I’ve tried what I can find on google but not figuring it out. I know the CSS is running with the HTML, but the dropdown function doesn’t work (which I know the JS does) If I got anything wrong here don’t hesitate to LMK I’m not very good with HTML.