` είναι κενό, που σημαίνει ότι τίποτα δεν θα εμφανίζεται στην οθόνη μέχρι να προσθέσουμε κάποιο περιεχόμενο σε αυτό. Του δίνουμε επίσης ένα `id` ώστε να μπορούμε να το ανακτήσουμε εύκολα με JavaScript. Επιστρέψτε στο αρχείο `app.js` και δημιουργήστε μια νέα βοηθητική συνάρτηση `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Αυτή είναι αρκετά απλή: δεδομένου ενός *id* στοιχείου και *κειμένου*, θα ενημερώσει το περιεχόμενο κειμένου του στοιχείου 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` που είναι ήδη γεμάτος με δεδομένα. ### Εργασία Ας ξεκινήσουμε αντικαθιστώντας την ενότητα "Balance" στο 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). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.