Color Searcher using JavaScript

Color Searcher:

    This post contains the source code of website called color searcher that show different colors and have a search bar at top to let the user search for a color. Depending upon the search term, color that matches with the search term will show while other will hide itself.

Source Code:

CSS:

  .colors {
	display: inline-block;
	width: 200px;
	height: 200px;
	border: 2px solid black;
}

#color1 {
	background-color: red;
}

#color2 {
	background-color: blue;
}

#color3 {
	background-color: yellow;
}

#color4 {
	background-color: green;

}
#color5 {
	background-color: purple;
}

#searchDiv {
	margin: 30px 0px;
}

#search {
	display: block;
	margin: auto;
}

#colors {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
  

JavaScript:

  // search bar where user type the search term
let searchBar = document.getElementById("search")

// All color elements that are present in DOM as object
let allColors = document.getElementsByClassName("colors")
console.log(allColors)

// Listen for input to seach bar
searchBar.addEventListener("input", function() {
	console.log(searchBar.value);


// Looping through all colors
for (let i = 0; i < allColors.length; i++) {

	// checking the current iterating color with search bar value entered by the user
	// If class name of the color element starts with the term enter by the user color exists otherwise it is not.

	// .item return the class name at 1 index which is actual color name.
	if (allColors[i].classList.item(1).startsWith(searchBar.value))
	{
		allColors[i].style.display = "inline-block"
	}
	else
	{
		allColors[i].style.display = "none"
	}
		}
})