I am studying JavaScript during my internship and my boss asked me to : could you try to do this again, but put a class on the parent div, rather than on each Rect? does that mean that I have to use parent-class to do the same work ? Because i have been trying since this morning and i cannot figure it out how to do.
my code is good with child class :
const rect2 = document.getElementById("rect2"); // On récupère le rectangle 2
const allRects = document.getElementsByClassName("rect");
rect2.addEventListener("click", makeAllRectsSmaller);
function makeAllRectsSmaller() {
for (let index = 0; index < allRects.length; index++) {
// console.log(allRects[index]);
isBig = allRects[index].classList.contains("bigRect");
// console.log(isBig);
if (isBig) {
console.log(isBig);
allRects[index].classList.remove("bigRect");
allRects[index].classList.add("smallRect");
// console.log(allRects[index]);
} else {
// Sinon
allRects[index].classList.remove("smallRect");
allRects[index].classList.add("bigRect");
console.log(allRects[index]);
}
}
// console.log(allRects);
}
My style and body are like this
<style>
.rect {
background: grey;
width: 250px;
height: 200px;
margin: 10px;
float: left;
}
.rect.red {
background: red;
}
.rect.blue {
background: blue;
}
.rect.bigRect {
width: 250px;
height: 200px;
margin: 10px;
}
.rect.smallRect {
width: 150px;
height: 150px;
margin: 10px;
}
</style>
</head>
<body>
<div id="rectjs" class="exoJs">
<div id="rect1" class="rect red bigRect"></div>
<div id="rect2" class="rect red bigRect"></div>
<div id="rect3" class="rect red bigRect"></div>
</div>
But i cannot find a way to use parent class instead of child class.
Is someone could help me please ? thank you very much
You would do something like this in your CSS:
.exoJs div {
/* your CSS */
}
This targets the rect divs inside of the parent div (.exoJs).
Toggle the the bigRect class on the #rectjs element. There is not a lot of need to have 3 classes (rect, smallRect and bigRect) if some of them have similar styles. Instead make the rects small by default and only toggle bigRect.
const rect2 = document.getElementById("rect2");
const rectjs = document.getElementById("rectjs");
rect2.addEventListener("click", makeAllRectsSmaller);
function makeAllRectsSmaller() {
rectjs.classList.toggle('bigRect');
}
Then apply your styles like this. .rect is the base of the style, the colors can modify each rect. But bigRect is now on the .exoJS class, and when it is, all .rect elements that are it's descendant, should be big.
.rect {
background: grey;
width: 150px;
height: 150px;
margin: 10px;
float: left;
}
.rect.red {
background: red;
}
.rect.blue {
background: blue;
}
.exoJs.bigRect .rect {
width: 250px;
height: 200px;
margin: 10px;
}