` உருப்படி காலியாக உள்ளது, அதாவது அதில் உள்ளடக்கம் சேர்க்கப்படும் வரை திரையில் எதுவும் காட்டப்படாது. இதற்கு `id` கொடுக்கிறோம், இதனால் JavaScript மூலம் எளிதாக பெற முடியும். `app.js` கோப்பிற்கு திரும்பி புதிய உதவியாளர் செயல்பாடு `updateElement` ஐ உருவாக்கவும்: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` இது மிகவும் நேர்மையானது: ஒரு உருப்படி *id* மற்றும் *text* கொடுக்கப்பட்டால், பொருந்தும் `id` கொண்ட DOM உருப்படியின் உரை உள்ளடக்கத்தை இது புதுப்பிக்கும். `login` செயல்பாட்டில் முந்தைய பிழை செய்தியின் இடத்தில் இந்த முறையைப் பயன்படுத்துவோம்: ```js if (data.error) { return updateElement('loginError', data.error); } ``` இப்போது நீங்கள் தவறான கணக்குடன் உள்நுழைய முயற்சித்தால், இதுபோன்ற ஒன்றைக் காணலாம்:  இப்போது பிழை உரை காட்சியாக காட்டப்படுகிறது, ஆனால் நீங்கள் அதை ஸ்கிரீன் ரீடரில் முயற்சித்தால், எதுவும் அறிவிக்கப்படவில்லை என்பதை கவனிக்கலாம். ஒரு பக்கத்தில் மாறுபடியாகச் சேர்க்கப்பட்ட உரை ஸ்கிரீன் ரீடர்களால் அறிவிக்கப்பட வேண்டும் என்றால், இது [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) எனப்படும் ஒன்றைப் பயன்படுத்த வேண்டும். இங்கு, ஒரு குறிப்பிட்ட வகை லைவ் ரீஜியன், ஒரு எச்சரிக்கை பயன்படுத்தப் போகிறோம்: ```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 இல் "Balance" பகுதியை மாற்றி இடதுசாரி உருப்படிகளைச் சேர்ப்பதிலிருந்து தொடங்குவோம்: ```html

Balance:

``` கணக்கு விளக்கத்தை காட்ட புதிய பகுதியை கீழே சேர்ப்போம்: ```html

``` ✅ கணக்கு விளக்கம் அதன் கீழே உள்ள உள்ளடக்கத்திற்கான தலைப்பாக செயல்படுவதால், இது semantically தலைப்பாக குறிக்கப்படுகிறது. [தலைப்பு அமைப்பு](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); } ``` முதலில், நமக்கு தேவையான கணக்கு தரவுகள் உள்ளதா என்பதைச் சரிபார்க்கிறோம். பின்னர், HTML ஐ புதுப்பிக்க, நாம் முன்பு உருவாக்கிய `updateElement()` செயல்பாட்டைப் பயன்படுத்துகிறோம். > சமநிலையை அழகாகக் காட்ட, 2 தசம புள்ளிகளுடன் மதிப்பைக் காட்ட [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) முறையைப் பயன்படுத்துகிறோம். இப்போது, டாஷ்போர்டு ஏற்றப்படும் ஒவ்வொரு முறையும் `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()` செயல்பாடு அழைக்கப்படும். உள்நுழைவு முடிந்த பிறகு, கணக்கு சமநிலை, நாணயம் மற்றும் விளக்கத்தைப் பார்க்க முடியும். ## HTML டெம்ப்ளேட்களுடன் டேபிள் வரிசைகளை மாறுபடியாக உருவாக்குதல் [முதல் பாடத்தில்](../1-template-route/README.md) நாங்கள் HTML டெம்ப்ளேட்களையும் [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) முறையையும் பயன்படுத்தி எங்கள் பயன்பாட்டில் வழிசெலுத்தலை செயல்படுத்தினோம். டெம்ப்ளேட்கள் சிறியதாகவும், ஒரு பக்கத்தின் மீண்டும் மீண்டும் வரும் பகுதிகளை மாறுபடையாக நிரப்ப பயன்படுத்தப்படலாம். HTML அட்டவணையில் பரிவர்த்தனைகளின் பட்டியலைக் காட்ட இதே அணுகுமுறையைப் பயன்படுத்துவோம். ### பணிகள் HTML `` இல் புதிய டெம்ப்ளேட்டைச் சேர்க்கவும்: ```html ``` இந்த டெம்ப்ளேட் ஒரு தனி அட்டவணை வரிசையை பிரதிநிதித்துவப்படுத்துகிறது, இதில் 3 நெடுவரிசைகள் உள்ளன: பரிவர்த்தனையின் *தேதி*, *விஷயம்* மற்றும் *தொகை*. பின்னர், JavaScript ஐப் பயன்படுத்தி கண்டுபிடிக்க எளிதாக, டாஷ்போர்டு டெம்ப்ளேட்டின் அட்டவணையின் `` உருப்படிக்கு இந்த `id` சொத்தைப் சேர்க்கவும்: ```html ``` எங்கள் HTML தயாராக உள்ளது, JavaScript குறியீட்டிற்கு மாறி புதிய செயல்பாட்டை உருவாக்க `createTransactionRow`: ```js function createTransactionRow(transaction) { const template = document.getElementById('transaction'); const transactionRow = template.content.cloneNode(true); const tr = transactionRow.querySelector('tr'); tr.children[0].textContent = transaction.date; tr.children[1].textContent = transaction.object; tr.children[2].textContent = transaction.amount.toFixed(2); return transactionRow; } ``` இந்த செயல்பாடு அதன் பெயர் குறிப்பிடுவது போலவே செய்கிறது: நாம் முன்பு உருவாக்கிய டெம்ப்ளேட்டைப் பயன்படுத்தி, புதிய அட்டவணை வரிசையை உருவாக்கி, பரிவர்த்தனை தரவுகளைப் பயன்படுத்தி அதன் உள்ளடக்கங்களை நிரப்புகிறது. எங்கள் `updateDashboard()` செயல்பாட்டில் இதைப் பயன்படுத்தி அட்டவணையை நிரப்புவோம்: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` இங்கு, [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) முறையைப் பயன்படுத்துகிறோம், இது புதிய DOM பகுதியை உருவாக்குகிறது, அதில் வேலை செய்ய முடியும், இறுதியில் அதை எங்கள் HTML அட்டவணைக்கு இணைக்க முடியும். இந்தக் குறியீடு வேலை செய்ய, `updateElement()` செயல்பாடு தற்போது உரை உள்ளடக்கத்தை மட்டுமே ஆதரிக்கிறது. அதன் குறியீட்டை கொஞ்சம் மாற்றுவோம்: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` நாம் [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) முறைமையை பயன்படுத்துகிறோம், ஏனெனில் இது ஒரு பெற்றோர் கூறுக்கு உரை அல்லது [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) இரண்டையும் இணைக்க அனுமதிக்கிறது, இது எங்கள் அனைத்து பயன்பாடுகளுக்கும் சரியானது. நீங்கள் `test` கணக்கைப் பயன்படுத்தி உள்நுழைய முயற்சித்தால், டாஷ்போர்டில் ஒரு பரிவர்த்தனை பட்டியலை இப்போது காணலாம் 🎉. --- ## 🚀 சவால் டாஷ்போர்ட் பக்கத்தை ஒரு உண்மையான வங்கி பயன்பாட்டைப் போல தோற்றமளிக்கச் செய்ய குழுவாக வேலை செய்யுங்கள். உங்கள் பயன்பாட்டை ஏற்கனவே வடிவமைத்திருந்தால், [மீடியா கேரிகள்](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) பயன்படுத்தி [பதிலளிக்கும் வடிவமைப்பை](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) என்ற AI மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. எங்கள் தரச்செயல்முறையை உறுதிப்படுத்த முயற்சிக்கிறோம், ஆனால் தானியக்க மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.