` ഉള്ളിൽ ഉള്ള `
`-ന്റെ നിറം എന്താകും?
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*ഉത്തരം: ചുവപ്പ് (എലമെന്റ് സെലക്ടർ നേരിട്ട് h1 നെ ലക്ഷ്യമിടുന്നു)*
+
+## CSS സെലക്ടറുകൾ നിമിഷപൂർവ്വം കൈകാര്യം ചെയ്യുക
+
+CSS സെലക്ടറുകൾ സവിശേഷ എലമെന്റുകൾക്ക് സ്റ്റൈൽ നൽകാനുള്ള നിനക്ക് വഴിയാണ്. "വീട്" എന്നു പറയുന്നതിനുപകരം, "മെപ്ല് സ്ട്രീറ്റിൽ റെഡ് വാതിൽ ഉള്ള നീല വീട്" എന്നതുപോലെ കൃത്യമായ മാർഗ്ഗനിർദ്ദേശമാണ്.
+
+CSS വിവിധ തരത്തിലുള്ള സെലക്ടറുകൾ നൽകുന്നു, ശരിയായ സെലക്ടർ തിരഞ്ഞെടുക്കുന്നത് ആവശ്യത്തിനുള്ള മികച്ച ഉപകരണം തിരഞ്ഞെടുക്കുന്നതിനോട് തുല്യമാണ്. ഇടയ്ക്കിടെ എല്ലാ കെട്ടിടത്തിലെ വാതിലുകൾക്കും സ്റ്റൈൽ നല്കണം, ചിലപ്പോഴപ്പോൾ മാത്രം ഒരു പ്രത്യേക വാതിലിനു മാത്രമേ.
+
+### എലമെന്റ് സെലക്ടറുകൾ (ടാഗുകൾ)
+
+എലമെന്റ് സെലക്ടറുകൾ ടാഗ് നാമം അടിസ്ഥാനമാക്കി HTML എലമെന്റുകൾ ലക്ഷ്യമിടുന്നു. ഈ സെലക്ടർ പേജ് മുഴുവൻ വ്യാപകമായ അടിസ്ഥാന സ്റ്റൈൽ നല്കാൻ അനുയോജ്യമാണ്:
+
+```css
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+h1 {
+ color: #3a241d;
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+```
+
+**ഈ സ്റ്റൈലുകൾ അത്രയ്ക്കായി:**
+- പേജ് മുഴുവൻ ഏകീകൃത ടൈപ്പോഗ്രഫി കാണിക്കാൻ `body` സെലക്ടർ ഉപയോഗിക്കുന്നു
+- മികച്ച നിയന്ത്രണത്തിനായി ബ്രൗസറിന്റെ ഡീഫോൾട്ട് മാർജിനുകളും പാഡിംഗുകളും നീക്കം ചെയ്യുന്നു
+- എല്ലാ ഹെഡിംഗ് എലമെന്റുകളെയും നിറം, സന്ധി, അലൈന്മെന്റ് നൽകുന്നു
+- സ്കെയിലബിൾ, ആക്സസിബിൾ ഫോണ്ട് വലുപ്പത്തിന് `rem` യൂണിറ്റ് ഉപയോഗിക്കുന്നു
+
+എങ്കിലും, എലമെന്റ് സെലക്ടറുകൾ സാധാരണ സ്റ്റൈലിംഗിന് നല്ലതായിരിക്കുമ്പോൾ, ഓരോ ടെററിയം ചെടികൾ പോലുള്ള പ്രത്യേക ഘടകങ്ങൾക്ക് കൂടുതൽ പ്രത്യേക സെലക്ടറുകൾ ആവശ്യമായിരിക്കും.
+
+### ഏകാന്ത എലമെന്റുകൾക്കായി ID സെലക്ടറുകൾ
+
+ID സെലക്ടറുകൾ `#` ചിഹ്നം ഉപയോഗിച്ച് പ്രത്യേക `id` ഉള്ള എലമെന്റുകളെ ലക്ഷ്യമിടുന്നു. പേജിൽ ഓരോ ID ഒറ്റത്തവണ മാത്രം ഉപയോഗിക്കണം, അതിനാൽ പ്രത്യേകം പ്രത്യേക ഘടകങ്ങൾക്ക് (ഉദാ: ടെററിയത്തിന്റെ ഇടത്തും വലത്തും ഉള്ള ചെടി കണ്ടെയ്നറുകൾ) ഇവ നല്ലതാണ്.
+
+ടെററിയത്തിലെ സൈഡ് കണ്ടെയ്നറുകൾ എവിടെ ചെടികൾ താമസിക്കും, അവയ്ക്ക് വേണ്ടി സ്റ്റൈലിംഗ് തീർക്കാം:
+
+```css
+#left-container {
+ background-color: #f5f5f5;
+ width: 15%;
+ left: 0;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+
+#right-container {
+ background-color: #f5f5f5;
+ width: 15%;
+ right: 0;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+```
+
+**ഇവിടെ സംഭവിക്കുന്നത്:**
+- `absolute` പൊസിഷനിംഗുമായി കണ്ടെയ്നറുകൾ ഇടത്തും വലത്തും നീക്കുന്നു
+- സ്ക്രീൻ വലിപ്പത്തിന് അനുസരിച്ച് `vh` (viewport height) യൂണിറ്റിൽ ഉയരം നൽകുന്നു
+- പാഡിംഗിൽ ഉൾപ്പെടുത്തിയവയ്ക്ക് `box-sizing: border-box` ഉപയോഗിക്കുന്നു
+- സോഴ്യമായ ജൂലിയൻ മൂല്യങ്ങളിൽ നിന്നുള്ള `px` യൂണിറ്റുകൾ നീക്കി ലക്ഷ്യമിടുന്നു
+- കഠിനമായ കറുപ്പുപകരം കണ്ണിന് ഇതിന് സൗകര്യമുള്ള സബ്റ്റിൽ പശ്ചാത്തല നിറം നൽകുന്നു
+
+✅ **കോഡ് ഗുണമേന്മ പരിശോധന**: ഈ CSS DRY (Don't Repeat Yourself) നിയമം ലംഘിക്കുന്നതാണ് കാണുന്നത്. ഒരു ID ഒപ്പം ക്ലാസ് ഉപയോഗിച്ച് ഇത് പുനഃസംഘടിപ്പിക്കാമോ?
+
+**മികച്ച സമരയോഗം:**
+```html
+
+
+```
+
+```css
+.container {
+ background-color: #f5f5f5;
+ width: 15%;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+
+#left-container {
+ left: 0;
+}
+
+#right-container {
+ right: 0;
+}
+```
+
+### പുനരുപയോഗപ്പെടുത്താവുന്ന ഘടകങ്ങൾക്ക് ക്ലാസ് സെലക്ടറുകൾ
+
+ക്ലാസ് സെലക്ടറുകൾ `.` ചിഹ്നം ഉപയോഗിച്ച് ഒടുക്കം ഒരു മുതിർന്ന ഇലമെന്റിന് പലത്തവണ സ്റ്റൈലുകൾ പ്രയോഗിക്കാം. ID-കളുടെ വ്യത്യാസം, ക്ലാസുകൾ പേജിലുടനീളം വീണ്ടും ഉപയോഗിച്ചേക്കാം, അതുകൊണ്ട് സ്ഥിരമായ സ്റ്റൈലിംഗ് മാതൃകകൾക്കായി ഇവ ഏറ്റവും അനുയോജ്യമാണ്.
+
+നമ്മുടെ ടെററിയത്തിൽ ഓരോ ചെടിക്കും സമാനമായ സ്റ്റൈലിംഗ് ആവശ്യമായിരിക്കുന്നു എങ്കിലും വ്യക്തിഗത പൊസിഷനിംഗ് വേണം. നാം പുനരുപയോഗ ക്ലാസ്സുകളും ID-യും സംയോജിപ്പിച്ച് ഉപയോഗിക്കാം.
+
+**ഓരോ ചെടിക്കും വേണ്ട HTML ഘടന:**
+```html
+
+
+
` `id="quote"` ഉപയോഗിച്ച് |
+| സന്ദേശ പ്രദേശം | നിലയും വിജയ സന്ദേശങ്ങളും കാണിക്കുന്നു | `
` `id="message"` ഉപയോഗിച്ച് |
+| ടെക്സ്റ്റ് ഇൻപുട്ട് | പ്ലേയർമാർ ഉദ്ധരണി ടൈപ്പ് ചെയ്യുന്നത് ഇവിടെ | `` `id="start"` ഉപയോഗിച്ച് |
+
+**UI ഘടന മനസ്സിലാക്കുക:**
+- **ഉളളടക്കം** ലജിക് അനുസരിച്ച് മേൽനിന്ന് താഴേക്ക് ക്രമീകരിക്കുന്നു
+- **വ്യത്യസ്ത ഘടകങ്ങൾക്ക്** ജാവാസ്ക്രിപ്റ്റ് ലക്ഷ്യമിട്ട് μοναദ IDs നൽകുന്നു
+- **മുകളിലുള്ളവിധത്തിലുള്ള ദൃശ്യക്രമീകരണം** ഉപയോഗിക്ക്തുന്നു ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താൻ
+- **സെമാന്റിക് HTML ഘടകങ്ങൾ ഉൾക്കൊള്ളുന്നത്** ആക്സസിബിലിറ്റിക്കായി
+
+ജാവാസ്ക്രിപ്റ്റിൽ അവ ഉപയോഗിക്കാൻ ഓരോ ഘടകത്തിനും IDs വേണം. നാം സൃഷ്ടിക്കാൻ പോകുന്ന CSS, ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾക്കും റഫറൻസുകൾ നമുക്ക് ചേർക്കണം.
+
+`index.html` എന്ന പുതിയ ഫയൽ സൃഷ്ടിക്കുക. താഴെ കാണുന്ന HTML ചേർക്കുക:
+
+```html
+
+
+
+ Typing game
+ Typing game!
+ Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!
+
+
+
+ Start
+
+
+
+
+```
+
+**ഈ HTML ഘടന എന്ത് സാദ്ധ്യമാക്കുന്നു:**
+- സ്റ്റൈലിംഗിനായി ``-ൽ CSS സ്റ്റൈൽഷീറ്റ് ബന്ധിപ്പിക്കുന്നു
+- ഉപയോക്താക്കൾക്ക് വ്യക്തമായ തലക്കെട്ടും നിർദേശങ്ങളും സൃഷ്ടിക്കുന്നു
+- ഡൈനാമിക് ഉള്ളടക്കത്തിനായി പ്രത്യേക IDs ഉള്ള പ്ലേസ്ഹോൾഡർ പാരഗ്രാഫുകൾ സജ്ജമാക്കുന്നു
+- ആക്സസിബിലിറ്റിക്കായി ഇൻപുട്ട് ഫീൽഡ് ഉൾക്കൊള്ളിക്കുന്നു
+- ഗെയിം ആരംഭിക്കാൻ സ്റ്റാർട്ട് ബട്ടൺ നൽകുന്നു
+- പരമാവധി പ്രകടനത്തിനായി അവസാനം ജാവാസ്ക്രിപ്റ്റ് ഫയൽ ലോഡ് ചെയ്യുന്നു
+
+### ആപ്ലിക്കേഷൻ ആരംഭിക്കുക
+
+ഡെവലപ്പ്മെന്റ് സമയത്ത് ആപ്ലിക്കേഷൻ രൂപം പരിശോധിക്കുന്നത് പിഴവുകൾ അർദ്ധമായി കണ്ടെത്താനും, പുരോഗതി യഥാർത്ഥ സമയത്ത് കാണാനും സഹായിക്കുന്നു. Live Server എന്ന വളരെ വിലപ്പെട്ട ഉപകരണം നിങ്ങൾ മാറ്റങ്ങൾ സേവ് ചെയ്യുമ്പോഴെല്ലാം ബ്രൗസർ ഓട്ടോമാറ്റിക്കായി പുതുക്കുന്നു, ഇതിലൂടെ വികസനം വളരെ കാര്യക്ഷമമാകും.
+
+ഇത് ഏറ്റവും നല്ലത് ഇടനില ക്രമത്തിൽ വികസിപ്പിക്കുന്നത് ആണ്. നമുക്ക് ആപ്ലിക്കേഷൻ ആരംഭിക്കാം. വിഷ്വൽ സ്റ്റുഡിയോ കോഡിനായി ഒരു അതുല്യമായ എക്സ്റ്റൻഷൻ ഉണ്ട് അതാണ് [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ സാദ്ധ്യമായ പ്രാദേശികമായി ഹോസ്റ്റ് ചെയ്ത് നിങ്ങൾ സേവ് ചെയ്യുന്നപ്പോള് ബ്രൗസർ പുതുക്കും.
+
+**[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) സ്ഥാപിക്കാൻ ലിങ്ക് ഓപ്പൺ ചെയ്ത് Install ക്ലിക്ക് ചെയ്യുക:**
+
+**സ്ഥാപന സമയത്ത് നടക്കുന്നത്:**
+- നിങ്ങളുടെ ബ്രൗസർ വിസ്വൽ സ്റ്റുഡിയോ കോഡ് ഓപ്പൺ ചെയ്യാൻ പ്രോമ്പ്റ്റ് ചെയ്യുന്നു
+- എക്സ്റ്റൻഷൻ ഇൻസ്റ്റലേഷൻ പ്രക്രിയ വഴി നിങ്ങൾക്ക് മാർഗനിർദ്ദേശം നല്കുന്നു
+- ഇൻസ്റ്റലേഷൻ പൂർത്തിയാക്കാൻ വിസ്വൽ സ്റ്റുഡിയോ കോഡ് റീസ്റ്റാർട്ട് ആവശ്യമാകും
+
+**ഇൻസ്റ്റാൾ ചെയ്തശേഷം, വിസ്വൽ സ്റ്റുഡിയോ കോഡിൽ Ctrl-Shift-P (അഥവാ Cmd-Shift-P) അമർത്തി കമാൻഡ് പാലറ്റ് തുറക്കുക:**
+
+**കമാൻഡ് പാലറ്റ് മനസ്സിലാക്കുക:**
+- എല്ലാ VS കോഡ് കമാൻഡുകൾക്കും വേഗം ആക്സസ് നൽകുന്നു
+- നിങ്ങൾ ടൈപ്പ് ചെയ്യുമ്പോൾ കമാൻഡുകൾ തിരയുന്നു
+- വേഗത്തിലുള്ള ഡെവലപ്പ്മെന്റിന് കീബോർഡ് ഷോർട്കട്ടുകൾ നൽകുന്നു
+
+** "Live Server: Open with Live Server" ടൈപ്പ് ചെയ്യുക:**
+
+**Live Server ചെയ്യുന്നത്:**
+- നിങ്ങളുടെ പ്രോജക്ട് ഫയലുകൾക്കായി പ്രാദേശിക ഡെവലപ്മെന്റ് സര്വദേശം ആരംഭിക്കുന്നു
+- നിങ്ങൾ സേവ് ചെയ്യുന്ന files നെ വെച്ചു ബ്രൗസർ ഓട്ടോമാറ്റിക് പുനരാരംഭിക്കുന്നു
+- സാധാരണ `localhost:5500` എന്ന പ്രാദേശിക URL വഴി ഫയലുകൾ സേവിക്കുന്നു
+
+**ഒരു ബ്രൗസർ തുറക്കുക, `https://localhost:5500` സന്ദർശിക്കുക:**
+
+ഇപ്പോൾ നിങ്ങൾ സൃഷ്ടിച്ച പേജ് കാണണം! കുറച്ച് പ്രവർത്തനക്ഷമത ചേർക്കാം.
+
+## CSS ചേർക്കുക
+
+ഇപ്പോൾ കാര്യങ്ങൾ മനോഹരമായി കാണിക്കണം! ദൃശ്യ ഫീഡ്ബാക്ക് ഉപയോക്തൃ ഇന്റർഫേസുകൾക്ക് പ്രാരംഭ കാലം മുതൽ അനിവാര്യമാണ്. 1980-കളിൽ ഗവേഷകർ കണ്ടെത്തിയത് ഒറ്റത്തവണ ദൃശ്യ ഫീഡ്ബാക്ക് ഉപയോക്തൃ പ്രകടനവും പിഴവുകളും ചെറുക്കുന്നതിൽ ഗണ്യമായ സഹായം ചെയ്യുന്നു. നാം ഇത് തന്നെ സൃഷ്ടിക്കാനാണ് പോകുന്നത്.
+
+നമ്മുടെ ഗെയം എന്ത് സംഭവിക്കുകയാണ് എന്ന് പൂർണ്ണമായും വ്യക്തമാക്കണം. പ്ലേയർമാർ കൃത്യമായി ഏത് വാക്ക് ടൈപ്പ് ചെയ്യണമെന്നറിയണം, തെറ്റ് ഉണ്ടെങ്കിൽ ഉടൻ അത് കാണണം. ഇതാ ചില ലളിതമെങ്കിലും ഫലപ്രദമായ സ്റ്റൈലിംഗ്:
+
+`style.css` എന്ന പുതിയ ഫയൽ സൃഷ്ടിച്ച് താഴെ കാണിക്കുന്ന സിന്താക്സ് ചേർക്കുക.
+
+```css
+/* inside style.css */
+.highlight {
+ background-color: yellow;
+}
+
+.error {
+ background-color: lightcoral;
+ border: red;
+}
+```
+
+**ഈ CSS ക്ലാസുകൾ എന്താണെന്ന് മനസ്സിലാക്കുക:**
+- നല്ല ದೃശ്യനിർദ്ദേശത്തിനായി നിലവിലുള്ള വാക്ക് മഞ്ഞ ബാക്ക്ഗ്രൗണ്ടോടെ ഹൈലൈറ്റ് ചെയ്യുന്നു
+- ടൈപ്പിംഗ് പിഴവുകൾക്ക് ലളിതമായ കൊറൽ നിറമുള്ള ബാക്ക്ഗ്രൗണ്ട് സിഗ്നൽ നൽകുന്നു
+- ഉപയോക്താവിന്റെ ടൈപ്പിംഗ് പ്രവാഹം തടസ്സപ്പെടുത്താതെ ഉടൻ പ്രതികരണവും നൽകുന്നു
+- ആക്സസിബിലിറ്റിക്കായി വൈവിധ്യമാർന്ന നിറങ്ങൾ ഉപയോഗിക്കുന്നു, വ്യക്തമായ ദൃശ്യ പരസ്പരം
+
+✅ CSS-ന് വരുമ്പോൾ നിങ്ങളുടെ പേജ് എങ്ങിനെയാണ് ഇഷ്ടപ്പെടുന്നതെന്ന് ലേഔട്ട് ചെയ്യാം. കുറച്ച് സമയം എടുക്കുക പേജ് കൂടുതൽ ആകർഷകമാക്കാൻ:
+
+- വ്യത്യസ്ത ഫോണ്ട് തിരഞ്ഞെടുക്കുക
+- തലക്കെട്ടുകൾ നിറം കൊടുക്കുക
+- ഇനങ്ങളുടെ വലിപ്പം ക്രമീകരിക്കുക
+
+## ജാവാസ്ക്രിപ്റ്റ്
+
+ഇവിടെ കാര്യങ്ങൾ രസകരമാണ്! 🎉 ഞങ്ങൾക്കും HTML ഘടനയും CSS സ്റ്റൈലിംഗും ഉണ്ടാക്കി, പക്ഷെ ഇപ്പോള് നമ്മുടെ ഗെയിം ഒരു യന്ത്രമില്ലാത്ത മനോഹര കാറുപോലെ ആണ്. ജാവാസ്ക്രിപ്റ്റ് ആ എഞ്ചിൻ ആണ് - പ്ലേയർമാർ ചെയ്യുന്ന കാര്യങ്ങൾക്ക് പ്രതികരിക്കുന്നതും എല്ലാം പ്രവർത്തനക്ഷമമാക്കുന്നതുമായത്.
+
+ഇവിടെ നിങ്ങളുടെ സൃഷ്ടി ജീവിക്കുന്നു. നാം അതെളുപ്പമാക്കാൻ ഘട്ടം ഘട്ടമായി നോക്കാം:
+
+| ഘട്ടം | ഉദ്ദേശ്യം | നിങ്ങൾ പഠിക്കേണ്ടത് |
+|-------|----------|-----------------|
+| [സ്ഥിരങ്ങൾ സൃഷ്ടിക്കുക](../../../../4-typing-game/typing-game) | ഉദ്ധരണികളും DOM റഫറൻസുകളും സജ്ജമാക്കുക | വെരറിയബിൾ മാനേജ്മെന്റ്, DOM തിരഞ്ഞെടുപ്പ് |
+| [ഗെയിം ആരംഭിക്കാൻ ഇവന്റ് ലിസ്സണർ](../../../../4-typing-game/typing-game) | ഗെയിം ആരംഭിക്കൽ കൈകാര്യം ചെയ്യുക | ഇവന്റ് ഹാൻഡ്ലിംഗ്, UI അപ്ഡേറ്റുകൾ |
+| [ടൈപ്പിംഗിനുള്ള ഇവന്റ് ലിസ്സണർ](../../../../4-typing-game/typing-game) | ഉപയോക്തൃ ഇൻപുട്ട് റിയൽ-ടൈമിൽ ഹാൻഡിൽ ചെയ്യുക | ഇൻപുട്ട് പരിശോധനയും ഡൈനാമിക് ഫീഡ്ബാക്കും |
+
+**ഈ ഘടനയുള്ള സമീപനം നിങ്ങൾക്ക്:**
+- കോഡ് ലജിക്കൽ, കൈകാര്യം ചെയ്യാക്കാവുന്ന ഭാഗങ്ങളായി ക്രമീകരിക്കാൻ സഹായിക്കുന്നു
+- ഫംഗ്ഷണാലിറ്റി ഘട്ടം ഘട്ടമായി നിർമ്മിക്കുമ്പോൾ എളുപ്പത്തിൽ ഡീബഗ് ചെയ്യാം
+- നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വിവിധ ഭാഗങ്ങൾ എങ്ങനെ ചേർന്ന് പ്രവർത്തിക്കുന്നതായി മനസ്സിലാക്കാം
+- ഭാവിയിലെ പ്രോജക്ടുകൾക്കായി പുനരുപയോഗയോഗ്യമായ മാതൃകകൾ സൃഷ്ടിക്കാൻ
+
+പക്ഷെ ആദ്യം, `script.js` എന്ന ഒരു പുതിയ ഫയൽ സൃഷ്ടിക്കുക.
+
+### സ്ഥിരങ്ങൾ ചേർക്കുക
+
+പ്രവർത്തനത്തിലേയ്ക്ക് നമുക്ക് കുതിക്കുമുമ്പ് എല്ലാ വിഭവങ്ങളും ഒരുക്കാം! നാസ മിഷൻ കൺട്രോൾ എല്ലാ നിരീക്ഷണ സംവിധാനങ്ങളും തുടങ്ങും മുൻപ് ഒരുക്കുന്നതുപോലെ തന്നെ, ഒന്നും വൈകാതെ എല്ലാം തയ്യാറാക്കുമ്പോൾ കാര്യങ്ങൾ എളുപ്പമാകും. കളയേണ്ട വസ്തുക്കളെ വേറെയും തിരയുന്നതു ഒഴിവാക്കും, ടൈപോകളും കുറയും.
+
+അടിസ്ഥാനപരമായി നമുക്ക് ആദ്യം സജ്ജമാക്കേണ്ടത്:
+
+| ഡാറ്റ ടൈപ്പ് | ഉദ്ദേശ്യം | ഉദാഹരണം |
+| ഉദ്ധരണികളുടെ അരേ | ഗെയിമിനുവേണ്ടി എല്ലാ શક્ય ഉദ്ധരണികളും സൂക്ഷിക്കുക | `['Quote 1', 'Quote 2', ...]` |
+| വാക്കുകളുടെ അറേ | നിലവിലെ ഉദ്ധരണം വ്യക്തമായ വാക്കുകളായി വിഭജിക്കുക | `['When', 'you', 'have', ...]` |
+| വാക്കുകളുടെ ഇൻഡക്സ് | കളിക്കെട്ടാവുന്ന വാക്ക് ഏതാണ് എന്ന് ട്രാക്ക് ചെയ്യുക | `0, 1, 2, 3...` |
+| ആരംഭ സമയo | സ്കോറിംഗ് കണക്കാക്കാൻ elapsed സമയം കണക്കാക്കുക | `Date.now()` |
+
+**നമ്മുടെ UI ഘടകങ്ങൾക്ക് റഫറൻസുകളും ആവശ്യമാണ്:**
+| ഘടകം | ഐഡി | ഉദ്ദ്ദേശ്യം |
+|---------|----|---------|
+| ടെക്സ്റ്റ് ഇൻപുട്ട് | `typed-value` | പ്ലെയറുകൾ ടൈപ്പുചെയ്യുന്നത് ഇവിടെ |
+| ഉദ്ധരണം പ്രദർശനം | `quote` | ടൈപ്പിക്കേണ്ട ഉദ്ധരണം കാണിക്കുന്നു |
+| സന്ദേശ മേഖല | `message` | നിലഅവകാശങ്ങൾ പ്രദർശിപ്പിക്കുന്നു |
+
+```javascript
+// script.js-ന്റെ ഉൾപരം
+// നമ്മുടെ എല്ലാം ഉദ്ധരണികൾ
+const quotes = [
+ 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+ 'There is nothing more deceptive than an obvious fact.',
+ 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+ 'I never make exceptions. An exception disproves the rule.',
+ 'What one man can invent another can discover.',
+ 'Nothing clears up a case so much as stating it to another person.',
+ 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// കളിക്കാരൻ ഇപ്പോൾ ടൈപ്പ് ചെയ്യുകയാണ് എന്ന വാക്കിന്റെ പട്ടികയും സൂചികയും സൂക്ഷിക്കുക
+let words = [];
+let wordIndex = 0;
+// തുടക്ക സമയം
+let startTime = Date.now();
+// പേജിന്റെ ഘടകങ്ങൾ
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+```
+
+**ഈ സെറ്റ് അപ്പ് കോഡ് എന്ത് കൈപിടിക്കുന്നു എന്നു വിശദീകരിക്കുന്നു:**
+- **ശേഖരിക്കുന്നു** ഷെർലോക് ഹോംസിന്റെ ഉദ്ധരണികൾ `const` ഉപയോഗിച്ച്, കാരണം ഇനം മാറ്റമില്ല
+- **ക്രമീകരിക്കുന്നു** ട്രാക്കിങ് വേറിയബിൾസ് `let` ഉപയോഗിച്ച്, കാരണം ഗെയിം സമയത്ത് മാറാം
+- **ക്യാപ്പ്ചർ ചെയ്യുന്നു** DOM ഘടകങ്ങളുടെ റഫറൻസുകൾ `document.getElementById()` ഉപയോഗിച്ചു കാര്യക്ഷമമായ ആക്സസിന്
+- **സജ്ജമാക്കുന്നു** ഗെയിം ഫംഗ്ഷണാലിറ്റിക്ക് അടിസ്ഥാന ഘടകങ്ങൾ സുതാര്യമായ കണ്ണിയോട്
+- **സംഘടിപ്പിക്കുന്നു** ബന്ധപ്പെട്ട ഡാറ്റയും ഘടകങ്ങളും കോഡ് പരിപാലനത്തിന് എളുപ്പമുള്ള രീതിയിൽ
+
+✅ നിങ്ങളുടെ ഗെയിമിന് കൂടുതൽ ഉദ്ധരണികൾ ചേർക്കുക
+
+> 💡 **പ്രോ ടിപ്പ്**: ആവശ്യമുള്ളപ്പോൾ `document.getElementById()` ഉപയോഗിച്ച് എപ്പോഴും ഘടകങ്ങൾ ലഭ്യമാക്കാം. ഈ ഘടകങ്ങളെ സ്ഥിരമായി പരാമർശിക്കുമ്പോൾ typo ഒഴിവാക്കാൻ constants ഉപയോഗിക്കുക ഉത്തമം. [Vue.js](https://vuejs.org/) അല്ലെങ്കിൽ [React](https://reactjs.org/) പോലുള്ള ഫ്രെയിംവർക്ക്കൾ കേന്ദ്രീകരിച്ച കോഡ് മാനേജ്മെന്റിന് സഹായിക്കും.
+>
+**ഈ സമീപനം എങ്ങനെ മികച്ചതാണ്:**
+- **തെറ്റായ അക്ഷരങ്ങൾ ഒഴിവാക്കുന്നു** പല തവണ ഘടകങ്ങൾ പരാമർശിക്കുമ്പോൾ
+- **വരവായി വായനയ്ക്ക് സഹായിക്കുന്നു** വിശദമായ നിർദേശം നൽകുന്ന constant നാമങ്ങൾ കൊണ്ട്
+- **IDE പിന്തുണ മെച്ചപ്പെടുത്തുന്നു** ഓട്ടോകംപ്ലീറ്റ്, പിശക് പരിശോധിക്കുന്നതിൽ
+- **Refactoring എളുപ്പമാണ്** തുടർന്ന് ID മാറുമ്പോൾ
+
+`const`, `let` & `var` ഉപയോഗിച്ച് ഒരു വീഡിയോകൾ നോക്കാൻ സമയം ചിലവിടുക
+
+[](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
+
+> 🎥 മുകളിൽ ചിത്രം 클릭 ചെയ്ത് വേരിയബിൾസിനെക്കുറിച്ചുള്ള വീഡിയോ കാണുക.
+
+### സ്റ്റാർട്ട് ലൊജിക്ക് ചേർക്കുക
+
+ഇവിടെ എല്ലാം പൊരുത്തപ്പെടുന്നു! 🚀 നിങ്ങൾ ആദ്യ യഥാർത്ഥ ഇവന്റ് ലിസ്റ്റണർ എഴുതാൻ പോകുന്നുണ്ട്, ബട്ടൺ ക്ലിക്കിന് കോഡ് പ്രതികരിക്കുന്നതിൽ സന്തോഷം ഉണ്ടാകും.
+
+ആലോചിക്കൂ: ആരോ ഒരിടത്ത് "Start" ബട്ടൺ ക്ലിക്ക് ചെയ്യാനിരിക്കുകയാണ്, നിങ്ങളുടെ കോഡ് തയ്യാറാകണം. എപ്പോൾ ക്ലിക്ക് ചെയ്യും എന്ന് അറിയില്ല - ഉടൻ അല്ലെങ്കിൽ കോഫി എടുത്ത് തിരിച്ചു വന്നതിന് ശേഷം - എന്നാൽ ക്ലിക്ക് ചെയ്ത് കയ്യിൽ ഗെയിം തുടങ്ങും.
+
+ഉപയോക്താവ് `start` ക്ലിക്ക് ചെയ്യുമ്പോൾ, ഉദ്ധരണി തിരഞ്ഞെടുത്തു, UI സജ്ജമാക്കും, ഇപ്പോഴുള്ള വാക്കും സമയം ട്രാക്ക് ചെയ്യാനും പരിശീലനം തുടങ്ങും. താഴെ നൽകിയിരിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് ചേർക്കുക; സ്ക്രിപ്റ്റ് ബ്ലോക്കിനു ശേഷം വിശദീകരിക്കുന്നു.
+
+```javascript
+// script.js ന്റെ അവസാനം
+document.getElementById('start').addEventListener('click', () => {
+ // ഒരു ക്വോട്ട് നേടുക
+ const quoteIndex = Math.floor(Math.random() * quotes.length);
+ const quote = quotes[quoteIndex];
+ // ക്വോട്ട് ഒരു വാക്കുകളുടെ അരേരിയിലെ ഇടുക
+ words = quote.split(' ');
+ // ട്രാക്ക് ചെയ്യുന്നതിനായി വാക്കുകളുടെ സൂചിക പുനരാരംഭിക്കുക
+ wordIndex = 0;
+
+ // UI അപ്ഡേറ്റുകൾ
+ // ഒരു ക്ലാസ് സജ്ജീകരിക്കാൻ സ്പാൻ ഘടകങ്ങളുടെ ഒരു അരേ സൃഷ്ടിക്കുക
+ const spanWords = words.map(function(word) { return `${word} `});
+ // സ്ട്രിങ്ങിലാക്കുക, ക്വോട്ട് പ്രദർശനത്തിൽ innerHTML ആയി സജ്ജീകരിക്കുക
+ quoteElement.innerHTML = spanWords.join('');
+ // ആദ്യ വാക്ക് ഹൈലൈറ്റ് ചെയ്യുക
+ quoteElement.childNodes[0].className = 'highlight';
+ // മുൻ സന്ദേശങ്ങൾ മായ്ക്കുക
+ messageElement.innerText = '';
+
+ // ടെക്സ്റ്റ്ബോക്സ് സജ്ജമാക്കുക
+ // ടെക്സ്റ്റ്ബോക്സ് മായ്ക്കുക
+ typedValueElement.value = '';
+ // ഫോക്കസ് സജ്ജമാക്കുക
+ typedValueElement.focus();
+ // ഇവന്റ് ഹാൻഡ്ലർ സജ്ജമാക്കുക
+
+ // ടൈമർ തുടങ്ങുക
+ startTime = new Date().getTime();
+});
+```
+
+**കോഡ് ലൊജിക്ക് വിഭാഗങ്ങൾ ആയി വിഭജിക്കുക:**
+
+**📊 വാക്ക് ട്രാക്കിങ് സജ്ജീകരണം:**
+- **തിരഞ്ഞെടുക്കുന്നു** വ്യത്യസ്തമായി ഒരോ സൃഷ്ടിക്കാൻ `Math.floor()` & `Math.random()` ഉപയോഗിച്ച് റാൻഡം ഉദ്ധരണം
+- **മാറ്റുന്നു** ഉദ്ധരണി വാക്കുകളുടെ അറേ ആയി `split(' ')` വഴി
+- **പുനഃക്രമീകരിക്കുന്നു** `wordIndex` നെ 0ൽ, കാരണം കളിക്കാർ ആദ്യ വാക്കിലൂടെ തുടങ്ങും
+- **ഉറപ്പാക്കുന്നു** പുതിയ റൗണ്ട് ഗെയിം നില
+
+**🎨 UI സജ്ജീകരണം & പ്രദർശനം:**
+- **സൃഷ്ടിക്കുന്നു** `` ഘടകങ്ങളുടെ അറേ, ഓരോ വാക്കും സ്വതന്ത്ര സ്റ്റൈലിംഗിനായി വട്ടിപ്പഴുക്ക് ചെയ്യും
+- **ചേർക്കുന്നു** ആ സ്പാൻ ഘടകങ്ങൾ ഒരൊറ്റ സ്ട്രിങായി DOM അപ്ഡേറ്റിന്
+- **പ്രധാനമാണ്** ആദ്യ വാക്ക് `highlight` CSS ക്ലാസ് ചേർത്ത്
+- **മാറ്റുന്നു** മുൻഗാമി സന്ദേശങ്ങൾ നീക്കി ക്ലീൻ സ്റ്റേറ്റ് നൽകുന്നു
+
+**⌨️ ടെക്സ്റ്റ് ബോക്സ് ഒരുക്കൽ:**
+- **നീക്കം ചെയ്യുന്നു** നിലവിലെ ടെക്സ്റ്റ് ഇൻപുട്ടിൽ നിന്നും
+- **പ്രധാന ശ്രദ്ധ** ഇൻപുട്ട് ബോക്സിലേക്ക് നല്കി ഉടനടി ടൈപ്പ് ആരംഭിക്കാനായി
+- **തയാറാക്കുന്നു** പുതിയ ഗെയിം സെഷനായി
+
+**⏱️ ടൈമർ ആരംഭിക്കൽ:**
+- **പിടിക്കുന്നു** നിലവിലെ സമയമുദ്ര `new Date().getTime()` ഉപയോഗിച്ച്
+- **സജ്ജമാക്കുന്നു** ടൈപ്പിംഗ് സ്പീഡ് കണക്കാക്കാനും സമയബന്ധിത പ്രവർത്തനം തുടങ്ങാനും
+- **തുടക്കുന്നു** പെർഫോർമൻസ് ട്രാക്കിംഗ്
+
+### ടൈപ്പിംഗ് ലോജിക്ക് ചേർക്കുക
+
+ഇപ്പോൾ ഗെയിമിന്റെ ഹൃദയം കൈകാര്യം ചെയ്യാം! ആദ്യമായി സങ്കീർണ്ണമെന്നുചിത്രം വരാമെങ്കിലും ഓരോ ഭാഗവും കിടിലനായിരുന്നു. ഒടുവിൽ മുഴുവനായും ലൊജികായി തോന്നും.
+
+നാം നിർമിക്കുന്നത് ഏറെ ജടിലമാണ്: ഓരോ അക്ഷരം ടൈപ് ചെയ്യുമ്പോഴും, കോഡ് ചെക്ക് ചെയ്ത് ഫീഡ്ബാക് നൽകുകയും അടുത്ത് ചെയ്യേണ്ടത് നിരീക്ഷിക്കുകയും ചെയ്യും. 1970-കളിൽ WordStar പോലുള്ള വേഗത്തിലുള്ള പലര്ക്ക്实时 ഫീഡ്ബാക് നൽകിവന്ന മാതൃക കൂടിയാണ്.
+
+```javascript
+// script.js ന് അവസാനം
+typedValueElement.addEventListener('input', () => {
+ // ഇപ്പോഴത്തെ വാക്ക് നേടുക
+ const currentWord = words[wordIndex];
+ // നിലവിലെ മൂല്യം നേടുക
+ const typedValue = typedValueElement.value;
+
+ if (typedValue === currentWord && wordIndex === words.length - 1) {
+ // വാക്യത്തിന്റെ അവസാനം
+ // വിജയത്തെ പ്രദർശിപ്പിക്കുക
+ const elapsedTime = new Date().getTime() - startTime;
+ const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+ messageElement.innerText = message;
+ } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+ // വാക്കിന്റെ അവസാനം
+ // പുതിയ വാക്കിനായി typedValueElement ക്ലിയർ ചെയ്യുക
+ typedValueElement.value = '';
+ // അടുത്ത വാക്കിലേക്ക് നീങ്ങുക
+ wordIndex++;
+ // quote ൽ ഉള്ള എല്ലാ എലമെന്റുകൾക്കും ക്ലാസ് നാമം റീസെറ്റ് ചെയ്യുക
+ for (const wordElement of quoteElement.childNodes) {
+ wordElement.className = '';
+ }
+ // പുതിയ വാക്കിനെ ഹൈലൈറ്റ് ചെയ്യുക
+ quoteElement.childNodes[wordIndex].className = 'highlight';
+ } else if (currentWord.startsWith(typedValue)) {
+ // നിലവിൽ ശരിയാണ്
+ // അടുത്ത വാക്കിനെ ഹൈലൈറ്റ് ചെയ്യുക
+ typedValueElement.className = '';
+ } else {
+ // പിശക് സ്ഥിതി
+ typedValueElement.className = 'error';
+ }
+});
+```
+
+**ടൈപ്പിംഗ് ലോജിക്ക് ഫ്ലോ മനസ്സിലാക്കുക:**
+
+ഫങ്ഷൻ വാട്ടർഫോൾ രീതിയിൽ, ഏറ്റവും പ്രത്യേകതയുള്ള സ്ഥിതികളിൽ നിന്ന് പൊതുവെകിലേക്ക് പരിശോധിക്കുന്നു. ഓരോ കാഴ്ച്ചയും വിശകലനം ചെയ്യാം:
+
+```mermaid
+flowchart TD
+ A[പ്ലെയർ അക്ഷരം ടൈപ്പ് ചെയ്യുന്നു] --> B[നിലവിലെ വാക്കും ടൈപ്പുചെയ്ത മൂല്യവും നേടുക]
+ B --> C{ഉദ്ധരണി പൂർത്തിയായോ?}
+ C -->|അതെ| D[സമയം കൂടി പൂർത്തിയാക്കിയ സന്ദേശം പ്രദർശിപ്പിക്കുക]
+ C -->|ഇല്ല| E{വാക്ക് സ്പെയ്സോടെ പൂർത്തിയായോ?}
+ E -->|അതെ| F[ഇൻപുട്ട് ക്ലിയർ ചെയ്യുക, അടുത്ത വാക്കിലേക്ക് മുoന്നു, ഹൈലൈറ്റ് അപ്ഡേറ്റ് ചെയ്യുക]
+ E -->|ഇല്ല| G{ഇത്രവരെ ശരിയായി ടൈപ്പ് ചെയ്തിട്ടുണ്ടോ?}
+ G -->|അതെ| H[പിശക് സ്റ്റൈലിംഗ് നീക്കം ചെയ്യുക]
+ G -->|ഇല്ല| I[പിശക് സ്റ്റൈലിംഗ് കാണിക്കുക]
+```
+**🏁 ഉദ്ധരണം പൂര്ത്തിയായി (സിനിമ 1):**
+- **പരിശോദിക്കുന്നു** ടൈപ്പ് ചെയ്ത വാചകം നിലവിലെ വാക്ക് ഒപ്പം അവസാന വാക്കിലാണ് എന്ന്
+- **കണക്കാക്കുന്നു** സ്റ്റാർട്ട് സമയം മുതൽ ഇപ്പോൾ വരെ_elapsed_ സമയം ആയി
+- **മില്ലിസെക്കൻഡ് സെക്കന്റ് ആയി** 1,000ൽ 部ിഷിക്കു
+- **പ്രകടിപ്പിക്കുന്നു** വിജയ സന്ദേശം സമയത്തോടുകൂടി
+
+**✅ വാക്ക് പൂര്ത്തിയായി (സിനിമ 2):**
+- **ഗ്രഹിക്കുന്നു** വാക്ക് പൂർത്തിയായപ്പോൾ ഇൻപുട്ട് സ്പേസ് കൊണ്ട് അവസാനിക്കുന്നതു
+- **സ്ഥാപിക്കുന്നു** നീക്കിയ ഇൻപുട്ട് മുഴുവനായും നിലവിലെ വാക്കുമായി ഒത്തിരിക്കുന്നു എന്ന്
+- **സോഷ കൾ വാക്ക് വേണ്ടി** ഇൻപുട്ട് ബോക്സ് ക്ലിയർ ചെയ്യുന്നു
+- **മുന്നോട്ട് നീങ്ങുന്നു** `wordIndex` വർദ്ധിപ്പിച്ച്
+- **പ്രകടിപ്പിക്കുന്നു** ഹൈലൈറ്റ് മാറ്റം എല്ലാ ക്ലാസ്സുകളും നീക്കി പുതുതായി
+
+**📝 ടൈപ്പിംഗ് തുടരുന്നു (സിനിമ 3):**
+- **പരിശോധിക്കുന്നു** ഇപ്പോഴത്തെ വാക്ക് ടൈപ് ചെയ്തതിലൂടെ തുടങ്ങുന്നതായി
+- **നീക്കം ചെയ്യുന്നു** പിശക് ക്ലാസ്സ് നീക്കി സങ്കേതം ശരിയാണ് എന്ന് തെളിയിക്കാൻ
+- **അനുവദിക്കുന്നു** തുടരെ ടൈപ്പിങ്ങ് തടസ്സമില്ലാതെ
+
+**❌ പിശക് സ്ഥിതി (സിനിമ 4):**
+- **പ്രവർത്തിക്കുന്നു** ടൈപ്പ് ചെയ്ത വാചകം പ്രതീക്ഷിക്കുന്ന വാക്കിന്റെ തുടക്കത്തിനൊപ്പം ഒത്തില്ലെങ്കിൽ
+- **ചേർക്കുന്നു** പിശക് CSS ക്ലാസ് ഉടൻ ദൃശ്യ പ്രതിഫലനത്തിന്
+- **സഹായിക്കുന്നു** കളിക്കാർ പിശകുകൾ അടിയന്തിരമായി കണ്ടെത്താനും പുനർത്തപ്പിക്കാനും
+
+## നിങ്ങളുടെ അപ്ലിക്കേഷൻ പരിശോധിക്കുക
+
+നിങ്ങൾ പൂർത്തിയാക്കി! 🎉 നിങ്ങൾ ഒരു യഥാർത്ഥ പ്രവർത്തനക്ഷമമായ ടൈപ്പിംഗ് ഗെയിം സംഭവാടകര ഫംഗ്ഷനിലൂടെയായി നിർമ്മിച്ചു. ഈ നേട്ടം വിലമതിക്കാൻ ചില നിമിഷം ചിരിച്ച് സ്വീകാര്യമാണ്.
+
+ഇപ്പോൾ പരിശോധന യാഥാർത്ഥ്യത്തിൽ. ഇത് സാധാരണപ്രകാരം പ്രവർത്തിക്കുന്നുണ്ടോ? നമ്മൾ ഒന്നും മിണ്ടിയിട്ടില്ലേ? പൊതുവിൽ, ഉടൻ മിസ്സ് ആയാൽ സാധാരണംം, പരിചയസമ്പന്നരും അപാകതകൾ കണ്ടെത്താറുണ്ട് ഇത് വികസനമാണ്!
+
+`start` ക്ലിക്ക് ചെയ്ത് ടൈപ്പിംഗ് ആരംഭിക്കൂ! ഇത് മുൻ കാണിച്ച ആനിമേഷനോട് ചുരുങ്ങിയ ലഹരിയിൽ കാണും.
+
+
+
+**പരിശോധിക്കേണ്ട ഘടകങ്ങൾ:**
+- **നിർണയിക്കുന്നു** Start ക്ലിക്കു റാൻഡം ഉദ്ധരണി പ്രദർശിപ്പിക്കുന്നുണ്ടോ എന്ന്
+- **സഹായിക്കുന്നു** ടൈപ്പുചെയ്യുമ്പോൾ ഇപ്പോഴത്തെ വാക്ക് ശരിയായി ഹൈലൈറ്റ് ആകുന്നതെന്ന്
+- **പരിശോധിക്കുന്നു** തെറ്റായി ടൈപ്പിങ്ങിന് പിശക് സ്റ്റൈലുകൾ കാണിക്കപ്പെടുന്നുവോ
+- **ഉറപ്പാക്കുന്നു** വാക്ക് പൂർത്തിയായാൽ ഹൈലൈറ്റ് പ്രവേശിപ്പിക്കുന്നു
+- **പ്രവർത്തിക്കുന്നു** ഉദ്ധരണം പൂർത്തിയായി മെസേജ് സമയത്തോടെ പ്രദർശിപ്പിക്കുന്നു
+
+**സാധാരണ ഡീബഗിംഗ് ടിപ്പുകൾ:**
+- **പരിശോധിക്കുക** ബ്രൗസറിന്റെ കോൺസോൾ (F12) ജാവാസ്ക്രിപ്റ്റ് പിശകുകൾക്കായി
+- **ഉറപ്പാക്കുക** ഫയൽ നാമങ്ങൾ കെയ്സ്-സെൻസിറ്റീവ് ആയി ശരിയായിട്ടാണെന്ന്
+- **പരിശോധിക്കുക** ലൈവ് സർവർ പ്രവർത്തിക്കുന്നുവോ, പുതുക്കുന്നു എന്ന്
+- **വിവിധ ഉദ്ധരണികൾ ശ്രമിക്കുക** റാൻഡം തിരഞ്ഞെടുപ്പ് ശരിയാണെന്ന്
+
+---
+
+## GitHub Copilot ഏജന്റ് ചാലഞ്ച് 🎮
+
+ഈ ചാലഞ്ച് പൂർത്തിയാക്കാൻ ഏജന്റ് മോഡ് ഉപയോഗിക്കുക:
+
+**വിവരണം:** കളിക്കാരന്റെ പ്രകടനത്തെ അടിസ്ഥാനമാക്കി ഗെയിമിന്റെ ബുദ്ധിമുട്ട് ക്രമീകരിക്കുന്ന difficulty system ഔട്ട്പുട്ട് ചെയ്യുക. ഈ ചാലഞ്ചിൽ പുരോഗമന ഇവന്റ് കൈകാര്യം, ഡാറ്റ വിശകലനം, ഡൈനാമിക് UI അപ്ഡേറ്റ് പരിശീലനങ്ങൾ ഉൾപ്പെടും.
+
+**പ്രോംപ്റ്റ്:** ടൈപ്പിംഗ് ഗെയിമിനായി difficulty adjustment system ഇത് നിർമിക്കുക:
+1. കളിക്കാരന്റെ ടൈപ്പിംഗ് സ്പീഡ് (മിനിറ്റിൽ വാക്കുകൾ) & ആക്യുറസി ശതമാനം ട്രാക്ക് ചെയ്യുക
+2. സജ്ജമാക്കുക മൂന്ന് difficulty നിലകൾ: Easy (സരള ഉദ്ധരണികൾ), Medium (നിലവിലുള്ള ഉദ്ധരണികൾ), Hard (പങ്കങ്ങൾ ഉൾപ്പെടുന്ന കഠിന ഉദ്ധരണികൾ)
+3. നിലവിലെ difficulty ലെവലും കളിക്കാരന്റെ സ്റ്റാറ്റിസ്റ്റിക്കുകളും UIയിൽ കാണിക്കുക
+4. 3 തുടർച്ചയായ നല്ല പ്രകടനങ്ങൾക്കു ശേഷം difficulty വർദ്ധിപ്പിക്കുന്ന streak കാപ്പി നടപ്പിലാക്കുക
+5. difficulty മാറ്റങ്ങൾ കാണിക്കാൻ ദൃശ്യ ഫീഡ്ബാക്ക് (നിറങ്ങൾ, ആനിമേഷനുകൾ) ചേർക്കുക
+
+ഈ സവിശേഷത നടപ്പിലാക്കാൻ ആവശ്യമായ HTML ഘടകങ്ങൾ, CSS ഷൈലുകൾ, ജാവാസ്ക്രിപ്റ്റ് ഫംഗ്ഷനുകൾ ചേർക്കുക. ശരിയായ പിശക് കൈകാര്യം ഉൾപ്പെടുത്തുക; ARIA ലേബലുകൾ ഉപയോഗിച്ച് ഗെയിം ആക്സസിബിൾ ആക്കുക.
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ഇവിടെ കൂടുതൽ പഠിക്കൂ.
+
+## 🚀 ചാലഞ്ച്
+
+നിങ്ങളുടെ ടൈപ്പിംഗ് ഗെയിം അടുത്ത നിലയിലേക്കു കൂട്ടാൻ തയ്യാറാണോ? ഇവന്റ് ഹാൻഡ്ലിംഗ് & DOM മാനിപुलेഷൻ കൂടുതൽ ആഴത്തിലുള്ള അറിവിനായി ഈ വർദ്ധിപ്പിച്ച സവിശേഷതകൾ പരീക്ഷിക്കൂ:
+
+**കൂടുതൽ പ്രവർത്തനങ്ങൾ ചേർക്കുക:**
+
+| സവിശേഷത | വിവരണം | പരിശീലനം കിട്ടുന്നത് |
+|---------|-------------|------------------------|
+| **ഇൻപുട്ട് നിയന്ത്രണം** | പൂർത്തിയായപ്പോൾ `input` ഇവന്റ് ലിസ്റ്റണർ ഡിസ്എബിള് ചെയ്ത്, ബട്ടൺ ക്ലിക്കിൽ അത് വീണ്ടും എനേബിൾ ചെയ്യുക | ഇവന്റ് മാനേജ്മെന്റ് & സ്റ്റേറ്റ് നിയന്ത്രണം |
+| **UI സ്റ്റേറ്റ് മാനേജ്മെന്റ്** | കളിക്കാരൻ ഉദ്ധരണം പൂർത്തിയാക്കിയാൽ ടൈപ് ബോക്സ് ഡിസ്എബിള് ചെയ്യുക | DOM പ്രോപ്പർട്ടി മാനിപുലേഷൻ |
+| **മോഡൽ ഡയലോഗ്** | വിജയം മെസേജ് അടങ്ങിയ മോഡൽ ഡയലോഗ് പ്രദർശിപ്പിക്കുക | മുൻനിര UI പാറ്റേണുകൾ & ആക്സസിബിലിറ്റി |
+| **ഹൈ സ്കോർ സിസ്റ്റം** | `localStorage` ഉപയോഗിച്ച് ഹൈ സ്കോർ സൂക്ഷിക്കുക | ബ്രൗസർ സ്റ്റോറേജ് APIകൾ & ഡാറ്റ സ്ഥിരത |
+
+**നിർവ്വഹണ ടിപ്പുകൾ:**
+- സ്ഥിരതയ്ക്കായി `localStorage.setItem()`, `localStorage.getItem()` പഠിക്കുക
+- ഇവന്റ് ലിസ്റ്റണർ ഡൈനാമിക്കും ആയി ചേർക്കുന്നതിനും നീക്കം ചെയ്യുന്നതിലും പരിശീലിക്കുക
+- HTML dialog ഘടകങ്ങൾ അല്ലെങ്കിൽ CSS മോഡൽ പാറ്റേണുകൾ പരിശോദിക്കുക
+- ഫോം നിയന്ത്രണങ്ങൾ ഡിസ്എബിള് ചെയ്ത്, എനേബിള് ചെയ്യുമ്പോൾ ആക്സസിബിലിറ്റി പരിഗണിക്കുക
+
+## പോസ്റ്റ്-ലെക്ചർ ക്വിസ്
+
+[പോസ്റ്റ്-ലെക്ചർ ക്വിസ്](https://ff-quizzes.netlify.app/web/quiz/22)
+
+---
+
+## 🚀 നിങ്ങളുടെ ടൈപ്പിംഗ് ഗെയിം മാസ്റ്ററി ടൈംലൈൻ
+
+### ⚡ **അടുത്ത 5 മിനിറ്റിൽ നിങ്ങള് ചെയ്യേണ്ടത്**
+- [ ] വിവിധ ഉദ്ധരണികളോടെ നിങ്ങളുടെ ടൈപ്പിംഗ് ഗെയിം ടെസ്റ്റ് ചെയ്യുക, സുതാര്യമായി പ്രവർത്തിക്കുന്നുണ്ടോ എന്ന്
+- [ ] CSS സ്റ്റൈലിംഗ് പരിശ്രമിക്കുക - ഹൈലൈറ്റ് & പിശക് നിറങ്ങൾ മാറ്റി നോക്കുക
+- [ ] ബ്രൗസറിന്റെ DevTools (F12) തുറന്നു Console കാണുക കളിക്കുമ്പോൾ
+- [ ] ഒരു ഉദ്ധരണം അവസാനം വേഗത്തിൽ തീർക്കാൻ ശ്രമിക്കുക
+
+### ⏰ **ഈ മണിക്കൂറിൽ നിങ്ങൾ സാധിക്കാവുന്നത്**
+- [ ] അറേയിൽ കൂടുതൽ ഉദ്ധരണികൾ ചേർക്കുക (തീർച്ചയായും ഇഷ്ടപുസ്തകങ്ങളിൽ നിന്നോ കൂടുതൽ സിനിമകളിൽ നിന്നോ)
+- [ ] ചാലഞ്ച് സെക്ഷനിൽ നിന്ന് localStorage ഹൈ സ്കോർ സിസ്റ്റം നടപ്പിലാക്കുക
+- [ ] ഓരോ ഗെയിമിനുശേഷം വാക്കുകൾ പ്രತಿ മിനിറ്റിൽ കാണിക്കുന്ന കല്കുലേറ്റർ നടപ്പാക്കുക
+- [ ] ശരിയായ ടൈപ്പ്, പിശക്, പൂർത്തീകരണം തുടങ്ങിയവയ്ക്ക് ഓഡിയോ ഫീൽഡ് ചേർക്കുക
+
+### 📅 **നിങ്ങളുടെ ആഴ്ച്ച മുഴുവനായുള്ള യാത്ര**
+- [ ] ഒരേ സമയം ഒരുപ_accessor ഏറ്റവുമുള്ള മൾട്ടിപ്പ്ലെയർ പതിപ്പ് അധിഷ്ഠിതമാക്കുക
+- [ ] വ്യത്യസ്ത ബുദ്ധിമുട്ട് തലങ്ങൾ വേണ്ടി വ്യത്യസ്ത ഉദ്ധരണികൾ ഉപയോഗിക്കുക
+- [ ] ഉദ്ധരണിയുടെ പുരോഗതിയുടെ progress ബാർ ചേർക്കുക
+- [ ] വ്യക്തിഗത സ്ഥിതിവിവരങ്ങൾ ട്രാക്ക് ചെയ്യുന്ന യുസർ അക്കൗണ്ടുകൾ നടപ്പിലാക്കുക
+- [ ] ഉപയോക്താക്കളെ ഇഷ്ടാനുസൃതമായി സ്റ്റൈലിൻഗിന്റെ തീമുകൾ തെരഞ്ഞെടുക്കാം
+
+### 🗓️ **നിങ്ങളുടെ മാസം മുഴുവൻ രൂപांतരം**
+- [ ] യഥാർത്ഥ മാനസിക സ്ഥിതി പരിശീലനത്തിനായി ഒരു ടൈപ്പിംഗ് കോഴ്സ് സൃഷ്ടിക്കുക
+- [ ] ഏത് അക്ഷരങ്ങൾ/വാക്കുകൾ കൂടുതലായ പിശക് സൃഷ്ടിക്കുന്നു എന്നത് വിശകലനം ചെയ്യുന്ന അനലിറ്റിക്സ് നിർമ്മിക്കുക
+- [ ] വിവിധ ഭാഷകൾക്കും കീബോർഡ് ലേ ഔട്ടുകൾക്കും പിന്തുണ ചേർക്കുക
+- [ ] സാഹിത്യമേഖലകളിൽ നിന്നുള്ള ഉദ്ധരണികൾ കോഴ്സിന്റേയും API മുഖേന ഇറക്കുമതി ചെയ്യുക
+- [ ] നിങ്ങളുടെ മെച്ചപ്പെട്ട ടൈപ്പിംഗ് ഗെയിം മറ്റുള്ളവർക്ക് ഉപയോഗിക്കാൻ പൊതുവായി പ്രസിദ്ധീകരിക്കുക
+
+### 🎯 **അവസാന ഇടപാട് പരിശോധന**
+
+**മുന്നോട്ട് പോകുന്നതിന് മുമ്പ്, ഒരു നിമിഷം ആഘോഷിക്കൂ:**
+- ഈ ഗെയിം നിർമ്മിക്കുമ്പോൾ ഏറ്റവും സന്തോഷകരമായ നിമിഷം ഏത്?
+- ഇവന്റ്-ഡ്രിവൻ പ്രോഗ്രാമിംഗ് എങ്ങനെ അനുഭവപ്പെടുന്നു തുടങ്ങി ഇപ്പോൾ എങ്ങനെ?
+- ഈ ഗെയിംക്ക് വ്യക്തമായ ഒരു സവിശേഷത ചേർക്കാൻ നിങ്ങൾ ഏറ്റവും ആഗ്രഹിക്കുന്നത് എന്ത്?
+- ഇവന്റ് കൈകാര്യം ആശയങ്ങൾ മറ്റു പ്രോജക്ടുകളിൽ എങ്ങനെ പ്രയോഗിക്കാമെന്ന് നിങ്ങൾക്കു തോന്നുന്നു?
+
+```mermaid
+journey
+ title നിങ്ങളുടെ ഇവന്റ് പ്രോഗ്രാമിംഗ് ആത്മവിശ്വാസ യാത്ര
+ section ഇന്ന്
+ ഇവന്റുകൾ മനസ്സിലാക്കൽ: 3: You
+ UI നിർമ്മിക്കൽ: 4: You
+ ഇവന്റ് ലിസണറുകൾ എഴുതൽ: 5: You
+ section ഈ ആഴ്ച
+ ഫീച്ചറുകൾ ചേർക്കൽ: 4: You
+ പ്രശ്നം തിരുത്തൽ: 5: You
+ UX മെച്ചപ്പെടുത്തൽ: 4: You
+ section അടുത്ത മാസം
+ സങ്കീർണ്ണ ആപ്പുകൾ നിർമ്മിക്കൽ: 5: You
+ മറ്റുള്ളവരെ പഠിപ്പിക്കൽ: 5: You
+ ഫ്രെയിംവർക്ക് സൃഷ്ടിക്കൽ: 5: You
+```
+> 🌟 **ഓർമ്മിക്കുക**: ഇന്ററാക്ടീവ് വെബ്സൈറ്റുകളും ആപ്ലിക്കേഷനുകളുടെയും പവർ അടങ്ങിയ പ്രധാന ആശയങ്ങൾ നിങ്ങൾ ഈ സമയത്ത് കൈവരിച്ചു. ഇവന്റ്-ഡ്രിവൻ പ്രോഗ്രാമിംഗ് വെബ് ജീവിച്ചിരിക്കുന്നതും പ്രതികരണശേഷിയുള്ളതും ആക്കുന്നു. ഓരോ തവണ നിങ്ങൾ ഒരു ഡ്രോപ്ഡൗൺ മെനു, ടൈപ്പിക്കൽ ഫോർം, ക്ലിക്ക് പ്രതികരിക്കുന്ന ഗെയിം കാണുമ്പോഴും നിങ്ങൾ അതിൻ്റെ മായാജാലം മനസ്സിലാക്കുന്നു. നിങ്ങൾ വെറും കോഡ് പഠിക്കുന്നില്ല - സൂക്ഷ്മവും ആകർഷകവുമായി അനുഭവങ്ങൾ സൃഷ്ടിക്കുന്നു! 🎉
+
+---
+
+## അവലോകനവും സ്വയം അധ്യയനവും
+
+വെബ്ബ് ബ്രൗസറിലൂടെ ഡെവലപ്പറിന് ലഭ്യമായ [സകല ഇവന്റുകളും](https://developer.mozilla.org/docs/Web/Events) വായിച്ച് അവ ഉപയോഗിക്കേണ്ട സാഹചര്യങ്ങൾ ആലോചിക്കുക.
+
+## അസൈന്മെന്റ്
+
+[പുതിയ കീബോർഡ് ഗെയിം സൃഷ്ടിക്കുക](assignment.md)
+
+---
+
+
+**അസാധുതാ പ്രസ്താവന**:
+ഈ രേഖ AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യത ലക്ഷ്യമിടുന്നുവെങ്കിലും, ഓട്ടോമേറ്റഡ് വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റായ വിവരം ഉൾപ്പെടാം എന്ന് മനസിലാക്കണം. അസൽ രേഖയിലെ എഴുത്ത് ഭാഷയിൽ ഉള്ള പ്രമാണം മാത്രമേ അതിന്റേതായ പ്രാമാണികമായ ഉറവിടം ആയി കരുതപ്പെടൂ. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം നിർബന്ധമായി നിർദ്ദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിനാൽ ഉണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്കോ തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ ഞങ്ങളുടെ ഉത്തരവാദിത്വം ഇല്ല.
+
\ No newline at end of file
diff --git a/translations/ml/4-typing-game/typing-game/assignment.md b/translations/ml/4-typing-game/typing-game/assignment.md
new file mode 100644
index 000000000..7fd242eaf
--- /dev/null
+++ b/translations/ml/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,57 @@
+
+# പുതിയ കീബോർഡ് ഗെയിം സൃഷ്ടിക്കുക
+
+## നിർദ്ദേശങ്ങൾ
+
+ടൈപ്പിംഗ് ഗെയിമുമായി ഇവന്റ്-ഡ്രിവൻ പ്രോഗ്രാമിങ്ങിന്റെ അടിസ്ഥാനങ്ങൾ നിങ്ങൾ കൈക്കൊണ്ടതോടെ, നിങ്ങളുടെ സൃഷ്ടിപരംവശം പുറത്തുവരുമ്പോൾ! ഇവന്റ് ഹാൻഡ്ലിംഗ്, DOM മാനിപ്പുലേഷൻ, ഉപയോക്തൃ ഇടപെടൽ മേൽനോട്ട പാറ്റേണുകൾ എന്നിവയിലെ നിങ്ങളുടെ മനസിലാക്കലുകൾ പ്രദർശിപ്പിക്കുന്ന കീബോർഡ് അടിസ്ഥാനത്തിലുള്ള നിങ്ങളുടെ സ്വന്തം ഒരു ഗെയിം ഡിസൈൻ ചെയ്യുകയും നിർമ്മിക്കുകയുമാണ് ഇത്.
+
+കീബോർഡ് ഇവന്റുകൾ ഉപയോഗിച്ച് പ്രത്യേക പ്രവൃത്തികൾ പൂർത്തിയാക്കുന്ന ഒരു ചെറിയ ഗെയിം സൃഷ്ടിക്കുക. ഇത് വ്യത്യസ്ത തരം ടൈപ്പിംഗ് ഗെയിം ആകാം, കീയിടലുകളിൽ സ്ക്രീനിൽ പിക്സലുകൾ ചിത്രീകരിക്കുന്ന ആർട്ട് ആപ്ലിക്കേഷൻ ആകാം, അറോറുകൾ നിയന്ത്രിക്കുന്ന ഒരു ലളിതമായ ആർകേഡ് ശൈലിയുടെ ഗെയിം ആകാം, അല്ലെങ്കിൽ നിങ്ങൾക്ക് സങ്കല്പിക്കാവുന്ന മറ്റ് സൃഷ്ടിപരമായ ആശയങ്ങളായിരിക്കും. സൃഷ്ടിപരമാകുകയായി വിചാരിക്കുകയും വ്യത്യസ്ത കീകൾ വ്യത്യസ്ത പ്രവൃത്തികൾ ട്രിഗർ ചെയ്യുമ്പോൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ധാരണയാക്കുക!
+
+**നിങ്ങളുടെ ഗെയിം ഉൾപ്പെടുത്തേണ്ടത്:**
+
+| ലാഭം | വിവരണം | ഉദ്ദേശ്യം |
+|-------------|-------------|---------|
+| **ഇവന്റ് ലിസണറുകൾ** | കുറഞ്ഞത് 3 വ്യത്യസ്ത കീബോർഡ് ഇവന്റുകൾക്ക് പ്രതികരിക്കുക | ഇവന്റ് ഹാൻഡ്ലിംഗിന്റെ മനസിലാക്കൽ പ്രദർശിപ്പിക്കുക |
+| **ദൃശ്യ പ്രതികരണം** | ഉപയോക്തൃ ഇൻപുട്ടിന് ഉടനെ ദൃശ്യ പ്രതികരണം നൽകുക | DOM മാനിപ്പുലേഷനിലെ നൂതനത കാണിക്കുക |
+| **ഗെയിം ലζίക്** | സ്കോർ ചെയ്യൽ, ലെവലുകൾ, അല്ലെങ്കിൽ പുരോഗതി മെക്കാനിസങ്ങൾ ഉൾപ്പെടുത്തുക | അപ്ലിക്കേഷൻ അവസ്ഥ നടപ്പാക്കൽ അഭ്യാസിക്കുക |
+| **ഉപയോക്തൃ ഇന്റർഫേസ്** | വ്യക്തമായ നിർദ്ദേശങ്ങളും സൗഹൃദ നിയമനിർമ്മിതികളും | ഉപയോക്തൃ അനുഭവ രൂപകല്പനാ നൈപുണ്യങ്ങൾ വികസിപ്പിക്കുക |
+
+**പ്രവർത്തനപാരമായ സൃഷ്ടിപരമായ ആശയങ്ങൾ:**
+- **റിദം ഗെയിം**: കളിക്കാർ സംഗീതത്തിലോ ദൃശ്യ സൂചനകളിലോ വിരുദ്ധമായി കീകൾ അമർത്തുക
+- **പിക്സൽ ആർട്ട് ക്രിയേറ്റർ**: വ്യത്യസ്ത കീകൾ വ്യത്യസ്ത നിറങ്ങളും മാതൃകകളും പെയിന്റ് ചെയ്യുന്നു
+- **വേഡ് ബിൽഡർ**: കളിക്കാർ പ്രത്യേക ക്രമത്തിൽ അക്ഷരങ്ങൾ ടൈപ്പ് ചെയ്ത് വാക്കുകൾ സൃഷ്ടിക്കുന്നു
+- **സ്നേക്ക് ഗെയിം**: അറോഷർ കീകൾ ഉപയോഗിച്ച് ഒരു സ്നേക്ക് നിയന്ത്രിച്ച് ഇനങ്ങൾ ശേഖരിക്കുക
+- **മ്യൂസിക് സിന്തസൈസർ**: വ്യത്യസ്ത കീകൾ വ്യത്യസ്ത സംഗീത നോട്ടുകൾ അല്ലെങ്കിൽ ശബ്ദങ്ങൾ വായിക്കുക
+- **സ്പീഡ് ടൈപ്പിംഗ് വകഭേദങ്ങൾ**: വിഭാഗം-നിർദ്ദിഷ്ട ടൈപ്പിംഗ് (പ്രോഗ്രാമിംഗ് പദങ്ങൾ, വിദേശ ഭാഷകൾ)
+- **കീബോർഡ് ഡ്രമ്മർ**: വ്യത്യസ്ത കീകൾ drum ശബ്ദങ്ങൾക്ക് മാപ്പ് ചെയ്ത് ബീറ്റ് സൃഷ്ടിക്കുക
+
+**അടിസ്ഥാന നിർദ്ദേശങ്ങൾ:**
+- **സാഹചര്യം** ലളിതമായി തുടങ്ങുകയും ഘടന ക്രമാനുസൃതമാക്കുകയും ചെയ്യുക
+- **മനോഹരവും പ്രതികരണമേറിയും ആയ നിയന്ത്രണങ്ങൾ** ലക്ഷ്യമാക്കുക
+- **ഗെയിം അവസ്ഥയും കളിക്കാരുടെ പുരോഗതിയും വ്യക്തമാക്കുന്ന ദൃശ്യ സൂചനകൾ ഉൾപ്പെടുത്തുക**
+- **വ്യത്യസ്ത ഉപയോക്താക്കളുമായി ഗെയിം പരീക്ഷിച്ച് അനുഭവസുലഭമാക്കുക**
+- **ഇവന്റ് ഹാൻഡ്ലിംഗ് തന്ത്രം വിശദീകരിക്കുന്ന মন্তব্যങ്ങൾ ഉപയോഗിച്ച് കോഡ് രേഖപ്പെടുത്തുക**
+
+## മൂല്യനിർണയം
+
+| മാനദണ്ഡം | മാതൃകാത്മകം | മതിയായ | മെച്ചപ്പെടുത്തൽ ആവശ്യമാണ് |
+| -------- | --------- | -------- | ----------------- |
+| **പ്രവർത്തനം** | ബഹുമുഖ സവിശേഷതകളുള്ള പൂര്ണമായ, അയച്ചുയരുന്ന ഗെയിം | കീബോർഡ് ഇവന്റ് ഹാൻഡ്ലിംഗ് പ്രകടിപ്പിക്കുന്ന അടിസ്ഥാന സവിശേഷതകളുള്ള പ്രവർത്തനക്ഷമമായ ഗെയിം | പരിമിത സൗകര്യങ്ങളുള്ള അല്ലെങ്കിൽ ഗൗരവമായ പിഴവുകൾ ഉള്ള ഏറ്റവും ലളിതമായ നടപ്പാക്കലുകൾ |
+| **കോഡ് ഗുണമേന്മ** | മികച്ച രീതിയിൽ ഒർഗനൈസ്ഡ്, വിശദീകരണങ്ങളുള്ള, മികച്ച പ്രായോഗികതകളും മറ്റും ഉള്ള കാര്യക്ഷമമായ ഇവന്റ് ഹാൻഡ്ലിംഗ് ഉപയോഗിക്കുന്ന കോഡ് | ഇവന്റ് ലിസണറുകൾക്കും DOM മാനിപ്പുലേഷനും ശരിയായ ഉപയോഗം ഉറപ്പു വരുത്തുന്ന ശുദ്ധവും വായിക്കാൻ എളുപ്പവുമായ കോഡ് | ചില സംවිധാന പ്രശ്നങ്ങൾ അല്ലെങ്കിൽ കാര്യക്ഷമമല്ലാത്ത നടപ്പാക്കലുകൾ ഉൾപ്പെടുന്ന അടിസ്ഥാന കോഡ് ഘടന |
+| **ഉപയോക്തൃ അനുഭവം** | intuitiv കൺട്രോളുകൾ, വ്യക്തമായ പ്രതികരണം, പ്രൊഫഷണൽ തോന്നിക്കുന്ന ആകർഷകമായ ഗെയിംപ്ലേ | ഫംഗ്ഷണൽ ഇന്റർഫേസ്, മതിയായ ഉപയോക്തൃ മാർഗനിർദ്ദേശവും പ്രതികരണക്ഷമവും കൺട്രോളുകളും | അടിസ്ഥാന ഇന്റർഫേസ്, വ്യക്തമല്ലാത്ത നിർദ്ദേശങ്ങൾ, അല്ലെങ്കിൽ മെച്ചമില്ലാത്ത പ്രതികരണക്ഷമത |
+| **സൃഷ്ടിപരത്വം** | കീബോർഡ് ഇവന്റുകളുടെ നവീകരണ ഉപയോഗം കൊണ്ട് യഥാർത്ഥ ആശയം, സൃഷ്ടിപരമായ പ്രശ്ന പരിഹാരങ്ങളോടെ | പൊതു ഗെയിം സാമ്പ്രീതികൾക്കുള്ള രസകരമായ വ്യത്യാസം, നല്ല ഇവന്റ് ഹാൻഡ്ലിംഗ് ഉപയോഗം | അടിസ്ഥാന ആശയത്തിന്റെ ലളിതമായ നടപ്പാക്കലിൽ വിശാലമായ സൃഷ്ടിപരമാകൽ കുറവോടെ |
+
+---
+
+
+**പരിചിതീകരണം**:
+ഈ പ്രമാണം AI അർത്ഥം പരിഭാഷാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തു. നമുക്കു കൃത്യതയിലുള്ള ശ്രമമുണ്ടെങ്കിലും, യന്ത്രം ചെയ്ത പരിഭാഷയിൽ തവളപ്പിഴവുകൾ അല്ലെങ്കിൽ കൃത്യതക്കുറവ് ഉണ്ടാകാമെന്നുള്ളത് മനസ്സിലാക്കുക. പ്രമാണത്തിന്റെ മാതൃഭാഷയിലെ ഓറിയിജിനൽ പതിപ്പ് പ്രാമാണികമായ ഉറവിടമായി കണക്കാക്കണം. നിർണ്ണായകമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനുഷിക പരിഭാഷ ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷ ഉപയോഗിക്കുന്നതിനാൽ ഉണ്ടാകുന്ന തെറ്റായ ബോധങ്ങൾക്കോ തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
+
\ No newline at end of file
diff --git a/translations/ml/5-browser-extension/1-about-browsers/README.md b/translations/ml/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 000000000..94f84804d
--- /dev/null
+++ b/translations/ml/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,555 @@
+
+# ബ്രൗസർ എക്സ്റ്റെൻഷൻ പ്രോജക്ട് ഭാഗം 1: ബ്രൗസറുകളെക്കുറിച്ചു മുഴുവന്
+
+```mermaid
+journey
+ title നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റെൻഷൻ വികസന യാത്ര
+ section അടിസ്ഥാനം
+ ബ്രൗസറുകൾ മനസിലാക്കുക: 3: Student
+ എക്സ്റ്റെൻഷൻ തരങ്ങൾ പഠിക്കുക: 4: Student
+ ഡെവലപ്പ്മെന്റ് സജ്ജീകരിക്കുക: 4: Student
+ section വികസനം
+ ഇന്റർഫേസ് നിർമ്മിക്കുക: 4: Student
+ ഫംഗ്ഷണാലിറ്റി ചേർക്കുക: 5: Student
+ ഡാറ്റ കൈകാര്യം ചെയ്യുക: 5: Student
+ section സംയോജനം
+ ബ്രൗസറിൽ പരീക്ഷിക്കുക: 5: Student
+ പ്രശ്നങ്ങൾ ഡീബഗ് ചെയ്യുക: 4: Student
+ അനുഭവം മെച്ചപ്പെടുത്തുക: 5: Student
+```
+
+> സ്കെച്ച്നോട്ട് [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)ലെ
+
+## പ്രീ-ലക്ചർ ക്വിസ്
+
+[പ്രീ-ലക്ചർ ക്വിസ്](https://ff-quizzes.netlify.app/web/quiz/23)
+
+### പരിചയം
+
+ബ്രൗസർ എക്സ്റ്റെൻഷനുകൾ നിങ്ങളുടെ വെബ് ബ്രൗസിംഗ് അനുഭവം മെച്ചപ്പെടുത്തുന്ന മിനി ആപ്ലിക്കേഷനുകളാണ്. ടിം ബേർണേഴ്സ്-ലിയുടെ സംവേദനാത്മക വെബിന്റെ ആദിത്യ കാഴ്ചപ്പാടുപോലെ, എക്സ്റ്റെൻഷനുകൾ ലളിതമായ ഡോക്യുമെന്റ് കാണുന്നതിനെക്കാൾ വരെ ബ്രൗസറിന്റെ ശേഷികളെ വ്യാപിപ്പിക്കുന്നു. നിങ്ങളുടെ അക്കൗണ്ടുകൾ സുരക്ഷിതമാക്കുന്ന പാസ്വേഡ് മാനേജരുകളിൽ നിന്ന് ഡിസൈനർമാർക്ക് തണുത്ത നിറങ്ങൾ ലഭ്യമാക്കുന്ന കളർ പിക്കർമാരിലേക്ക്, എക്സ്റ്റെൻഷനുകൾ പ്രതിദിനം നേരിടുന്ന ബ്രൗസിംഗ് വെല്ലുവിളികൾ പരിഹരിക്കുന്നു.
+
+നിങ്ങളുടെ ആദ്യ എക്സ്റ്റെൻഷൻ നിർമ്മിക്കാനുള്ള മുന്പ്, ബ്രൗസറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് മനസ്സിലാക്കാം. അലക്സാണ്ടർ ഗ്രഹാം ബെല്ലിനു ടെലിഫോൺ കണ്ടുപിടിക്കുന്നതിന് മുമ്പ് ശബ്ദ സംപ്രേഷണം മനസിലാകേണ്ടതുപോലെ, ബ്രൗസറിന്റെ അടിസ്ഥാനങ്ങൾ അറിവുള്ളത് നിലവിലുള്ള ബ്രൗസർ സംവിധാനങ്ങളോട് സുഗമമായി സംയോജിപ്പിക്കുന്ന എക്സ്റ്റെൻഷനുകൾ സൃഷ്ടിക്കാൻ സഹായിക്കും.
+
+ഈ പാഠത്തിന്റെ അവസാനം, നിങ്ങൾ ബ്രൗസർ ആർക്കിടെക്ചർ മനസ്സിലാക്കി നിങ്ങളുടെ ആദ്യ എക്സ്റ്റെൻഷൻ നിർമ്മിക്കാൻ തുടങ്ങിയിരിക്കുമെന്ന് ഉറപ്പാക്കാം.
+
+```mermaid
+mindmap
+ root((Browser Architecture))
+ Core Components
+ Rendering Engine
+ JavaScript Engine
+ Network Stack
+ Storage APIs
+ User Interface
+ Address Bar
+ Tab Management
+ Bookmarks
+ Extension Icons
+ Extension System
+ Manifest Files
+ Content Scripts
+ Background Pages
+ Popup Windows
+ Security Model
+ Same-Origin Policy
+ Permissions API
+ Content Security
+ Isolated Worlds
+ Development Tools
+ DevTools Integration
+ Debug Console
+ Performance Monitor
+ Extension Inspector
+```
+## വെബ് ബ്രൗസറുകൾ മനസ്സിലാക്കുക
+
+ഒരു വെബ് ബ്രൗസർ അടിസ്ഥാനപരമായി ഒരു സങ്കീർണ്ണമായ ഡോക്യുമെന്റ് വ്യാഖ്യാതാവാണ്. നിങ്ങൾ അഡ്രസ് ബാറിൽ "google.com" type ചെയ്യുന്നപ്പോൾ, ബ്രൗസർ നിരവധി പ്രവർത്തനങ്ങൾ നടത്തുന്നു - ലോകമെമ്പാടുമുള്ള സെർവറുകളിൽ നിന്നുള്ള ഉള്ളടക്കം അഭ്യർത്ഥിച്ച്, പിന്നീട് ആ കോഡ് വിശകലനം ചെയ്ത് നിങ്ങൾ കാണുന്ന സംവേദനാത്മക വെബ് പേജുകളായി മാറ്റുന്നു.
+
+ഈ പ്രക്രിയ 1990-ൽ ടിം ബേർണേഴ്സ്-ലിയുടെ രൂപകല്പന ചെയ്ത ആദ്യ വെബ് ബ്രൗസർ, WorldWideWeb, എല്ലാവർക്കും ഹൈപ്പർലിങ്കുചെയ്ത ഡോക്യുമെന്റുകൾ ലഭ്യമാക്കുന്നതിന്റെ സമാനത ആണ്.
+
+✅ **ചെറിയ ചരിത്രം**: ആദ്യ ബ്രൗസർ 'WorldWideWeb' എന്നായിരുന്നു, 1990-ൽ സാർ ടിമോത്തി ബേർണേഴ്സ്-ലിയുടെ സൃഷ്ടി.
+
+
+> ചില പ്രാരംഭ ബ്രൗസറുകൾ, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) വഴി
+
+### ബ്രൗസറുകൾ വെബ് ഉള്ളടക്കം എങ്ങനെ പ്രോസസ്സുചെയ്യുന്നു
+
+ഒരു URL type ചെയ്ത ശേഷം ഒരു വെബ് പേജ് കാണുന്നതുവരെ നിരവധി സമന്വയപ്പെടുത്തിയ ഘട്ടങ്ങൾ സെക്കന്റുകളിൽ സംഭവിക്കുന്നു:
+
+```mermaid
+sequenceDiagram
+ participant User
+ participant Browser
+ participant Extension
+ participant DNS
+ participant Server
+
+ User->>Browser: URL ടൈപ്പ് ചെയ്ത് Enter അമർത്തുന്നു
+ Browser->>Extension: beforeRequestเหต്ุയതി ട്രിഗർ ചെയ്യുക
+ Extension->>Extension: URL മാറ്റം ആവശ്യമാണോ എന്ന് പരിശോധിക്കുക
+ Browser->>DNS: സെർവർ ഐപി വിലാസം തിരയുന്നു
+ DNS->>Browser: ഐപി വിലാസം നൽകുന്നു
+ Browser->>Server: വെബ് പേജ് ഉള്ളടക്കം അഭ്യർത്ഥിക്കുന്നു
+ Server->>Browser: HTML, CSS, JavaScript അയയ്ക്കുന്നു
+ Browser->>Extension: beforeResponseเหต്ุയതി ട്രിഗർ ചെയ്യുക
+ Extension->>Extension: ഉള്ളടക്കം ആവശ്യമായെങ്കിൽ മാറ്റുക
+ Browser->>User: പൂർണമായ വെബ് പേജ് റેન્ડർ ചെയ്യുന്നു
+ Extension->>User: എക്സ്റ്റൻഷൻ UI അപ്ഡേറ്റുകൾ കാണിക്കുക
+```
+**ഈ പ്രക്രിയ എന്ത് ചെയ്യും:**
+- **URL** മനുഷ്യർക്ക് വായിക്കാൻ കഴിയുന്നതിനേ DNS ലുക്കപ്പ് വഴി സെർവർ IP വിലാസമായി മാറ്റുന്നു
+- **സുരക്ഷിത ബന്ധം സ്ഥാപിക്കുന്നു** HTTP അഥവാ HTTPS പ്രോട്ടോകോളുകൾ ഉപയോഗിച്ച് വെബ് സെർവറുമായി
+- **വിശിഷ്ട വെബ് പേജ് ഉള്ളടക്കം** സെർവറിൽ നിന്ന് അഭ്യർത്ഥിക്കുന്നു
+- **HTML മാർക്കപ്പ്, CSS സ്റ്റൈലിംഗ്, ജാവാസ്ക്രിപ്റ്റ് കോഡ്** സെർവറിൽ നിന്ന് സ്വീകരിക്കുന്നു
+- **എല്ലാ ഉള്ളടക്കവും സംവേദനാത്മകമായ വെബ് പേജായി** മാറ്റുന്നു
+
+### ബ്രൗസർ കോർ ഫീച്ചറുകൾ
+
+അവധി ബ്രൗസറുകൾ പ്രക്രിയയിൽ എക്സ്റ്റെൻഷൻ ഡെവലപ്പർമാർക്ക് ഉപയോഗപ്പെടുത്താവുന്ന ധാരാളം ഫീച്ചറുകൾ ഉണ്ട്:
+
+| ഫീച്ചർ | ലക്ഷ്യം | എക്സ്റ്റെൻഷൻ അവസരങ്ങൾ |
+|---------|---------|------------------------|
+| **Rendering Engine** | HTML, CSS, ജാവാസ്ക്രിപ്റ്റ് പ്രദർശിപ്പിക്കൽ | ഉള്ളടക്ക പരിഷ്ക്കരണം, സ്റ്റൈലിംഗ് സംയോജനം |
+| **JavaScript Engine** | ജാവാസ്ക്രിപ്റ്റ് കോഡ് നിർവഹണം | കസ്റ്റം സ്ക്രിപ്റ്റുകൾ, API ഇടപെടലുകൾ |
+| **Local Storage** | ഡാറ്റ ലൊക്കൽ ആയി സംരക്ഷിക്കൽ | ഉപയോക്തൃ പ്രാധാന്യങ്ങൾ, ക്യാഷ് ചെയ്ത ഡാറ്റ |
+| **Network Stack** | വെബ് അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്യുന്നു | അഭ്യർത്ഥന നിരീക്ഷണം, ഡാറ്റ വിശകലനം |
+| **Security Model** | ഉപയോക്താക്കളെ ദുഷ്ട ഉള്ളടക്കം നിന്ന് സംരക്ഷിക്കുന്നു | ഉള്ളടക്ക ഫിൽറ്ററിങ്, സുരക്ഷാ മെച്ചപ്പെടുത്തലുകൾ |
+
+**ഈ ഫീച്ചറുകൾ മനസ്സിലാക്കുന്നത് നിങ്ങളെ സഹായിക്കുന്നു:**
+- **എവിടെ ഏറ്റവും വിലക്കേടുള്ളതാണ് എന്ന് കണ്ടെത്തുക** എക്സ്റ്റെൻഷൻ ചേർക്കാനുള്ളിടം
+- **തികച്ചും അനുയോജ്യമായ ബ്രൗസർ API-കൾ തിരഞ്ഞെടുക്കുക** നിങ്ങളുടെ എക്സ്റ്റെൻഷന്റെ പ്രവർത്തനത്തിനായി
+- **ബ്രൗസർ സംവിധാനങ്ങളോടും സംയോജിച്ചുള്ള കാര്യക്ഷമമായ എക്സ്റ്റെൻഷനുകൾ ഡിസൈൻ ചെയ്യുക**
+- **എക്സ്റ്റെൻഷൻ ബ്രൗസർ സുരക്ഷാ മികച്ച രീതികൾ പാലിക്കുന്നതായി ഉറപ്പാക്കുക**
+
+### ക്രോസ്-ബ്രൗസർ ഡെവലപ്മെന്റ് പരിഗണനകൾ
+
+വിവിധ ബ്രൗസറുകൾ നിശ്ചിത സാങ്കേതികവിദ്യകൾ അല്പം വ്യത്യസ്തമായി നടപ്പിലാക്കുന്നു, പ്രോഗ്രാമിങ് ഭാഷകൾ ഒരേ ആൾഗോരിഥം വ്യത്യസ്തമായി കൈകാര്യം ചെയ്യുന്നതുപോലെ. ക്രോം, ഫയർഫോക്സ്, സഫാരി എന്നിവയിൽ ഓരോന്നിലും പ്രത്യേകതകൾ ഉണ്ട്, ഇത് എക്സ്റ്റെൻഷൻ വികസനത്തിൽ ഡെവലപ്പർ ശ്രദ്ധിക്കേണ്ടതാണ്.
+
+> 💡 **പ്രൊ טיפ്**: [caniuse.com](https://www.caniuse.com) ഉപയോഗിച്ച് ഏത് വെബ് സാങ്കേതിക വിദ്യ ബ്രൗസറുകളിൽ പിന്തുണയ്ക്കപ്പെടുന്നുവെന്ന് പരിശോധിക്കുക. ഇത് നിങ്ങളുടെ എക്സ്റ്റെൻഷന്റെ ഫീച്ചറുകൾ പ്ലാൻ ചെയ്യുമ്പോൾ അനമോല്യം.
+
+**എക്സ്റ്റെൻഷൻ ഡെവലപ്മെന്റിനുള്ള പ്രധാന പരിഗണനകൾ:**
+- **ക്രോം, ഫയർഫോക്സ്, എഡ്ജ്** ബ്രൗസറുകളിൽ നിങ്ങളുടെ എക്സ്റ്റെൻഷൻ പരീക്ഷിക്കുക
+- വ്യത്യസ്ത ബ്രൗസർ എക്സ്റ്റെൻഷൻ API-കളും മാനിഫെസ്റ്റ് ഫോർമാറ്റുകളും **അനുസരിക്കുക**
+- വ്യത്യസ്ത പ്രകടന സ്വഭാവങ്ങളും പരിധികളും **കാര്യംകൊണ്ട് കൈകാര്യംചെയ്യുക**
+- ലഭ്യമല്ലാത്ത ബ്രൗസർ-നിഷ്കർഷിത ഫീച്ചറുകൾക്കായി **വ്യാപാര മാർഗ്ഗങ്ങൾ നൽകുക**
+
+✅ **ആനലിറ്റിക്സ്洞察നം**: നിങ്ങളുടെ വെബ് ഡെവലപ്മെന്റ് പ്രോജക്ടുകളിൽ ആനലിറ്റിക്സ് പാക്കേജുകൾ ഇൻസ്റ്റാൾ ചെയ്ത് നിങ്ങളുടെ ഉപയോക്താക്കൾ ഏതു ബ്രൗസർ ഉപയോഗിക്കുന്നത് അറിയാം. ഇത് ആദ്യം പിന്തുണയ്ക്കേണ്ട ബ്രൗസറുകളുടെ മുൻഗണന നൽകാൻ സഹായിക്കും.
+
+## ബ്രൗസർ എക്സ്റ്റെൻഷനുകൾ മനസ്സിലാക്കുക
+
+ബ്രൗസർ എക്സ്റ്റെൻഷനുകൾ സാധാരണ വെബ് ബ്രൗസിംഗ് വെല്ലുവിളികൾ പരിഹരിച്ചുകൊണ്ട് ബ്രൗസർ ഇന്റർഫെയ്സിൽ പ്രവർത്തക്ഷമത കൂട്ടുന്നു. ഏറെ സങ്കീർണ്ണമായ മറ്റ് ആപ്ലിക്കേഷനുകൾ അല്ലെങ്കിൽ പ്രവർത്തനപ്രവാഹങ്ങൾ ആവശ്യമില്ലാതെ എക്സ്റ്റെൻഷനുകൾ ഉപകരണങ്ങൾക്കും ഫീച്ചറുകൾക്ക് തൽക്ഷണ പ്രവേശനം നൽകുന്നു.
+
+ഈ ആശയം ആദ്യകാല കമ്പ്യൂട്ടർ പയൻസ് ഡഗ്ലസ് എംഗൽബാർട്ടിന്റെ മനുഷ്യ ശേഷികൾ സാങ്കേതികവിദ്യ ഉപയോഗിച്ച് വർദ്ധിപ്പിക്കാനുള്ള കാഴ്ചപ്പാടിനെ അനുസരിക്കുന്നു - എക്സ്റ്റെൻഷനുകൾ നിങ്ങളുടെ ബ്രൗസറിന്റെ അടിസ്ഥാന പ്രവർത്തക്ഷമത വർദ്ധിപ്പിക്കുന്നു.
+
+```mermaid
+quadrantChart
+ title ബ്രൗസർ എക്സ്റ്റൻഷൻ വിഭാഗങ്ങൾ
+ x-axis ലളിതം --> സങ്കീർത്തം
+ y-axis വ്യക്തിഗത ഉപയോഗം --> പ്രൊഫഷണൽ ടൂളുകൾ
+ quadrant-1 ഡെവലപ്പർ ടൂളുകൾ
+ quadrant-2 എന്റർപ്രൈസ് പരിഹാരങ്ങൾ
+ quadrant-3 വ്യക്തിഗത ഉപകരണങ്ങൾ
+ quadrant-4 ഉൽപ്പാദനക്ഷമത ആപ്ലിക്കേഷനുകൾ
+
+ Ad Blockers: [0.3, 0.2]
+ Password Managers: [0.7, 0.3]
+ Color Pickers: [0.4, 0.8]
+ Code Formatters: [0.8, 0.9]
+ Note Taking: [0.6, 0.5]
+ Video Downloaders: [0.5, 0.2]
+ Time Trackers: [0.7, 0.6]
+ Screenshot Tools: [0.4, 0.4]
+```
+**പ്രസിദ്ധമായ എക്സ്റ്റെൻഷൻ വർഗ്ഗങ്ങളും അവയുടെ പ്രയോജനങ്ങളും:**
+- **പ്രോഡക്ടിവിറ്റി ടൂളുകൾ**: ടാസ്ക് മാനേജർമാർ, നോട്ടെടുക്കൽ ആപ്പുകൾ, സമയം റnowrapട്രാക്കർമാർ നിങ്ങളുടെ സംഘടനയിൽ സഹായിക്കുന്നു
+- **സുരക്ഷാ മെച്ചപ്പെടുത്തലുകൾ**: പാസ്വേര്ഡ് മാനേജർമാർ, അഡ്ബ്ലോക്കറുകൾ, ഗോപനീയതാ ഉപകരണങ്ങൾ നിങ്ങളുടെ ഡാറ്റ സംരക്ഷിക്കുന്നു
+- **ഡെവലപ്പർ ടൂളുകൾ**: കോഡ് ഫോർമാറ്ററുകൾ, കളർ പിക്കറുകൾ, ഡീബഗ്ഗിംഗ് ഉപകരണങ്ങൾ ഡെവലപ്മെന്റ് ലളിതമാക്കുന്നു
+- **ഉള്ളടക്കം മെച്ചപ്പെടുത്തൽ**: വായന മോഡുകൾ, വീഡിയോ ഡൌൺലോഡറുകൾ, സ്ക്രീൻഷോട്ട് ടൂളുകൾ നിങ്ങളുടെ വെബ് അനുഭവം മെച്ചപ്പെടുത്തുന്നു
+
+✅ **പ്രതിഫലന ചോദ്യo**: നിങ്ങളുടെ പ്രിയപ്പെട്ട ബ്രൗസർ എക്സ്റ്റെൻഷനുകൾ ഏതൊക്കെയാണ്? അവ എന്ത് പ്രത്യേക ജോലികൾ ചെയ്യുന്നു, എങ്ങനെ നിങ്ങളുടെ ബ്രൗസിംഗ് അനുഭവം മെച്ചപ്പെടുത്തുന്നു?
+
+### 🔄 **ശൈക്ഷിക പരിശോധന**
+**ബ്രൗസർ ആർക്കിടെക്ചർ മനസ്സിലാക്കൽ**: എക്സ്റ്റെൻഷൻ വികസനത്തിലേക്ക് പോകുന്നതിന് മുമ്പ്, നിങ്ങൾക്ക് കഴിയേണ്ടത്:
+- ✅ ബ്രൗസർ വെബ് അഭ്യർത്ഥനകൾ പ്രോസസ്സുചെയ്യുന്നതിനും ഉള്ളടക്കം എങ്ങനെ പ്രദർശിപ്പിക്കുന്നതും വിശദീകരിക്കുക
+- ✅ ബ്രൗസർ ആർക്കിടെക് ചറിന്റെ പ്രധാന ഘടകങ്ങൾ തിരിച്ചറിയുക
+- ✅ എക്സ്റ്റെൻഷനുകൾ ബ്രൗസർ പ്രവർത്തനക്ഷമതയുമായി എങ്ങനെ സംയോജിപ്പിക്കപ്പെടുന്നു എന്ന് മനസ്സിലാക്കുക
+- ✅ ഉപയോക്താക്കളെ സംരക്ഷിക്കുന്ന സുരക്ഷാ മോഡൽ തിരിച്ചറിയുക
+
+**വേഗമുള്ള സ്വയംപരിശോധന**: URL ടൈപ്പ് ചെയ്ത് ഒരു വെബ് പേജ് കാണുന്നതുവരെ പാത നിങ്ങൾക്ക് പിന്തുടരാം?
+1. **DNS ലുക്കപ്പ്** URL IP വിലാസമായി മാറ്റുന്നു
+2. **HTTP അഭ്യർത്ഥന** സെർവറിൽ നിന്നുള്ള ഉള്ളടക്കം നേടുന്നു
+3. **പാഴ്സിംഗ്** HTML, CSS, ജാവാസ്ക്രിപ്റ്റ് പ്രോസസ്സിംഗ്
+4. **റെൻഡറിംഗ്** അവസാന വെബ് പേജ് പ്രദർശിപ്പിക്കൽ
+5. **എക്സ്റ്റെൻഷനുകൾ** ബഹുമുഖ ഘട്ടങ്ങളിൽ ഉള്ളടക്കം മാറ്റാം
+
+## എക്സ്റ്റെൻഷനുകൾ ഇൻസ്റ്റാൾ ചെയ്യൽ, നിയന്ത്രണം
+
+എക്സ്റ്റെൻഷൻ ഇൻസ്റ്റാളേഷൻ പ്രക്രിയ മനസ്സിലാക്കുന്നത് ഉപയോക്തൃ അനുഭവം പ്രതീക്ഷിക്കാനും സഹായിക്കുന്നു. ഇന്നത്തെ ആധുനിക ബ്രൗസറുകളിൽ ഈ പ്രക്രിയ മാനദണ്ഡം പോലെ സാന്ദ്രമായി ഈന്റർഫെയ്സ് രൂപകല്പ്പനയിൽ ചെറിയ വ്യത്യാസങ്ങളോടെ ഉണ്ട്.
+
+
+
+> **പ്രധാനത്തിന്**: നിങ്ങളുടെ സ്വന്തം എക്സ്റ്റെൻഷനുകൾ പരീക്ഷിക്കുമ്പോൾ ഡെവലപ്പർ മോഡ് സ്വിച്ച് ഓണാക്കി മറ്റു സ്റ്റോറുകളിൽ നിന്ന് എക്സ്റ്റെൻഷനുകൾ അനുവദിക്കുക.
+
+### ഡെവലപ്പ്മെന്റ് എക്സ്റ്റൻഷൻ ഇൻസ്റ്റാളേഷൻ പ്രക്രിയ
+
+സ്വന്തം എക്സ്റ്റെൻഷനുകൾ വികസിപ്പിക്കുകയും പരീക്ഷിക്കുകയും ചെയ്യുമ്പോൾ ഈ പ്രവൃത്തി പ്രവാഹം പിന്തുടരുക:
+
+```mermaid
+flowchart TD
+ A[കോഡ് എഴുതുക] --> B[വിസ്താരമാറ്റം നിർമ്മിക്കുക]
+ B --> C{ആദ്യമായി ഇൻസ്റ്റാൾ ചെയ്യാമോ?}
+ C -->|അതെ| D[അൺപാക്ക്ഡ് ലോഡ് ചെയ്യുക]
+ C -->|ഇല്ല| E[വിസ്താരമാറ്റം പുനഃലോഡ് ചെയ്യുക]
+ D --> F[ഫังก്ഷന്ലിറ്റി പരീക്ഷിക്കുക]
+ E --> F
+ F --> G{ശരിയായി പ്രവർത്തിക്കുന്നുവോ?}
+ G -->|ഇല്ല| H[പിശകുകൾ ഡീബഗ് ചെയ്യുക]
+ G -->|അതെ| I[ഉപയോഗങ്ങൾക്ക് തയ്യാറാണ്]
+ H --> A
+ I --> J[സ്റ്റോറിലേക്ക് പ്രസിദ്ധീകരിക്കുക]
+
+ style A fill:#e1f5fe
+ style F fill:#e8f5e8
+ style I fill:#f3e5f5
+ style J fill:#fff3e0
+```
+```bash
+# ഘട്ടം 1: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ നിർമ്മിക്കുക
+npm run build
+```
+
+**ഈ കമാൻഡ് എന്ത് ചെയ്യും:**
+- **ബ്രൗസർ പരിശീലിക്കാവുന്ന ഫയലുകളായി** നിങ്ങളുടെ സോഴ്സ് കോഡ് കമ്പൈൽ ചെയ്യുന്നു
+- **ജാവാസ്ക്രിപ്റ്റ് മാഡ്യൂളുകൾ** മികച്ച പാക്കേജുകളായി കൂട്ടിച്ചേർക്കുന്നു
+- **അവസാന എക്സ്റ്റെൻഷൻ ഫയലുകൾ** `/dist` ഫോൾഡറിൽ സൃഷ്ടിക്കുന്നു
+- **ഇൻസ്റ്റാളേഷൻ, ടെസ്റ്റിംഗ് വേണ്ടി** എക്സ്റ്റെൻഷൻ തയ്യാറാക്കുന്നു
+
+**പടി 2: ബ്രൗസർ എക്സ്റ്റെൻഷൻ പരിപാലന പേജ് തുറക്കുക**
+1. നിങ്ങളുടെ ബ്രൗസറിന്റെ എക്സ്റ്റെൻഷൻ മാനേജ്മെന്റ് പേജ് **തുറക്കുക**
+2. മുകളിൽ വലതുവശം "Settings and more" ബട്ടൺ (`...` ഐക്കൺ) **ക്ലിക്ക് ചെയ്യുക**
+3. ഡ്രോപ്പ്ഡൗൺ മെനുവിൽ നിന്ന് "Extensions" **തിരഞ്ഞെടുക്കുക**
+
+**പടി 3: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്യുക**
+- **പുതിയ ഇൻസ്റ്റാളേഷനുകൾക്കായി**: `load unpacked` തിരഞ്ഞെടുക്കുകയും `/dist` ഫോൾഡർ തിരഞ്ഞെടുക്കുകയും ചെയ്യുക
+- **അപ്ഡേറ്റുകൾക്കായി**: ഇതിനകം ഇൻസ്റ്റാൾ ചെയ്ത എക്സ്റ്റെൻഷന്റെ അടുത്തുള്ള `reload` ക്ലിക്ക് ചെയ്യുക
+- **പരിശോധനയ്ക്കായി**: കൂടുതൽ ഡീബഗ്ഗിംഗ് ഫീച്ചറുകൾക്ക് "Developer mode" എനേബിൾ ചെയ്യുക
+
+### പ്രൊഡക്ഷൻ എക്സ്റ്റെൻഷൻ ഇൻസ്റ്റാളേഷൻ
+
+> ✅ **കുറിപ്പ്**: ഈ ഡെവലപ്പ്മെന്റ് നിർദ്ദേശങ്ങൾ നിങ്ങളുടെ സ്വന്തം നിർമ്മിച്ച എക്സ്റ്റെൻഷനുകൾക്കായേയുള്ളതാണ്. പ്രസിദ്ധീകരിച്ച എക്സ്റ്റെൻഷനുകൾ ഇൻസ്റ്റാൾ ചെയ്യാൻ ഔദ്യോഗിക ബ്രൗസർ എക്സ്റ്റെൻഷൻ സ്റ്റോറുകൾ സന്ദർശിക്കുക, എ.ഗ., [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
+
+**വ്യത്യാസം മനസ്സിലാക്കുക:**
+- **ഡെവലപ്പ്മെന്റ് ഇൻസ്റ്റാളേഷനുകൾ** വികസനത്തിനിടെ പ്രസിദ്ധീകരിക്കാത്ത എക്സ്റ്റെൻഷനുകൾ പരിശോധന നടത്താൻ അനുവദിക്കുന്നു
+- **സ്റ്റോർ ഇൻസ്റ്റാളേഷനുകൾ** പരിശാലനം കഴിഞ്ഞ പ്രസിദ്ധീകരിച്ച എക്സ്റ്റെൻഷനുകൾ സ്വയം അപ്ഡേറ്റ് ചെയ്യുന്നതോടൊപ്പം നൽകുന്നു
+- **സൈഡ്ലോഡിങ്** ഔദ്യോഗിക സ്റ്റോറിന് പുറത്തുനിന്നും എക്സ്റ്റെൻഷനുകൾ ഇൻസ്റ്റാൾ ചെയ്യാൻ അനുവദിക്കുന്നു (ഡെവലപ്പർ മോദ് ആവശ്യമാണ്)
+
+## നിങ്ങളുടെ കാർബൺ പാദച്ചിഹ്നം എക്സ്റ്റെൻഷൻ നിർമ്മിക്കൽ
+
+നിങ്ങളുടെ പ്രദേശത്തിന്റെ ഊർജ്ജ ഉപയോഗത്തിന്റെ കാർബൺ പാദം പ്രദർശിപ്പിക്കുന്ന ഒരു ബ്രൗസർ എക്സ്റ്റെൻഷൻ സൃഷ്ടിക്കും. ഈ പ്രോജക്റ്റ് എക്സ്റ്റെൻഷൻ വികസനത്തിന്റെ അടിസ്ഥാന സിദ്ധാന്തങ്ങൾ പ്രദർശിപ്പിക്കുന്നതായും പരിസ്ഥിതി ബോധവൽക്കരണത്തിന് പ്രായോഗികമായ ഉപകരണം ഒരുക്കുന്നതായും സേവിക്കും.
+
+ജോൺ ഡ്യൂയിയുടെ വിദ്യാഭ്യാസ സിദ്ധാന്തങ്ങൾ പോലെ "നടന്ന് പഠിക്കുക" എന്ന തത്വം പിന്തുടരുന്ന സമീപനമാണ് ഇത് - സാങ്കേതിക കഴിവുകളും പ്രവർത്തിപ്പിക്കുന്ന യഥാർത്ഥ ലോക പ്രയോഗങ്ങളിലും സംയോജിപ്പിക്കുന്നു.
+
+### പ്രോജക്റ്റ് ആവശ്യകതകൾ
+
+വർക്ക് ആരംഭിക്കുമ്ബോൾ ആവശ്യമായ വിഭവങ്ങളും ആശ്രിതങ്ങളും ശേഖരിക്കാം:
+
+**ആവശ്യമായ API ആക്സസ്:**
+- **[CO2 Signal API കി](https://www.co2signal.com/)**: നിങ്ങളുടെ ഇമെയിൽ വിലാസം നൽകുക, നിങ്ങളുടെ സൗജന്യ API കീ ലഭിക്കും
+- **[പ്രദേശിക കോഡ്](http://api.electricitymap.org/v3/zones)**: [Electricity Map](https://www.electricitymap.org/map) ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രദേശ കോഡ് കണ്ടെത്തുക (ഉദാ. Boston-ന് 'US-NEISO')
+
+**ഡെവലപ്പ്മെന്റ് ഉപകരണങ്ങൾ:**
+- **[Node.js and NPM](https://www.npmjs.com)**: പ്രോജക്റ്റ് ആശ്രിതങ്ങൾ ഇൻസ്റ്റാൾ ചെയ്യുന്നതിനുള്ള പാക്കേജ് മാനേജർ
+- **[സ്റ്റാർട്ടർ കോഡ്](../../../../5-browser-extension/start)**: വികസനം ആരംഭിക്കാൻ `start` ഫോൾഡർ ഡൗൺലോഡ് ചെയ്യുക
+
+✅ **കൂടുതൽ പഠിക്കൂ**: നിങ്ങളുടെ പാക്കേജ് മാനേജ്മെന്റ് കഴിവുകൾ മെച്ചപ്പെടുത്താൻ ഈ [സമ്പൂർണമായ Learn മൊഡ്യൂൾ](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) ഉപയോഗിക്കുക
+
+### പ്രോജക്റ്റ് ഘടന മനസ്സിലാക്കൽ
+
+പ്രോജക്റ്റ് ഘടന മനസ്സിലാക്കുന്നത് വികസന ജോലി കാര്യക്ഷമമാക്കുന്നതിന് സഹായിക്കുന്നു. അലക്സാൻഡ്രിയ ലൈബ്രറിയെല്ലാം അറിവ് എളുപ്പത്തിൽ തിരയാൻ ക്രമീകരിക്കപ്പെട്ടതുപോലെ, നല്ല ക്രമീകരിച്ച കോഡ് ബേസ് വികസനം കാര്യക്ഷമമാക്കും:
+
+```
+project-root/
+├── dist/ # Built extension files
+│ ├── manifest.json # Extension configuration
+│ ├── index.html # User interface markup
+│ ├── background.js # Background script functionality
+│ └── main.js # Compiled JavaScript bundle
+├── src/ # Source development files
+│ └── index.js # Your main JavaScript code
+├── package.json # Project dependencies and scripts
+└── webpack.config.js # Build configuration
+```
+
+**പ്രതിയോഗികളുടെ ബോധ്യത്തിൽ ഫയലുകൾ അധികം ചെയ്യുന്നത്:**
+- **`manifest.json`**: എക്സ്റ്റെൻഷന്റെ മmetadata, അനുമതികൾ, എൻട്രി പോയിന്റുകൾ നിർവ്വചിക്കുന്നു
+- **`index.html`**: എക്സ്റ്റെൻഷന് ക്ലിക്ക് ചെയ്തപ്പോൾ കാണുന്ന ഉപയോക്തൃ ഇന്റർഫേസ് സൃഷ്ടിക്കുന്നു
+- **`background.js`**: പശ്ചാത്തല ടാസ്കുകളും ബ്രൗസർ ഇവന്റ് ലിസ്സനറുകളും കൈകാര്യം ചെയ്യുന്നു
+- **`main.js`**: ബിൽഡ് പ്രക്രിയക്ക് ശേഷം അവസാനബന്ധിപ്പിച്ച ജാവാസ്ക്രിപ്റ്റ് ഫയൽ
+- **`src/index.js`**: പ്രധാന വികസന കോഡ്, ഇത് `main.js` ആയി കമ്പൈൽ ചെയ്യപ്പെടുന്നു
+
+> 💡 **സംഘടന ടിപ്**: API കിയും പ്രദേശിക കോഡും സുരക്ഷിതമായ കുറിപ്പിൽ സൂക്ഷിക്കുക. വികസന സമയത്ത് ഈ മൂല്യങ്ങൾ എളുപ്പത്തിൽ കണ്ടെത്താം.
+
+✅ **സുരക്ഷാ കുറിപ്പ്**: നിങ്ങളുടെ API കീകളും സენსിറ്റീവ് ക്രെഡൻഷ്യലുകളും കോഡ് റപ്പോസിറ്ററിയിൽ കമിറ്റ് ചെയ്യരുത്. അടുത്ത ഘട്ടങ്ങളിൽ ഈ സുരക്ഷിത കൈകാര്യം എങ്ങനെ നടത്താമെന്ന് കാണിക്കും.
+
+## എക്സ്റ്റെൻഷൻ ഇന്റർഫേസ് സൃഷ്ടിക്കൽ
+
+ഇപ്പോള് ഉപയോക്തൃ ഇന്റർഫേസ് ഘടകങ്ങൾ നിർമ്മിക്കും. എക്സ്റ്റെൻഷൻ രണ്ട് സ്ക്രീൻ രീതിയിൽ പ്രവര്ത്തിക്കുന്നു: പ്രാരംഭ ക്രമീകരണത്തിനുള്ള കോൺഫിഗറേഷൻ സ്ക്രീൻ, ഡാറ്റ പ്രദർശനത്തിനുള്ള റിസൾട്സ് സ്ക്രീൻ.
+
+ഈ സമീപനം ഇൻറർഫേസ് ഡിസൈനിലെ പ്രോഗ്രസീവ് ഡിസ്ക്ലോഷർ തത്വം പിന്തുടരുന്നു - ലളിതമായ ഓർഡറിൽ വിവരങ്ങളും ഓപ്ഷനുകളും വെളിപ്പെടുത്തി ഉപഭോക്താക്കളെ അമിതമായുള്ള ബാധ്യതയിൽ നിന്ന് രക്ഷിക്കുന്നു.
+
+### എക്സ്റ്റെൻഷൻ കാഴ്ചകൾ അവലോകനം
+
+**സെറ്റപ്പ് കാഴ്ച** - ആദ്യകാല ഉപയോക്തൃ ക്രമീകരണം:
+
+
+**ഫല കാഴ്ച** - കാർബൺ പാദച്ചിഹ്ന ഡാറ്റാ പ്രദർശനം:
+
+
+### ക്രമീകരണ ഫോം നിർമ്മിക്കല്
+
+സെറ്റപ്പ് ഫോം ആദ്യ ഉപയോക്തൃ ഉപയോഗത്തിനിടെ ക്രമീകരണ ഡാറ്റ ശേഖരിക്കുന്നു. ക്രമീകരിച്ചതിനു ശേഷം, ഈ വിവരം ബ്രൗസർ സ്റ്റോറേജിൽ സംരക്ഷിക്കപ്പെടുന്നു ഭാവി സെഷനുകൾക്ക്.
+
+`/dist/index.html` ഫയലിൽ, ഈ ഫോം ഘടന ചേർക്കുക:
+
+```html
+
+```
+
+**ഈ ഫോം എന്ത് ചെയ്യുന്നു:**
+- **സെമാന്റിക് ഫോം ഘടന** ശരിയായ ലേബലുകളും ഇൻപുട്ട് അസോസിയേഷനുകളും ചേർത്ത് സൃഷ്ടിക്കുന്നു
+- മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവത്തിന് ബ്രൗസർ ഓട്ടോ-കമ്പ്ലീറ്റ് ഫംഗ്ഷണാലിറ്റി കഴിയും
+- ജനനത്തിനുമുമ്പ് രണ്ട് ഫീൽഡുകളും പൂരിപ്പിക്കേണ്ടത് ആവശ്യമാണ് (`required` അറ്റ്രിബ്യൂട്ട് ഉപയോഗിച്ച്)
+- ലളിതമായ സ്റ്റൈലിംഗിനും ജാവാസ്ക്രിപ്റ്റ് ലക്ഷ്യമിടുന്നതിനും വിവരിക്കുന്ന ക്ളാസ് നെയിമുകൾ ഉപയോഗിക്കുന്നു
+- എക്സ്റ്റെൻഷൻ ആദ്യം ക്രമീകരിക്കുന്ന ഉപയോക്താക്കള്ക്ക് വ്യക്തമായ നിർദ്ദേശങ്ങൾ നൽകുന്നു
+
+### ഫല പ്രദർശനം നിർമ്മിക്കൽ
+
+അടുത്തത്, കാർബൺ പാദച്ചിഹ്ന ഡാറ്റ പ്രദർശിപ്പിക്കുന്ന ഫലം ഏരിയ സൃഷ്ടിക്കുക. ഫോം താഴെ ഈ HTML ചേർക്കുക:
+
+```html
+
+
loading...
+
+
+
+
Region:
+
Carbon Usage:
+
Fossil Fuel Percentage:
+
+
Change region
+
` ഘടകം ഒരു ഹീറോകളും ഭീകരന്മാരും നിറഞ്ഞ ഒരു ഗെയിം ലോകവുമായിരിക്കും മാറുന്നത്. കാൻവാസിനെ നിങ്ങളുടെ ഡിജിറ്റൽ ആർട്ട് ബോർഡായി ചിന്തിക്കാം, അവിടെ കോഡ് ദൃശ്യമായി മാറും.
+
+നിങ്ങൾ കഴിഞ്ഞ പാഠത്തിൽ പഠിച്ചതിന്റെ അടിസ്ഥാനത്തിൽ, ഇപ്പോൾ നാം ദൃശ്യ ഘടകങ്ങളിൽ ഇറങ്ങും. ഗെയിം സ്പ്രൈറ്റ്സ് എങ്ങനെ ലോഡ് ചെയ്യാം, എലമെന്റുകൾ എങ്ങനെ കൃത്യമായി സ്ഥിതി ചെയ്യാം, നിങ്ങളുടെ സ്പേസ് ഗെയിമിനുള്ള ദൃശ്യ അടിസ്ഥാനങ്ങൾ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് നിങ്ങൾ പഠിക്കും. ഈ പിരിമുറുക്കം സ്റ്റാറ്റിക് വെബ് പേജുകളുടെയും ഡൈനാമിക്, ഇന്ററാക്ടീവ് അനുഭവങ്ങളുടെയും ഇടയിൽ ഒരു പാലമാണ്.
+
+ഈ പാഠം കഴിഞ്ഞാൽ, നിങ്ങൾക്കൊരു പൂർണ്ണമായ ഗെയിം രംഗം ഉണ്ടാകും, നിങ്ങളുടെ ഹീറോ ഷിപ്പ് ശരിയായ രീതിയിൽ നിലനിർത്തുകയും, യുദ്ധത്തിന് തയ്യാറായിരിക്കുന്ന ഭീകര നിർമ്മിതികൾ കാണിക്കുകയും ചെയ്യും. നിങ്ങൾ അറിഞ്ഞേക്കും ആധുനിക ഗെയിമുകൾ ബ്രൗസറുകളിൽ എങ്ങനെ ഗرافيക്സ് റൻഡർ ചെയ്യുന്നുവെന്ന്, കൂടാതെ സ്വന്തമായി ഇന്ററാക്ടീവ് ദൃശ്യ അനുഭവങ്ങൾ സൃഷ്ടിക്കാനുള്ള കഴിവ് ലഭിയ്ക്കും. കാൻവാസ് ഗ്രാഫിക്സിനെ അന്വേഷിച്ച്, നിങ്ങളുടെ സ്പേസ് ഗെയിം ജീവിപ്പിക്കാം!
+
+```mermaid
+mindmap
+ root((कैनवास ഗ്രാഫിക്സ്))
+ Canvas Element
+ HTML5 Feature
+ 2D Context
+ Coordinate System
+ Pixel Control
+ Drawing Operations
+ അടിസ്ഥാന ആകൃതികൾ
+ ടെക്സ്റ്റ് റെൻഡറിങ്
+ ഇമേജ് പ്രദർശനം
+ പാത്ത് ഡ്രോയിംഗ്
+ Asset Management
+ ഇമേജ് ലോഡിംഗ്
+ അസിങ്ക് ഓപ്പറേഷനുകൾ
+ പിശക് കൈകാര്യം
+ പ്രകടനം
+ Game Rendering
+ സ്പ്രൈറ്റ് പൊസിഷനിംഗ്
+ ഫോമേഷൻ ലേ ഔട്ട്
+ സീన్ കോംപوزیشن
+ ഫ്രെയിം അപ്ഡേറ്റുകൾ
+ Visual Effects
+ കളറുകൾ & സ്റ്റൈലുകൾ
+ ട്രാൻസ്ഫർമേഷനുകൾ
+ ആനിമേഷനുകൾ
+ ലെയറിംഗ്
+```
+## പ്രീലക്ചർ ക്വിസ്
+
+[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/31)
+
+## കാൻവാസ്
+
+അപ്പോ, ഈ `` ഘടകം യഥാർത്ഥത്തിൽ എന്താണ്? വെബ് ബ്രൗസറുകളിൽ ഡൈനാമിക് ഗ്രാഫിക്സും ആനിമേഷനും സൃഷ്ടിക്കാൻ HTML5 നൽകിയ പരിഹാരമാണ് ഇത്. സാധാരണ ചിത്രങ്ങളും വീഡിയോകളും സ്റ്റാറ്റിക്ക് ആണെന്നു കൊണ്ടാണ്, കാൻവാസ് ഓരോ പക്സ്വലഞ്ഞിലെയും നിയന്ത്രണം നിങ്ങൾക്ക് നൽകുന്നത്. ഇത് ഗെയിമുകൾ, ഡാറ്റാ വിസ്വലൈസേഷനുകൾ, ഇന്ററാക്ടീവ് ആർട്ടുകൾ എന്നിവയ്ക്ക് അനുയോജ്യമാണ്. ജാവാസ്ക്രിപ്റ്റ് നിങ്ങളുടെ പെയിൻറ്ബ്രഷ് ആകുന്ന പ്രോഗ്രാമബിൾ ഡ്രോയിംഗ് സർഫേസായി ഇത് ചിന്തിക്കാം.
+
+സ്വാഭാവികമായി, കാൻവാസ് ഘടകം തുറന്ന, പാരദർശകമായി ഒരു ലക്ഷംചതുരം പോലെ തോന്നും. പക്ഷേ അവിടെയാണ് സാധ്യത സഞ്ചരിച്ചു നിൽക്കുന്നത്! ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ആകൃതികൾ വരയ്ക്കാനും, ചിത്രങ്ങൾ ലോഡ് ചെയ്യാനും, ആനിമേഷനുകൾ സൃഷ്ടിക്കാനും, ഉപയോക്തൃ ഇടപെടലുകളോട് പ്രതികരിക്കാനും ഇത് യഥാർത്ഥ ശക്തി കാണിക്കും. 1960കളിലെ ബെൽ ലാബ്സ് ആദ്യകാല കമ്പ്യൂട്ടർ ഗ്രാഫിക്സ് വിങ്ങൽക്കാർ ഓരോ പിക്സലും പ്രോഗ്രാം ചെയ്ത് പ്രഥമ ഡിജിറ്റൽ ആനിമേഷനുകൾ സൃഷ്ടിച്ചതുപോലെ.
+
+✅ [Canvas API-യെ കുറിച്ച് കൂടുതൽ വായിക്കുക](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN-ൽ.
+
+ഇത് സാധാരണയായി പേജിന്റെ ബോഡിയിൽ ഇങ്ങനെ പ്രഖ്യാപിക്കാറുണ്ട്:
+
+```html
+Bank App
+
+
+
+
+
+```
+
+**ഈ ബോയിലർപ്ലേറ്റ് നിങ്ങൾക്ക് നൽകുന്നത്:**
+- **HTML5 ഡോക്യുമെന്റ് ഘടന** ശരിയായ DOCTYPE പ്രഖ്യാപനത്തോടുകൂടെ സ്ഥാപിക്കുന്നു
+- **ചരിത്രം എൻകോഡിംഗ്** UTF-8 ആയി ക്രമീകരിക്കുന്നു, രാജ്യാന്തര ടെക്സ്റ്റിനെ പിന്തുണയ്ക്കാൻ
+- **വിഭവത്തോടു ചേർന്ന് റിസ്പോൺസീവ് ഡിസൈൻ** viewport മെറ്റാ ടാഗ് ഉപയോഗിച്ച് ആക്ടിവേറ്റ് ചെയ്യുന്നു
+- **ബ്രൗസർ ടാബിൽ കാണിക്കുന്ന** വിവരണാത്മകമായ തലക്കെട്ട് സജ്ജമാക്കുന്നു
+- **ആപ്ലിക്കേഷനു വേണ്ടി ശുദ്ധമായ ബോഡി സെക്ഷൻ** സൃഷ്ടിക്കുന്നു
+
+> 📁 **പ്രോജക്റ്റ് ഘടനാരൂപരേഖ**
+>
+> **ഈ പാഠത്തിന്റെ അവസാനം, നിങ്ങളുടെ പ്രോജക്റ്റിൽ ഉണ്ടാകുന്നത്:**
+> ```
+> bank/
+> ├── index.html
+> ├── app.js
+> └── style.css
+> ```
+>
+> **ഫയൽ ഉത്തരവാദിത്വങ്ങൾ:**
+> - **index.html**: എല്ലാ ടൈംപ്ലേറ്റുകളും ആപ്പ് ഘടനയുമടങ്ങുന്നു
+> - **app.js**: റൂട്ടിംഗ്, നാവിഗേഷൻ, ടൈംപ്ലേറ്റ് മാനേജ്മെന്റ് കൈകാര്യം ചെയ്യുന്നു
+> - **Templates**: ലോഗിൻ, ഡാഷ്ബോർഡ്, മറ്റ് സ്ക്രീനുകളുടെ UI നിർവചിക്കുന്നു
+
+---
+
+## HTML Templates
+
+ടൈംപ്ലേറ്റുകൾ വെബ് ഡവലപ്പ്മെന്റിലെ ഒരു അസാമാന്യ പ്രശ്നം പരിഹരിക്കുന്നു. 1440 കളിൽ ഗൂട്ടൻബർഗ് മൂവബിള് ടൈപ്പ് പ്രിന്റിംഗ് കണ്ടുപിടിച്ചപ്പോൾ, പൂർണ്ണ പേജുകൾ ശില്പം ചെയ്യാതെ പുനരുപയോഗയോഗ്യമായ അക്ഷര ബ്ലോക്കുകൾ സൃഷ്ടിച്ച് ആവശ്യത്താലും ക്രമീകരിക്കാമെന്ന് കണ്ടെത്തി. HTML ടൈംപ്ലേറ്റ് അതേ സിദ്ധാന്തത്തിലാണ് – ഓരോ സ്ക്രീനും വേറിട്ട HTML ഫയലുകൾ തയ്യാറാക്കുന്നതിന് പകരം, പുനരുപയോഗയോഗ്യമായ ഘടനകൾ നിർവചിച്ച് അവ ആവശ്യപ്പെട്ടപ്പൊഴാണ് പ്രദർശിപ്പിക്കുന്നത്.
+
+```mermaid
+flowchart TD
+ A["📋 ടെംപ്ലേറ്റ് നിർവചനo"] --> B["💬 DOMൽ മറച്ചുവെച്ചിരിക്കുന്നു"]
+ B --> C["🔍 ജാവാസ്ക്രിപ്റ്റ് ടെംപ്ലേറ്റ് കണ്ടെത്തുന്നു"]
+ C --> D["📋 ടെംപ്ലേറ്റ് ഉള്ളടക്കം ക്ലോൺ ചെയ്യുക"]
+ D --> E["🔗 দৃശ്യമായ DOM-ലേക്ക് ബന്ധിപ്പിക്കുക"]
+ E --> F["👁️ ഉപയോക്താവ് ഉള്ളടക്കം കാണുന്നു"]
+
+ G["ലോഗിൻ ടെംപ്ലേറ്റ്"] --> A
+ H["ഡാഷ്ബോർഡ് ടെംപ്ലേറ്റ്"] --> A
+ I["ഭാവി ടെംപ്ലേറ്റുകൾ"] --> A
+
+ style A fill:#e3f2fd
+ style D fill:#e8f5e8
+ style F fill:#fff3e0
+ style B fill:#f3e5f5
+```
+ടൈംപ്ലേറ്റുകൾ നിങ്ങളുടെ ആപ്പിന്റെ വ്യത്യസ്ത ഭാഗങ്ങളിലേക്കുള്ള ബ്ലൂപ്രിന്റുകളായി വിചാരിക്കുക. ഒരു архитക്ട് ഒരേ ബ്ലൂപ്രിന്റ് പല തവണ ഉപയോഗിച്ച് ഒരേ തരത്തിലുള്ള മുറികൾ വീണ്ടും വരയ്ക്കാതിരിക്കാൻ ചെയ്യുന്നതുപോലെ, നാം ടൈംപ്ലേറ്റുകൾ ഒറ്റ തവണ സൃഷ്ടിച്ച് ആവശ്യമായി വന്നപ്പോഴാകും അത് ഉപയോഗിക്കുന്നത്. ജാവാസ്ക്രിപ്റ്റ് പ്രവർത്തിപ്പിക്കുന്നതുവരെ ബ്രൗസർ ഈ ടൈംപ്ലേറ്റുകൾ മറച്ചുവയ്ക്കുന്നു.
+
+ഒരു വെബ് പേജിന് നിരവധി സ്ക്രീനുകൾ സൃഷ്ടിക്കാൻ നിങ്ങള് ഒരു ഒറ്റ HTML ഫയൽ ഓരോ സ്ക്രീനിനും സൃഷ്ടിക്കാമെന്നതാണ് ഒരു പരിഹാരമെന്ന് വിചാരിക്കാം. എന്നാൽ, ഇത് ചില അസൗകര്യങ്ങളുണ്ടാക്കുന്നു:
+
+- സ്ക്രീൻ മാരുന്നതിന് മുഴുവൻ HTML പുനഃലോഡ് ചെയ്യേണ്ടി വരും, അതത് സമയം മാനസികത്തിൽ പതിയില്ല.
+- വ്യത്യസ്ത സ്ക്രീനുകൾക്കിടയിലെ ഡേറ്റ പങ്കുവെയ്ക്കുക ബുദ്ധിമുട്ടാണ്.
+
+മറ്റ് മാർഗമാണ് `` എന്ന എലമെന്റ് ഉപയോഗിച്ച് ഒറ്റ HTML ഫയലിൽ നിരവധി [HTML ടൈംപ്ലേറ്റുകൾ](https://developer.mozilla.org/docs/Web/HTML/Element/template) നിർവചിക്കുക. ടൈംപ്ലേറ്റ് ബ്രൗസർ പ്രദർശിപ്പിക്കാത്ത പുനരുപയോഗയോഗ്യമായ HTML ബ്ലോക്ക് ആണ്, അത് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് റൺടൈമിൽ സൃഷ്ടിക്കപ്പെടേണ്ടതാണ്.
+
+### നമുക്ക് ഇത് നിർമ്മിക്കാം
+
+ഓരു ബാങ്ക് ആപ്പ് രണ്ടു പ്രധാന സ്ക്രീനുകൾക്കായി നിർമ്മിക്കാനാണ് നാം പോകുന്നത്: ലോഗിൻ പേജ് এবং ഡാഷ്ബോർഡ്. ആദ്യം, HTML ബോഡി-യിൽ ഒരു Placeholder ഘടകം ചേർക്കാം – ഇവിടെ നമ്മുടെ വിവിധ സ്ക്രീനുകൾ പ്രദർശിപ്പിക്കപ്പെടും:
+
+```html
+Loading...
+```
+
+**ഈ Placeholder മനസ്സിലാക്കാം:**
+- **"app" എന്ന ഐഡിയുള്ള ഒരു കണ്ടെയ്നർ സൃഷ്ടിക്കുന്നു, എല്ലാ സ്ക്രീനുകളും ഇവിടെ പ്രദർശിപ്പിക്കും**
+- **ജാവാസ്ക്രിപ്റ്റ് ആദ്യ സ്ക്രീൻ പ്രവർത്തിപ്പിക്കാൻ തയ്യാറാകുന്നത് വരെ ലോഡിംഗ് സന്ദേശം കാണിക്കുന്നു**
+- **ഡൈനാമിക് ഉള്ളടക്കത്തിന് ഏക വിസ്ഫോടക പോയിന്റ് ഒരുക്കുന്നു**
+- **`document.getElementById()` ഉപയോഗിച്ച് സൗകര്യമായി ലക്ഷ്യമിടാൻ സാധിക്കും**
+
+> 💡 **പ്രൊ ടിപ്പ്**: ഈ എലമെന്റിന്റെ ഉള്ളടക്കം മാറ്റപ്പെടും അതിനാൽ ആപ്പ് ലോഡ് ആകുന്നത് വരെ കാണിക്കാൻ ഒരു ലോഡിംഗ് സന്ദേശമോ സൂചകമോ ഇട്ടുകൂടാം.
+
+ഇതിനുശേഷം HTML ടൈംപ്ലേറ്റിൽ ലോഗിൻ പേജിനായി ഒരു ടൈംപ്ലേറ്റ് ചേർക്കാം. ഇപ്പോൾ തലക്കെട്ട് മാത്രം ഉണ്ട്, അതുപോലെ നാം നാവിഗേഷൻ നടത്താനായി ഒരു ലിങ്ക് ഉൾപ്പെടുത്തിയ ഒരു സെക്ഷൻ ചേർക്കും.
+
+```html
+
+ Bank App
+
+
+```
+
+**ലോഗിൻ ടൈംപ്ലേറ്റ് വിശകലനം:**
+- **ജാവാസ്ക്രിപ്റ്റ് ടാർഗറ്റിംഗിനായി "login" എന്ന യുണീക്ക് ഐഡിയുള്ള ടൈംപ്ലേറ്റ് നിർവചിക്കുന്നു**
+- **ആപ്പിന്റെ ബ്രാൻഡിംഗ് സ്ഥാപിക്കുന്ന പ്രധാന തലക്കെട്ട് ഉൾക്കൊള്ളുന്നു**
+- **ബന്ധപ്പെട്ട ഉള്ളടക്കം ഗ്രൂപ്പ് ചെയ്യാൻ ഒരു സെമാന്റിക് `` ഉപയോഗിക്കുന്നു**
+- **ഉപയോക്താക്കളെ ഡാഷ്ബോർഡിലേക്ക് റൂട്ടുചെയ്യാൻ നാവിഗേഷൻ ലിങ്ക് നൽകുന്നു**
+
+പിന്നീട് ഡാഷ്ബോർഡ് പേജിന്റെ മറ്റൊരു HTML ടൈംപ്ലേറ്റും ചേർക്കാം. ഈ പേജ് വിവിധ സെക്ഷനുകൾ അടങ്ങിയിരിക്കും:
+
+- തലക്കെട്ട്, ഒരു തലക്കെട്ടും ലോഗൗട്ട് ലിങ്കും ഉള്ള ഹെഡർ
+- ബാങ്ക് അക്കൗണ്ടിന്റെ നിലവിലെ ബാലൻസ്
+- ഇടപാടുകളുടെ പട്ടിക, ഒരു പട്ടികയിൽ പ്രദർശിപ്പിക്കുക
+
+```html
+
+
+
+
+ Transactions
+
+
+
+ Date
+ Object
+ Amount
+
+
+
+
+
+```
+
+**ഡാഷ്ബോർഡിന്റെ ഓരോ ഭാഗവും മനസ്സിലാക്കാം:**
+- **സെമാന്റിക് `` ഉൾക്കൊള്ളുന്ന പേജ് ഘടന സൃഷ്ടിക്കുന്നു, നാവിഗേഷൻ ഉൾപ്പെടെ**
+- **സ്ക്രീനുകളിൽ ബ്രാൻഡിങ്ങിനായി ആപ്പ് തലക്കെട്ട് സ്ഥിരമായി പ്രദർശിപ്പിക്കുന്നു**
+- **ലോഗൗട്ട് ലിങ്ക് വഴി ലോഗിൻ സ്ക്രീനിലേക്ക് റൂട്ടുചെയ്യുന്നു**
+- **നിലവിലെ അക്കൗണ്ട് ബാലൻസ് വിന്യാസ സെക്ഷനിൽ കാണിക്കുന്നു**
+- **വ്യവസായപ്പെട്ട HTML പട്ടികയിൽ ഇടപാട് ഡാറ്റ സംഘടിപ്പിക്കുന്നു**
+- **തിയതി, объект്, തുകയുള്ള പട്ടിക തലക്കെട്ടുകൾ നിർവചിക്കുന്നു**
+- **ഡൈനാമിക് ഉള്ളടക്കത്തിനായി പട്ടിക ശരീരം ശൂന്യമായി bırakുന്നു**
+
+> 💡 **പ്രൊ ടിപ്പ്**: HTML ടൈംപ്ലേറ്റുകൾ കാണാൻ ആഗ്രഹിക്കുന്നത് കാണാനായി `` എലമെന്റുകളുടെ ആറ് തലകുറighton `` ഉപയോഗിച്ച് കമന്റ് ചെയ്താൽ ദൃശ്യത്തിൽ കാണാം.
+
+### 🔄 **വിദ്യാഭ്യാസ പരിശോധന**
+**ടൈംപ്ലേറ്റ് സിസ്റ്റം മനസ്സിലാക്കുക**: ജാവാസ്ക്രിപ്റ്റ് നടപ്പിലാക്കുന്നതിന് മുമ്പ് ഇത് മനസ്സിലാക്കുക:
+- ✅ ടൈംപ്ലേറ്റുകൾ സാധാരണ HTML ഘടകങ്ങളിൽ നിന്ന് എങ്ങനെ വ്യത്യസ്തമാണെന്ന്
+- ✅ ടൈംപ്ലേറ്റുകൾ ജാവാസ്ക്രിപ്റ്റ് പ്രവർത്തിപ്പിക്കാൻ മുമ്പ് മറഞ്ഞതായി ഉണ്ടാകുന്നത്
+- ✅ ടൈംപ്ലേറ്റുകളുടെ സെമാന്റിക് HTML ഘടനയുടെ പ്രാധാന്യം
+- ✅ ടൈംപ്ലേറ്റുകൾ പുനരുപയോഗ UI ഘടകങ്ങൾ എങ്ങനെ സജ്ജീകരിക്കുന്നു
+
+**ത്വരിത സ്വയംപരിശോധന**: നിങ്ങളുടെ HTML-നു ചുറ്റുപാടുകളിൽ `` ടാഗുകൾ നീക്കം ചെയ്യുകയാണെങ്കിൽ എന്ത് സംഭവിക്കും?
+*ഉത്തരം: ഉള്ളടക്കം ഉടൻ കാണിക്കപ്പെടും, ടൈംപ്ലേറ്റ് ഫംഗ്ഷനാലിറ്റി നഷ്ടപ്പെടും*
+
+**ആർക്കിടെക്ചർ ലാഭം**: ടൈംപ്ലീറ്റുകൾ നൽകുന്നത്:
+- **പുനരുപയോഗം**: ഒറ്റ നിർവചനത്തിൽ നിരവധി ഉദാഹരണങ്ങൾ
+- **പ്രകടനം**: അനാവശ്യ HTML പാഴ്വവിലാസം ഇല്ലാതെ
+- **പരിപാലനം**: കേന്ദ്രീകൃത UI ഘടന
+- **സ്വകാര്യത**: ഡൈനാമിക് ഉള്ളടക്ക മാറ്റം
+
+✅ ടൈംപ്ലേറ്റുകളിൽ എന്ത് കൊണ്ട് `id` ഇവന്റുകൾ ഉപയോഗിക്കുന്നത് നിങ്ങൾക്ക് തോന്നുന്നു? ക്ലാസുകൾ പോലുള്ള മറ്റ് രീതികൾ ഉപയോഗിക്കാമോ?
+
+## ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ടൈംപ്ലേറ്റുകൾ സജീവമാക്കുക
+
+ഇപ്പോൾ നമുക്ക് ടൈംപ്ലേറ്റുകൾ പ്രവർത്തനക്ഷമമാക്കാം. 3D പ്രിന്റർ ഒരു ഡിജിറ്റൽ ബ്ലൂപ്രിന്റ് എടുത്ത് ഭൗതിക വസ്തുവാക്കുന്നതുപോലെ, ജാവാസ്ക്രിപ്റ്റ് ഞങ്ങളുടെ മറഞ്ഞിരിക്കുന്ന ടൈംപ്ലേറ്റുകൾ എടുത്ത് ദൃശ്യമായ, ഇടപഴകാവുന്ന ഘടകങ്ങളാക്കി മാറ്റുന്നു.
+
+ഈ പ്രക്രിയ ആധുനിക വെബ് ഡവലപ്പ്മെന്റിന്റെ അടിസ്ഥാനമായ മൂന്ന് സ്ഥിരമായ ഘട്ടങ്ങളാൽ നടക്കുന്നു. ഈ രീതി മനസ്സിലാക്കുമ്പോൾ, നിങ്ങൾ വ്യത്യസ്ത ഫ്രെയിംവർക്കുകളിലും ലൈബ്രറികളിലും ഇതു കാണും.
+
+നിങ്ങളുടെ നിലവിലെ HTML ഫയൽ ബ്രൗസറിൽ പരീക്ഷിച്ചാൽ, അത് `Loading...` എന്ന സ്റ്റാറ്റിക് സന്ദേശത്തിൽ കുടുങ്ങിയതായി തോന്നും. കാരണം ജാവാസ്ക്രിപ്റ്റ് കോഡ് ചേർത്തുള്ള ടൈംപ്ലേറ്റുകൾ പ്രദർശിപ്പിക്കാൻ അതുപോലെ ഇല്ലെന്നതാണ്.
+
+ടൈംപ്ലേറ്റ് ഇൻസ്റ്റാൻഷ്യേറ്റ് ചെയ്യുന്നത് സാധാരണയായി മൂന്ന് ഘട്ടങ്ങളിലാകും:
+
+1. DOM-ൽ ടൈംപ്ലേറ്റ് എലമെന്റ് കണ്ടെത്തുക, ഉദാഹരണത്തിന് [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) ഉപയോഗിച്ച്.
+2. ടൈംപ്ലേറ്റ് എലമെന്റ് ക്ലോൺ ചെയ്യുക, [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) ഉപയോഗിച്ച്.
+3. ദൃശ്യമാകുന്ന എലമെന്റിൽ (DOM-ൽ) ചേർക്കുക, ഉദാഹരണത്തിന് [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) ഉപയോഗിച്ച്.
+
+```mermaid
+flowchart TD
+ A[🔍 ഘട്ടം 1: ടെംപ്ലേറ്റ് കണ്ടെത്തുക] --> B[📋 ഘട്ടം 2: ടെംപ്ലേറ്റ് ക്ലോൺ ചെയ്യുക]
+ B --> C[🔗 ഘട്ടം 3: DOM-ലേക്ക് ചേർക്കുക]
+
+ A1["document.getElementById('login')"] --> A
+ B1["template.content.cloneNode(true)"] --> B
+ C1["app.appendChild(view)"] --> C
+
+ C --> D[👁️ ഉപയോക്താവിന് ടെംപ്ലേറ്റ് görün प्रमाणികരം]
+
+ style A fill:#e1f5fe
+ style B fill:#f3e5f5
+ style C fill:#e8f5e8
+ style D fill:#fff3e0
+```
+**പ്രക്രിയയുടെ ദൃശ്യ വിശദീകരണം:**
+- **ഘട്ടം 1** മറഞ്ഞിരിക്കുന്ന ടൈംപ്ലേറ്റ് DOM ഘടനയിൽ കണ്ടെത്തുന്നു
+- **ഘട്ടം 2** സുരക്ഷിതമായി മാറ്റാൻ കഴിയും എന്ന പ്രവർത്തനക്ഷമ കോപ്പി സൃഷ്ടിക്കുന്നു
+- **ഘട്ടം 3** കോപ്പി ദൃശ്യമായ പേജ് മേഖലയിലേക്ക് ചേർക്കുന്നു
+- **ഫലം** ഉപയോക്താക്കൾക്ക് ഇടപഴകാവുന്ന പ്രവർത്തനക്ഷമ സ്ക്രീൻ
+
+✅ ടൈംപ്ലേറ്റ് DOM-ൽ ചേർക്കുന്നതിന് മുൻപ് ക്ലോൺ ചെയ്യേണ്ടത് എന്തുകൊണ്ടാണ്? ഈ ഘട്ടം ഒഴിവാക്കി എങ്കിൽ എന്ത് സംഭവിക്കുമെന്നാണ് നിങ്ങൾക്ക് തോന്നുന്നത്?
+
+### പ്രവർത്തി
+
+നിങ്ങളുടെ പ്രോജക്ട് ഫോൾഡറിൽ ഒരു പുതിയ ഫയൽ `app.js` സൃഷ്ടിച്ച് അത് `` സെക്ഷനിൽ ഇറക്കുമതി ചെയ്യുക:
+
+```html
+
+```
+
+**ഈ സ്ക്രിപ്റ്റ് ഇറക്കുമതിയുടെ അർത്ഥം:**
+- **ജാവാസ്ക്രിപ്റ്റ് ഫയൽ HTML ഡോക്യുമെന്റുമായി ലിങ്ക് ചെയ്യുന്നു**
+- **`defer` ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് HTML പാഴ്സ് ചെയ്യൽ പൂർത്തിയാകുമ്പോൾ മാത്രമേ സ്ക്രിപ്റ്റ് ഓടൂ**
+- **DOM മുഴുവൻ ലോഡ് ചെയ്യപ്പെട്ടതിനാൽ എല്ലാ എലമെന്റുകളിലേയും ആക്സസ് ലഭ്യമാണ്**
+- **സ്ക്രിപ്റ്റ് ലോഡിംഗിന്റെയും പ്രകടനത്തിന്റെയും ആധുനിക ചിട്ടി പാലിക്കുന്നു**
+
+ഇപ്പോൾ `app.js`ൽ, പുതിയ ഫംഗ്ഷൻ `updateRoute` സൃഷ്ടിക്കും:
+
+```js
+function updateRoute(templateId) {
+ const template = document.getElementById(templateId);
+ const view = template.content.cloneNode(true);
+ const app = document.getElementById('app');
+ app.innerHTML = '';
+ app.appendChild(view);
+}
+```
+
+**ഈ ഘട്ടങ്ങളുടെ വിശദീകരണം:**
+- **ടൈംപ്ലേറ്റ് എലമെന്റ് അതിന്റെ ഐഡി ഉപയോഗിച്ച് കണ്ടെത്തുന്നു**
+- **`cloneNode(true)` ഉപയോഗിച്ച് ടൈംപ്ലേറ്റിന്റെ ഉള്ളടക്കം ആഴത്തിലുള്ള കോപ്പിയാക്കുന്നു**
+- **ഉള്ളടക്കം പ്രദർശിപ്പിക്കാനുള്ള ആപ് കണ്ടെയ്നർ കണ്ടെത്തുന്നു**
+- **ആപ് കണ്ടെയ്നറിൽ നിലവിലുള്ള ഉള്ളടക്കം മുഖത്ത് നീക്കം ചെയ്യുന്നു**
+- **ക്ലോൺ ചെയ്ത ടൈംപ്ലേറ്റ് ഉള്ളടക്കം DOM-ൽ സജ്ജമാക്കുന്നു**
+
+ഇപ്പോൾ ഈ ഫംഗ്ഷൻ ഒരു ടൈംപ്ലേറ്റ് ഐഡി ഉപയോഗിച്ച് വിളിച്ചു ഫലം നോക്കാം.
+
+```js
+updateRoute('login');
+```
+
+**ഈ ഫംഗ്ഷൻ വിളിയുടെ ലാഭം:**
+- **ലോഗിൻ ടൈംപ്ലേറ്റ് ഐഡി നൽകി സജീവമാക്കുന്നു**
+- **വ്യത്യസ്ത ആപ്പ് സ്ക്രീനുകൾക്കിടയിൽ പ്രോഗ്രാമാറ്റിക് മാറൽ കാണിക്കുന്നു**
+- **"Loading..." സന്ദേശത്തിന് പകരം ലോഗിൻ സ്ക്രീൻ പ്രദർശിപ്പിക്കുന്നു**
+
+✅ ഈ കോഡ് `app.innerHTML = '';` യുടെ ഉദ്ദേശം എന്താണ്? അതിന്റെ അഭാവത്തിൽ എന്ത് സംഭവിക്കും?
+
+## റൂട്ടുകൾ സൃഷ്ടിക്കൽ
+
+Routing എന്നത് URL-നെ ശരിയായ ഉള്ളടക്കത്തിലേക്ക് ബന്ധിപ്പിക്കുന്നതിന് വേണ്ടിയാണ്. മുന്കാല ഫോൺ ഓപ്പറേറ്റർമാർ സ്വിച്ച്ബോർഡുകൾ ഉപയോഗിച്ചു കോളുകൾ നടത്തുന്നത് പോലെ, വെബ് റൂട്ടിംഗ് URL അഭ്യർത്ഥനയെടുത്ത് ഇത് എവിടേക്ക് പോവണമെന്ന് തീരുമാനിക്കുന്നു.
+
+```mermaid
+flowchart LR
+ A["🌐 URL പാത` സ്വയം ഉപയോഗിച്ച് ഹൈപ്പർലിങ്കുകൾ സൃഷ്ടിക്കാവുന്നതാണ്, പക്ഷേ ഇത് സാധാരണയായി പേജ് റീ-ലോഡ് ചെയ്യും. Routing കൈകാര്യം ചെയ്യുന്ന ദിശയിൽ, ഈ പേജ് റീലോഡ് തടയാൻ പ്രത്യേകമായി `preventDefault()` ഫംഗ്ഷൻ ലോറെ(click event) ഉപയോഗിക്കാൻ ആവശ്യമാണ്.
+
+### ടാസ്ക്
+
+നമുക്ക് ആപ്പിനുള്ളിൽ നാവിഗേറ്റ് ചെയ്യാൻ കഴിയുന്ന പുതിയ ഫംഗ്ഷൻ സൃഷ്ടിക്കാം:
+
+```js
+function navigate(path) {
+ window.history.pushState({}, path, path);
+ updateRoute();
+}
+```
+
+**ഈ നാവിഗേഷൻ ഫംഗ്ഷൻ മനസ്സിലാക്കൽ:**
+- **Browser URL** പുതിയ പാതയിലേക്ക് `history.pushState` ഉപയോഗിച്ച് അപ്ഡേറ്റ് ചെയ്യുന്നു
+- **Browser history stack**-ത്തിലേക്ക് പുതിയ എൻട്രി ചേർക്കുന്നു, മുൻ/ശേഷം ബട്ടൺ പിന്തുണയ്ക്കായി
+- **`updateRoute()`** വിളിച്ച് അനുയോജ്യമായ ടേംപ്ലേറ്റ് പ്രദർശിപ്പിക്കുന്നു
+- **പേജ് പുനർലോഡിങ്ങ് ഇല്ലാതെ** സിംഗിൾ പേജ് ആപ്പിന്റെ അനുഭവം തുടരുന്നു
+
+ഈ രീതിയിൽ ആദ്യം നിലവിലെ URL പത്തിനെ അടിസ്ഥാനമാക്കി അപ്ഡേറ്റ് ചെയ്യുന്നു, പിന്നീടു ടേംപ്ലേറ്റ് മാറുന്നു. `window.location.origin` പ്രോപ്പർട്ടി URL റൂട്ട് നൽകും, ഇതുപയോഗിച്ച് പൂർണ്ണ URL പുന:സൃഷ്ടി ചെയ്യാം.
+
+ഇപ്പോൾ ഈ ഫംഗ്ഷൻ ഉണ്ടെങ്കിൽ, നിർവ്വചിച്ച റൂട്ടിൽ പൊരുത്തപ്പെടാത്ത പാത എങ്കിൽ പരിഹാരമായി ഒരു ഫോള്ബാക്ക് ചേർത്തുകൊണ്ട് `updateRoute` മാറ്റാം.
+
+```js
+function updateRoute() {
+ const path = window.location.pathname;
+ const route = routes[path];
+
+ if (!route) {
+ return navigate('/login');
+ }
+
+ const template = document.getElementById(route.templateId);
+ const view = template.content.cloneNode(true);
+ const app = document.getElementById('app');
+ app.innerHTML = '';
+ app.appendChild(view);
+}
+```
+
+** സാഹിത്യമായി ശ്രദ്ധിക്കേണ്ടത്: **
+- നിലവിലെ പാതയ്ക്കായി റൂട്ടുണ്ടോ എന്ന് പരിശോധിക്കുന്നു
+- തെറ്റായ റൂട്ടിലേക്ക് നയിക്കുമ്പോൾ ലോഗിൻ പേജിലേക്ക് റീ-ഡയറക്ട് ചെയ്യുന്നു
+- തകരാറില്ലാത്ത നാവിഗേഷൻ അനുവദിക്കുന്ന ഫോള്ബാക്ക് സംവിധാനം നൽകുന്നു
+- തെറ്റായ URL ഉണ്ടെങ്കിലും ഉപയോക്താക്കൾക്ക് സാധുവായ പേജ് കാണിക്കുന്നു
+
+റൂട്ടുകൾ കണ്ടെത്താനായില്ലെങ്കിൽ ഇനി ലോഗിൻ പേജിലേക്ക് നയിക്കും.
+
+ഇപ്പോൾ ലിങ്കിന് ക്ലിക്ക് ചെയ്യുമ്പോൾ URL നേടാനും, ബ്രൗസറിന്റെ ഡീഫോൾട്ട് ലിങ്ക് പ്രവർത്തനം തടയാനുമായി ഫംഗ്ഷൻ സൃഷ്ടിക്കാം:
+
+```js
+function onLinkClick(event) {
+ event.preventDefault();
+ navigate(event.target.href);
+}
+```
+
+**ഈ ക്ലിക്ക് ഹാൻഡ്ലർ വിശദീകരണം:**
+- ബ്രൗസറിന്റെ ഡീഫോൾട്ട് ലിങ്ക് പ്രവർത്തനം `preventDefault()` ഉപയോഗിച്ച് തടയുന്നു
+- ക്ലിക്കുചെയ്ത ലിങ്കിൽ നിന്നും ലക്ഷ്യ URL എടുക്കുന്നു
+- പേജ് പുനർലോഡുചെയ്യാതെ നമുടെ നാവിഗേറ്റ് ഫംഗ്ഷൻ വിളിക്കുന്നു
+- സിംഗിൾ പേജ് ആപ്പ് സ്മൂത്ത് അനുഭവം നിലനിർത്തുന്നു
+
+```html
+ Login
+...
+Logout
+```
+
+**ഈ `onclick` ബൈൻഡിങ് നിർവ്വഹിക്കുന്നത്:**
+- ഓരോ ലിങ്കും നമുടെ കസ്റ്റം നാവിഗേഷൻ സിസ്റ്റത്തിലേക്ക് കണക്ട് ചെയ്യുന്നു
+- ക്ലിക് ഇവന്റ് നമ്മുടെ `onLinkClick` ഫംഗ്ഷനിലേക്ക് അയയ്ക്കുന്നു
+- പേജ് പുനർലോഡ് ഇല്ലാതെ സ്മൂത്ത് നാവിഗേഷൻ സാധ്യമാക്കുന്നു
+- ഉപയോക്താക്കൾക്ക് ബുക്ക്മാർക്ക് ചെയ്യാനും ലിങ്ക് പങ്കിടാനുമായി ശരിയായ URL ഘടന നിലനിർത്തുന്നു
+
+[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) സവിശേഷത ജാവാസ്ക്രിപ്റ്റ് കോഡിന് ക്ലിക്ക് ഇവന്റ绑定ചെയ്യുന്നു, ഇവിടെ `navigate()` വിളിക്കാനുള്ള കോഡ്.
+
+ഇവയിൽ ക്ലിക്ക് ചെയ്ത്, ആപ്പിന്റെ വിവിധ സ്ക്രീനുകൾക്കിടയിൽ നീങ്ങാൻ സാധിക്കുന്നുവെന്ന് പരിശോധിക്കുക.
+
+✅ `history.pushState` HTML5 സ്റ്റാൻഡേർഡിൽ ഉൾപ്പെടുത്തിയെന്നും [ആധുനിക ബ്രൗസറുകളിൽ എല്ലായിടത്തും](https://caniuse.com/?search=pushState) പ്രവർത്തിക്കുന്നുവെന്നും ശ്രദ്ധിക്കുക. പഴക്കമുള്ള ബ്രൗസറുകൾക്കായി, URL പാതയ്ക്ക് മുമ്പ് [ഹാഷ് (#)](https://en.wikipedia.org/wiki/URI_fragment) ഉപയോഗിച്ച് റൂട്ടിംഗ് നടപ്പിലാക്കാം, ഇത് സാധാരണ എങ്കിൽ അങ്കർ നാവിഗേഷന്റെ ഭാഗമായാണ് പ്രവർത്തിക്കുന്നത്, പേജ് പുനർലോഡ് ആവുകയില്ല.
+
+## 'Back' & 'Forward' ബട്ടണുകൾ പ്രവർത്തിക്കാനാക്കൽ
+
+Back, forward ബട്ടണുകൾ വെബ് ബ്രൗസിംഗ്ക്കു അത്യന്താപേക്ഷിതമാണ്, ഇവിടെ NASA മിഷൻ കൺട്രോളർമാർ പഴയ സിസ്റ്റം നിലകൾ പരിശോധിക്കിവാനായി ഉപയോഗിക്കുമ്പോളുള്ള വിധം. ഉപയോക്താക്കൾ ഈ ബട്ടണുകൾ പ്രവർത്തിക്കണമെന്നു പ്രതീക്ഷിക്കുന്നു, അതായത് തിരക്ക് ഉണ്ടാകുമ്പോൾ ഇത് തകരാറു വരുത്തും.
+
+നമ്മുടെ SPA-യ്ക്കു ഇത് പിന്തുണ നൽകാൻ അധിക ക്രമീകരണം വേണം. ബ്രൗസറിൽ history stack ഉണ്ട് (`history.pushState` ഉപയോഗിച്ച് ഞങ്ങൾ ഇതിനകം ഇടുന്നുവെന്ന് കാണിച്ചു), ഉപയോക്താക്കളെ ഈ ചരിത്രത്തിലൂടെ നാവിഗേറ്റ് ചെയുമ്പോൾ, ആപ്പും പ്രദർശിപ്പിക്കുന്ന ഉള്ളടക്കം അപ്ഡേറ്റ് ചെയ്യണം.
+
+```mermaid
+sequenceDiagram
+ participant User
+ participant Browser
+ participant App
+ participant Template
+
+ User->>Browser: "ലോഗിൻ" ലിങ്ക് ക്ലിക്ക് ചെയ്യുന്നു
+ Browser->>App: onclick ഇവന്റ് ട്രിഗർ ചെയ്യപ്പെട്ടു
+ App->>App: preventDefault() & navigate('/dashboard')
+ App->>Browser: history.pushState('/dashboard')
+ Browser->>Browser: URL /dashboard ആയി അപ്ഡേറ്റ് ചെയ്യുന്നു
+ App->>App: updateRoute() വിളിക്കുന്നു
+ App->>Template: ഡാഷ്ബോർഡ് ടെംപ്ലേറ്റ് കണ്ടെത്തി ക്ലോൺ ചെയ്യുക
+ Template->>App: ക്ലോൺ ചെയ്ത ഉള്ളടക്കം മടങ്ങിച്ച് നൽകുന്നു
+ App->>Browser: ആപ്പ് ഉള്ളടക്കം ടെംപ്ലേറ്റോടെമാറ്റുക
+ Browser->>User: ഡാഷ്ബോർഡ് സ്ക്രീൻ പ്രദർശിപ്പിക്കുക
+
+ Note over User,Template: ഉപയോക്താവ് ബ്രൗസർ ബാക്ക് ബട്ടൺ ക്ലിക്ക് ചെയ്യുന്നു
+
+ User->>Browser: ബാക്ക് ബട്ടൺ ക്ലിക്ക് ചെയ്യുന്നു
+ Browser->>Browser: ഹ история /login-ലേക്ക് വീഴ്ചവഴി
+ Browser->>App: popstate ഇവന്റ് ഫയർ ചെയ്തു
+ App->>App: updateRoute() സ്വയം വിളിച്ചു
+ App->>Template: ലോഗിൻ ടെംപ്ലേറ്റ് കണ്ടെത്തി ക്ലോൺ ചെയ്യുക
+ Template->>App: ക്ലോൺ ചെയ്ത ഉള്ളടക്കം മടങ്ങിച്ച് നൽകുന്നു
+ App->>Browser: ആപ്പ് ഉള്ളടക്കം ടെംപ്ലേറ്റോടെമാറ്റുക
+ Browser->>User: ലോഗിൻ സ്ക്രീൻ പ്രദർശിപ്പിക്കുക
+```
+**പ്രധാന ഇടപെടലുകൾ:**
+- ഉപയോക്തൃ ഇടപെടലുകൾ (ക്ലിക്കുകൾ, ബ്രൗസർ ബട്ടണുകൾ) നാവിഗേഷൻ തുടങ്ങുന്നു
+- ആപ്പ് ലിങ്ക് ക്ലിക്കുകൾ തടഞ്ഞ് പേജ് പുനർലോഡിങ്ങുനടത്താതെ നിലനിർത്തുന്നു
+- History API URL മാറ്റങ്ങളും ബ്രൗസർ ചരിത്ര സ്റ്റാക്ക് മാനേജു ചെയ്യുന്നു
+- ടേംപ്ലേറ്റുകൾ ഓരോ സ്ക്രീനിനും ഉള്ളടക്ക ഘടന നൽകുന്നു
+- ഇവന്റ് ലിസനറുകൾ എല്ലാ നാവിഗേഷൻ ഘടകങ്ങൾക്കും പ്രതികരിച്ചു യ-haspopup തമ
+
+`history.pushState` ഉപയോഗിച്ചുകൊണ്ട് ബ്രൗസറിന്റെ നാവിഗേഷൻ ചരിത്രത്തിൽ പുതിയ എൻട്രികൾ സൃഷ്ടിക്കുന്നു. ബ്രൗസറിന്റെ പിന്നിലെ ബട്ടൺ നാളെ നീട്ടി നോക്കിയാൽ കാണാനാകും:
+
+
+
+പിന്നിലെ ബട്ടൺ കുറേക്കാലം അമർത്തി നോക്കിയാൽ നിലവിലെ URL മാറി, ചരിത്രം അപ്ഡേറ്റ് ആയാലും അടുത്ത ടേംപ്ലേറ്റ് ഒരുപോലെയാണ് കാണിക്കുന്നത്.
+
+ഇതിനോർക്കുവാൻ കാരണം, ആപ്പ് `updateRoute()` വിളിക്കേണ്ടതാണെന്ന് അറിയുന്നില്ല ചരിത്രം മാറിയപ്പോൾ. [`history.pushState` ഡോക്യുമെന്റേഷന്](https://developer.mozilla.org/docs/Web/API/History/pushState) പരിശോധിക്കുമ്പോൾ കണ്ടെത്താം, സ്റ്റേറ്റ് മാറ്റുമ്ബോൾ URL മാറുന്നതോടെ [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) ഇവന്റ് ഉളവാകുന്നു. ഈ ഇവന്റ് ഉപയോഗിച്ച് ഈ പ്രശ്നം പരിഹരിക്കാം.
+
+### ടാസ്ക്
+
+ബ്രൗസർ ചരിത്രം മാറുമ്പോൾ ശരിയായ ടേംപ്ലേറ്റ് അപ്ഡേറ്റ് ആക്കാൻ, `updateRoute()` വിളിക്കുന്ന ഒരു ഫംഗ്ഷൻ പുതുക്കുക. ഇത് ഞങ്ങളുടെ `app.js` ഫയലിന്റെ അവസാനത്തിൽ ചേർക്കാം:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+**ഇതിന്റെ ഹിസ്റ്ററി സംയോജന മനസ്സിലാക്കൽ:**
+- ഉപയോക്താക്കൾ ബ്രൗസർ ബട്ടണുകൾ ഉപയോഗിച്ച് നാവിഗേറ്റ് ചെയ്യുന്നപ്പോൾ ഉണ്ടാകുന്ന `popstate` ഇവന്റ് കേൾക്കുന്നു
+- സംക്ഷിപ്ത സിന്താക്സ് നൽകാൻ arrow function ഉപയോഗിക്കുന്നു
+- ചരിത്രം മാറുമ്പോൾ `updateRoute()` സ്വയം വിളിക്കുന്നു
+- പേജ് ആദ്യമായി ലോഡ് ചെയ്യുന്ന സമയത്ത് `updateRoute()` വിളിച്ച് ആപ്പ് ആരംഭിക്കുന്നു
+- ഉപയോക്താക്കൾ എങ്ങിനെയാണ് നാവിഗേറ്റ് ചെയ്താലും ശരിയായ ടേംപ്ലേറ്റ് പ്രദർശിപ്പിക്കുന്നതായി ഉറപ്പാക്കുന്നു
+
+> 💡 **പ്രൊ ടിപ്പ്**: ഇവിടെ `popstate` ഇവന്റ് ഹാൻഡ്ലറിനായി [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ഉപയോഗിച്ചതാണ്, ഡിസ്പ്രസിഷൻ കുറയ്ക്കാനായിരിക്കും, സാധാരണ ഫങ്ഷൻ ഉപയോഗിച്ചാലും സാരമാണ്.
+
+ഈ arrow function-യുടെ ഓര്മ്മപ്പെടുത്തൽ വീഡിയോ:
+
+[](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
+
+> 🎥 മുകളില് കാണുന്ന ചിത്രം ക്ലിക്ക് ചെയ്ത് arrow functions സംബന്ധിച്ച വീഡിയോ കാണാം.
+
+ഇപ്പോൾ നിങ്ങളുടെ ബ്രൗസറിന്റെ അടുത്തത്, പിന്നിൽ എന്നിവ ഉപയോഗിച്ച് പരീക്ഷിച്ച്, പ്രദർശിപ്പിക്കുന്ന റൂട്ടുകളെ ശരിയായി അപ്ഡേറ്റ് ചെയ്യുന്നതാണെന്ന് പരിശോധിക്കുക.
+
+### ⚡ **അടുത്ത 5 മിനിറ്റ് നിങ്ങള് ചെയ്യാവുന്നതെല്ലാം**
+- [ ] ബ്രൗസർ ബാക്ക്/ഫോർവേർഡ്ബട്ടണുകൾ ഉപയോഗിച്ച് ബാങ്കിങ്ങ് ആപ്പിന്റെ നാവിഗേഷൻ പരിശോധിക്കുക
+- [ ] അഡ്രസ് ബാറിൽ ഇൻപുട്ട് മാറ്റി റൂട്ടിംഗ് പരീക്ഷിക്കുക
+- [ ] ബ്രൗസർ ഡെവ്ടൂൾസ് തുറന്ന് ടേംപ്ലേറ്റുകൾ DOM-ലേക്ക് എങ്ങനെ ക്ലോൺ ചെയ്യുന്നു എന്ന് പരിശോധിക്കുക
+- [ ] റൂട്ടിംഗ് ഫ്ലോ ട്രാക്ക് ചെയ്യാൻ console.log ഉപയോഗിച്ച് പരീക്ഷണം നടത്തുക
+
+### 🎯 **ഈ മണിക്കൂറിൽ നേടാവുന്ന കാര്യങ്ങൾ**
+- [ ] പാഠത്തിന് ശേഷമുള്ള ക്വിസ് പൂർത്തിയാക്കി SPA ആർക്കിടെക്ചർ ആശയങ്ങൾ മനസ്സിലാക്കുക
+- [ ] ബാങ്കിങ് ആപ്പ് ടേംപ്ലേറ്റുകൾ സ്റ്റൈലിംഗോടെ പ്രൊഫഷണലാക്കുക
+- [ ] 404 പേജ് എറർ രക്ഷാധികാര പരീക്ഷണങ്ങൾ അടങ്ങുന്ന വിജയകരമായ എറർ ഹാൻഡ്ലിങ്
+- [ ] ക്രെഡിറ്റ്സ് പേജ് ചലഞ്ചും കൂടുതൽ റൂട്ടിംഗ് പ്രവർത്തനക്ഷമതയും
+- [ ] ലോഡിംഗ് സ്റ്റേറ്റുകളും ടേംപ്ലേറ്റ് സ്വിച്ച് ചെയ്യുന്ന ട്രാൻസിഷനുകളും ചേർക്കുക
+
+### 📅 **നിങ്ങളുടെ ആഴ്ചയോളം SPA വികസന യാത്ര**
+- [ ] ഫോർമുകൾ, ഡാറ്റ മാനേജ്മെന്റ്, സ്ഥിരത ചേരുന്ന മുഴുവൻ ബാങ്കിങ് ആപ്പ് പൂർത്തിയാക്കുക
+- [ ] റൂട്ടിംഗ് അധിക ഫീച്ചറുകൾ (പാരാമീറ്ററുകൾ, നേസ്റ്റഡ് റൂട്ടുകൾ) ചേർക്കുക
+- [ ] നാവിഗേഷൻ ഗാർഡുകളും പ്രാമാണീകരണ അടിസ്ഥാന റൂട്ടിംഗും നടപ്പിലാക്കുക
+- [ ] പുനരുപയോഗ യോഗ്യമായ ടേംപ്ലേറ്റ് ഘടകങ്ങളും കമ്പോണന്റ് ലൈബ്രറിയും സൃഷ്ടിക്കുക
+- [ ] അനിമേഷനുകളും ട്രാൻസിഷനുകളും ചേർത്ത് ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുക
+- [ ] SPA-хോസ്റ്റിങ്ങും റൂട്ടിംഗ് ക്രമീകരണവും
+
+### 🌟 **നിങ്ങളുടെ മാസംവഴിയുള്ള ഫ്രണ്ട് എൻഡ് ആർക്കിടെക്ചർ ക്ലാസുകൾ**
+- [ ] React, Vue, Angular പോലുള്ള ആധുനിക ഫ്രെയിംവർക്ക് ഉപയോഗിച്ച് ദുർഘടമായ SPA-കൾ നിർമ്മിക്കുക
+- [ ] State management പാറ്റേണുകളും ലൈബ്രറികളും പഠിക്കുക
+- [ ] SPA വികസനത്തിനുള്ള build tools, development workflows കൈകാര്യം ചെയ്യുക
+- [ ] പ്രോഗ്രസീവ് വെബ് ആപ്പിന്റെ offline പ്രവർത്തനവും ഉൾപ്പെടെ നടപ്പിലാക്കുക
+- [ ] വലിയ പ്രോജെക്ടുകളിലെ പ്രകടന മൂല്യനിർണയം പഠിക്കുക
+- [ ] ഓപ്പൺ സോഴ്സ് SPA പ്രൊജക്ടുകളിൽ സംഭാവനകൾ ചെയ്യുക, അറിവ് പങ്കുവെക്കുക
+
+## 🎯 നിങ്ങളുടെ Single-Page Application നൈപുണ്യ മാപ്പ്
+
+```mermaid
+timeline
+ title SPA വികസനവും ആധുനിക വെബ് ആർക്കിടെക്ചറും പഠന പുരോഗതി
+
+ section അടിസ്ഥാനപരവും (20 മിനിറ്റ്)
+ ഫലക സമ്പ്രദായങ്ങൾ: HTML ഫലക ഘടകങ്ങൾ
+ : DOM മാനിപ്പുലേഷൻ
+ : ഉള്ളടക്കം ക്ലോണിംഗ്
+ : ഡൈനാമിക് റെൻഡറിംഗ്
+
+ section റൂട്ടിംഗ് അടിസ്ഥാനങ്ങൾ (30 മിനിറ്റ്)
+ ക്ലയന്റ്-സൈഡ് നാവിഗേഷൻ: URL നിയന്ത്രണം
+ : ചരിത്ര API
+ : റൂട്ടു മാപ്പിംഗ്
+ : ഇവന്റുകള് കൈകാര്യം ചെയ്യല്
+
+ section ഉപയോക്തൃ അനുഭവം (40 മിനിറ്റ്)
+ നാവിഗേഷൻ പൊളീഷ്: ബ്രൗസർ ഇന്റഗ്രേഷൻ
+ : ബാക്ക് ബട്ടൺ സഹായം
+ : പിശക് കൈകാര്യം ചെയ്യല്
+ : സ്മൂത്ത് ട്രാൻസിഷനുകൾ
+
+ section ആർക്കിടെക്ട് പാറ്റേണുകൾ (50 മിനിറ്റ്)
+ പ്രൊഫഷണൽ SPAs: ഘടക സമ്പ്രദായങ്ങൾ
+ : സ്റ്റേറ്റ് മാനേജ്മെന്റ്
+ : പ്രകടന മെച്ചപ്പെടുത്തല്
+ : പിശക് ബൗണ്ടറികൾ
+
+ section മുൻനിര സാങ്കേതിക വിദ്യകൾ (1 ആഴ്ച)
+ ഫ്രെയിംവർക് ഇന്റഗ്രേഷൻ: റിയാക്ട് റൗട്ടർ
+ : വ്യൂ റൗട്ടർ
+ : ആംഗുലർ റൗട്ടർ
+ : റ്റേറ്റ്ഡ് ലൈബ്രറികൾ
+
+ section ഉൽപ്പാദന കഴിവുകൾ (1 മാസം)
+ സംരംഭ വികസനം: ബിൽഡ് സിസ്റ്റങ്ങൾ
+ : പരിശോധനാ തന്ത്രങ്ങൾ
+ : ഡിപ്ലോയ്മെന്റ് പൈപ്പ്ലൈനുകൾ
+ : പ്രകടന നിരീക്ഷണം
+```
+### 🛠️ നിങ്ങളുടെ SPA വികസന ഉപകരണങ്ങൾ സംഗ്രഹം
+
+ഈ പാഠം പൂർത്തിയാക്കിയിട്ടു നിങ്ങൾ കൈവരിച്ചു ഒന്നാം:
+- **ടേംപ്ലേറ്റ് ആർക്കിടെക്ചർ**: ഡൈനാമിക് ഉള്ളടക്കും പുനരുപയോഗം ചെയ്യാവുന്ന HTML ഘടകങ്ങളും
+- **ക്ലയന്റ്-സൈഡ് റൂട്ടിംഗ്**: പേജ് റീ-ലോഡ് ഇല്ലാതെ URL മാനേജ്മെന്റ്
+- **ബ്രൗസർ സംയോജനം**: History API ഉപയോഗവും ബാക്ക്/ഫോർവേർഡ് ബട്ടൺ പിന്തുണയും
+- **ഇവന്റ്-ഡ്രിവൻ സിസ്റ്റം**: നാവിഗേഷൻ കൈകാര്യം ചെയ്യലും ഉപയോക്തൃ ഇടപെടലും
+- **DOM മാനിപുലേഷൻ**: ടേംപ്ലേറ്റ് ക്ലോണിംഗ്, ഉള്ളടക്കം മാറ്റിയലും ഘടക മാനേജ്മെന്റ്
+- **എറർ ഹാൻഡ്ലിംഗ്**: തെറ്റായ റൂട്ടുകളും കാണാത്ത ഉള്ളടക്കവും വശം വെയ്ക്കുന്ന വീഴ്ചകൾ
+- **പ്രകടനം പാറ്റേണുകൾ**: കാര്യക്ഷമ ഉള്ളടക്ക ലോഡിങ്ങും റെന്ററിങ്ങും
+
+**യഥാർത്ഥ പ്രയോജനം**: നിങ്ങളുടെ SPA വികസന കഴിവുകൾ നേരിട്ട് ബാധിക്കുന്നു:
+- **ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾ**: React, Vue, Angular മറ്റ് ഫ്രെയിംവർക്ക് വികസനം
+- **പ്രോഗ്രസീവ് വെബ് ആപ്പുകൾ**: ഓഫ്ലൈന് സൗകര്യവുമുള്ള, ആപ്പ് പോലുള്ള അനുഭവങ്ങൾ
+- **എന്റർപ്രൈസ് ഡാഷ്ബോർഡുകൾ**: ബിസിനസ്സ് അപ്ലിക്കേഷനുകൾ ഒരു മുകളിൽ പ്രവർത്തനങ്ങളിലൂടെ
+- **ഇ-കൊമേഴ്സ് പ്ലാറ്റ്ഫോംസ്**: ഉൽപ്പന്ന കാറ്റലോഗുകൾ, ഷോപ്പിംഗ് കാർട്ടുകൾ, ചെക്കൗട്ട് ഫ്ലോകൾ
+- **ഉള്ളടക്കം മാനേജ്മെന്റ്**: ഡൈനാമിക് ഉള്ളടക്കം സൃഷ്ടിക്കുകയും പരിഷ്കരിക്കുകയും ചെയ്യുക
+- **മൊബൈൽ ഡെവലപ്പ്മെന്റ്**: ഹ്രിഡ് ആപ്പുകൾ വെബ് സാങ്കേതിക വിദ്യകൾ ഉപയോഗിച്ച്
+
+**പ്രൊഫഷണൽ കഴിവുകൾ**: ഇനി നിങ്ങളുടെ കഴിവ്:
+- **സ്ഥാപിക്കുക** ശ്രേഷ്ഠമായ വ്യത്യാസങ്ങളുമായി സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനുകൾ
+- **പ്രവർത്തിപ്പിക്കുക** അപ്ലിക്കേഷൻ സങ്കീർണതയോടൊപ്പം സ്കെയിൽ ചെയ്യുന്ന ക്ലയന്റ്-സൈഡ് റൂട്ടിങ് സിസ്റ്റങ്ങൾ
+- **ഡിബഗ് ചെയ്യുക** ബ്രൗസർ ഡെവലപ്പർ ടൂൾസ് ഉപയോഗിച്ച് സങ്കീർണമായ നാവിഗേഷൻ ഫ്ളോകൾ
+- **ഒപ്റ്റിമൈസ് ചെയ്യുക** കാര്യക്ഷമമായ ടെംപ്ലേറ്റ് മാനേജ്മെന്റ് വഴിയാണ് ആപ്ലിക്കേഷൻ പ്രകടനം
+- **ഡിസൈൻ ചെയ്യുക** നേറ്റീവ് ആൻഡ് റെസ്പോൺസീവ് അനുഭവങ്ങൾ
+
+**ഫ്രണ്ട്എൻഡ് ഡെവലപ്പ്മെന്റ് ആശയങ്ങൾ കൈവശം വെച്ചിട്ടുണ്ട്**:
+- **കമ്പോണന്റ് ആർക്കിടെക്ചർ**: പുനരുപയോഗയോഗ്യമായ UI പാറ്റേണുകളും ടെംപ്ലേറ്റ് സിസ്റ്റങ്ങളും
+- **സ്റ്റേറ്റ് സിങ്ക്രണൈസേഷൻ**: URL സ്റ്റേറ്റ് മാനേജ്മെന്റും ബ്രൗസർ ഹിസ്റ്ററിയും
+- **ഇവന്റ്-ഡ്രിവൺ പ്രോഗ്രാമിംഗ്**: ഉപയോക്തൃ ഇടപെടൽ കൈകാര്യം ചെയ്യൽ, നാവിഗേഷൻ
+- **പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷൻ**: കാര്യക്ഷമമായ DOM മാനിപ്പുലേഷനും ഉള്ളടക്കം ലോഡിംഗും
+- **ഉപയോക്തൃ അനുഭവ ഡിസൈൻ**: സ്മൂത്ത് ട്രാന്സിഷനുകളും ബുദ്ധിമുട്ടില്ലാത്ത നാവിഗേഷനും
+
+**അടുത്ത നില**: നിങ്ങൾ ആധുനിക ഫ്രണ്ട്എൻഡ് ഫ്രെയിംവർക്ക്സ്, ആധുനിക സ്റ്റേറ്റ് മാനേജ്മെന്റ്, അല്ലെങ്കിൽ സങ്കീർണ എന്റർപ്രൈസ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ സജ്ജമാണ്!
+
+🌟 **അഭിനന്ദനങ്ങൾ**: നിങ്ങൾ ആധുനിക വെബ് ആർക്കിടെക്ചർ പാറ്റേണുകളോടുകൂടിയ പ്രൊഫഷണൽ സിംഗിൾ-പേജ് ആപ്ലിക്കേഷൻ അടിസ്ഥാന രൂപപ്പെടുത്തിയിരിക്കുന്നു!
+
+---
+
+## GitHub Copilot ഏജന്റ് ചാലഞ്ച് 🚀
+
+എജന്റ് മോഡ് ഉപയോഗിച്ച് താഴെയുള്ള വെല്ലുവിളി പൂരിപ്പിക്കുക:
+
+**വിവരണം:** ബാൻകിംഗ് ആപ്പ് മെച്ചപ്പെടുത്തുക, തെറ്റായ റൂട്ടുകൾക്കായി തകരാറുകൾ കൈകാര്യം ചെയ്യൽ, 404 പേജ് ടെംപ്ലേറ്റ് നടപ്പിലാക്കി, സാന്നിധ്യമില്ലാത്ത പേജുകളിലേക്ക് പോകുമ്പോൾ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുക.
+
+**പ്രംപ്റ്റ്:** "not-found" ഐഡി ഉള്ള പുതിയ HTML ടെംപ്ലേറ്റ് സൃഷ്ടിക്കുക, ഉപയോഗിക്കാൻ സൗഹൃദപരമായ 404 പേജ് ശൈലി സഹിതം പ്രദർശിപ്പിയ്ക്കുന്നു. തുടർന്ന് ജാവാസ്ക്രിപ്റ്റ് റൂട്ടിങ് ലൊജിക് തിരുത്തി തെറ്റായ URL-കൾക്കായി ഈ ടെംപ്ലേറ്റ് കാണിക്കുക, "Go Home" ബട്ടൺ ചേർക്കുക, അത് ലോഗിൻ പേജിലേയ്ക്ക് തിരികെ നയിക്കും.
+
+[എജന്റ് മോഡ്](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) സംബന്ധിച്ച് കൂടുതൽ അറിയുക.
+
+## 🚀 വെല്ലുവിളി
+
+ഈ ആപ്പിന്റെ ക്രെഡിറ്റ്സ് കാണിക്കുന്ന മൂന്നാം പേജിനായി പുതിയ ടെംപ്ലേറ്റ്, റൂട്ടു ചേർക്കുക.
+
+**ചാലഞ്ച് ലക്ഷ്യങ്ങൾ:**
+- **പുതിയ HTML ടെംപ്ലേറ്റ് സൃഷ്ടിക്കുക** അനുയോജ്യമായ ഉള്ളടക്കം ഘടനയോടെ
+- **പുതിയ റൂട്ടു** നിങ്ങളുടെ റൂട്ടു കോൺഫിഗറേഷൻ ഒബ്ജക്റ്റിൽ ചേർക്കുക
+- **നാവിഗേഷൻ ലിങ്കുകൾ ഉൾപ്പെടുത്തുക** ക്രെഡിറ്റ്സ് പേജിലേക്കും അവിടെനിന്നും
+- **സാധുത പരിശോധിക്കുക** ബ്രൗസർ ഹിസ്റ്ററിയുമായി ശരിയായ നാവിഗേഷൻ
+
+## ലക്ചർ കഴിഞ്ഞു ക്വിസ്
+
+[ലക്ചർ കഴിഞ്ഞു ക്വിസ്](https://ff-quizzes.netlify.app/web/quiz/42)
+
+## അവലോകനവും സ്വയം പഠനവും
+
+റൂട്ടിങ് വെബ് ഡെവലപ്പ്മെന്റിലെ അത്ഭുതകരമായി സങ്കീർണമായ ഭാഗങ്ങളിലൊന്നാണ്, പ്രത്യേകിച്ചും വെബ് പേജിന്റെ റിഫ്രഷ് സ്വഭാവം സിംഗിൾ പേജ് ആപ്ലിക്കേഷനിലേക്ക് മാറുമ്പോൾ. [ആസ്യൂർ സ്റ്റാറ്റിക് വെബ് ആപ്പ് സേവനം റൂട്ടിങ് എങ്ങനെ കൈകാര്യം ചെയ്യുന്നു](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) എന്നത് വായിക്കുക. ആ ഡോക്യുമെന്റിലെ ചില തീരുമാനങ്ങൾ എന്തുകൊണ്ട് ആവശ്യമാണ് എന്ന് വിശദീകരിക്കുവാൻ സാധിക്കുമോ?
+
+**കൂടുതൽ പഠന വിഭവങ്ങൾ:**
+- **പഠിക്കുക** React Router, Vue Router പോലുള്ള ജനപ്രിയ ഫ്രെയിംവർകുകൾ ക്ലയന്റ്-സൈഡ് റൂട്ടിങ് എങ്ങനെ നടപ്പിലാക്കുന്നു എന്ന്
+- **അന്വേഷിക്കുക** ഹാഷ്-ബേസ്ഡ് റൂട്ടിങും ഹിസ്റ്ററി API റൂട്ടിങും തമ്മിലുള്ള വ്യത്യാസങ്ങൾ
+- **ശിക്ഷിക്കുക** സെർവർ-സൈഡ് റെൻഡറിംഗിന്റെ (SSR) റൂട്ടിങ് നയങ്ങളിലെ സ്വാധീനം
+- **പഠിക്കുക** പ്രോഗ്രസ്സീവ് വെബ് ആപുകൾ (PWAs) റൂട്ടിങ്, നാവിഗേഷൻ എങ്ങനെ കൈകാര്യം ചെയ്യുന്നു
+
+## അസൈൻമെന്റ്
+
+[റൂട്ടിങ് മെച്ചപ്പെടുത്തുക](assignment.md)
+
+---
+
+
+**മൊഴിവാരം**:
+ഈ രേഖ AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം ശരിതരം സാധിക്കുന്നതിനായി പരിശ്രമിക്കുന്നുവെങ്കിലും, സ്വയംഭരണ വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റുകൾ ഉണ്ടാകാനിടയുള്ളതാണ്. മാനദണ്ഡപരമായ ഭാഷയിലാണ് യഥാർത്ഥ രേഖ നിലനിൽക്കുന്നത്. അത്യന്ത важാനമായ വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം നിർവഹിക്കുന്നതാണ് ശുപാർശ. ഈ വിവർത്തനം ഉപയോഗിച്ചതിലൂടെ ഉണ്ടായ ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾ അല്ലെങ്കിൽ തത്വമാറ്റങ്ങൾക്കായി ഞങ്ങൾ ഉത്തരവാദിത്വം വഹിക്കുന്നില്ല.
+
\ No newline at end of file
diff --git a/translations/ml/7-bank-project/1-template-route/assignment.md b/translations/ml/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 000000000..31d0523e0
--- /dev/null
+++ b/translations/ml/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,60 @@
+
+# റൂട്ടിംഗ് മെച്ചപ്പെടുത്തുക
+
+## നിർദ്ദേശങ്ങൾ
+
+നിങ്ങൾ അടിസ്ഥാന റൂട്ടിംഗ് സംവിധാനം നിർമാണം പൂർത്തിയാക്കിയിരിക്കുന്നു, ഇപ്പോൾ അത് ഉപഭോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുകയും മികച്ച ഡെവലപ്പർ ടൂൾസുകൾ നൽകുകയും ചെയ്യുന്ന പ്രൊഫഷണൽ ഫീച്ചറുകൾ ചേർത്തുകൊണ്ട് പ്രഗതി കൈക്കൊള്ളാൻ സമയം എത്തി. യഥാർത്ഥ ലോക അപ്ലിക്കേഷനുകൾക്ക് ഒരു ടെംപ്ലേറ്റ് മാറൽ മാത്രമല്ല, ഡൈനാമിക് പേജ് തലക്കെട്ടുകൾ, ലൈഫ്സൈക്കിൾ ഹൂക്കുകൾ, വിപുലമായ ആർക്കിടെക്ചറുകൾ എന്നിവ ആവശ്യമാണ്.
+
+ഈ അസൈൻമെന്റിൽ, നിർമ്മിത റൂട്ടിംഗ് ഇംപ്ലമെന്റേഷനിൽ സാധാരണ പ്രൊഡക്ഷൻ വെബ് അപ്ലിക്കേഷനുകളിൽ കാണപ്പെടുന്ന രണ്ട് മുഖ്യ ഫീച്ചറുകൾ ചേർക്കും. ഈ മെച്ചപ്പെടുത്തലുകൾ നിങ്ങളുടെ ബാങ്കിംഗ് ആപ്പ് കൂടുതൽ പ്രൊഫഷണലായി തോന്നുകയും ഭാവി ഫംഗ്ഷനാലിറ്റിക്ക് ഒരു അടിസ്ഥാനവും നൽകുകയും ചെയ്യും.
+
+റൂട്ടുകൾ പ്രഖ്യാപനത്തിൽ ഇപ്പോൾ ഉപയോഗിക്കാനുള്ള ടെംപ്ലേറ്റ് ഐഡി മാത്രമേ ഉണ്ടാകൂ. പക്ഷേ ഒരു പുതിയ പേജ് പ്രദർശിപ്പിക്കുമ്പോൾ.kannada ചില അധിക വിവരങ്ങൾ ആവശ്യമായേക്കാം. ഇരുവിഭാഗവും ചേർത്തുകൊണ്ട് നമ്മുടെ റൂട്ടിംഗ് പാലിക്കൽ മെച്ചപ്പെടുത്താം:
+
+### ഫീച്ചർ 1: ഡൈനാമിക് പേജ് തലക്കെട്ടുകൾ
+**വെല്ലുവിളി:** ഓരോ ടെംപ്ലേറ്റിനും തലക്കെട്ടുകൾ നൽകുക, ടെംപ്ലേറ്റ് മാറുമ്പോൾ വിൻഡോ തലക്കെട്ട് ഈ പുതിയ തലക്കെട്ടിലേക്ക് അപ്ഡേറ്റ് ചെയ്യുക.
+
+**എന്തുകൊണ്ട് ഇത് മാത്രം:**
+- **ഉപഭോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നു** വേർവിവരമുള്ള ബ്രൗസർ ടാബ് തലക്കെട്ടുകൾ കാണിച്ച്
+- **ആക്സസിബിലിറ്റി വർധിപ്പിക്കുന്നു** സ്ക്രീൻ റീഡർമാർക്കും സഹായകര സാങ്കേതിക വിദ്യകൾക്കും
+- **ഉത്തമമായ ബുക്ക്മാർകിംഗ്, ബ്രൗസർ ഹിസ്റ്ററി ഇടപെടലുകൾ നൽകുന്നു**
+- **പ്രൊഫഷണൽ വെബ് ഡെവലപ്പ്മെന്റ് മികച്ച രീതികളനുസരിക്കുന്നു**
+
+**ഇംപ്ലിമെന്റേഷൻ വീതി:**
+- **റൂട്ട്സ് ഒബ്ജക്ട് പരിധി വർദ്ധിപ്പിക്കുക** ഓരോ റൂട്ടിനും തലക്കെട്ട് വിവരങ്ങൾ ഉൾപ്പെടുത്തുക
+- **`updateRoute()` ഫംഗ്ഷൻ മാറ്റുക** ഡൈനാമിക് ആയി `document.title` അപ്ഡേറ്റ് ചെയ്യും
+- **ടീസ്റ്റുചെയ്യുക** സ്ക്രീനുകൾ മധ്യേ നാവിഗേറ്റ് ചെയ്താൽ തലക്കെട്ടുകൾ ശരിയായി മാറുന്നു എന്ന്
+
+### ഫീച്ചർ 2: റൂട്ടും ലൈഫ്സൈക്കിൾ ഹുക്കുകൾ
+**വെല്ലുവിളി:** ടെംപ്ലേറ്റ് മാറിയതിനു ശേഷം ചില കോഡ് എക്സിക്യൂട്ട് ചെയ്യാനുള്ള ഓപ്ഷൻ ചേർക്കുക. ഡെവലപ്പർ കോൺസോളിൽ ഓരോ തവണ ഡാഷ്ബോർഡ് പേജ് കാണുമ്പോഴും `'Dashboard is shown'` പ്രിന്റ് ചെയ്യണം.
+
+**എന്തുകൊണ്ട് ഇത് മാത്രം:**
+- **കസ്റ്റം ലജിക്ക് പ്രവർത്തിപ്പിക്കാൻ സഹായിക്കുന്നു** പ്രത്യേക റൂട്ടുകൾ ലോഡ് ചെയ്യുമ്പോൾ
+- **ആനലിറ്റിക്സ്, ലോഗിംഗ്, ഇൻഷ്യലൈസേഷൻ കോഡിനുള്ള ഹുക്കുകൾ നൽകുന്നു**
+- **കീഴിലെ കോംപ്ലക്സിറ്റി ഉള്ള റൂട്ടിങ് പെരുമാറ്റങ്ങൾക്കുള്ള നാമ്പ് സൃഷ്ടിക്കുന്നു**
+- **വെബ് ഡെവലപ്പ്മെന്റിലുള്ള ഓബ്സ്വർ പാറ്റേൺ കാണിക്കുന്നു**
+
+**ഇംപ്ലിമെന്റേഷൻ വീതി:**
+- **റൂട്ടിംഗ് കോൺഫിഗറേഷനുകളിൽ ഓപ്ഷണൽ കോൾബാക്ക് ഫംഗ്ഷൻ ചേർക്കുക**
+- **ടെംപ്ലേറ്റ് റേൻഡറിങ്ങ് കഴിഞ്ഞ് കോൾബാക്ക് ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യുക (ഉണ്ടെങ്കിൽ)**
+- **കോൾബാക്ക് നിർവചിച്ചിരിക്കുന്ന ഏതൊരു റൂട്ടിനും ഈ ഫീച്ചർ പ്രവർത്തിക്കാൻ ഉറപ്പാക്കുക**
+- **ഡാഷ്ബോർഡ് സന്ദർശിക്കുമ്പോൾ കോൺസോളിൽ മെസേജ് കാണാനുണ്ടെന്ന് പരിശോദിക്കുക**
+
+## റുബ്രിക്
+
+| ക്രൈട്ടീരിയ | ഉത്തമം | നല്ലത് | മെച്ചപ്പെടുത്തേണ്ടത് |
+| -------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
+| | ഇരുവരും ഫീച്ചറുകളും വിജയംകരമായി പ്രവർത്തിക്കുന്നു. തലക്കെട്ടു, കോഡ് ചേർക്കൽ പുതിയ третьാം റൂട്ടിലും `routes` ഡിക്ലറേഷനിൽ ലഭ്യമാകുന്നു. | ഇരുവരും ഫീച്ചറുകൾ പ്രവർത്തിക്കുന്നു, പക്ഷേ അത് ഹാർഡ്കോഡായി മാത്രമേ ഉള്ളൂ; `routes` ഡിക്ലറേഷൻ വഴി കോൺഫിഗർ ചെയ്യാൻ കഴിയുന്നില്ല. മൂന്നാം റൂട്ടിൽ തലക്കെട്ട്, കോഡ് ചേർക്കൽ പൂർണമായും അല്ലെങ്കിൽ ഭാഗികമായി പ്രവർത്തിക്കുന്നില്ല. | ഒന്നാം ഫീച്ചർ ഇല്ലാത്തത് അല്ലെങ്കിൽ ശരിയായി പ്രവർത്തിക്കുന്നില്ല. |
+
+---
+
+
+**അസൂയാവാക്ക്**:
+ഈ രേഖ AI തര്ജ്ജമാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തര്ജ്ജമ ചെയ്തതാണ്. ഞങ്ങള് നിര്വ്വികാരതക്കും കൃത്യതക്കും പ്രയത്നം ചെയ്യും എങ്കിലും, ഓട്ടോമേറ്റഡ് തര്ജ്ജമയില് തെറ്റുകളോ അക്യുറസിയില്ലായ്മയോ ഉണ്ടായിരിക്കാന് സാധ്യതവുണ്ട്. സ്വദേശീയ ഭാഷയില് ഉള്ള അസ്തിത്വത്തിലുള്ള പകർപ്പ് പ്രാധാന്യത്തോടെ കാണണമെന്നും കരുതുക. പ്രധാനമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ തര്ജ്ജമ ഉപയോഗിക്കണമെന്ന് ശിപാര്ശ ചെയ്യപ്പെടുന്നു. ഈ തര്ജ്ജമ ഉപയോഗിക്കുന്നതില്നിന്നുള്ള എളുപ്പമോ തെറ്റിദ്ധാരണയോ കാരണം ഞങ്ങൾക്ക് ഉത്തരവാദിത്വമില്ല.
+
\ No newline at end of file
diff --git a/translations/ml/7-bank-project/2-forms/README.md b/translations/ml/7-bank-project/2-forms/README.md
new file mode 100644
index 000000000..0a51cb751
--- /dev/null
+++ b/translations/ml/7-bank-project/2-forms/README.md
@@ -0,0 +1,966 @@
+
+# ബാങ്കിങ് ആപ്പ് നിർമ്മിക്കുക ഭാഗം 2: ലോഗിൻ & രജിസ്ട്രേഷൻ ഫോർം നിർമ്മിക്കുക
+
+```mermaid
+journey
+ title നിങ്ങളുടെ ഫോം വികസന യാത്ര
+ section HTML അടിസ്ഥാനം
+ ഫോം ഘടകങ്ങൾ മനസ്സിലാക്കുക: 3: Student
+ ഇൻപുട്ട് തരം പഠിക്കുക: 4: Student
+ ആക്സസിബിലിറ്റിിട്ടിൽ പ്രാവിണ്യം നേടുക: 4: Student
+ section JavaScript സംയോജനം
+ ഫോം സമർപ്പണം കൈകാര്യം ചെയ്യുക: 4: Student
+ AJAX സംവാദം നടപ്പിലാക്കുക: 5: Student
+ സെർവർ പ്രതികരണങ്ങൾ പ്രോസസ്സ് ചെയ്യുക: 5: Student
+ section പരിശോധനാ സംവിധാനങ്ങൾ
+ ബഹുസ്വര പരിശോധന നിർമ്മിക്കുക: 5: Student
+ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുക: 5: Student
+ ഡാറ്റയുടെ അഖണ്ഡത ഉറപ്പുവരുത്തുക: 5: Student
+```
+## പ്രീ-ലെക്ചർ ക്വിസ്
+
+[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/43)
+
+ഓൺലൈനിൽ ഫോർം പൂരിപ്പിച്ച് നിങ്ങളുടെ ഇമെയിൽ ഫോർമാറ്റ് തള്ളി മറികടന്നിട്ടുണ്ടോ? അല്ലെങ്കിൽ സബ്മിറ്റ് കണ്ണി അമർത്തിയപ്പോഴെല്ലാ വിവരങ്ങളും നഷ്ടപ്പെട്ടിട്ടുണ്ടോ? ഇവിടെയുണ്ട് നാം എല്ലാവരും നേരിട്ട അനുഭവങ്ങൾ.
+
+ഫോർമുകൾ നിങ്ങളുടെ ഉപയോക്താക്കളും ആപ്പിന്റെ പ്രവർത്തനങ്ങളും തമ്മിലുള്ള പാലമാണ്. വിമാനങ്ങളെത്തന്നെ സുരക്ഷിതമായി അവരുടെ ലക്ഷ്യസ്ഥാനത്തേക്ക് നയിക്കുന്ന വിമാന നിയന്ത്രകർ പോലുള്ള ചികിത്സാനിയമങ്ങൾ പോലെയാണ് നന്നായി രൂപകല്പ്പന ചെയ്ത ഫോറങ്ങൾ വ്യക്തമായ പ്രതികരണം നൽകുകയും ചെലവേറിയ പിഴവുകൾ തടയുകയും ചെയ്യുന്നത്. മോശമായ ഫോർമുകൾ, മറുവശത്ത്, തിരക്കുള്ള വിമാനത്താവളത്തിലെ തെറ്റായ ആശയവിനിമയത്തേക്കാൾ വേഗം ഉപയോക്താക്കളെ വിട്ടുമാറാൻ തുടങ്ങിയേക്കാം.
+
+ഈ പാഠത്തിൽ, നിങ്ങളുടെ സ്റ്റാറ്റിക് ബാങ്കിങ് ആപ്പിനെ ഇന്ററാക്ടീവ് ആപ്പായി മാറ്റാം. ഉപയോക്തൃ ഇൻപുട്ട് വാലിഡേറ്റ് ചെയ്യുന്ന, സർവറുകളുമായി സംവദിക്കുന്ന, സഹായകരമായ പ്രതികരണം നൽകുന്ന ഫോർമുകൾ നിർമ്മിക്കാൻ പഠിക്കാം. ഇതിനെ നിങ്ങളുടെ ആപ്പിന്റെ ഫീച്ചറുകൾ നയിക്കാൻ ഉപയോക്താക്കളെ സഹായിക്കുന്ന കൺട്രോൾ ഇന്റർഫേസ് നിർമ്മിക്കുന്നതെന്ന് കരുതുക.
+
+അവസാനത്തോടെ, വിജയത്തിനായി ഉപയോക്താക്കളെ മാന്ദ്യമാക്കാതെ നയിക്കുന്ന ഒരു പൂർത്തിയായ ലോഗിൻ & രജിസ്ട്രേഷൻ സിസ്റ്റം വാലിഡേഷൻ സഹിതം ഉണ്ടാകുമെന്ന് ഉറപ്പുവരുത്താം.
+
+```mermaid
+mindmap
+ root((ഫോം വികസനം))
+ HTML Foundation
+ Semantic Elements
+ Input Types
+ Accessibility
+ Label Association
+ User Experience
+ Validation Feedback
+ Error Prevention
+ Loading States
+ Success Messaging
+ JavaScript Integration
+ Event Handling
+ AJAX Communication
+ Data Processing
+ Error Management
+ Validation Layers
+ HTML5 Validation
+ Client-side Logic
+ Server-side Security
+ Progressive Enhancement
+ Modern Patterns
+ Fetch API
+ Async/Await
+ Form Data API
+ Promise Handling
+```
+## മുൻകൂട്ടി ആവശ്യശേഷികൾ
+
+ഫോർമുകൾ നിർമ്മിക്കുന്നതിനു മുൻപ്, നിങ്ങൾക്ക് എല്ലാ ഘടകങ്ങളും ശരിയായി സജ്ജീകരിച്ചിട്ടുണ്ടോ എന്ന് ഉറപ്പാക്കാം. ഈ പാഠം മുൻ പാഠത്തിൽ നിന്ന് തുടരുമെങ്കിൽ, നിങ്ങൾ മുന്നോട്ട് പോയെങ്കിൽ ആദ്യം അടിസ്ഥാനങ്ങൾ പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
+
+### ആവശ്യമായ സജ്ജീകരണം
+
+| ഘടകം | സ്ഥിതി | വിവരണം |
+|-----------|--------|-------------|
+| [HTML ടെംപ്ലേറ്റുകൾ](../1-template-route/README.md) | ✅ ആവശ്യമായതം | നിങ്ങളുടെ അടിസ്ഥാന ബാങ്കിങ് ആപ്പ് ഘടന |
+| [Node.js](https://nodejs.org) | ✅ ആവശ്യമാണ് | സർവർക്ക് ജാവാസ്ക്രിപ്റ്റ് റൺടൈം |
+| [ബാങ്ക് API സർവർ](../api/README.md) | ✅ ആവശ്യമായത് | ഡാറ്റാ സ്റ്റോറേജിന് ബാക്ക്എൻഡ് സേവനം |
+
+> 💡 **ഡവലപ്പ്മെന്റ് ടിപ്പ്**: നിങ്ങൾ ഒരേസമയം രണ്ട് വേർതിരിച്ച സർവറുകൾ ഓടിക്കുന്നുണ്ട് – ഫ്രണ്ട് എന്റിനായി ഒരു ബാങ്കിങ് ആപ്പ്, ബാക്ക്എൻഡ് API-ക്കായി മറ്റുഒന്ന്. ഇത് യാഥാർത്ഥ്യവൽക്കരണ ഘടനയെ അനുകരിക്കുന്നു, ഫ്രണ്ട്എന്റ് & ബാക്ക്എൻഡ് സേവനങ്ങൾ സ്വതന്ത്രമായി പ്രവർത്തിക്കുമ്പോൾ.
+
+### സർവർ కాన്ഫിഗറേഷൻ
+
+**നിങ്ങളുടെ ഡവലപ്പ്മെന്റ് പരിസ്ഥിതി ഉൾപ്പെടുന്നത്:**
+- **ഫ്രണ്ട്എൻഡ് സർവർ**: നിങ്ങളുടെ ബാങ്കിങ് ആപ്പ് സേവനം (പൊതുയായി പോർട്ട് `3000`)
+- **ബാക്ക്എൻഡ് API സർവർ**: ഡാറ്റാ സംഭരണം & പുനരധിപതനം (പോർട്ട് `5000`)
+- **ഇരുവർഗവും** സങ്കടങ്ങളില്ലാതെ ഒരുപോലെ പ്രവർത്തിക്കാവുന്നവ
+
+**നിങ്ങളുടെ API കണക്ഷൻ ടെസ്റ്റ് ചെയ്യുക:**
+```bash
+curl http://localhost:5000/api
+# പ്രതീക്ഷിച്ച പ്രതിക്കരണം: "ബാംക് API v1.0.0"
+```
+
+**API പതിപ്പിന്റെ പ്രതികരണം കാണുകയാണെങ്കിൽ, നിങ്ങൾ മുന്നോട്ട് പോകാൻ തയ്യാറാണ്!**
+
+---
+
+## HTML ഫോമുകളും കൺറോളുകളും മനസിലാക്കുക
+
+HTML ഫോമുകൾ നിങ്ങളുടെ വെബ് ആപ്പുമായി ഉപയോക്താക്കൾ എങ്ങനെ സംവദിക്കുന്നു എന്നതാണ്. 19-ാം നൂറ്റാണ്ടിലെ ടെലിഗ്രാഫ് സംവിധാനത്തിന് സമാനമാണ് – ഉപയോക്തൃ ഉദ്ദേശവും ആപ്പ് പ്രതികരണവും തമ്മിലുള്ള ആശയവിനിമയ പ്രോട്ടോക്കോൾ. ചിന്താപൂർവം രൂപകല്പ്പന ചെയ്താൽ, പിഴവുകൾ പിടികൂടുന്നു, ഇൻപുട്ട് ഫോർമാറ്റിംഗ് നയിക്കുന്നു, സഹായക നിർദേശങ്ങൾ നൽകുന്നു.
+
+ആധുനിക ഫോമുകൾ അടിസ്ഥാന ടെക്സ്റ്റ് ഇൻപുട്ടുകളേക്കാൾ സങ്കീർണമാണ്. HTML5 വൈശിഷ്ട്യമർന്ന ഇൻപുട്ട് തരം പരിചയപ്പെടുത്തിയത് - ഇമെയിൽ വാലിഡേഷൻ, നമ്പർ ഫോർമാറ്റിംഗ്, തീയതി തിരഞ്ഞെടുപ്പു തുടങ്ങി സ്വതന്ത്രമായി കൈകാര്യം ചെയ്യുന്നു. ഈ വികസനങ്ങൾ ആക്സസിബിലിറ്റിക്കും മൊബൈൽ ഉപയോഗ അനുഭവങ്ങൾക്കും ഗുണകരമാണ്.
+
+### അനിവാര്യമായ ഫോർം ഘടകങ്ങൾ
+
+**ഓരോ ഫോമിനും ആവശ്യമായ കെട്ടുകെട്ട് ഘടകങ്ങൾ:**
+
+```html
+
+
+```
+
+**ഈ കോഡ് ചെയ്യുന്നത്:**
+- **ഒരിക്കൽപ്പെടുത്തുന്നു** പ്രത്യേക ഐഡിയിൽ ഫോർം കണ്ടെയ്നർ
+- **വ്യക്തമാക്കുന്നു** ഡാറ്റ സമർപ്പിക്കാൻ HTTP մեթഡ്
+- **ബന്ധിപ്പിക്കുന്നു** ലേബലുകൾ ഇൻപുട്ടുകൾക്കൊപ്പം ആക്സസിബിലിറ്റിക്ക്
+- **നിർവഹിക്കുന്നു** ഫോർം പ്രോസസ്സ് ചെയ്യാനുള്ള സബ്മിറ്റ് ബട്ടൺ
+
+### ആധുനിക ഇൻപുട്ട് തരം & കഴിവുകൾ
+
+| ഇൻപുട്ട് തരം | ഉപയോഗം | ഉദാഹരണം |
+|------------|---------|---------------|
+| `text` | പൊതുവായ ടെക്സ്റ്റ് എൻട്രി | `Save Data
+Clear Form
+Custom Action
+```
+
+**ബട്ടൺ തരം ചെയ്യുന്നത്:**
+- **സബ്മിറ്റ് ബട്ടണുകൾ**: ഫോർം സമർപ്പനം ട്രിഗർ ചെയ്യുക, ഡാറ്റ എൻഡ്പോയിന്റിലേക്ക് അയയ്ക്കുക
+- **റിസെറ്റ് ബട്ടണുകൾ**: എല്ലാ ഫീൽഡുകളും ആദ്യം നിലയിലേക്ക് വീണ്ടെടുക്കുക
+- **രേദി ബട്ടണുകളും**: രീതി ഇല്ലാതെ പ്രവർത്തിച്ച്കാരണം കസ്റ്റം ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമാണ്
+
+> ⚠️ **പ്രധാന കുറിപ്പ്**: `
+ Bank App
+
+
+```
+
+**ഇവിടെ സംഭവിക്കുന്നത്:**
+- **ഘടിപ്പിക്കുന്നു** സെമാന്റിക് HTML5 ഘടകങ്ങളെ കൈകാര്യം ചെയ്ത് ഫോർം അടിച്ചതായി
+- **ഗ്രൂപ്പുചെയ്യുന്നു** പ്രസക്തമായ ഘടകങ്ങൾ `div` കണ്ടെയ്നർ ക്ലാസ്സുകൾ ഉപയോഗിച്ച്
+- **ബന്ധിപ്പിക്കുന്നു** ലേബലുകളും ഇൻപുട്ടുകളും `for` & `id` ഉപയോഗിച്ച്
+- **ചേർക്കുന്നു** ആധുനിക ഗുണങ്ങൾ പോലെ `autocomplete`, `placeholder` മെച്ചപ്പെട്ട UX നു
+- **ഉള്ളടക്കുന്നു** `novalidate` ബ്രൗസർ ഡിഫോൾട്ട് മാറ്റി ജാവാസ്ക്രിപ്റ്റ് വാ്ലിഡേഷൻ നടത്താൻ
+
+### ശരിയായ ലേബലുകളുടെ ശക്തി
+
+**ആധുനിക വെബ് വികസനത്തിൽ ലേബലുകൾ എന്തുകൊണ്ട് പ്രധാനം:**
+
+```mermaid
+graph TD
+ A[ലേബൽ ഘടകം] --> B[സ്ക്രീൻ റീഡർ പിന്തുണ]
+ A --> C[ക്ലിക്ക് ലക്ഷ്യം വിപുലീകരണം]
+ A --> D[ഫോം പരിശ്രമം]
+ A --> E[എസ്ഇഒ ഗുണങ്ങൾ]
+
+ B --> F[എല്ലാ ഉപയോക്താക്കൾക്കും ലഭ്യമായ]
+ C --> G[മികച്ച മൊബൈൽ അനുഭവം]
+ D --> H[വ്യക്തമായ പിഴവ് സന്ദേശം]
+ E --> I[മികച്ച തിരച്ചിൽ റാങ്കിംഗ്]
+```
+**ശ്രദ്ധയോടെ ലേബലുകൾ നൽകുന്നത് ചെയ്യുന്നത്:**
+- **സ്ക്രീൻ റീഡറുകൾക്ക്** ഫോർം ഫീൽഡുകൾ മികച്ച രീതിയിൽ പ്രഖ്യാപിക്കാൻ
+- **ക്ലിക്കു പരിധി** വർദ്ധിപ്പിക്കുന്നു (ലേബൽ ക്ലിക്കുചെയ്യുമ്പോൾ ഇൻപുട്ടിൽ ഫോകസ്)
+- **മൊബൈൽ ഉപയോഗം മെച്ചപ്പെടുത്തി** കൂടുതൽ ടച്ച് ടാർഗെറ്റുകൾ നൽകുന്നു
+- **ഫോർം വാലിഡേഷൻ** സൗകര്യപ്രദം പിഴവ് സന്ദേശങ്ങളോടൊപ്പം
+- **SEO മെച്ചപ്പെടുത്തുന്നു** ഫോർം ഘടകങ്ങളിൽ സെമാന്റിക് അർത്ഥം നൽകിയും
+
+> 🎯 **ആക്സസിബിലിറ്റി ലക്ഷ്യം**: എല്ലാ ഫോർം ഇൻപുട്ടിനും അനുബന്ധമായ ലേബൽ വേണം. ഈ ലളിതമായ പാടവ് എല്ലാ ഉപയോക്താക്കൾക്കും, വിവിധ കഴിവുകൾ ഉള്ളവർക്കും നിങ്ങളുടെ ഫോമുകൾ പ്രയോജനപ്രദമാക്കും, അനുഭവം മെച്ചപ്പെടുത്തും.
+
+### രജിസ്ട്രേഷൻ ഫോർം നിർമ്മാണം
+
+പൂർണ്ണ ഉപയോക്തൃ അക്കൗണ്ട് സൃഷ്ടിക്കുവാൻ രജിസ്ട്രേഷൻ ഫോർത്തിൽ കൂടുതൽ വിശദ വിവരങ്ങൾ ആവശ്യമാണ്. മുഖ്യ ആധുനിക HTML5 സവിശേഷതകളും വളർത്തിയ ആക്സസിബിലിറ്റി സവിശേഷതകളും ഉൾപ്പെടുത്താം.
+
+```html
+Register
+
+```
+
+**ഇവിടെ ചെയ്തു:**
+- **ഫീൽഡുകൾ** ഓരോന്നും കണ്ടെയ്നർ ഡിവുകളിൽ ക്രമീകരിച്ച് മെച്ചപ്പെട്ട ലേ ഔട്ടിനായി
+- **ഉപയോഗിച്ചു** അനുയോജ്യമായ `autocomplete` ബ്രൗസർ ഓട്ടോഫിൽ പിന്തുണയ്ക്ക്
+- **ഉൾപ്പെടുത്തിയ** ഉപയോക്തൃ ഇൻപുട്ട് നയിക്കാൻ ഉപകാരപ്രദമായ പ്ലേര്ഹോൾഡർ ടെക്സ്റ്റ്
+- **നൽകി** യുക്തിപരമായ ഡീഫോൾറ്റ് മൂല്യം `value` ഉപയോഗിച്ച്
+- **പ്രയോഗിച്ചു** വാലിഡേഷൻ പ്രവർത്തനങ്ങൾ `required`, `maxlength`, `min`
+- **ഉപയോഗിച്ചു** ബേലൻസ് ഫീൽഡിനായ `type="number"` ഇൽ ഡെസിമൽ പിന്തുണ കൂടെ
+
+### ഇൻപുട്ട് തരം & പ്രവർത്തനം വിശകലനം
+
+**ആധുനിക ഇൻപുട്ട് തരം കൂടുതൽ കഴിവുകൾ നൽകുന്നു:**
+
+| സവിശേഷത | പ്രയോജനം | ഉദാഹരണം |
+|---------|---------|----------|
+| `type="number"` | മൊബൈൽ സംഖ്യ കീബോർഡ് | ലളിതമായ ബാലൻസ് ഇൻപുട്ടിലേക്ക് |
+| `step="0.01"` | ഡെസിമൽ നിർണ്ണയം | കറൻസിയിൽ സെന്റുകൾ അനുവദിക്കുന്നു |
+| `autocomplete` | ബ്രൗസർ ഓട്ടോഫിൽ | ഫോമുകൾ വേഗത്തിൽ പൂരിപ്പിക്കാൻ |
+| `placeholder` | പ്രസ്താവനാത്മക സൂചനകൾ | ഉപയോക്താവിന്റെ പ്രതീക്ഷകൾ നയിക്കുന്നു |
+
+> 🎯 **ആക്സസിബിലിറ്റി വെല്ലുവിളി**: ഫോമകൾ കീബോർഡ് മാത്രം ഉപയോഗിച്ച് സംവഹിക്കാൻ ശ്രമിക്കുക! `Tab` ഉപയോഗിക്കുക ഫീൽഡുകൾക്കിടയിൽ പോകാൻ, `Space` ബോക്സുകൾ പരിശോധിക്കാൻ, `Enter` സമർപ്പിക്കാൻ. ഇത് സ്ക്രീൻ റീഡർ ഉപയോക്താക്കൾ ഫോമുകൾക്ക് എങ്ങനെ സമീപിക്കുന്നു എന്ന് മനസ്സിലാക്കാൻ സഹായിക്കും.
+
+### 🔄 **ഫലിതപരമായ പരിശോധന**
+**ഫോം അടിസ്ഥാന سمجھല്:**
+ജാവാസ്ക്രിപ്റ്റ് പ്രവർത്തിപ്പിക്കാതെ മുൻപ് ഉറപ്പാക്കുക:
+- ✅ സെമാന്റിക് HTML ആക്സസിബിള് ഫോമുകൾ സൃഷ്ടിക്കുന്നു
+- ✅ ഇൻപുട്ട് തരം മൊബൈൽ കീബോർഡ് & വാലിഡേഷന് പ്രാധാന്യം
+- ✅ ലേബലുകളും ഫോർം കൺട്രോളുകളും ബന്ധം
+- ✅ ഫോർം അറ്റ്രിബ്യൂട്ടുകൾ ബ്രൗസർ ഡിഫോൾട്ട് പ്രവർത്തനത്തെ എങ്ങനെ ബാധിക്കുന്നു
+
+**ത്വരിത സ്വയം പരിശോദനം**: ജാവാസ്ക്രിപ്റ്റ് ഇല്ലാതെ ഫോർം സമർപ്പിച്ചാൽ എന്ത് സംഭവിക്കും?
+*ഉത്തരം: ബ്രൗസർ ഡിഫോൾട്ട് സമർപ്പണം നടത്തും, സാധാരണയായി ആക്ഷൻ URL-ൽ റീഡയറക്ട് ചെയ്യും*
+
+**HTML5 ഫോർം ഗുണങ്ങൾ**:
+- **അകമ്പടി വാലിഡേഷൻ**: സ്വതന്ത്ര ഇമെയിൽ & നമ്പർ ഫോർമാറ്റ് പരിശോധന
+- **മൊബൈൽ സൗഹൃദം**: അനുസൃത കീബോർഡുകൾ
+- **ആക്സസിബിലിറ്റി**: സ്ക്രീൻ റീഡർ പിന്തുണ & കീബോർഡ് നയനം
+- **പ്രോഗ്രസീവ് എൻഹാൻസ്മെന്റ്**: ജാവാസ്ക്രിപ്റ്റ് ഇല്ലാതെ പോലും പ്രവർത്തിപ്പിക്കാൻ കഴിയുന്നത്
+
+## ഫോർം സമർപ്പിക്കൽ രീതികൾ മനസിലാക്കുക
+
+ആയിരിക്കും അടുത്തുള്ളപ്പോൾ, അപേക്ഷ ഫോർം പൂരിപ്പിച്ച് സബ്മിറ്റ് ചെയ്തപ്പോൾ, ആ ഡാറ്റ എവിടെ പോകുന്നു – സാധാരണയായി ഒരു സർവറിലേക്ക് പോകും, അത് ഡാറ്റയെ സംരക്ഷിക്കുന്നു. ഇത് വിവിധ രീതികളിൽ നടക്കാം, ശരിയായ ഒരു വഴిని തിരഞ്ഞെടുക്കുന്നത് ഭാവിയിൽ സുഖകരമാക്കും.
+
+സബ്മിറ്റ് ബട്ടൺ ഞെക്കുമ്പോൾ എന്ത് സംഭവിക്കുന്നു എന്ന് നോക്കാം.
+
+### ഡിഫോൾട്ട് ഫോർം പ്രവർത്തനം
+
+ആദ്യം, അടിസ്ഥാന ഫോർം സമർപ്പണം എന്ത് സംഭവിക്കുന്നു എന്നും നോക്കുക:
+
+**നിങ്ങളുടെ നിലവിലെ ഫോമുകൾ പരീക്ഷിക്കുക:**
+1. നിങ്ങളുടെ ഫോമിൽ *Register* ബട്ടൺ അമർത്തുക
+2. ബ്രൗസറിന്റെ അഡ്രസ് ബാറിലെ മാറ്റം ശ്രദ്ധിക്കുക
+3. പേജ് റീലോഡ് ആകുകയും URL-ൽ ഡാറ്റ കാണപ്പെടുകയും ചെയ്യുന്നുവെന്ന് ശ്രദ്ധിക്കുക
+
+
+
+### HTTP മെഥഡുകൾ താരതമ്യം
+
+```mermaid
+graph TD
+ A[ഫോം സമർപ്പിക്കൽ] --> B{HTTP രീതി}
+ B -->|GET| C[URL-ൽ ഡാറ്റ]
+ B -->|POST| D[അർജിത ദേഹം ഡാറ്റ]
+
+ C --> E[അഡ്രസ് ബാറിൽ കാണപ്പെടുന്നു]
+ C --> F[പരിമിത ഡാറ്റ വലുപ്പം]
+ C --> G[ബുക്ക്മാർക്കുചെയ്യാവുന്നത്]
+
+ D --> H[URL-ൽ നിന്ന് മറച്ചുകാഷ്]
+ D --> I[വലിയ ഡാറ്റ ശേഷി]
+ D --> J[കൂടുതൽ സുരക്ഷിതം]
+```
+**വ്യത്യാസങ്ങൾ മനസ്സിലാക്കുക:**
+
+| മെഥഡ് | ഉപയോഗം | ഡാറ്റ സ്ഥലം | സുരക്ഷാ നില | വലിപ്പ പരിധി |
+|--------|----------|---------------|----------------|-------------|
+| `GET` | തിരയൽ, ഫിൽറ്ററുകൾ | URL പാരാമീറ്ററുകൾ | താഴ്ന്നത് (കാണാവുന്നത്) | ~2000 അക്ഷരങ്ങൾ |
+| `POST` | ഉപയോക്തൃ അക്കൗണ്ടുകൾ, സംവേദനാത്മക ഡാറ്റ | അഭ്യർത്ഥന ശരീരം | ഉയർന്നത് (മറഞ്ഞത്) | യഥാർത്ഥപരിധിയില്ല |
+
+**പ്രധാന വ്യത്യാസങ്ങൾ:**
+- **GET**: ഫോർം ഡാറ്റ URL ക്വറി പാരാമീറ്ററുകളായി ചേർക്കുന്നു (തിരയൽ പ്രക്രിയകൾക്ക് അനുയോജ്യം)
+- **POST**: ഡാറ്റ അന്വേഷണം ശരീരത്തിലേക്ക് ഉൾക്കൊള്ളുന്നു (സർവേദനാത്മക വിവരങ്ങൾക്ക് പ്രധാനമാണ്)
+- **GET-ന് പരിമിതികൾ**: വലിപ്പ പരിധി, കാഴ്ച, ബ്രൗസർ ചരിത്രം
+- **POST-ന് ആനുകൂല്യങ്ങൾ**: വലിയ ഡാറ്റ കൈകാര്യം ചെയ്യൽ, സ്വകാര്യത, ഫയൽ അപ്ലോഡ് പിന്തുണ
+
+> 💡 **മിക്കവ് നല്ലതാകേണം**: തിരയൽ ഫോമുകൾക്ക് GET ഉപയോഗിക്കുക (ഡാറ്റ ഉയർത്തൽ), രജിസ്ട്രേഷൻ, ലോഗിൻ തുടങ്ങിയതിനായി POST ഉപയോഗിക്കുക.
+
+### ഫോർം സമർപ്പിക്കൽ ക്രമീകരിക്കൽ
+
+നിങ്ങളുടെ രജിസ്ട്രേഷൻ ഫോർം POST മെഥഡ് ഉപയോഗിച്ച് ബാക്ക്എൻഡ് API-യുമായി ശരിയായി ആശയവിനിമയം നടത്തും രീതിയിൽ ക്രമീകരിക്കാം:
+
+```html
+
+```
+
+**വർദ്ധിപ്പിച്ച സാധുത പരിശോധനിന്റെ മനസ്സിലാക്കൽ:**
+- **ആവശ്യമായ ഫീൽഡ് സൂചനകളുമായി** സംയോജിപ്പിക്കുന്നു
+- **ഫോർമാറ്റ് സാധുതക്കായി** `pattern` ആട്രിബ്യൂട്ടുകൾ ഉൾപ്പെടുത്തുന്നു
+- **ആക്സസിബിലിറ്റി, ടൂൾടിപ്പുകൾക്കായി** `title` ആട്രിബ്യൂട്ടുകൾ നൽകുന്നു
+- **ഉപയോക്തൃ ഇൻപുട്ട് വഴി പിന്തുണയ്ക്കാൻ** സഹായക വാചകം ചേർക്കുന്നു
+- **മികച്ച ആക്സസിബിലിറ്റിക്ക്** സെമാന്റിക് HTML ഘടന ഉപയോഗിക്കുന്നു
+
+### ഉയർന്ന നിലവാരത്തിലുള്ള സാധുത പരിശോധന നിയമങ്ങൾ
+
+**പ്രത്യേകമുള്ള സാധുത നിയമങ്ങൾ എന്തു നടത്തുന്നു:**
+
+| ഫീൽഡ് | സാധുത നിയമങ്ങൾ | ഉപയോക്തൃ ഗുണം |
+|-------|------------------|--------------|
+| യൂസർനെയിം | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | ശരിയായ, പ്രത്യേകം തിരിച്ചറിയാവുന്ന ഐഡന്റിഫയർ ഉറപ്പാക്കുന്നു |
+| കറൻസി | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | സാധാരണ കറൻസി ചിഹ്നങ്ങൾ സ്വീകരിക്കുന്നു |
+| ബാലൻസ് | `min="0"`, `step="0.01"`, `type="number"` | നെഗറ്റീവ് ബാലൻസ് തടയുന്നു |
+| വിവരണം | `maxlength="100"` | യുക്തമായ നീള പരിധി |
+
+### സാധുത പരിശോധന പെരുമാറ്റം പരീക്ഷിക്കുക
+
+**പരീക്ഷണങ്ങൾക്ക്:**
+1. **അപൂർണ്ണ ആവശ്യമായ ഫീൽഡുകൾ ഉള്ള രൂപം സബ്മിറ്റ് ചെയ്യു**
+2. **3 അക്ഷരങ്ങൾക്കു താഴെയുള്ള യൂസർനെയിം നൽകുക**
+3. **യൂസർനെയിം ഫീൽഡിൽ പ്രത്യേക ചിഹ്നങ്ങൾ ഉപയോഗിക്കാൻ ശ്രമിക്കുക**
+4. **നെഗറ്റീവ് ബാലൻസ് നൽകുക**
+
+
+
+**നിങ്ങൾ കാണുന്നതെന്താണെന്ന്:**
+- **ബ്രൗസർ സ്വതന്ത്ര സാധുത സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുന്നു**
+- **`:valid` കോളും `:invalid` അധിഷ്ഠിതമായ സ്റ്റൈലിംഗ് മാറ്റങ്ങൾ**
+- **സകല സാധുതകൾ പാസ്സാകുന്നതുവരെ ഫോർം സബ്മിഷൻ തടയുന്നു**
+- **സ്വയം ഫോക്കസ് ആദ്യം തെറ്റായ ഫീൽഡിലേയ്ക്ക് മാറുന്നു**
+
+### ക്ലയന്റ്-സൈഡ് vs സെർവർ-സൈഡ് സാധുത പരിശോധന
+
+```mermaid
+graph LR
+ A[ക്ലയന്റ്-സൈഡ് වලിഡേഷന്] --> B[തത്സമയ ഫീഡ്ബാക്ക്]
+ A --> C[ഉത്തമ UX]
+ A --> D[സര്വര് ലോഡ് കുറവ്]
+
+ E[സര്വര്-സൈഡ് വെരിഫിക്കേഷന്] --> F[സുരക്ഷ]
+ E --> G[ഡേറ്റാ സമഗ്രത]
+ E --> H[ബിസിനസ് നിയമങ്ങള്]
+
+ A -.-> I[രണ്ടും ആവശ്യമാണ്]
+ E -.-> I
+```
+**രണ്ടു പാളികളും ആവശ്യമായ കാരണം:**
+- **ക്ലയന്റ്-സൈഡ് സാധുത പരിശോധന**: ഉടൻ പ്രതികരണം നൽകുന്നു, ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നു
+- **സെർവർ-സൈഡ് സാധുത പരിശോധന**: സുരക്ഷ ഉറപ്പാക്കുകയും സങ്കീർണ്ണ ബിസിനസ് നിയമങ്ങൾ കൈകാര്യം ചെയ്യുകയും ചെയ്യുന്നു
+- **കൂട്ടിച്ചേർത്ത സമീപനം**: ശക്തമായ, ഉപയോക്തൃ സൗഹൃദമുള്ള, സുരക്ഷിത ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കുന്നു
+- **പ്രോഗ്രസീവ് എൻഹാൻസ്മെന്റ്**: ജാവാസ്ക്രിപ്റ്റ് അപ്രാപ്യമാകുമ്പോഴും പ്രവർത്തിക്കുന്നു
+
+> 🛡️ **സുരക്ഷാ ഓർമപ്പെടുത്തൽ**: ക്ലയന്റ്-സൈഡ് സാധുത പരിശോധനം മാത്രം എപ്പോഴും വിശ്വസിക്കരുത്! ഒറ്റപ്പാടുള്ളർ ഈ പരിശോധനകൾ മറികടക്കാമെന്ന് അറിയണം, അക്കാര്യത്തിൽ സുരക്ഷയ്ക്ക് സെർവർ-പക്ഷം സാധുത പരിശോധന നിർണ്ണായകം.
+
+### ⚡ **അടുത്ത 5 മിനിറ്റിൽ നിങ്ങൾ ചെയ്യാവുന്നത്**
+- [ ] നിങ്ങളുടെ ഫോം തെറ്റായ ഡാറ്റയോടെ ടെസ്റ്റ് ചെയ്ത് സാധുത സന്ദേശങ്ങൾ കണ്ടു നോക്കുക
+- [ ] ജാവാസ്ക്രിപ്റ്റ് അപ്രാപ്യമാക്കി ഫോം സബ്മിറ്റ് ചെയ്ത് HTML5 സാധുത പരിശോധന കാണുക
+- [ ] ബ്രൗസർ ഡെവ് ടൂൾസ് തുറന്ന് സെർവറിലേക്ക് പോകുന്ന ഫോർം ഡാറ്റ പരിശോധിക്കുക
+- [ ] വ്യത്യസ്ത ഇൻപുട്ട് തരങ്ങൾ പരീക്ഷിച്ച് മൊബൈൽ കീബോർഡ് മാറ്റങ്ങൾ കാണുക
+
+### 🎯 **ഈ മണിക്കൂറിൽ നിങ്ങൾ ചെയ്യാനാകുന്നത്**
+- [ ] പാഠശേഷം ക്വിസ് പൂർത്തിയാക്കി ഫോർം കൈകാര്യം സമ്പ്രദായങ്ങൾ മനസ്സിലാക്കുക
+- [ ] യഥാർത്ഥ സമയ ഫീഡ്ബാക്ക് ഉള്ള സമഗ്ര സാധുത പരിശോധന പരീക്ഷിക്കുക
+- [ ] CSS സ്റ്റൈലിംഗ് ചേർത്ത് പ്രൊഫഷണൽ രൂപത്തിലുള്ള ഫോമുകൾ സൃഷ്ടിക്കുക
+- [ ] ഡ്യൂപ്ലിക്കേറ്റ് യൂസർനെയിംകൾക്കും സെർവർ പിശകുകൾക്കും തെറ്റ് കൈകാര്യനം ചേർക്കുക
+- [ ] പാസ്സ്വേർഡ് സ്ഥിരീകരണ ഫീൽഡുകൾ ചേർക്കുകയും പൊരുത്തപ്പെടുന്ന പരിശോധന നടത്തുക
+
+### 📅 **നിങ്ങളുടെ ആഴ്ച ലംഘിച്ച ഫോർം മാസ്റ്ററി യാത്ര**
+- [ ] പ്രഗത്ഭതയേറിയ ഫീച്ചറുകൾ ഉള്ള പൂർണ്ണമായ ബാങ്കിംഗ് ആപ്പ് നിർമ്മിക്കുക
+- [ ] പ്രൊഫൈൽ ചിത്രങ്ങൾ അല്ലെങ്കിൽ രേഖകൾ അപ്ലോഡ് ചെയ്യാനുള്ള പ്രവർത്തനങ്ങൾ നടപ്പാക്കുക
+- [ ] പുരോഗതി സൂചികകളും സംസ്ഥാന നിയന്ത്രണവും ഉള്ള മൾട്ടി-സ്റ്റെപ്പ് ഫോമുകൾ ചേർക്കുക
+- [ ] ഉപയോക്തൃ തിരഞ്ഞെടുപ്പിനെ അടിസ്ഥാനമാക്കി രൂപങ്ങൾ പ്രതിരൂപിപ്പിക്കുന്ന ഡൈനാമിക് ഫോമുകൾ സൃഷ്ടിക്കുക
+- [ ] മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവത്തിനായി ഫോർം ഓട്ടോസേവ്, റിക്കവറി സംവിധാനം നടപ്പാക്കുക
+- [ ] ഇമെയിൽ സ്ഥിരീകരണം, ഫോൺ നമ്പർ ഫോർമാറ്റിംഗ് പോലുള്ള ഉയർന്ന ശരിതപ്പുള്ള സാധുത ചേർക്കുക
+
+### 🌟 **നിങ്ങളുടെ മാസം നീണ്ട ഫ്രണ്ട്എന്റ് വികസന മാസ്റ്ററി**
+- [ ] നിലവാരുള്ള തർക്കങ്ങൾ, പ്രവാഹങ്ങൾ, ലോജിക്كلاتുമായി സങ്കീർണ്ണ ഫോർം ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുക
+- [ ] വേഗത്തിലുള്ള വികസനത്തിനായി ഫോർം ലൈബ്രറികളും ഫ്രെയിംവർക്കുകളും പഠിക്കുക
+- [ ] ആക്സസിബിലിറ്റി മാർഗനിർദേശങ്ങളും ഉൾക്കൊള്ളുന്ന ഡിസൈൻ സിദ്ധാന്തങ്ങളും മികവുറ്റ രീതിയിൽ അഭ്യസിക്കുക
+- [ ] ആഗോള ഫോമുകൾക്കായി അന്തർദേശീയവൽക്കരണം, കമ്മ്യൂണിക്കേഷൻ പാടവം വരുത്തുക
+- [ ] പുനരുപയോഗയോഗ്യമായ ഫോർം ഘടക ലൈബ്രറികൾ, ഡിസൈൻ സിസ്റ്റങ്ങൾ സൃഷ്ടിക്കുക
+- [ ] ഓപ്പൺ സോഴ്സ് ഫോർം പ്രോജക്റ്റുകളിൽ സംഭാവന നൽകി മികച്ച പ്രവൃത്തികളുമായി പങ്കുവെക്കുക
+
+## 🎯 നിങ്ങളുടെ ഫോർം ഡവലപ്പ്മെന്റ് മാസ്റ്ററി ടൈംലൈൻ
+
+```mermaid
+timeline
+ title ഫോം വികസനവും ഉപയോക്തൃ അനുഭവ പഠന പുരോഗതിയും
+
+ section HTML അടിസ്ഥാനങ്ങൾ (15 മിനിറ്റ്)
+ സെമാന്റിക് ഫോമുകൾ: ഫോം ഘടകങ്ങൾ
+ : ഇൻപുട്ട് തരം
+ : ലേബലുകൾ и ആക്സസിബിലിറ്റി
+ : പ്രോഗ്രസീവ് എൻഹാൻസ്മെന്റ്
+
+ section ജാവാസ്ക്രിപ്റ്റ് ഇൻറഗ്രേഷൻ (25 മിനിറ്റ്)
+ ഇവന്റ് ഹാൻഡ്ലിംഗ്: ഫോം സമർപ്പണം
+ : ഡാറ്റ ശേഖരണം
+ : AJAX കമ്മ്യൂണിക്കേഷൻ
+ : Async/await പാറ്റേണുകൾ
+
+ section വാലിഡേഷൻ സിസ്റ്റങ്ങൾ (35 മിനിറ്റ്)
+ മൾട്ടി-ലെയർ സുരക്ഷ: HTML5 വാലിഡേഷൻ
+ : ക്ലയന്റ്-സൈഡ് ലോഗിക്
+ : സര്വര്-സൈഡ് സ്ഥിരീകരണം
+ : പിശക് കൈകാര്യംചെയ്യൽ
+
+ section ഉപയോക്തൃ അനുഭവം (45 മിനിറ്റ്)
+ ഇന്റർഫേസ് പൊളിഷ്: ലോഡിംഗ് സ്റ്റേറ്റുകൾ
+ : വിജയം സന്ദേശം
+ : പിശക് ഗതിഗതി
+ : ആക്സസിബിലിറ്റി സവിശേഷതകൾ
+
+ section അഡ്വാൻസ്ഡ് പാറ്റേണുകൾ (1 ആഴ്ച)
+ പ്രൊഫഷണൽ ഫോമുകൾ: ഡയനാമിക് വാലിഡേഷൻ
+ : മൾട്ടി-സ്റ്റപ്പ് വർക്ക്ഫ്ലോകൾ
+ : ഫയൽ അപ്ലോഡുകൾ
+ : റിയൽ-ടൈം ഫീഡ്ബാക്ക്
+
+ section എന്റർപ്രൈസ് പ്രാവീണ്യം (1 മാസം)
+ പ്രൊഡക്ഷൻ അപ്ലിക്കേഷനുകൾ: ഫോം ലൈബ്രറികൾ
+ : ടെസ്റ്റിങ് നയങ്ങൾ
+ : പ്രകടനം മെച്ചപ്പെടുത്തൽ
+ : സുരക്ഷ മികച്ച പ്രാക്ടിസുകൾ
+```
+### 🛠️ നിങ്ങളുടെ ഫോർം ഡവലപ്പ്മെന്റ് ടൂൾകിറ്റ് സംഗ്രഹം
+
+ഈ പാഠം പൂർത്തിയാക്കിയാൽ നിങ്ങൾ ഇപ്പോൾ കൈപ്പറ്റിയിരിക്കുന്നു:
+- **HTML5 ഫോമുകൾ**: സെമാന്റ്റിക് ഘടന, ഇൻപുട്ട് തരം, ആക്സസിബിലിറ്റി ഫീച്ചറുകൾ
+- **ജാവാസ്ക്രിപ്റ്റ് ഫോർം കൈകാര്യം**: ഇവന്റ് മാനേജ്മെന്റ്, ഡാറ്റ ശേഖരണം, AJAX സംവാദം
+- **സാധുത അടിസ്ഥാനഘടന**: സുരക്ഷക്കും ഉപയോക്തൃ അനുഭവത്തിനും മൾട്ടി-ലെവൽ സാധുത പരിശോധന
+- **അസിങ്ക്രണസ് പ്രോഗ്രാമിംഗ്**: ആധുനിക Fetch API, async/await പാറ്റേണുകൾ
+- **പിശക് നിയന്ത്രണം**: സമഗ്രമായ പിശക് കൈകാര്യം, ഉപയോക്തൃ ഫീഡ്ബാക്ക് സിസ്റ്റങ്ങൾ
+- **ഉപയോക്തൃ അനുഭവ ഡിസൈൻ**: ലോഡിംഗ് ഘട്ടങ്ങൾ, വിജയ/പിശക് സന്ദേശങ്ങൾ, പിശക് പുനരുദ്ധാരം
+- **പ്രോഗ്രസീവ് എൻഹാൻസ്മെന്റ്**: എല്ലു ബ്രൗസറുകളിലും സജ്ജമായ ഫോമുകൾ
+
+**യഥാർത്ഥ ലോക ആപ്ലിക്കേഷനുകൾ**: നിങ്ങളുടെ ഫോർം ഡവലപ്പ്മെന്റ് കഴിവുകൾ നേരിട്ട് ബാധിക്കുന്നു:
+- **ഇ-കൊമേഴ്സ് ആപ്ലിക്കേഷനുകൾ**: ചതുപ്പുചെയ്യൽ പ്രക്രിയകൾ, അക്കൗണ്ട് രജിസ്ട്രേഷൻ, പേയ്മെന്റ് ഫോമുകൾ
+- **എന്റർപ്രൈസ് സോഫ്റ്റ്വെയർ**: ഡാറ്റ എൻട്രി സിസ്റ്റങ്ങൾ, റിപ്പോർട്ടിംഗ് ഇന്റർഫേസുകൾ, പ്രവാഹ ആപ്ലിക്കേഷനുകൾ
+- **കണ്ടന്റ് മാനേജ്മെന്റ്**: പ്രസിദ്ധീകരണ പ്ലാറ്റ്ഫോമുകൾ, ഉപയോക്തൃ സൃഷ്ടിച്ച ഉള്ളടക്കം, അഡ്മിനിസ്ട്രേറ്റീവ് ഇന്റർഫേസുകൾ
+- **ഫിനാൻഷ്യൽ ആപ്ലിക്കേഷനുകൾ**: ബാങ്കിംഗ് ഇന്ററൈസുകൾ, നിക്ഷേപ പ്ലാറ്റ്ഫോമുകൾ, ഇടപാട് സിസ്റ്റങ്ങൾ
+- **ഹെൽത്ത്കെയർ സിസ്റ്റങ്ങൾ**: രോഗി പോർട്ടലുകൾ, അപ്പോയിൻമെന്റ് ഷെഡ്യൂളിംഗ്, മെഡിക്കൽ രേഖ ഫോമുകൾ
+- **വിദ്യാഭ്യാസ പ്ലാറ്റ്ഫോമുകൾ**: കോഴ്സ് രജിസ്ട്രേഷൻ, ആസെസ്മെന്റ് ടൂൾസ്, ലേണിംഗ് മാനേജ്മെന്റ്
+
+**പ്രൊഫഷണൽ അഭിനിവേശങ്ങൾ**: നിങ്ങൾക്കു കഴിയും:
+- **സൗകര്യമുള്ള ഫോമുകൾ ഡിസൈൻ ചെയ്യുക** - വൈകല്യം ഉള്ളവ ഉൾപ്പെടെ എല്ലാ ഉപയോക്താക്കൾക്കും ഉപയോഗപ്രദം
+- **സുരക്ഷിതമായ ഫോർം സാധുത നടപ്പാക്കുക** - ഡാറ്റ അബദ്ധം, സുരക്ഷാ ദുർബലതകൾ തടയുന്നു
+- **പ്രതികരിക്കുന്ന UI സൃഷ്ടിക്കുക** - വ്യക്തമായ ഫീഡ്ബാക്കും മാർഗനിർദ്ദേശവും നൽകുന്നു
+- **ബ്രൗസർ ഡെവലപ്പർ ടൂളുകളും നെറ്റ്വർക്ക് വിശകലനവും ഉപയോഗിച്ച് സങ്കീർണ്ണ ഫോർം ഇടപെടലുകൾ ഡീബഗ് ചെയ്യുക**
+- **ക്ഷമതയുള്ള ഡാറ്റ കൈകാര്യം, സാധുത നിരീക്ഷണ തന്ത്രങ്ങളെക്കായി ഫോർം പ്രകടനം പ്രവര്ത്തനക്ഷമമാക്കുക**
+
+**ഫ്രണ്ട്എന്റ് ഡവലപ്പ്മെന്റ് ആശയങ്ങൾ കൈവിട്ടു:**
+- **ഇവന്റ്-ഡ്രിവൻ ഘടന**: ഉപയോക്തൃ ഇടപാട് കൈകാര്യം, പ്രതികരണം സംവിധാനങ്ങൾ
+- **അസിന്ക്രോണസ് പ്രോഗ്രാമിംഗ്**: ബ്ലോക്ക് ചെയ്യാത്ത സെർവർ സംവാദവും പിശക് കൈകാര്യംചെയ്യലും
+- **ഡാറ്റ സാധുത**: ക്ലയന്റ്-സൈഡ്, സെർവർ-സൈഡ് സുരക്ഷയും സമഗ്രതയും
+- **ഉപയോക്തൃ അനുഭവ ഡിസൈൻ**: ഉപയോക്താവിനെ വിജയത്തിലേക്ക് നയിക്കുന്ന സുനിരവധി ഇന്റർഫേസുകൾ
+- **ആക്സസിബിലിറ്റി എഞ്ചിനീയർ**: വ്യത്യസ്ത ആവശ്യങ്ങളെ അനുയോജ്യമായി പ്രവർത്തിക്കുന്ന ഉൾക്കൊള്ളുന്ന ഡിസൈൻ
+
+**അടുത്ത നില**: നിങ്ങൾക്ക് ആഴത്തിലുള്ള ഫോർം ലൈബ്രറികൾ, സങ്കീർണ്ണ സാധുത നിയമങ്ങൾ നടപ്പാക്കണമെങ്കിൽ, അല്ലെങ്കിൽ എന്റർപ്രൈസ് ഗ്രേഡ് ഡാറ്റ ശേഖരണ സംവിധാനങ്ങൾ നിർമ്മിക്കണമെങ്കിൽ സജ്ജരാണ്!
+
+🌟 **പ്രാപ്തി നേടി**: നിങ്ങൾ പ്രൊഫഷണൽ സാധുത പരിശോധന, പിശക് കൈകാര്യനം, ഉപയോക്തൃ അനുഭവ മാതൃകകളുമായി ഒരു സമ്പൂർണ ഫോർം കൈകാര്യം സിസ്റ്റം നിർമ്മിച്ചു!
+
+---
+
+
+
+---
+
+## GitHub Copilot ഏജന്റ് ചാലഞ്ച് 🚀
+
+ഏജന്റ് മോഡ് ഉപയോഗിച്ച് താഴെ കാണുന്ന ചാലഞ്ച് പൂർത്തിയാക്കുക:
+
+**വിവരണം:** രജിസ്ട്രേഷൻ ഫോർമിൽ സമഗ്രമായ ക്ലയന്റ്-സൈഡ് സാധുത പരിശോധനയും ഉപയോക്തൃ പ്രതികരണവും വർദ്ധിപ്പിക്കുക. ഈ ചാലഞ്ച് ഫോർം സാധുത, പിശക് കൈകാര്യനം, പരസ്പര പ്രവർത്തനാത്മക ഫീഡ്ബാക്കുമായി ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താനുള്ള പരിശീലനം നൽകും.
+**പ്രോംപ്ട്:** രജിസ്ട്രേഷൻ ഫോം പൂർണ്ണമായും ഫോർം സ്ഥിരീകരണ സംവിധാനമാക്കി സൃഷ്ടിക്കുക, ഇതിൽ ഉൾപ്പെടുന്നത്: 1) ഉപയോക്താവ് ടൈപ്പ് ചെയ്യുമ്പോൾ ഓരോ ഫീൽഡിനും സംവേദന-സമയം സ്ഥിരീകരണ പ്രതികരണം, 2) ഓരോ ഇൻപുട്ട് ഫീൽഡിന് താഴെ കസ്റ്റം സ്ഥിരീകരണ സന്ദേശങ്ങൾ, 3) പാസ്വേഡ് സ്ഥിരീകരണ ഫീൽഡ് മാച്ചിംഗ് സ്ഥിരീകരണത്തോടെ, 4) ദൃശ്യ സൂചനകൾ (സമാനമായ ഫീൽഡിനുള്ള പച്ച ചെക്ക്മാർക്കും തെറ്റ് ഫീൽഡിനുള്ള ചുവന്ന മുന്നറിയിപ്പുകൾക്ക്), 5) എല്ലാ സ്ഥിരീകരണങ്ങളും കടന്നുവന്ന ശേഷം മാത്രമേ സബ്മിറ്റ് ബട്ടൺ സജീവമാവൂ. HTML5 സ്ഥിരീകരണഗുണങ്ങൾ ഉപയോഗിക്കുക, പരിശോധനാ അവസ്ഥകൾ ക്ലാസ് ഉപയോഗിച്ച് സ്റ്റൈൽ ചെയ്യുക, മൾട്ടിഫംഗ്ഷണൽ പെരുമാറ്റം ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് സൃഷ്ടിക്കുക.
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) എന്നതിനെക്കുറിച്ച് കൂടുതൽ അറിയൂ.
+
+## 🚀 ചാലഞ്ച്
+
+ഉപയോക്താവ് ഇതിനകം നിലവിലുള്ള പക്ഷം, HTML-ൽ ഒരു പിശക് സന്ദേശം കാണിക്കുക.
+
+ചെറിയൊരു സ്റ്റൈലിങ്ങ് ചെയ്ത് അവസാന ലോഗിൻ പേജ് നോക്കിനോക്കൂ:
+
+
+
+## പോസ്റ്റ് ലക്ചർ ക്വിസ്
+
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/44)
+
+## അവലോകനവും സ്വയംപഠനവും
+
+ഡവലപ്പർമാർ അവരുടെ ഫോർം നിർമ്മാണ ശ്രമങ്ങളിൽ വളരെ സൃഷ്ടിപരമായ സമീപനം സ്വീകരിച്ചിട്ടുണ്ട്, പ്രത്യേകിച്ച് സ്ഥിരീകരണ തന്ത്രങ്ങൾ സംബന്ധിച്ച്. വ്യത്യസ്ത ഫോർം ഫ്ളോകളെക്കുറിച്ച് അറിവ് നേടാൻ [CodePen](https://codepen.com) പരിശോധിക്കുക; നിങ്ങൾക്ക് ചില രോചനയുള്ള, പ്രചോദനമാർന്ന ഫോമുകൾ കണ്ടെത്താനാകും.
+
+## അസൈൻമെന്റ്
+
+[Style your bank app](assignment.md)
+
+---
+
+
+**പരിഭവകര്യം**:
+ഈ രേഖ AI പരിഭാഷ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് ഭാഷാന്തരപ്പെടുത്തപ്പെട്ടതാണ്. നിശ്ചിതത്വത്തിനായി ഞങ്ങൾ ശ്രമിച്ചിരിക്കുമ്പോഴും, സ്വയമേഖലാ (ഓട്ടോമേറ്റഡ്) പരിഭാഷകളിൽ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റുകൾ ഉണ്ടാകാൻ സാധ്യതയുള്ളതാണ്. പ്രാഥമികമായി, ഈ രേഖയുടെ മൂലഭാഷയിൽ ഉള്ള പതിപ്പ് അധികാരപരമായ ഉറവിടമായി കണക്കാക്കണമെന്നും ശ്രദ്ധിക്കുക. നിർണ്ണായക വിവരങ്ങൾക്കായി വിദഗ്ദ്ധമായ മനുഷ്യ പരിഭാഷ ശുപാർശ ചെയ്യുന്നു. ഈ പരിഭാഷ ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന യാതൊരു തെറ്റിദ്ധാരണകളിനും ഞങ്ങൾ ഉത്തരവാദിയല്ല.
+
\ No newline at end of file
diff --git a/translations/ml/7-bank-project/2-forms/assignment.md b/translations/ml/7-bank-project/2-forms/assignment.md
new file mode 100644
index 000000000..79962db48
--- /dev/null
+++ b/translations/ml/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,166 @@
+
+# നിങ്ങളുടെ ബാങ്ക് ആപ്പ് ആധുനിക CSS ഉപയോഗിച്ച് സ്റ്റൈൽ ചെയ്യുക
+
+## പ്രോജക്ട് അവലോകനം
+
+നിങ്ങളുടെ പ്രവർത്തനക്ഷമമായ ബാങ്കിങ് ആപ്പിനെ ആകർഷകവുമായ, പ്രൊഫഷണൽ ലുക്കുള്ള വെബ് ആപ്പായി മാറ്റാൻ ആധുനിക CSS സാങ്കേതിക വിദ്യകൾ ഉപയോഗിക്കുക. ഒരു ഏകോപിത ഡിസൈൻ സിസ്റ്റം സൃഷ്ടിച്ച് ഉപയോഗകാർക്ക് മെച്ചപ്പെട്ട അനുഭവം നൽകുകയും ആക്സസിലബിലിറ്റിയും പ്രതികരണശേഷിയുള്ള ഡിസൈനും പാലിക്കുകയും ചെയ്യുക.
+
+ഈ അസൈൻമെന്റ് നിങ്ങൾക്കെതിരെ ആധുനിക വെബ് ഡിസൈൻ പാറ്റേണുകൾ പ്രയോഗിക്കാൻ, സ്ഥിരതയുള്ള ദൃശ്യ ഐഡന്റിറ്റി നടപ്പാക്കാൻ, ഉപയോക്താക്കൾക്ക് ആകർഷകവും സുഖപ്രദവുമായ ഇന്റർഫേസ് സൃഷ്ടിക്കാൻ വെല്ലുവിളിയാക്കുന്നു.
+
+## നിർദ്ദേശങ്ങൾ
+
+### ഘട്ടം 1: നിങ്ങളുടെ സ്റ്റൈൽഷീറ്റ് സജ്ജമാക്കുക
+
+**നിങ്ങളുടെ CSS അടിസ്ഥാന നിർമ്മിക്കുക:**
+
+1. പ്രോജക്ട് റൂട്ടിൽ `styles.css` എന്ന പേരിൽ പുതിയ ഫയൽ **സൃഷ്ടിക്കുക**
+2. നിങ്ങളുടെ `index.html` ഫയലിൽ സ്റ്റൈൽഷീറ്റ് **ലിങ്ക് ചെയ്യുക**:
+ ```html
+ `**: ടൈറ്റിലും വിവരണവും ഉൾപ്പെടുന്ന മുകളിൽ ഉള്ള പ്രദേശം വ്യക്തമായി തിരിച്ചറിയിക്കുന്നു
+- **``**: പ്രധാന ഉള്ളടക്ക പ്രദേശം (സംവാദങ്ങൾ നടക്കുന്ന സ്ഥലം)
+- **`