To solve the problem described in the
previous lesson, we will not assign
classes to the element, but will change
the value of the data-
attribute.
This will be convenient because such an
attribute can have only one value, and
when writing a new value, it will itself
overwrite the old one.
For example, this is how we set a successful style:
<div id="elem" data-type="success">
text
</div>
And style for an error:
<div id="elem" data-type="error">
text
</div>
We will set the styles of our states through
attribute selectors
:
[data-type="success"] {
color: green;
}
[data-type="warning"] {
color: orange;
}
[data-type="error"] {
color: red;
}
Now we can easily color our element in the successful color:
elem.dataset.type = 'success';
And now we paint in the color of an error:
elem.dataset.type = 'error';
An input is given. When focus is lost, check the number entered into it. If this number is up to ten, then color the input green, if from ten to twenty - yellow, and if more than twenty - red.