I am currently in the process of creating a simple habit tracker using html, css, and javascript. The design includes red squares filled with white created using div elements, and they are positioned within a container to ensure consistent spacing even when the page is resized.
My goal is to enable users to click on a square to fill it and then click again to unfilled it. However, I am facing an issue where nothing happens when I try to interact with the squares.
In addition, I am concerned that the current setup may not allow for individual addressing of each square as intended. If anyone has suggestions or pointers on how to address this specific concern, I would greatly appreciate it.
The code for my project is provided below, but you can also access a live version on Codepen:
https://codepen.io/CPU_Coding/pen/wvzaWMb
function FillSquare() {
document.getElementsByClassName('eqi-container div')[0]
.addEventListener('click', function (event) {
document.body.style.backgroundColor = 'red';
});
}.eqi-container {
border: 10px solid black;
display: flex;
justify-content: space-between;
}
.eqi-container div {
width: 50px;
height: 50px;
background: white;
border: 10px solid red;
}<h2>Square Clicker</h2>
<div class="eqi-container">
<div onClick="FillSquare"></div>
<div onClick="FillSquare"></div>
<div onClick="FillSquare"></div>
<div onClick="FillSquare"></div>
</div>