The idea is:
- a random number, "lets say 4000"
- I have limited space defined by a function
- I want to change the properties of a class to fit these parameters
- i want to make 4000 boxes fit in the parametrized scope
- and i want to alternate color on click
I’m stuck at generating the ‘div’ boxes. Any help would be greatful;
$(document.body).on('click', 'span', function (e) {
$(this).addClass('color');
// 1) squares can be either white, yellow or purple.
// 2) if a square is yellow and it's clicked on, it turns purple and visa versa
/* 3) there needes to be an enumeration of quadrants
and there needs to be at least four of them...
*/
// ajecent squares can only be clicked on based on initial pattern...
// then
});
div {
}
span {
height: 2em;
width: 2em;
border: solid 1px lightGray;
display: inline-block;
}
span.color {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- code block -->
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- code block -->
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- code block -->
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- code block -->
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
You need to sign in to view this answers
Leave feedback about this