We Keep Coding

How can i filter a list of divs when 3 or more checkboxes are checked using jquery or even plain javascript?

Based on a previous question of mine i want to filter a list of divs by different combinations based on the existence of specific div elements.
In the below example i use 3 checkboxes "Card", "Paypal", "Show only open stores" to filter the list. As it is now it works for the "Card" & "Paypal" checkboxes but if you try to check also the "Show only open stores" checkbox it messing it up. How can i fix that?
Here's the code:
var checkboxArea = document.querySelector('.filter-area')
var storeBlocks = Array.from(document.querySelectorAll('.store-block'))
var byCard = document.getElementById('by-card')
var byPaypal = document.getElementById('by-paypal')
var byOpen = document.getElementById('by-open')
var cardBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.card-available')
})
var payPalBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.paypal-available')
})
var openStoreBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.close-small-tag')
})
checkboxArea.addEventListener('change', function(e) {
switch (true) {
case byCard.checked && byPaypal.checked:
storeBlocks.forEach(function(block) {
block.classList.remove('hide-me')
})
break
case byCard.checked:
cardBlocks.forEach(function(block) {
block.classList.remove('hide-me')
})
payPalBlocks.forEach(function(block) {
block.classList.add('hide-me')
})
break
case byPaypal.checked:
cardBlocks.forEach(function(block) {
block.classList.add('hide-me')
})
payPalBlocks.forEach(function(block) {
block.classList.remove('hide-me')
})
break
case byOpen.checked:
openStoreBlocks.forEach(function(block) {
block.classList.toggle('hide-me')
})
break
default:
payPalBlocks.concat(cardBlocks).forEach(function(block) {
block.classList.remove('hide-me')
})
}
})
.close-small-tag,
.open-small-tag {
position: absolute;
left: 130px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: brown;
}
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.filter-area {
margin-bottom: 20px;
overflow: hidden;
}
.inputRadioGroup {
float: left;
margin-right: 20px;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
}
<div class="filter-area">
<div class=" inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class=" inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
<div class=" inputRadioGroup">
<input type="checkbox" id="by-open">
<label for="by-open">SHOW ONLY OPEN STORES</label>
</div>
</div>
<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="open-small-tag">OPEN</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="open-small-tag">OPEN</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="close-small-tag">CLOSE</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Linux Store</div>
<div class="rating">&bigstar; 4.9</div>
<div class="close-small-tag">CLOSE</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

Compare numbers to cards numbers

I'm writing a simple html game. I want to compare the red cards' numbers to random numbers. If any one of random numbers equal to red cards' numbers, then dynamically add "BINGO" text to red square's back class when user flip red cards. It's like bingo game, user don't know which cards have "BINGO" strings before they flip red cards. I have problem with comparing array numbers to front class numbers and dynamically add "BINGO" string to red cards. Can somebody help please?
JSFIDDLE is here: http://jsfiddle.net/7emqLztp/28/
$(".treasure").flip();
var howMany = 3;
var min = 2;
var max = 5;
var a = new Array();
while (a.length < howMany) {
var n = Math.floor(Math.random() * (max - min) + 0.5) + min;
if (a.indexOf(n) == -1) {
a.push(n);
}
}
$("#button").click(function () {
$('.num').text(a)
});
.table
{
display: table;
border-collapse:separate;
/*border-spacing: 5px;*/
/*border: 1px solid #fff;*/
}
.table-row
{
display: table-row;
}
.table-cell
{
text-align: center;
display: table-cell;
border: 0.5px solid #231f20;
vertical-align: middle;
width: 50px;
height: 50px;
}
.treasure
{
background-color: red;
}
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
</head>
<div class="table">
<div class="table-row">
<div class="table-cell">
1
</div>
<div class="table-cell treasure">
<div class="front">2</div>
<div class="back"></div>
</div>
<div class="table-cell treasure">
<div class="front">3</div>
<div class="back"></div>
</div>
<div class="table-cell treasure">
<div class="front">4</div>
<div class="back"></div>
</div>
<div class="table-cell treasure">
<div class="front">5</div>
<div class="back"></div>
</div>
<div class="table-cell">
6
</div>
</div>
</div>
<button id="button">Random Num</button>
<div class="num"></div>

Please have a look at this updated code. I'm pretty sure this is working.
$(".treasure").flip().find(".back").text("-")
var cardCount = 3;
var bingoCards = [];
do {
let n = Math.floor(Math.random() * 4) + 2;
if (bingoCards.indexOf(n) === -1) {
bingoCards.push(n)
let item = $(".treasure")[n-2];
$(item).find(".back").text("BINGO")
}
} while (bingoCards.length < cardCount)
$("#button").click(function() {
$("#result").html(`The numbers are: <b>${bingoCards.join(", ")}</b>`)
});
.table {
display: table;
border-collapse: separate;
/*border-spacing: 5px;*/
/*border: 1px solid #fff;*/
}
.table-row {
display: table-row;
}
.table-cell {
text-align: center;
display: table-cell;
border: 0.5px solid #231f20;
vertical-align: middle;
width: 50px;
height: 50px;
}
.treasure {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<div class="table">
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell treasure">
<div class="front">2</div><div class="back"></div>
</div>
<div class="table-cell treasure">
<div class="front">3</div><div class="back"></div>
</div>
<div class="table-cell treasure">
<div class="front">4</div><div class="back"></div>
</div>
<div class="table-cell treasure">
<div class="front">5</div><div class="back"></div>
</div>
<div class="table-cell">6</div>
</div>
</div>
<button id="button">Random Numbers</button>
<div id="result"></div>

Applying style through hover using JavaScript doesn't work with class

I want to apply a style to an element when hovering over another element in a different parent div.
The classes are lvcontainer and rvcontainer and when I hover over lvcontainer, rvcontainer will be set to display: block.
I'm trying to make a multidimensional drop menu like blackberry navigation.
var lvcontainer = document.getElementsByClassName('lvcontainer');
var rvcontainer = document.getElementsByClassName('rvcontainer');
for (i = 0; i < 1; i++) {
lvcontainer[i].addEventListener("mouseover", function() {
rvcontainer[i].style.display = "block";
}, false);
}
body {
margin: auto;
}
#container {
display: table;
}
#lcontainer {
padding: 0 10px 0 10px;
display: table-cell;
}
#rcontainer {
padding: 0 10px 0 10px;
display: table-cell;
}
.rvcontainer {
display: none;
}
<div id="container">
<div id="lcontainer">
<div class="lvcontainer">
Country
</div>
<div class="lvcontainer">
Genre
</div>
</div>
<div id="rcontainer">
<div class="rvcontainer">
Japan
<br> Korea
<br> American
<br>
</div>
<div class="rvcontainer">
Comedy
<br> Mystery
<br> Horror
<br>
</div>
</div>
</div>

There are a few issues but you can do what you want by looping through and protecting your index.
The below assumes there will always be the same number of lvcontainer and rvcontainer
var lvcontainer = document.getElementsByClassName('lvcontainer');
var rvcontainer = document.getElementsByClassName('rvcontainer');
for (i = 0; i < lvcontainer.length; i++) { // loop to the length
(function(protectedIndex) { // protect the index so clicks won't use last increment of i
// show
lvcontainer[protectedIndex].addEventListener("mouseover", function() {
rvcontainer[protectedIndex].style.display = "block";
}, false);
// hide
lvcontainer[protectedIndex].addEventListener("mouseout", function() {
rvcontainer[protectedIndex].style.display = "none";
}, false);
})(i);
}
body {
margin: auto;
}
#container {
display: table;
}
#lcontainer {
padding: 0 10px 0 10px;
display: table-cell;
}
#rcontainer {
padding: 0 10px 0 10px;
display: table-cell;
}
.rvcontainer {
display: none;
}
<div id="container">
<div id="lcontainer">
<div class="lvcontainer">
Country
</div>
<div class="lvcontainer">
Genre
</div>
</div>
<div id="rcontainer">
<div class="rvcontainer">
Japan
<br> Korea
<br> American
<br>
</div>
<div class="rvcontainer">
Comedy
<br> Mystery
<br> Horror
<br>
</div>
</div>
</div>
After your comment, I would restructure your html to be a bit more semantically correct:
#container ul {
margin: 0;
padding: 0;
list-style: none;
}
#lcontainer {
display: inline-block;
position: relative;
}
.lvcontainer {
padding: 0.1em 0.5em 0.1em 0.1em;
}
.rvcontainer {
display: none;
position: absolute;
top: 0;
left: 100%;
}
.lvcontainer:hover>.rvcontainer {
display: block;
}
<div id="container">
<ul id="lcontainer">
<li class="lvcontainer">
Country
<ul class="rvcontainer">
<li>Japan</li>
<li>Korea</li>
<li>American</li>
</ul>
</li>
<li class="lvcontainer">
Genre
<ul class="rvcontainer">
<li>Comedy</li>
<li>Mystery</li>
<li>Horror</li>
</ul>
</li>
</ul>
</div>

Maybe is not the cleaner solution but you can try this:
<html>
<head>
<style>
body {
margin: auto;
}
#container {
display: table;
}
#lcontainer {
padding: 0 10px 0 10px;
display: table-cell;
}
#rcontainer {
padding: 0 10px 0 10px;
display: table-cell;
}
.rvcontainer-c,.rvcontainer-g {
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="lcontainer">
<div class="lvcontainer-c">
Country
</div>
<div class="lvcontainer-g">
Genre
</div>
</div>
<div id="rcontainer">
<div class="rvcontainer-c">
Japan
<br> Korea
<br> American
<br>
</div>
<div class="rvcontainer-g">
Comedy
<br> Mystery
<br> Horror
<br>
</div>
</div>
</div>
</body>
<script>
var lvcontainerC = document.getElementsByClassName('lvcontainer-c');
var rvcontainerC = document.getElementsByClassName('rvcontainer-c');
lvcontainerC[0].addEventListener("mouseover", function(){
rvcontainerC[0].style.display = "block";
}, false);
lvcontainerC[0].addEventListener("mouseout", function(){
rvcontainerC[0].style.display = "none";
}, false);
var lvcontainerG = document.getElementsByClassName('lvcontainer-g');
var rvcontainerG = document.getElementsByClassName('rvcontainer-g');
lvcontainerG[0].addEventListener("mouseover", function(){
rvcontainerG[0].style.display = "block";
}, false);
lvcontainerG[0].addEventListener("mouseout", function(){
rvcontainerG[0].style.display = "none";
}, false);
</script>
</html>

Scrollbar replacement on a div

I got a row, with X amount of columns inside it. How can I, if there is an overflow of columns, replace the regular scrollbar, with left/right image arrows on each side. See the less than and greater than arrows in the below example to see what I mean.
I want to keep it vanilla JS, not jQuery.
div {
display: inline-block;
box-sizing: border-box;
position: relative;
}
.container {
width: 300px;
border: 1px solid black;
position: relative;
white-space: nowrap;
}
.row {
width: 90%;
overflow-x: scroll;
}
.col {
width: 100px;
height: 30px;
}
.grey {
background-color: #cccccc;
}
<div class="container">
<
<div class="row">
<div class="col">
one
</div>
<div class="col grey">
two
</div>
<div class="col">
three
</div>
<div class="col grey">
four
</div>
<div class="col">
five
</div>
<div class="col grey">
six
</div>
</div>
>
</div>

If you don't want to use jQuery, we can add ID's to the lt and gt symbols. This way we can target the images in an onclick event.
HTML:
<div class="container">
<span id="lt"><</span>
<div id="row">
<div class="col">
one
</div>
...
<div class="col grey">
six
</div>
</div>
<span id="gt">></span>
</div>
Then add onclick handlers to the symbols to scroll through the row.
JS:
var row = document.getElementById("row");
row.scrollRight = 0;
row.scrollLeft = 0;
document.getElementById("lt").onclick = function(){
row.scrollLeft = row.scrollLeft - 50;
}
document.getElementById("gt").onclick = function(){
row.scrollLeft = row.scrollLeft + 50;
}
Last, lets remove the horizontal scrollbar.
CSS:
#row {
width: 90%;
overflow-x: hidden;
}
Working fiddle here: https://fiddle.jshell.net/26jrtdky/1/

Move one div after another div (near) and set float property

I have divs on my page. There is div .rightColumnBar and .divAttributes
HTML
<div class="mainContent">
<div class="pageContent">
<form id="createLead" class="frmDiv clear" action="/leads/create_lead.html?lead_id=3287" name="createLead" method="post">
<div class="divEditLead sldf_columnsContainer">
<div id="hot_div">
<div id="errorBlock">
<div class="leftColumnBr">
<div class="centerColumnBr">
<div class="rightColumnBr">
</div>
<div class="createLeadButtons">
<input id="saveLeadBtn" class="bigButton redButton" name="save" value="Save" type="submit">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
<div id="specHeightIncreaser"></div>
</div>
CSS
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
How can I move (only for front, not insert as html element) rightColumnBr to divAttributes and set for divAttributes float property in left?
Thanks.

If you are aiming script, than you can do CSS changes and DOM manipulation this way:
$('.divAttributes').css({
'border-color': 'red'
}).after( $('.rightColumnBr') );
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 100px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContent">
<div class="rightColumnBr">
RCB
</div>
<p>
Text
</p>
<div class="divAttributes frmDiv">
ATTR
</div>
</div>
Also on JSFiddle.

Is this what you want?
<div class="pageContent">
<form id="createLead" class="frmDiv clear">
<div class="divEditLead sldf_columnsContainer">
</div>
<div class="leftColumnBr">
</div>
<div class="centerColumnBr">
</div>
<div class="createLeadButtons">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
</div>
<div class="rightColumnBr">
</div>
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 0px;
width: 200px;
float:left;
}
.rightColumnBr {
border: 1px solid #d1ddd4;
float: left;
margin-top: 0px;
width:200px;
height:200px;
}
Also please go through jsfiddle link: https://jsfiddle.net/mayurdandekar/0soLrqv0/