Need some help with JS

HI all.
I need to complete JS task.
Task is the following…
There is a div wich height and width = 1000px
Dynamically create small divs 10px inside a big div. When hover on small divs randomly change colors of small divs. When click on big div make all divs white.
Please I need help!

If you have an actual link to the problem that would be very helpful.

I dont have a link.
I work on this pen https://codepen.io/at-web/pen/JjWQKQe?editors=1111

Would you like to take a look?

I need to place all small divs inside big div

the most intuitive and simple solution would be to make two loops. One to make the rows and one within to populate those rows with columns(divs, or whatever you wanna call them). Each loop should be iterated 1000/10 times. You should make sure the divs dont have margin/padding/borders interfering with their size. Id imagine they should be set to inline-block display, or you could utilize grid, for this purpose, where you can easily set sizes.
Honestly i have not much experience on similar task and manipulation and there might be better approaches, but the ones i listed must be the points from where you should start on.

Thanks a lot! I am going to try it out.

I wouldn’t recommend two loops. Just one is enough to append all the smallDivs. The bigDiv needs to be either a flex-container with flex-wrap: wrap, or a grid-container with grid-template-rows: repeat(100, 10px)

Within the loop, each smallDiv needs a mouseover event listener (that’s what you’re already doing correctly). They don’t need a click event listener, though. That one needs to be on the bigDiv, and you only need to attach that once, not a thousand times like you’re doing now.

The bigDiv event listener would then for example give the bigDiv a class of “all-white”, so that in your CSS, you can change the background-color of each smallDiv:

.all-white .smallDiv {
  background-color:white;
}

Thanks a lot for you reply. I have one last question.
How to calculate how many times I need to run for loop?

Maybe can you give a hint how to add EventListener to parent when clicking to child element?

You said you wanted 1000 smallDivs, so the loop should be running 1000 times.

EDIT sorry I just reread the requirements. If the big square is 1000 x 1000 = 1000000px, and each smallDiv is 10 x 10 = 100px, you’ll have 1000000 / 100 = 10000 smallDivs.

I don’t understand, in your first post you said “When click on big div make all divs white”. You’d add that event listener just like you add event listeners to your smallDivs, but outside the loop

bigDiv.addEventListener('click', (event) => {
    // inside here, loop over all small divs and make them white
}

(I previously recommended to add a class to the bigDiv and use CSS to style the smallDivs, but that wouldn’t work)

Thaks a lot!
It works :grinning:

Awesome. If you remove the margin from your smallDiv and give it box-sizing:border-box instead, all 10000 squares will fit perfectly into the bigDiv.

You still have 10000 event listeners on your bigDiv, though. You can move that out of the loop and rewrite it:

bigDiv.addEventListener('click', (event) => {
    event.target.querySelectorAll('.smallDiv').forEach(div => div.style.background = 'white')
})

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.