if I get your question well, you are trying to remove all divs ( change the display to none) when the input is cleared. but remember that the input is an empty string and all div include that, so the first if is true. To overcome this, eliminate the instance when input = ”.
for (i = 0; i < recipeCard.length; i++) {
// added this
if( input == ''){
recipeCard[i].style.display = "none";
}
// end
else if (recipeCard[i].textContent.toLowerCase().includes(input)) {
recipeCard[i].style.display = "block";
} else if (!recipeCard[i].textContent.toLowerCase().includes(input) && recipeCard[i].style.display === "block") {
recipeCard[i].style.display = "none";
}
}
One way to meet your requirement is to check the input value length. If it is equal to 0 then hide the recipeCards. See the Js snippet below.
if(input.length <= 0) {
recipeCard[i].style.display = "none";
}
if (input == "") {
Array.from(recipeCard).forEach(card => {
card.style.display = "none"
});
}
I’m having trouble running javascript hide/show div using CSS classes, the initial state all the divs are hidden than when i type in the searchBar the name of the recipe (like the div ribs) it show only the ribs div and so far is working, but when i clear the searchBar its show all the div instead of hiding all of them.
function search_recipe() {
let input = document.getElementById('search').value
input = input.toLowerCase();
let recipeCard = document.getElementsByClassName('recipe__card');
for (i = 0; i < recipeCard.length; i++) {
if (recipeCard[i].textContent.toLowerCase().includes(input)) {
recipeCard[i].style.display = "block";
} else if (!recipeCard[i].textContent.toLowerCase().includes(input) && recipeCard[i].style.display === "block") {
recipeCard[i].style.display = "none";
}
}
}
.recipe__container {
padding-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.recipe__filters {
display: flex;
justify-content: center;
align-items: center;
column-gap: .75rem;
flex-direction: column;
}
.recipe__item {
cursor: pointer;
color: var(--title-color);
padding: .25rem .75rem;
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__items {
cursor: pointer;
color: var(--title-color);
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__card {
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
padding: 1rem;
border-radius: 1rem;
display: none;
}
.recipe__img {
border-radius: 1rem;
margin-bottom: var(--mb-1-25);
width: 230px;
}
.recipe-title-item {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-0-75);
}
.hide_categories {
display: none;
transition: all ease-in-out;
}
.categories {
display: grid;
padding-bottom: 2rem;
transition: all ease-in-out;
grid-template-columns: repeat(4, max-content);
}
#categories-button {
z-index: 9;
}
.cat {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
#categories-button {
margin-left: 1rem;
cursor: pointer;
font-size: 1.5rem;
}
.active-recipe {
background-color: var(--first-color);
color: var(--white-color);
}
input[type="text"],
input[type="email"],
textarea[type="text"],
select {
padding-left: 1rem;
}
.recipe {
display: block;
}
<h2 class="section__title">Recipe</h2>
<div class="recipe__filters">
<input type="text" onkeyup="search_recipe()" placeholder="search" id="search" class="section__search"></input>
<div class="cat">
<h3>Categories</h3>
<i class="uil uil-arrow-right" id="categories-button"></i>
</div>
<div class="hide_categories" id="h_categories">
<span class="all recipe__item active-recipe " data-filter='all'>All </span>
<span class="recipe__item" data-filter='.breakfast'>Breakfast</span>
<span class="recipe__item" data-filter='.dessert'>dessert</span>
<span class="recipe__item" data-filter='.burgersandwiches'>Burger & Sandwiches</span>
</div>
</div>
<div class="recipe__container container">
<!-- <div class="recipe__card mix ">
<img src="./asset/img" alt="" class="recipe__img">
<h3 class="recipe-title-item"></h3>
<a href="#" class="recipe__button">
More details <i class='uil uil-angle-right-b recipe__icon'></i>
</a>
</div> -->
<div class="recipe__card mix">
<img src="./asset/img/ramen_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Helllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/burrito_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">aelllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/pasta_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix burgersandwiches">
<img src="./asset/img/burger_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/chips_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/raspberry_brownies_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/steaks_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Zelllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/shrimp_pasta_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/ribs_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Ribs</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
</section>
