Here's a bit of an unusual query I'm facing and can't quite figure out the solution.
On an HTML page, there are 10 checkboxes to select on the right side, and a sentence displayed on the left side. What I want is for the sentence to remain red until the first 4 checkboxes are ticked.
If I then proceed to check the 5th to 7th checkboxes (i.e., from the 1st to the 7th), the sentence on the left should promptly turn yellow.
Finally, when all checkboxes are checked, the text on the left should change to green in color.
----------------------------------------
| check box 1
| check box 2
| check box 3
| check box 4
Sentence to be colored | check box 5
| check box 6
| check box 7
| check box 8
| check box 9
| check box 10
|
I believe utilizing JavaScript is necessary for this task, though I am uncertain on how to implement it.