<div class="parent">
<div>2.10</div>
<div>1.98</div>
<div>2.22</div>
<div>2.01</div>
<div>1.1</div>
<div>1.14</div>
<div>1.53</div>
<div>3.48</div>
<div>2</div>
<div>1.99</div>
</div>
.parent {
display: flex;
gap: 10px;
}
.parent div {
padding: 5px 7px;
cursor: pointer;
}
.big {
color: green;
border: 1px solid green;
}
.small {
color: blue;
border: 1px solid blue;
}
let divs = document.querySelectorAll(".parent div");
divs.forEach(function (el) {
let num = Number(el.textContent);
el.setAttribute("title", num);
if (num >= 2) {
el.classList.add("big");
} else {
el.classList.add("small");
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.