` είναι κενό, που σημαίνει ότι τίποτα δεν θα εμφανιστεί στην οθόνη μέχρι να προσθέσουμε κάποιο περιεχόμενο σε αυτό. Του δίνουμε επίσης ένα `id` ώστε να μπορούμε να το ανακτήσουμε εύκολα με JavaScript. Επιστρέψτε στο αρχείο `app.js` και δημιουργήστε μια νέα βοηθητική συνάρτηση `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Αυτή είναι αρκετά απλή: δεδομένου ενός *id* στοιχείου και ενός *text*, θα ενημερώσει το περιεχόμενο κειμένου του στοιχείου DOM με το αντίστοιχο `id`. Ας χρησιμοποιήσουμε αυτή τη μέθοδο στη θέση του προηγούμενου μηνύματος σφάλματος στη συνάρτηση `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Τώρα, αν προσπαθήσετε να συνδεθείτε με έναν μη έγκυρο λογαριασμό, θα πρέπει να δείτε κάτι σαν αυτό:  Τώρα έχουμε κείμενο σφάλματος που εμφανίζεται οπτικά, αλλά αν το δοκιμάσετε με έναν αναγνώστη οθόνης, θα παρατηρήσετε ότι δεν ανακοινώνεται τίποτα. Για να ανακοινωθεί το κείμενο που προστίθεται δυναμικά σε μια σελίδα από τους αναγνώστες οθόνης, θα χρειαστεί να χρησιμοποιήσουμε κάτι που ονομάζεται [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Εδώ θα χρησιμοποιήσουμε έναν συγκεκριμένο τύπο live region που ονομάζεται alert: ```html ``` Υλοποιήστε την ίδια συμπεριφορά για τα σφάλματα της συνάρτησης `register` (μην ξεχάσετε να ενημερώσετε το HTML). ## Εμφάνιση πληροφοριών στον πίνακα ελέγχου Χρησιμοποιώντας τις ίδιες τεχνικές που μόλις είδαμε, θα φροντίσουμε επίσης να εμφανίσουμε τις πληροφορίες του λογαριασμού στη σελίδα του πίνακα ελέγχου. Αυτό είναι ένα αντικείμενο λογαριασμού που λαμβάνεται από τον διακομιστή: ```json { "user": "test", "currency": "$", "description": "Test account", "balance": 75, "transactions": [ { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 }, { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 }, { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 } ], } ``` > Σημείωση: για να διευκολύνετε τη ζωή σας, μπορείτε να χρησιμοποιήσετε τον προϋπάρχοντα λογαριασμό `test` που είναι ήδη γεμάτος με δεδομένα. ### Εργασία Ας ξεκινήσουμε αντικαθιστώντας την ενότητα "Υπόλοιπο" στο HTML για να προσθέσουμε στοιχεία κράτησης θέσης: ```html

Balance:

``` Θα προσθέσουμε επίσης μια νέα ενότητα ακριβώς από κάτω για να εμφανίσουμε την περιγραφή του λογαριασμού: ```html

``` ✅ Επειδή η περιγραφή του λογαριασμού λειτουργεί ως τίτλος για το περιεχόμενο από κάτω, έχει μορφοποιηθεί σημασιολογικά ως επικεφαλίδα. Μάθετε περισσότερα για το πώς η [δομή επικεφαλίδων](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) είναι σημαντική για την προσβασιμότητα και εξετάστε κριτικά τη σελίδα για να προσδιορίσετε τι άλλο θα μπορούσε να είναι επικεφαλίδα. Στη συνέχεια, θα δημιουργήσουμε μια νέα συνάρτηση στο `app.js` για να συμπληρώσουμε τα στοιχεία κράτησης θέσης: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Αρχικά, ελέγχουμε ότι έχουμε τα δεδομένα λογαριασμού που χρειαζόμαστε πριν προχωρήσουμε. Στη συνέχεια, χρησιμοποιούμε τη συνάρτηση `updateElement()` που δημιουργήσαμε νωρίτερα για να ενημερώσουμε το HTML. > Για να κάνουμε την εμφάνιση του υπολοίπου πιο όμορφη, χρησιμοποιούμε τη μέθοδο [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) για να εμφανίσουμε την τιμή με 2 δεκαδικά ψηφία. Τώρα πρέπει να καλέσουμε τη συνάρτηση `updateDashboard()` κάθε φορά που φορτώνεται ο πίνακας ελέγχου. Αν έχετε ήδη ολοκληρώσει την [εργασία του μαθήματος 1](../1-template-route/assignment.md), αυτό θα πρέπει να είναι απλό, διαφορετικά μπορείτε να χρησιμοποιήσετε την παρακάτω υλοποίηση. Προσθέστε αυτόν τον κώδικα στο τέλος της συνάρτησης `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` Και ενημερώστε τον ορισμό των διαδρομών με: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Με αυτήν την αλλαγή, κάθε φορά που εμφανίζεται η σελίδα του πίνακα ελέγχου, καλείται η συνάρτηση `updateDashboard()`. Μετά από μια σύνδεση, θα πρέπει τότε να μπορείτε να δείτε το υπόλοιπο του λογαριασμού, το νόμισμα και την περιγραφή. ## Δημιουργία γραμμών πίνακα Αν προσπαθήσετε να συνδεθείτε χρησιμοποιώντας τον λογαριασμό `test`, θα πρέπει τώρα να δείτε μια λίστα συναλλαγών στον πίνακα ελέγχου 🎉. --- ## 🚀 Πρόκληση Συνεργαστείτε για να κάνετε τη σελίδα του πίνακα ελέγχου να μοιάζει με μια πραγματική εφαρμογή τραπεζικής. Εάν έχετε ήδη σχεδιάσει την εφαρμογή σας, δοκιμάστε να χρησιμοποιήσετε [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) για να δημιουργήσετε έναν [responsive σχεδιασμό](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) που λειτουργεί καλά τόσο σε επιτραπέζιους υπολογιστές όσο και σε κινητές συσκευές. Ακολουθεί ένα παράδειγμα μιας σχεδιασμένης σελίδας πίνακα ελέγχου:  ## Κουίζ μετά τη διάλεξη [Κουίζ μετά τη διάλεξη](https://ff-quizzes.netlify.app/web/quiz/46) ## Εργασία [Αναδιαμορφώστε και σχολιάστε τον κώδικά σας](assignment.md) --- **Αποποίηση ευθύνης**: Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.