State-Aware Button & Feedback
Το συγκεκριμένο διαδραστικό παράδειγμα παρουσιάζει ένα “έξυπνο” κουμπί που αλλάζει καταστάσεις (states) για να ενημερώνει τον χρήστη. Επιδεικνύει την ευρετική αρχή της Ορατότητας της Κατάστασης του Συστήματος (Visibility of System Status), δείχνοντας πότε το σύστημα “σκέφτεται” (Loading) και πότε ολοκλήρωσε μια εργασία (Success).
Άσκηση: Τροποποιήστε τον κώδικα JavaScript ώστε η λειτουργία “Save” να διαρκεί 4 δευτερόλεπτα αντί για 2. Στη συνέχεια, αλλάξτε τη μεταβλητή CSS --success-color σε πορτοκαλί, για να δείτε πώς η οπτική ανάδραση (feedback) και ο χρόνος αναμονής επηρεάζουν την αίσθηση ολοκλήρωσης της εργασίας.