Αυτό το διαδραστικό παράδειγμα κώδικα παρουσιάζει έναν κατάλογο προϊόντων που επιτρέπει στους χρήστες να προσθέτουν νέα προϊόντα μέσω μιας φόρμας. Τα προϊόντα που προστίθενται εμφανίζονται δυναμικά στον κατάλογο χωρίς την ανάγκη ανανέωσης της σελίδας. Επιπλέον, παρέχεται η δυνατότητα επεξεργασίας της περιγραφής και της τιμής κάθε προϊόντος με ένα απλό κλικ στο κουμπί ‘Επεξεργασία’. Ο κώδικας υλοποιείται με χρήση HTML, CSS και JavaScript και παρουσιάζει μια πρακτική προσέγγιση για τη δημιουργία διαδραστικών ιστοσελίδων με φόρμες.

See the Pen Interactive Product Catalog with Form Submission by Altanopoulos Ioannis (@std159312) on CodePen.

Άσκηση 1: Προσθηκη Νέου Προιοντος.

Άσκηση 2: Επεξεργασία υπάρχοντος προιοντος .

Άσκηση 3: Τροποποίηση καταλογου έτσι ώστε να εμφανίζει αρχικά 4 προιόντα αντί για τρία .

Άσκηση 4: Προσθέστε ένα κουμπί διαγραφής σε κάθε προϊόν που επιτρέπει στον χρήστη να διαγράψει ένα προϊόν από τον κατάλογο.

Άσκηση 5: Προσθέστε επιλογές για ταξινόμηση των προϊόντων βάσει της τιμής, του ονόματος ή άλλων κριτηρίων.