Εναλλαγή στυλ μέσω data- attribute σε JavaScript

Για να λύσουμε το πρόβλημα που περιγράφηκε στο προηγούμενο μάθημα, δεν θα ορίσουμε κλάσεις στο στοιχείο, αλλά θα αλλάζουμε την τιμή του data- attribute. Αυτό θα είναι βολικό γιατί ένα τέτοιο attribute μπορεί να έχει μόνο μία τιμή και κατά την εγγραφή η νέα τιμή θα αντικαθιστά αυτόματα την παλιά.

Για παράδειγμα, έτσι θα ορίσουμε το επιτυχημένο στυλ:

<div id="elem" data-type="success">
	text
</div>

Και έτσι το στυλ για το σφάλμα:

<div id="elem" data-type="error">
	text
</div>

Τα στυλ των καταστάσεων μας θα τα ορίσουμε μέσω επιλογέων attribute:

[data-type="success"] {
	color: green;
}
[data-type="warning"] {
	color: orange;
}
[data-type="error"] {
	color: red;
}

Τώρα μπορούμε εύκολα να χρωματίσουμε το στοιχείο μας στο χρώμα της επιτυχίας:

elem.dataset.type = 'success';

Και έτσι θα το χρωματίσουμε στο χρώμα του σφάλματος:

elem.dataset.type = 'error';

Δίνεται ένα input. Όταν χάσει το focus ελέγξτε τον αριθμό που εισήχθη σε αυτό. Εάν αυτός ο αριθμός είναι μέχρι δέκα, τότε χρωματίστε το input σε πράσινο χρώμα, εάν είναι από δέκα έως είκοσι - σε κίτρινο, και εάν είναι περισσότερο από είκοσι - σε κόκκινο.