We Keep Coding

Display no results message for input filtering a list of cards

I have an input field which is filtering a list of cards.
I can't seem to figure out how to display a message when all the div's are assigned the class display-none. Is their a way to check if any of the div's inside a parent div contain a class? Maybe I am approaching this incorrectly. Thanks for your help!
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
let cards = cardContainer.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
let noResults = document.getElementById("no-results");
let title = cards[i].querySelector(".card-content div.card-title");
if (title.innerText.toUpperCase().indexOf(input) > -1) {
cards[i].classList.remove("display-none");
cards[i].classList.add("displaying");
} else {
cards[i].classList.add("display-none");
cards[i].classList.remove("displaying");
checkDisplay();
}
}
function checkDisplay() {
let noResults = document.getElementById("no-results-message");
for (let i = 0; i < cards.length; i++) {
if (cards[i].classList.contains("displaying")) {
console.log("something");
} else {
console.log("no cards are displaying");
}
}
}
}
.display-none {
display: none;
}
.displaying {
display: block;
}
<div class="search-form" style="margin: 1.2em 0 1.2em 0">
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
</div>
<div class="card-container" id="cards">
<div class="no-results-message display-none" id="no-results">There are no results.</div>
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Vehicle on Private Property</li>
<li>Vehicle on Public Property with a license plate</li>
<li>Vehicle on County roadway</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
<!-- -- end of container ---->
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113954');">
<br>
</div>
<div class="card-content">
<div class="card-title">Adopt-a-road Pick Up Request</div>
<div class="card-body">Request bag pick up or sign up for the adopt a road program.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i style="font-size: 12px;" class="fa fa-chevron-down" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Existing approved participant pick up</li>
<li>Apply for the adopt-a-road program</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
</div>

Changing display only with .display-none in css works more clearly
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
const cards = document.querySelectorAll(".card");
[...cards].map((card) => {
const noResults = document.getElementById("no-results");
const title = card
.querySelector(".card-content div.card-title")
.innerText.toUpperCase();
title.includes(input)
? card.classList.remove("display-none")
: card.classList.add("display-none");
checkDisplay();
});
function checkDisplay() {
const noResults = document.getElementById("no-results");
const result = [...cards].filter((card) =>
card.classList.contains("display-none")
);
cards.length === result.length
? noResults.classList.remove("display-none")
: noResults.classList.add("display-none");
for (let i = 0; i < cards.length; i++) {
if (cards[i].classList.contains("display-none")) {
console.log("no cards are displaying");
} else {
console.log("something");
}
}
}
}
.display-none {
display: none;
}
<div class="search-form" style="margin: 1.2em 0 1.2em 0">
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
</div>
<div class="card-container" id="cards">
<div class="no-results-message display-none" id="no-results">There are no results.</div>
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Vehicle on Private Property</li>
<li>Vehicle on Public Property with a license plate</li>
<li>Vehicle on County roadway</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
<!-- -- end of container ---->
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113954');">
<br>
</div>
<div class="card-content">
<div class="card-title">Adopt-a-road Pick Up Request</div>
<div class="card-body">Request bag pick up or sign up for the adopt a road program.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i style="font-size: 12px;" class="fa fa-chevron-down" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Existing approved participant pick up</li>
<li>Apply for the adopt-a-road program</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
</div>

How can I use JavaScript between different html components?

The components are these.
My function in JavaScript is this:
function render(){
for (let index=1; index <=6; index++){
nintendoDIV.innerHTML+=`${HTMLnintendoProduct(index)}`;
pcDIV.innerHTML+=`${HTMLpcProduct(index)}`;
playDIV.innerHTML+=`${HTMLplayProduct(index)}`;
xboxDIV.innerHTML+=`${HTMLxboxProduct(index)}`;
}
In the index, I have placed it in the body to call it.
**<body onload="render()">**
<app-root></app-root>
<script src="assets/js/prod.js"></script>
</body>
In my home.component.html I have the following
<div class="container marketin">
<br>
<h2 id="nintendo">Nintendo</h2>
<hr>
<div class="row" id="nintendoDIV"></div>
<h2 id="pc">PC</h2>
<hr>
<div class="row" id="pcDIV"></div>
<h2 id="play">PlayStation</h2>
<hr>
<div class="row" id="playDIV"></div>
<h2 id="xbox">Xbox</h2>
<hr>
<div class="row" id="xboxDIV"></div>
<p class="float-right container">
<a class="text-success" href="#">ARRIBA</a>
</p>
<hr class="featurette-divider">
</div>
The products of that function should appear

Increment a random number with a button?

I'm new to coding and I have the following problem:
I created a random number and I have it in a p tag which has a class, then I tried to increment this number by clicking on a button. This is my code so far:
$(document).ready(function(){
let films = JSON.parse(movies);
for (let i = 0; i < films.length; i++){
let movie = `
<div class="container">
<div class="poster">
<img class="pic" src="${films[i].image}">
</div>
<div class="text-box">
<div class="details">
<h2>${films[i].title}</h2>
<p>${films[i].releaseDate}</p>
<p>Genre: ${films[i].genre}</p>
<p>Director: ${films[i].director}</p>
</div>
<div class="like-box">
<input type="button" class="btn" value="Like 👍" number="${i}"></input>
<p class="counter"></p>
</div>
</div>
</div>
`;
$("#main2").append(movie);
$(".counter").text(Math.floor((Math.random()*100) + 1));
}
$(".btn").click(function() {
let el = parseInt($(".counter").text());
$(".counter").text(el+1);
})
});
The problem is, that if I click on the button instead of getting for example: 19 then after the click 20, what I get is 191919191920. So basically the button works, but not exactly how I want it to work. Can anybody help me please?

for (let i = 0; i < films.length; i++){
after this for loop is done, there will be films.length elements in dom with class counter.
and what this $(".counter").text() will return is concatenation of all text in elements with classes counter. That's why you got 191919191920.

Changes you would need to do:
Add new class to the container increaseing row count. This is mandatory to identify which movie you're on and increase the like value.
<div class='container row-" +i+ "'">
Then add onClick event to the like button to pass which row you're on. This is to identify which counter to increase the value.
<input type="button" class="btn" value="Like 👍" number="1" onclick="incrementLikes('row-" +i+ "')"></input>
$(document).ready(function() {
$(".counter").text(Math.floor((Math.random() * 100) + 1));
});
function incrementLikes(rowId) {
let mainRow = document.getElementsByClassName(rowId)[0];
let counter = parseInt(mainRow.getElementsByClassName('counter')[0].innerHTML);
mainRow.getElementsByClassName('counter')[0].innerHTML = counter + 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container row-1">
<div class="poster">
<img class="pic" src="">
</div>
<div class="text-box">
<div class="details">
<h2>Film Title 1</h2>
<p>13/06/2020</p>
<p>Genre: Action</p>
<p>Director: John Doe</p>
</div>
<div class="like-box">
<input type="button" class="btn" value="Like 👍" number="1" onclick="incrementLikes('row-1')"></input>
<p class="counter"></p>
</div>
</div>
</div>
<div class="container row-2">
<div class="poster">
<img class="pic" src="">
</div>
<div class="text-box">
<div class="details">
<h2>Film Title 2</h2>
<p>13/06/2020</p>
<p>Genre: Action</p>
<p>Director: John Doe</p>
</div>
<div class="like-box">
<input type="button" class="btn" value="Like 👍" number="1" onclick="incrementLikes('row-2')"></input>
<p class="counter"></p>
</div>
</div>
</div>
<div class="container row-3">
<div class="poster">
<img class="pic" src="">
</div>
<div class="text-box">
<div class="details">
<h2>Film Title 3</h2>
<p>13/06/2020</p>
<p>Genre: Action</p>
<p>Director: John Doe</p>
</div>
<div class="like-box">
<input type="button" class="btn" value="Like 👍" number="1" onclick="incrementLikes('row-3')"></input>
<p class="counter"></p>
</div>
</div>
</div>

The problem is your selector ".counter"
$(".counter").text returns the combined string value of all elements that have the class ".counter"
I have modified your code using selectors specific to the clicked button
let films = JSON.parse(movies);
for (let i = 0; i < films.length; i++){
let buttonId = "button" + i;
let movie = `
<div class="container">
<div class="poster">
<img class="pic" src="${films[i].image}">
</div>
<div class="text-box">
<div class="details">
<h2>${films[i].title}</h2>
<p>${films[i].releaseDate}</p>
<p>Genre: ${films[i].genre}</p>
<p>Director: ${films[i].director}</p>
</div>
<div class="like-box">
<input id="${buttonId}" type="button" class="btn" value="Like 👍" number="${i}"></input>
<p class="counter"></p>
</div>
</div>
</div>
`;
$("#main2").append(movie);
$("#${buttonId}.btn").next().text(Math.floor((Math.random()*100) + 1));
}
$("#${buttonId}.btn").click(function() {
let el = parseInt($("#${buttonId}.btn").next().text());
$("#${buttonId}.btn").next().text(el+1);
})

How to retain the border of selected bootstrap cards even on page refresh?

I am having 6 bootstrap cards now I wrote code for storing the every card details in the local storage and also on click the card will get a border now I want is on page refresh I should retain the border of the card
My html code is:
<div class="row">
<div class="col-4" onclick="getGoal(1)">
<div class="card4 mt-3" id="room_1" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_1"><b>I am redecorating</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(2)">
<div class="card4 mt-3" id="room_2" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_2"><b>I am Moving</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(3)">
<div class="card4 mt-3" id="room_3" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_3"><b>I need help with a layout</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(4)">
<div class="card4 mt-3" id="room_4" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_4"><b>I am looking for a species</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(5)">
<div class="card4 mt-3" id="room_5" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_5"><b>I am moving with someone</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(6)">
<div class="card4 mt-3" id="room_6" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_6"><b>Other</b></p>
</div>
</center>
</div>
</div>
</div>
<!--Loop ends-->
<a class="link mt-3"><u>Dont see your room?</u></a>
<div class="row mb-3">
<div class="col-4 mr-5">
« Home
</div>
<div class="col-4 ml-5">
Next »
</div>
</div>
My JS code:
$(document).ready(function(){
// goals
$("#room_1").click(function(){
$("#room_1").toggleClass("blue");
});
$("#room_2").click(function(){
$("#room_2").toggleClass("blue");
});
$("#room_3").click(function(){
$("#room_3").toggleClass("blue");
});
$("#room_4").click(function(){
$("#room_4").toggleClass("blue");
});
$("#room_5").click(function(){
$("#room_5").toggleClass("blue");
});
$("#room_6").click(function(){
$("#room_6").toggleClass("blue");
});
$("#room_7").click(function(){
$("#room_7").toggleClass("blue");
});
$("#room_8").click(function(){
$("#room_8").toggleClass("blue");
});
$("#room_9").click(function(){
$("#room_9").toggleClass("blue");
});
});
var goal = [];
var goalIds = [];
function getGoal(id) {
if (goal.length > 0) {
var data = {
id: id,
content: $("#cont_" + id).text()
}
var x = JSON.stringify(data)
var index = goal.indexOf(x)
if (index == -1) {
goal.push(x);
} else {
goal.splice(index, 1);
}
} else {
var data = {
id: id,
content: $("#cont_" + id).text()
}
var x = JSON.stringify(data);
goal.push(x);
}
localStorage.setItem("goal", JSON.stringify(goal));
goalIds = goal.map(element => JSON.parse(element).id);
console.log(goalIds);
issample();
}
function issample() {
$("#goal").val(goalIds);
console.log(goalIds);
}
function initGoals() {
var storedNames = JSON.parse(localStorage.getItem("goal") || '[]');
goalIds = storedNames.map(element => JSON.parse(element).id);
}
My codepen link is: https://codepen.io/lakshmi123__/pen/xxbzwNP

function initGoals() {
goal = JSON.parse(localStorage.getItem("goal") || '[]');
goalIds = goal.map(element => JSON.parse(element).id);
goalIds.forEach(function(i){$("#room_"+i).addClass('blue');});
}
initGoals();
but event then, you are filling your goalIds variable right with that function,but you are forgetting to fill the goal variable too ;)

How to change font color of a selected div

just need some help on how to change the font color of the title for the current div being selected.
See my code below:
HTML
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="photography" class="photography">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="photography-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="graphics" class="graphics">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="graphics-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
JS
$("#hideshow1").click(function(){
$("#photography").slideToggle("slow");
$("#graphics").slideUp("slow");
});
$("#hideshow2").click(function(){
$("#graphics").slideToggle("slow");
$("#photography").slideUp("slow");
});
What I'm trying to do is when I click Photography, it will change the font color and when I click Graphics, the photography color would go back to black and graphics would now be the colored font.

function chgfont(type){
// document.write("<input type=\"button\" id=\"hideshow2\" name=\"hideshow2\" value=\"red\" class=\"btn\" onclick=\"chgfont('B');\"><input type=\"button\" id=\"hideshow1\" name=\"hideshow1\" value=\"blue\" class=\"btn\" onclick=\"chgfont('A');\"> ");
if(type=="A"){
document.getElementById("colorA").style.color ="blue";
// document.write("<font color=\"blue\">Font colors is blue</font>");
}else{
document.getElementById("colorA").style.color ="red";
// document.write("<font color=\"red\">Font colors is red</font>");
}
}
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<input type="button" id="hideshow1" name="hideshow1" value="blue" class="btn" onclick="chgfont('A');">
<input type="button" id="hideshow2" name="hideshow2" value="red" class="btn" onclick="chgfont('B');">
<hr class="small">
<div id="colorA">
Colored By Santa
</div>
</div>
</div>
</div>
</div>
I hope i can help you.

I would suggest a little different formation of your function. Select the .btn elements and, depending on the clicked element, get the id and perform your actions.
As for the font color, write up a css rule giving the desired color and simply add, or remove this class form the respective elements:
jQuery
$('.btn').on('click', function() {
var that = $(this);
var id = that.attr('id');
//Remove .colored class form all .btn elements
$('.btn').removeClass('colored');
//Add .colored class to the clicked element
that.addClass('colored');
var ph = $("#photography");
var gr = $("#graphics");
//Permorm the appropriate action depending on the clicked id
if (id == '#hideshow1') {
ph.slideToggle("slow");
gr.slideUp("slow");
} else if (id == '#hideshow2') {
gr.slideToggle("slow");
ph.slideUp("slow");
}
});
CSS
.colored { color:red }