chore(i18n): sync translations with latest source changes (chunk 10/14, 100 files)

translations/kn/1-getting-started-lessons/1-intro-to-programming-languages/README.md

@@ -0,0 +1,861 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d45ddcc54eb9232a76d08328b09d792e",
+  "translation_date": "2026-01-08T20:15:54+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "kn"
+}
+-->
+# ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ಮತ್ತು ಆಧುನಿಕ ಡೆವಲಪರ್ ಟೂಲ್ಗಳ ಪರಿಚಯ
+
+ನಮಸ್ಕಾರ ಭವಿಷ್ಯದ ಡೆವಲಪರ್! 👋 ನಾನು ನಿಮಗೆ ಪ್ರತಿದಿನವೂ ಭಯಂಕರ ಅನುಭವ ನೀಡುವ ಏನಾದರು ಹೇಳಬಹುದೇ? ನೀವು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಅನ್ನು ಕೇವಲ ಕಂಪ್ಯೂಟರ್ ಗಳ ಕುರಿತು ಎನ್ನುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ತಲುಪಲಿದ್ದೀರಿ – ಇದು ನಿಮ್ಮ ಅತೀ ವಿಚಿತ್ರ ಕಲ್ಪನೆಗಳನ್ನು ಜೀವಕ್ಕೆ ತರುವ ಸ್ಫೂರ್ತಿದಾಯಕ ಶಕ್ತಿಗಳನ್ನು ಹೊಂದಿರುವದಾಗಿದೆ!
+
+ನೀವು ನಿಮ್ಮ ಅಭಿಮಾನಿ ಆಪ್ ಬಳಸುವಾಗ ಎಲ್ಲವೂ ಸುಂದರವಾಗಿ ಸರಿಹೊಂದುವ ಕ್ಷಣವನ್ನು ತಿಳಿದಿರಬಹುದೆ? ನೀವು ಒಂದು ಬಟನ್ ಒತ್ತಿದಾಗ ಎಲ್ಲವೂ ಮೆಜಿಕಲ್ ಆಗಿ ಹೋಗುತ್ತದೆ ಮತ್ತು ನೀವು "ಅಯ್ಯೋ, ಅವರು ಅದನ್ನು ಹೇಗೆ ಮಾಡಿದ್ರು?" ಎಂದು ಯೋಚಿಸುತ್ತೀರಿ? ಅದನ್ನು ಸೃಷ್ಟಿಸಿದ ಕೋಡ್ ಅನ್ನು ಬರೆಯುವವರು ನಿಮ್ಮಂತೆಯೇ ಯಾರು – ಬಹುಶಃ ರಾತ್ರಿಯ 2 ಗಂಟೆಗೆ ತಮ್ಮ ಮೆಚ್ಚಿನ ಕಾಫಿ ಶಾಪಿನಲ್ಲಿ ಮೂರನೆ ಎಸ್ಪ್ರೆಸ್ಸೋ ಜೊತೆ ಕೂತು ಅವರು. ಮತ್ತು ಇವತ್ತಿನ ಪಾಠದ ಅಂತ್ಯಕ್ಕೆ ನೀವು ಅಷ್ಟು ಕೇವಲ ಹೇಗೆ ಮಾಡಿದ್ರು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದಷ್ಟಲ್ಲ, ನೀವು ಅದನ್ನು ಸ್ವತಃ ಪ್ರಯತ್ನಿಸಲು ಉತ್ಸುಕವಾಗುತ್ತೀರಿ!
+
+ನನ್ನುತ್ತು ನೋಡು, ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಈಗ ಭಯಂಕರ ಎಂದು ಕಾಣುತ್ತಿದೆಯೆಂದು ನಾನು ಸಂಪೂರ್ಣವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತೇನೆ. ನಾನು ಪ್ರಾರಂಭಿಸಿದಾಗ, ನಾನು ನಿಜವಾಗಿಯೂ ಭಾವಿಸುತ್ತಿದ್ದೆನು ನೀವು ಗಣಿತ ತಜ್ಞರಾಗಿರಬೇಕು ಅಥವಾ ಐದು ವರ್ಷದಿಂದಲೆ ಕೋಡಿಂಗ್ ಮಾಡುತ್ತಿದ್ದಿರಬೇಕು ಎಂದು. ಆದರೆ ಇದು ನನ್ನ ದೃಷ್ಟಿಕೋನವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬದಲಾಯಿಸಿತು: ಪ್ರೋಗ್ರಾಮಿಂಗ್ ನೂತನ ಭಾಷೆಯಲ್ಲಿ ಸಂವಾದ ಕಲಿಯುವಂತೆ ಆಗಿದೆ. ನೀವು "ನಮಸ್ಕಾರ" ಮತ್ತು "ಧನ್ಯವಾದ" ಜೊತೆಗೆ ಪ್ರಾರಂಭಿಸುತ್ತೀರಿ, ನಂತರ ಕಾಫಿ ಆದೇಶಿಸುವುದಕ್ಕೆ ಬರುತ್ತೀರಿ ಮತ್ತು ಮೀರಿದಂತೆ ತತ್ತ್ವಶಾಸ್ತ್ರೀಯ ಚರ್ಚೆಗಳು ನಡೆಯುತ್ತವೆ! ಇಲ್ಲಿ ನೀವು ಕಂಪ್ಯೂಟರ್ ಗಳೊಂದಿಗೆ ಸಂವಾದ ಮಾಡುತ್ತೀರಿ ಮತ್ತು ನಿಜವಾಗಿಯೂ? ಇವರ ಸಂಧರ್ಭದಲ್ಲಿ ಅವರು ಅತ್ಯಂತ ತಾಳ್ಮೆಯ ಸಂವಹನದೊಡನೆ ಇರುತ್ತಾರೆ – ಎಂದಿಗೂ ನಿಮ್ಮ ತಪ್ಪುಗಳನ್ನು ತಿರಸ್ಕರಿಸುವುದಿಲ್ಲ ಮತ್ತು ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಲು ಸದಾ ಸಜ್ಜಾಗಿರುತ್ತಾರೆ!
+
+ಇಂದಿನ ದಿನದಲ್ಲಿ, ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯನ್ನು ಸಾಧ್ಯಗೊಳಿಸುವ ಅದ್ಭುತ ಸಾಧನಗಳ ಮೇಲೆ ನಾವು ಪ್ರಯಾಣ ಮಾಡುವೆವು. ನಾನು ನಿಮ್ಮ Netflix, Spotify ಮತ್ತು ನಿಮ್ಮ ಇಷ್ಟದ ಸ್ವತಂತ್ರ ಆಪ್ ಸ್ಟುಡಿಯೋದ ಡೆವಲಪರ್ ಗಳು ಪ್ರತಿದಿನ ಬಳಸುವ ಎಡಿಟರ್ ಗಳು, ಬ್ರೌಸರ ಗಳು ಮತ್ತು ವರ್ಕ್‌ಫ್ಲೋಗಳನ್ನು ತಿಳಿಸುತ್ತಿದ್ದೇನೆ. ಮತ್ತು ಇದು ನಿಮಗೆ ಸಂತೋಷಕ್ಕಾಗುವ ಸಂಗತಿ: ಈ ಪರಿಣಿತಿ-ತರಗತಿಯ, ಉದ್ಯಮ-ಮಟ್ಟದ ಬಹುಮತ ಸಾಧನಗಳು ಬಹುಶಃ ಸಂಪೂರ್ಣ ಉಚಿತವಾಗಿವೆ!
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.kn.png)
+> ಟೊಮೊಮಿ ಇಮುರಾ ಅವರ ಸ್ಕೆಚ್ ನೋಟ್ [Tomomi Imura](https://twitter.com/girlie_mac)
+
+```mermaid
+journey
+    title ಈಜು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಪ್ರಯಾಣ ಇಂದು
+    section ಹುಡುಕಿ
+      ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಎಂದರೆ ಏನು: 5: You
+      ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು: 4: You
+      ಉಪಕರಣಗಳ ಅವಲೋಕನ: 5: You
+    section ಅನ್ವೇಷಿಸಿ
+      ಕೋಡ್ ಸಂಪಾದಕರು: 4: You
+      ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಡೆವ್ ಟೂಲ್‌ಗಳು: 5: You
+      ಕಮಾಂಡ್ ಲೈನ್: 3: You
+    section ಅಭ್ಯಾಸ
+      ಭಾಷೆ ಡಿಟೆಕ್ಟಿವ್: 4: You
+      ಉಪಕರಣ ಅನ್ವೇಷಣೆ: 5: You
+      ಸಮುದಾಯ ಸಂಪರ್ಕ: 5: You
+```
+## ನೀವು ಈಗಾಗಲೇ ಏನು ತಿಳಿದಿದ್ದೀರಾ ನೋಡೋಣ!
+
+ರಸ ಹೆಚ್ಚಿಸುವ ಮೊದಲು, ನಾನು ಕುತೂಹಲಗೊಂಡಿದ್ದೇನೆ – ಈ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಲೋಕದ ಬಗ್ಗೆ ನೀವು ಈಗಾಗಲೇ ಏನು ತಿಳಿದಿದ್ದೀರಿ? ಮತ್ತು ಕೇಳಿ, ನೀವು ಈ ಪ್ರಶ್ನೆಗಳನ್ನು ನೋಡುತ್ತಿರುವಾಗ "ನನಗೆ ಇದರ ಬಗ್ಗೆ ಸಂಪೂರ್ಣ ಗುಡುಗಾಬುದು ಇಲ್ಲ"ಂದು ಭಾವಿಸಿದರೆ, ಅದು ಕೇವಲ ಸರಿ ಅಲ್ಲ, ಅದ್ಭುತವಾಗಿದೆ! ಅಂದರೆ ನೀವು ಹೊಸದಾಗಿ ಸರಿಯಾದ ಜಾಗದಲ್ಲಿದ್ದೀರಿ. ಇದನ್ನು ವ್ಯಾಯಾಮಕ್ಕೆ ಮುನ್ನ ಸ್ಟ್ರೆಚ್ ಮಾಡುವಂತೆ ಪರಿಗಣಿಸಿ – ನಾವು ನಮ್ಮ ಮೆದುಳಿನ ಸ್ನಾಯುಗಳನ್ನು ಬೆಂಕಿಯಾಗಿಸುತ್ತಿದ್ದೇವೆ!
+
+[ಪೂರ್ವಪಾಠ ಪ್ರಶ್ನೋತ್ತರ ತೆಗೆದುಕೊಳ್ಳಿ](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+
+## ನಾವು ಒಂದಿಗೆ ಹೋಗಲಿರುವ ಸಾಹಸ
+
+ಒಳ್ಳೆಯದು, ನಾನು ನಿಜವಾಗಿಯೂ ಇವತ್ತಿನ ಏನು ವಿಚಾರಿಸೋಣ ಎಂಬ ವಿಷಯಕ್ಕಾಗಿ ಕುತೂಹಲದಿಂದ ಕಬಳಿ ಕುಳಿತಿದ್ದೇನೆ! ಗೆಳೆಯರೇ, ನಾನು ಇವುಗಳಲ್ಲಿ ಕೆಲವು ಜನುಕರಿಸುವಾಗ ನಿಮ್ಮ ಮುಖವನ್ನು ನೋಡಬಹುದಂತಿದೆ. ನಾವು ಒಂದಾಗಿ ಹೋಗುತ್ತಿರುವ ಅದ್ಭುತ ಸಾಹಸ:
+
+- **ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಎಂದರೆ ನಿಜವಾದ ಮಹಿಮೆ ಏನು (ಮತ್ತು ಅದೀಗ ಅತ್ಯಂತ ಅದ್ಭುತ ವಿಷಯ!)** – ಕೋಡ್ ನಿಮ್ಮ ಸುತ್ತಲಿನ ಎಲ್ಲವನ್ನೂ invisibly ಚಲಾಯಿಸುವ ಅದ್ಭುತ ಮಾಯಾಜಾಲವಾಗಿದೆ ಹೇಗೆ ಎಂಬುದನ್ನು ನಾವು ಕಂಡುಹಿಡಿಯೋಣ; ಸೋಮವಾರ ಬೆಳಿಗ್ಗೆ ಗೊತ್ತಿರುವ ಆ ಎಚ್ಚರಿಕೆ ಗಾಡಿ ಇಂದ, ನಿಮ್ಮ Netflix ಶಿಫಾರಸುಗಳನ್ನು ಸರಿಯಾಗಿ ಕ್ಯೂರೆಟ್ ಮಾಡುವ ಆಲ್ಗಾರಿತ್ಮ್ ತನಕ
+- **ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ಮತ್ತು ಅವುಗಳ ಅದ್ಭುತ ವೈಶಿಷ್ಟ್ಯಗಳು** – ಪ್ರತಿಯೊಬ್ಬ ವ್ಯಕ್ತಿಗೆ ಸಂಪೂರ್ಣ ವಿಭಿನ್ನ ಶಕ್ತಿಗಳು ಮತ್ತು ಸಮಸ್ಯೆ ಪರಿಹಾರ ರೀತಿಗಳು ಇರುವ ಒಂದು ಪಕ್ಷವೊಂದಕ್ಕೆ ನೀವು ಹೋಗುತ್ತಿರುವಂತೆ ಕಲ್ಪಿಸಿ. ಅದೇ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳ ಜಗತ್ತು, ಮತ್ತು ನೀವು ಅವುಗಳನ್ನು ಭೇಟಿಯಾಗಲು ಇಷ್ಟಪಡುತ್ತೀರಿ!
+- **ಡಿಜಿಟಲ್ ಮಾಯಾಜಾಲ ಉಂಟುಮಾಡುವ ಮೂಲಭೂತ ಕಟ್ಟಿಕೋಣೆಗಳು** – ಇವು ಅಂತಿಮ ಸೃಜನಾತ್ಮಕ LEGO ಸೆಟ್ ಗಳಂತೆ ಶಕ್ತಿವಂತವಾಗಿವೆ. ನೀವು ಈ ತುಂಡುಗಳು ಹೇಗೆ ಸರಿಹೊಂದುತ್ತವೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಾದರೆ, ನಿಮ್ಮ ಕಲ್ಪನೆಯು ಹುಟ್ಟಿಸುವ ಏನನ್ನಾದರೂ ನಿರ್ಮಿಸಬಹುದು!
+- **ಆದರ್ಶ ಸಾಧನಗಳು ಅವರು ಮಾಯಾಜಾಲಿಯ ಕುತ್ತಿಗೆಗೆ ಲ್ಯಾಂಪ್ ಹತ್ತಿಸುವಂತಾಗಿಸುವ ಸಾಧನಗಳು** – ನಾನು ನಾಟಕವಾಡುತ್ತಿಲ್ಲ – ಈ ಸಾಧನಗಳು ನಿಜವಾಗಿಯೂ ನಿಮಗೆ ಅತೀ ಶಕ್ತಿಗಳಂತಗೊಳಿಸುವವು, ಮತ್ತು ಅತ್ಯುತ್ತಮ ಭಾಗವೇನುಂದು ಕೇಳಿ? ಅವರು ಸೋ ಪ್ರೋಡ್ಯೂಸರ್ ಗಳಷ್ಟೇ ಉಪಯೋಗಿಸುತ್ತಾರೆ!
+
+> 💡 **ಈ ಮಾತನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ**: ಇಂದಿನ ಪಾಠದಲ್ಲಿ ಎಲ್ಲವನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳಲು ಯತ್ನಿಸಬೇಡಿ! ಇತನಕ, ನಾನು ನಿಮಗೆ ಸಾಧ್ಯತೆಯ ಬಗ್ಗೆ ಆ ಉತ್ಸವದ ಸ್ಪಾರ್ಕ್ ಅನ್ನು ಮಾತ್ರ ಅನುಭವಿಸಲು ಬಯಸುತ್ತೇನೆ. ವಿವರಗಳು ಸಹಜವಾಗಿ ನಮ್ಮ ಅಭ್ಯಾಸದ ಒಟ್ಟಿನಲ್ಲಿ ನೆನಪಿಗೆ ಬರುತ್ತವೆ – ಅದೆಯೇ ನಿಜವಾದ ಕಲಿಕೆ!
+
+> ನೀವು ಈ ಪಾಠವನ್ನು [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) ನಲ್ಲಿ ತೆಗೆದುಕೊಳ್ಳಬಹುದು!
+
+## ಹಾಗಾದರೆ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಎಂದರೆ ಆಟವೇನು?
+
+ಚನ್ನಾಗಿ, ಲಕ್ಷಾಂತರ ಡಾಲರ್ ಪ್ರಶ್ನೆಯನ್ನು ನಿಭಾಯಿಸೋಣ: ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಎಂದರೆ ನಿಜವಾಗಿಯೂ ಏನು?
+
+ನಾನು ನನ್ನ ಚಿಂತನೆ ಬದಲಾಯಿಸಿದ್ದ ಕಥೆಯನ್ನು ಹೇಳುತ್ತೇನೆ. ಕಳೆದ ವಾರ, ನಾನು ನನ್ನ ತಾಯಿಗೆ ಹೊಸ ಸ್ಮಾರ್ಟ್ ಟಿವಿ ರಿಮೋಟ್ ಬಳಸುವುದು ಹೇಗೆ ಎಂದು ವಿವರಿಸಲು ಯತ್ನಿಸುತ್ತಿದ್ದೆ. ನಾನು "ಕೆಂಪು ಬಟನ್ ಒತ್ತಿ, ಆದರೆ ದೊಡ್ಡ ಕೆಂಪು ಬಟನ್ ಅಲ್ಲ, ಎಡ ಬದಿಯ ಚಿಕ್ಕ ಕೆಂಪು ಬಟನ್... ಅಲ್ಲ, ನಿಮ್ಮ ಮತ್ತೊಂದು ಎಡ..." ಎಂಬುದನ್ನು ಹೇಳುತ್ತಿರೋಡೆ ಕಂಡೆ. ಸರಿಹೊಂದುತ್ತದೆ? 😅
+
+ಅದೇ ಪ್ರೋಗ್ರಾಮಿಂಗ್! ಅದು ಬಹುಶಕ್ತಿಶಾಲಿಯಾದುದಾದರೂ ಎಲ್ಲವನ್ನೂ ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸುವ ಕಲೆಯಾಗಿದೆ. ನೀವೀಗ ನಿಮ್ಮ ತಾಯಿಗೆ ವಿವರಿಸುತ್ತಿದ್ದೀರಿ (ಅವರು ಕೇಳಬಹುದು "ಯಾವ ಕೆಂಪು ಬಟನ್?"), ಆದರೆ ಖಂಡಿತವಾಗಿಯೂ ನೀವು ಕಂಪ್ಯೂಟರ್ ಗೆ ವಿವರಿಸುತ್ತಿದ್ದೀರಿ (ಅದು ನೀವು ಹೇಳಿದ ಪ್ರತಿಯೊಂದನ್ನು ನಿಖರವಾಗಿ ಮಾಡುತ್ತದೆ, ನೀವು ಅರ್ಥಮಾಡಿಕೊಂಡದ್ದಲ್ಲದೇ ಇದ್ದರೂ).
+
+ನನಗೆ ಭಾವನೆ ತರುವುದು ಈ ಪಾಠವನ್ನು ಪ್ರಥಮ ಬಾರಿಗೆ ಕಲಿತಾಗ: ಕಂಪ್ಯೂಟರ್ ಗಳು ಮೂಲಭೂತವಾಗಿ ಅತೀವ ಸರಳ. ಅವು ಕೇವಲ ಎರಡು ಅರ್ಥಗಳನ್ನು ಮಾತ್ರ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತವೆ – 1 ಮತ್ತು 0, ಅಥವಾ "ಹೌದು" ಮತ್ತು "ಇಲ್ಲ" ಎಂದರೆ "on" ಮತ್ತು "off". ಅಷ್ಟೇ! ಆದರೆ ಅದ್ಭುತ ಸಂಗತಿ ಇಲ್ಲಿ: ನಾವು 1 ಹಾಗೂ 0 ಗಳಲ್ಲಿ ಮಾತಾಡಬೇಕಾಗಿಲ್ಲ. ಅಲ್ಲಿ **ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳ** ಮಹತ್ವ ಬರುತ್ತದೆ. ಇವು ನಿಮಗೆ ಅರ್ಥವಾಗುವ ಮಾನವ ಭಾಶುರದ ವಿವರಣೆಯನ್ನು ಕಂಪ್ಯೂಟರ್ ಭಾಷೆಗೆ ಪರಿವರ್ತಿಸುವ ಅತ್ಯುತ್ತಮ ಅನುವಾದಕರಂತೆ.
+
+ಹಾಗೆ, ಪ್ರತಿ ದಿನ ಬೆಳಳಿಗೆ ಎದ್ದು ನಾನು ನಿಜವಾದ ತುಂಬಿ ಹೊಡೆದಂತಿರುವುದು ಏನೆಂದರೆ: ನಿಮ್ಮ ಡಿಜಿಟಲ್ ಜೀವನದಲ್ಲಿ ಎಲ್ಲಾ ಹೋರಾಟಗಳು ಯಾರು ಇದ್ದರು? ತಪ್ಪದೇ ನಿಮ್ಮಂತೆಯೆ ಯಾರೊಬ್ಬರು, ಬಹುಶಃ ಪಾಜಾಮಾಗಳಲ್ಲಿ ಕುಳಿತಿರುವ, ಕಾಫಿ ಕುಡಿಯುವ, ತಮ್ಮ ಲ್ಯಾಪ್‌ಟಾಪ್ ನಲ್ಲಿ ಕೋಡ್ ಬರೆಯುವ ವ್ಯಕ್ತಿಯೊಬ್ಬರು. ನೀವು ನಿರೂಪಿಸುವ ಆ Instagram ಫಿಲ್ಟರ್? ಯಾರೋ ಅದನ್ನು ಕೋಡ್ ಮಾಡಿದ್ದರು. ನಿಮಗೆ ಹೊಸ ಪ್ರೀತಿಯ ಹಾಡಿಗೆ ಮಾರ್ಗದರ್ಶನ ಮಾಡಿದ ಆಲ್ಗಾರಿತ್ಮ್? ಡೆವಲಪರ್ ಅದನ್ನು ಬರೆದಿದ್ದಾನೆ. ಸ್ನೇಹಿತರೊಂದಿಗೆ ಊಟದ ಬಿಲ್ ಹಂಚಿಕೊಳ್ಳಲು ಇರುವ ಆ ಆಪ್? ಹೌದು, ಯಾರೋ "ಇದು ತುಂಬಾ ಬೇಸರ, ನಾನು ಇದನ್ನು ಸರಿಪಡಿಸಬಹುದೇ?" ಎಂದು ಯೋಚಿಸಿ... ಹಾಗೆ ಮಾಡಿದ್ದಾರೆ!
+
+ನೀವು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಕಲಿತಂತೆ, ನೀವು ಕೇವಲ ಹೊಸ ಕೌಶಲ್ಯವನ್ನು ಪಡೆಯುವುದಿಲ್ಲ – ನೀವು ಸಮಸ್ಯೆ ಪರಿಹಾರಕರ ಅದ್ಭುತ ಸಮುದಾಯದ ಭಾಗವಾಗುತ್ತಿದ್ದೀರಿ, ಅವರು "ಒಬ್ಬರ ದಿನವನ್ನು ಸ್ವಲ್ಪ ಹಬ್ಬಿಸಿ ಮಾಡುವುದಾದರೆ ನಾನು ಏನನ್ನಾದರೂ ನಿರ್ಮಿಸಬಹುದೇಕೆ?" ಎಂಬ ಆಲೋಚನೆಯಲ್ಲಿ ದಿನವನ್ನನುಗೊಳ್ಳುತ್ತಾರೆ. ನಿಜವಾಗಿಯೂ, ಇದಕ್ಕಿಂತ ಒಳ್ಳೆಯದುವೇನಿದೆ?
+
+✅ **ಆನಂದಕಾರಿಯಾದ ವಿಚಾರ ಹುಡುಕಿ**: ನಿಮ್ಮ ಕೈ ಮುಕ್ತ ಸಮಯದಲ್ಲಿ ಹುಡುಕಿ ನೋಡಬೇಕಾದ ಒಂದು ಅದ್ಭುತ ಸಂಗತಿ – ಮೊದಲ ಜಗತ್ತಿನ ಕಂಪ್ಯೂಟರ್ ಪ್ರೋಗ್ರಾಮರ್ ಯಾರು? ಒಂದು ಅಂಕೆಗೆ – ನೀವು ಭಾವಿಸುತ್ತಿರುವವನು ಅಲ್ಲವೇಕೆ? ಆ ವ್ಯಕ್ತಿಯ ಕಥೆ ತುಂಬಾ ಆಕರ್ಷಕವಾಗಿದೆ ಮತ್ತು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಯಾವಾಗಲೂ ಸೃಜನಾತ್ಮಕ ಸಮಸ್ಯೆ ಪರಿಹಾರ ಮತ್ತು ವಿನೂತನ ಚಿಂತನೆಗಳ ಬಗ್ಗೆ ಇದೆಯೆಂದನ್ನು ತೋರಿಸುತ್ತದೆ.
+
+### 🧠 **ಪರಿಶೀಲನೆ ಸಮಯ: ನೀವು ಹೇಗಿದ್ದೀರಾ?**
+
+**ಒಂದು ಕ್ಷಣಕಾಲ reflexão ಮಾಡಿ:**
+- "ಕಂಪ್ಯೂಟರ್ ಗಳು ಸೂಚನೆಗಳನ್ನು ಪಡೆಯುವ" ಕಲ್ಪನೆ ಈಗ ನಿಮಗೆ ಅರ್ಥವಾಗಿದೆಯೆ?
+- ಪ್ರತಿ ದಿನದ ಕಾರ್ಯಗಳನ್ನು ನೀವು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಮೂಲಕ automate ಮಾಡಲು ಇಚ್ಛಿಸುವ ಏನಾದರೂ ಏನಿದೆ?
+- ಈ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ವಿಷಯದ ಬಗ್ಗೆ ನಿಮ್ಮ ಘನತೆಗಳಲ್ಲಿ ಏನೆಷ್ಟು ಪ್ರಶ್ನೆಗಳಿವೆ?
+
+> **ಮಡದಿ**: ಕೆಲವು ಕಲ್ಪನೆಗಳು ಈಗಾಗಲೇ ಬಹಳ ಗುಲಾಬಿಯಾಗಿರುವುದು ಸಹಜ. ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಕಲಿಕೆ ಹೊಸ ಭಾಷೆಯನ್ನು ಕಲಿಯುವುದಾಗಿದ್ದು, ನಿಮ್ಮ ಮೆದುಳಿಗೆ ಈ ಮಾರ್ಗಗಳನ್ನು ನಿರ್ಮಿಸುವ ಸಮಯ ಬೇಕಾಗುತ್ತದೆ. ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿದ್ದೀರಿ!
+
+## ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ಭಿನ್ನ ಭಿನ್ನ ಮಾಯಾಜಾಲದ ರುಚಿಗಳಂತಹುದು
+
+ಚನ್ನಾಗಿ, ಇದು ವಿಚಿತ್ರವಾಗಿ ಕೇಳಿಸಬಹುದು, ಆದರೆ ನನ್ನ ಜೊತೆ ಇರಿ – ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ವಿಭಿನ್ನ ಸಂಗೀತ ಶैलಿಗಳಂತಹವು. ಧ್ವನಿಮನೆ: ನೀವು ಜ್ಯಾಜ್, ಸಾನ್, ರಾಕ್, ಮತ್ತು ಹಿಪ್-ಹಾಪ್ ಇವುಗಳು ಇದ್ದಂತೆ.
+
+ಪ್ರತಿ ಶೈಲಿಗೆ ತನ್ನ ವೈಭಮ್ ಮತ್ತು ಅಭಿಮಾನಿಗಳ ಸಮುದಾಯವಿದೆ ಮತ್ತು ಪ್ರತಿ ಪಾರ್ಟಿಗೆ ತಕ್ಕಂತೆ ವಿಭಿನ್ನ.
+
+ಸಂಗೀತದಂತೆ, ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳೂ ಹೀಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ! ನೀವು ಸ್ವಲ್ಪ ಮನರಂಜನೆಯ ಮೊಬೈಲ್ ಗೇಮ್ ಗಾಗಿ JavaScript ಬಳಸಬಹುದು, ಕ್ಲೈಮೇಟ್ ಡೇಟಾವನ್ನು ದೊಡ್ಡ ಪ್ರಮಾಣದಲ್ಲಿ crunch ಮಾಡಲು Python ಬಳಸುತ್ತದೆ; ಹೀಗೆಯೇ ನೀವು ನನ್ನ ವಿಷಯವಾಗಿ ಡೆತ್ ಮೆಟಲ್ ಯೋಗ ಕ್ಲಾಸಿನಲ್ಲಿ ಬನ್ನದಂತೆ. (ಬಹುತೆಕ ಯೋಗ ದಿನಗಳಲ್ಲಿ!)
+
+ಆದರೆ ಪ್ರತಿಸಾರಿ ಮನಸ್ಸಿಗೆ ಶಾಕ್ ನೀಡುವುದು: ಭಾಷೆಗಳು ನಿಮಗೆ ಅತ್ಯಂತ ಸಹಜವಾಗಿ ನಿಮ್ಮ ಆಲೋಚನೆಗಳನ್ನು ಹೇಳಲು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ ಹಾಗೂ ಅವು ತುಂಬಾ ಸಂಕೀರ್ಣವಾದ 1 ಮತ್ತು 0 ಗಳಿಗೆ ಅನುವಾದವನ್ನು ಮಾಡುತ್ತವೆ. ನಿಮ್ಮ ಪಕ್ಕದಲ್ಲಿ ಇದ್ದಂತಹ ಮಾದರಿತನದಿಂದ ಇಬ್ಬರನ್ನೂ ಮಾತನಾಡುವ ಗೆಳೆಯನಂತೆ – ಅವರು ಎಂದಿಗೂ ಕೈಬಿಡುವುದಿಲ್ಲ, ಕಾಫಿ ವಿರಾಮ ಕೊಂಡಿಲ್ಲ, ಒಂದೇ ಪ್ರಶ್ನೆಯನ್ನು ಎರಡು ಬಾರಿ ಕೇಳಿದರೂ ಮುಕ್ಕಾಲುಮಾಡುವುದಿಲ್ಲ!
+
+### ಜನಪ್ರಿಯ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ಮತ್ತು ಅವುಗಳ ಉಪಯೋಗಗಳು
+
+```mermaid
+mindmap
+  root((Programming Languages))
+    ವೆಬ್ ಅಭಿವೃದ್ಧಿ
+      JavaScript
+        ಮುಂಭಾಗ ಮಾಯಾಜಾಲ
+        ಸಂವಹನಾತ್ಮಕ ವೆಬ್‌ಸೈಟ್‌ಗಳು
+      TypeScript
+        JavaScript + ಟೈಪ್‌ಗಳು
+        ಎಂಟರ್ಪ್ರೈಸ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು
+    ಡೇಟಾ & AI
+      Python
+        ಡೇಟಾ ವಿಜ್ಞಾನ
+        ಯಂತ್ರ ಅಧ್ಯಯನ
+        ಸ್ವಯಂಚಾಲನೆ
+      R
+        ಅಂಕಿ ಅಂಶಗಳು
+        ಸಂಶೋಧನೆ
+    ಮೊಬೈಲ್ ಅಪ್ಪಳು
+      Java
+        ಆಂಡ್ರಾಯ್ಡ್
+        ಎಂಟರ್ಪ್ರೈಸ್
+      Swift
+        iOS
+        ಆಪಲ್ ಪರಿಸರ
+      Kotlin
+        ಆಧುನಿಕ ಆಂಡ್ರಾಯ್ಡ್
+        ಕ್ರಾಸ್-ಪ್ಲಾಟ್‌ಫಾರ್ಮ್
+    ಸಿಸ್ಟಂಗಳು & ಕಾರ್ಯಕ್ಷಮತೆ
+      C++
+        ಆಟಗಳು
+        ಕಾರ್ಯಕ್ಷಮತೆ ಮುಖ್ಯ
+      Rust
+        ಮეხುರಿ ಸುರಕ್ಷತೆ
+        ಸಿಸ್ಟಂ ಪ್ರೋಗ್ರಾಮಿಂಗ್
+      Go
+        ಕ್ಲೌಡ್ ಸೇವೆಗಳು
+        ವಿಸ್ತರಣೀಯ ಬ್ಯಾಕ್‌ಎಂಡ್
+```
+| ಭಾಷೆ | ಉತ್ತಮ ಬಳಕೆ | ಯಾವ್ದಕ್ಕೆ ಜನಪ್ರಿಯವಾಗಿದ್ದು |
+|----------|----------|------------------|
+| **JavaScript** | ವೆಬ್ ಅಭಿವೃದ್ಧಿ, ಬಳಕೆದಾರ ಮುಖಪುಟಗಳು | ಬ್ರೌಸರ್ ಗಳಲ್ಲಿ ಚಲಿಸುತ್ತದೆ, ಇಂಟರಾಕ್ಟಿವ್ ವೆಬ್‌ಸೈಟ್ ಗಳನ್ನು ಶಕ್ತಿ ನಿಡುತ್ತದೆ |
+| **Python** | ಡೇಟಾ ವಿಜ್ಞಾನ, ಸ್ವಯಂಚಾಲನೆ, ಏಐ | ಓದಲು ಸುಲಭ, ಬಹುಶಕ್ತಿಯ ಗ್ರಂಥಾಲಯಗಳು |
+| **Java** | ಎಂಟರ್ಪ್ರೈಸ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು, ಆಂಡ್ರಾಯ್ಡ್ ಆಪ್ಸ್ | ವೇದಿಕೆ-ಸ್ವತಂತ್ರ, ಬೃಹತ್ ವ್ಯವಸ್ಥೆಗಳಿಗೆ ದೃಢ |
+| **C#** | ವಿಂಡೋಸ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು, ಆಟ ಮಹಿಳತ್ವ | Microsoft ಪರಿಕಲ್ಪನೆ ಸಹಕಾರ |
+| **Go** | ಕ್ಲೌಡ್ ಸರ್ವೀಸ್ ಗಳು, ಬ್ಯಾಕ್ಎಂಡ್ ವ್ಯವಸ್ಥೆಗಳು | ವೇಗವಾದ, ಸರಳ, ಆಧುನಿಕ ಗಣನೆಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ |
+
+### ಹೈ-ಲೆವೆಲ್ vs ಲೋ-ಲೆವೆಲ್ ಭಾಷೆಗಳು
+
+ಚನ್ನಾಗಿ, ಇದು ನಿಜವಾಗಿಯೂ ನನ್ನ ಮೆದುಳನ್ನು ಮುರಿದ ಕಲ್ಪನೆಯಾಗಿತ್ತು ಬರುತ್ತಿದ್ದಾಗ, ನಾನು ನನ್ನಿಗೆ ಅರ್ಥ ಮಾಡಿದ ಉಭಯತೆಯನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಬಯಸುತ್ತೇನೆ – ಮತ್ತು ಇದು ನಿಮಗೆ ಸಹ ಸಹಾಯ ಮಾಡುವುದಾಗಿ ನಾನು ಆಶಿಸುತ್ತೇನೆ!
+
+ನೀವು ಉಳಿದಿನ್ಕೆ ಭಾಷೆ ಮಾತನಾಡದೇ ಇರುವ ದೇಶಕ್ಕೆ ಹೋಗಿದ್ದೀರಿ ಎಂದು ಕಲ್ಪಿಸಿ ಮತ್ತು ನೀವು ತುರ್ತಾಗಿ ಹತ್ತಿರದ ಬಾತ್ರೂಂ ಹುಡುಕಬೇಕಾಗಿದೆ (ನಾವು ಎಲ್ಲರೂ ಇಂತಹ ಅನುಭವಗಳಿವೆ, ಸರಿ? 😅):
+
+- **ಲೋ-ಲೆವೆಲ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್** ಅಂದರೆ ಅಲ್ಲಿ ಬೆಳೆದ ಹಿರಿಯರು ಮಾತನಾಡುವ ಭಾಷೆಯನ್ನು ಹಳೇ ಹಾದಿ ತಿಳಿದುಕೊಂಡು, ಅನುಭವದ ಅರ್ಥ, ಸ್ಥಳೀಯ ಸಂಸ್ಕೃತಿ ಮತ್ತು ಜೋಕ್ಸ್ ಬಳಸಿ ಅಮೂಲ್ಯ ಸಂವಾದ ಮಾಡುವಂತೆ. ಅದ್ಭುತ ಮತ್ತು ಅತೀ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ... ನೀವು fluent ಆಗಿದ್ದರೆ! ಆದರೆ ನೀವು ಕೇವಲ ಬಾತ್ರೂಂ ಹುಡುಕಲು ಬಯಸುತ್ತಿರುವಾಗ ತುಂಬಾ ಅತಿಭಾರವಾಗಿರುತ್ತದೆ.
+
+- **ಹೈ-ಲೆವೆಲ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್** ಅದ್ಹೇಗೆ ಅದ್ಭುತ ಸ್ಥಳೀಯ ಗೆಳೆಯನಿರುವಂತೆ, ನೀವು ಸರಳ ಇಂಗ್ಲಿಷ್ ನಲ್ಲಿ "ನನಗೆ ಬಾತ್ರೂಂ ಬೇಕು" ಎಂದು ಹೇಳಬಹುದು ಮತ್ತು ಅವರು ಎಲ್ಲಾ ಸಂಸ್ಕೃತಿಕ ಅನುವಾದವನ್ನು ಮಾಡಿ ಸಮಯದಿಂದ ನೇರ, ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತಾರೆ.
+
+ಪ್ರೋಗ್ರಾಮಿಂಗ್ ನ ದೃಷ್ಟಿಕೋಣದಲ್ಲಿ:
+- **ಲೋ-ಲೆವೆಲ್ ಭಾಷೆಗಳು** (ಅಸೆಂಬ್ಲಿ ಅಥವಾ C) ನಿಮಗೆ ಕಂಪ್ಯೂಟರ್ ನ actual hardware ಜೊತೆಗೆ ವಿವರವಾದ ಸಂವಾದ ಮಾಡಲು ಅವಕಾಶ ಮಾಡುತ್ತವೆ, ಆದರೆ ನಿಮ್ಮಂತೆ ಯಂತ್ರನಂತೆ ತೀರ್ಮಾನಿಸಬೇಕು, ಇದು ಒಂದು ದೊಡ್ಡ ಮಾನಸಿಕ ಬದಲಾವಣೆ!
+- **ಹೈ-ಲೆವೆಲ್ ಭಾಷೆಗಳು** (JavaScript, Python, ಅಥವಾ C#) ನೀವು ಹ್ಯೂಮನಾಗಿ ಯೋಚಿಸುವಂತೆ ಮಾಡಿ, ಆ ಸಮಯದಲ್ಲಿ ಯಂತ್ರ ಭಾಷೆಯನ್ನು ಹಿಂಖಾಲಿನಲ್ಲಿ ನಿಭಾಯಿಸುತ್ತವೆ. ಜೊತೆಗೆ, ಇವು ಸಹಾನುಭೂತಿ ಹೊಂದಿದ ದೊಡ್ಡ ಸಮುದಾಯಗಳೊಡನೆ ಬರುತ್ತವೆ, ಇದು ಹೊಸವರಾಗಿ ಇದ್ದ ಅನುಭವವನ್ನು ನೆನಸಿ ಸಹಾಯ ಮಾಡಲು ಉತ್ತಮರು!
+
+ನಾನು ಯಾವ ದಾರಿಯೊಂದಿಗೆ ನಿಮ್ಮನ್ನು ಪ್ರಾರಂಭಿಸಲು ಶಿಫಾರಸು ಮಾಡುತ್ತೇನೆ ಗೊತ್ತಾ? 😉 ಹೈ-ಲೆವೆಲ್ ಭಾಷೆಗಳು ತರಬೇತಿ ಚಕ್ರಗಳಂತಿವೆ, ನೀವು ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಬಯಸದಿರಿ ಏಕೆಂದರೆ ಅವು ಒಟ್ಟಾರೆ ಅನುಭವವನ್ನು ಅತ್ಯಂತ ಸುಂದರ ಮಾಡಿಸುತ್ತವೆ!
+
+```mermaid
+flowchart TB
+    A["👤 ಮಾನವ ಚಿಂತನೆ:<br/>'ನಾನು ಫಿಬೊನಾಚಿ ಸಂಖ್ಯೆಗಳ गणನೆ ಮಾಡಬೇಕಾಗಿದೆ'"] --> B{ಭಾಷಾ ಮಟ್ಟವನ್ನು ಆರಿಸಿ}
+    
+    B -->|ಹೈ-ಲೆವೆಲ್| C["🌟 ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್/ಪೈಥಾನ್<br/>ಓದಲು ಮತ್ತು ಬರೆಯಲು ಸುಲಭ"]
+    B -->|ಲೋ-ಲೆವೆಲ್| D["⚙️ ಅಸೆಂಬೆಲಿ/ಸಿ<br/>ನೇರ ಹಾರ್ಡ್‌ವೇರ್ ನಿಯಂತ್ರಣ"]
+    
+    C --> E["📝 ಬರೆಯಿರಿ: fibonacci(10)"]
+    D --> F["📝 ಬರೆಯಿರಿ: mov r0,#00<br/>sub r0,r0,#01"]
+    
+    E --> G["🤖 ڪمپ್ಯೂಟರ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ:<br/>ಭಾಷಾಂತರಕಾರ ಜಟಿಲತೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ"]
+    F --> G
+    
+    G --> H["💻 ಎಂತಹ ಫಲಿತಾಂಶ:<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
+    
+    style C fill:#e1f5fe
+    style D fill:#fff3e0
+    style H fill:#e8f5e8
+```
+### ನಾನ್ ನಿಮಗೆ ತೋರಿಸುತ್ತೇನೆ ಏಕೆ ಹೈ-ಲೆವೆಲ್ ಭಾಷೆಗಳು ತುಂಬಾ ಸ್ನೇಹಪರವಾಗಿವೆ
+
+ಚನ್ನಾಗಿ, ನಾನು ನಿಮಗೆ ಹೈ-ಲೆವೆಲ್ ಭಾಷೆಗಳೊಂದಿಗೆ ಶಾಲಿತವಾದುದನ್ನು ತೋರಿಸುವೆ, ಆದರೆ ಮೊದಲು ಒಂದು ಮಾತು ಹೇಳಿ. ಮೊದಲ ಕೇಸ್ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿದಾಗ ಪ್ಯಾನಿಕ್ ಆಗಬೇಡಿ! ಅದು ಭಯಂಕರವಾಗಿಯೇ ತೋರುತ್ತದೆ. ಅದೇ ನಾನು ಹೇಳಬೇಕಾದ ಮಹತ್ವ.
+
+ನಾವು ಅದೇ ಕಾರ್ಯವನ್ನು ಎರಡು ವಿಭಿನ್ನ ಶೈಲಿಗಳಲ್ಲಿ ಬರೆಯಲಿದ್ದೇವೆ. ಎರಡೂ ಫಿಬೋನ್ಯಾಸಿ ಕ್ರಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತವೆ – ಇದು ಸುಂದರ ಗಣಿತೀಯ ಮಾದರಿಯಾಗಿದೆ, प्रत्येक ಸಂಖ್ಯೆ ಹಿಂದಿನ ಎರಡು ಸಂಖ್ಯೆಗಳ ಮೊತ್ತ: 0, 1, 1, 2, 3, 5, 8, 13... (ಆನಂದಕಾರಿ ವಿಚಾರ: ನೀವು ಈ ಮಾದರಿಯನ್ನು ಪ್ರಕೃತಿಯಲ್ಲಿ ಎಲ್ಲೆಡೆ ಕಂಡುಹಿಡಿಯುತ್ತೀರಿ – ಸೂರ್ಯಕಾಂತಿ ಸೀಡಿನ ಸಿಪ್ಪಣೆ, ಪೈನ್ ಕೊನೆ ಮಾದರಿ, ಗ್ಯಾಲಕ್ಸಿಗಳ ನಿರ್ಮಾಣವೂ!)
+
+ವೈಭಿನ್ನ್ಯವನ್ನು ನೋಡೋಣವೇ?
+
+**ಹೈ-ಲೆವೆಲ್ ಭಾಷೆ (JavaScript) – ಮಾನವ ಸ್ನೇಹಿ:**
+
+```javascript
+// ಹಂತ 1: ಮೂಲ ಫಿಬೋನಾಚಿ ವ್ಯವಸ್ಥೆ
+const fibonacciCount = 10;
+let current = 0;
+let next = 1;
+
+console.log('Fibonacci sequence:');
+```
+
+**ಈ ಕೋಡ್ ಮಾಡುವುದು ಏನು:**
+- ನಿರ್ಧರಿಸಿ ಎಷ್ಟು ಫಿಬೋನ್ಯಾಸಿ ಸಂಖ್ಯೆಗಳು ಬೇಕು ಎಂಬುದನ್ನು
+- ಎರಡು ವ್ಯತ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಿ ಕ್ರಮದ ಪ್ರಸ್ತುತ ಮತ್ತು ಮುಂದಿನ ಸಂಖ್ಯೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು
+- ಪ್ರಾರಂಭಿಕ ಮೌಲ್ಯಗಳನ್ನು (0 ಮತ್ತು 1) ಹೊಂದಿಸಿ, ಫಿಬೋನ್ಯಾಸಿ ಮಾದರಿ ರೂಪಿಸುವಂತೆ
+- ನಮ್ಮ output ಗೆ ಹೆಡರ್ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ
+
+```javascript
+// ಹಂತ 2: ಲೂಪ್‌ನೊಂದಿಗೆ ಕ್ರಮವನ್ನು ಉತ్పन्नಿಸಿ
+for (let i = 0; i < fibonacciCount; i++) {
+  console.log(`Position ${i + 1}: ${current}`);
+  
+  // ಕ್ರಮದಲ್ಲಿ ಮುಂದಿನ ಸಂಖ್ಯೆ ಗಣನೆ ಮಾಡಿ
+  const sum = current + next;
+  current = next;
+  next = sum;
+}
+```
+
+**ಇಲ್ಲಿ ಏನು ನಡೆಯುತ್ತಿದೆ:**
+- `for` ಲೂಪ್ ನಿಂದ ಕ್ರಮದ ಎಲ್ಲಾ ಸ್ಥಾನಗಳಲ್ಲಿ ಸಂಚರಿಸಿ
+- ಪ್ರತಿ ಸಂಖ್ಯೆಯನ್ನು ಅದರ ಸ್ಥಾನ ಜೊತೆಗೆ ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ ಪ್ರಕಾರ ತೋರಿಸಿ
+- ಪ್ರಸ್ತುತ ಮತ್ತು ಮುಂದಿನ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಿ ಮುಂದಿನ ಫಿಬೋನ್ಯಾಸಿ ಸಂಖ್ಯೆಯನ್ನು ಲೆಕ್ಕಿಸಿ
+- ನಮ್ಮ ಟ್ರ್ಯಾಕಿಂಗ್ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಮುಂದಿನ ಸಂಚರಣೆಗೆ ವಿವರಿಸಿ
+
+```javascript
+// ಹಂತ 3: ಆಧುನಿಕ ಕಾರ್ಯಾತ್ಮಕ ವಾಗಿ
+const generateFibonacci = (count) => {
+  const sequence = [0, 1];
+  
+  for (let i = 2; i < count; i++) {
+    sequence[i] = sequence[i - 1] + sequence[i - 2];
+  }
+  
+  return sequence;
+};
+
+// ಬಳಕೆ ಉದಾಹರಣೆ
+const fibSequence = generateFibonacci(10);
+console.log(fibSequence);
+```
+
+**ಈ ಮೇಲಿನುದರಲ್ಲಿ:**
+- ಆಧುನಿಕ ತುದಿ არაಡಿಗೆ ಕಾರ್ಯವನ್ನು ಸೃಷ್ಟಿಸಿದೆ
+- ಸರಣಿಯನ್ನು ರೂಪಿಸಿತು ಮತ್ತು ಪೂರ್ಣ ಕ್ರಮವನ್ನು ಸಂಗ್ರಹಿಸಿತು, ತೋರಿಸುವ ಬದಲು
+- ಪೂರ್ವದ ಮೌಲ್ಯಗಳಿಂದ ಪ್ರತಿ ಹೊಸ ಸಂಖ್ಯೆಯನ್ನು ಲೆಕ್ಕಿಸಲು ಸರಣಿ ಸೂಚಕ ಉಪಯೋಗಿಸಿತು
+- ಕಾರ್ಯಕ್ರಮದ ಇತರ ಭಾಗಗಳಲ್ಲಿ ಉಪಯೋಗಿಸಲು ಪೂರ್ಣ ಕ್ರಮವನ್ನು ಮರುಪಡೆಯಿತು
+
+**ಲೋ-ಲೆವೆಲ್ ಭಾಷೆ (ARM Assembly) – ಕಂಪ್ಯೂಟರ್ ಸ್ನೇಹಿ:**
+
+```assembly
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+JavaScript ನ ಆವೃತ್ತಿ ಇರುವಂತೆ ಇಂಗ್ಲಿಷ್ ಸೂಚನೆಗಳಂತೆ ಓದುತ್ತದೆ, ಅಸೆಂಬ್ಲಿ ಆವೃತ್ತಿ ನೇರವಾಗಿ ಕಂಪ್ಯೂಟರ್ ಪ್ರೊಸೆಸರ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುವ ರಹಸ್ಯ ಆದೇಶಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಎರಡೂ ಅದೇ ಕಾರ್ಯವನ್ನು ನೆರವೆರಿಸುತ್ತವೆ, ಆದರೆ ಹೈ-ಲೆವೆಲ್ ಭಾಷೆಮಾನವರಿಗಾಗಿ ಸರಳವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು, ಬರೆಯುವುದು ಮತ್ತು ನಿರ್ವಹಿಸುವುದು ಸುಲಭ.
+
+**ನೀವು ಗಮನಿಸುವ ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸಗಳು:**
+- **ಓದುಗೊಳ್ಳುವ ಬಾಧ್ಯತೆ**: JavaScript ನಲ್ಲಿ `fibonacciCount` ಹಾಗು ಅರ್ಥವಂತಿತನದ ಹೆಸರುಗಳಿವೆ, ಅಸೆಂಬ್ಲಿ ಕೇವಲ `r0`, `r1` ರೀತಿಯ ಸಂಕ್ಷಿಪ್ತ ಲೇಬಲ್ ಗಳು ಇರುವವು
+- **ವಿಚಾರಣೆಗಳು**: высокого ಪದಗಳಲ್ಲಿ ವಿವರಣಾತ್ಮಕ ಟಿಪ್ಪಣಿಗಳನ್ನು ಉತ್ತೇಜಿಸುತ್ತವೆ, ಇದು ಕೋಡ್ ಸ್ವಯಂ-ಡಾಕ್ಯುಮೆಂಟಿಂಗ್ ಆಗುತ್ತದೆ  
+- **ರಚನೆ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ತರ್ಕದ ಹರಿವು ಜನರು ಸಮಸ್ಯೆಗಳನ್ನು ಹಂತ ಹಂತವಾಗಿ ಯೋಚಿಸುವ ರೀತಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ  
+- **ಪರಿಹಾರ**: ವಿಭಿನ್ನ ಅಗತ್ಯಗಳಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆವೃತ್ತಿಯನ್ನು ನವೀಕರಿಸುವುದು ಸರಳ ಮತ್ತು ಸ್ಪಷ್ಟವಾಗಿದೆ  
+
+✅ **ಫೈಬೋನಾಚಿ ಕ್ರಮಬದ್ಧತೆ ಬಗ್ಗೆ**: ಈ ಅತೀ ಸುಂದರ ಸಂಖ್ಯಾ ಪ್ಯಾಟರ್ನ್ (ಪ್ರತಿ ಸಂಖ್ಯೆ ತನ್ನ ಮೊದಲು ಎರಡು ಸಂಖ್ಯೆಗಳ ಮೊತ್ತಕ್ಕೆ ಸಮಾನವಾಗಿರುತ್ತದೆ: 0, 1, 1, 2, 3, 5, 8...) ನೈಸರ್ಗಿಕವಾಗಿ *ಪ್ರತಿಯೊಂದೂಡೆ* ಕಂಡುಬರುತ್ತದೆ! ನೀವು ಇದನ್ನು ಸೂರ್ಯಕಾಂತಿ ಕಾಳೇಬೆರಕಗಳ ಕವಾಟಗಳಲ್ಲಿ, ಪೈನ್ ಕಾಂನೆಯ ವಿನ್ಯಾಸದಲ್ಲಿ, ನೌಟಿಲಸ್ ಶೆಲ್ ತಿರುವುಗಳಲ್ಲಿ ಮತ್ತು ಮರಕಾಲುಗಳು ಬೆಳೆದಿರುವ ರೀತಿಯಲ್ಲಿ ಕಂಡುಹಿಡಿಯುತ್ತೀರಿ. ಗಣಿತ ಮತ್ತು ಕೋಡ್ ನಮಗೆ ಪ್ರಕೃತಿ ಬಳಸುವ ಮಾದರಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಪುನರ್ಉತ್ಪಾದನೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುವುದನ್ನು ಎಷ್ಟೋ ಆಶ್ಚರ್ಯಕರವಾಗಿದೆ!  
+
+## ಮಾಯಾಜಾಲವನ್ನು ಉಂಟುಮಾಡುವ ಕಟ್ಟಡ ಬ್ಲಾಕ್ಗಳು
+
+ಸರಿ, ಈಗ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ಯಾಕೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ನೋಡಿ, ಈಗ ಪ್ರತಿಯೊಂದು ಪ್ರೋಗ್ರಾಮ್ ಸೃಷ್ಟಿಸುವ ಸಂಪೂರ್ಣ ಮೂಲಭೂತ ಘಟಕಗಳನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ. ಇವುಗಳನ್ನು ನಿಮ್ಮ ಪ್ರಿಯತಮ ಬಾಣಸಿಗೆಯ ಮುಖ್ಯಾಂಶಗಳೆಂದು ಭಾವಿಸಿ — ಪ್ರತಿಯೊಂದರ ಕಾರ್ಯವನ್ನು ತಿಳಿದುಕೊಂಡ ನಂತರ, ನೀವು ಬಹುಶಃ ಯಾವುದಾದರೂ ಭಾಷೆಯಲ್ಲಿ ಕೋಡ್ ಓದಲೂ ಬರೆದೂ ಸಹ ಸಾಧ್ಯ!  
+
+ಇದು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ವ್ಯಾಕರಣವನ್ನು ಕಲಿಯುವ ತಾತ್ಪರ್ಯ. ಶಾಲೆಯಲ್ಲಿರುವಾಗ ನಾಮಪುರುಷ, ಕ್ರಿಯಾಪದಿ ಮತ್ತು ವಾಕ್ಯ ರಚನೆ ಕಲಿತಿರಾ? ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತನ್ನದೇ ಆಗಿ ವ್ಯಾಕರಣವನ್ನು ಹೊಂದಿದೆ ಮತ್ತು ಸತ್ಯ ಹೇಳಬೇಕೆಂದರೆ, ಅದು ಇಂಗ್ಲಿಷ್ ವ್ಯಾಕರಣಕ್ಕಿಂತ ಬಹಳ ನ್ಯಾಯಸಂಗತ ಮತ್ತು ಕ್ಷಮಾಸೀಲವಾಗಿದೆ! 😄  
+
+### ಹೇಳಿಕೆಗಳು: ಹಂತ ಹಂತದ ಸೂಚನೆಗಳು
+
+ನಾವು **ಹೇಳಿಕೆಗಳ**ೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸೋಣ – ಇವು ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ ಜೊತೆಗೆ ಸಂಭಾಷಣೆಯಲ್ಲಿನ ವಾಕ್ಯಗಳಂತೆ. ಪ್ರತಿ ಹೇಳಿಕೆಯಲ್ಲಿ ಕಂಪ್ಯೂಟರ್‌ಗೆ ಒಂದು ನಿಖರ ಕಾರ್ಯವನ್ನು ನೀಡಲಾಗುತ್ತದೆ, ಉದಾಹರಣೆಗೆ: "ಇಲ್ಲಿ ಎಡಕ್ಕೆ ತಿರುವು ಮಾಡಿ," "ಕೆಂಪು ಬೆಳಕಿನಲ್ಲಿ ನಿಲ್ಲಿ," "ಅಲ್ಲಿ ಪಾರ್ಕ್ ಮಾಡಿ."  
+
+ನನಗೆ ಹೇಳಿಕೆಗಳಲ್ಲಿ ಇಷ್ಟವಾದುದು ಅವು ಸಾಮಾನ್ಯವಾಗಿ ಓದಲು ಸುಲಭವಾಗಿರುವದು. ಇದು ನೋಡಿ:  
+
+```javascript
+// ಏಕಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಮೂಲ ಹೇಳಿಕೆಗಳು
+const userName = "Alex";                    
+console.log("Hello, world!");              
+const sum = 5 + 3;                         
+```
+  
+**ಈ ಕೋಡ್ ಏನು ಮಾಡುತ್ತದೆ:**  
+- ಬಳಕೆದಾರರ ಹೆಸರನ್ನು ಸಂಗ್ರಹಿಸಲು ಸ್ಥಿರವಾದ ಚರವನ್ನು ಘೋಷಿಸುತ್ತದೆ  
+- ಕಾನ್ಸೋಲ್ ಔಟ್‌ಪುಟ್‌ಗೆ ಶುಭಾಶಯ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ  
+- ಗಣಿತ ಚಟುವಟಿಕೆಯ ಫಲಿತಾಂಶವನ್ನು ಲెక్కಿಸಿ ಸಂಗ್ರಹಿಸುತ್ತದೆ  
+
+```javascript
+// ವೆಬ್ ಪುಟಗಳೊಂದಿಗೆ ಸಂವಹನ ಮಾಡುವ ಹೇಳಿಕೆಗಳು
+document.title = "My Awesome Website";      
+document.body.style.backgroundColor = "lightblue";
+```
+  
+**ಹಂತ ಹಂತವಾಗಿ ಸ್ಪಷ್ಟನೆ:**  
+- ಬ್ರೌಸರ್ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವ ವೆಬ್‌ಪುಟ ಶೀರ್ಷಿಕೆಯನ್ನು ಸಂಪಾದಿಸುತ್ತದೆ  
+- ಸಂಪೂರ್ಣ ಪುಟದೇಹದ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ  
+
+### ಚರಗಳು: ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಮಿನ ಸ್ಮೃತಿ ವ್ಯವಸ್ಥೆ
+
+ಸರಿ, **ಚರಗಳು** ನಿಜವಾಗಿಯೂ ನನಗೆ ಅತ್ಯಂತ ಇಷ್ಟವಾದ ಸಂಪ್ರದಾಯಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ಏಕೆಂದರೆ ಅವು ನಿತ್ಯ ಉಪಯೋಗಿಸುವ ಸಂಗತಿಗಳಂತೆ!  
+
+ನಿಮ್ಮ ಫೋನಿನ ಸಂಪರ್ಕ ಪಟ್ಟಿಯನ್ನು ಆರಾಧಿಸಿ. ಎಲ್ಲರಿಗಾದರೂ ಫೋನ್ ಸಂಖ್ಯೆಯನ್ನು ಮರ್ಮಗೈದಿರಲ್ಲ – ಬದಲಿಗೆ "ಅಮ್ಮ," "ಸುಪ್ತ ಸ್ನೇಹಿತ," ಅಥವಾ "ರಾತ್ರಿ 2 ರವರೆಗೆ ಪಿಜ್ಜಾ ಡೆಲಿವರಿ ಮಾಡುವ ಹೋಟೆಲ್" ಎಂದು ಸಂಗ್ರಹಿಸಿ ನಿಮ್ಮ ಫೋನ್ ನಂಬರ್‌ಗಳನ್ನು ನೆನಪಿಡುತ್ತದೆ. ಚರಗಳೂ ಅದೇ ರೀತಿಯ ಕಾರ್ಯ ಮಾಡುತ್ತವೆ! ಅವು ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಮ್ ಮಾಹಿತಿಯನ್ನು ಸಂಗ್ರಹಿಸಲು ಮತ್ತು ನಂತರ ಸೂಕ್ತ ನಾಮವನ್ನು ಉಪಯೋಗಿಸಿ ಮರಳಿಸಿ ಪಡೆಯಲು ಲೇಬಲ್ ಮಾಡಲಾದ ಪಾತ್ರೆಗಳು.  
+
+ಇಲ್ಲಿ ನರಮಿಣೆಯನ್ನು ನೋಡಿ: ಚರಗಳು ಪ್ರೋಗ್ರಾಂ ಚಲಿಸುವಂತೆ ಬದಲಾಗುತ್ತವೆ (ಅದರಮುಖ್ಯ ಕಾರಣದಿಂದ "ಚರ" ಎಂದು ಕರೆಯಲಾಗಿದೆ). ನೀವು ಹೆಚ್ಚು ಉತ್ತಮ ಪಿಜ್ಜಾ ಸ್ಥಳವನ್ನು ಕಂಡುಹಿಡಿದಂತೆ, ಚರಗಳನ್ನು ನವೀಕರಿಸಬಹುದು!  
+
+ಈ ಸರಳತೆಯನ್ನು ಹೇಗೆ ಮಾಡಬಹುದು ನೋಡೋಣ:  
+
+```javascript
+// ಹಂತ 1: ಮೂಲ ಚರಗಳು ಸೃಷ್ಟಿಸುವುದು
+const siteName = "Weather Dashboard";        
+let currentWeather = "sunny";               
+let temperature = 75;                       
+let isRaining = false;                      
+```
+  
+**ಈ ಧಾರಣೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು:**  
+- ಬದಲಾಗದ ಮೌಲ್ಯಗಳನ್ನು `const` ಚರಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ (ಉದಾ: ತಾಣ ಹೆಸರು)  
+- ಬದಲಾಗಬಹುದಾದ ಮೌಲ್ಯಗಳಿಗೆ `let` ಉಪಯೋಗಿಸಿ  
+- ವಿವಿಧ ಡೇಟಾ ಪ್ರಕಾರಗಳನ್ನು ಅನ್ವಯಿಸಿ: ಸ್ಟ್ರಿಂಗ್‌ಗಳು (ಪಠ್ಯ), ಸಂಖ್ಯೆಗಳು, ಬುಲುನ್‌ಗಳು (ನಿಜ/ಬ್ರಹ್ಮ)  
+- ಪ್ರತಿ ಚರವು ಏನು ಹೊಂದಿದೆ ಎಂದು ವಿವರಿಸುವ ಹೆಸರುಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ  
+
+```javascript
+// ಹಂತ 2: ಸಂಬಂಧಿಸಿದ ಡೇಟಾವನ್ನು ಗುಂಪು ಮಾಡಲು ವಸ್ತುಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು
+const weatherData = {                       
+  location: "San Francisco",
+  humidity: 65,
+  windSpeed: 12
+};
+```
+  
+**ಮೇಲಿನಲ್ಲಿಈವು:**  
+- ಸಂಬಂಧಿಸಿದ ಹವಾಮಾನ ಮಾಹಿತಿಯನ್ನು ಗುಂಪು ಮಾಡಲು ಒಂದು ವಸ್ತುವನ್ನು ರಚಿಸಲಾಗಿದೆ  
+- ವಿವిధ ಡೇಟಾ ತುಂಡುಗಳನ್ನು ಒಂದು ಚರ ಹೆಸರಿನ ಅಡಿಯಲ್ಲಿ ವ್ಯವಸ್ಥಿತಗೊಳಿಸಲಾಗಿದೆ  
+- ಪ್ರತಿ ಮಾಹಿತಿ ತುಂಡಿಗೆ ಸ್ಪಷ್ಟ ಲೇಬಲಿಂಗ್ ಮಾಡಲು ಕೀ-ಮೌಲ್ಯ ಜೋಡಿಗಳನ್ನು ಉಪಯೋಗಿಸಲಾಗಿದೆ  
+
+```javascript
+// ಹಂತ 3: ಚರಗಳನ್ನು ಬಳಸುವುದು ಮತ್ತು ನವೀಕರಿಸುವುದು
+console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
+console.log(`Wind speed: ${weatherData.windSpeed} mph`);
+
+// ಬದಲಾವಣೆ ಮಾಡಬಹುದಾದ ಚರಗಳನ್ನು ನವೀಕರಿಸುವುದು
+currentWeather = "cloudy";                  
+temperature = 68;                          
+```
+  
+**ಪ್ರತಿ ಭಾಗವನ್ನು ತಿಳಿದುಕೊಳ್ಳೋಣ:**  
+- ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ `${}` ಬಳಸಿ ಮಾಹಿತಿ ಪ್ರದರ್ಶಿಸಿ  
+- ಡಾಟ್ ಸೂಚನೆಯನ್ನು ಉಪಯೋಗಿಸಿ ವಸ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಪ್ರಾಪ್ತಿಮಾಡಿ (`weatherData.windSpeed`)  
+- ಬದಲಾಯಿಸುತ್ತಿದ್ದ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವಂತೆ `let` ಚರಗಳನ್ನು ನವೀಕರಿಸಿ  
+- ವಿವಿಧ ಚರಗಳನ್ನು ಸಂಯೋಜಿಸಿ ಅರ್ಥಮಯ ಸಂದೇಶಗಳು ಸೃಷ್ಟಿಸಿ  
+
+```javascript
+// ಹಂತ 4: ಸ್ವಚ್ಛವಾದ ಕೋಡಿಗಾಗಿ ಆಧುನಿಕ ವಿನಾಶಕ ರಚನೆ
+const { location, humidity } = weatherData; 
+console.log(`${location} humidity: ${humidity}%`);
+```
+  
+**ನಿಮಗೆ ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದುದು:**  
+- ವಸ್ತುಗಳಿಂದ ನಿರ್ದಿಷ್ಟ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಡಿಸ್ಟ್ರಕ್ಚರಿಂಗ್ ನಿಯೋಜನೆ ಬಳಸಿ ತೆಗೆಯಿರಿ  
+- ವಸ್ತು ಕೀಲಿಗಳಷ್ಟೇ ಹೆಸರಿನ ನವಚರಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ಮಿಸಿ  
+- ಪುನರಾವರ್ತಿತ ಡಾಟ್ ಸೂಚನೆಯು ತಪ್ಪಿಸುವ ಮೂಲಕ ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸಿ  
+
+### ನಿಯಂತ್ರಣ ಹರಿವು: ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಮ್‌ಗೆ ಯೋಚಿಸುವಿಕೆಯನ್ನು ಕಲಿಸುವುದು
+
+ಸರಿ, ಇದು ನಿಜವಾಗಿಯೂ ಪ್ರोग್ರಾಮಿಂಗ್ ಅನ್ನು ಮನಸಿಗೆ ಬರುವಂತೆ ಮಾಡುವುದಾಗಿದ್ದು! **ನಿಯಂತ್ರಣ ಹರಿವು** ಅಂದರೆ ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಮ್‌ಗೆ ಬುದ್ಧಿವಂತ ನಿರ್ಧಾರಗಳನ್ನು ಹೇಗೋ ಮಾಡಿ ಕಲಿಸುವುದು, ನೀವು ಪ್ರತಿದಿನವೂ ಯೋಚಿಸದೆ ಮಾಡಿಕೊಳ್ಳುವಂತೆ.  
+
+ಕಳೆವುದಾಗಿ ಧರಿಸೋಣ: ನೀವು ಈ ಬೆಳಿಗ್ಗೆ "ಮಳೆ ಬೀಳುವಿದ್ದರೆ ಝಾಳಿಯನ್ನು ತೆಗೆದುಕೊಳ್ಳು, ತಣ್ಣಗಿದ್ದರೆ ಜಾಕೆಟ್ ಧರಿ, ತಡವಾಗಿ ಹೊರಹೋಗುತ್ತಿದ್ದರೆ ಉಪಾಹಾರ ಬಿಡಿಸಿ ಕಾಫಿ ತೆಗೆದುಕೊಳ್ಳು" ಎಂಬದ್ದು ನೀವು ಅನುಸರಿಸಿದ್ದೀರಂತೆ. ನಿಮ್ಮ ಮೆದುಳು ನೈಸರ್ಗಿಕವಾಗಿ ಈ if-then ತರ್ಕವನ್ನು ಅನೇಕವೇಳೆ ಪಾಲಿಸುತ್ತದೆ!  
+
+ಇದರಿಂದ ಪ್ರೋಗ್ರಾಮ್ಗಳು ಬುದ್ಧಿವಂತ ಮತ್ತು ಜೀವಂತವಾಗಿವೆ ಎನ್ನುವುದು, ಕೆಲವೇ ವಿಚಿತ್ರ, ನಿರಾಧಾರಿತ ಸ್ಕ್ರಿಪ್ಟ್ ಅನುಸರಿಸುವುದಲ್ಲ. ಅವು ಒಂದು ಪರಿಸ್ಥಿತಿ ನೋಡುತ್ತವೆ, ನಡೆಯುತ್ತಿರುವುದನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡುತ್ತವೆ ಮತ್ತು ಸೂಕ್ತವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ. ಇದು ಪ್ರೋಗ್ರಾಮ್‌ಗೆ ಒಂದು ಮೆದುಳನ್ನು ಕೊಡುವಂತಿದೆ, ಅದು ಹೊಂದಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ!  
+
+ಇದು ಹೇಗೆ ಸುಂದರವಾಗಿ ಕೆಲಸಮಾಡುತ್ತದೆ ಎಂದು ನೋಡೋಣ:  
+
+```javascript
+// ಹಂತ 1: ಮೂಲ ಷರತ್ತು ಲಾಜಿಕ್
+const userAge = 17;
+
+if (userAge >= 18) {
+  console.log("You can vote!");
+} else {
+  const yearsToWait = 18 - userAge;
+  console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
+}
+```
+  
+**ಈ ಕೋಡ್ ಏನು ಮಾಡುತ್ತದೆ:**  
+- ಬಳಕೆದಾರರ ವಯಸಿನ ಮತದಾನ ಅर्हತೆ ಪರೀಕ್ಷಿಸುತ್ತದೆ  
+- ಷರತ್ತು ಫಲಿತಾಂಶ ಆಧರಿಸಿ ವಿಭಿನ್ನ ಕೋಡ್ ಬ್ಲಾಕ್ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ  
+- 18ರೊಳಗೆ ಇದ್ದರೆ ಮತದಾನಕ್ಕೆ ಎಷ್ಟು ಸಮಯ ಬಾಕಿ ಇದೆಯೋ ಲೆಕ್ಕಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರದರ್ಶಿಸುತ್ತದೆ  
+- ಪ್ರತಿ ಸಂದರ್ಭದಲ್ಲಿ ಸ್ಪಷ್ಟ ಮತ್ತು ಉಪಯುಕ್ತ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ  
+
+```javascript
+// ಹಂತ 2: ತರ್ಕಾತ್ಮಕ ಸಂಚಾಲಕರೊಂದಿಗೆ ಅನೇಕ ಶರತ್ತಗಳು
+const userAge = 17;
+const hasPermission = true;
+
+if (userAge >= 18 && hasPermission) {
+  console.log("Access granted: You can enter the venue.");
+} else if (userAge >= 16) {
+  console.log("You need parent permission to enter.");
+} else {
+  console.log("Sorry, you must be at least 16 years old.");
+}
+```
+  
+**ಇಲ್ಲಿ ಏನಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಿ:**  
+- `&&` (ಮತ್ತು) ಆಪರೇಟರ್ ಉಪಯೋಗಿಸಿ ವಿಭಿನ್ನ ಷರತ್ತುಗಳನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ  
+- ವಿವಿಧ ಸಂದರ್ಭಗಳಿಗೆ `else if` ಬಳಸಿ ಷರತ್ತುಗಳ ಹೈರಾರ್ಕಿಯನ್ನೂ ರಚಿಸುತ್ತದೆ  
+- ಅಂತಿಮ `else` ಹೇಳಿಕೆಯಿಂದ ಎಲ್ಲಾ ಸಾಧ್ಯವಾದ ಪ್ರಕರಣಗಳನ್ನು ನಿಭಾಯಿಸುತ್ತದೆ  
+- ಪ್ರತಿ ವಿಭಿನ್ನ ಪರಿಸ್ಥಿತಿಗೆ ನಿರ್ದೇಶನಾತ್ಮಕ ಮತ್ತು ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುತ್ತದೆ  
+
+```javascript
+// ಹೆಜ್ಜೆ 3: ternary ಕಾರ್ಯಾಚರಣೆಯೊಂದಿಗೆ ಸಂಕ್ಷಿಪ್ತ ಶರತ್ತಿನ ಪ್ರಕಟಣೆ
+const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
+console.log(`Status: ${votingStatus}`);
+```
+  
+**ನಿಮ್ಮ ನೆನಪಿನಲ್ಲಿ ಇರಲಿ:**  
+- ಸರಳ ಎರಡು ಆಯ್ಕೆಗಳ ಷರತ್ತುಗಳಿಗೆ ternary ಆಪರೇಟರ್ (`? :`) ಉಪಯೋಗಿಸಿ  
+- ಮೊದಲು ಷರತ್ತು ಬರೆಯಿರಿ, ನಂತರ `?`, ತದನಂತರ ನಿಜವಾದ ಫಲಿತಾಂಶ, ನಂತರ `:`, ನಂತರ ಮೋಸದ ಫಲಿತಾಂಶ ಬರೆಯಿರಿ  
+- ಷರತ್ತಿನ ಆಧಾರದ ಮೇಲೆ ಮೌಲ್ಯಗಳನ್ನು ನಿಗದಿಪಡಿಸುವಾಗ ಈ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸಿ  
+
+```javascript
+// ಹಂತ 4: ಎಷ್ಟೋ ನಿರ್ದಿಷ್ಟ ಪ್ರಕರಣಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು
+const dayOfWeek = "Tuesday";
+
+switch (dayOfWeek) {
+  case "Monday":
+  case "Tuesday":
+  case "Wednesday":
+  case "Thursday":
+  case "Friday":
+    console.log("It's a weekday - time to work!");
+    break;
+  case "Saturday":
+  case "Sunday":
+    console.log("It's the weekend - time to relax!");
+    break;
+  default:
+    console.log("Invalid day of the week");
+}
+```
+  
+**ಈ ಕೋಡ್ ಈ ಕೆಳಗಿನ ಕಾರ್ಯಗಳನ್ನು ನೆರವೇರಿಸುತ್ತದೆ:**  
+- ಚರ ಮೌಲ್ಯವನ್ನು ಹಲವು ವಿಶೇಷ ಪ್ರಕರಣಗಳಿಗೆ ಹೊಂದಿಸಿ  
+- ಹೋಲಿಕೆಯಾಗುವ ಪ್ರಕರಣಗಳನ್ನು (ವಾರದ ಕೆಲಸದ ದಿನಗಳ ವಿರುದ್ಧ ವಾರಾಂತ್ಯ) ಗುಂಪುಮಾಡಿ  
+- ಹೊಂದಿಕೆಯಾಗುವ ವೇಳೆ ಸೂಕ್ತ ಕೋಡ್ ಬ್ಲಾಕ್ ಕಾರ್ಯಗತಗೊಳಿಸಿ  
+- ಅಪೇಕ್ಷಿತವಲ್ಲದ ಮೌಲ್ಯಗಳನ್ನು ನಿಭಾಯಿಸಲು `default` ಪ್ರಕರಣವನ್ನು ಸೇರಿಸಿ  
+- ಮುಂದಿನ ಪ್ರಕರಣಕ್ಕೆ ಕೋಡ್ ಮುಂದುವರೆಯದಂತೆ `break` ಹೇಳಿಕೆಗಳು ಬಳಸಿ  
+
+> 💡 **ವಾಸ್ತವಿಕ ಉದಾಹರಣೆ**: ನಿಯಂತ್ರಣ ಹರಿವು ಎಂದರೆ ಜಗತ್ತಿನ ಅತ್ಯಂತ ವಿಧಿಯುತ ಜಿಪಿಎಸ್ ನಿಯಮಂತ್ರಿ ನಿಮ್ಮಿಗೆ ದಿಕ್ಕು ಸೂಚಿಸುವಂತೆ. ಅದು ಹೇಳಬಹುದು "ಮೆನ್ ಸ್ಟ್ರೀಟಿನಲ್ಲಿ ಟ್ರಾಫಿಕ್ ಇದ್ದರೆ ಹೆದ್ದಾರಿಯನ್ನು ಬಳಸಿ. ಹೆದ್ದಾರಿಯನ್ನು ಕಟ್ಟಡ ಕಾಮಗಾರಿಗಳು ತಡೆಯುತ್ತಿದ್ದರೆ ನဲ့ಪಲ್ಲವೆಂಬ ಮಾರ್ಗ ಪ್ರಯತ್ನಿಸಿ." ಪ್ರೋಗ್ರಾಮ್ಗಳು ಕೂಡ ಇದೇ ರೀತಿಯ ಷರತ್ತುಗತ ತರ್ಕವನ್ನು ಉಪಯೋಗಿಸಿ ವಿಭಿನ್ನ ಪರಿಸ್ಥಿತಿಗಳಿಗೆ ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತವೆ.  
+
+### 🎯 **ಧಾರಣಾ ಪರಿಶೀಲನೆ: ಕಟ್ಟಡ ಬ್ಲಾಕ್ ಮಾಸ್ಟರಿ**
+
+**ನೀವು ಮೂಲಭೂತಗಳನ್ನು ಹೇಗೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತಿದ್ದೀರೋ ನೋಡೋಣ:**  
+- ನಿಮ್ಮದೇ ಪದಗಳಲ್ಲಿ ಒಂದು ಚರ ಮತ್ತು ಹೇಳಿಕೆಯ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ವಿವರಿಸಬಹುದೆ?  
+- ನಿಜ ಜೀವನದ ಒಂದು ಸಂದರ್ಭವನ್ನು ಭಾವಿಸಿ, যেখানে ನೀವು if-then ನಿರ್ಧಾರವನ್ನು ಬಳಸುತ್ತಿದ್ದೀರಿ (ನಮ್ಮ ಮತದಾನ ಉದಾಹರಣೆಗಳಂತೆ)  
+- ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತರ್ಕದ ಎಷ್ಟು ಅದ್ಭುತ ಸಂಗತಿಯನ್ನು ನೀವು ಕಂಡಿದ್ದೀರಿ?  
+
+**ವೇಗದ ಆತ್ಮವಿಶ್ವಾಸ ಪ್ರೋತ್ಸಾಹ:**  
+```mermaid
+flowchart LR
+    A["📝 ಹೇಳಿಕೆಗಳು<br/>(ಸೂಚನೆಗಳು)"] --> B["📦 ಚರಗಳು<br/>(ಸಂಗ್ರಹಣೆ)"] --> C["🔀 ನಿಯಂತ್ರಣ ಹರಿವು<br/>(ನಿರ್ಣಯಗಳು)"] --> D["🎉 ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಪ್ರೋಗ್ರಾಮ್!"]
+    
+    style A fill:#ffeb3b
+    style B fill:#4caf50
+    style C fill:#2196f3
+    style D fill:#ff4081
+```  
+✅ **ಮುಂದೆ ಏನು ಬರುತ್ತದೆ**: ನಾವು ಈ ಧಾರಣೆಗಳನ್ನೆಲ್ಲಾ ಇನ್ನಷ್ಟು ಆಳವಾಗಿ ಅನ್ವೇಷಿಸುವ ಅದ್ಭುತ ಪ್ರಯಾಣವನ್ನು ಮುಂದುವರಿಸುವುದಾಗಿ ನಿರ್ಧರಿಸಿದ್ದೇವೆ! ಈಗಿನ ನಿಮಿತ್ತ, ಎಲ್ಲಾ ಅದ್ಭುತ ಸಾಧ್ಯತೆಗಳ ಬಗ್ಗೆ ಆ ಉತ್ಸಾಹವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಗಮನಸೇರಿ. ನಿರ್ದಿಷ್ಟ ಕಌಕಗಳು ಹಾಗೂ ತಂತ್ರಜ್ಞಾನಗಳು ಸ್ವಾಭಾವಿಕವಾಗಿ ಬಾಣಸದಂತೆ ಅನುಸರಿಸಲ್ಪಡುತ್ತವೆ – ನಿಮಗೆ ನಾನು ಹೇಳುವೆ ಇದೊಂದು ಹೆಚ್ಚು ರಂಜನೀಯ ಅನುಭವವಾಗಲಿದೆ!  
+
+## ಉಪಕರಣಗಳ ಬ್ಯಾಗ್
+
+ಸರಿ, ಈಗ ನಿಜವಾಗಿಯೂ ನಾನು ತುಂಬಾ ಉತ್ಸಾಹಗೊಂಡಿದ್ದೇನೆ, ಸ್ವಲ್ಪ ಹಿಡಿಯಲು ಸಾಧ್ಯವಾಗುತ್ತಿಲ್ಲ! 🚀 ನಿಮಗೆ ದಿಜಿಟಲ್ ಸ್ಪೇಸ್‌ಶಿಪ್ ಕೀಗಳನ್ನು ನೀಡಿದಂತೆ ಭಾಸವಾಗುವ ಅದ್ಭುತ ಉಪಕರಣಗಳ ಬಗ್ಗೆ ಮಾತನಾಡಲಿದ್ದೇವೆ.  
+
+ನೀವು ತಿಳಿದಿರಬಹುದು, ಶೆಫ್‌ಗಳು ತಾವು ಬಳಸುವ ಸೂಕ್ತ ಸಮತೋಲನದಿಂದ ножಗಳನ್ನು ತಮ್ಮ ಕೈಗಳ ವಿಸ್ತಾರಗಳಂತೆ ಅನುಭವಿಸುವರು; ಸಂಗೀತಗಾರರು ಒಬ್ಬ ಗಿಟಾರ್‌ನಲ್ಲಿ ಸ್ಪರ್ಶಿಸುವಂತೆ ಅದು ಹಾಡುತ್ತದೆ. ಹಾಗೆಯೇ ಡೆವಲಪರ್ಗಳಿಗೂ ಇವು ಮಹಾ ಮಾಯಾಜಾಲಿ ಉಪಕರಣಗಳಿವೆ, ಉಳಿದವು ಸಂಪೂರ್ಣ ಮುಕ್ತವಾಗಿವೆ!  
+
+ನಾನು ಕುರ್ಚಿಯಲ್ಲಿ ಕುಳಿತಿದ್ದಂತೆ ಹಾರಾಡುತ್ತೇನೆ, ಏಕೆಂದರೆ ಇವುಗಳು ಸಾಫ್ಟ್‌ವೇರ್ ನಿರ್ಮಾಣ ಶೈಲಿಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬದಲಿಸಿ ಇವೆ. AI ಸಹಾಯಕರು ನಿಮ್ಮ ಕೋಡ್ ಬರೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತಾರೆ (ನನಗೆ ನಿಜವಾಗಿಯೂ ಹಾಸ್ಯವಲ್ಲ!), ಕ್ಲೌಡ್ ಪರಿಸರಗಳು Wi-Fi ಇದ್ದ ಎಲ್ಲಿಂದಲಾದರೂ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಲಭ್ಯವಿದೆ, ಹಾಗೂ ಡೀಬಗಿಂಗ್ ಉಪಕರಣಗಳು ಹಿರಿದಾದ ಆಳದಿಂದ ನಿಮಗೆ X-ಕಿರಣ ದೃಷ್ಟಿ ನೀಡುತ್ತವೆ.  
+
+ಈ ಭಾಗವು ಇನ್ನೂ ಕಂಗೆಡಿಸುತ್ತಿದೆ: ಇವು "ಶುರುವಾಗಿಯ ಉಪಕರಣಗಳು" ಅಲ್ಲ, ನೀವು ಬಿಟ್ಟುಹೋದ ನಂತರ ಬಳಕೆ ಅವಶ್ಯಕವಾಗದ ಅವುಗಳು ಸಹ ಅಲ್ಲ. ಗೂಗಲ್, ನೆಟ್‌ಫ್ಲಿಕ್ಸ್ ಮತ್ತು ನೀವು ಪ್ರೀತಿಸುವ ಇಂಡಿ ಅಪ್ ಸ್ಟೂಡಿಯೊಗಳಲ್ಲಿ ಡೆವಲಪರ್ಗಳು ಉಪಯೋಗಿಸುವ ನಿಜವಾದ ವೃತ್ತಿಪರ ಮಟ್ಟದ ಉಪಕರಣಗಳೇ ಇವೆ. ನೀವು ಅವರ ಮೂಲೆ ರಚಿಸಲು ಹೇಗೋ ಪ್ರೊ ಪ್ರಭಾವ ಅನುಭವಿಸುವಿರಿ!  
+
+```mermaid
+graph TD
+    A["💡 ನಿಮ್ಮ ಆಲೋಚನೆ"] --> B["⌨️ ಕೋಡ್ ಸಂಪಾದಕ<br/>(VS ಕೋಡ್)"] 
+    B --> C["🌐 ಬ್ರೌಸರ್ ಡೆವ್ ಟೂಲ್‌ಗಳು<br/>(ಪರೀಕ್ಷೆ & ಡಿಬಗಿಂಗ್)"]
+    C --> D["⚡ ಆಜ್ಞಾಪತ್ರಶ್ರೀ<br/>(ಸ್ವಯಂಕ್ರಿಯ & ಸಾಧನಗಳು)"]
+    D --> E["📚 ದಾಖಲೆ<br/>(ಕಲಿಕೆ & ಉಲ್ಲೇಖ)"]
+    E --> F["🚀 ಅದ್ಭುತ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್!"]
+    
+    B -.-> G["🤖 ಕೃತ್ರಿಮ ಬುದ್ಧಿಮತ್ತೆಯ ಸಹಾಯಕ<br/>(GitHub Copilot)"]
+    C -.-> H["📱 ಉಪಕರಣ ಪರೀಕ್ಷೆ<br/>(ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ)"]
+    D -.-> I["📦 ಪ್ಯಾಕೇಜ್ ವ್ಯವಸ್ಥಾಪಕರು<br/>(npm, yarn)"]
+    E -.-> J["👥 ಸಮುದಾಯ<br/>(Stack Overflow)"]
+    
+    style A fill:#fff59d
+    style F fill:#c8e6c9
+    style G fill:#e1f5fe
+    style H fill:#f3e5f5
+    style I fill:#ffccbc
+    style J fill:#e8eaf6
+```  
+### ಕೋಡ್ ಎಡಿಟರ್ಸ್ ಮತ್ತು IDEಗಳು: ನಿಮ್ಮ ಹೊಸ ಡಿಜಿಟಲ್ ಸ್ನೇಹಿತರು
+
+ನಾವು ಕೋಡ್ ಎಡಿಟರ್‌ಗಳ ಬಗ್ಗೆ ಮಾತನಾಡೋಣ – ಇವು ಬಹುಶಃ ನಿಮ್ಮ ಹೊಸ ಪ್ರಿಯಸ್ಥಾನಗಳಾಗಲಿವೆ! ನಿಮ್ಮ ವೈಯಕ್ತಿಕ ಕೋಡಿಂಗ್ ಆಶ್ರಯವು ಎಂದು ಭಾವಿಸಿ, ಇಲ್ಲಿ ನೀವು ಹೆಚ್ಚಿನ ಸಮಯವನ್ನು ನಿಮ್ಮ ಡಿಜಿಟಲ್ ಸೃಷ್ಟಿಗಳನ್ನು ಸಂಪೂರ್ಣಗೊಳಿಸಲು ಮೀಡಿಕೊಳ್ಳುತ್ತೀರಿ.  
+
+ಆಧುನಿಕ ಎಡಿಟರ್‌ಗಳ ಮಾಯಾಜಾಲವೆಂದರೆ: ಅವು ಕೇವಲ ಬೊಂಬಾಯಿ ಪಠ್ಯ ಸಂಪಾದಕರಲ್ಲ. ಅವು 24/7 ನಿಮ್ಮ ಬಳಿ ಕುಳಿತಿರುವ ಅತ್ಯಂತ ಆದರ್ಶ, ಸಹಾಯಕ ಕೋಡಿಂಗ್ ಗುರುಗಳಂತೆ. ನೀವು ಕಾಣುವುದಕ್ಕಿಂತ ಮೊದಲು ನಿಮ್ಮ ಬರವಣಿಗೆದೋಷಗಳನ್ನು ಹಿಡಿಯುತ್ತವೆ, ನಿಮಗೆ ತರ್ಕಬದ್ಧ ಸುಧಾರಣೆಯನ್ನು ಸೂಚಿಸುತ್ತವೆ, ಪ್ರತಿಯೊಂದು ಕೋಡ್ ತುಂಡು ಏನಪ್ಪ ರೀತಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ಅರಿಸುವಲ್ಲಿ ಸಹಾಯ ಮಾಡುತ್ತವೆ, ಮತ್ತು ಕೆಲವರು ನೀವು ಬರೆದುವುದಾಗಿ ಊಹಿಸಿ ನಿಮ್ಮ ಕಾಳಜಿಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸುವುದಕ್ಕೆ ಯತ್ನಿಸುತ್ತಾರೆ!  
+
+ನಾನು ಮೊದಲಬಾರಿಗೆ ಆಟೋ-ಪೂರಕತೆಯನ್ನು ಕಂಡಾಗ ಭವಿಷ್ಯದಲ್ಲಿ ಬದುಕುತ್ತಿರುವೆನಂತೆ ಭಾಸವಾಯಿತು. ನೀವು ಏನೋ ಟೈಪ್ ಮಾಡುತ್ತೀರಿ, ನಿಮ್ಮ ಎಡಿಟರ್ "ನೀವು ಬೇಕಾದ ಫಂಕ್ಷನ್ ಇದಂತಿದ್ದೀರೀ ಅಂದುಕೊಂಡಿರಾ?" ಎಂಬಂತೆ ಕೇಳುತ್ತದೆ. ನಿಮ್ಮ ಕೋಡಿಂಗ್ ಗೆಳೆಯನಾಗಿ ಮನೋಧರ್ಮಿ ಇದ್ದಂತೆ!  
+
+**ಈ ಎಡಿಟರ್‌ಗಳನ್ನು ಅದ್ಭುತವಾಗಿಸಲು ಏನು ಕಾರಣ?**  
+
+ಆಧುನಿಕ ಕೋಡ್ ಎಡಿಟರ್‌ಗಳು ನಿಮ್ಮ ಉತ್ಪಾದಕತೆಯನ್ನು ಹೆಚ್ಚಿಸುವFeatures ಒಂದಿಷ್ಟು:  
+
+| ವೈಶಿಷ್ಟ್ಯ | ಇದು ಏನು ಮಾಡುತ್ತದೆ | ಅದಕ್ಕೆ ಯಾಕೆ ಉಪಯೋಗ? |
+|---------|--------------|--------------|
+| **ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟಿಂಗ್** | ನಿಮ್ಮ ಕೋಡ್‌ನ ವಿಭಿನ್ನ ಭಾಗಗಳಿಗೆ ಬಣ್ಣ ನೀಡುತ್ತದೆ | ಕೋಡ್ ಓದಲು ಸುಲಭ ಹಾಗೂ ದೋಷಗಳನ್ನು ಹುಡುಕಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ |
+| **ಆಟೋ-ಕಂಪ್ಲೀಷನ್** | ನೀವು ಟೈಪ್ ಮಾಡಿದಂತೆ ಕೋಡ್ ಸೂಚಿಸುತ್ತದೆ | ಬರವಣಿಗೆಯನ್ನು ವೇಗಗೊಳಿಸಿ ತಪ್ಪುಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ |
+| **ಡೀಬಗಿಂಗ್ ಉಪಕರಣಗಳು** | ದೋಷಗಳನ್ನು ಹುಡುಕಿ ಸರಿಪಡಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ | ಸಮಸ್ಯೆಗಳ ಪರಿಹಾರಕ್ಕೆ ಸಮಯ ಉಳಿಸುತ್ತದೆ |
+| **ವಿಸ್ತರಣೆಗಳು** | ವಿಶೇಷಣ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸುತ್ತವೆ | ಯಾವುದೇ ತಂತ್ರಜ್ಞಾನಕ್ಕಾಗಿ ನಿಮ್ಮ ಎಡಿಟರ್ ಅನ್ನು ಹೊಂದಿಸಿಕೊಳ್ಳಿ |
+| **AI ಸಹಾಯಕರು** | ಕೋಡ್ ಮತ್ತು ವಿವರಣೆಗಳನ್ನು ಸೂಚಿಸುತ್ತಾರೆ | ಕಲಿಕೆಯನ್ನು ವೇಗಗೊಳಿಸಿ ನೀವು ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮವಾಗಿರಿ |
+
+> 🎥 **ವೀಡಿಯೋ ಸಂಪನ್ಮೂಲ**: ಈ ಉಪಕರಣಗಳನ್ನು ಕ್ರಿಯಾಶೀಲವಾಗಿ ನೋಡಬೇಕೆ? [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) ನೋಡಿ.  
+
+#### ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಶಿಫಾರಸಾದ ಎಡಿಟರ್‌ಗಳು
+
+**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (ಉಚಿತ)  
+- ವೆಬ್ ಅಭಿವೃದ್ಧి ಉದ್ಯಮದಲ್ಲಿ ಅತ್ಯಂತ ಜನಪ್ರಿಯ  
+- ಅದ್ಭುತ ವಿಸ್ತರಣೆ ವ್ಯವಸ್ಥೆ  
+- ಒಳಗೊಂಡಿರುವ ಟರ್ಮಿನಲ್ ಮತ್ತು Git ಇಂಟಿಗ್ರೇಶನ್  
+- **ಅತ್ಯಗತ್ಯ ವಿಸ್ತರಣೆಗಳು**:  
+  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI ಚಲಿತ ಕೋಡ್ ಸೂಚನೆಗಳು  
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - რეaltime ಸಹಕಾರ  
+  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - ಸ್ವಯಂಚಾಲಿತ ಕೋಡ್ ಸ್ವರೂಪೀಕರಣ  
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - ನಿಮ್ಮ ಕೋಡ್ ನಲ್ಲಿ ಟೈಪೋಗಳನ್ನು ಹಿಡಿದುಕೊಳ್ಳುವುದು  
+
+**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (ಪೇಯ್ಡ್, ವಿದ್ಯಾರ್ಥಿಗಳಿಗೆ ಉಚಿತ)  
+- ಮುಂದುವರೆದ ಡೀಬಗ್ ಮತ್ತು ಪರೀಕ್ಷಾ ಉಪಕರಣಗಳು  
+- ಬುದ್ಧಿವಂತ ಕೋಡ್ ಪೂರೈಕೆ  
+- ಒಳಗೊಂಡಿರುವ ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ  
+
+**ಕ್ಲೌಡ್ ಆಧಾರಿತ IDEಗಳು** (ವಿಭಿನ್ನ ಬೆಲೆಗಳು)  
+- [GitHub Codespaces](https://github.com/features/codespaces) - ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸಂಪೂರ್ಣ VS Code  
+- [Replit](https://replit.com/) - ಕಲಿಕೆ ಮತ್ತು ಕೋಡ್ ಹಂಚಿಕೆಗೆ ಅತ್ಯುತ್ತಮ  
+- [StackBlitz](https://stackblitz.com/) - ತಕ್ಷಣದ ಪೂರ್ಣ-ಸ್ಟಾಕ್ ವೆಬ್ ಅಭಿವೃದ್ಧಿ  
+
+> 💡 **ಪ್ರಾರಂಭಿಕ ಸಲಹೆ**: Visual Studio Code ನಿಂದ ಪ್ರಾರಂಭಿಸಿ – ಉಚಿತವಾಗಿದ್ದು, ಉದ್ಯಮದಲ್ಲಿಯೇ ವ್ಯಾಪಕವಾಗಿ ಬಳಸಲ್ಪಡುವುದು ಮತ್ತು ಸಹಾಯಕ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳು ಮತ್ತು ವಿಸ್ತರಣೆಗಳ ಮಹಾಸಮುದಾಯವಿದೆ.  
+
+### ವೆಬ್ ಬ್ರೌಸರಗಳು: ನಿಮ್ಮ ಗುಪ್ತ ಅಭಿವೃದ್ಧಿ ಪ್ರಯೋಗಶಾಲೆ
+
+ಸರಿ, ನಿಮ್ಮ ಮೆದುಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಧಮಾಕಾಗೊಳಿಸಲು ಸಜ್ಜಾಗಿರಿ! ನೀವು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮವನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡಲು ಮತ್ತು ವೀಡಿಯೋಗಳನ್ನು ನೋಡಲು ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದಿರಲ್ಲವೆ? ಅದೇ ಅಲ್ಲಿ ಈ ಅತಿದೊಡ್ಡ ಗುಪ್ತ ಅಭಿವೃದ್ಧಿ ಪ್ರಯೋಗಾಲಯವನ್ನು ಇಡೀ ಸಮಯ ಮರೆಮಾಚಿ ಇಟ್ಟಿವೆ, ನೀವು ಇದನ್ನು ಕಂಡುಕೊಳ್ಳಲು ಕಾಯುತ್ತಿದೆ!  
+
+ಪ್ರತಿ ಬಾರಿ ನೀವು ವೆಬ್‌ಪುಟದ ಮೇಲೆ ರೈಟ್ ಕ್ಲಿಕ್ ಮಾಡಿ "ಇನ್ಸ್‌ಪೆಕ್ಟ್ ಎಲೆಮೆಂಟ್" ಆಯ್ಕೆಮಾಡುವಾಗ, ನೀವು ಅಭಿವೃದ್ಧಿಪಡಿಸುವ ಪ್ರಯೋಗಾಲಯದ ಅಡಗಿರುವ ಪ್ರಪಂಚವನ್ನು ತೆರೆಯುತ್ತಿದ್ದೀರಿ, ಇದು ನಾನು ಮೊದಲು ನೂರು ಡಾಲರುಗಳಿಗೂ ಖರೀದಿಸಿದ ಕೆಲವು ದುಬಾರಿ ಸಾಫ್ಟ್‌ವೇರ್‌ಗಳಿಗಿಂತ ಶಕ್ತಿಶಾಲಿಯಾಗಿದೆ. ಇದು ನಿಮ್ಮ ಸಾಮಾನ್ಯ ಕ್ಯೋಜನ್ ಮುಂಭಾಗದಲ್ಲಿ ಕೇವಲ ಮಾಯಾಜಾಲীয়া ವೃತ್ತಿಪರ ಶೆಫ್ ಪ್ರಯೋಗಾಲಯ ಇರುವಂತೆ ಕಂಡುಬರುತ್ತದೆ!
+ಯಾರಾದರೂ ಮೊದಲು ಬ್ರೌಸರಿನ DevTools ಅನ್ನುತೋರಿಸಿದಾಗ, ನಾನು ಮೂರು ಗಂಟೆಗಳು ಕೇವಲ ಕ್ಲಿಕ್ ಮಾಡಿಕೋನಿದ್ದು "ಬೇಡಿಕೋ, ಅದು ಇದನ್ನೂ ಮಾಡ್ಬಲ್ಲುದಾ?!" ಎನ್ನುತ್ತಿದ್ದೆ. ನೀವು ನಿಜಕ್ಕೂ ಪ್ರತಿಯೊಂದು ವೆಬ್ಸೈಟ್ ಅನ್ನು ರಿಯಲ್-ಟೈಮ್‌ನಲ್ಲಿ ಸಂಪಾದಿಸಬಹುದು, ಎಲ್ಲವೂ ಎಷ್ಟು ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತಿದೆ ಎಂದು ನೋಡಬಹುದು, ನಿಮ್ಮไซต์ ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ಹೇಗಿದೆ ಎಂದು ಪರೀಕ್ಷಿಸಬಹುದು ಮತ್ತು ಸಂಪೂರ್ಣ ಪ್ರೊ ಹಾಗೆ JavaScript ನ ಡಿಬಗ್ ಮಾಡಬಹುದು. ಇದು ಸಂತೋಷಕರವಾಗಿಯೇ ಅಸಾಧಾರಣ!
+
+**ನಿಮ್ಮ ಗುಪ್ತ ಶಸ್ತ್ರವೂ ಬ್ರೌಸರ್ ಗಳು ಇದಕ್ಕೆ ಕಾರಣ:**
+
+ನೀವು ವೆಬ್ಸೈಟ್ ಅಥವಾ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸುವಾಗ, ಅದು ನಿಜವಾದ ಜಗತ್ತಿನಲ್ಲಿ ಹೇಗಿದೆ ಮತ್ತು ಹೇಗೆ ವರ್ತಿಸುತ್ತದೆ ಎಂದು ನೋಡಬೇಕಾಗುತ್ತದೆ. ಬ್ರೌಸರ್ ಗಳು ನಿಮ್ಮ ಕೆಲಸವನ್ನು ತೋರಿಸುವುದಷ್ಟೇ ಅಲ್ಲ, ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಾರ್ಥಕತೆ ಮತ್ತು ಸಾಧ್ಯತೆ ಇರುವ ಸಮಸ್ಯೆಗಳ ಬಗ್ಗೆ ವಿವರವಾದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತವೆ.
+
+#### ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಸಾಧನಗಳು (DevTools)
+
+આಧುನಿಕ ಬ್ರೌಸರ ಗಳು ಸಮಗ್ರ ಅಭಿವೃದ್ಧಿ ಸುಟ್ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ:
+
+| ಸಾಧನ ವರ್ಗ | ಅದು ಏನು ಮಾಡುತ್ತದೆ | ಉದಾಹರಣೆ ಉಪಯೋಗ मामला |
+|------------|------------------|-----------------------|
+| **ಎಲೆಮೆಂಟ್ ಇನ್ಸ್‌ಪೆಕ್ಟರ್** | HTML/CSS ಅನ್ನು ರಿಯಲ್-ಟೈಮ್ ನಲ್ಲಿ ವೀಕ್ಷಿಸಿ ಮತ್ತು ಸಂಪಾದಿಸಿ | ಶೈಲಿಯನ್ನು ಹೊಂದಿಸಿ ತಕ್ಷಣ ಫಲಿತಾಂಶಗಳನ್ನು ನೋಡಿ |
+| **ಕನ್ಸೋಲ್** | ದೋಷ ಸಂದೇಶಗಳನ್ನು ವೀಕ್ಷಿಸಿ ಮತ್ತು JavaScript ಅನ್ನು ಪರೀಕ್ಷಿಸಿ | ಸಮಸ್ಯೆಗಳನ್ನು ಡಿಬಗ್ ಮಾಡಿ ಮತ್ತು ಕೋಡ್ ಜೊತೆ ಪ್ರಯೋಗ ಮಾಡಿ |
+| **ನೆಟ್‌ವರ್ಕ್ ಮಾನಿಟರ್** | ಸಂಪನ್ಮೂಲಗಳು ಹೇಗೆ ಲೋಡ್ ಆಗುತ್ತಿವೆ ಎಂಬುದನ್ನು ಅನುಸರಿಸಿ | ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಲೋಡ್ ಸಮಯಗಳನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿ |
+| **ಪ್ರವೇಶಾರ್ಥಕತೆ ಪರಿಶೀಲಕ** | ಸಮಾವೇಶಾತ್ಮಕ ವಿನ್ಯಾಸಕ್ಕೆ ಪರೀಕ್ಷೆ ಮಾಡಿ | ನಿಮ್ಮ ಸೈಟ್ ಎಲ್ಲ ಬಳಕೆದಾರರಿಗೂ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂದು ಖಚಿತ ಪಡಿಸಿ |
+| **ಸಾಧನ ಸಿಮ್ಯುಲೇಟರ್** | ವಿಭಿನ್ನ ಪರದೆ ಗಾತ್ರಗಳಲ್ಲಿ ಪೂರ್ವಾವಲೋಕನ ಮಾಡಿ | ಬಹುನಡೆಯುವ ವಿನ್ಯಾಸವನ್ನು ವಿವಿಧ ಸಾಧನಗಳಿಲ್ಲದೆ ಪರೀಕ್ಷಿಸಿ |
+
+#### ಅಭಿವೃದ್ಧಿಗಾಗಿ ಶಿಫಾರಸು ಮಾಡಿದ ಬ್ರೌಸರ ಗಳು
+
+- **[ಕ್ರೋಮ್](https://developers.google.com/web/tools/chrome-devtools/)** - ವ್ಯಾಪಕ ದಾಖಲೆಗಳೊಂದಿಗೆ ಕಂತಿನ DevTools
+- **[ಫೈರ್‌ಫೋಕ್ಸ್](https://developer.mozilla.org/docs/Tools)** - ಅತ್ಯುತ್ತಮ CSS ಗ್ರಿಡ್ ಮತ್ತು ಪ್ರವೇಶಾರ್ಥಕತೆ ಸಾಧನಗಳು
+- **[ಎಡ್ಜ್](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - ಮೈಕ್ರೋಸಾಫ್ಟ್‌ ಅವರ ಡೆವಲಪರ್ ಸಂಪನ್ಮೂಲಗಳೊಂದಿಗೆ ಕ್ರೋಮಿಯಂ ಆಧಾರಿತ
+
+> ⚠️ **ಗুরুತವಾದ ಪರೀಕ್ಷಾ ಸಲಹೆ**: ನಿಮಗೆ ವೆಬ್ಸೈಟ್‌ಗಳನ್ನು ಹಲವಾರು ಬ್ರೌಸರಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಬೇಕು! ಕ್ರೋಮ್‌ನಲ್ಲಿ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಸಫಾರಿ ಅಥವಾ ಫೈರ್‌ಫಾಕ್ಸ್‌ನಲ್ಲಿ ವಿಭಿನ್ನವಾಗಿ ಕಾಣಬಹುದು. ವೃತ್ತಿಪರ ಡೆವಲಪರ್ ಗಳು ಎಲ್ಲಾ ಪ್ರಮುಖ ಬ್ರೌಸರಲ್ಲಿ ಪರೀಕ್ಷೆ ಮಾಡುವರು ಫಲಿತಾಂಶ ದ್ವಂದ್ವವನ್ನು ತಪ್ಪಿಸಲು.
+
+### ಕಮಾಂಡ್ ಲೈನ್ ಸಾಧನಗಳು: ನಿಮ್ಮ ಡೆವಲಪರ್ ಸೂಪರ್ ಶಕ್ತಿಗಳಿಗೆ ಪ್ರವೇಶ
+
+ಸರಿ, ನಿಮ್ಮಿಗೆ ಕಮಾಂಡ್ ಲೈನ್ ಬಗ್ಗೆ ಪೂರ್ಣವಾಗಿ ನಿಷ್ಠುರ ಸತ್ಯವನ್ನು ಹೇಳುತ್ತೇನೆ, ಏಕೆಂದರೆ ಅದನ್ನು ನಿಜವಾಗಿಯೂ ಅರ್ಥಮಾಡ್ಕೊಳ್ಳುವವರಿಂದ ನೀವು ಕೇಳಬೇಕು. ಮೊದಲು ಅದನ್ನು ನೋಡಿ – ಕೇವಲ ಈ ಭಯಾನಕ ಕಪ್ಪು ಪರದೆ ಟಿಪ್ಪಣಿಗಳೊಂದಿಗೆ – ನನಗೆ ನಿಜವಾಗಿಯೂ ಅನ್ನಿಸಿತು, "ಇಲ್ಲಾ, ಗಡಿಯಾರ ಇಲ್ಲ! ಇದು 1980ರ ದಶಕದ ಹ್ಯಾಕರ್ ಚಿತ್ರದಿಂದ ಬಂದಂತೆ ಇದೆ, ಮತ್ತು ನಾನು ಇದಕ್ಕೆ ಪೋಷ್ಠಿಕೂ ಕಡಿಮೆ ತಿಳುವಳಿಕೆ ಇದ್ದೇನೆ!" 😅
+
+ಆದರೆ ನಾನು ಹಿಂಪಡೆಯಾಗಿರುವುದು ನಿಮಗೆ ಹೇಳಬೇಕಾದುದು ಏನೆಂದರೆ: ಕಮಾಂಡ್ ಲೈನ್ ಭಯಪಡಬೇಕಾಗಿಲ್ಲ – ಇದು ನಿಜವಾಗಿಯೂ ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ ಜೊತೆ ನೇರ ಸಂಭಾಷಣೆ ಹೋಲುತ್ತದೆ. ಹಣಿಕೆ ಮೂಲಕ ಆಹಾರವನ್ನು ಆರ್ಡರ್ ಮಾಡುವ ಪ್ರಕ್ರಿಯೆ (ಅದು ಸುಲಭ ಮತ್ತು ಸುಂದರ) ಮತ್ತು ನಿಮಗೆ ಬರುವ ಸ್ಥಳೀಯ ರೆಸ್ಟೋರೆಂಟ್ ಗೆ ಹೋಗಿ ಅಲ್ಲಿ ಕುಟುಂಬವು ನಿಮ್ಮ ಇಷ್ಟವನ್ನು ತಿಳಿದು ಅದ್ಭುತ ಆಹಾರ ತಯಾರಿಸುವಂತೆ ಹೇಳುವುದರಲ್ಲಿ ಭಿನ್ನತೆ ಇದೆ.
+
+ಕಮಾಂಡ್ ಲೈನ್ ಡೆವಲಪರ್ ಗಳು ಮಾಯಾಜಾಲಿಗಳು ಎಂಬ ನಂಬಿಕೆ ಹೊಂದಲು ಹೋದ ಕಡೆ. ನೀವು ಕೆಲವು ಮಾಯಾಜಾಲಿ ಪದಗಳನ್ನು ಟೈಪ್ ಮಾಡುತ್ತೀರಿ (ಓಕೆ, ಅವು ಕೇವಲ ಕಮಾಂಡ್ ಗಳು, ಆದರೆ ಅವು ಮಾಯಾಜಾಲದಂತೆ ಅನಿಸುವವು), ಎಂಟರ್ ಒತ್ತುತ್ತೀರಿ, ಮತ್ತು ಬೂಂ – ನೀವು ಸಂಪೂರ್ಣ ಯೋಜನಾವಳಿಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತೀರಿ, ಜಗತ್ತಿನಾದ್ಯಾಂತ ಶಕ್ತಿಶಾಲಿ ಸಾಧನಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುತ್ತೀರಿ, ಅಥವಾ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಇಂಟರ್ನೆಟ್‌ನಲ್ಲಿ ಹಜಾರಾರು ಮಂದಿಗೆ ತೋರಿಸುತ್ತೀರಿ. ಮೊದಲ ಬಾರಿಗೆ ಅದೊಂದು ಶಕ್ತಿ ಅನುಭವಿಸಿದ ಮೇಲೆ, ಇದು ನಿಜವಾಗಿಯೂ ಅಡಿಕ್ಟಿವ್ ಆಗುತ್ತದೆ!
+
+**ನಿಮ್ಮ сеть ಆದ್ಯಂತ ಮೊತ್ತಿಷ್ಟಿಕೆ:**
+
+ಗ್ರಾಫಿಕಲ್ ಇಂಟರ್ಫೇಸ್‌ಗಳು ಹಲವಾರು ಕೆಲಸಗಳಿಗೆ ಅತ್ಯುತ್ತಮವಾಗಿದ್ದು, ಕಮಾಂಡ್ ಲೈನ್ ಸ್ವಯಂಸಂಚಾಲನೆ, ನಿಖರತೆ ಮತ್ತು ವೇಗದಲ್ಲಿ ಮುಂಚೂಣಿ ಸಾಧನವಾಗಿದೆ. ಬಹು ಅಭಿವೃದ್ಧಿ ಸಾಧನಗಳು ಮುಖ್ಯವಾಗಿ ಕಮಾಂಡ್ ಲೈನ್ ಮೂಲಕ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಪರಿಣಾಮಕಾರಿ ಉಪಯೋಗ ಕಲಿತರೆ ನಿಮ್ಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಬಹಳ ಹೆಚ್ಚು ಹೆಚ್ಚಿಸಬಹುದು.
+
+```bash
+# ಹಂತ 1: ಪ್ರಾಜೆಕ್ಟ್ ಡೈರೆಕ್ಟರಿಯನ್ನು ರಚಿಸಿ ಮತ್ತು ಆ ದಿಕ್ಕಿನಲ್ಲಿ ನಾವಿಗೇಟ್ ಮಾಡಿ
+mkdir my-awesome-website
+cd my-awesome-website
+```
+
+**ಈ ಕೋಡ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- **"my-awesome-website"** ಎಂದು ಹೊಸ ಡೈರೆಕ್ಟರಿಯನ್ನು ರಚಿಸುತ್ತದೆ ನಿಮ್ಮ ಯೋಜನೆಗಾಗಿ
+- **ಹೊಸ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಪ್ರವೇಶಿಸಿ** ಕೆಲಸವನ್ನು ಪ್ರಾರಂಭಿಸಿ
+
+```bash
+# ಹಂತ 2: package.json ನೊಂದಿಗೆ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿ
+npm init -y
+
+# ಆಧುನಿಕ ಅಭಿವೃದ್ಧಿ ಸಾಧನಗಳನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ
+npm install --save-dev vite prettier eslint
+npm install --save-dev @eslint/js
+```
+
+**ಹಂತ ಹಂತವಾಗಿ, ಇದು ನಡೆಯುತ್ತಿದೆ:**
+- `npm init -y` ಬಳಸಿ Node.js ಪ್ರಾಜೆಕ್ಟ್ ನ ಐನಿಷಿಯಲೈಸ್ ಮಾಡಿ ಡಿಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್‍ ಗಳೊಂದಿಗೆ
+- ವೇಗವಾದ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಉತ್ಪಾದನೆಗಾಗಿ Vite ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ
+- ಸ್ವಯಂಚಾಲಿತ ಕೋಡ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಗೆ Prettier ಮತ್ತು ಕೋಡ್ ಗುಣಮಟ್ಟ ಚೆಕ್ ಗಾಗಿ ESLint ಸೇರಿಸಿ
+- `--save-dev` ಧ್ವಜದ ಮೂಲಕ ಇದನ್ನು ಬೆಳವಣಿಗೆ ಅವಶ್ಯಕತೆಗಳಾಗಿ ಗುರುತಿಸಿ
+
+```bash
+# ಹಂತ 3: ಯೋಜನೆ ರಚನೆ ಮತ್ತು ಫೈಲುಗಳನ್ನು ಸೃಷ್ಟಿಸಿ
+mkdir src assets
+echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > index.html
+
+# ಅಭಿವೃದ್ಧಿ ಸರ್ವರನ್ನು ಪ್ರಾರಂಭಿಸಿ
+npx vite
+```
+
+**ಮೇಲಿನಲ್ಲಿರುವುದು:**
+- ಮೂಲ ಕೋಡ್ ಮತ್ತು ಆಸ್ತಿ ಫೋಲ್ಡರ್ ಗಳನ್ನು ವಿಭಜಿಸಿ ಯೋಜನೆಯನ್ನು ಸಂಘಟಿಸಿಕೊಂಡೇವೆ
+- ಸರಿಯಾದ ಡಾಕ್ಯುಮೆಂಟ್ ರಚನೆಯೊಂದಿಗೆ ಮೂಲಭೂತ HTML ಫೈಲ್ ರಚಿಸಲಾಗಿದೆ
+- ಲೈವ್ ರಿಲೋಡ್ ಮತ್ತು ಹಾಟ್ ಮೋಡ್ಯೂಲ್ ರಿಪ್ಲೇಸ್‌ಮೆಂಟ್ ಗೆ Vite ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಆರಂಭಿಸಲಾಗಿದೆ
+
+#### ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಅಗತ್ಯವಿರುವ ಕಮಾಂಡ್ ಲೈನ್ ಸಾಧನಗಳು
+
+| ಸಾಧನ | ಉದ್ದೇಶ | ನೀವು ಇದನ್ನು ಬೇಕಾದ ಕಾರಣ |
+|-------|---------|------------------------|
+| **[Git](https://git-scm.com/)** | ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ | ಬದಲಾವಣೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ, ಮತ್ತವರೊಂದಿಗೆ ಸಹಕರಿಸಿ, ನಿಮ್ಮ ಕೆಲಸಕ್ಕೆ ಬ್ಯಾಕಪ್ ಮಾಡಿ |
+| **[Node.js & npm](https://nodejs.org/)** | ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ರನ್ ಟೈಮ್ & ಪ್ಯಾಕೇಜ್ ನಿರ್ವಾಹಕ | ಬ್ರೌಸರ್ ಹೊರಗಿನ JavaScript ರನ್ ಮಾಡಿ, ಆಧುನಿಕ ಅಭಿವೃದ್ಧಿ ಸಾಧನಗಳನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ |
+| **[Vite](https://vitejs.dev/)** | ಬಿಲ್ಡ್ ಉಪಕರಣ & ಡೆವ್ ಸರ್ವರ್ | ಅತ್ಯಂತ ವೇಗವಾದ ಅಭಿವೃದ್ಧಿ ಹಾಟ್ ಮೋಡ್ಯೂಲ್ ರಿಪ್ಲೇಸ್‌ಮೆಂಟ್ ಜೊತೆಗೆ |
+| **[ESLint](https://eslint.org/)** | ಕೋಡ್ ಗುಣಮಟ್ಟ | ನಿಮ್ಮ JavaScript ನಲ್ಲಿ ಸಮಸ್ಯೆಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕಂಡುಹಿಡಿದು ಸರಿಪಡಿಸುವುದು |
+| **[Prettier](https://prettier.io/)** | ಕೋಡ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ | ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನಿಯಮಿತವಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿ ಓದಲು ಸುಲಭವಾಗಿಸುತ್ತವೆ |
+
+#### ವೇದಿಕೆಯ ವಿಶೇಷ ಆಯ್ಕೆಗಳು
+
+**Windows:**
+- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ಆಧುನಿಕ, ವೈಶಿಷ್ಟ್ಯಪೂರ್ಣ ಟರ್ಮಿನಲ್
+- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - ಶಕ್ತಿ ಪೂರಿತ ಸ್ಕ್ರಿಪ್ಟಿಂಗ್ ಪರಿಸರ
+- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - ಪರಂಪರাগত ವಿಂಡೋಸ್ ಕಮಾಂಡ್ ಲೈನ್
+
+**macOS:**
+- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - ಒಳಗೊಂಡಿರುವ ಟರ್ಮಿನಲ್ ಅಪ್ಲಿಕೇಶನ್
+- **[iTerm2](https://iterm2.com/)** - ವಿಶಿಷ್ಟ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸುಧಾರಿತ ಟರ್ಮಿನಲ್
+
+**Linux:**
+- **[Bash](https://www.gnu.org/software/bash/)** 💻 - ಪ್ರಾಮುಖ್ಯತೆ ಹೊಂದಿದ ಲಿನಕ್ಸ್ ಶೆಲ್
+- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - ಸುಧಾರಿತ ಟರ್ಮಿನಲ್ ಅನುಕರಣೆ
+
+> 💻 = ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್‌ನಲ್ಲಿ ಪೂರ್ವಾಪೇಕ್ಷಣೆಯಾಗಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ
+
+> 🎯 **ಕಲಿಕೆಯ ದಾರಿ**: `cd` (ಡೈರೆಕ್ಟರಿ ಬದಲಾಯಿಸಿ), `ls` ಅಥವಾ `dir` (ಫೈಲುಗಳ ಪಟ್ಟಿ ಮಾಡಿ), ಮತ್ತು `mkdir` (ಫೋಲ್ಡರ್ ರಚಿಸಿ) ನಂತಹ ಮೂಲಭೂತ ಕಮಾಂಡ್ ಗಳಿಂದ ಪ್ರಾರಂಭಿಸಿ. `npm install`, `git status`, ಮತ್ತು `code .` (ಪ್ರಸ್ತುತ ಡೈರೆಕ್ಟರಿಯನ್ನು VS Code ನಲ್ಲಿ ತೆರೆಯುತ್ತದೆ) ಹೀಗೆ ಆಧುನಿಕ ಕೆಲಸಗಳ ಕಮಾಂಡ್ ಗಳೊಂದಿಗೆ ಅಭ್ಯಾಸ ಮಾಡಿ. ನೀವು ಹೆಚ್ಚು ಅಡಗುಮಾಡಿಕೊಂಡಂತೆ ಹೆಚ್ಚು ಸುಧಾರಿತ ಕಮಾಂಡ್ ಗಳು ಮತ್ತು ಸ್ವಯಂಸಂಚಾಲನೆ ತಂತ್ರಗಳನ್ನು ಸಹಜವಾಗಿ ಕಲಿತುಕೊಳ್ಳುತ್ತೀರಿ.
+
+### ಡಾಕ್ಯುಮೆಂಟೇಷನ್: ನಿಮ್ಮ ಸದಾ ಲಭ್ಯವಿರುವ ಕಲಿಕೆಯ ಗುರು
+
+ಸರಿ, ನಾನು ನಿಮಗೆ ಒಂದು ಸಣ್ಣ ರಹಸ್ಯವನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತೇನೆ, ಇದು ಆರಂಭಿಕನಾಗಿರುವುದು ಬಗ್ಗೆ ನೀವು ತುಂಬಾ ಒಳ್ಳೆಯ ಭಾವನೆ ಕೊಡುವುದು: ಅತ್ಯಂತ ಅನುಭವ ಹೊಂದಿರುವ ಡೆವಲಪರ್ ಗಳು ತಮ್ಮ ಸಮಯದ ದೊಡ್ಡ ಭಾಗವನ್ನು ಡಾಕ್ಯುಮೆಂಟೇಷನ್ ಓದುವುದಕ್ಕೆ ಕಳೆಯುತ್ತಾರೆ. ಅದು ಅವರು ಏನು ಮಾಡುತ್ತಿದ್ದಾರೆ ಎಂಬುದನ್ನು ಗೊತ್ತಿಲ್ಲದ ಕಾರಣವಲ್ಲ – ಅದು ಜ್ಞಾನದ ಸಂಕೇತ!
+
+ಡಾಕ್ಯುಮೆಂಟೇಷನ್ ಅನ್ನು ನಿಮಗೆ ಲೋಕದ ಅತ್ಯಂತ ಸಹಿಷ್ಣು, ಜ್ಞಾನಿಗಳು 24/7 ಲಭ್ಯವಿರುವ ಶಿಕ್ಷಕರಂತೆ ಪರಿಗಣಿಸಿ. 2 ಗಂಟೆಗೆ ಸಮಸ್ಯೆಗೆ ಸಿಲುಕಿದರೆ? ಡಾಕ್ಯುಮೆಂಟೇಷನ್ ಅದೃಷ್ಟದಂತೆ ತಣ್ಣಗಿನ ಆಲಿಂಗನವನ್ನು ನೀಡಿ ನಿಮಗೆ ಬೇಕಾದ ಉತ್ತರವನ್ನು ನೀಡಲಿದೆ. ಎಲ್ಲರೂ ಮಾತನಾಡುತ್ತಿರುವ ಹೊಸ ವೈಶಿಷ್ಟ್ಯದ ಬಗ್ಗೆ ತಿಳಿಯಲು ಇಚ್ಛಿಸುತ್ತೀರಾ? ಡಾಕ್ಯುಮೆಂಟೇಷನ್ ನಿಮ್ಮ ಸಹಾಯಕ್ಕೆ ಬರುತ್ತದೆ ಕ್ರಮೇಣ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ. ಏಕೆ ಏನಾಡ್ತಿದೆಯೆಂದು ತಿಳಿದುಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದೀರಾ? ನೀವು ಊಹಿಸಿದಂತೆಯೇ – ಡಾಕ್ಯುಮೆಂಟೇಷನ್ ಅದನ್ನು ತಿಳಿಸಿ ಅದು ಇಪ್ಪತ್ತು!
+
+ನನ್ನ ದೃಷ್ಟಿಕೋನವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬದಲಿಸಿದ ಅಂಶ ಇದಾಗಿದೆ: ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಜಗತ್ತು ಅತ್ಯಂತ ವೇಗವಾಗಿ ilerಗುತ್ತಿರುವದು, ಮತ್ತು ಯಾರೂ ಎಲ್ಲವನ್ನೂ ನೆನಪಿರಿಸಲಾಗುವುದಿಲ್ಲ. ನಾನು 15+ ವರ್ಷದ ಅನುಭವ ಹೊಂದಿದ ಹಿರಿಯ ಡೆವಲಪರ್ ಗಳು ಮೂಲವಾದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹುಡುಕುತ್ತಿರುವುದನ್ನು ನೋಡಿದೆ ಮತ್ತು ನೀವು ಏನು ತಿಳಿದುಕೊಳ್ಳಬೇಕು? ಇದು ಅಳಿಯುವಂತದ್ದಲ್ಲ – ಇದು ತುಂಬರುವಂತದ್ದು! ಇದು ನಿಖರ ಸ್ಮರಣೆ ಬಗ್ಗೆ ಅಲ್ಲ; ವೇಗವಾಗಿ ನಂಬಿಗಸ್ಥ ಉತ್ತರಗಳನ್ನು ಹುಡುಕುವುದು ಮತ್ತು ಅವುಗಳನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸಬೇಕೆಂದು ತಿಳಿದುಕೊಳ್ಳುವುದರ ಬಗ್ಗೆ.
+
+**ಇಲ್ಲಿ ನಿಜವಾದ ಕಾಡ್ ನಡೆಯುತ್ತದೆ:**
+
+ವೃತ್ತಿಪರ ಡೆವಲಪರ್ ಗಳು ತಮ್ಮ ಸಮಯದ ದೊಡ್ಡ ಭಾಗವನ್ನು ಡಾಕ್ಯುಮೆಂಟೇಷನ್ ಓದುವಿಕೆಗೆ ಮೀಸಲಿಡುತ್ತಾರೆ – ಅದು ಅವರು ಏನು ಮಾಡುತ್ತಾರೆ ಎಂಬುದನ್ನು ತಿಳಿಯದಿರುವುದರಿಂದ ಅಲ್ಲ, ಆದರೆ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಜಗತ್ತು ಹಗುರವಾಗಿ ಬದಲಾಗಿದೆ ಮತ್ತು ಅಪ್‌ಡೇಟ್ ಆಗಿರಬೇಕಾದುದರಿಂದ ನಿರಂತರ ಕಲಿಕೆಯನ್ನು ಅಗತ್ಯವಿದೆ. ಉತ್ತಮ ಡಾಕ್ಯುಮೆಂಟೇಷನ್ ನಿಮಗೆ *ಹಾಗೇ* ಬಳಸಬೇಕೆಂದು ಮಾತ್ರವಲ್ಲ, *ಏಕೆ* ಮತ್ತು *ಎಂದಕ್ಕೆ* ಬಳಸಬೇಕು ಎಂಬುದನ್ನೂ ತಿಳಿಸುತ್ತದೆ.
+
+#### ಅಗತ್ಯ ಡಾಕ್ಯುಮೆಂಟೇಷನ್ ಸಂಪನ್ಮೂಲಗಳು
+
+**[ಮೊಜಿಲ್ಲಾ ಡೆವಲಪರ್ ನೆಟ್‌ವರ್ಕ್ (MDN)](https://developer.mozilla.org/docs/Web)**
+- ವೆಬ್ ತಂತ್ರಜ್ಞಾನ ಡಾಕ್ಯುಮೆಂಟೇಷನ್‌ಗಾಗಿ ಚಿನ್ನದ ಮಾನಕ
+- HTML, CSS, ಮತ್ತು JavaScript ಗಾಗಿ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶನ
+- ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮಾಹಿತಿ ಒಳಗೊಂಡಿದೆ
+- ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಪ್ರದರ್ಶನಗಳು
+
+**[Web.dev](https://web.dev)** (ಗೂಗಲ್ ಮೂಲಕ)
+- ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಉತ್ತಮ ಪದ್ಧತಿಗಳು
+- ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಜೆಷನ್ ಮಾರ್ಗದರ್ಶನಗಳು
+- ಪ್ರವೇಶಾರ್ಥಕತೆ ಮತ್ತು ಸಮಾವೇಶಾತ್ಮಕ ವಿನ್ಯಾಸ ತತ್ವಗಳು
+- ನಿಜ ಜೀವನದ ಯೋಜನೆಗಳ ಪ್ರಕರಣ ಸಂಶೋಧನೆಗಳು
+
+**[Microsoft ಡೆವಲಪರ್ ಡಾಕ್ಯುಮೆಂಟೇಷನ್](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
+- ಎಡ್ಜ್ ಬ್ರೌಸರಿನ ಅಭಿವೃದ್ಧಿ ಸಂಪನ್ಮೂಲಗಳು
+- ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಗೈಡ್ ಗಳು
+- ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ ಅಭಿವೃದ್ಧಿ ಒಳನೋಟಗಳು
+
+**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
+- ಸಂರಚಿತ ಕಲಿಕಾ ಪಾಠಕ್ರಮಗಳು
+- ಉದ್ಯಮ ತಜ್ಞರಿಂದ ವೀಡಿಯೊ ಕೋರ್ಸ್‌ಗಳು
+- ಕೈಯಲ್ಲಿ ಮಾಡುವ ಕೋಡಿಂಗ್ ಅಭ್ಯಾಸಗಳು
+
+> 📚 **ಅಧ್ಯಯನ ತಂತ್ರ**: ಡಾಕ್ಯುಮೆಂಟೇಷನ್ ಅನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸಬೇಡಿ – ಬದಲಾಗಿ ಅದನ್ನು ಪರಿಣಾಮವಾಗಿ ಸಂಚರಿಸುವುದನ್ನು ಕಲಿಯಿರಿ. ಹೆಚ್ಚು ಉಪಯೋಗಿಸುವ ಉಲ್ಲೇಖಗಳನ್ನು ಬುಕ್‌ಮಾರ್ಕ್ ಮಾಡಿ ಮತ್ತು ವಿಶೇಷ ಮಾಹಿತಿಯನ್ನು ಶೀಘ್ರವಾಗಿ ಹುಡುಕಲು ಹುಡುಕಾಟ ಕಾರ್ಯಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ.
+
+### 🔧 **ಸಾಧನ ಪರಿಣತಿ ಪರಿಶೀಲನೆ: ನಿಮಗೆ ಯಾವುದು ಅನಿಸುತ್ತಿದೆ?**
+
+**ಒಂದು ಕ್ಷಣ ತೆಗೆದು ಯೋಚಿಸಿ:**
+- ಯಾವ ಸಾಧನವನ್ನು ಮೊದಲಿಗೆ ಪ್ರಯತ್ನಿಸಲು ನೀವು ಅತ್ಯಂತ ಉತ್ಸುಕನಾಗಿದ್ದೀರಿ? (ತಪ್ಪು ಉತ್ತರವಿಲ್ಲ!)
+- ಕಮಾಂಡ್ ಲೈನ್ ಇನ್ನೂ ಭಯಾನಕವಾಗಿದೆಯೆ, ಅಥವಾ ನೀವು ಅದರಲ್ಲಿ ಕುತೂಹಲವಿದೆಯೆ?
+- ನೀವು ಬ್ರೌಸರಿನ DevTools ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಪ್ರಿಯ ವೆಬ್ಸೈಟ್‌ಗಳ ಹಿಂದಡೆ ನೋಡುತ್ತಿರುವ ಕೌಲ್ಪನೆಯನ್ನು ಮಾಡಬಹುದೇ?
+
+```mermaid
+pie title "ಉಪಕರಣಗಳೊಂದಿಗೆ ಡೆವಲಪರ್ ಸಮಯ ವ್ಯಯ"
+    "ಕೋಡ್ ಎಡಿಟರ್" : 40
+    "ಬ್ರೌಸರ್ ಪರೀಕ್ಷೆ" : 25
+    "ಕಮಾಂಡ್ ಲೈನ್" : 15
+    "ದಾಖಲೆಗಳನ್ನು ಓದುವುದು" : 15
+    "ಡಿಬಗ್ಗಿಂಗ್" : 5
+```
+> **ರಮಣೀಯ ಸಂಚಯ**: ಬಹುತೇಕ ಡೆವಲಪರ್ ಗಳು ತಮ್ಮ ಕೋಡ್ ಎಡಿಟರ್‌ನಲ್ಲಿ ಸರಾಸರಿ 40% ಸಮಯ ಕಳೆದರೂ, ಪರೀಕ್ಷೆ, ಕಲಿಕೆ, ಮತ್ತು ಸಮಸ್ಯೆ ಪರಿಹಾರಕ್ಕೆ ಹೆಚ್ಚಿನ ಸಮಯ ಬಿತ್ತಿಸುತ್ತಾರೆ. ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಕೇವಲ ಕೋಡ್ ಬರೆಯುವುದಲ್ಲ – ಅನುಭವಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದಾಗಿದೆ!
+
+✅ **ಚಿಂತನಾವಕಾಶ**: ಇಲ್ಲಿ ಒಂದು ರಮಣೀಯ ವಿಷಯವಿದೆ ಯೋಚಿಸಲು – ವೆಬ್ಸೈಟ್ ರಚನೆಗೆ ಸಾಧನಗಳು (ಅಭಿವೃದ್ಧಿ) ಮತ್ತು ಅವು ಹೇಗೆ ಕಾಣಬೇಕು ಅನ್ನೋದನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವ ಸಾಧನಗಳು (ಡಿಸೈನ್) ವಿಭಿನ್ನವಾಗಿರುತ್ತವೆ? ಅದು ಸುಂದರವಾದ ಮನೆ ವಿನ್ಯಾಸ ಮಾಡುವ ವಾಸ್ತುಶಿಲ್ಪಿ ಹಾಗೂ ಅದನ್ನು daadwerkelijk ನಿರ್ಮಿಸುವ ಕಾನ್‌ಟ್ರಾಕ್ಟರ್‌ ನಡುವಿನ ವ್ಯತ್ಯಾಸದಂತಿದೆ. ಎರಡೂ ಮುಖ್ಯ, ಆದರೆ ಬೇರೆ ತಂಡದ ಸಲಕರಣೆಗಳು ಬೇಕು! ಇಂತಹ ಯೋಚನೆ ನಿಮಗೆ ವೆಬ್ಸೈಟ್ ಗಳನ್ನು ಹೇಗೆ ಜೀವಂತಗೊಳಿಸುವುದನ್ನು ವಿಶಾಲ ದೃಷ್ಟಿಯಿಂದ ನೋಡುವಲ್ಲಿ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿಕೊಂಡು ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:
+
+**ವಿವರಣೆ:** ಆಧುನಿಕ ಕೋಡ್ ಎಡಿಟರ್ ಅಥವಾ IDE ಯ ಹಂತಗಳನ್ನು ಅನ್ವೇಷಿಸಿ ಮತ್ತು ಅದು ವೆಬ್ ಡೆವಲಪರ್ ಆಗಿ ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತದೆ ಎಂದು ತೋರಿಸಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಕೋಡ್ ಎಡಿಟರ್ ಅಥವಾ IDE ಆಯ್ಕೆ ಮಾಡಿ (Visual Studio Code, WebStorm ಅಥವಾ ಕ್ಲೌಡ್ ಆಧಾರಿತ IDE ಗಳಲ್ಲಿ ಯಾವುದಾದರೂ). ನೀವು ಹೆಚ್ಚಿನ ಪರಿಣಾಮಕಾರಿತ್ವದೊಂದಿಗೆ ಬರೆಯಲು, ಡಿಬಗ್ ಮಾಡಲು ಅಥವಾ ಕೋಡ್ ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುವ ಮೂರು ವೈಶಿಷ್ಟ್ಯಗಳು ಅಥವಾ ವಿಸ್ತರಣೆಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಿ. ಪ್ರತಿ ಒಂದು ಮಧ್ಯೆ, ಅದು ನಿಮ್ಮ ಕೆಲಸದ ಹರಿವಿಗೆ ಹೇಗೆ ಹಿತಕರ ಎಂದು ಸಂಕ್ಷಿಪ್ತ ವಿವರಣೆ ನೀಡಿ.
+
+---
+
+## 🚀 ಸವಾಲು
+
+**ಸರಿ, ಅನ್ವೇಷಕ, ನಿಮ್ಮ ಮೊದಲ ಪ್ರಕರಣಕ್ಕಾಗಿ ಸಜ್ಜಾಗಿದ್ದೀರಾ?**
+
+ನೀವು ಇಲ್ಲಿಗೆ ಶ್ರದ್ಧೆಯಿಂದ ಬಂದಿರುವುದು ಈಗ ನನಗೆ ಒಂದು ಸಾಹಸ ಇಲ್ಲಿದೆ, ಅದು ನಿಮಗೆ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಜಗತ್ತಿನ ವಿಭಿನ್ನತೆ ಮತ್ತು ಆಕರ್ಷಕತೆಯನ್ನು ತೋರಿಸುತ್ತದೆ. ಕೇಳಿ – ಇದು ಇನ್ನೂ ಕೋಡ್ ಬರೆಯಲು ಅಲ್ಲ, ಹೀಗಾಗಿ ಒತ್ತಡ ಬೇಡ! ನೀವು ನಿಮ್ಮ very first case ನಲ್ಲಿ programming ಭಾಷಾ ಅನ್ವೇಷಕ ಎನ್ನುತ್ತಾ!
+
+**ನಿಮ್ಮ ಮಿಷನ್, ನೀವು ಸ್ವೀಕರಿಸಿದರೆ:**
+1. **ಭಾಷಾ ಅನ್ವೇಷಕ ಆಗಿ**: ಸಂಪೂರ್ಣ ವಿಭಿನ್ನ ವಿಶ್ವಗಳಿಂದ ಮೂರೂ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳನ್ನು ಆರಿಸಿ – ಒಂದು ವೆಬ್ಸೈಟ್ಗಳನ್ನು ರಚಿಸುತ್ತಿದೆ, ಒಂದು ಮೊಬೈಲ್ ಆಪ್ ರಚಿಸುತ್ತದೆ, ಮತ್ತೊಂದು ವಿಜ್ಞಾನಿಗಳಿಗೆ ಡೇಟಾ ಗಣನೆ ಮಾಡುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಭಾಷೆಗಳಲ್ಲಿ ಸರಳ ಕೆಲಸವನ್ನು ಲಿಖಿಸಿರುವ ಉದಾಹರಣೆಗಳನ್ನು ಕಂಡುಹಿಡಿಯಿರಿ. ನೀವು ಆಷ್ಟು ಅಚ್ಚರಿಯಾಗುವಿರಿ ಹೇಗೆ ಭಿನ್ನವಾಗಿರಬಹುದು ಪರೀಕ್ಷೆ ಮಾಡ್ತಾ ಇರುವುದರಿಂದ!
+
+2. **ಅವರ ಮೂಲ ಕಥೆಯನ್ನು ಅನ್ವೇಷಿಸಿ**: ಪ್ರತಿ ಭಾಷೆಯ ವಿಶೇಷತೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ. ಎಲ್ಲಾ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳೂ ಇದೇ ಕಾರಣಕ್ಕೆ ನಿರ್ಮಿಸಲ್ಪಟ್ಟವು – ”ನೀವು ಗೊತ್ತಾ? ಈ ವಿಶೇಷ ಸಮಸ್ಯೆಗೆ ಇನ್ನೊಂದು ಉತ್ತಮ ಪರಿಹಾರ ಅಗತ್ಯವಿದ್ದು” ಎಂಬ ಆಲೋಚನೆಯಿಂದ. ನೀವು ಆ ಸಮಸ್ಯೆಗಳೇನು olduğunu ಕಂಡುಹಿಡಿಯಬಹುದೇ? ಆ ಕಥೆಗಳು ತುಂಬಾ ಆಕರ್ಷಕವಾಗಿವೆ!
+
+3. **ಸಮುದಾಯಗಳನ್ನು ಭೇಟಿಮಾಡಿ**: ಪ್ರತಿ ಭಾಷೆಯ ಸಮುದಾಯ ಹೇಗೆ ಆತ್ಮೀಯ ಮತ್ತು ಸಹಾಯಕವಿದೆ ಅಂದುಕೊಳ್ಳಿ. ಕೆಲವು ತಲೆಸಾಲುಗಳೋ ಜನಸಂಖ್ಯೆಯ ಮೀಸಲಿಟ್ಟಿರುತ್ತಾರೆ, ಇನ್ನಷ್ಟು ಸಣ್ಣ ಆದರೆ ತುಂಬಾ ಒಗ್ಗಟ್ಟಾಗಿ ಮತ್ತೊಬ್ಬರ ನೆರವನ್ನು ನೀಡುತ್ತಾರೆ. ವಿವಿಧ ವ್ಯಕ್ತಿತ್ವಗಳನ್ನು ನೋಡಲು ನೀವು ಇಷ್ಟಪಡುತ್ತೀರಿ!
+
+4. **ನಿಮ್ಮ ಅನುಭವವನ್ನು ಅನುಸರಿಸಿ**: ಈಗ ಯಾವ ಭಾಷೆ ನಿಮಗೆ ಹೆಚ್ಚು ಸುಲಭವಂತೆ ಅನಿಸುತ್ತದೆ? "ಸರಿ" ಆಯ್ಕೆ ಮಾಡುವ ಬಗ್ಗೆ ಒತ್ತಡ ಬೇಡ – ನಿಮ್ಮ ಅನುಭವವನ್ನು ಕೇಳಿ! ಇಲ್ಲಿಗೆ ತಪ್ಪು ಉತ್ತರವಿಲ್ಲ, ಮತ್ತು ನೀವು ಇನ್ನು ಮುಂದೆ ಇತರ ಭಾಷೆಗಳನ್ನು ಕೇಳಿಕೊಳ್ಳಬಹುದು.
+
+**ಬೋನಸ್ ಅನ್ವೇಷಣಾ ಕೆಲಸ**: ಪ್ರತಿಯೊಂದು ಭಾಷೆಯಲ್ಲಿ ನಿರ್ಮಿಸಿರುವ ಪ್ರಮುಖ ವೆಬ್ಸೈಟ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್ ಗಳನ್ನು ಹುಡುಕಿ ನೋಡಿ. ನಾನು ಖಂಡಿತವಾಗಿ ನಿಮಗೆ ಆಶ್ಚರ್ಯವಾಗುತ್ತದೆ ನಿಮ್ಮ ಇನ್‌ಸ್ಟಾಗ್ರಂ, ನೆಟ್‌ಫ್ಲಿಕ್ಸ್ ಅಥವಾ ನೀವು ನಿಲ್ಲಿಸಲಾಗದ ಆ ಮೊಬೈಲ್ ಆಟ ಏನಿನಿಂದ ನಿರ್ಮಿತವಾಗಿದೆ ಎಂದು ತಿಳಿದುಕೊಳ್ಳುವಾಗ!
+
+> 💡 **ಮನಶಾರೀರದಲ್ಲಿಡಿ**: ನೀವು ಇವತ್ತು ಯಾವುದೇ ಭಾಷೆಯ ಪರಿಣತಿಯಾಗಿ ಸಾಧ್ಯವಿಲ್ಲ. ನೀವು ಅವರಿಗೆ ಪರಿಚಯ ಪಡೆಯುತ್ತೀರಿ ಮತ್ತು ಮುಂದಕ್ಕೆ ಏಲ್ಲಿ ನೆಲೆಸಬಲ್ಲಿರಿ ಎಂಬುದನ್ನು ತೀರ್ಮಾನಿಸುವ ಮುನ್ನ. ಸಮಯ ತೆಗೆದುಕೊಂಡು, ಆನಂದಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕುತೂಹಲಕ್ಕೆ ತಡೆಯಿಟ್ಟುಕೊಳ್ಳಬೇಡಿ!
+
+## ನೀವು ಕಂಡುಹಿಡಿದುದಕ್ಕೆ ಸಂಭ್ರಮಿಸೋಣ!
+
+ಅಯ್ಯೋ, ನೀವು ಇಂದು ತುಂಬಾ ಅದ್ಭುತ ಮಾಹಿತಿಯನ್ನು ಒಳಗೊಳ್ಳಿದ್ದೀರಿ! ನಾನು ನಿಜವಾಗಿಯೂ ಆಸಕ್ತನಾಗಿದ್ದೇನೆ ನೀವು ಈ ಅದ್ಭುತ ಪ್ರಯಾಣದಲ್ಲಿ ಎಷ್ಟಷ್ಟು ವಿಷಯ ಹಿಡಿದಿಟ್ಟಿದ್ದೀರೋ ಎಂಬುದನ್ನು ಕಂಡು. ಮತ್ತು ನೆನಪಿಡಿ – ಇದು ಪರೀಕ್ಷೆಯಲ್ಲ, ಎಲ್ಲವನ್ನೂ ಸರಿಯಾಗಿ ಮಾಡಬೇಕಾಗಿಲ್ಲ. ಇದು ಅತ್ಯಂತ ಆನಂದ ಹಾಗೂ ತಿಳುವಳಿಕೆಯ ತಯಾರಿ!
+
+[ಪೋಸ್ಟ್-ಪಾಠ ಕ್ವಿಜ್‌ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ](https://ff-quizzes.netlify.app/web/)
+## ವಿಮರ್ಶೆ & ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+**ನಿಮ್ಮ ಸಮಯವನ್ನು ತೆಗೆದುಕೊಂಡು ಅದನ್ನು ಅನ್ವೇಷಿಸಿ ಮತ್ತು ಆನಂದಿಸಬಹುದು!**
+
+ನೀವು ಇಂದು ಬಹಳಷ್ಟು ವಿಷಯಗಳನ್ನು ಮುಟ್ಟಿದ್ದೀರಿ, ಮತ್ತು ಅದು ಹೆಮ್ಮೆಪಡುವದರಂತೆ ಇದೆ! ಈಗ ಬರುವುದೇನೆಂದರೆ ಸಿಹಿಪಟ – ನಿಮ್ಮ ಕುತೂಹಲ ಉಂಟುಮಾಡಿದ ವಿಷಯಗಳನ್ನು ಅನ್ವೇಷಿಸುವುದು. ನೆನಪಿನಲ್ಲಿ ಇರಲಿ, ಇದು ಹೋಮ್‌ವರ್ಕ್ ಅಲ್ಲ – ಇದು ಒಂದು ಸಾಹಸ!
+
+**ನಿಮ್ಮನ್ನು ರಂಜಿಸುವುದರಲ್ಲಿ ಆಳವಾಗಿ ಡುಬ್ಬಿ ಹೋಗಿ:**
+
+**ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳೊಂದಿಗೆ ಕೈ ಅನಿಸಿ:**
+- ನಿಮ್ಮ ಗಮನ ಸೆಳೆದ 2-3 ಭಾಷೆಗಳ ಅಧಿಕೃತ ತಾಣಗಳಿಗೆ ಭೇಟಿ ನೀಡಿ. ಪ್ರತಿ ಭಾಷೆಗೆ ತನ್ನದೇನಾದರೂ ವೈಯಕ್ತಿಕತೆ ಮತ್ತು ಕಥೆಯಿದೆ!
+- [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ಅಥವಾ [Replit](https://replit.com/) ಮುಂತಾದ ಆನ್‌ಲೈನ್ ಕೋಡಿಂಗ್ ಪ್ಲೇಗ್ರೌಂಡ್ಸ್ ಪ್ರಯತ್ನಿಸಿ. ಪ್ರಯೋಗ ಮಾಡಲು ಭಯಪಡಬೇಡಿ – ನೀವು ಯಾವುದಾದರೂ ಕೆಡಕಲಾರಿಗೆ ಸಾಧ್ಯವಿಲ್ಲ!
+- ನಿಮ್ಮ ಸುಮಾರು ಇಷ್ಟದ ಭಾಷೆಯ ಹುಟ್ಟುಗadona ವನ್ನು ಓದಿ. ಗಂಭೀರವಾಗಿ ಹೇಳುವುದಾದರೆ, ಕೆಲವು ಈ ಮೂಲ ಕಥೆಗಳು ಅತ್ಯಂತ ರೋಚಕವಾಗಿದ್ದು, ಭಾಷೆಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯಮಾಡುತ್ತವೆ.
+
+**ನಿಮ್ಮ ಹೊಸ ಉಪಕರಣಗಳೊಂದಿಗೆ ಆರಾಮವಾಗಿ ಇದ್ದಿರಿ:**
+- ನೀವು Visual Studio Code ಡೌನ್‌ಲೋಡ್ ಮಾಡದಿದ್ದರೆ – ಅದು ಉಚಿತವಾಗಿದ್ದು, ನೀವು ಅದನ್ನು ಇಷ್ಟಪಡುತ್ತಾರೆ!
+- ವಿಶೇಧಗಳ ಮಾರುಕಟ್ಟೆಯನ್ನು ಸ್ವಲ್ಪ ಸಮಯಕ್ಕಾಗಿ ಬ್ರೌಸ್ ಮಾಡಿ. ಅದು ನಿಮ್ಮ ಕೋಡ್ ಸಂಪಾದಕಕ್ಕೆ ಒಂದು ಅಪ್ ಸ್ಟೋರ್ ಹೀಗಿದೆ!
+- ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ತೆರೆಯಿರಿ ಮತ್ತು ಜಾಸ್ತಿ ಕ್ಲಿಕ್ ಮಾಡಿ. ಎಲ್ಲವನ್ನೂ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕಾಗಿಲ್ಲ – ಅಲ್ಲಿ ಏನಿದೆ ಎನ್ನುವುದಕ್ಕೆ ಪರಿಚಯ ಪಡೆಯಿರಿ.
+
+**ಸಮುದಾಯ ಸೇರಿ:**
+- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ಅಥವಾ [GitHub](https://github.com/)ಗಳಲ್ಲಿ ಕೆಲವು ಡೆವಲಪರ್ ಸಮುದಾಯಗಳನ್ನು ಅನುಸರಿಸಿ. ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಸಮುದಾಯವು ಹೊಸಬರಿಗೆ ತುಂಬಾ ಆತಿಥ್ಯಪೂರ್ವಕವಾಗಿದೆ!
+- ಯೂಟ್ಯೂಬ್‌ನಲ್ಲಿ ಆರಂಭಿಕರ ಗೆಳತಿಯ ಕೋಡಿಂಗ್ ವೀಡಿಯೋಗಳನ್ನು ನೋಡಿ. ಪ್ರಾರಂಭವಾಗಿದ್ದಾಗ ಯಾವ ರೀತಿ ಅಂದಿರಲು ನ್ಯಾಯಿಪಡಿಸುವ ಸುಂದರ ಸೃಷ್ಟಿಕರ್ತರು ಅಲ್ಲಿ ಬಹಳಿದ್ದಾರೆ.
+- ಸ್ಥಳೀಯ ಮೀಟಪ್‌ಗಳು ಅಥವಾ ಆನ್‌ಲೈನ್ ಸಮುದಾಯಗಳಿಗೆ ಸೇರುವುದನ್ನು ಪರಿಗಣಿಸಿ. ನಂಬಿಕೆಯಿಂದ ಹೇಳುತ್ತೇನೆ, ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೊಸಬರಿಗೆ ಸಹಾಯ ಮಾಡುವುದು ತುಂಬಾ ಇಷ್ಟ!
+
+> 🎯 **ಶ್ರವಿಸಿ, ಇದು ನಾನು ನಿಮಗೆ ನೆನಪಿಸಬೇಕು ಎ೦ಬುದು:** ನೀವು ಒಂದು ರಾತ್ರಿಯಲ್ಲಿ ಕೋಡಿಂಗ್ ಮಾಂತ್ರಿಕನಾಗಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸಲಾಗಿರುವುದಿಲ್ಲ! ಈಗ, ನೀವು ಭಾಗವಾಗಲಿರುವ ಈ ಅದ್ಭುತ ಹೊಸ ಜಗತ್ತನ್ನು ಪರಿಚಯಿಸಿಕೊಳ್ಳುತ್ತಿದ್ದೀರಿ. ನಿಮ್ಮ ಸಮಯ ತೆಗೆದುಕೊಂಡು ಪ್ರಯಾಣವನ್ನು ಆನಂದಿಸಿ, ಮತ್ತು ನೆನಪಿನಲ್ಲಿ ಇರಲಿ – ಪ್ರತಿಯೊಂದು ಡೆವಲಪರ್ ನೀವು ಪ್ರಶಂಸಿಸುವವರು ಅವರು ಕೂಡ ನಿಮ್ಮ ಕ್ರಮದಲ್ಲಿ ಕುಳಿತಿರುವಾಗ ಸಂತೋಷದಿಂದ ಮತ್ತು ಸ್ವಲ್ಪವಾಗಿ ಅಲಜಲು ಅನುಭವಿಸಿದ್ದರು. ಅದು ಸಂಪೂರ್ಣ ಸಹಜ, ಮತ್ತು ಅದರಿಂದ ಅರ್ಥವಾಗುವುದು ನೀವು ಸರಿಯಾಗಿ ಮಾಡುತ್ತಿರುವಿರಿ!
+
+## ಕಾರ್ಯ
+
+[Reading the Docs](assignment.md)
+
+> 💡 **ನಿಮ್ಮ ಕಾರ್ಯಕ್ಕೆ ಸಣ್ಣ ಒತ್ತರಣೆ:** ನಾವು ಇನ್ನೂ ಮುಟ್ಟದ ಕೆಲವು ಉಪಕರಣಗಳನ್ನು ನೀವು ಅನ್ವೇಷಿಸುವುದನ್ನು ನಾನು ಅತ್ಯಂತ ಇಷ್ಟಪಡುವೆನು! ನಾವು ಈಗಾಗಲೇ ಮಾತಾಡಿ ಕೊಳ್ಳುವ ಸಂಪಾದಕಗಳು, ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಕಮಾಂಡ್ ಲೈನ್ ಉಪಕರಣಗಳನ್ನು ಬಿಟ್ಟುಬಿಡಿ – ಅಲ್ಲಿ ಅನ್ತಹ ಅದ್ಭುತ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣಗಳ ಸಂಪೂರ್ಣ ವಿಶ್ವವಿದ್ದು ಅದು ಆವಿಷ್ಕರಣೆಗೆ ಕಾಯುತ್ತಿದೆ. ಕ್ರಿಯಾಶೀಲವಾಗಿ ನಿರ್ವಹಿಸುವ, ಜ್ಜೀವಂತ ಮತ್ತು ಸಹಾಯಕ ಸಮುದಾಯಗಳ (ಇವುಗಳಲ್ಲಿ ಉತ್ತಮ ಟ್ಯುಟೋರಿಯಲ್ಗಳು ಮತ್ತು ಅತ್ಯುತ್ತಮ ಬೆಂಬಲಿಗರು ಇದ್ದಾರೆ) ಉಪಕರಣಗಳನ್ನು ಹುಡುಕಿರಿ.
+
+---
+
+## 🚀 ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಪ್ರಯಾಣದ ಕಾಲಸೂಚಿ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು**
+- [ ] ನಿಮ್ಮ ಗಮನ ಸೆಳೆದ 2-3 ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಬುಕ್‌ಮಾರ್ಕ್ ಮಾಡಿ 
+- [ ] ನೀವು ಇನ್ನೂ ಡೌನ್‌ಲೋಡ್ ಮಾಡದಿದ್ದರೆ Visual Studio Code ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ
+- [ ] ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವ್‌ಟೂಲ್ಸ್ (F12) ತೆರೆಯಿರಿ ಮತ್ತು ಯಾವುದಾದರೂ ವೆಬ್‌ಸೈಟ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ
+- [ ] ಒಂದು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಸಮುದಾಯಕ್ಕೆ ಸೇರಿದಿರಿ (Dev.to, Reddit r/webdev, ಅಥವಾ Stack Overflow)
+
+### ⏰ **ಈಗಿನ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದು**
+- [ ] ಪಾಠದ ನಂತರದ ಕ್ವಿಜ್ ಕೊನೆಮಾಡಿ ಮತ್ತು ನಿಮ್ಮ ಉತ್ತರಗಳನ್ನು ಪರಿಗಣಿಸಿ
+- [ ] GitHub Copilot ವಿಸ್ತರಣೆ ಜೊತೆಗೆ VS Code ಸನ್ನದ್ಧಪಡಿಸಿ
+- [ ] 2 ವಿಭಿನ್ನ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳಲ್ಲೊಂದು "Hello World" ಉದಾಹರಣೆಯನ್ನು ಆನ್‌ಲೈನಲ್ಲೇ ಪ್ರಯತ್ನಿಸಿ
+- [ ] "Day in the Life of a Developer" ಎಂಬ ವೀಡಿಯೋವನ್ನು ಯೂಟ್ಯೂಬ್‌ನಲ್ಲಿ ನೋಡಿ
+- [ ] ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆ ತನಿಖಾ ಕೆಲಸ ಆರಂಭಿಸಿ (ಚಾಲೆಂಜ್‌ನಿಂದ)
+
+### 📅 **ನಿಮ್ಮ ಒಂದು ವಾರದ ಸಾಹಸ**
+- [ ] ಕಾರ್ಯವನ್ನು ಪೂರ್ಣಗೊಳ್ಳಿಸಿ ಮತ್ತು 3 ಹೊಸ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣಗಳನ್ನು ಅನ್ವೇಷಿಸಿ
+- [ ] ಸೋಶಿಯಲ್ ಮೀಡಿಯಾದಲ್ಲಿ 5 ಡೆವಲಪರ್‍ಗಳು ಅಥವಾ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಖಾತೆಗಳನ್ನು ಅನುಸರಿಸಿ
+- [ ] CodePen ಅಥವಾ Replit ನಲ್ಲಿ ಏನಾದರೂ ಸಣ್ಣದಾಗಿ ನಿರ್ಮಿಸಿ (ಕೆಲವೊಮ್ಮೆ "Hello, [ನಿಮ್ಮ ಹೆಸರು]!" ಸಹ ಸಾಲು)
+- [ ] ಯಾರೋ ಒಬ್ಬ ಡೆವಲಪರ್ ಅವರ ಕೋಡಿಂಗ್ ಸಾಹಸದ ಬಗ್ಗೆ ಒಂದು ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಓದಿ
+- [ ] ಆನ್ಲೈನ್ ಘಟನೆ ಅಥವಾ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಮಾತುಕತೆ ವೀಕ್ಷಿಸಿ
+- [ ] ಆಯ್ದ ಭಾಷೆಯನ್ನು ಆನ್ಲೈನ್ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳಿಂದ ಕಲಿಯಲು ಪ್ರಾರಂಭಿಸಿ
+
+### 🗓️ **ನಿಮ್ಮ ಒಂದು ತಿಂಗಳ ಪರಿವರ್ತನೆ**
+- [ ] ನಿಮ್ಮ ಮೊದಲ ಸಣ್ಣ ಯೋಜನೆ ನಿರ್ಮಿಸಿ (ಸರಳ ವೆಬ್ ಪುಟವೂ ಸಾಕು!)
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ ಯೋಜಿಗೆ ಕೊಡುಗೆ ನೀಡಿ (ದಾಖಲೆ ತಿದ್ದುಪಡಿ ಆರಂಭದಲ್ಲಿ)
+- [ ] ಯಾರೋ ಹೊಸಬರಿಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡಿರಿ
+- [ ] ನಿಮ್ಮ ಡೆವಲಪರ್ ಪೋರ್ಟ್‌ಫೋಲಿಯೊ ವೆಬ್‌ಸೈಟ್ ರಚಿಸಿ
+- [ ] ಸ್ಥಳೀಯ ಡೆವಲಪರ್ ಸಮುದಾಯಗಳು ಅಥವಾ ಅಧ್ಯಯನ ಗುಂಪುಗಳೊಂದಿಗೆ ಸಂಪರ್ಕ ಮಾಡಿ
+- [ ] ಮುಂದಿನ ಕಲಿಕೆಯ ಗುರಿ ರೂಪಿಸುವುದನ್ನು ಪ್ರಾರಂಭಿಸಿ
+
+### 🎯 **ಅಂತಿಮ ಪರಿಗಣನೆ ಪರಿಶೀಲನೆ**
+
+**ಮುಂದೆ ಹೋಗುವುದಕ್ಕೂ ಮುಂಚೆ, ಒಬ್ಬ ಭಾಗವನ್ನು ಆಚರಿಸಿ:**
+- programming ಬಗ್ಗೆ ಇಂದು ನಿಮ್ಮನ್ನು ಕಿಚ್ಚುಮಾತು ಮಾಡಿದ ಏನಾದರೊಬ್ಬದು ಯಾವುದು?
+- ಯಾವ ಉಪಕರಣ ಅಥವಾ ಕಲ್ಪನೆಯನ್ನು ನೀವು ಮೊದಲು ಅನ್ವೇಷಿಸಲು ಇಚ್ಛಿಸುತ್ತೀರಿ?
+- ಈ programming ಪ್ರಯಾಣವನ್ನು ಪ್ರಾರಂಭಿಸುವ ಬಗ್ಗೆ ನೀವು ಹೇಗಿದ್ದೀರಿ?
+- ಈಗಲೇ ನೀವು ಡೆವಲಪರ್ ಒಬ್ಬರಿಗೆ ಕೇಳಬೇಕಿರುವ ಒಂದು ಪ್ರಶ್ನೆಯೇನು?
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಆತ್ಮವಿಶ್ವಾಸ ನಿರ್ಮಾಣ ಯಾತ್ರೆ
+    section ಇಂದಿನದು
+      ಕುತೂಹಲಪೂರ್ಣ: 3: You
+      ತುಂಬಾ ಒತ್ತಡದಡಿಯಲ್ಲಿ: 4: You
+      ಉತ್ಸಾಹಭರಿತ: 5: You
+    section ಈ ವಾರ
+      ಅನ್ವೇಷಣೆ: 4: You
+      ಕಲಿಕೆ: 5: You
+      ಸಂಪರ್ಕಿಸಲು: 4: You
+    section ಮುಂದಿನ ತಿಂಗಳು
+      ನಿರ್ಮಾಣ: 5: You
+      ಆತ್ಮವಿಶ್ವಾಸವುಳ್ಳ: 5: You
+      ಇತರರಿಗೆ ಸಹಾಯ ಮಾಡುತ್ತಿರುವುದು: 5: You
+```
+> 🌟 **ನಿಮ್ಮ ನೆನಪಿಗೆ:** ಪ್ರತಿಯೊಬ್ಬ ماهರೂ ಕೂಡ ಮೊದಲಿಗೆ ಆರಂಭಿಕನಾಗಿದ್ದರೂ; ಪ್ರತಿಯೊಬ್ಬ ಹಿರಿಯ ಡೆವಲಪರ್ ಕೂಡ ನೀವು ನಿನ್ನ ಸಮಯದಲ್ಲಿ ಹಾಗೆಯೇ - ಉತ್ಸಾಹದಿಂದ, ಸ್ವಲ್ಪ ಅಲಜಲಾಗಿ ಮತ್ತು ಯಾವನು ಸಾಧ್ಯ ಎ೦ಬುದರ ಬಗ್ಗೆ ಕುತೂಹಲದಿಂದ ಇದ್ದರು. ನೀವು ಅದ್ಭುತ ಸಮುದಾಯದಲ್ಲಿ ಇದ್ದೀರಿ, ಮತ್ತು ಈ ಪ್ರಯಾಣ ಅದ್ಭುತವಾಗಿರುತ್ತದೆ. ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ನ ಅದ್ಭುತ ಜಗಕ್ಕೆ ಸ್ವಾಗತ! 🎉
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅತ್ಯಾವಶ್ಯಕ ನಿರ್ಗಮನ**:  
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಉಪಯೋಗಿಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸೀಮಿತತೆಗಳು ಇರಬಹುದಾಗಿದೆ. ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅದರ ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ಪ್ರಾಮಾಣಿಕ ಆಧಾರವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಗಂಭೀರ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅಸಮರ್ಥನೆಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳನ್ನು ಕುರಿತು ನಾವು ಹೊಣೆಗಾರರಾಗಿದ್ದೇವಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md

@@ -0,0 +1,78 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
+  "translation_date": "2026-01-08T20:24:03+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಅಸೈನ್ಮೆಂಟ್: ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ದಿ ಸಾಧನಗಳನ್ನು ಅನ್ವೇಷಿಸುವುದು
+
+## ಸೂಚನೆಗಳು
+
+ವೆಬ್ ಅಭಿವೃದ್ಧಿ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ವಿಕಸಕರೆಗಳಿಗೆ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ಮಿಸಲು, ಪರೀಕ್ಷಿಸಲು, ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುವ ನೂರಾರು ವಿಶೇಷ ಸಾಧನಗಳು ಸೇರಿವೆ. ಈ ಪಾಠದಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಸಾಧನಗಳನ್ನು ಸಹಾಯ ಮಾಡುವ ಸಾಧನಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ, ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿಮ್ಮ ಕಾರ್ಯವಾಗಿದೆ.
+
+**ನಿಮ್ಮ ಮಿಷನ್:** ಈ ಪಾಠದಲ್ಲಿ **ಆಳವಾಗಿ ಒಳಗೊಂಡಿಲ್ಲದ ಮೂರು ಸಾಧನಗಳನ್ನು** ಆಯ್ಕೆಮಾಡಿ (ಮೂದಲು ನೀಡಲಾದ ಕೋಡ್ ಸಂಪಾದಕರು, ಬ್ರೌಸರಗಳು ಅಥವಾ ಕಮಾಂಡ್ ಲೈನ್ ಸಾಧನಗಳನ್ನು ಆಯ್ಕೆಮಾಡಲು ಬಾರದು). ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯಪ್ರವಾಹಗಳಲ್ಲಿ ವಿಶೇಷ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುವ ಸಾಧನಗಳ ಮೇಲೆ ಗಮನಹರಿಸಿ.
+
+**ಪ್ರತಿಯೊಂದು ಸಾಧನಕ್ಕೆ, ನೀಡಬೇಕಾಗಿರುವುದು:**
+
+1. **ಸಾಧನ ಹೆಸರು ಮತ್ತು ವರ್ಗ** (ಉದಾಹರಣೆ: "Figma - ವಿನ್ಯಾಸ ಸಾಧನ" ಅಥವಾ "Jest - ಪರೀಕ್ಷಾ ಫ್ರೇಮ್ವರ್ಕ್")
+2. **ಉದ್ದೇಶ ಮತ್ತು ಉಪಯೋಗಗಳು** - ಒಂದು ವೆಬ್ ಡೆವಲಪರ್ ಈ ಸಾಧನವನ್ನು ಯಾಕೆ ಬಳಸುತ್ತಾನೆ ಮತ್ತು ಯಾವ ಸಮಸ್ಯೆಗಳನ್ನು ಅದು ಪರಿಹರಿಸುತ್ತದೆ ಎಂದು 2-3 ವಾಕ್ಯಗಳಲ್ಲಿ ವಿವರಿಸಿ
+3. **ಅಧಿಕೃತ ದಾಖಲೆ ಲಿಂಕ್** - ಸಾಧನದ ಅಧಿಕೃತ ದಸ್ತಾವೇಜು ಅಥವಾ ವೆಬ್‌ಸೈಟ್ (ಕೆವಲ ಟ್ಯುಟೋರಿಯಲ್ ಸೈಟ್‌ಗಳು ಅಲ್ಲ)
+4. **ವಾಸ್ತವಿಕ ಸಂತ್ರಸ್ತ ಪರಿಸರ** - ಈ ಸಾಧನವು ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯಪ್ರವಾಹದಲ್ಲಿ ಹೇಗೆ ಸೇರಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಕೆಲವೊಂದು ವಿವರಿಸಿ
+
+## ಶಿಫಾರಸು ಮಾಡಿದ ಸಾಧನ ವರ್ಗಗಳು
+
+ಈ ವರ್ಗಗಳಿಂದ ಸಾಧನಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಪರಿಗಣಿಸಿ:
+
+| ವರ್ಗ | ಉದಾಹರಣೆಗಳು | ಅವು ಏನು ಮಾಡುತ್ತವೆ |
+|----------|----------|--------------|
+| **ನಿರ್ಮಾಣ ಸಾಧನಗಳು** | Vite, Webpack, Parcel, esbuild | ವೇಗವಾಗಿ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ಗಳೊಂದಿಗೆ ಉತ್ಪಾದನೆಗೆ ಕೋಡ್ ಪ್ಯಾಕೇಜ್ ಮತ್ತು ಗಾತ್ರ ಕುಗ್ಗಿಸುವುದು |
+| **ಪರೀಕ್ಷಾ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು** | Vitest, Jest, Cypress, Playwright | ಕೋಡ್ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿದೆ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಿ, ದೋಷಗಳನ್ನು ಮುಂಗಡದಲ್ಲಿಯೇ ಹಿಡಿಯುವುದು |
+| **ಡಿಸೈನ್ ಸಾಧನಗಳು** | Figma, Adobe XD, Penpot | ಮಾಕ್ ಅಪ್‌ಗಳು, ಪ್ರೋಟೋಟೈಪ್ಗಳು, ಡಿಸೈನ್ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸಹಕರಿಸಿ ಸೃಷ್ಟಿಸುವುದು |
+| ** ವಿನ್ಯಾಸ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳು** | Netlify, Vercel, Cloudflare Pages | ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತ CI/CD ಜೊತೆ ಹೋಸ್ಟ್ ಮತ್ತು ಹಂಚುವಿಕೆ |
+| **ಪರ್ಯವಕ್ಷಣೆ ವಿಭಾಗ** | GitHub, GitLab, Bitbucket | ಕೋಡ್ ಬದಲಾವಣೆ, ಸಹಕಾರ ಮತ್ತು ಯೋಜನಾ ಕಾರ್ಯಪ್ರವಾಹಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು |
+| **CSS ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು** | Tailwind CSS, Bootstrap, Bulma | ಪೂರ್ವನಿರ್ಮಿತ ಘಟಕ ಗ್ರಂಥಾಲಯಗಳೊಂದಿಗೆ ಶೈಲಿಸರಣೆಯನ್ನು ವೇಗಗೊಳಿಸುವುದು |
+| **ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್‌ಗಳು** | npm, pnpm, Yarn | ಕೋಡ್ ಗ್ರಂಥಾಲಯಗಳು ಮತ್ತು ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಿ ನಿರ್ವಹಿಸುವುದು |
+| **ಪ್ರವೇಶಾಧಿಕಾರ ಸಾಧನಗಳು** | axe-core, Lighthouse, Pa11y | ಅಂತರಾಷ್ಟ್ರೀಯ ವಿನ್ಯಾಸ ಮತ್ತು WCAG ಅನುಕೂಲತೆಗಾಗಿ ಪರೀಕ್ಷಿಸುವುದು |
+| **API ಅಭಿವೃದ್ಧಿ** | Postman, Insomnia, Thunder Client | ಅಭಿವೃದ್ಧಿ ಸಮಯದಲ್ಲಿ APIಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ ಡಾಕ್ಯುಮೆಂಟ್ ಮಾಡುವುದು |
+
+## ಸ್ವರೂಪವಿಧಾನ ಅವಶ್ಯಕತೆಗಳು
+
+**ಪ್ರತೀಸ್ ಸಾಧನಕ್ಕೆ:**
+```
+### [Tool Name] - [Category]
+
+**Purpose:** [2-3 sentences explaining why developers use this tool]
+
+**Documentation:** [Official website/documentation link]
+
+**Workflow Integration:** [1 sentence about how it fits into development process]
+```
+
+## ಗುಣಮಟ್ಟ ಮಾರ್ಗಸೂಚಿಗಳು
+
+- **ಆಧುನಿಕ ಸಾಧನಗಳನ್ನು ಆರಿಸಬಹುದು**: 2025 ರಲ್ಲಿ ಸಕ್ರೀಯವಾಗಿ ನಿರ್ವಹಿಸಲ್ಪಡುವ ಮತ್ತು ವ್ಯಾಪಕವಾಗಿ ಬಳಸುವ ಸಾಧನಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ
+- **ಮೌಲ್ಯಕ್ಕೆ ಕೇಂದ್ರೀಕರಿಸಿ**: ಸಾಧನವೇನು ಮಾಡುವುದನ್ನು ಮಾತ್ರವಲ್ಲದೆ, ಅದರ ವಿಶೇಷ ಲಾಭಗಳನ್ನು ವಿವರಿಸಿ
+- **ವೃತ್ತಿಪರ ಸಂತ್ರಸ್ತತೆ**: ವೈಯಕ್ತಿಕ ಹವ್ಯಾಸಿಗಳಿಗೆ ಅಲ್ಲ, ಅಭಿವೃದ್ಧಿ ತಂಡಗಳು ಬಳಸುವ ಸಾಧನಗಳನ್ನು ಪರಿಗಣಿಸಿ
+- **ಬೇರೆಬೇರೆ ಆಯ್ಕೆ**: ಪರಿಸರ ವ್ಯಾಪ್ತಿಯನ್ನು ತೋರಿಸಲು ವಿಭಿನ್ನ ವರ್ಗಗಳಿಂದ ಸಾಧನಗಳನ್ನು ಆರಿಸಿ
+- **ಸಮಕಾಲೀನ ಪ್ರಾಮುಖ್ಯತೆ**: ಇತ್ತೀಚಿನ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಪ್ರವರ್ತನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿಗೆ ಹೊಂದಾಣಿಕೆಯಾಗುವ ಸಾಧನಗಳಿಗೆ ಪ್ರಾಥಮ್ಯ ನೀಡಿ
+
+## ಮಾನದಂಡ
+
+| ಅತ್ಯುತ್ತಮ | ಉತ್ತಮ | ಸುಧಾರಣೆಯ ಅಗತ್ಯವಿದೆ |
+|-----------|------|-------------------|
+| **ಪ್ರತೀಸ್ ಸಾಧನವನ್ನು ವೆಬ್ ಡೆವಲಪರ್ ಏಕೆ ಬಳಸುತ್ತಾರೆ ಮತ್ತು ಯಾವ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವಿವರಿಸಲಾಗಿದೆ** | **ಸಾಧನ ಏನು ಮಾಡುತ್ತದೆ ಎಂದೂ ತಿಳಿಸಿದ್ದು ವ್ಯಾಲ್ಯೂ ಬಗ್ಗೆ ಕೆಲವೊಂದು ವಿವರ ತಪ್ಪಿದ್ದಾರೆ** | **ಸಾಧನಗಳ ಪಟ್ಟಿ ನೀಡಲಾಗಿದೆ ಆದರೆ ಅವರ ಉದ್ದೇಶ ಅಥವಾ ಲಾಭಗಳು ವಿವರಿಸಲಿಲ್ಲ** |
+| **ಎಲ್ಲಾ ಸಾಧನಗಳಿಗೆ ಅಧಿಕೃತ ದಾಖಲೆ ಲಿಂಕ್ ನೀಡಲಾಗಿದೆ** | **ಬಹುಮಾರಿಗೆ ಅಧಿಕೃತ ಲಿಂಕ್ ಒದಗಿಸಲಾಗಿದೆ ಆದರೆ 1-2 ಟ್ಯುಟೋರಿಯಲ್ ಸೈಟ್‌ಗಳಿವೆ** | **ಮುಖ್ಯವಾಗಿ ಟ್ಯುಟೋರಿಯಲ್ ಸೈಟ್‌ಗಳನ್ನು ಅಧೀನ ಮಾಡಿದರೆ ಅಧಿಕೃತ ದಸ್ತಾವೇಜುಗಳ ಬದಲು** |
+| **ಸಕ್ರೀಯ, ವೃತ್ತಿಪರವಾಗಿ ಬಳಸುವುದಾದಭ್ಯ ಸಾಧನವನ್ನು ವಿಭಿನ್ನ ವರ್ಗಗಳಿಂದ ಆಯ್ಕೆ ಮಾಡಲಾಗಿದೆ** | **ರೂಚಿಕರ ಸಾಧನಗಳು ಆಯ್ಕೆಮಾಡಲಾಗಿದೆ ಆದರೆ ವರ್ಗಗಳ ವೈವಿಧ್ಯ ಕಡಿಮೆ** | **ಹಳೆ ಪದ್ಧತಿನ ಸಾಧನಗಳು ಅಥವಾ ಒಂದೇ ವರ್ಗದಿಂದ ಮಾತ್ರ ಆಯ್ಕೆ** |
+| **ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯಪ್ರವಾಹಗಳಲ್ಲಿ ಸಾಧನಗಳ ಜಾಗದ ಬಗ್ಗೆ ಅರ್ಥಮಾಡಿಕೊಂಡಿದೆ** | **ವೃತ್ತಿಪರ ಸಂತ್ರಸ್ತತಾ ಬಗ್ಗೆ ಕೆಲವೊಂದು ಅರಿವು ತೋರಿಸಲಾಗಿದೆ** | **ಕೆವಲ ಸಾಧನ ವೈಶಿಷ್ಟ್ಯಗಳ ಮೇಲೆ ಮಾತ್ರ ಗಮನ ಕೇಂದ್ರೀಕರಿಸಿದ್ದು ಕಾರ್ಯಪ್ರವಾಹದ ಭಾಗವಿಲ್ಲ** |
+
+> 💡 **ಸಂಬಂಧಿತ ಸಂಶೋಧನೆ ಸಲಹೆ:** ವೆಬ್ ಡೆವಲಪರ್ಗಾಗಿ ಉದ್ಯೋಗ ಪ್ರಕಟಣೆಗಳಲ್ಲಿ ಉಲ್ಲೇಖಿಸಿದ ಸಾಧನಗಳನ್ನು ಹುಡುಕಿ, ಜನಪ್ರಿಯ ಡೆವಲಪರ್ ಸಮೀಕ್ಷೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ, ಅಥವಾ GitHub上的 ಯಶಸ್ವೀ ಮುಕ್ತಸ್ರೋತ ಯೋಜನೆಗಳ ಅವಲಂಬನೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ!
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಾಗಪತ್ರಿಕೆ**:
+ಈ ದಾಖಲೆ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯನ್ನು ಸಾಧಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದೆಂದನ್ನು ಗಮನದಲ್ಲಿರಿಸಿಕೊಳ್ಳಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಳಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವನ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಸಂಭವಿಸುವ ಯಾವುದೇ ಅರ್ಥಮಾಡಿಕೊಳ್‍ಪು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಹಣೆಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/1-getting-started-lessons/2-github-basics/README.md

@@ -0,0 +1,777 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5c383cc2cc23bb164b06417d1c107a44",
+  "translation_date": "2026-01-08T20:34:29+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "kn"
+}
+-->
+# GitHub ಗೆ ಪರಿಚಯ
+
+ಹೇಯ್ ಅಲ್ಲಿ, ಭವಿಷ್ಯದ ಡೆವಲಪರ್! 👋 ಪ್ರಪಂಚದಾದ್ಯಾಂತ ಲಕ್ಷಾಂತರ ಕೋಡರ್ಸ್ ಜೊತೆ ಸೆರೆಯಾಗಲು ಸಿದ್ಧರೇ? ನಾನು ನಿಜವಾಗಿಯೂ GitHub ಅನ್ನು ಪರಿಚಯಿಸಲು ಉತ್ಸುಕನಾಗಿದ್ದೇನೆ – ಇದನ್ನು ಪ್ರೋಗ್ರಾಮರ್‌ಗಳಿಗಾಗಿ ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ವೇದಿಕೆ ಎಂದು ಭಾವಿಸಿ, ಆದರೆ ನಿಮ್ಮ ಊಟದ ಫೋಟೋಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳುವುದರ ಬದಲು, ನಾವು ಕೋಡ್ ಹಂಚಿಕೊಳ್ಳುತ್ತೇವೆ ಮತ್ತು ಅದ್ಭುತ ವಸ್ತುಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತೇವೆ!
+
+ನನಗೆ ಖಂಡಿತವಾಗಿ ಆಶ್ಚರ್ಯ ಹುಟ್ಟಿಸುವುದೇನಂದರೆ: ನಿಮ್ಮ ಫೋನಿನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಅಪ್ಲಿಕೇಶನ್, ನೀವು ಭೇಟಿ ನೀಡುವ ಪ್ರತಿಯೊಂದು ವೆಬ್‌ಸೈಟ್ ಮತ್ತು ನೀವು ಬಳಸಲು ಕಲಿಯುವ ಬಹುಮತ ಉಪಕರಣಗಳನ್ನು GitHub ತರಹದ ವೇದಿಕೆಗಳಲ್ಲಿ ಸಹಕರಿಸುವ ಡೆವಲಪರ್‌ಗಳ ತಂಡಗಳು ರಚಿಸಿದ್ದವು. ನೀವು ಇಷ್ಟಪಡುವ ಸಂಗೀತ ಅಪ್ಲಿಕೇಶನ್? ನಿಮ್ಮಂತಹ ಯಾರೋ ಅದರತ್ತ ಕೊಡುಗೆ ನೀಡಿದ್ದಾರೆ. ನೀವು ಬಿಡಿಸಲು ಆಗದ ಆಟ? ಹೌದು, ಬಹುಶಃ GitHub ಸಹಯೋಗದಿಂದ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಮತ್ತು ಈಗ ನೀವು ಆ ಅದ್ಭುತ ಸಮುದಾಯದ ಭಾಗವಾಗುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ಕಲಿಯಲಿದ್ದೀರಿ!
+
+ಮೊದಲಿಗೆ ಇದು ತುಂಬಾ ಆಗಬಹುದೆಂದು ನನಗೆ ಗೊತ್ತಿದೆ – ನಾನು ನನ್ನ ಮೊದಲ GitHub ಪುಟವನ್ನು ನೋಡುತ್ತ "ಇದರಲ್ಲಿ ಏನು ಅರ್ಥ?" ಎಂದು ಯೋಚಿಸಿದ್ದೆ. ಆದರೆ ಗೋಚರಿಸುವುದು: ಪ್ರತಿಯೊಬ್ಬ ಡೆವಲಪರ್ ಕೂಡ ನೀವು ಈಗಿರುವ ಸ್ಥಳದಿಂದಲೇ ಪ್ರಾರಂಭಿಸುತ್ತಾರೆ. ಈ ಪಾಠದ ಕೊನೆಯಲ್ಲಿ, ನಿಮಗೆ ನಿಮ್ಮ ಸ್ವಂತ GitHub ರೆಪೊಸಿಟರಿ (ನಿಮ್ಮ ವೈಯಕ್ತಿಕ ಪ್ರಾಜೆಕ್ಟ್ ಪ್ರದರ್ಶನವನ್ನು ಕ್ಲೌಡ್‌ನಲ್ಲಿ ಎಂದು ಭಾವಿಸಿ) ಇರುತ್ತದೆ, ಮತ್ತು ನೀವು ನಿಮ್ಮ ಕೆಲಸ ಉಳಿಸುವುದು, ಇತರರೊಂದಿಗೆ ಹಂಚಿಕೊಳ್ಳುವುದು ಮತ್ತು ಲಕ್ಷಾಂತರ ಜನ ಬಳಸುವ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ತಿಳಿದಿರುತ್ತೀರಿ.
+
+ನಾವು ಈ ಪ್ರಯಾಣವನ್ನು ಒಂದೊಂದು ಹಂತವಾಗಿ ಹೋಗೋಣ. ಬೇಗನೆ ಮಾಡಲು ಬೇಡ, ಒತ್ತಡ ಮಾಡಬೇಡ – ನಿಮ್ಮ ಹಾಗೂ ನನ್ನ ನಡುವೆ ಮತ್ತು ನಿಮ್ಮ ಹೊಸ ಅತ್ಯುತ್ತಮ ಸ್ನೇಹಿತರಾದ ಕೆಲವು ಅಬ್ಬರದ ಉಪಕರಣಗಳ ಜೊತೆ!
+
+![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.kn.png)
+> ಸ್ಕೆಚ್ನೋಟ್: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+```mermaid
+journey
+    title ನಿಮ್ಮ GitHub ಸಾಹಸ ಇಂದು
+    section ಸೆಟಪ್
+      Git ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ: 4: You
+      ಖಾತೆಯನ್ನು ರಚಿಸಿ: 5: You
+      ಮೊದಲ ರೆಪೊಸಿಟರಿ: 5: You
+    section Git ನಲ್ಲಿ ನಿಪುಣತೆ
+      ಸ್ಥಳೀಯ ಬದಲಾವಣೆಗಳು: 4: You
+      ಕಮಿಟ್ ಮತ್ತು ಪುಷ್ ಮಾಡಿ: 5: You
+      ಶಾಖೆ: 4: You
+    section ಸಹಕರಿಸಿ
+      ಪ್ರಾಜೆಕ್ಟ್ಗಳನ್ನ ಫೋರ್ಕ್ ಮಾಡಿ: 4: You
+      ಪುಲ್ ವಿನಂತಿಗಳು: 5: You
+      ಓಪನ್ ಸೋರ್ಸ್: 5: You
+```
+## ಪೂರ್ವ-ಪಾಠ ಕ್ವಿಜ್
+[ಪೂರ್ವ-ಪಾಠ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app)
+
+## ಪರಿಚಯ
+
+ನಿಜವಾಗಿಯೂ ರೋಚಕ ವಿಷಯಗಳಿಗೆDiveಗೊಳ್ಳುವ ಮುನ್ನ, GitHub ಮಾಯಾಜಾಲಕ್ಕಾಗಿ ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ ಸಿದ್ಧಗೊಳಿಸೋಣ! ಇದು ಒಂದು ಕಲಾಕೃತಿ ಸೃಷ್ಟಿಸುವ ಮುನ್ನ ನಿಮ್ಮ ಕಲೆ ಉಪಕರಣಗಳನ್ನು ಆಯೋಜಿಸುವದಷ್ಟು ಸರಳ – ಸರಿಯಾದ ಉಪಕರಣಗಳು ಸಿದ್ಧವಾಗಿರುವುದು ಎಲ್ಲವೂ ಸೌಕರ್ಯಕರ ಮತ್ತು ಮನರಂಜನೆಯಾಗಿಸುವುದು.
+
+ನಾನು ಪ್ರತಿ ಸೆಟ್ಟಪ್ ಹಂತದ ಮೂಲಕ ನಿಮಗೆ ಮುಖಾಮುಖಿಯಾಗಿ ನಡೆಯುತ್ತೇನೆ, ಮತ್ತು ಇದು ಮೊದಲ ಭೇಟಿಯಲ್ಲಿ ಹೇಗಾದರೂ ಭಯಂಕರವೆಂದು ಭಾವಿಸುವಷ್ಟು ಭಯಹೊಂದಬೇಕಿಲ್ಲ. ಏನಾದರೂ ತಕ್ಷಣ ಮೆರಗು ತೋರದೇ ಇದ್ದರೂ, ಅದು ಸಹಜ. ನಾನು ನನ್ನ ಮೊದಲ ಡೆವಲಪ್‌ಮೆಂಟ್ ಪರಿಸರವನ್ನು ಹೊಂದಿಸುವಾಗ ಪ್ರಾಚೀನ ಹೈರೋಗ್ಲಿಫ್ ಓದುವ ಪ್ರಯತ್ನ ಮಾಡುತ್ತಿರುವಂತೆ ಭಾಸವಾಗಿತ್ತು. ಪ್ರತಿಯೊಬ್ಬ ಡೆವಲಪರ್ ಕೂಡ ನೀವು ಈಗಿರುವ ಸ್ಥಿತಿಯಲ್ಲಿದ್ದಾನೆ, ಸರಿಯಾಗಿ ಮಾಡುತ್ತಿದ್ದಾನಾ ಎಂದು ಸಂಶಯಿಸುತ್ತ. ಸೂಕ್ಷ್ಮ ಮಾಹಿತಿ: ನೀವು ಇಲ್ಲಿ ಕಲಿಯುತ್ತಿದ್ದೀರಾ ಎಂದರೆ ಸರಿಯಾಗಿ ಮಾಡುತ್ತಿದ್ದೀರಿ! 🌟
+
+ಈ ಪಾಠದಲ್ಲಿ ನಾವು ಕಾಣೋದು:
+
+- ನಿಮ್ಮ ಯಂತ್ರದಲ್ಲಿ ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವುದು
+- ಇತರರೊಂದಿಗೆ ಪ್ರಾಜೆಕ್ಟ್ ಮೇಲೆ ಕೆಲಸ ಮಾಡುವುದು
+- ಓಪನ್ ಸೋರ್ಸ್ ತಂತ್ರಾಂಶಕ್ಕೆ ಕೊಡುಗೆ ನೀಡುವುದು ಹೇಗೆ
+
+### ಪೂರ್ವಶರತ್ತುಗಳು
+
+ನಿಮ್ಮ GitHub ಮಾಯಾಜಾಲಕ್ಕಾಗಿ ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ ಸಿದ್ಧಗೊಳಿಸೋಣ! ಚಿಂತೆ ಬೇಡ – ಈ ಸೆಟ್ಟಪ್ ನಿಮಗೆ ಒಂದು ಬಾರಿ ಮಾತ್ರ ಬೇಕು, ಮತ್ತು ಆನಂತರ ನೀವು ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಕೋಡಿಂಗ್ ಪಯಣಕ್ಕಾಗಿ ಸಿದ್ಧರಾಗುತ್ತೀರಿ.
+
+ಸರಿ, ನೆಲೆಯ ಮೇಲೆ ಪ್ರಾರಂಭಿಸೋಣ! ಮೊದಲಿಗೆ, Git ಈಗಾಗಲೇ ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಇಷ್ಟೇ ಇಲ್ಲವೋ ನೋಡೋಣ. Git ಕೇಂದ್ರೀಯವಾಗಿ super-smart ಸಹಾಯಕನಂತೆ ನಿಮ್ಮ ಕೋಡ್‌ನ ಪ್ರತಿಯೊಂದು ಬದಲಾವಣೆ ನಿರ್ಮಿಸಿದಂತೆ ನೆನಸಿಕೊಳ್ಳುತ್ತದೆ – ಪ್ರತಿಐ ಎರಡು ಸೆಕೆಂಡುಗಳಲ್ಲಿ Ctrl+S ಒತ್ತುತ್ತಿರೋದಕ್ಕಿಂತ ಹೆಚ್ಚು ಚಾತುರ್ಮ್ಯಕ್ಷವಾಗಿದೆ (ನಾವು ಎಲ್ಲರೂ ಹಾಗೆಂದು ಇದ್ದೇವೆ!).
+
+ನಿಮ್ಮ ಟರ್ಮಿನಲ್‌ನಲ್ಲಿ ಈ ಮಾಯಾಜಾಲದ ಆಜ್ಞೆ ಟೈಪ್ ಮಾಡಿ Git ಈಗಾಗಲೇ ಇಂದೆಯೋ ನೋಡೋಣ:
+`git --version`
+
+Git ಇಲ್ಲದಿದ್ದರೂ, ಸಮಸ್ಯೆ ಇಲ್ಲ! פשוט [download Git](https://git-scm.com/downloads) ಗೆ ಹೋಗಿ ಡೌನ್ಲೋಡ್ ಮಾಡಿ. ನೀವು ಅದನ್ನು ಸ್ಥಾಪಿಸಿದ ಬಳಿಕ, Gitನನ್ನು ಸರಿಯಾಗಿ ಪರಿಚಯಿಸಬೇಕಿದೆ:
+
+> 💡 **ಮೊದಲ ಬಾರಿಗೆ ಸೆಟ್ಟಪ್**: ಈ ಆಜ್ಞೆಗಳು Gitಗೆ ನೀವು ಯಾರಾಗಿದ್ದೀರೋ ಹೇಳುತ್ತವೆ. ಪ್ರತಿಯೊಂದು ನಿಮ್ಮ ಕಮಿಟ್ ಗೆ ಈ ಮಾಹಿತಿ ಜೋಡಿಸಲಾಗುವುದು, ಆದ್ದರಿಂದ ನಿಮ್ಮ ಹೆಸರು ಮತ್ತು ಇಮೇಲ್ ಅನ್ನು ಸಾರ್ವಜನಿಕವಾಗಿ ಹಂಚಿಕೊಳ್ಳಲು ನೀವು ಸಮತೋಲನ ಹೊಂದಿದಂತೆ ಆಯ್ಕೆಮಾಡಿ.
+
+```bash
+git config --global user.name "your-name"
+git config --global user.email "your-email"
+```
+
+Git ಈಗಾಗಲೇ ಕಾನ್ಫಿಗರ್ ಆಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ನೀವು ಟೈಪ್ ಮಾಡಬಹುದು:
+```bash
+git config --list
+```
+
+ನೀವು GitHub ಖಾತೆ, ಕೋಡ್ ಸಂಪಾದಕ (Visual Studio Code ಮುಂತಾದ) ಬೇಕಾಗುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಟರ್ಮಿನಲ್ ಅಥವಾ ಕಮಾಂಡ್ ಪ್ರಾಂಪ್ಟ್ ತೆರೆಯಬೇಕು.
+
+[github.com](https://github.com/) ಗೆ ಹೋಗಿ ನೀವು ಈಗಾಗಲೇ ಖಾತೆ ನಿರ್ಮಿಸದಿದ್ದರೆ ಸೃಷ್ಟಿಸಿ ಅಥವಾ ಲಾಗಿನ್ ಮಾಡಿ ಮತ್ತು ನಿಮ್ಮ ಪ್ರೊಫೈಲ್ ಭರ್ತಿ ಮಾಡಿ.
+
+💡 **ನೂತನ ಸಲಹೆ**: ಗುಪ್ತಪದಗಳನ್ನು ಬೇಸರವಿಲ್ಲದೆ ಬಳಸಲು [SSH ಕೀಗಳನ್ನು](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) ಅಥವಾ [GitHub CLI](https://cli.github.com/) ಬಳಸಿ.
+
+✅ GitHub ಏಕೈಕ ಕೋಡ್ ರೆಪೊಸಿಟರಿ ಅಲ್ಲ; ಇತರ ಸಹ ಇದ್ದಾರೆ, ಆದರೆ GitHub ಹೆಚ್ಚು ಪ್ರಸಿದ್ದವಾಗಿದೆ.
+
+### ತಯಾರಿ
+
+ನಿಮ್ಮ ಸ್ಥಳೀಯ ಯಂತ್ರದಲ್ಲಿ (ಲೆಪ್ಟಾಪ್ ಅಥವಾ ಪಿಸಿ) ಕೋಡ್ ಪ್ರಾಜೆಕ್ಟ್ ಇರುವ ಫೋಲ್ಡರ್ ಮತ್ತು ಇತರರ ಪ್ರಾಜೆಕ್ಟುಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಲು ಉದಾಹರಣೆಯಾಗಿ GitHub ನಲ್ಲಿ ಸಾರ್ವಜನಿಕ ರೆಪೊಸಿಟರಿ ಬೇಕಾಗುತ್ತದೆ.
+
+### ನಿಮ್ಮ ಕೋಡ್ ಸುರಕ್ಷಿತವಾಗಿರಿಸುವುದು
+
+ನಮ್ಮ ಒಂದು ಕ್ಷಣ ಭದ್ರತೆ ಬಗ್ಗೆ ಮಾತಾಡೋಣ – ಆದರೆ ಭಯಂಕರ ವಿಷಯಗಳಿಂದ ನಿಮ್ಮನ್ನು ಮತ್ತೆಗಲ್ಲುಗೊಳ್ಳಿಸುವುದಿಲ್ಲ! ಈ ಭದ್ರತಾ ಅಭ್ಯಾಸಗಳನ್ನು ನಿಮ್ಮ ಕಾರು ಅಥವಾ ಮನೆ ನ securely ಲಾಕ್ ಮಾಡುವಂತೆ ಭಾವಿಸಿ. ಇದು ಸರಳವಾದ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ನಿಮ್ಮ ಕಠಿಣ ಕೆಲಸವನ್ನು ರಕ್ಷಿಸುತ್ತವೆ.
+
+ನಾವು ಆರಂಭದಿಂದಲೇ GitHub ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ನವೀನ, ಭದ್ರ ವಿಧಾನಗಳನ್ನು ತೋರಿಸುತ್ತೇವೆ. ಹಾಗಾಗಿ, ನೀವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಬೆಳಸುತ್ತೀರಿ ಮತ್ತು ನಿಮ್ಮ ಪೂರ್ವಾಭ್ಯಾಸವನ್ನಾಗಿ ಮಾಡುತ್ತೀರಿ.
+
+GitHub ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ, ಭದ್ರತಾ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವುದು ಮುಖ್ಯ:
+
+| ಭದ್ರತೆ ವಿಭಾಗ | ಉತ್ತಮ ಅಭ್ಯಾಸ | ಮಹತ್ವ ಏನು |
+|---------------|---------------|-------------|
+| **ಪ್ರಮಾಣೀಕರಣ** | SSH ಕೀಗಳು ಅಥವಾ ವ್ಯಕ್ತಿಗತ ಪ್ರವೇಶ ಟೋಕನ್‌ಗಳು ಉಪಯೋಗಿಸಿ | ಗುಪ್ತಪದಗಳು ಕಡಿಮೆ ಭದ್ರತೆ ಮತ್ತು ಹಳೆಯಾಗುತ್ತಿವೆ |
+| **ಎರಡು-ಘಟಕ ಪ್ರಮಾಣೀಕರಣ** | ನಿಮ್ಮ GitHub ಖಾತೆಗೆ 2FA ಸಕ್ರಿಯಮಾಡಿ | ಖಾತೆಯನ್ನು ಹೆಚ್ಚುವರಿ ರಕ್ಷಣೆ ನೀಡುತ್ತದೆ |
+| **ರೆಪೊಸಿಟರಿ ಭದ್ರತೆ** | ಘನಗೋಪ್ಯ ಮಾಹಿತಿಗಳನ್ನು ಎಂದಿಗೂ ಕಮಿಟ್ ಮಾಡಬೇಡಿ | API ಕೀಗಳು ಮತ್ತು ಗುಪ್ತಪದಗಳು ಸಾರ್ವಜನಿಕ ರೆಪೊಗಳಲ್ಲಿದ್ದರೆ 안 될 ಉಂಟು |
+| **ನಿರ್ಭರತೆ ನಿರ್ವಹಣೆ** | ಅಪ್ಡೇಟ್‌ಗಳಿಗೆ Dependabot ಸಕ್ರಿಯ ಮಾಡಿ | ನಿಮ್ಮ ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಭದ್ರ ಮತ್ತು ನವೀಕರಿತವಾಗಿರಿಸುತ್ತದೆ |
+
+> ⚠️ **ಗಂಭೀರ ಭದ್ರತಾ ನೆನಪಿನಂತೆ**: API ಕೀಗಳು, ಗುಪ್ತಪದಗಳು ಅಥವಾ ಇತರ ಭದ್ರ ಮಾಹಿತಿಗಳನ್ನು ಯಾವ ರೆಪೊಸಿಟರಿಗೂ ಕಮಿಟ್ ಮಾಡಬೇಡಿ. ಗುರ್ತಿಸುವಂತಹ ಡೇಟಾವನ್ನು ಪರಿಸರ ವ್ಯತ್ಯಾಸಗಳು ಮತ್ತು `.gitignore` ಫೈಲ್‌ಗಳ ಮೂಲಕ ರಕ್ಷಿಸಿ.
+
+**ಆಧುನಿಕ ಪ್ರಮಾಣೀಕರಣ ಸೆಟ್ಟಪ್:**
+
+```bash
+# SSH ಕೀ ತಯಾರಿಸಿ (ಆಧುನಿಕ ed25519 ಅಲ್ಗಾರಿದಮ್)
+ssh-keygen -t ed25519 -C "your_email@example.com"
+
+# Git ಅನ್ನು SSH ಬಳಸಲು ಸೆಟ್‌ಅಪ್ ಮಾಡಿ
+git remote set-url origin git@github.com:username/repository.git
+```
+
+> 💡 **ಪ್ರೊ ಸಲಹೆ**: SSH ಕೀಗಳು ಗುಪ್ತಪದಗಳನ್ನು ಪುನಃ ಇನ್ಪುಟ್ ಮಾಡಬೇಕಾದ ಅಗತ್ಯವನ್ನು ತೆಗೆದುಹಾಕುತ್ತವೆ ಮತ್ತು ಪರಂಪರাগত ಪ್ರಮಾಣೀಕರಣ ದೃಶ್ಠಾಂತಕ್ಕಿಂತ ಹೆಚ್ಚು ಭದ್ರತೆ ಒದಗಿಸುತ್ತವೆ.
+
+---
+
+## ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪ್ರೊಗಳಂತೆ ನಿರ್ವಹಿಸುವುದು
+
+ಸರಿ, ಇಲ್ಲಿ ವಿಷಯಗಳು ನಿಜವಾಗಿಯೂ ರೋಚಕವಾಗುತ್ತಿವೆ! 🎉 ನಾವು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪ್ರೊಗಳಂತೆಯೇ ಟ್ರ್ಯಾಕ್ ಮತ್ತು ನಿರ್ವಹಿಸುವಂತೆ ಕಲಿಯೋಣ, ಮತ್ತು ಇದೊಂದು ನನ್ನ ಇಷ್ಟ ಪಾಠಾಂಶ ಏಕೆಂದರೆ ಇದು ಆಟ ಬದಲಿಸುವಂತೆ.
+
+ಈದನ್ನು ಆಲೋಚಿಸಿ: ನೀವು ಒಂದು ಅದ್ಭುತ ಕಥೆಯನ್ನು ಬರೆಯುತ್ತಿದ್ದೀರಿ ಮತ್ತು ಪ್ರತಿಯೊಂದು খಾಕು, ಪ್ರತಿಯೊಂದು ಸ್ಫೂರ್ತಿದಾಯಕ ಸಂಪಾದನೆ ಮತ್ತು ಎಲ್ಲ "ಅಯ್ಯೋ, ಇದು ಆಕಸ್ಮಿಕ!" ಕ್ಷಣಗಳನ್ನು ಅನುಸರಿಸಲು ಇಚ್ಛಿಸುವಿರಿ. Git ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ಸರಿಯಾಗಿ ಅಂಥ ಒಂದು ಆಗುತ್ತದೆ! ಇದು ಅತ್ಯುತ್ತಮ ಕಾಲಪ್ರವಾಸಿ ನೋಟ್ಬುಕ್ ಹಾಗೆ – ಪ್ರತಿಯೊಂದು ಕೀಪ್ರೆಸ್, ಬದಲಾವಣೆ, "ಅಯ್ಯೋ, ಇದರಿಂದ ಎಲ್ಲವೂ ಕೊಳೆದುಹೋದಂತೆ" ಕ್ಷಣ ಕೂಡ ನೆನಸಿಕೊಳ್ಳಬಹುದು ಮತ್ತು ತಕ್ಷಣ ಮರುಹೊಂದಿಸಬಹುದು.
+
+ನಿರ್ಮಲಾನಿರ್ಮಲ, ಇದು ಮೊದಲಿಗೆ ಭಾರವಾಗಿ ಕಂಡರೂ ಸಹ. ನಾನು ಪ್ರಾರಂಭಿಸಿದಾಗ, "ನನಗೆ ಸರಾಸರಿ ಫೈಲ್ ಗಳಂತೆ ಉಳಿಸುವುದಕ್ಕೆ ಏಕೆ ಸಾಧ್ಯವಿಲ್ಲ?" ಎಂದೂ ಯೋಚಿಸಿದ್ದೆ. ಆದರೆ ನಂಬಿ: Git ನಿಮಗೆ ಸೂಕ್ತವಾಗಿದ್ದಾಗ (ಮತ್ತು ಅದು ಆಗುತ್ತದೆ!), ನೀವು ಆ ಲೈಟ್ಬಲ್ಬ್ ಕ್ಷಣ ಪಡೆಯುತ್ತೀರಿ – "ನಾನು ಇದುವರೆಗೆ ಹೇಗೆ ಇಲ್ಲದಂತಿರಲಿಲ್ಲ?". ನಾನು ನಡೆಯುತ್ತಿದ್ದಾಗ ಯಾರೋ ಹಾರಿದ್ದರು ಎಂದು ಕಂಡುಕೊಳ್ಳುವುದಂತಾಗಿದೆ!
+
+ನೀವು ಸ್ಥಳೀಯವಾಗಿ ಫೋಲ್ಡರ್ ಹೊಂದಿದ್ದು, ಆ ಪ್ರಾಜೆಕ್ಟ್ ಮೇಲೆ ನಿಮ್ಮ ಪ್ರಗತಿಯನ್ನು Git ಮೂಲಕ ಟ್ರ್ಯಾಕ್ ಮಾಡಬೇಕೆಂದು ಬಯಸಿದರೆ – ಕೆಲವು ಜನರು Git ಉಪಯೋಗಿಸುವುದನ್ನು ತಮ್ಮ ಭವಿಷ್ಯ ಸ್ವಂತಿಗೆ ಒಳಮೇಲಿನ ಪ್ರೇಮ ಪತ್ರ ಬರೆಯುವುದಾಗಿ ಹೋಲಿಸುತ್ತಾರೆ. ನಿಮ್ಮ ಕಮಿಟ್ ಸಂದೇಶಗಳನ್ನು ದಿನಗಳು, ವಾರಗಳು ಅಥವಾ ತಿಂಗಳುಗಳ ನಂತರ ಓದುವಾಗ ನೀವು ಏಕೆ ಈ ನಿರ್ಧಾರ ತೆಗೆದುಕೊಂಡಿರಿ ಅಥವಾ ಏನು ಬದಲಾವಣೆ ಮಾಡಿಕೊಂಡಿರಿ ಎಂಬುದನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಬಹುದು – ಅಂದರೆ ನೀವು ಉತ್ತಮ "ಕಮಿಟ್ ಸಂದೇಶ"ಗಳು ಬರೆಯುತ್ತಿದ್ದಿರಿ.
+
+```mermaid
+flowchart TD
+    A[📁 ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೈಲ್ಸ್] --> B{ಇದು ಗಿಟ್ ರೆಪೊ ಆವೇ?}
+    B -->|ಇಲ್ಲ| C[git init]
+    B -->|ಹೌದು| D[ಮಾರ್ಪಡಿಸಿಕೊಂಡುಬೇರೆ]
+    C --> D
+    D --> E[git add .]
+    E --> F["git commit -m 'ಸಂದೇಶ'"]
+    F --> G[git push]
+    G --> H[🌟 ಗಿಟ್ಹಬ್ ಮೇಲೆ ಕೋಡ್!]
+    
+    H --> I{ಸಹಕಾರ ಮಾಡಲು ಇಷ್ಟವಿದೆಯಾ?}
+    I -->|ಹೌದು| J[Fork & Clone]
+    I -->|ಇಲ್ಲ| D
+    J --> K[ಬ್ರಾಂಚ್ ರಚಿಸಿ]
+    K --> L[ಮಾರ್ಪಡಿಸಿಕೊಂಡುಬೇರೆ]
+    L --> M[ಪುಲ್ ವಿನಂತಿ]
+    M --> N[🎉 ಕೊಡುಗೆ ನೀಡುತ್ತಿದ್ದೀರಿ!]
+    
+    style A fill:#fff59d
+    style H fill:#c8e6c9
+    style N fill:#ff4081,color:#fff
+```
+### ಕಾರ್ಯ: ನಿಮ್ಮ ಮೊದಲ ರೆಪೊಸಿಟರಿ ರಚಿಸಿ!
+
+> 🎯 **ನಿಮ್ಮ ಮಿಷನ್ (ನಾನು ನಿಮ್ಮಿಗಾಗಿ ತುಂಬ ಉತ್ಸುಕನಾಗಿದ್ದೇನೆ!)**: ನಾವು ನಿಮ್ಮ ಮೊದಲ GitHub ರೆಪೊಸಿಟರಿಗೆ ಜೊತೆಗೇ ರಚಿಸುವೆವು! ಇಲ್ಲಿ ಪೂರ್ಣಗೊಂಡಾಗ, ನಿಮ್ಮ ಕೋಡ್ ಇರುವ ಸ್ವಂತ ಅಂಚೆಬಾಗಿಲು ಹಾಗೂ ನಿಮ್ಮ ಮೊದಲ "ಕಮಿಟ್" (ಅಂದರೆ ಬಹುಶಕ್ತಿಯಾದ ರೀತಿಯಲ್ಲಿ ನಿಮ್ಮ ಕೆಲಸ ಉಳಿಸುವಿಕೆ) ಮಾಡಿದ್ದೀರಿ.
+>
+> ಇದು ನಿಜವಾಗಿಯೂ ವಿಶೇಷ ಕ್ಷಣ – ನೀವು ಅಧಿಕೃತವಾಗಿ ಗ್ಲೋಬಲ್ ಡೆವಲಪರ್ ಸಮುದಾಯದ ಭಾಗವಾಗಿರುತ್ತೀರಿ! ನನ್ನ ಮೊದಲ ರೆಪೊ ನಿರ್ಮಿಸಿಕೊಂಡಾಗ ನೋಡುವ ಉತ್ಸಾಹ ಇನ್ನೂ ಮನದಾಳದಲ್ಲಿದೆ – "ಅಯ್ಯೋ ನಾನು ನಿಜವಾಗಿಯೂ ಇದನ್ನು ಮಾಡುತ್ತಿದ್ದೇನೆ!"
+
+ನಾವು ಈ ಸಂಚಲನವನ್ನು ಹೆಜ್ಜೆ ಹೆಜ್ಜೆ ಹಾಕಿ ನೋಡೋಣ. ಪ್ರತಿಯೊಂದರಲ್ಲೂ ಸಮಯವನ್ನು ಬಳಸಿ – ಬೇಗನೆ ಮಾಡಲು ಯಾವ ಬೀಗಲೂ ಇಲ್ಲ, ಮತ್ತು ಪ್ರತಿಯೊಬ್ಬ ಹಂತವೂ ಅರ್ಥವಾಗುವುದು. ನೆನಪಿಡಿ, ಪ್ರತಿಯೊಬ್ಬ ಕೋಡಿಂಗ್ ಸೂಪರ್ ಸ್ಟಾರ್ ನೀವು ಇMMಡಿದ ಸ್ಥಳದಲ್ಲಿ ಕುಳಿತಿದ್ದ, ತನ್ನ ಮೊದಲ ರೆಪೊ ಸೃಷ್ಟಿಸಲು ಸಿದ್ಧನಿತ್ತು. ಅದೃಷ್ಟವೇನೇ!
+
+> ವೀಡಿಯೋ ನೋಡಿ
+> 
+> [![Git ಮತ್ತು GitHub ಮೂಲಭೂತ ವೀಡಿಯೋ](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+**ನಾವು ಇದನ್ನು ಜೊತೆಯಾಗಿಸೋಣ:**
+
+1. **GitHub ನಲ್ಲಿ ನಿಮ್ಮ ರೆಪೊ ಸೃಷ್ಟಿಸಿ**. GitHub.com ಗೆ ಹೋಗಿ ಮತ್ತು ಬಲ ಎಮTYವ ಮೂಟಿಕೊಂಡಿರುವ ಹಸಿರು **New** ಬಟನ್ ಅಥವಾ ಮೇಲ್ಭಾಗದ **+** ಚಿಹ್ನೆಗೆ ನೋಡಿ. ಅದನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು **New repository** ಆಯ್ಕೆಮಾಡಿ.
+
+   ಇದನ್ನೇ ಮಾಡಿದಾಗ:
+   1. ನಿಮ್ಮ ರೆಪೊಗೆ ಹೆಸರಿಡಿ – ನಿಮ್ಮಿಗೆ ಅರ್ಥವಾಗುವ ಹೆಸರನ್ನಿಡಿ!
+   1. ಇಚ್ಛಿಸುವರೆಡೆ ಒಂದು ವಿವರಣೆ ಸೇರಿಸಿ (ಇದು ಇತರರಿಗೆ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಏನು ಎಂಬುದನ್ನು ತಿಳಿಸುತ್ತದೆ)
+   1. ಅದನ್ನು ಸಾರ್ವಜನಿಕ ಅಥವಾ ಖಾಸಗಿ ಎಂದು ನಿರ್ಧರಿಸಿ
+   1. README ಫೈಲ್ ಸೇರಿಸುವ ಆಯ್ಕೆಯನ್ನು ಪರಿಶೀಲಿಸಿ – ಇದು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟಿನ ಮುನ್ನುಪಟ
+   1. **Create repository** ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಹರ್ಷಿಸಿ – ನೀವು ಮೊದಲ ರೆಪೊ ಸೃಷ್ಟಿಸಿದ್ದೀರಿ! 🎉
+
+2. **ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್‌ಗೆ ಸಂಚರಿಸಿ**. ಈಗ ಟರ್ಮಿನಲ್ ತೆರೆಯಿರಿ (ಭಯಪಡಬೇಡಿ, ಅದು ಭಯಂಕರವಲ್ಲ!). ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ ಗೆ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೈಲ್‌ಗಳು ಎಲ್ಲಿವೆ ಅನಿಸುವಂತೆ ಹೇಳಬೇಕು. ಈ ಆಜ್ಞೆ ಟೈಪ್ ಮಾಡಿ:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+   **ನಾವು ಏನು ಮಾಡುತ್ತಿದ್ದೇವೆ:**
+   - ನಾವೀಗ ಹೇಳುತ್ತಿದ್ದೇವೆ "ಹೇ ಕಂಪ್ಯೂಟರ್, ನನ್ನ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್‌ಗೆ ಕೊಂಡು ಹೋಗು"
+   - ಇದು ನಿಮ್ಮ ಡೆಸ್ಕ್‌ಟಾಪ್ ನಲ್ಲಿ ನಿಶ್ಚಿತ ಫೋಲ್ಡರ್ ತೆರೆಯುವುದರಂತೆ, ಆದರೆ ನಾವು ಪಠ್ಯ ಆಜ್ಞೆಗಳ ಮೂಲಕ ಮಾಡುತ್ತಿದ್ದೇವೆ
+   - `[ನಿಮ್ಮ ಫೋಲ್ಡರ್ ಹೆಸರ]` ಅನ್ನು ನಿಮ್ಮ প্রকಲ್ರ್ ಫೋಲ್ಡರ್ ನ ನಿಜವಾದ ಹೆಸರಿನಿಂದ ಬದಲಾಯಿಸಿ
+
+3. **ನಿಮ್ಮ ಫೋಲ್ಡರ್ Git ರೆಪೊಸಿಟರಿಯಾಗಿಸು**. ಮಾಯಾಜಾಲ ಸಂಭವಿಸುತ್ತಿದೆ! ಟೈಪ್ ಮಾಡಿ:
+
+   ```bash
+   git init
+   ```
+
+   **ಇದು ಈಗಾಗಲೀ ಆಗಿದೆ (ಅದ್ಭುತವೆನಿಸುತ್ತದೆ!):**
+   - Git ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟಿನಲ್ಲೊಂದು ಗೌಪ್ಯ `.git` ಫೋಲ್ಡರ್ ರಚಿಸಿದೆ – ನೀವು ಅದನ್ನು ನೋಡಲಾರಿರಿ ಆದರೆ ಅದು ಅಲ್ಲಿ ಇದೆ!
+   - ನಿಮ್ಮ ಸಾಮಾನ್ಯ ಫೋಲ್ಡರ್ ಈಗ ಪ್ರತಿಯೊಂದು ಬದಲಾವಣೆ ಟ್ರ್ಯಾಕ್ ಮಾಡಬಹುದಾದ "ರೆಪೊಸಿಟರಿ" ಆಗಿದೆ
+   - ನಿಮ್ಮ ಫೋಲ್ಡರ್‌ಗೆ ಎಲ್ಲಾ ಚಟುವಟಿಕೆಗಳನ್ನು ನೆನಸಿಕೊಳ್ಳುವ ಸೂಪರ್ಸಾಕ್ಷ್ಮತೆಗೆ ನೀಡಿದಂತೆ ಭಾವಿಸಿ
+
+4. **ನಾವು ಏನು ಮಾಡುತ್ತಿದ್ದೇವೆ ಪರಿಶೀಲಿಸಿ**. Git ನಿಮಗೆ ಈಗ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಬಗ್ಗೆ ಏನು ಹೇಳುತ್ತಿದೆ ನೋಡೋಣ:
+
+   ```bash
+   git status
+   ```
+
+   **Git ನೀವು ತಿಳಿಸುವುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ:**
+   
+   ನೀವು ಹೀಗೆ ಕಾಣಬಹುದು:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git restore <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   **ಭಯಪಡಬೇಡಿ! ಇದರಿಂದ ಅರ್ಥವೇನಂದರೆ:**
+   - **ಕೆಂಪು** ಬಣ್ಣದಲ್ಲಿ ಇರುವ ಫೈಲ್‌ಗಳು ಬದಲಾವಣೆಗೊಂಡಿವೆ ಆದರೆ ಇನ್ನು ಉಳಿಸಿಬಿಡಲು ಸಿದ್ಧವಿಲ್ಲ
+   - **ಹಸಿರು** ಬಣ್ಣದಲ್ಲಿ ಇರುವ ಫೈಲ್‌ಗಳು ಉಳಿಸುವ ಹಂತಕ್ಕೆ ಸಿದ್ಧವಾಗಿವೆ
+   - Git ತಕ್ಷಣವೇ ಮುಂದೇನು ಮಾಡಬೇಕು ಎಂದು ಹೇಳುತ್ತದೆ
+
+   > 💡 **ಪ್ರೊ ಸಲಹೆ**: `git status` ಆಜ್ಞೆ ನಿಮ್ಮ ಅತ್ಯುತ್ತಮ ಸ್ನೇಹಿತ! ನೀವು ಏನು ನಡೆಯುತ್ತಿದೆ ಎಂದು ಗೊಂದಲದಲ್ಲಿದ್ದರೆ ಯಾವಾಗಲೂ ಇದನ್ನು ಬಳಸಿ. Gitಗೆ "ಈಗ ಸ್ಥಿತಿ ಏನಿದೆ?" ಎಂದು ಕೇಳುವುದಿನಂತೆ.
+
+5. **ನಿಮ್ಮ ಫೈಲ್‌ಗಳನ್ನು ಉಳಿಸಲು ಸಿದ್ಧಮಾಡಿ** ("ಸ್ಟೇಜಿಂಗ್" ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ):
+
+   ```bash
+   git add .
+   ```
+
+   **ನಾವು ಈಗ ಮಾಡಿದ್ದು:**
+   - ನಾವು Gitಗೆ "ನಾನು ನನ್ನ ಎಲ್ಲಾ ಫೈಲ್‌ಗಳನ್ನು ಮುಂದಿನ ಉಳಿಸುವಿಕೆಗಳಿಗೆ ಸೇರಿಸಲು ಇಚ್ಛಿಸುತ್ತೇನೆ" ಎಂದು ಹೇಳಿದೆವು
+   - `.` ಅಂದರೆ "ಈ ಫೋಲ್ಡರ್ನಲ್ಲಿರುವ ಎಲ್ಲವನ್ನೂ"
+   - ಈಗ ನಿಮ್ಮ ಫೈಲ್‌ಗಳು ಸ್ಟೇಜ್ ಆಗಿದ್ದು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಸಿದ್ಧ
+
+   **ಆಕ್ರಮಣೀಯವಾಗಿರಲು ಬಯಸುತ್ತೀರಾ?** ನೀವು ಬೇರೆ ಬೇರೆ ಫೈಲ್‌ಗಳನ್ನು ಮಾತ್ರ ಸೇರಿಸಬಹುದು:
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   **ಇದು ಏಕೆ ಬೇಕಾಗಬಹುದು?**
+   - ನೀವು ಸಂಬಂಧಿತ ಬದಲಾವಣೆಗಳನ್ನು ಒಂದಾಗಿ ಉಳಿಸಲು ಬಯಸಬಹುದು
+   - ಇದು ನಿಮ್ಮ ಕೆಲಸವನ್ನು ತರ್ಕಸಮ್ಮತ ಭಾಗ ಗಳಿಗೆ ಒಕ್ಕಣೆ ಮಾಡಬಹುದು
+   - ಏನೂ ಬದಲಾಯಿಸಿತ್ತೆಂಬುದನ್ನು ಮತ್ತು ಯಾವಾಗ ಬದಲಾಯಿಸಿತ್ತೆಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭ
+
+   **ನಿಮ್ಮ ಮನಸ್ಸು ಬದಲಾಗಿದೆ?** ಚಿಂತಿಸಬೇಡಿ! ನೀವು ಫೈಲ್‌ಗಳನ್ನು ಸ್ಟೇಜ್‌ನಿಂದ ಮರಳಿ ತೆಗೆದುಹಾಕಬಹುದು:
+
+   ```bash
+   # ಎಲ್ಲವನ್ನೂ ಅನ್ಸ್ಟೇಜ್ ಮಾಡಿ
+   git reset
+   
+   # ಕೇವಲ ಒಂದು ಕಡತವನ್ನು ಅನ್ಸ್ಟೇಜ್ ಮಾಡಿ
+   git reset [file name]
+   ```
+
+   ಆಲೋಚಿಸಬೇಡಿ – ಇದು ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಅಳಿಸುವುದಿಲ್ಲ, ತಮ್ಮನ್ನು "ಸೇವಿಗೆ ಸಿದ್ಧ" ಸರಣಿಯಿಂದ ತೆಗೆದುಹಾಕುತ್ತದೆ.
+
+6. **ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಶಾಶ್ವತವಾಗಿ ಉಳಿಸಿ** (ನಿಮ್ಮ ಮೊದಲ ಕಮಿಟ್ ಮಾಡಿ!):
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   **🎉 ಅಭಿನಂದನೆಗಳು! ನೀವು ಈಗ ನಿಮ್ಮ ಮೊದಲ ಕಮಿಟ್ ಮಾಡಿದ್ದಾರೆ!**
+   
+   **ನಮ್ಮದ್ದು ಏನಾಯಿತು:**
+   - Git ಈಗಲಿರುವ ಎಲ್ಲ ಸ್ಟೇಜ್ ಮಾಡಲಾದ ಫೈಲ್‌ಗಳ "ಸ್ನಾಪ್‌ಶಾಟ್" ತೆಗೆದುಕೊಂಡಿತು
+   - ನಿಮಗೆ ಕಮಿಟ್ ಸಂದೇಶ "ಮೇಲಿನ ಕಮಿಟ್" ನಿಮ್ಮ ಉಳಿಸುವಿಕೆಯ ಅರ್ಥವನ್ನು ವಿವರಿಸುತ್ತದೆ
+   - Git ಈ ಸ್ನಾಪ್‌ಶಾಟ್‌ಗೆ ವಿಶಿಷ್ಟ ID ನೀಡುತ್ತದೆ, ನೀವು ಅದನ್ನು ಯಾವಾಗಲೂ ಹಿಂಬಾಳಬಹುದು
+   - ನೀವು ಅಧಿಕೃತವಾಗಿ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಇತಿಹಾಸವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡೋಣ ಪ್ರಾರಂಭಿಸಿದ್ದೀರಿ!
+
+   > 💡 **ಭವಿಷ್ಯದ ಕಮಿಟ್ ಸಂದೇಶಗಳು**: ಮುಂದಿನ ಕಮಿಟ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ವಿವರಣಾತ್ಮಕವಾಗಿರಿ! "ಅಪ್ಡೇಟು ಮಾಡಿದದ್ದು" ಬದಲಿಗೆ "ಮುಖಪುಟಕ್ಕೆ ಸಂಪರ್ಕ ಫಾರ್ಮ್ ಸೇರಿಸಿ" ಅಥವಾ "ನ್ಯಾವಿಗೇಶನ್ ಮೆನು ಬಗ್ಗು ಸರಿಪಡಿಸಿ" ಬಳಸಿ. ನಿಮ್ಮ ಭವಿಷ್ಯದ ತಾತ್ಕಾಲಿಕ ಸ್ವರೂಪ ನಿಮಗೆ ಧನ್ಯವಾದ ಹೇಳಲಿವೆ!
+
+7. **ನಿಮ್ಮ ಸ್ಥಳೀಯ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು GitHub ಗೆ ಸಂಪರ್ಕಿಸಿ**. ಈಗ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಮಾತ್ರ ಇದೆ. ಇದನ್ನು GitHub ರೆಪೊಸಿಟರಿ ಗೆ ಸಂಪರ್ಕಿಸಿ ಎಲ್ಲರೂ ನೋಡಬಹುದಾಗಿಸೋಣ!
+
+   ಮೊದಲು, GitHub ರೆಪೊಸಿಟರಿ ಪುಟಕ್ಕೆ ಹೋಗಿ URL ನಕಲಿಸಿ. ಆಗ ಇಲ್ಲಿ ಬಂದು ಟೈಪ್ ಮಾಡಿ:
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+   
+   (ಅವನು ನಿಮ್ಮ ನಿಜವಾದ ರೆಪೊಸಿಟರಿ URL ಅನ್ನು ಬದಲಾಯಿಸಿ!)
+
+   **ನಾವು ಮಾಡಿದ್ದು:**
+   - ನಿಮ್ಮ ಸ್ಥಳೀಯ ಪ್ರಾಜೆಕ್ಟ್ ಮತ್ತು ನಿಮ್ಮ GitHub ರೆಪೊಸಿಟರಿ ನಡುವಣ ಸಂಪರ್ಕವನ್ನು ನಾವು ರಚಿಸಿದ್ದೇವೆ
+   - "Origin" ನಿಮ್ಮ GitHub ರೆಪೊಸಿಟರಿಗಾಗಿ ಒಂದು ಹೆಸರು ಮಾತ್ರ – ಇದು ನಿಮ್ಮ ಫೋನ್‌ಗೆ ಸಂಪರ್ಕ ಸೇರಿಸುವಂತೆ
+   - ಈಗ ನಿಮ್ಮ ಸ್ಥಳೀಯ Git ಗೆ ತಿಳಿದಿದೆ ನೀವು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಸಿದ್ಧರಾಗಿದ್ದೀರಾ ಎಲ್ಲಿ ಕಳುಹಿಸಲು
+
+   💡 **ಸುಲಭವಾದ ಮಾರ್ಗ**: ನೀವು GitHub CLI ಅನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿಕೊಂಡಿದ್ದರೆ, ನೀವು ಇದನ್ನು ಒಂದು ಕಮಾಂಡ್‌ನಲ್ಲಿ ಮಾಡಬಹುದು:
+   ```bash
+   gh repo create my-repo --public --push --source=.
+   ```
+
+8. **ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು GitHub ಗೆ ಕಳುಹಿಸಿ** (ಮಹತ್ವದ ಕ್ಷಣ!):
+
+   ```bash
+   git push -u origin main
+   ```
+
+   **🚀 ಇದೇ ಅದು! ನೀವು GitHub ಗೆ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡುತ್ತಿದ್ದೀರಿ!**
+   
+   **ನಡೆಯುತ್ತಿರುವುದು:**
+   - ನಿಮ್ಮ ಕಾಮಿಟ್‌ಗಳು ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನಿಂದ GitHub ಗೆ ಪ್ರಯಾಣಿಸುತ್ತಿವೆ
+   - `-u` ಧ್ವಜವು ಭವಿಷ್ಯದಲ್ಲಿ ಪುಶ್‌ಗಳು ಸುಲಭವಾಗಲು ಶಾಶ್ವತ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ
+   - "main" ನಿಮ್ಮ ಪ್ರಮುಖ ಶಾಖೆಯ ಹೆಸರು (ಮುಖ್ಯ ಕಡತದಂತೆ)
+   - ಇದಾದ ಮೇಲೆ, ಭವಿಷ್ಯ ಅಪ್‌ಲೋಡ್‌ಗಳಿಗೆ ಕೇವಲ `git push` ಅನ್ನು ಟೈಪ್ ಮಾಡಬಹುದು!
+
+   💡 **ತ್ವರಿತ ಟಿಪ್**: ನಿಮ್ಮ ಶಾಖೆಯ ಹೆಸರು ಬೇರೆ ಏನೆಂದರೆ (ಉದಾ: "master"), ಆ ಹೆಸರನ್ನು ಬಳಸಿ. ನೀವು `git branch --show-current` ಮೂಲಕ ಪರಿಶೀಲಿಸಬಹುದು.
+
+9. **ನಿಮ್ಮ ಹೊಸ ದೈನಂದಿನ ಕೋಡಿಂಗ್ ರಿಧಮ್ಗಳು** (ಇದರಿಂದ ಹೊಂದಾಣಿಕೆ ಆಗುತ್ತದೆ!):
+
+   ಈಗಿನಿಂದ, ನೀವು ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಬದಲಾವಣೆ ಮಾಡಿದಾಗ, ನಿಮ್ಮ ಬಳಿ ಈ ಸರಳ ಮೂರು ಹಂತಗಳ ನೃತ್ಯ ಇದೆ:
+
+   ```bash
+   git add .
+   git commit -m "describe what you changed"
+   git push
+   ```
+
+   **ಇದು ನಿಮ್ಮ ಕೋಡಿಂಗ್ ಹೃದಯಸ್ಪಂದನವಾಗುತ್ತದೆ:**
+   - ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ಅದ್ಭುತ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಿ ✨
+   - `git add` ಜೊತೆ ಅವುಗಳನ್ನು ದರ್ಬಾಮಾಡಿ ("ಹೇ Git, ಈ ಬದಲಾವಣೆಗಳಿಗೆ ಗಮನ ಕೊಡು!")
+   - `git commit` ಮತ್ತು ವಿವರಣಾತ್ಮಕ ಸಂದೇಶದೊಂದಿಗೆ ಅದನ್ನು ಉಳಿಸಿ (ಭವಿಷ್ಯದ ನೀವು ಧನ್ಯವಾದ ಮಾಡುತ್ತೀರಿ!)
+   - `git push` ಬಳಸಿಕೊಂಡು ಅವುಗಳನ್ನು ವಿಶ್ವದೊಂದಿಗೆ ಹಂಚಿಕೊಳ್ಳಿ 🚀
+   - ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪುನರಾವರ್ತಿಸಿ – ಇದು ಉಸಿರಾಡುವಂತೆ ಸಹಜವಾಗುತ್ತದೆ!
+
+   ನಾನು ಈ ಕಾರ್್ಯವಿಧಾನವನ್ನು ಇಷ್ಟಪಡುವುದು ಹೊರತಾಗಿಯೇ ಇದು ವೀಡಿಯೋ ಆಟದಲ್ಲಿ ಅನೇಕ ಸೇಿವು ಹಂತಗಳಿರುವಂತೆ. ನೀವು ಪ್ರ يحب ಮಾಡಿರುವ ಬದಲಾವಣೆ ಮಾಡಿದ್ದೀರಾ? ಅದನ್ನು ಕಾಮಿಟ್ ಮಾಡಿ! ನೀವು ಯಾವದಾದರೂ ಅಪಾಯಕರವಾದುದನ್ನು ಪ್ರಯತ್ನಿಸಲು ಬಯಸುತ್ತೀರಾ? ಸಮಸ್ಯೆಯಾದರೆ – ನೀವು ಯಾವಾಗಲೂ ನಿಮ್ಮ ಕೊನೆಯ ಕಾಮಿಟ್‌ಗೆ ಹಿಂತಿರುಗಬಹುದು!
+
+   > 💡 **ಟಿಪ್**: ನೀವು `.gitignore` ಫೈಲ್ ಅನ್ನು ಬಳಸಲು ಬಯಸಬಹುದು, ಇದರಿಂದ ನೀವು ಟ್ರ್ಯಾಕ್ ಮಾಡಬೇಕಾಗದ ಫೈಲ್‌ಗಳು GitHub ನಲ್ಲಿ ತೋರಿಸುವುದನ್ನು ತಡೆಗಟ್ಟಬಹುದು – ಉದಾ. ನಿಮ್ಮ ಟಿಪ್ಪಣಿಗಳ ಫೈಲ್ ಅನ್ನು ನೀವು ಅದೇ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಇಡುತ್ತೀರಿ ಆದರೆ ಅದು ಸಾರ್ವಜನಿಕ ರೆಪೊಸಿಟರಿಯಲ್ಲಿ ಇರಬೇಕಿಲ್ಲ. ನೀವು `.gitignore` ಟೆಂಪ್ಲೇಟುಗಳನ್ನು [.gitignore templates](https://github.com/github/gitignore) ನಲ್ಲಿ ಕಂಡುಹಿಡಿಯಬಹುದು ಅಥವಾ [gitignore.io](https://www.toptal.com/developers/gitignore) ಬಳಸಿ ಒಂದು ಫೈಲ್ ರಚಿಸಬಹುದು.
+
+### 🧠 **ಪ್ರಥಮ ರೆಪೊಸಿಟರಿ ಚೆಕ್-ಇನ್: ಇದು ಹೇಗಿತ್ತು?**
+
+**ಒಂದು ಕ್ಷಣವಿಟ್ಟು ಸಂಭ್ರಮಿಸಿ ಮತ್ತು ಚಿಂತಿಸಿ:**
+- ನಿಮ್ಮ ಕೋಡ್ GitHub ನಲ್ಲಿ ಮೊದಲ ಬಾರಿಗೆ ಕಾಣಿಸಿದುದು ಹೇಗೆ ಭಾಸವಾಯಿತು?
+- ಯಾವ ಹಂತವು ಹೆಚ್ಚು ಗೊಂದಲ ಉಂಟುಮಾಡಿತು, ಯಾವುದು ಯಶಸ್ವಿಯಾಗಿ ಸುಲಭವಾಗಿದೆ?
+- ನೀವು ನಿಮ್ಮದೇ ಪದերով `git add`, `git commit`, ಮತ್ತು `git push` ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ವಿವರಿಸಬಹುದೇ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> LocalFiles: ಯೋಜನೆ ರಚಿಸಿ
+    LocalFiles --> Staged: git add .
+    Staged --> Committed: git commit
+    Committed --> GitHub: git push
+    GitHub --> [*]: ಯಶಸ್ವಿ! 🎉
+    
+    note right of Staged
+        ಉಳಿಸಲು ಸಿದ್ಧವಾದ ಫೈಲುಗಳು
+    end note
+    
+    note right of Committed
+        ಸ್ನಾಪ್‌ಶಾಟ್ ರಚನೆಯನ್ನು ಮಾಡಲಾಗಿದೆ
+    end note
+```
+> **ಸ್ಮರಣೆ**: ಅನುಭವಸಂಪನ್ನ ಶಿಕ್ಷಕರು ಕೂಡ ಕೆಲವೊಮ್ಮೆ ಸರಿಯಾದ ಕಮಾಂಡ್‌ಗಳನ್ನು ಮರೆಯಬಹುದು. ಈ ಕಾರ್ಯವಿಧಾನ ನಿಮ್ಮ ಶಕ್ತಿಯಲಿ ನೆಲೆಯಲ್ಲಿ ರೂಪಿಕೊಳ್ಳಲು ಪ್ರಯತ್ನ ಬೇಕು - ನೀವು ಅದ್ಭುತವಾಗಿ ಮಾಡುತ್ತಿದ್ದೀರಿ!
+
+#### ಆಧುನಿಕ Git ಕಾರ್ಯವಿಧಾನಗಳು
+
+ಈ ಆಧುನಿಕ ಪದ್ಧತಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಂಡು ಪರಿಶೀಲಿಸಿ:
+
+- **ಸಾಂಪ್ರದಾಯಿಕ ಕಾಮಿಟ್‌ಗಳು**: `feat:`, `fix:`, `docs:` ಮುಂತಾದ ಕ್ರಮಬದ್ಧ ಕಾಮಿಟ್ ಸಂದೇಶ ಸ್ವರೂಪವನ್ನು ಬಳಸಿ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ [conventionalcommits.org](https://www.conventionalcommits.org/) ನೋಡಿ
+- **ಸಣ್ಣ atomic commit‌ಗಳು**: ಪ್ರತಿ ಕಾಮಿಟ್ ಒಂದೇ ತರ್ಕಸಂಗತ ಬದಲಾವಣೆ ಸೂಚಿಸುವಂತೆ ಮಾಡಿ
+- **ನಿಯತ ಕಾಮಿಟ್‌ಗಳು**: ದೊಡ್ಡದು ಮತ್ತು ಅಪೂರ್ವ ಕಾಮಿಟ್‌ಗಳ ಬದಲು, ಹೆಚ್ಚುವರಿ ಮತ್ತು ವಿವರಣೆ ಕೂಡಿರುವ ಕಾಮಿಟ್‌ಗಳನ್ನು ಮಾಡಿ
+
+#### ಕಾಮಿಟ್ ಸಂದೇಶಗಳು
+
+ಒಂದು ಉತ್ತಮ Git ಕಾಮಿಟ್ ವಿಷಯ ಸಾದರಪಡಿಸುವುದು ಈ ವಾಕ್ಯವನ್ನು ಪೂರೈಸುತ್ತದೆ:  
+ಅನ್ವಯಿಸುವುದಾದರೆ, ಈ ಕಾಮಿಟ್ <ನಿಮ್ಮ ವಿಷಯ ವಾಕ್ಯದಲ್ಲಿ> ಅನ್ನು ಮಾಡುತ್ತದೆ
+
+ವಿಷಯಕ್ಕೆ ಕ್ರಿಯಾತ್ಮಕ, ವർത്തಮಾನ ಕಾಲ ಬಳಸಿರಿ: "change" "changed" ಅಥವಾ "changes" ಅಲ್ಲ.  
+ವಿಷಯದಂತೆ, ಶರೀರದಲ್ಲಿ (ಐಚ್ಛಿಕ) ಕೂಡ ಕ್ರಿಯಾತ್ಮಕ, ವೃತ್ತಮಾನ ಕಾಲದಲ್ಲಿ ಬರೆಯಿರಿ. ಶರೀರದಲ್ಲಿ ಬದಲಾವಣೆಗೆ ಪ್ರೇರಣೆ ನೀಡಿದ ಕಾರಣ ಮತ್ತು ಹಿಂದಿನ ವರ್ತನೆಗೆ ಸಂಬಂಧಿಸಿದ ವಿವರಣೆಯನ್ನು ಅನೂತನವಾಗಿ ತಿಳಿಸಿ. ನೀವು `ಏಕೆ` ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತಿದ್ದೀರಿ, `ಹೇಗೆ` ಅಲ್ಲ.
+
+✅ GitHub ನಲ್ಲಿ ಸುಂದರವಾದ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಕಾಮಿಟ್ ಸಂದೇಶವನ್ನು ಹುಡುಕಿ. ಗೋಷ್ಠಿ ಅಥವಾ ಅತಿ ಕಡಿಮೆ ಮಾಹಿತಿಯ ಜೊತೆಗೆ ಯಾವುದಾದರೂ ಒಳ್ಳೆಯ ಉದಾಹರಣೆ ಕಂಡುಕೊಳ್ಳಬಹುದು. ನಿಮ್ಮ ಅಭಿಪ್ರಾಯದಲ್ಲಿ, ಯಾವ ಮಾಹಿತಿಯು ಕಾಮಿಟ್ ಸಂದೇಶದಲ್ಲಿ ಅತ್ಯಂತ ಮಹತ್ವದ ಮತ್ತು ಉಪಯುಕ್ತ?
+
+## ಇತರರ ಜೊತೆಗೆ ಕೆಲಸ ಮಾಡುವುದು (ಆನಂದದ ಭಾಗ!)
+
+ನಿಮ್ಮ ಟೋಪಿ ಹಿಡಿಯಿರಿ ಏಕೆಂದರೆ ಇಲ್ಲಿ GitHub ಸಂಪೂರ್ಣ ಜಾದುವಿನಂತಾಗುತ್ತದೆ! 🪄 ನೀವು ನಿಮ್ಮದೇ ಕೋಡ್ ನಿರ್ವಹಣೆಯಲ್ಲಿಗೆ ನಿಯಂತ್ರಣ ಪಡೆದಿದ್ದೀರಿ, ಆದರೆ ಈಗ ನಾವು ನನ್ನ ಅತಿದೊಡ್ಡ ಇಷ್ಟಪಡುವ ಹಂತಕ್ಕೆ ಬರುತ್ತಿದ್ದೇವೆ – ವಿಶ್ವದಾದ್ಯಾಂತ ಅದ್ಭುತ ಜನರೊಂದಿಗೆ ಸಹಕಾರ ಮಾಡುವುದು.
+
+ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ: ನೀವು ನಾಳೆ ಎಚ್ಚರಿದಾಗ, ಟೊಕ್ಯೋದಲ್ಲಿರುವ ಯಾರು ನಿಮ್ಮ ಕೋಡ್ ಬದಲಾವಣೆ ಮಾಡಿಕೊಂಡಿದ್ದಾರೆ. ಬಳಿಕ ಬರ್ಲಿನ್‌ನ ಒಬ್ಬರು ನಿಮ್ಮಾಳಿ ಶೀಘ್ರಾಯಿಸಿದ ದೋಷವನ್ನು ಸರಿಪಡಿಸಿದ್ದಾರೆ. ಮಧ್ಯಾಹ್ನಕ್ಕೆ, ಸ್ಯಾಂಪಾವ್ಲೋನ ಒಂದು ಡೆವಲಪರ್ ನೀವು ಎಂದಿಗೂ ಯೋಚಿಸದ ಒಂದು ವೈಶಿಷ್ಟ್ಯವನ್ನು ಸೇರಿಸಿದ್ದಾನೆ. ಅದು ವೈಜ್ಞಾನಿಕ ಕಲ್ಪನೆ ಅಲ್ಲ – GitHub ಯುನಿವರ್ಸ್ ನಲ್ಲಿ ಮಂಗಳವಾರದ ಒಂದು ಸಾಮಾನ್ಯ ಘಟನೆ!
+
+ನನಗೆ ಸಾರ್ಥಕವಾಗಿರುವುದೆಂದರೆ, ನೀವು ಕಲಿಯಲಿರುವ ಸಹಕಾರ ದಕ್ಷತೆಗಳು? ಗೂಗಲ್, ಮೈಕ್ರೋಸಾಫ್ಟ್ ಮತ್ತು ನಿಮಗೆ ಇಷ್ಟವಾದ ಸ್ಟಾರ್ಟ್ಅಪ್ ತಂಡಗಳು ಪ್ರತಿದಿನವೂ ಬಳಸುವ ನಿಖರ ಕಾರ್ಯವಿಧಾನಗಳೇ. ನೀವು ಕೇವಲ ಒಂದು ಶಾಖೆಯ ಉಪಕರಣ ಕಲಿಯುತ್ತಿರುವುದಿಲ್ಲ – ನೀವು ಸಂಪೂರ್ಣ ಸಾಫ್ಟ್‌ವೇರ್ ಲೋಕವನ್ನು ಒಟ್ಟಾಗಿ ಕೆಲಸ ಮಾಡಿಸುವ ಗುಪ್ತ ಭಾಷೆಯನ್ನು ಕಲಿಯುತ್ತಿದ್ದೀರಿ.
+
+ವಾಸ್ತವವಾಗಿ, ನೀವು ಮೊದಲ ಪುಲ್ ರಿಕ್ವಸ್ಟ್ ವಿನಲ್ಲಿ ಮೆರ್ಜ್ ಆಗುವ ಅನುಭವವನ್ನು ಅನುಭವಿಸಿದಾಗ, ಓಪನ್ ಸೊರ್ಸ್ ಬಗ್ಗೆ ಅಭಿವೃದ್ಧಿಪಡಕರು ಏಕೆ ನನ್ನ ಅಂತರ್ಜಾಲ ಪ್ರೀತಿ ತೋರಿಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ಅರಿತುಕೊಳ್ಳುತ್ತೀರಿ. ಇದು ವಿಶ್ವದ ಅತಿದೊಡ್ಡ, ಅತ್ಯುತ್ತಮ ಸೃಜನಶೀಲ ತಂಡ ಯೋಜನೆಯ ಭಾಗವಾಗಿರುವಂತೆ!
+
+> ವೀಡಿಯೋವನ್ನೊ ಅಳಿ
+>
+> [![Git ಮತ್ತು GitHub ಮೂಲಭೂತಗಳು ವೀಡಿಯೊ](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+GitHub ನಲ್ಲಿ ವಿಷಯಗಳನ್ನು ಇರಿಸುವ ಮುಖ್ಯ ಕಾರಣವೆಂದರೆ ಇತರ ವಿಕಸಕರೊಂದಿಗೆ ಸಹಕಾರ ಸಾಧ್ಯವಾಗಿಸುವುದು.
+
+```mermaid
+flowchart LR
+    A[🔍 ಯೋಜನೆಯನ್ನು ಹುಡುಕಿ] --> B[🍴 ಸಂಗ್ರಹಸ್ಥಳವನ್ನು ಫೋರ್ಕ್ ಮಾಡಿ]
+    B --> C[📥 ಸ್ಥಳೀಯಕ್ಕೆ ಕ್ಲೋನ್ ಮಾಡಿ]
+    C --> D[🌿 ಶಾಖೆ ರಚಿಸಿ]
+    D --> E[✏️ ಬದಲಾವಣೆ ಮಾಡಿ]
+    E --> F[💾 ಬದಲಾವಣೆಗಳನ್ನು ಕಮಿಟ್ ಮಾಡಿ]
+    F --> G[📤 ಶಾಖೆಯನ್ನು ಪುಶ್ ಮಾಡಿ]
+    G --> H[🔄 ಪುಲ್ ರಿಕ್ವೆಸ್ಟ್ ರಚಿಸಿ]
+    H --> I{ಜವಾಬ್ದಾರಿಯು ಪರಿಶೀಲನೆ}
+    I -->|✅ ಅನುಮೋದಿಸಲಾಗಿದೆ| J[🎉 ಮರ್ಜ್ ಮಾಡಿ!]
+    I -->|❓ ಬದಲಾವಣೆಗಳ ವಿನಂತಿ| K[📝 ಅಪ್‌ಡೇಟ್ ಮಾಡಿ]
+    K --> F
+    J --> L[🧹 ಶಾಖೆಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ]
+    
+    style A fill:#e3f2fd
+    style J fill:#e8f5e8
+    style L fill:#fff3e0
+```
+ನಿಮ್ಮ ರೆಪೊಸಿಟರಿಯಲ್ಲಿ, `Insights > Community` ಗೆ ಹೋಗಿ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಶಿಫಾರಸು ಮಾಡಿದ ಸಮುದಾಯ ಮಾನದಂಡಗಳೊಂದಿಗೆ ಹೋಲಿಕೆ ಹೇಗಿದೆ ಎಂದು ನೋಡಿ.
+
+ನಿಮ್ಮ ರೆಪೊಸಿಟರಿಯನ್ನು ವೃತ್ತಿಪರ ಮತ್ತು ಸ್ವಾಗತಾರ್ಹವಾಗಿ ಮಾಡಬೇಕೆ? ನಿಮ್ಮ ರೆಪೊಸಿಟರಿಯ `Insights > Community` ಗೆ ಹೋಗಿ ಕ್ಲಿಕ್ ಮಾಡಿ. ಈ ಸುಂದರ ವೈಶಿಷ್ಟ್ಯತೆ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ GitHub ಸಮುದಾಯ "ಸರಿಯಾದ ರೆಪೊಸಿಟರಿ ಅಭ್ಯಾಸ" ಗಳೊಂದಿಗೆ ಹೋಲಿಕೆ ಹೇಗಿದೆ ಎಂದು ತೋರಿಸುತ್ತದೆ.
+
+> 🎯 **ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಪ್ರಭಾವಶಾಲಿಯಾಗಿ ಮಾಡುವುದು**: ಒಳ್ಳೆಯ ವ್ಯವಸ್ಥಿತ ರೆಪೊಸಿಟರಿ ಮತ್ತು ಉತ್ತಮ ದಸ್ತಾವೇಜುಗಳು ಇರುವುದರಿಂದ ಅದು ಸ್ವಚ್ಛವಾದ, ಸ್ವಾಗತಾರ್ಹ ಅಂಗಡಿಗೃಹದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಜನರಿಗೆ ನೀವು ನಿಮ್ಮ ಕಾರ್ಯವನ್ನು ಯಥಾಸ್ಥಿತವಾಗಿ ನೋಡಿಕೊಳ್ಳುತ್ತೀರಾ ಅಂದುತಾಳುವಂತೆ ತೋರಿಸುತ್ತದೆ ಮತ್ತು ಇನ್ನಿತರರು ಸಹಾಯ ಮಾಡಲು ಇಚ್ಛೆ ಬರುತ್ತದೆ!
+
+**ರೆಪೊಸಿಟರಿಯನ್ನು ಅದ್ಭುತವಾಗಿಸುವುದು ಈ ಕೆಳಗಿನಂತಿದೆ:**
+
+| ಏನು ಸೇರಿಸಬೇಕು | ಇದು ಯಾಕೆ ಮುಖ್ಯ | ಇದು ನಿಮಗೆ ಏನು ಮಾಡುತ್ತದೆ |
+|----------------|----------------|------------------------|
+| **ವಿವರಣೆ** | ಮೊದಲ ಭಾವನೆ ಮೌಲ್ಯವಿರುವುದು! | ಜನರಿಗೆ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಏನು ಮಾಡುತ್ತದೆ ಅನ್ನು ತಕ್ಷಣ ತಿಳಿಸುತ್ತದೆ |
+| **README** | ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಮೊದಲು ಪೇಜ್ | ಹೊಸ ಭೇಟಿ ನೀಡುವವರಿಗೆ ಸ್ನೇಹಪూరಿತ ಪ್ರವಾಸದರ್ಶಕರು |
+| **ಸಹಾಯ ಸೂಚನೆಗಳು** | ನೀವು ಸಹಾಯ ಸ್ವಾಗತಿಸುವುದಾಗಿ ತೋರಿಸುತ್ತದೆ | ಜನರು ಹೇಗೆ ಸಹಾಯ ಮಾಡಬಹುದು ಎಂದು ತಿಳಿದುಕೊಳ್ಳುತ್ತಾರೆ |
+| **ನಡವಳಿಕೆ ನಿಯಮಾವಳಿ** | ಸ್ನೇಹಪೂರ್ಣ ಸ್ಥಳ ಸೃಷ್ಟಿಸುತ್ತದೆ | ಎಲ್ಲರೂ ಪಾಲ್ಗೊಳ್ಳಲು ಸ್ವಾಗತನೆ ಹೊಂದಿದ್ದಾರೆಂದು ಭಾಸ ಹೊಂದಿಸುತ್ತದೆ |
+| **ಕಡತ ಲೈಸೆನ್ಸ್** | ಕಾನೂನಿನ ಸ್ಪಷ್ಟತೆ | ಇತರರು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂದು ತಿಳಿದುಕೊಳ್ಳುತ್ತಾರೆ |
+| **ಭದ್ರತಾ ನೀತಿ** | ನೀವು ಹೊಣೆಗಾರರು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ | ವೃತ್ತಿಪರ ಅಭ್ಯಾಸಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ |
+
+> 💡 **ಪ್ರೊ ಟಿಪ್**: GitHub ಈ ಎಲ್ಲ ಫೈಲ್‌ಗಳಿಗಾಗಿ ಟೆಂಪ್ಲೇಟುಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಹೊಸ ರೆಪೊಸಿಟರಿ ಸೃಷ್ಟಿಸಿದಾಗ, ಈ ಫೈಲ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರಚಿಸಲು ಬಾಕ್ಸ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ.
+
+**ಆಧುನಿಕ GitHub ಫೀಚರ್ಸ್ ಅನ್ವೇಷಿಸಲು:**
+
+🤖 **ಸ್ವಯಂಚಾಲನೆ & CI/CD:**
+- ಪರೀಕ್ಷೆ ಮತ್ತು ಪ್ರಚರಣೆಗಾಗಿ **GitHub Actions**
+- ಸ್ವಯಂಚಾಲಿತ ಅವಲಂಬನೆ ನವೀಕರಣಗಳಿಗಾಗಿ **Dependabot**
+
+💬 **ಸಮುದಾಯ & ಯೋಜನಾ ನಿರ್ವಹಣೆ:**
+- ವಿಚಾರವಿಮರ್ಶೆಗಾಗಿ **GitHub Discussions**
+- ಕಾಂಬನ್ ಶೈಲಿಯ ಯೋಜನಾ ನಿರ್ವಹಣೆಗೆ **GitHub Projects**
+- ಕೋಡ್ ಗುಣಮಟ್ಟದ ನಿಯಮಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಲು **ಶಾಖಾ ರಕ್ಷಣೆ ನಿಯಮಗಳು**
+
+ಎಲ್ಲಾ ಅವುಗಳು ಹೊಸ ತಂಡದ ಸದಸ್ಯರ ಅನುಬಂಧಕ್ಕೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ. ಮತ್ತು ವಾಸ್ತವವಾಗಿ, ಹೊಸ ಸಹಯೋಗಿಗಳು ನಿಮ್ಮ ಕೋಡ್ ನೋಡುವ ಮೊದಲು ಪ್ರಾಜೆಕ್ಟ್ ಅವರ ಸಮಯವನ್ನು ಹೇಗೆ ಖರ್ಚು ಮಾಡಬೇಕೆಂದು ನಿರ್ಧರಿಸಲು ಇವುಗಳನ್ನು ಗಮನಿಸುತ್ತಾರೆ.
+
+✅ README ಫೈಲ್‌ಗಳು, ತಯಾರಿಸಲು ಸಮಯ ಬೇಕಾಗಿದ್ದರೂ ಸಹ, ಹೆಚ್ಚು ಕಾರ್ಯನಿರ್ವಹಿಸುವವರಿಂದ ತುಂಬಾ ಬಿಡಿಸಲಾಗುತ್ತದೆ. ನಿಮಗೆ ಬಹಳ ವಿವರಣಾತ್ಮಕ ಪದ್ಧತಿಯಿರುವುದಾದರೆ ಉದಾಹರಣೆಯನ್ನು ಕಂಡುಹಿಡಿಯಬಹುದು? ಗಮನಿಸಿ: ಉತ್ತಮ README ರಚಿಸಲು ಸಹಾಯ ಮಾಡುವ ಹಲವು [ಉಪಕರಣಗಳು](https://www.makeareadme.com/) ಇವೆ जिन्हें ನೀವು ಪ್ರಯತ್ನಿಸಬಹುದು.
+
+### ಕೆಲಸ: ಕೆಲವು ಕೋಡ್ ಒಕ್ಕೂಟ ಮಾಡಿ
+
+ಸಹಾಯ ಸೂಚನೆಗಳು ಜನರು ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಕೊಡುಗೆ ನೀಡಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ. ನೀವು ಯಾವ ರೀತಿಯ ಕೊಡುಗೆಗಳನ್ನು ಹುಡುಕುತ್ತಿರುವಿರಿ ಮತ್ತು ಪ್ರಕ್ರಿಯೆ ಹೇಗೆ ನಡೆಯುತ್ತದೆ ಎಂದು ವಿವರಿಸುತ್ತವೆ. ಕೊಡುಗುದಾರರು GitHub ನಲ್ಲಿ ನಿಮ್ಮ ರೆಪೊದಲ್ಲಿ ಕೊಡುಗೆ ನೀಡಲು ಹೀಗೆ ಕ್ರಮಗಳನ್ನು ಅನುಸರಿಸಬೇಕಾಗುತ್ತದೆ:
+
+1. **ರೆಪೊ ಫೋರ್ಕ್ ಮಾಡು** ನೀವು ಜನರನ್ನು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಫೋರ್ಕ್ ಮಾಡಲು ಬಯಸಬಹುದು. ಫೋರ್ಕ್ ಮಾಡುವುದು ಎಂದರೆ ಅದನ್ನು ಅವರ GitHub ಪ್ರೊಫೈಲಿನ ಮೇಲೆ ಪ್ರತಿಲಿಪಿ ಮಾಡುವುದು.
+1. **ಕ್ಲೋನ್ ಮಾಡಿ**. ಅಲ್ಲಿ ಅವರು ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ತಮ್ಮ ಸ್ಥಳೀಯ ಯಂತ್ರಕ್ಕೆ ಕ್ಲೋನ್ ಮಾಡುತ್ತಾರೆ.
+1. **ಶಾಖೆ ರಚಿಸಿ**. ನೀವು ಅದಕ್ಕಾಗಿ ಅವರಿಗೆ ತಮ್ಮ ಕೆಲಸಕ್ಕೆ ಶಾಖೆ ರಚಿಸಲು ಕೇಳುವಿರಿ.
+1. **ಒಂದು ಕ್ಷೇತ್ರಕ್ಕೆ ಗಮನಹರಿಸಿ**. ಕೊಡುಗುದಾರರಿಗೆ ಅವರ ಕೊಡುಗೆಗಳನ್ನು ಒಂದೇ ಬಾರಿ ಒಂದೇ ವಿಷಯಕ್ಕೆ ಕೇಂದ್ರೀಕರಿಸುವಂತೆ ತಿಳಿಸಿ – ಆಗ ಅವರ ಕಾರ್ಯವನ್ನು ನೀವು ಒಕ್ಕೂಟ ಮಾಡಲು ಸಾಧ್ಯತೆ ಹೆಚ್ಚಾಗುತ್ತದೆ. ಅವರು ದೋಷ ಸರಿಪಡಿಸಿ, ಹೊಸ ವೈಶಿಷ್ಟ್ಯ ಸೇರಿಸಿ ಮತ್ತು ಹಲವು ಪರೀಕ್ಷೆಗಳನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತಿರುವಾಗ, ನೀವು 3 ನಲ್ಲಿ 2 ಯಾ 1 ಬದಲಾವಣೆಗಳನ್ನು ಮಾತ್ರ ಅಳವಡಿಸಲು ಬಯಸಿದರೆ ಹೇಗಾಗುತ್ತದೆ?
+
+✅ ಶಾಖೆಗಳು ಉತ್ತಮ ಕೋಡ್ ಬರೆಯುವ ಮತ್ತು ಬಿಡುಗಡೆ ಮಾಡುವಲ್ಲಿ ಮಹತ್ವ ತುಂಬಿದ ಸಂದರ್ಭಗಳಾಗಿರುವ ಪರಿಸ್ಥಿತಿಯನ್ನು ಕಲ್ಪಿಸಿ. ನೀವು ಯಾವ ಉಪಯೋಗದ ಪ್ರಕರಣಗಳನ್ನು ಕಲ್ಪಿಸಬಹುದು?
+
+> ಗಮನಿಸಿ: ನೀವು ಜಗತ್ತಿನಲ್ಲಿ ಕಂಡು ಬಯಸುವ ಬದಲಾವಣೆ ಆಗಿ, ನಿಮ್ಮದೇ ಕೆಲಸಕ್ಕಾಗಿ ಸಹ ಶಾಖೆಗಳನ್ನು ರಚಿಸಿ. ನೀವು ಮಾಡಿದ ಯಾವುದೇ ಕಾಮಿಟ್ ಕೂಡ ನೀವು ಪ್ರಸ್ತುತ "ಚೆಕ್ ಔಟ್" ಮಾಡಿರುವ ಶಾಖೆಯಲ್ಲಿಯೇ ಆಗಿರುತ್ತದೆ. ಆ ಶಾಖೆ ಯಾವುದು ಎಂದು ನೋಡಲು `git status` ಬಳಸಿ.
+
+ಹೇಗೆ ಸಹಾಯಕರ ಕಾರ್ಯವಿಧಾನವನ್ನು ನಡೆದಾಡೋಣ. ಕೊಡುಗುದಾರರು ಈಗಾಗಲೇ ಫೋರ್ಕ್ ಮತ್ತು ಕ್ಲೋನ್ ಮಾಡಿದ್ದಾರೆ ಎಂದು ಊಹಿಸಿ, ಆದ್ದರಿಂದ ಅವರ ಸ್ಥಳೀಯ ಯಂತ್ರದಲ್ಲಿ Git ರೆಪೊ ಕೆಲಸಕ್ಕೆ ಸಿದ್ಧವಾಗಿದೆ:
+
+1. **ಶಾಖೆ ರಚಿಸಿ**. ಅವರು ಕೊಡುಗೆಯನ್ನು ನೀಡಲು ಉದ್ದೇಶಿಸಿರುವ ಬದಲಾವಣೆಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಶಾಖೆಯನ್ನು ರಚಿಸಲು `git branch` ಕಮಾಂಡ್ ಬಳಸಿರಿ:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+   > 💡 **ಆಧುನಿಕ ವಿಧಾನ**: ನೀವು ಒಂದೇ ಕಮಾಂಡ್‌ನಲ್ಲಿ ಹೊಸ ಶಾಖೆ ರಚಿಸಿ ಅದಕ್ಕೆ ತಿರುಗಿಸಬಹುದು:
+   ```bash
+   git switch -c [branch-name]
+   ```
+
+1. **ಕೆಲಸ ಮಾಡುತ್ತಿರುವ ಶಾಖೆಗೆ ಬದಲಾಯಿಸಿ**. ಸೂಚಿತ ಶಾಖೆಗೆ ಬದಲಾಯಿಸಿ ಮತ್ತು ಕಾರ್ಯ ನಿರ್ದೇಶನವನ್ನು `git switch` ಜೊತೆ ನವೀಕರಿಸಿ:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+   > 💡 **ಆಧುನಿಕ ಟಿಪ್**: ಶಾಖೆ ಬದಲಾಯಿಸುವಾಗ `git switch` ಹೆಸರೇನು `git checkout`ಗೆ ವಿನ್ಯಾಸಾಂತರ. ಇದು ಶುರುವಾಗುವವರಿಗೆ ಸ್ಪಷ್ಟ ಮತ್ತು ಸುರಕ್ಷಿತ.
+
+1. **ಕೆಲಸ ಮಾಡಿ**. ಈಗ ನೀವು ಬದಲಾವಣೆಗಳನ್ನು ಸೇರಿಸಲು ಬಯಸುತ್ತೀರಿ. Git ಗೆ ತಿಳಿಸಲು ಕೆಳಗಿನ ಕಮಾಂಡ್‌ಗಳನ್ನು ಮರೆತರೆ ಬೇಡ:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   > ⚠️ **ಕಾಮಿಟ್ ಸಂದೇಶ ಗುಣಮಟ್ಟ**: ನಿಮ್ಮ ಮುಂದೂಡುತ್ತಿರುವ ಶಾಖೆಯಲ್ಲಿನ ಕೆಲಸವನ್ನು ಸಹಾಯ ಮಾಡುತ್ತಿರುವ ರಿಪೋ ನಿರ್ವಹಣಾಧಿಕಾರಿಗೆ ವಿಶ್ಲೇಷಣಾತ್ಮಕ ಮೇಲುನಿಯಮವಿರುವ ಹೆಸರನ್ನು ತಿಳಿಸಿ. ನೀವು ಬದಲಾಯಿಸಿದುದನ್ನು ಸ್ಪಷ್ಟಪಡಿಸಿ!
+
+1. **ನಿಮ್ಮ ಕೆಲಸವನ್ನು `main` ಶಾಖೆಯೊಂದಿಗೆ ಒಗ್ಗೂಡಿಸಿ**. ನೀವು ಕೆಲಸ ಮುಗಿಸಿಕೊಂಡ ಮೇಲೆ, ನಿಮ್ಮ ಕೆಲಸವನ್ನು `main` ಶಾಖೆಯೊಂದಿಗೆ ಒಗ್ಗೂಡಿಸಲು ಬಯಸುತ್ತೀರಿ. `main` ಶಾಖೆ ಮಧ್ಯಂತರದಲ್ಲಿ ಬದಲಾಗಿದೆ ಇರಬಹುದು, ಆದ್ದರಿಂದ ಮೊದಲು ಅದನ್ನು ಈ ಕೆಳಗಿನ ಕಮಾಂಡ್‌ಗಳೊಂದಿಗೆ ಇತ್ತೀಚಿನದಾಗಿ ನವೀಕರಿಸಿ:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   ಈಗಿನಲ್ಲಿಯೇ ಯಾವುದೇ ಗೊಂದಲಗಳು, Git ಅನ್ನು ಶಾಖೆಯಲ್ಲಿಯೇ ಸಮ್ಮಿಶ್ರಣ ಮಾಡಲು ಕಷ್ಟಪಡಿಸುವುದನ್ನು ನೋಡಲು ಈ ಕೆಳಗಿನ ಕಮಾಂಡ್‌ಗಳನ್ನು ಚಾಲನೆ ಮಾಡಿ:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   `git merge main` ಕಮಾಂಡ್ `main` ಶಾಖೆಯಿಂದ ಎಲ್ಲಾ ಬದಲಾವಣೆಗಳನ್ನು ನಿಮ್ಮ ಶಾಖೆಗೆ ತರಲಿದೆ. ಆಶಾ ಇದೆ ನೀವು ಮುಂದುವರಿಯಬಹುದು. ಇಲ್ಲದಿದ್ದರೆ, VS Code Git ಗೊಂದಲವನ್ನು ಸೂಚಿಸುತ್ತದೆ ಮತ್ತು ನೀವು ಪ್ರಭಾವಿತ ಕಡತಗಳನ್ನು ಸ್ವಲ್ಪ ಬದಲಾಯಿಸಿ ಯಾವ ವಿಷಯ ಹೆಚ್ಚು ಸರಿಯೆಂದು ತಿಳಿಸಬಹುದು.
+
+   💡 **ಆಧುನಿಕ ಪರ್ಯಾಯ**: ಕ್ಲೀನಾಗಿ ಇತಿಹಾಸವನ್ನು ಇಡುವುದಕ್ಕೆ `git rebase` ಪರಿಗಣಿಸಿ:
+   ```bash
+   git rebase main
+   ```
+   ಇದು ನಿಮ್ಮ ಕಾಮಿಟ್‌ಗಳನ್ನು ಇತ್ತೀಚಿನ `main` ಶಾಖೆಯ ಮೇಲಿದೆ ಪುನಃವೀಕ್ಷಣೆಯಿಂದ ಇತಿಹಾಸ ಸರಳಗೊಳಿಸುತ್ತದೆ.
+
+1. **ನಿಮ್ಮ ಕೆಲಸ GitHub ಗೆ ಕಳುಹಿಸಿ**. GitHub ಗೆ ನಿಮ್ಮ ಕೆಲಸ ಕಳುಹಿಸುವುದು ಎರಡು ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ನೀವು ನಿಮ್ಮ ಶಾಖೆಯನ್ನು ನಿಮ್ಮ ರೆಪೋಗೆ ಪುಶ್ ಮಾಡಬೇಕು ಮತ್ತು ನಂತರ PR, Pull Request ತೆರೆಯಬೇಕು.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   ಮೇಲಿನ ಕಮಾಂಡ್ ನಿಮ್ಮ ಫೋರ್ಕ್ ಮಾಡಿದ ರೆಪೋದಲ್ಲಿ ಶಾಖೆಯನ್ನು ರಚಿಸುತ್ತದೆ.
+
+### 🤝 **ಸಹಕಾರದ ದಕ್ಷತೆಗಳ ಮೌಲ್ಯಾಂಕನ: ಇತರರೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಸಿದ್ಧರಾಗಿದ್ದೀರಾ?**
+
+**ನಿಮ್ಮ ಸಹಕಾರದ ಭಾವನೆಗಳನ್ನು ನೋಡಿ:**
+- ಫೋರ್ಕಿಂಗ್ ಮತ್ತು ಪುಲ್ ರಿಕ್ವೆಸ್ಟ್ ಗಳ ಕಲ್ಪನೆ ನಿಮಗೆ ಸ್ಪಷ್ಟವಾಯಿತೆ?
+- ಶಾಖೆಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದರಲ್ಲಿ ನೀವು ಇನ್ನಷ್ಟು ಅಭ್ಯಾಸ ಮಾಡಬೇಕಾದ ಒಂದು ವಿಷಯವೇನಿದೆ?
+- ಮತ್ತೊಬ್ಬರ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಕೊಡುಗೆ ನೀಡಲು ನೀವು ಎಷ್ಟು ಸೌಲಭ್ಯಭರಿತರಾಗಿದ್ದೀರಾ?
+
+```mermaid
+mindmap
+  root((Git Collaboration))
+    Branching
+      ವೈಶಿಷ್ಟ್ಯ ಶಾಖೆಗಳು
+      ದೋಷ ಸರಿಪಡಿಸುವ ಶಾಖೆಗಳು
+      ಪ್ರಯೋಗಾತ್ಮಕ ಕಾರ್ಯ
+    Pull Requests
+      ಕೋಡ್ ಪರಿಶೀಲನೆ
+      ಚರ್ಚೆ
+      ಪರೀಕ್ಷೆ
+    Best Practices
+      ಸ್ಪಷ್ಟ ಕಾಮಿಟ್ ಸಂದೇಶಗಳು
+      ಸಣ್ಣ ಕೇಂದ್ರೀಕೃತ ಬದಲಾವಣೆಗಳು
+      ಉತ್ತಮ ಡಾಕ್ಯುಮೆಂಟೇಶನ್
+```
+> **ಆತ್ಮವಿಶ್ವಾಸ ಹೆಚ್ಚಿಸುವದು**: ನೀವು ಮೆಚ್ಚುತ್ತಿರುವ ಪ್ರತಿ ಅಭಿವೃದ್ಧಿದಾರರೂ ಮೊದಲು ತಮ್ಮ ಮೊದಲ ಪುಲ್ ರಿಕ್ವೆಸ್ಟ್‌ಗಾಗಿ ಉದ್ವಿಗ್ನರಾಗಿದ್ದರು. GitHub ಸಮುದಾಯ ಹೊಸವರಿಗೆ ತುಂಬಾ ಆತ್ಮೀಯವಾಗಿದೆ!
+
+1. **PR ತೆರೆಯಿರಿ**. ನಂತರ, ನೀವು PR ತೆರೆಯಬೇಕಾಗುತ್ತದೆ. ನೀವು GitHub ನ ಫೋರ್ಕ್ ಮಾಡಿದ ರೆಪೊಗೆ ನೇರವಾಗಿ ಹೋಗಿ. GitHub ನಲ್ಲಿ ನೀವು ಹೊಸ PR ರಚಿಸಲು കുറഞ്ഞಿಕೆ ನೋಡಿ, ಅದನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ, ಸಂದೇಶ ಶೀರ್ಷಿಕೆ ಬದಲಾಯಿಸಿ, ಸೂಕ್ತ ವಿವರಣೆ ನೀಡಿ. ಈಗ ನೀವು ಫೋರ್ಕ್ ಮಾಡಲಾದ ರೆಪೊಟಿಲ ನಿರ್ವಹಣೆಗಾರನು ಈ PR ನೋಡುತ್ತಾರೆ ಮತ್ತು ಅದು ಬೆಂಬಲಿಸಿ ಅದನ್ನು ಮರ್ಚ್ ಮಾಡಬಹುದು. ನೀವು ಈಗ ಕೊಡುಗುದಾರರಾಗಿದ್ದೀರಿ, ಹೂರೇ :)
+
+   💡 **ಆಧುನಿಕ ಟಿಪ್**: GitHub CLI ಬಳಸಿ PR ಗಳನ್ನು ಸಹ ರಚಿಸಬಹುದು:
+   ```bash
+   gh pr create --title "Your PR title" --body "Description of changes"
+   ```
+
+   🔧 **PR ಗಳ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು:**
+   - "Fixes #123" ಮುಂತಾದ ಕೀವರ್ಡ್ಗಳ ಮೂಲಕ ಸಂಬಂಧಿತ ಸಮಸ್ಯೆಗಳಿಗೆ ಲಿಂಕ್ ಮಾಡಿ
+   - UI ಬದಲಾವಣೆಗಳಿಗೆ ಸ್ಕ್ರೀನಷಾಟ್ ಸೇರಿಸಿ
+   - ನಿರ್ದಿಷ್ಟ ವಿಮರ್ಶಕರನ್ನು ಕೇಳಿ
+   - ಕಾರ್ಯಪ್ರಗತಿಯಲ್ಲಿ ಇರುವ ಕೆಲಸಕ್ಕಾಗಿ ಡ್ರಾಫ್ಟ್ PR ಗಳನ್ನು ಬಳಸಿ
+   - ವಿಮರ್ಶೆ ಕೋರಿ ಮೀರಿಸುವ ಮೊದಲು ಎಲ್ಲಾ CI ಪರೀಕ್ಷೆಗಳು ಪಾಸಾಗುವಂತೆ ಖಚಿತಪಡಿಸಿ
+1. **ಶುದ್ಧಿಮಾಡುವುದು**. ನೀವು ಯಶಸ್ವಿಯಾಗಿ PR ಅನ್ನು ಮರ್ಜ್ ಮಾಡಿದ ನಂತರ _ಶುದ್ಧಿಮಾಡುವುದು_ ಉತ್ತಮ ಅಭ್ಯಾಸವೆಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ನೀವು ನಿಮ್ಮ ಲೋಕಲ್ ಬ್ರಾಂಚ್ ಮತ್ತು GitHub ಗೆ ಪುಷ್ ಮಾಡಿದ ಬ್ರಾಂಚ್ ಎರಡನ್ನೂ ಶುದ್ಧಿಮಾಡಲು ಬಯಸುತ್ತೀರಿ. ಮೊದಲು ಈ ಕೆಳಗಿನ ಕಮಾಂಡ್ ಬಳಸಿ ಲೋಕಲ್ ನಲ್ಲಿ ಅದನ್ನು ಅಳಿಸಿ: 
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+
+   ತಕ್ಷಣ forked repo ಗಾಗಿ GitHub ಪುಟಕ್ಕೆ ತೆರಳಿ ನಿಮಗೆ ಇತ್ತೀಚೆಗೆ ಪುಷ್ ಮಾಡಿದ ರಿಮೋಟ್ ಬ್ರಾಂಚ್ ಅನ್ನು ಅಳಿಸಿ.
+
+`ಪೂಲ್ ರಿಕ್ವೆಸ್ಟ್` ಎಂಬುದು ತೋರುತ್ತದೆ ಅಷ್ಟು ಸರಳ ಪದವಲ್ಲ, ಏಕೆಂದರೆ ನಿಜವಾಗಿಯೂ ನೀವು ನಿಮ್ಮ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರಾಜೆಕ್ಟಿಗೆ ಪುಷ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಆದರೆ ನಿರ್ವಹಣೆಗಾರರು (ಪ್ರಾಜೆಕ್ಟ್ ಮಾಲೀಕರು) ಅಥವಾ ಕೋರ್ ತಂಡವು ನಿಮ್ಮ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರಾಜೆಕ್ಟಿನ "ಮೇನ್" ಬ್ರಾಂಚಿಗೆ ಮರ್ಜ್ ಮಾಡುವ ಮೊದಲು ಪರಿಗಣಿಸಬೇಕಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವು ನಿಜವಾಗಿಯೂ ನಿರ್ವಹಣೆಗಾರರಿಂದ ಬದಲಾವಣೆ ನಿರ್ಧಾರವನ್ನು ಕೇಳುತ್ತಿದ್ದೀರಿ. 
+
+ಒಂದು ಪೂಲ್ ರಿಕ್ವೆಸ್ಟ್ ಎಂದರೆ ಬ್ರಾಂಚ್‌ನಲ್ಲಿ ಪರಿಚಯಿಸಲಾದ ಭೇದಗಳನ್ನು ವಿಮರ್ಶೆಗಳು, ಕಾಮೆಂಟ್‌ಗಳು, ಸಂಯೋಜಿತ ಪರೀಕ್ಷೆಗಳು ಮತ್ತು ಇನ್ನಷ್ಟು ಮೂಲಕ ಹೋಲಿಸಿ ಚರ್ಚಿಸಲು ವೇದಿಕೆಯಾಗಿದೆ. ಒಂದು ಉತ್ತಮ ಪೂಲ್ ರಿಕ್ವೆಸ್ಟ್ ಸುಮಾರು ಅದೇ ನಿಯಮಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಯಾವುವು ಕಮಿಟ್ ಸಂದೇಶಕ್ಕೆ ಅನುರೂಪವಾಗಿವೆ. ಉದಾಹರಣೆಗೆ ನೀವು ನಿಮ್ಮ ಕೆಲಸದ ಮೂಲಕ ಯಾವುದೇ ಸಮಸ್ಯೆಯನ್ನು ಸರಿಪಡಿಸಿದಾಗ, ಸಮಸ್ಯಾ ಟ್ರ್ಯಾಕರ್‌ನಲ್ಲಿ ಅದಕ್ಕೆ ಸಂರೆಫರನ್ಸ್ ಹಾಕಲು ನೀವು `#` ಚಿಹ್ನೆ ಮತ್ತು ನಿಮ್ಮ ಸಮಸ್ಯೆಯ ಸಂಖ್ಯೆಯನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ `#97`.
+
+🤞ಎಲ್ಲ ಪರೀಕ್ಷೆಗಳು ಪಾಸಾಗಲಿ ಮತ್ತು ಪ್ರಾಜೆಕ್ಟ್ ಮಾಲೀಕರು ನಿಮ್ಮ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರಾಜೆಕ್ಟಿಗೆ ಮರ್ಜ್ ಮಾಡಲಿ🤞
+
+GitHub ನ ತಕ್ಕಮಟ್ಟಿನ ರಿಮೋಟ್ ಬ್ರಾಂಚ್‌ನಿಂದ ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಲೋಕಲ್ ವರ್ಕಿಂಗ್ ಬ್ರಾಂಚ್ ಅನ್ನು ಎಲ್ಲಾ ಹೊಸ ಕಮಿಟ್‌ಗಳೊಂದಿಗೆ жаңಾಗಿಸಿ:
+
+`git pull`
+
+## ಓಪನ್ ಸೋರ್ಸ್‌ಗೆ ಕೊಡುಗೆ ನೀಡುವುದು (ನೀವು ಪ್ರಭಾವ ಬೀರಲು ಅವಕಾಶ!)
+
+ನೀವು ಬಗೆಹರಿಸುವುದಕ್ಕೆ ಸಿದ್ಧರಿದ್ದೀರಾ? 🤯 ಓಪನ್ ಸೋರ್ಸ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡುವ ಬಗ್ಗೆ ಮಾತಾಡೋಣ – ಮತ್ತು ಅದನ್ನು ನಾನು ನಿಮಗೆ ಹಂಚಿಕೊಳ್ಳಲು ಮಾತ್ರವಲ್ಲದೆ ಗೂಸುಬಂಪುಗಳನ್ನು ಅನುಭವಿಸುತ್ತಿದ್ದೇನೆ!
+
+ಇದು ನಿಮಗೆ ಐತಿಹಾಸಿಕ ಭಾಗವಾಗಲು ಅವಕಾಶ. ಪ್ರತಿದಿನವೂ ಲಕ್ಷಾಂತರ ಡೆವಲಪರ್‌ಗಳು ಬಳಸುವ ಟೂಲ್‌ಗಳನ್ನು ಸುಧಾರಿಸುವುದನ್ನು ಕಲ್ಪಿಸಿ, ಅಥವಾ ನಿಮ್ಮ ಸ್ನೇಹಿತರು ಇಷ್ಟಪಡುತ್ತಿರೋ ಆ್ಯಪ್‌ನಲ್ಲಿ ಬಗ್ಗನ್ನು ಸರಿಪಡಿಸುವುದನ್ನು. ಅದು ಕನಸು ಮಾತ್ರವಲ್ಲ – ಓಪನ್ ಸೋರ್ಸ್ ಕೊಡುಗೆದ ಬಗ್ಗೆ ಅದೇ!
+
+ನನಗೆ ಐತಿಹಾಸಿಕ ಭಾವನೆ ಬರುವುದೇನಂದರೆ: ನೀವು ಕಲಿತುಕೊಳ್ಳುತ್ತಿರುವ ಪ್ರತಿಯೊಂದು ಟೂಲ್ – ನಿಮ್ಮ ಕೋಡ್ ಎಡಿಟರ್, ನಾವು ಅಧ್ಯಯನ ಮಾಡುವ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು, ಇಲ್ಲಿಯೇ ಈ ಬ್ರೌಸರ್ ಸಹ – ಅವು ಎಲ್ಲವು ನಿಮ್ಮಂತಹ ಒಬ್ಬರು ತಮ್ಮ ಮೊದಲ ಕೊಡುಗೆಯನ್ನು ಮಾಡುತ್ತಲೇ ಪ್ರಾರಂಭವಾಯಿತು. ನಿಮ್ಮ ಒಳ್ಳೆಯವನಾಗಿ ಕಾಣಿಸುವ VS Code ವಿಸ್ತರಣೆತನ್ನು ರಚಿಸಿದ ಆ ಪ್ರತಿಭಾವಂತ ಉಪಯೋಗಕ್ಕಾಗಿ ಪ್ರಾರಂಭಿಕರಂತೆ "ಪೂಲ್ ರಿಕ್ವೆಸ್ಟ್ ರಚಿಸಿ" ಕ್ಲಿಕ್ ಮಾಡಿ ಕಣ್ಣಿನ ಮುಂದೆ ಕಿಚ್ಚು ಕೈಗಳೊಂದಿಗೆ ಮಾಡಿದ್ದರು.
+
+ಮತ್ತು ಇದಾಗಿದೆ ಅದ್ಭುತ ಭಾಗ: ಓಪನ್ ಸೋರ್ಸ್ ಸಮುದಾಯವು ಇಂಟರ್ನೆಟಿನ ದೊಡ್ಡ ಗುಂಪಿನ ಒಡಲಾಟದಂತೆ ಇದೆ. ತುಂಬಾ ಯೋಜನೆಗಳು ಪ್ರಾರಂಭಿಕರಿಗಾಗಿ “ಒಳ್ಳೆಯ ಮೊದಲ ಸಮಸ್ಯೆ” ಟ್ಯಾಗ್ ಹೊಂದಿದ್ದವು! ನಿರ್ವಹಣೆಗಾರರು ಹೊಸ ಕೊಡುಗೆದಾರರನ್ನು ನೋಡಿ ಸಂತೋಷಪಡುತ್ತಾರೆ, ಅವರು ತಮ್ಮ ಮೊದಲ ಹೆಜ್ಜೆಗಳನ್ನೇ ನೆನಪಿಗೆ ತರುತ್ತಾರೆ.
+
+```mermaid
+flowchart TD
+    A[🔍 GitHub ಅನ್ವೇಷಿಸಿ] --> B[🏷️ "ಒಳ್ಳೆಯ ಪ್ರಥಮ ಸಮಸ್ಯೆ" ಕಂಡುಹಿಡಿಯಿರಿ]
+    B --> C[📖 ಕೊಡುಗೆ ನೀಡುವ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಓದಿ]
+    C --> D[🍴 ರೆಪೊಸಿಟರಿ Fork ಮಾಡಿ]
+    D --> E[💻 ಸ್ಥಳೀಯ ಪರಿಸರವನ್ನು ಸೆಟ್ ಮಾಡಿ]
+    E --> F[🌿 ವೈಶಿಷ್ಟ್ಯ ಶಾಖೆ ರಚಿಸಿ]
+    F --> G[✨ ನಿಮ್ಮ ಕೊಡುಗೆ ಮಾಡಿ]
+    G --> H[🧪 ನಿಮ್ಮ ಬದಲಾವಣೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ]
+    H --> I[📝 ಸ್ಪಷ್ಟ ಕಮಿಟ್ ಬರೆಯಿರಿ]
+    I --> J[📤 ಪುಶ್ ಮಾಡಿ & PR ರಚಿಸಿ]
+    J --> K[💬 ಪ್ರತಿಕ್ರಿಯೆಗಾಗಿ ಭಾಗವಹಿಸಿ]
+    K --> L[🎉 ಮರ್ಜಿ ಆಗಿದೆ! ನೀವು ಕೊಡುಗು ನೀಡುವವರು!]
+    L --> M[🌟 ಮುಂದಿನ ಸಮಸ್ಯೆ ಕಂಡುಹಿಡಿಯಿರಿ]
+    
+    style A fill:#e1f5fe
+    style L fill:#c8e6c9
+    style M fill:#fff59d
+```
+ನೀವು ಇಲ್ಲಿ ಕೇವಲ ಕೋಡ್ ಕಲಿಯುತ್ತಿಲ್ಲ – ನೀವು ಪ್ರಪಂಚದ ಎಲ್ಲಾ ನಿರ್ಮಾಪಕರ ಕುಟುಂಬದೊಂದಿಗೆ ಸೇರಲು ಸಿದ್ಧರಾಗಿದ್ದೀರಿ, ಅವರು ಪ್ರತಿದಿನ "ಡಿಜಿಟಲ್ ಜಗತಿಯನ್ನು ಸ್ವಲ್ಪ ಹಿತಕರವಾಗಿಸಲು ಹೇಗೆ ಮಾಡಬಹುದು?" ಎಂದು ಯೋಚಿಸುತ್ತಾರೆ. ಕ್ಲಬ್ ಗೆ ಸ್ವಾಗತ! 🌟
+
+ಮೊದಲು GitHub ನಲ್ಲಿ ನಿಮ್ಮ ಆಸಕ್ತಿಗೆ ತಗುಲುವ ಒಂದು ರೆಪೊ (repo) ಹುಡುಕಿ, ಅದರಲ್ಲಿ ನೀವು ಬದಲಾವಣೆ ಮಾಡಬೇಕಾಗಿದೆ. ಅದರ ವಿಷಯವನ್ನು ನಿಮ್ಮ ಮೆಷಿನ್‌ಗೆ ನಕಲಿಸಿ.
+
+✅ 'ಬಗ್ಗೆ ಪರಿಚಯದ' ರೆಪೊಗಳನ್ನು ಕಂಡುಹಿಡಿಯಲು ಉತ್ತಮ ಮಾರ್ಗವಾಗಿದೆ [ ‘good-first-issue’ ಟ್ಯಾಗ್ ಮೂಲಕ ಹುಡುಕಿ](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![ನಿಮ್ಮ ಲೊಕಲ್ ಗೆ ರೆಪೊ ನಕಲಿಸಿ](../../../../translated_images/clone_repo.5085c48d666ead57.kn.png)
+
+ಕೋಡ್ ನಕಲಿಸುವ ಹಲವಾರು ವಿಧಾನಗಳಿವೆ. ಒಂದು ವಿಧಾನವೆಂದರೆ “ಕ್ಲೋನ್” ಮಾಡುವುದು, ಅದು https, SSH ಅಥವಾ GitHub CLI (ಕಮಾಂಡ್ ಲೈನ್ ಇಂಟರ್ಫೇಸ್) ಬಳಸಿ ರೆಪೊ ಸಹಿತದ ವಿಷಯವನ್ನು ನಕಲಿಸುವುದು.
+
+ನಿಮ್ಮ ಟರ್ಮಿನಲ್ ತೆರೆಯಿರಿ ಮತ್ತು ರೆಪೊ ನಕಲಿಸಿ:
+
+```bash
+# HTTPS ಬಳಕೆ
+git clone https://github.com/ProjectURL
+
+# SSH ಬಳಕೆ (SSH ಕೀ ಸೆಟ್ ಅಪ್ ಅಗತ್ಯವಿದೆ)
+git clone git@github.com:username/repository.git
+
+# GitHub CLI ಬಳಕೆ
+gh repo clone username/repository
+```
+
+ಪ್ರಾಜೆಕ್ಟ್ ಮೇಲೆ ಕೆಲಸ ಮಾಡಲು ಸರಿಯಾದ ಫೋಲ್ಡರ್‌ಗೆ ಸ್ಕಿಚ್ ಮಾಡಿ:
+`cd ProjectURL`
+
+ನೀವು ಸಂಪೂರ್ಣ ಪ್ರಾಜೆಕ್ಟ್ ತೆರೆಯಲು ಕೂಡಾ ಸಾಧ್ಯ:
+
+- **[GitHub Codespaces](https://github.com/features/codespaces)** - ಬ್ರೌಸರ್‌ನಲ್ಲಿ VS Code ಸಹಿತ GitHub ನ ಕ್ಲೌಡ್ ಅಭಿವೃದ್ಧಿ ಪರಿಸರ
+- **[GitHub Desktop](https://desktop.github.com/)** - Git ಕಾರ್ಯಾಚರಣೆಗಳಿಗಾಗಿ GUI ಆಪ್  
+- **[GitHub.dev](https://github.dev)** - ಯಾವುದೇ GitHub ರೆಪೊನಲ್ಲಿ `.` ಕೀ ಒತ್ತಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ VS Code ತೆರೆಯಿರಿ
+- **VS Code** GitHub Pull Requests ವಿಸ್ತರಣೆ ಜೊತೆ
+
+ಕೊನೆಯಲ್ಲಿ, ನೀವು ಕೋಡ್ ಅನ್ನು ಸೀಳು ಪ್ಯಾಕೆಟ್ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಡೌನ್ಲೋಡ್ ಮಾಡಬಹುದು.
+
+### GitHub ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ರಂಜನೀಯ ವಿಷಯಗಳು
+
+ನೀವು GitHub ನಲ್ಲಿ ಯಾವುದೇ ಸರ್ವಜನಿಕ ರೆಪೊ ಅನ್ನು ಸ್ಟಾರ್ ಮಾಡಬಹುದು, ವಾಚ್ ಮಾಡಬಹುದು ಮತ್ತು/ಅಥವಾ "fork" ಮಾಡಬಹುದು. ನಿಮ್ಮ ಸ್ಟಾರ್ ಮಾಡಿದ ರೆಪೊಗಳನ್ನು ಮೇಲೆ ಬಲ ತಳಪಾಡಿನ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುದಲ್ಲಿ ಕಾಣಬಹುದು. ಅದು ಕೋಡಿನ ಬುಕ್ಮಾರ್ಕಿಂಗ್ ಹೀಗೆಯೇ.
+
+ಯೋಜನೆಗಳಲ್ಲಿ issues ಟ್ರ್ಯಾಕರ್ ಇರುತ್ತದೆ, ಸಾಮಾನ್ಯವಾಗಿ GitHub ನ "Issues" ಟ್ಯಾಬ್‌ನಲ್ಲಿ, ಇಲ್ಲವೆ ತಿಳಿಸಲಾಗದಿದ್ದಲ್ಲಿ ಬೇರೆಡೆ, ಮತ್ತು ಅಲ್ಲಿ ಜನರು ಯೋಜನೆಯ ಸಂಬಂಧಿಸಿದ ಸಮಸ್ಯೆಗಳನ್ನು ಚರ್ಚಿಸುತ್ತಾರೆ. ಮತ್ತು Pull Requests ಟ್ಯಾಬ್‌ಲ್ಲಿ ಜನರು ಪ್ರಗತಿಯಲ್ಲಿ ಇರುವ ಬದಲಾವಣೆಗಳನ್ನು ಚರ್ಚಿಸುತ್ತಾರೆ ಮತ್ತು ವಿಮರ್ಶಿಸುತ್ತಾರೆ.
+
+ಯೋಜನೆಗಳಲ್ಲಿ ಫೋರಂಗಳು, ಮೇಲಿಂಗ್ ಲಿಸ್ಟ್‌ಗಳು ಅಥವಾ Slack, Discord ಅಥವಾ IRC ಮುಂತಾದ ಚಾಟ್ ಚಾನೆಲ್‌ಗಳಲ್ಲಿಯೂ ಚರ್ಚೆಗಳು ಇರುತ್ತವೆ.
+
+🔧 **ಮೋಡರ್ನ್ GitHub ವೈಶಿಷ್ಟ್ಯಗಳು**:
+- **GitHub Discussions** - ಸಮುದಾಯ ಸಂವಾದರಿಗೆ ಒಳಗೊಡಲಾದ ಫೊರಮ್
+- **GitHub Sponsors** - ನಿರ್ವಹಣೆಗಾರರಿಗೆ ಹಣಕಾಸು ಮೂಲಕ ಬೆಂಬಲ
+- **Security tab** - ಭದ್ರತೆ ಲೆಕ್ಕಾಚಾರಗಳು ಮತ್ತು ಅಧಿಕಾರಪತ್ರಗಳು
+- **Actions tab** - ಸ್ವಯಂಚಾಲಿತ ಕೆಲಸಪ್ರवाहಗಳು ಮತ್ತು CI/CD ಪೖಪ್‌ಲೈನ್‌ಗಳು
+- **Insights tab** - ಕೊಡುಗೆದಾರರು, ಕಮಿಟ್‌ಗಳು ಮತ್ತು ಯೋಜನೆ ಆರೋಗ್ಯದ ವಿಶ್ಲೇಷಣೆ
+- **Projects tab** - GitHub ಕಡೆಯ ಸ್ವಂತ ಯೋಜನೆ ನಿರ್ವಹಣಾ ಸಾಧನಗಳು
+
+✅ ನಿಮ್ಮ ಹೊಸ GitHub ರೆಪೊವನ್ನು ಎಳೆಯುತ್ತಾ, ಕೆಲವು ವಿಷಯಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ, ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ಸಂಪಾದಿಸುವುದು, ಮಾಹಿತಿ ಸೇರಿಸುವುದು, ಯೋಜನೆ ರಚಿಸುವುದು (ಕ್ಯಾನ್ಬನ್ ಬೋರ್ಡ್ ಹೀಗೆಯೇ), GitHub Actions ಅನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಮೆರೆಯಿರಿ. ನೀವು ಬಹಳಷ್ಟುمكن್ ಮಾಡಬಹುದು!
+
+---
+
+## 🚀 ಸವಾಲು 
+
+ಸರಿ, ನಿಮ್ಮ ಹೊಸ GitHub ಶಕ್ತಿ ಪರೀಕ್ಷಿಸಲು ಸಮಯವಾಯ್ತು! 🚀 ಇದು ಫ್ನ್ಯಾಗಿ ಪ್ರತಿಯೊಂದು ವಿಷಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನೆರವಾಗುವ ಸವಾಲು:
+
+ನಿಮ್ಮ ಸ್ನೇಹಿತನನ್ನು (ಅಥವಾ "ಕಂಪ್ಯೂಟರ್ ವಿಷಯ" ಕುರಿತು ಸದಾ ಕೇಳುವ ಆ ಕುಟುಂಬ ಸದಸ್ಯ) ತೆಗೆದುಕೊಳ್ಳಿ ಮತ್ತು ಸಹಯೋಗಿ ಕೋಡಿಂಗ್ ಸಾಹಸದಲ್ಲಿ ಕೈ ಜೋಡಿಸಿ! ಇಲ್ಲಿ ನಿಜವಾದ ಮಾಯಾಜ್ಞಾನ ತೋರುತ್ತದೆ – ಒಂದು ಪ್ರಾಜೆಕ್ಟ್ ರಚಿಸಿ, ಅವರಿಗೆ ಆ ಫೋರ್ಕ್ ಮಾಡಲು ಹೇಳಿ, ಕೆಲವು ಬ್ರಾಂಚ್‌ಗಳನ್ನು ಮಾಡಿ ಮತ್ತು ಮರ್ಜ್ ಮಾಡಿ, ನೀವು ಪ್ರೋಮಾದೇವರಂತೆ ಬದಲಾಗುತ್ತಿದ್ದೀರಿ.
+
+ನನಗೆ ಸತ್ಯ ಹೇಳಲೇಬೇಕಾದರೆ – ನೀವು ಕೆಲವೊಮ್ಮೆ ನಗುತ್ತೀರ (ಮುಖ್ಯವಾಗಿ ಇಬ್ಬರೂ ಒಂದೇ ಸಾಲನ್ನು ಬದಲಾಯಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ), ತಲೆ ತಿರುವುಹಾಕಿಕೊಳ್ಳಬಹುದು, ಆದರೆ ನೀವು "ಅಹಾ!" ಕ್ಷಣಗಳನ್ನು ಖಚಿತವಾಗಿ ಅನುಭವಿಸುತ್ತೀರಿ, ಅವು ಎಲ್ಲ ಪ್ರತಿಭೆಯ ತರಬೇತಿಗೆ ಮೌಲ್ಯವನ್ನ ನೀಡುತ್ತವೆ. ಮತ್ತು ಮೊದಲ ಯಶಸ್ವಿ ಮರ್ಜ್ ಅನ್ನು ಯಾರೊಂದಿಗೂ ಹಂಚಿಕೊಳ್ಳುವುದು ವಿಶೇಷ – ನಿಮ್ಮ ಸಾಧನೆಯನ್ನು ಸಣ್ಣ ಉತ್ಸವದಂತೆ.
+
+ನಿಮಗೆ ಇನ್ನೂ ಸಹೋದರಿಯಿಲ್ಲವೇ? ಚಿಂತಿಸಬೇಡಿ! GitHub ಸಮುದಾಯವು ಹೊಸವರಿಗಾಗಿ ಸಲ್ಲಿಹಬ್ಬದಂತೆ ಎಲ್ಲರಿಗೂ ಸ್ವಾಗತ ಹೇಳುತ್ತದೆ. “ಒಳ್ಳೆಯ ಮೊದಲ ಸಮಸ್ಯೆ” ಲೇಬಲ್ ಹೊಂದಿರುವ ರೆಪೊಗಳನ್ನು ಹುಡುಕಿ – ಅಂದರೆ "ಓ, ಪ್ರಾರಂಭಿಕರೇ, ಬನ್ನಿ ನಮ್ಮೊಡನೆ ಕಲಿಯಿರಿ!" ಇದು ಎಷ್ಟು ಅದ್ಭುತ?
+
+## ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/)
+
+## ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಕಲಿಯುತ್ತಿರಿ
+
+ವಾಹ್! 🎉 ನೀವು GitHub ಮೂಲಭೂತಗಳನ್ನು ಚಂಪಿಯನ್ ಆಗಿ ಗೆದ್ದಿದ್ದೀರಿ! ನಿಮ್ಮ ಮೆದುಳು ಸ್ವಲ್ಪ ತುಂಬಿದಂತೆ ಅನುಭವಿಸಿದರೆ, ಅದು ತುಂಬಾ ಸಹಜ ಮತ್ತು ಒಳ್ಳೆಯ ಸಂಕೇತ. ನಾನು ಪ್ರಾರಂಭಿಸುವಾಗ ವೀಕುಗಳಷ್ಟು ಕಾಲ ಅವುಗಳನ್ನು ಅನುಭವಿಸಲು ಹೋಯ್ತು.
+
+Git ಮತ್ತು GitHub ಭಗವಂತನಂತೆ ಶಕ್ತಿಶಾಲಿ (ನಿಜವಾಗಿಯೂ ಶಕ್ತಿಶಾಲಿ), ಮತ್ತು ಪ್ರತಿಯೊಬ್ಬ ಡೆವಲಪರ್ – ಈಗ ಮಾಯಾಜಾಲಿಗಳಂತೆ ಕಾಣುವವರೂ ಸೇರಿದಂತೆ – ಹಲವು ಬಾರಿ ಅನುಭವ ಮಾಡಿದ್ದು ಮತ್ತು ಸಣ್ಣ ತಪ್ಪುಗಳನ್ನು ಮಾಡಿದ್ದಾರೆ. ನೀವು ಈ ಪಾಠವನ್ನು ಮುಗಿಸಿದ್ದೀರಾ ಅಂದರೆ ನೀವು ಈಗಾಗಲೇ ಡೆವಲಪರ್ ಸಾಧನಗಳ ಅತ್ಯಂತ ಪ್ರಮುಖ ಘಟಕಗಳನ್ನು ನಿಯಂತ್ರಣಕ್ಕೆ ತೆಗೆದುಕೊಂಡಿದ್ದೀರಿ.
+
+ನಿಮ್ಮ ಅಭ್ಯಾಸ ಮತ್ತು ಉತ್ತಮತೆಯನ್ನು ಮತ್ತಷ್ಟು ಉತ್ತೇಜಿಸುವ ಅತ್ಯುತ್ತಮ ಸಂಪನ್ಮೂಲಗಳು ಇಲ್ಲಿವೆ:
+
+- [ಓಪನ್ ಸೋರ್ಸ್ ಸಾಫ್ಟ್‌ವೇರ್‌ಗೆ ಕೊಡುಗೆ ನೀಡುವ ಮಾರ್ಗದರ್ಶಿ](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – ನಿಮ್ಮ ಮಾರ್ಗಪಟ
+- [Git Cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – ಬೇಗ ನೆನಪಿಸಲು!
+
+ಮತ್ಮೆ ಮಾತುಕತೆ: ಅಭ್ಯಾಸವು ಪ್ರಗತಿಗೆ ಕಾರಣ, ಪರಿಪೂರ್ಣತೆಗೆ ಅಲ್ಲ! Git ಮತ್ತು GitHub ಬಳಸಿದಷ್ಟು ಸಹಜವಾಗುತ್ತದೆ. GitHub ಹಲವು ಅದ್ಭುತ ಇಂಟರ್ಯಾಕ್ಟಿವ್ ಕೋರ್ಸ್ ಅನ್ನು ರಚಿಸಿದೆ, ಅದರಲ್ಲಿ ಸುರಕ್ಷಿತ ಪರಿಸರದಲ್ಲಿ ಅಭ್ಯಾಸ ಮಾಡಬಹುದು:
+
+- [GitHub ಗೆ ಪರಿಚಯ](https://github.com/skills/introduction-to-github)
+- [Markdown ಬಳಸಿ ಸಂವಹನ](https://github.com/skills/communicate-using-markdown)  
+- [GitHub ಪುಟಗಳು](https://github.com/skills/github-pages)
+- [ಮರ್ಜ್ ಸಂಧರ್ಷಿಣಿಗಳನ್ನು ನಿರ್ವಹಣೆ](https://github.com/skills/resolve-merge-conflicts)
+
+** саф್ರೇ ಹೀಗಿದ್ದರೂ ಒಂದಷ್ಟು ಹೊಸ ಉಪಕರಣಗಳನ್ನು ನೋಡಿ:**
+- [GitHub CLI ಡಾಕ್ಯುಮೆಂಟೇಷನ್](https://cli.github.com/manual/) – ಕಮಾಂಡ್ ಲೈನ್ ಮಾಂತ್ರಿಕನಂತೆ ಭಾಸವಾಗಲು
+- [GitHub Codespaces ಡಾಕ್ಯುಮೆಂಟೇಷನ್](https://docs.github.com/en/codespaces) – ಕ್ಲೌಡ್‌ನಲ್ಲಿ ಕೋಡ್ ಮಾಡು!
+- [GitHub Actions ಡಾಕ್ಯುಮೆಂಟೇಷನ್](https://docs.github.com/en/actions) – ಎಲ್ಲಾ ಕಾರ್ಯಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಿ
+- [Git ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು](https://www.atlassian.com/git/tutorials/comparing-workflows) – ನಿಮ್ಮ ಕೆಲಸದ ಪ್ರವಾಹವನ್ನು ಮೇಲ್ದರ್ಜೆಗೆ ತೇರ್ಗಡೆಯಿರಿ
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:
+
+**ವಿವರಣೆ:** ಈ ಪಾಠದಲ್ಲಿ ಕಲಿತ GitHub ಕೆಲಸದ ಪ್ರವಾಹವನ್ನು ಪ್ರದರ್ಶಿಸುವ ಸಹಯೋಗಿ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸಿ. ಈ ಸವಾಲು ರೆಪೊ ರಚನೆ, ಸಹಕಾರ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಆಧುನಿಕ Git ಕೆಲಸದ ಪ್ರವಾಹಗಳನ್ನು ಪ್ರಾಯೋಗಿಕವಾಗಿ ಕಲಿಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಸರಳ “ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಸಂಪನ್ಮೂಲಗಳು” ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಸರ್ವಜನಿಕ GitHub ರೆಪೊವನ್ನು ರಚಿಸಿ. README.md ಫೈಲಿನಲ್ಲಿ ಅನುಕೂಲಕರ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಸಾಧನಗಳು ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳನ್ನು ವರ್ಗೀಕರಿಸಿಬೇಕು (HTML, CSS, JavaScript ಇತ್ಯಾದಿ). ರೆಪೊ ಅನ್ನು ಸಮುದಾಯದ ಮಾನದಂಡಗಳೊಂದಿಗೆ ಸಿದ್ಧಪಡಿಸಿ, ಲೈಸೆನ್ಸ್, ಕೊಡುಗೆ ಮಾರ್ಗಸೂಚಿ ಮತ್ತು ಆಚಾರ ಸಂಹಿತೆ ಸೇರಿಸಿ. ಕನಿಷ್ಠ ಎರಡು ಫೀಚರ್ ಬ್ರಾಂಚ್‌ಗಳು ರಚಿಸಿ: ಒಂದನ್ನು CSS ಸಂಪನ್ಮೂಲಗಳಿಗೆ ಮತ್ತು ಇನ್ನೊಂದನ್ನು JavaScript ಸಂಪನ್ಮೂಲಗಳಿಗೆ. ಪ್ರತಿಯೊಂದು ಬ್ರಾಂಚ್‌ಗೆ ವಿವರಣೆಾತ್ಮಕ ಕಮಿಟ್ ಸಂದೇಶಗಳೊಂದಿಗೆ ಕಮಿಟ್ ಮಾಡಿ, ನಂತರ ಬದಲಾವಣೆಗಳನ್ನು main ಗೆ ಮರ್ಜ್ ಮಾಡಲು ಪೂಲ್ ರಿಕ್ವೆಸ್ಟ್ ರಚಿಸಿ. Issues, Discussions ಮುಂತಾದ GitHub ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ಪರಿಶೀಲನೆಗಾಗಿ ಮೂಲ GitHub Actions ಕಾರ್ಯಪ್ರವಾಹವನ್ನು ಹೊಂದಿಸಿ.
+
+## ನಿಯೋಜನೆ
+
+ನೀವು ಎಲ್ಲಾ ಕಲಿತಿರುವುದನ್ನು ಸುರಕ್ಷಿತ, ಮಾರ್ಗದರ್ಶಿತ ಪರಿಸರದಲ್ಲಿ ಅಭ್ಯಾಸ ಮಾಡಿಸಲು GitHub Skills ನಲ್ಲಿ [Introduction to GitHub](https://github.com/skills/introduction-to-github) ಕೋರ್ಸ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ. ಇದನ್ನು ಮುಗಿಸಿದಾಗ ನಿಮಗೆ ಷಿಕಾರ್ಡ ಬೇರಳು ಸಿಗುತ್ತದೆ! 🏅
+
+**ಹೆಚ್ಚಿನ ಸವಾಲುಗಳಿಗೆ ಸಿದ್ಧರಿದ್ದೀರಾ?**
+- ನಿಮ್ಮ GitHub ಖಾತೆಗೆ SSH ದೃಢೀಕರಣ (ಪಾಸ್ವರ್ಡಿಲ್ಲದೆ!)
+- ದಿನನಿತ್ಯ Git ಕಾರ್ಯಾಚರಣೆಗಳಿಗೆ GitHub CLI ಪ್ರಯತ್ನಿಸಿ
+- GitHub Actions ಕಾರ್ಯಪ್ರವಾಹದೊಂದಿಗೆ ರೆಪೊ ರಚಿಸಿ
+- GitHub Codespaces ಅನ್ನು ಕ್ಲೌಡ್ ಆಧಾರಿತ ಸಂಕಲನ ಸಂಪಾದಕವಾಗಿ ಅನ್ವೇಷಿಸಿ
+
+---
+
+## 🚀 ನಿಮ್ಮ GitHub ಪರಿಣತಿ ಸಮಯರೇಖೆ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು**
+- [ ] ಈ ರೆಪೊವನ್ನು ಮತ್ತು ನಿಮಗೆ ಇಚ್ಛಾಸುಳ್ಳ 3 ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು ಸ್ಟಾರ್ ಮಾಡಿ
+- [ ] ನಿಮ್ಮ GitHub ಖಾತೆಯಲ್ಲಿ ಎರಡು-ಹೊರಗಿನ ದೃಢೀಕರಣವನ್ನು ಸೆಟ್ ಮಾಡಿ
+- [ ] ನಿಮ್ಮ ಮೊದಲ ರೆಪೊಗೆ ಸರಳ README ರಚಿಸಿ
+- [ ] خمسة ಡೆವಲಪರ್‌ಗಳನ್ನು ಅನುಸರಿಸಿ, ನಿಮ್ಮನ್ನು ಪ್ರೇರೇಪಿಸುವವರನ್ನು
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದುದು**
+- [ ] ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ನಿಮ್ಮ GitHub ಪ್ರಯಾಣವನ್ನು ಪರಿಗಣಿಸಿ
+- [ ] ಪಾಸ್ವರ್ಡ್ ರಹಿತ GitHub ದೃಢೀಕರಣಕ್ಕಾಗಿ SSH ಕೀಗಳನ್ನು ಸೆಟ್ ಮಾಡಿ
+- [ ] ಉತ್ತಮ ಕಮಿಟ್ ಸಂದೇಶದೊಡನೆ ಮೊದಲ ಅರ್ಥಪೂರ್ಣ ಕಮಿಟ್ ಮಾಡಿ
+- [ ] GitHub ನ “Explore” ಟ್ಯಾಬ್ ನೋಡಿ ಟ್ರೆಂಡಿಂಗ್ ಆಗಿರುವ ಯೋಜನೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿ
+- [ ] ರೆಪೊ ಫೋರ್ಕ್ ಮಾಡಿ ಮತ್ತು ಸಣ್ಣ ಬದಲಾವಣೆ ಮಾಡೋದು ಅಭ್ಯಾಸ ಮಾಡಿ
+
+### 📅 **ನಿಮ್ಮ ಅರ್ಧ ವಾರದ GitHub ಸಾಹಸ**
+- [ ] GitHub Skills ಕೋರ್ಸ್‌ಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ (Introduction to GitHub, Markdown)
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಮೊದಲ ಪೂಲ್ ರಿಕ್ವೆಸ್ಟ್ ಮಾಡಿ
+- [ ] GitHub Pages ಸೈಟ್ ಸ್ಥಾಪಿಸಿ ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಪ್ರದರ್ಶಿಸಿ
+- [ ] ನಿಮ್ಮ ಆಸಕ್ತಿ ಇರುವ ಯೋಜನೆಗಳ GitHub Discussions ನಲ್ಲಿ ಭಾಗವಹಿಸಿ
+- [ ] ಸಮುದಾಯ ಮಾನದಂಡಗಳನ್ನು ಹೊಂದಿರುವ ರೆಪೊ ರಚಿಸಿ (README, ಲೈಸೆನ್ಸ್ ಇತ್ಯಾದಿ)
+- [ ] ಕ್ಲೌಡ್ ಆಧಾರಿತ ಅಭಿವೃದ್ಧಿಗಾಗಿ GitHub Codespaces ಪ್ರಯತ್ನಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ಒಂದು ತಿಂಗಳ ಪರಿವರ್ತನೆ**
+- [ ] ಮೂರೂ ವಿಭಿನ್ನ ಓಪನ್ ಸೋರ್ಸ್ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ
+- [ ] ಹೊಸ ಆಡಿಯವರಿಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡಿ (ಮುಂದಕ್ಕೆ ಪಾವತಿಸಿ!)
+- [ ] GitHub Actions ನೊಂದಿಗೆ ಸ್ವಯಂಚಾಲಿತ ಕಾರ್ಯಾವಾಹ್ಯಗಳನ್ನು ಸಜ್ಜುಗೊಳಿಸಿ
+- [ ] ನಿಮ್ಮ GitHub ಕೊಡುಗೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಪೋರ್ಟ್ಫೋಲಿಯೋ ನಿರ್ಮಿಸಿ
+- [ ] Hacktoberfest ಅಥವಾ ಇದೇ ತರಹದ ಸಮುದಾಯ ಘಟನೆಗಳಲ್ಲಿ ಭಾಗವಹಿಸಿ
+- [ ] ನೀವು ನಿರ್ಮಿಸುವ ಪ್ರಾಜೆಕ್ಟ್‌ನ ನಿರ್ವಹಣೆಗಾರರಾಗಿ ಆಗಿರಿ
+
+### 🎓 **ಕೊನೆಗಿನ GitHub ಪರಿಣತಿ ಪರಿಶೀಲನೆ**
+
+**ನೀವು ಎಷ್ಟು ದೂರ ಬಂದಿದ್ದೀರಿ ಗುರುತಿಸಿ:**
+- GitHub ಬಳಕೆಯ ವೇಳೆ ನಿಮಗೆ ಯಾವ ಅಂಶ ಹೆಚ್ಚು ಇಷ್ಟವಾಯ್ತು?
+- ಯಾವುದಾದರೂ ಸಹಕಾರ ವೈಶಿಷ್ಟ್ಯ ನಿಮಗೆ ಹೆಚ್ಚಿನ ಉತ್ಸಾಹ ಕೊಡುವುದೇನು?
+- ಈಗ ಓಪನ್ ಸೋರ್ಸ್‌ಗೆ ಕೊಡುಗೆ ನೀಡಲು ನೀವು ಎಷ್ಟು ವಿಶ್ವಾಸಿಯಾಗಿದ್ದೀರಿ?
+- ನೀವು ಕೊಡುವ ಮೊದಲ ಪ್ರಾಜೆಕ್ಟ್ ಯಾವುದು?
+
+```mermaid
+journey
+    title ನಿಮ್ಮ GitHub ಆತ್ಮವಿಶ್ವಾಸಯಾತ್ರೆ
+    section ಇವತ್ತು
+      ನೆರ್ವಸ್: 3: You
+      ಕುತೂಹಲದಿಂದ: 4: You
+      ಉತ್ಸಾಹಭರಿತ: 5: You
+    section ಈ ವಾರ
+      ಅಭ್ಯಾಸ: 4: You
+      ಕೊಡುಗೆ ನೀಡುವುದು: 5: You
+      ಸಂಪರ್ಕಿಸುವುದು: 5: You
+    section ಮುಂದಿನ ತಿಂಗಳು
+      ಸೇರಿಕೊಂಡು ಕೆಲಸಮಾಡುವುದು: 5: You
+      ಮುಂಚೂಣಿಯಲ್ಲಿ ಇರೋದು: 5: You
+      ಇತರರನ್ನು ಪ್ರೇರೇಪಿಸುವುದು: 5: You
+```
+> 🌍 **ಜಾಗತಿಕ ಡೆವಲಪರ್ ಸಮುದಾಯಕ್ಕೆ ಸ್ವಾಗತ!** ನೀವು ಈಗ ನಿಮಗೆ ಬೇಕಾದಷ್ಟು ಮಾರ್ಗಸೂಚಿ ಹೊಂದಿದ್ದೀರಿ, ಜಗತ್ತಿನ ಲಕ್ಷಾಂತರ ಡೆವಲಪರ್‌ಗಳೊಂದಿಗೆ ಸಹಕಾರಕ್ಕಾಗಿ. ನಿಮ್ಮ ಮೊದಲ ಕೊಡುಗೆ ಸಣ್ಣದಾಗಿರಬಹುದು, ಆದರೆ ನೆನಪಿಡಿ - ಪ್ರತಿಯೊಂದು ಪ್ರಮುಖ ಓಪನ್ ಸೋರ್ಸ್ ಪ್ರಾಜೆಕ್ಟ್ ಕೂಡ ಚಿಕ್ಕ ಸಾಧನೆಯಿಂದ ಪ್ರಾರಂಭವಾಯಿತು. ನೀವು ಪ್ರಭಾವು ಬೀರುವುದೇ ಇಲ್ಲ, ಆದರೆ ನಿಮ್ಮ ಅನನ್ಯ ದೃಷ್ಟಿಕೋನದಿಂದ ಯಾವ ಅದ್ಭುತ ಪ್ರಾಜೆಕ್ಟ್ ಯಾವುದೇ ಮೊದಲ ಆಗಿ ಲಾಭ ಪಡೆಯುತ್ತದೋ ಅದೇ ಪ್ರಶ್ನೆ! 🚀
+
+ಒಂದು ವಿಷಯ ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಿ: ಪ್ರತಿಯೊಬ್ಬ ಪರಿಣತನು ಇದುವರೆಗೂ ಕಾದಂಬರಿ ಓದುವ ಪ್ರಾರಂಭಿಕನಾಗಿದ್ದಾನೆ. ನಿಮಗು ಇದು ಸಾಧ್ಯ! 💪
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅಸಮರ್ಥನೆ**:  
+ಈ ದಸ್ತಾವೇಜು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ಸುಕ್ಷ್ಮತೆಯನ್ನು ಸಾಧಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳು ಇರಬಹುದಾಗಿರುವದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಸ್ತಾವೇಜೆಯನ್ನು ಪ್ರామಾಣಿಕ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಕಲ್ಲುತೆಗಳು ಅಥವಾ ತಪ್ಪು ವಿವರಣಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/1-getting-started-lessons/3-accessibility/assignment.md

@@ -0,0 +1,262 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
+  "translation_date": "2026-01-08T19:59:54+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಸಂಪೂರ್ಣ ವೆಬ್‌ಸೈಟ್ ಪ್ರವೇಶ ವ್ಯವಸ್ಥೆ ಪರೀಕ್ಷೆ
+
+## ಸೂಚನೆಗಳು
+
+ಈ ಹುದ್ದೆಯಲ್ಲಿ, ನೀವು ವಾಸ್ತವಿಕ ವೆಬ್‌ಸೈಟ್‌ನ ವೃತ್ತಿಪರ ಮಟ್ಟದ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಚೆಕ್ ನಡೆಸುತ್ತೀರಿ, ನಿಮ್ಮ ತಿಳಿದುಕೊಂಡ ನಂತರದ ಸಿದ್ಧಾಂತಗಳು ಮತ್ತು ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸಿ. ಈ ಪ್ರಾಯೋಗಿಕ ಅನುಭವವು ಪ್ರವೇಶಾತಿ ಅಡೆತಡೆಗಳು ಮತ್ತು ಪರಿಹಾರಗಳ ಆಳವಾದ ಅರಿವನ್ನು ನೀಡುತ್ತದೆ.
+
+ಪ್ರವೇಶ ಅಡಚಣೆಗಳಿರುವಂತೆಯೇ ತೋರುತ್ತಿರುವ ವೆಬ್‌ಸೈಟ್ ಆಯ್ಕೆಮಾಡಿ—ಇದು ಈಗಾಗಲೇ ಪರಿಪೂರ್ಣ ವೆಬ್‌ಸೈಟ್ ವಿಶ್ಲೇಷಿಸುವ ತೋರ್ಪಡಿಸಲಾಗದ ಕಲಿಕೆಯ ಅವಕಾಶಗಳನ್ನು ನೀಡುತ್ತದೆ. ಉತ್ತಮ ಅಭ್ಯರ್ಥಿಗಳಲ್ಲಿ ಹಳೆಯ ವೆಬ್‌ಸೈಟ್‌ಗಳು, ಜಟಿಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು, ಅಥವಾ ಶ್ರೀಮಂತ ಮಲ್ಟಿಮಿಡಿಯಾ ವಿಷಯಗಳಿರುವ ಸೈಟ್‌ಗಳು ಸೇರಿವೆ.
+
+### ಹಂತ 1: ತಂತ್ರಜ್ಞಾನದ ಕೈಯಿಂದ ಮೌಲ್ಯಮಾಪನ
+
+ಸ್ವಯಂಚಾಲಿತ ಸಾಧನಗಳ ಕಡೆಗೆ ಹೋಗುವುದಕ್ಕೆ ಮುನ್ನ, ಸಂಪೂರ್ಣವಾದ ಕೈಯಿಂದ ಮೌಲ್ಯಮಾಪನವನ್ನು ನಡೆಸಿ. ಈ ಮಾನವನಿರ್ಮಿತ ವಿಧಾನವು ಸಾಧನಗಳು ತಪ್ಪಿಸಿಹೋಗುವ ಸಮಸ್ಯೆಗಳನ್ನು ಬಹುಮಾನಿಸುತ್ತದೆ ಮತ್ತು ನಿಜವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನಿಮಗೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+**🔍 ಅವಶ್ಯಕ ಮೌಲ್ಯಮಾಪನಾ ಮಾನದಂಡಗಳು:**
+
+**ನಾವಿಗೇಶನ್ ಮತ್ತು ರಚನೆ:**
+- ನೀವು ಪೂರ್ಣ ತಾಣವನ್ನು ಕೀಬೋರ್ಡ್ ಮಾತ್ರ ಬಳಸಿ (Tab, Shift+Tab, Enter, Space, Arrow ಕೀಗಳು) ನಾವಿಗೇಟ್ ಮಾಡಬಹುದೇ?
+- ಎಲ್ಲಾ ಸಂವಹನಾತ್ಮಕ ಅಂಶಗಳ ಮೇಲೆ ಫೋಕಸ್ ಸೂಚಕಗಳು ಸ್ಪಷ್ಟವಾಗಿದೆಯೇ?
+- ಶೀರ್ಷಿಕೆಗಳ ರಚನೆ (H1-H6) ಒಂದು ತಾರ್ಕಿಕ ವಿಷಯ ರೂಪರೇಖೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆಯೇ?
+- ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ಬಾರಲು ಸ್ಕಿಪ್ ಲಿಂಕ್ಸ್ ಇದಿವೇ?
+
+**ದೃಶ್ಯ ಪ್ರವೇಶಾತಿ:**
+- ತಾಣದಲ್ಲಿ ಯೋಗ್ಯ ಬಣ್ಣ ಭಿನ್ನತೆ ಇದ್ದಿದೆಯೇ (ಸಾಮಾನ್ಯ ಪಠ್ಯದಿಗಾಗಿ ಕನಿಷ್ಠ 4.5:1)?
+- ತಾಣವು ಮುಖ್ಯ ಮಾಹಿತಿಯನ್ನು ಕೇವಲ ಬಣ್ಣದಿಂದ ಮಾತ್ರ ಸಂದೇಶಿಸುವುದೇ?
+- ಎಲ್ಲಾ ಚಿತ್ರಗಳಿಗೂ ಸೂಕ್ತ ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ಹೊಂದಿದೆಯೇ?
+- 200% ಜೂಮ್ ಮಾಡಿದಾಗ ವಿನ್ಯಾಸ ಕಾರ್ಯನಿರ್ವಹಣೆಯಲ್ಲದೇ ಇದೆಯೇ?
+
+**ವಿಷಯ ಮತ್ತು ಸಂಪರ್ಕ:**
+- "ಇಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಿ" ಅಥವಾ ಸಂಶಯಾಸ್ಪದ ಲಿಂಕ್ ಪಠ್ಯಗಳಿವೆಯೇ?
+- ದೃಶ್ಯ ಸೂಚನೆಗಳಿಲ್ಲದೆ ವಿಷಯ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀವು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಹುದೇ?
+- ಫಾರ್ಮ್ ಕ್ಷೇತ್ರಗಳನ್ನು ಸರಿಯಾಗಿ ಲೇಬಲ್ ಮಾಡಿ ಗುಂಪು ಮಾಡಲಾಗಿದೆಯೇ?
+- ದೋಷ್ಟ ಸಂದೇಶಗಳು ಸ್ಪಷ್ಟವಾಗಿದ್ದು ಸಹಾಯಕವಾಗಿದೆಯೇ?
+
+**ಸಂವಹನಾತ್ಮಕ ಅಂಶಗಳು:**
+- ಎಲ್ಲಾ ಬಟನ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಕೀಬೋರ್ಡ್ ಮಾತ್ರ ಬಳಸಿ ಕೆಲಸ ಮಾಡುತ್ತವೆಯೇ?
+- ಡೈನಾಮಿಕ್ ವಿಷಯ ಬದಲಾವಣೆಗಳನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ಪ್ರಕಟಿಸಲಾಗುತ್ತದೆಯೇ?
+- ಮೋಡಲ್ ಡೈಲಾಗ್‌ಗಳು ಮತ್ತು ಜಟಿಲ ವიჯೆಟ್‌ಗಳು ಸರಿಯಾದ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಮಾದರಿಗಳನ್ನು ಅನುಸರಿಸುತ್ತವೆಯೇ?
+
+📝 ನಿಮ್ಮ ಕಂಡುಹಿಡಿದುಗಳನ್ನ ವಿವರಣೆಗಳು, ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು ಮತ್ತು ಪುಟ URL ಗಳು ಜೊತೆಗೆ ದಾಖಲೆಮಾಡಿ. ಸಮಸ್ಯೆಗಳು ಮತ್ತು ಉತ್ತಮವಾಗಿ ಮಾಡಲ್ಪಟ್ಟವುಗಳನ್ನೂ ಗುರುತಿಸಿ.
+
+### ಹಂತ 2: ಸಂಪೂರ್ಣ ಸ್ವಯಂ-ಪರೀಕ್ಷೆ
+
+ಈಗ ನಿಮ್ಮ ಕೈಯಿಂದ ಕಂಡುಹಿಡಿದ ಸಂಗತಿಗಳನ್ನು ಕೈಕೊಟ್ಟು ಕೈಗೊಳ್ಳುವ ತಂತ್ರಜ್ಞಾನದ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಪರೀಕ್ಷಾ ಸಾಧನಗಳನ್ನು ಬಳಸಿ ಪರಿಶೀಲಿಸಿ ಮತ್ತು ವಿಸ್ತರಿಸಿ. ಪ್ರತಿ ಸಾಧನವು ವಿಭಿನ್ನ ಶಕ್ತಿ ಹೊಂದಿದೆ, ಆದ್ದರಿಂದ ಅನೇಕ ಸಾಧನಗಳನ್ನು ಬಳಸಿ ಪೂರ್ಣ ಕ್ರಿಯಾ ವ್ಯಾಪ್ತಿಯನ್ನು ಪಡೆಯಿರಿ.
+
+**🛠️ ಅಗತ್ಯ ಟೆಸ್ಟಿಂಗ್ ಉಪಕರಣಗಳು:**
+
+1. **ಲೈಟ್ಹೌಸ್ ಪ್ರವೇಶಾತಿ ಪರಿಶೀಲನೆ** (ಕ್ರೋಮ್/ಎಡ್ಜ್ ಡೆವ್ಟೂಲ್‌ಗಳಲ್ಲಿ ಸೇರಿದೆ)
+   - ಬಹು ಪುಟಗಳಲ್ಲಿ ಪರಿಶೀಲನೆ ನಡೆಸಿ
+   - ನಿರ್ದಿಷ್ಟ ಮೀಟ್ರಿಕ್‌ಗಳು ಮತ್ತು ಶಿಫಾರಸುಗಳ ಮೇಲೆ ಗಮನ ಕೊಡಿ
+   - ನಿಮ್ಮ ಪ್ರವೇಶಾತಿ ಅಂಕೆಯನ್ನು ಮತ್ತು ಖಾತರಿಪಡಿಸಿದ ಉಲ್ಲಂಘನೆಗಳನ್ನು ದಾಖಲಿಸಿ
+
+2. **axe ಡೆವ್ಟೂಲ್‌ಗಳು** (ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ - ಕೈಗಾರಿಕಾ ಮಾನದಂಡ)
+   - ಲೈಟ್ಹೌಸ್‌ಗಿಂತ ಹೆಚ್ಚಿನ ವಿವರವಾದ ಸಮಸ್ಯೆ ಪತ್ತೆಮಾಡುವುದು
+   - ಸರಿಪಡಣೆಗೆ ನಿರ್ದಿಷ್ಟ ಕೋಡ್ ಉದಾಹರಣೆಗಳನ್ನು ನೀಡುವುದು
+   - WCAG 2.1 ಮಾನದಂಡಗಳ ವಿರುದ್ಧ ಪರೀಕ್ಷೆ
+
+3. **WAVE ವೆಬ್ ಪ್ರವೇಶಾತಿ ಮೌಲ್ಯಮಾಪಕ** (ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ)
+   - ಪ್ರವೇಶ ಯೋಗ್ಯತೆ அம்சಗಳ ದೃಶ್ಯ ಪ್ರದರ್ಶನ
+   - ತಪ್ಪು ಮತ್ತು ಲಾಭಕರ ಲಕ್ಷಣಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ
+   - ಪುಟದ ರಚನೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಉತ್ತಮ
+
+4. **ಬಣ್ಣ ಭಿನ್ನತೆ ವಿಶ್ಲೇಷಕರು**
+   - WebAIM ವಿಪರೀತ ಪರಿಶೀಲಕ ವಿಶೇಷ ಬಣ್ಣ ಜೋಡಿಗಳಿಗಾಗಿ
+   - ಪುಟ ವ್ಯಾಪ್ತಿಯ ವಿಶ್ಲೇಷಣೆಗೆ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳು
+   - WCAG AA ಮತ್ತು AAA ಮಾನದಂಡಗಳ ವಿರುದ್ಧ ಪರೀಕ್ಷೆ
+
+**🎧 ನಿಜವಾದ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನ ಪರೀಕ್ಷೆ:**
+- **ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಪರೀಕ್ಷೆ**: NVDA (ವಿಂಡೋಸ್), VoiceOver (ಮ್ಯಾಕ್ನಂಚಿ), ಅಥವಾ TalkBack (ಆಂಡ್ರಾಯ್ಡ್) ಬಳಸಿ
+- **ಕೀಬೋರ್ಡ್-ಮಾತ್ರ ನಾವಿಗೇಶನ್**: ನಿಮ್ಮ ಮೌಸ್ ಅನ್ಪ್ಲಗ್ ಮಾಡಿ ಮತ್ತು ತಾಣ ಸಂಪೂರ್ಣವಾಗಿ ನಾವಿಗೇಟ್ ಮಾಡಿ
+- **ಜೂಮ್ ಪರೀಕ್ಷೆ**: 200% ಮತ್ತು 400% ಜೂಮ್ ಮಟ್ಟಗಳಲ್ಲಿ ಕಾರ್ಯನೀರವಾಯಿಸಿ
+- **ವಾಯ್ಸ್ ನಿಯಂತ್ರಣ ಪರೀಕ್ಷೆ**: ಲಭ್ಯವಿದ್ದರೆ, ವಾಯ್ಸ್ ನಾವಿಗೇಶನ್ ಸಾಧನಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ
+
+**📊 ನಿಮ್ಮ ಫಲಿತಾಂಶಗಳನ್ನು ವ್ಯವಸ್ಥಿತ ಪಟ್ಟಿ ಮಾಡಿ:**
+- ಸಮಸ್ಯೆಯ ವಿವರಣೆ ಮತ್ತು ಸ್ಥಳ
+- ತೀವ್ರ ಮಟ್ಟ (ಗಂಭೀರ/ಎತ್ತರ/ಮಧ್ಯಮ/ಕಡಿಮೆ)
+- WCAG ಯಶಸ್ಸು ನಿಯಮ ಉಲ್ಲಂಘನೆ
+- ಸಮಸ್ಯೆ ಪತ್ತೆಮಾಡಿದ ಸಾಧನ
+- ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು ಮತ್ತು ಸಾಕ್ಷಿಗಳು
+
+### ಹಂತ 3: ಸಂಪೂರ್ಣ ಕಂಡುಹಿಡಿದ ಸಂಗತಿಗಳ ದಾಖಲೆ
+
+ತಾಂತ್ರಿಕ ಸಮಸ್ಯೆಗಳು ಮತ್ತು ಅವುಗಳ ಮಾನವ ಪರಿಣಾಮಗಳ ಅರಿವು ಪ್ರದರ್ಶಿಸುವ ವೃತ್ತಿಪರ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಪರಿಶೀಲನೆಯ ವರದಿಯನ್ನು ರಚಿಸಿ.
+
+**📋 ಅಗತ್ಯ ವರದಿ ವಿಭಾಗಗಳು:**
+
+1. **ಕಾರ್ಯನಿರ್ವಹಣಾ ಸಾರಾಂಶ** (1 ಪುಟ)
+   - ವೆಬ್‌ಸೈಟ್ URL ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ವಿವರಣೆ
+   - ಒಟ್ಟು ಪ್ರವೇಶಾತಿ ಸ್ಥಿತಿಮಾಪನ ಮಟ್ಟ
+   - ಶ್ರೇಷ್ಠ 3 ಗಂಭೀರ ಸಮಸ್ಯೆಗಳು
+   - ದಿವಂಗತ ಬಳಕೆದಾರರ ಮೇಲೆ ಅಂದಾಜು ಮಾಡಲಾದ ಪರಿಣಾಮ
+
+2. **ವಿಧಾನಶಾಸ್ತ್ರ** (ಅರ್ಧ ಪುಟ)
+   - ಪರೀಕ್ಷೆ ವಿಧಾನ ಮತ್ತು ಉಪಕರಣಗಳು
+   - ಮೌಲ್ಯಮಾಪನ ಮಾಡಲಾದ ಪುಟಗಳು ಮತ್ತು ಸಾಧನ/ಬ್ರೌಸರ್ ಸಂಯೋಜನೆಗಳು
+   - ಮಾನದಂಡಗಳು (WCAG 2.1 AA)
+
+3. **ವಿಸ್ತೃತ ಕಂಡುಹಿಡಿದ ಸಂಗತಿಗಳು** (2-3 ಪುಟಗಳು)
+   - WCAG ತತ್ತ್ವಗಳ ಪ್ರಕಾರ ಸಮಸ್ಯೆಗಳು (ನಿರೀಕ್ಷಣೀಯ, ಕಾರ್ಯನಿರ್ವಹಣೀಯ, ಅರ್ಥಮಾಡಬಹುದಾದ, ಬಲಿಷ್ಠ)
+   - ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಉದಾಹರಣೆಗಳು
+   - ನೀವು ಕಂಡುಹಿಡಿದ ಸಕಾರಾತ್ಮಕ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಲಕ್ಷಣಗಳು
+   - ಸ್ವಯಂಚಾಲಿತ ಸಾಧನ ಫಲಿತಾಂಶಗಳ ಜೊತೆ ಕ್ರಾಸ್ ರೆಫರೆನ್ಸ್
+
+4. **ಬಳಕೆದಾರರ ಪರಿಣಾಮ ಮೌಲ್ಯಮಾಪನ** (1 ಪುಟ)
+   - ಗುರುತಿಸಲಾದ ಸಮಸ್ಯೆಗಳು ವಿಭಿನ್ನ ದಿವಂಗತ ಬಳಕೆದಾರರನ್ನು ಹೇಗೆ ಪ್ರಭಾವಿಸುತ್ತವೆ
+   - ನಿಜವಾದ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ವಿವರಣೆಗೊಳಿಸುವ ದೃಶ್ಯಾವಳಿ
+   - ವ್ಯವಹಾರ ಪರಿಣಾಮ (ಕಾನೂನು ಅಪಾಯ, SEO, ಬಳಕೆದಾರ ಆಧಾರ ವಿಸ್ತರಣೆ)
+
+**📸 ಸಾಕ್ಷಿ ಸಂಗ್ರಹಣೆ:**
+- ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಉಲ್ಲಂಘನೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು
+- ಸಮಸ್ಯಾತ್ಮಕ ಬಳಕೆದಾರ ಪ್ರವಾಹಗಳ ಸ್ಕ್ರೀನ್ ರೆಕಾರ್ಡಿಂಗ್‌ಗಳು
+- ಸಾಧನ ವರದಿ (PDF ಆಗಿ ಸಂರಕ್ಷಿಸಿ)
+- ಸಮಸ್ಯೆಗಳು ತೋರಿಸುವ ಕೋಡ್ ಉದಾಹರಣೆಗಳು
+
+### ಹಂತ 4: ವೃತ್ತಿಪರ ಪರಿಹಾರ ಯೋಜನೆ
+
+ಪ್ರವೇಶ ಯೋಗ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸಲು ತಂತ್ರಜ್ಞಾನದ ಪ್ರಾಥಮಿಕತೆ ಹೊಂದಿದ ಯೋಜನೆಯನ್ನು ರೂಪಿಸಿ. ಇದು ನಿಜವಾದ ವ್ಯವಹಾರ ಸಂಬಂಧಿತ ಮಿತಿಗಳನ್ನು ಎದುರಿಸುವ ವೃತ್ತಿಪರ ವೆಬ್ ಡೆವಲಪರ್ ಆಗಿ ನಿಮ್ಮ ಯೋಗ್ಯತೆಯನ್ನು ತೋರಿಸುತ್ತದೆ.
+
+**🎯 ವಿವರವಾದ ಸುಧಾರಣಾ ಶಿಫಾರಸುಗಳನ್ನು ರಚಿಸಿ (ಕನಿಷ್ಠ 10 ಸಮಸ್ಯೆಗಳು):**
+
+**ಪ್ರತಿ ಗುರುತಿಸಲಾದ ಸಮಸ್ಯೆಗೆ ನೀಡಬೇಕಾದವು:**
+
+- **ಸಮಸ್ಯೆಯ ವಿವರ**: ತಪ್ಪಿದೆ ಏನು ಮತ್ತು ಏಕೆ ಅದು ಸಮಸ್ಯೆಯಾಗಿದೆ ಎಂಬ ಸ್ಪಷ್ಟ ವಿವರಣೆ
+- **WCAG ಉಲ್ಲೇಖ**: ಉಲ್ಲಂಘಿತ ಯಶಸ್ಸು ಮಾನದಂಡಗಳು (ಉದಾ: "2.4.4 ಲಿಂಕ್ ಉದ್ದೇಶ (ಸಂದರ್ಭದಲ್ಲಿ) - ಮಟ್ಟ A")
+- **ಬಳಕೆದಾರ ಪರಿಣಾಮ**: ವಿಭಿನ್ನ ದಿವಂಗತ ಬಳಕೆದಾರರ ಮೇಲೆ ಇದರ ಪರಿಣಾಮ
+- **ಪರಿಹಾರ**: ನಿರ್ದಿಷ್ಟ ಕೋಡ್ ಬದಲಾವಣೆಗಳು, ವಿನ್ಯಾಸ ಸುಧಾರಣೆಗಳು ಅಥವಾ ಪ್ರಕ್ರಿಯಾ ಉತ್ತಮಗೊಳಿಕೆಗಳು
+- **ಪ್ರಾಥಮಿಕತೆ ಮಟ್ಟ**: ಗಂಭೀರ (ಮೂಲ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ತಡೆಯುತ್ತದೆ) / ಎತ್ತರ (ಗুরুತರುವ ಅಡೆತಡೆ) / ಮಧ್ಯಮ (ಬಳಕೆದಾರ ಅನುಕೂಲದಲ್ಲಿ ಸಮಸ್ಯೆ) / ಕಡಿಮೆ (ಸುಧಾರಣೆ)
+- **ಕಾರ್ಯಗತಗೊಳಿಸುವ ಪ್ರಯತ್ನ**: ಸಮಯ / ಜಟಿಲತೆ ಅಂದಾಜು (ತ್ವರಿತ ಗೆಲುವು / ಮಧ್ಯಮ ಪ್ರಯತ್ನ / ಪ್ರಮುಖ ಪುನರ್ ರಚನೆ)
+- **ಪರೀಕ್ಷೆ ಪರಿಶೀಲನೆ**: ಪರಿಹಾರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆಯೇ ಎಂಬುದನ್ನು ತಿಳಿಯುವುದು ಹೇಗೆ
+
+**ಉದಾಹರಣೆಯ ಸುಧಾರಣೆ ದಾಖಲೆ:**
+
+```
+Issue: Generic "Read more" link text appears 8 times on homepage
+WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
+User Impact: Screen reader users cannot distinguish between links when viewed in link list
+Solution: Replace with descriptive text like "Read more about sustainability initiatives"
+Priority: High (major navigation barrier)
+Effort: Low (30 minutes to update content)
+Testing: Generate link list with screen reader - each link should be meaningful standalone
+```
+
+
+**📈 ತಂತ್ರಜ್ಞಾನ ಕಾರ್ಯಗತಗೊಳಿಸುವ ಹಂತಗಳು:**
+
+- **ಹಂತ 1 (0-2 ವಾರಗಳು)**: ಮೂಲ ಕಾರ್ಯನಿರ್ವಹಣೆಯನ್ನು ತಡೆದ ಗಂಭೀರ ಸಮಸ್ಯೆಗಳು
+- **ಹಂತ 2 (1-2 ತಿಂಗಳು)**: ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಹೆಚ್ಚಿನ ಪ್ರಾಥಮಿಕತೆ ಸುಧಾರಣೆಗಳು
+- **ಹಂತ 3 (3-6 ತಿಂಗಳು)**: ಮಧ್ಯಮ ಪ್ರಾಥಮಿಕತೆಯ ಸುಧಾರಣೆಗಳು ಮತ್ತು ಪ್ರಕ್ರಿಯಾ ಹೆಚ್ಚಳಗಳು
+- **ಹಂತ 4 (ತತ್ಕಾಲೀನ)**: ನಿರಂತರ ನಿಗಾ ಮತ್ತು ಸುಧಾರಣೆ
+
+## ಮೌಲ್ಯಮಾಪನ ಮಾಪನಕೆಲಸ
+
+ನಿಮ್ಮ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಪರೀಕ್ಷೆಯನ್ನು ತಾಂತ್ರಿಕ ಖಚಿತತೆ ಮತ್ತು ವೃತ್ತಿಪರ ಪ್ರಸ್ತುತಿಯಿಂದ ಎಲ್ಲ ವಿಷಯಗಳ ಮೇಲೆ ಮೌಲ್ಯಮಾಪನ ಮಾಡಲಾಗುತ್ತದೆ:
+
+| ಮಾನದಂಡ | ಅತ್ಯುತ್ತಮ (90-100%) | ಚೆನ್ನಾಗಿದೆ (80-89%) | ತೃಪ್ತಿಕರ (70-79%) | ಸುಧಾರಣೆ ಅಗತ್ಯ (<70%) |
+|----------|-------------------|---------------|---------------------|------------------------|
+| **ಕೈಯಿಂದ ಪರೀಕ್ಷೆ ಆಳತೆ** | ಎಲ್ಲಾ POUR ತತ್ತ್ವಗಳನ್ನು ವಿವರವಾಗಿ ಮೌಲ್ಯಮಾಪನ ಮಾಡಿ, ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ಬಳಕೆದಾರ ದೃಶ್ಯಗಳು | ಬಹುಮಟ್ಟಿನಲ್ಲಿ ಪ್ರವೇಶ ಪ್ರದೇಶಗಳಿಗೆ ಒಳ್ಳೆಯ ವ್ಯಾಪ್ತಿ ಮತ್ತು ಗುಣಮಟ್ಟದ ಕಂಡುಹಿಡಿತಗಳು | ಮುಖ್ಯ ಪ್ರದೇಶಗಳ ಮೂಲ ಮೌಲ್ಯಮಾಪನ ಮತ್ತು ಸಾಕಾದ ವೀಕ್ಷಣೆಗಳು | ಸೀಮಿತ ಪರೀಕ್ಷೆ, ಮೇಲ್ಮನಸ್ಸಿನ ವೀಕ್ಷಣೆ ಮತ್ತು ಕಡಿಮೆ ಬಳಕೆದಾರ ಪರಿಣಾಮ |
+| **ಉಪಕರಣ ಬಳಕೆ ಮತ್ತು ವಿಶ್ಲೇಷಣೆ** | ಎಲ್ಲಾ ಅಗತ್ಯ ಉಪಕರಣಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸುವುದು, ಕಂಡುಹಿಡಿದ ಸಂಗತಿಗಳ ಹೋಲಿಕೆ, ಸ್ಪಷ್ಟ ಸಾಕ್ಷಿ, ಮತ್ತು ಉಪಕರಣ ಸೀಮಿತತೆ ವಿವರಣೆ | ಬಹುತೇಕ ಉಪಕರಣಗಳನ್ನು ಬಳಸಿ, ಕೆಲವು ಹೋಲಿಕೆ ಮತ್ತು ಸಾಕಷ್ಟು ಸಾಕ್ಷಿ | ಅಗತ್ಯ ಉಪಕರಣಗಳನ್ನು ಬಳಸಿ ಮೂಲ ದಾಖಲಾತಿ ಮತ್ತು ಕೆಲವು ಸಾಕ್ಷಿ | ಕಡಿಮೆ ಉಪಕರಣ ಬಳಕೆ, ಅಪೂರ್ಣ ದಾಖಲೆ ಅಥವಾ ಸಾಕ್ಷಿ ಇಲ್ಲ |
+| **ಸಮಸ್ಯೆಗಳ ಪತ್ತೆ ಮತ್ತು ವರ್ಗೀಕರಣ** | WCAG ತತ್ತ್ವಗಳಾದ್ಯಂತ 15+ ಸ್ನಿಗ್ಧ ಸಮಸ್ಯೆಗಳ ಗುರುತು, ತೀವ್ರತೆ ಮೇರೆಗೆ ನಿಖರವಾಗಿ ವರ್ಗೀಕರಣೆ, ಆಳವಾದ ಅರಿವು | 10-14 ಸಮಸ್ಯೆಗಳು ಹೆಚ್ಚಿನ WCAG ತತ್ತ್ವಗಳ ವ್ಯಾಪ್ತಿ, ಉತ್ತಮ ವರ್ಗೀಕರಣ ಮತ್ತು ಗಟ್ಟಿಯಾದ ಅರ್ಥ | 7-9 ಸಮಸ್ಯೆಗಳು ಸಾಕಾದ WCAG ವ್ಯಾಪ್ತಿ ಮತ್ತು ಮೂಲ ವರ್ಗೀಕರಣ | 7 ತೆಳುವಾಗಿರದ ಅಥವಾ ಕಡಿಮೆ ವ್ಯಾಪ್ತಿಯ ಸಮಸ್ಯೆಗಳು |
+| **ಪರಿಹಾರ ಗುಣಮಟ್ಟ ಮತ್ತು ಸಾಧ್ಯತೆ** | 10+ ವಿವರವಾದ, ಕೈಗೊಂಡು ಪರಿಹಾರಗಳು ನಿಖರ WCAG ಉಲ್ಲೇಖಗಳು, ನೈತಿಕ ಕಾರ್ಯಗತಗೊಳಿಸುವ ಸಮಯ ಮತ್ತು ಪರಿಶೀಲನೆ ವಿಧಾನ | 8-9 ಉತ್ತಮ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಪರಿಹಾರಗಳು, ಹೆಚ್ಚಿನ ನಿಖರ ಉಲ್ಲೇಖ ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆ ವಿವರಗಳು | 6-7 ಮೂಲ ಪರಿಹಾರಗಳು ಕೆಲವು ವಿವರ ಹಾಗೂ ಸಾಮಾನ್ಯ ಸಂಖ್ಯಾತ್ಮಕ ದೃಷ್ಟಿಕೋನಗಳು | 6 ಕ್ಕಿಂತ ಕಡಿಮೆ ಪರಿಹಾರಗಳು, ಅಪರ്യാപ್ತ ವಿವರಗಳು ಅಥವಾ ಅಸಾಧ್ಯವಾದ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆ |
+| **ವೃತ್ತಿಪರ ಸಂವಹನ** | ವರದಿ ಉತ್ತಮವಾಗಿ ಸಂಘಟಿತ ಮತ್ತು ಸ್ಪಷ್ಟ ಬರಹ, ಕಾರ್ಯನಿರ್ವಹಣಾ ಸಾರಾಂಶ, ಸೂಕ್ತ ತಾಂತ್ರಿಕ ಭಾಷೆ ಮತ್ತು ವ್ಯವಹಾರ ಡಾಕ್ಯುಮೆಂಟ್ ಮಾನದಂಡಗಳು | ಒಳ್ಳೆಯ ಸಂಘಟನೆ, ಉತ್ತಮ ಬರಹ ಗುಣಮಟ್ಟ, ಅತಿ ಅಗತ್ಯ ವಿಭಾಗಗಳು ಒಳಗೊಂಡಿವೆ, ಅನುಕೂಲಕರ ಶೈಲಿ | ಅತೃಪ್ತ ಸಂಘಟನೆ, ಸ್ವೀಕಾರ ಆಗಬಲ್ಲ ಬರಹ, ಮೂಲ ಅಗತ್ಯ ವಿಭಾಗಗಳು | ದುರಷ್ಟೂಪವಾದ ಸಂಘಟನೆ, ಅಸ್ಪಷ್ಟ ಬರಹ ಅಥವಾ ಮುಖ್ಯ ವಿಭಾಗಗಳ ಕೊರತೆ |
+| **ವಾಸ್ತವಿಕ ಅನ್ವಯದಲ್ಲಿ** | ವ್ಯವಹಾರ ಪರಿಣಾಮ, ಕಾನೂನು ಪರಿಗಣನೆಗಳು, ಬಳಕೆದಾರ ವೈವಿಧ್ಯತೆ ಮತ್ತು ನೈಜ ಜಾಗೃತಿಯ ಅರ್ಥವಂತಿಕೆ | ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳ ಉತ್ತಮ ಅರಿವು ಮತ್ತು ಕೆಲವು ವ್ಯವಹಾರ ಸಂದರ್ಬ | ಮೂಲ ಅರ್ಥ ಮತ್ತು ಜಾಗೃತಿ | ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳಿಗೆ ಕಡಿಮೆ ಸಂಪರ್ಕ |
+
+## ಉನ್ನತ ಮಟ್ಟದ ಸವಾಲು ಆಯ್ಕೆಗಳು
+
+**🚀 ಹೆಚ್ಚುವರಿ ಸವಾಲಿನ ಹೋರಾಟಗಾರರಿಗಾಗಿ:**
+
+- **ಹೋಲಿಕೆ ವಿಶ್ಲೇಷಣೆ**: 2-3 ಸ್ಪರ್ಧಾತ್ಮಕ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಮೂರ್ಚನೆಗಳನ್ನು ಹೋಲಿಸಿ
+- **ಮೊಬೈಲ್ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಫೋಕಸ್**: ಆಂಡ್ರಾಯ್ಡ್ TalkBack ಅಥವಾ iOS VoiceOver ಬಳಸಿ ಮೊಬೈಲ್-ಪರಿಶಿಷ್ಟ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಸಮಸ್ಯೆಗಳ ಆಳವಾದ ಅಧ್ಯಯನ
+- **ಅಂತರರಾಷ್ಟ್ರೀಯ ದೃಷ್ಟಿಕೋಣ**: ವಿವಿಧ ದೇಶಗಳ ಪ್ರವೇಶ ಮಾನದಂಡಗಳ ಅಧ್ಯಯನ ಮತ್ತು ಅನ್ವಯಣೆ (EN 301 549, ಸೆಕ್ಷನ್ 508, ADA)
+- **ಪ್ರವೇಶ ಯೋಗ್ಯತೆಯ ಘೋಷಣೆ ಅವಲೋಕನ**: ವೆಬ್‌ಸೈಟ್‌ನ ಪ್ರಸ್ತುತ ಪ್ರವೇಶ ಘೋಷಣೆಯನ್ನು ನಿಮ್ಮ ಕಂಡುಹಿಡಿತಗಳೊಡನೆ ಮೌಲ್ಯಮಾಪನ
+
+## ಸಲ್ಲಿಸಲು ಬೇಕಾಗಿರುವವು
+
+ವೃತ್ತಿಪರ-ಮಟ್ಟದ ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆ ಯೋಜನೆಯನ್ನು ತೋರಿಸುವ ಸಂಪೂರ್ಣ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಪರಿಶೀಲನಾ ವರದಿ ಸಲ್ಲಿಸಿ:
+
+**📄 ಅಂತಿಮ ವರದಿ ಅಗತ್ಯಗಳು:**
+
+1. **ಕಾರ್ಯನಿರ್ವಹಣಾ ಸಾರಾಂಶ** (1 ಪುಟ)
+   - ವೆಬ್‌ಸೈಟ್ ವೀಕ್ಷಣೆ ಮತ್ತು ಪ್ರವೇಶ ಯೋಗ್ಯತೆಯ ಸ್ಥಿತಿಮಾಪನ
+   - ಪ್ರಮುಖ ಕಂಡುಹಿಡಿತಗಳ ಸಾರಾಂಶ ಮತ್ತು ವ್ಯವಹಾರ ಪರಿಣಾಮ
+   - ಶಿಫಾರಸು ಮಾಡಲಾದ ಪ್ರಾಥಮಿಕ ಕ್ರಮಗಳು
+
+2. **ವಿಧಾನಶಾಸ್ತ್ರ ಮತ್ತು ವ್ಯಾಪ್ತಿ** (1 ಪುಟ)
+   - ಪರೀಕ್ಷೆಯ ವಿಧಾನ, ಉಪಕರಣಗಳು ಬಳಕೆಮಾಡಿದ್ದು, ಮತ್ತು ಮೌಲ್ಯಮಾಪನಾ ಮಾನದಂಡಗಳು
+   - ಪರಿಶೀಲಿಸಲಾದ ಪುಟಗಳು/ವಿಭಾಗಗಳು ಮತ್ತು ಯಾವುದೇ ಸೀಮಿತತೆಗಳು
+   - ಮಾನದಂಡಗಳ ಅನುಕೂಲ (WCAG 2.1 AA)
+
+3. **ವಿಸ್ತೃತ ಕಂಡುಹಿಡಿತಗಳ ವರದಿ** (3-4 ಪುಟಗಳು)
+   - ಕೈಯಿಂದ ಪರೀಕ್ಷೆ ವೀಕ್ಷಣೆಗಳು ಬಳಕೆದಾರ ದೃಶ್ಯಗಳೊಡನೆ
+   - ಸ್ವಯಂಚಾಲಿತ ಸಾಧನ ಫಲಿತಾಂಶಗಳು ಮತ್ತು ಹೋಲಿಕೆ
+   - WCAG ತತ್ತ್ವಗಳ ಪ್ರಕಾರ ವ್ಯವಸ್ಥಿತ ಸಮಸ್ಯೆಗಳು ಸಾಕ್ಷಿ ಜೊತೆ
+   - ಪಾಸಿಟಿವ್ ಪ್ರವೇಶ ಲಕ್ಷಣಗಳ ಗುರುತು
+
+4. **ತಂತ್ರಜ್ಞಾನದ ಪರಿಹಾರ ಯೋಜನೆ** (3-4 ಪುಟಗಳು)
+   - ಪ್ರಾಧಾನ್ಯಿತ ಸುಧಾರಣಾ ಶಿಫಾರಸುಗಳು (ಕನಿಷ್ಠ 10)
+   - ಕಾರ್ಯಗತಗೊಳಿಸುವ ಸಮಯಾವಳಿ ಮತ್ತು ಪ್ರಯತ್ನ ಅಂದಾಜುಗಳು
+   - ಯಶಸ್ಸಿನ ಅಂಕಿಗಳು ಮತ್ತು ಪರಿಶೀಲನೆ ವಿಧಾನಗಳು
+   - ಉದ್ದಿರ್ನ性್ ಪ್ರವೇಶ ನಿರ್ವಹಣಾ ತಂತ್ರ
+
+5. **ಬೆಂಬಲಿಸಿ ಸಾಕ್ಷಿಗಳು** (ಹೊರಗಾಗಿಗಳು)
+   - ಪ್ರವೇಶ_ulಾṅgaತೆ ಉಲ್ಲಂಘನೆಯ ಸ್ಕ್ರಿನ್‌ಶಾಟ್‌ಗಳು ಮತ್ತು ಪರೀಕ್ಷಾ ಉಪಕರಣಗಳು
+   - ಸಮಸ್ಯೆಗಳತ್ತ ಸೂಚಿಸುವ ಕೋಡ್ ಉದಾಹರಣೆಗಳು
+   - ಉಪಕರಣ ವರದಿಗಳು ಮತ್ತು ಪರಿಶೀಲನಾ ಸಾರಾಂಶಗಳು
+   - ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಪರೀಕ್ಷೆ ನೋಟ್‌ಗಳು ಅಥವಾ ರೆಕಾರ್ಡಿಂಗ್‌ಗಳು
+
+**📊 ರೂಪರೇಖಾ ಅಗತ್ಯಗಳು:**
+- **ಡಾಕ್ಯುಮೆಂಟ್ ಫಾರ್ಮ್ಯಾಟ್**: PDF (ವೃತ್ತಿಪರ ಪ್ರದರ್ಶನ)
+- **ಪದಗಳ ಸಂಖ್ಯೆ**: 2,500-3,500 ಪದಗಳು (ಹೊರಗಾಗಿಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳನ್ನು ಹೊರತುಪಡಿಸಿ)
+- **ದೃಶ್ಯ ಅಂಶಗಳು**: ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು, ಚಿತ್ರಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳನ್ನು ಒಳಗೊಂಡಿರಲಿ
+- **ಉಲ್ಲೇಖನೆಗಳು**: WCAG ಮಾರ್ಗಸೂಚಿಗಳು ಮತ್ತು ಪ್ರವೇಶ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸರಿಯಾಗಿ ಉಲ್ಲೇಖಿಸಿ
+
+**💡 ಅತ್ಯುತ್ತಮಕ್ಕಾಗಿ ಪ್ರೋ ಸಲಹೆಗಳು:**
+- ವೃತ್ತಿಪರ ವರದಿ ಸ್ವರೂಪಣೆಯನ್ನು ಸತತ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಶೈಲಿಯೊಂದಿಗೆ ಬಳಸಿ
+- ಸುಲಭ ನಾವಿಗೇಶನಿಗೆ ವಿಷಯ ಪಟ್ಟಿಯನ್ನು ಸೇರಿಸಿ
+- ತಾಂತ್ರಿಕ ದಾಖಲಾತಿಗೆ ಸ್ಪಷ್ಟ, ವ್ಯವಹಾರಿಗೆ ಯೋಗ್ಯ ಭಾಷೆಯನ್ನು ಸಮತೋಲಗೊಳಿಸಿ
+- ತಾಂತ್ರಿಕ ಜಾರಿಗೆ ಮತ್ತು ಬಳಕೆದಾರ ಪರಿಣಾಮಕ್ಕೆ ಸಮಗ್ರ ಅರ್ಥ ಪ್ರದರ್ಶಿಸಿ
+
+## ಕಲಿಕೆ ಫಲಿತಾಂಶಗಳು
+
+ಈ ಸಂಪೂರ್ಣ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಪರಿಶೀಲನೆ ಪೂರ್ಣಗೊಳಿಸುವ ನಂತರ, ನೀವು ಅತೀ ಮುಖ್ಯ ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಿಕೊಂಡಿರುತ್ತೀರಿ:
+
+**🎯 ತಾಂತ್ರಿಕ ಸಾಮರ್ಥ್ಯಗಳು:**
+- **ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಪರೀಕ್ಷೆಯಲ್ಲಿ ಪರಿಣತಿ**: ಕೈಗಾರಿಕಾ ಪ್ರಮಾಣದ ಕೈಯಿಂದ ಹಾಗೂ ಸ್ವಯಂ-ಪರೀಕ್ಷಣಾ ವಿಧಾನಗಳಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ
+- **WCAG ಅನ್ವಯಣೆ**: ವೆಬ್ ವಿಷಯ ಪ್ರವೇಶ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ನಿಜವಾದ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ಅನುಷ್ಠಾನಮಾಡಿದ ಅನುಭವ
+- **ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನ ಅರಿವು**: ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು ಕೀಬೋರ್ಡ್ ನವಿಗೇಶನ್ ಪರಿಣಾಮಕಾರಿತ್ವವನ್ನು ಕೈಗೆತ್ತಿಕೊಂಡ ಅನುಭವ
+- **ಸಮಸ್ಯೆ-ಪರಿಹಾರ ನಕ್ಷೆ**: ಪ್ರವೇಶ ಅಡೆತಡೆಗಳನ್ನು ಗುರುತಿಸಿ, ನಿರ್ದಿಷ್ಟ, ನಡತೆಯಾದ ಪರಿಹಾರ ಕಾರ್ಯತಂತ್ರಗಳನ್ನು ರೂಪಿಸುವ ಸಾಮರ್ಥ್ಯ
+
+**💼 ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು:**
+- **ತಾಂತ್ರಿಕ ಸಂವಹನ**: ವಿಭಿನ್ನ ಹಕ್ಕುಗಳಲ್ಲಿ ವೃತ್ತಿಪರ ಪ್ರವೇಶ ವರದಿಗಳನ್ನು ಬರೆಯುವ ಅನುಭವ
+- **ತಂತ್ರಜ್ಞಾನದ ಯೋಜನೆ**: ಬಳಕೆದಾರರ ಪರಿಣಾಮ ಮತ್ತು ಜಾರಿಗೆ ಸಾಧ್ಯತೆ ಆಧರಿಸಿ ಪ್ರವೇಶ ಸುಧಾರಣೆಯ ಆದ್ಯತೆ ಪಟ್ಟಿ
+- **ಗುಣಮಟ್ಟ ನಿರ್ವಹಣೆ**: ಅಭಿವೃದ್ಧಿ ಚಕ್ರದಲ್ಲಿ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಪರೀಕ್ಷೆ ಕಲಿಕೆಯ ಅರಿವು
+- **ಅಪಾಯ ಮೌಲ್ಯಮಾಪನ**: ಪ್ರವೇಶ ನಿಯಮ ಪಾಲನೆಯ ಕಾನೂನು, ವ್ಯವಹಾರ ಮತ್ತು ನೈತಿಕ ಪರಿಣಾಮದ ಕುರಿತು ಮೆಲುಕು
+
+**🌍 ಒಳಗೊಂಡ ವಿನ್ಯಾಸ ಮನೋಭಾವ:**
+- **ಬಳಕೆದಾರ ಅನುಭಾವ**: ವೈವಿಧ್ಯಮಯ ಬಳಕೆದಾರರ ಅಗತ್ಯಗಳು ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನ ಸಂವಹನ ನಿರ್ಣಯಗಳು
+- **ವಿಶ್ವವ್ಯಾಪಿ ವಿನ್ಯಾಸ ತತ್ತ್ವಗಳು**: ಪ್ರವೇಶ ವಿನ್ಯಾಸವು ಬಲಹೀನರು ಮಾತ್ರವಲ್ಲದೆ ಎಲ್ಲ ಬಳಕೆದಾರರಿಗೂ ಉಪಯುಕ್ತ ಎಂಬ ಅರಿವು
+- **ನಿರಂತರ ಸುಧಾರಣೆ**: ನಿರಂತರ ಪ್ರವೇಶಯೋಗ್ಯತೆ ಮೌಲ್ಯಮಾಪನ ಮತ್ತು ವೃದ್ಧಿ ರೂಪರೇಖೆ
+- **ಪ್ರಚಾರ ಕೌಶಲ್ಯಗಳು**: ಮುಂದೆ Projectionಗಾ ಸ್ಥಳಗಳಿಗೆ ಪ್ರವೇಶ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪ್ರಚಾರ ಮಾಡುವ ವಿಶ್ವಾಸ
+
+**🚀 ವೃತ್ತಿ ಸಿದ್ಧತೆ:**
+ಈ ಹುದ್ದೆ ನಿಜ ಬದುಕಿನ ಪ್ರವೇಶ ಸಲಹಾ ಯೋಜನೆಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ, ಅದು ನಿಮಗೆ ಪೋರ್ಟ್‌ಫೋಲಿಯೋಗೆ ಯೋಗ್ಯ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ, ಇವುಗಳನ್ನು ತೋರಿಸುತ್ತದೆ:
+- ಸಕಾಲಿಕ ಸಮಸ್ಯೆ ಪರಿಹಾರ ವಿಧಾನ
+- ತಾಂತ್ರಿಕ ವಿವರಗಳು ಮತ್ತು ವ್ಯವಹಾರ ಪರಿಣಾಮ ಎರಡಕ್ಕೂ ಗಮನ
+- ಸಂಕೀರ್ಣ ತಾಂತ್ರಿಕ ಕಲ್ಪನೆಗಳ ಸ್ಪಷ್ಟ ಸಂವಹನ
+- ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಕಾನೂನು ಮತ್ತು ನೈತಿಕ ಹೊಣೆಗಾರಿಕೆಗಳ ಅರಿವು
+
+ಪೂರ್ಣಗೊಂಡ ನಂತರ, ನೀವು ಯಾವುದೇ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಪಾತ್ರದಲ್ಲಿ ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಉಪಕ್ರಮಗಳಿಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಕೊಡುಗೆ ನೀಡಲು ಮತ್ತು ಸಮಗ್ರ ವಿನ್ಯಾಸ ಅಭ್ಯಾಸಗಳ ಪರ ಪ್ರಚಾರ ಮಾಡಲು ಸಜ್ಜಾಗಿರುತ್ತೀರಿ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿರಾಕರಣೆ**:  
+ಈ ದಾಖಲೆ AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಿಖರತೆಯಿಗಾಗಿ ನಾವು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಕ್ರಿಯ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸ್ಪಷ್ಟತೆಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆ ಅಧಿಕೃತ ಸ್ರೋತವಾಗಿದೆ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಅತ್ಯಾವಶ್ಯಕ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುವುದು. ಈ ಭಾಷಾಂತರದಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥ ಅಥವಾ ತಾರತಮ್ಯದ ಜವಾಬ್ದಾರಿಯನ್ನು ನಾವು ಹೊತ್ತೂಕೊಳ್ಳುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/1-getting-started-lessons/README.md

@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "770d9f83dddc841c19f210dee5fe0712",
+  "translation_date": "2026-01-08T11:40:34+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "kn"
+}
+-->
+# ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಪ್ರಾರಂಭ
+
+ಈ ಪಠ್ಯದ ವಿಭಾಗದಲ್ಲಿ, ವೃತ್ತಿಪರ ಡೆವೆಲಪರ್ ಆಗಲು ಮುಖ್ಯವಾದ ಪ್ರಾಜೆಕ್ಟ್ ಆಧಾರಿತವಲ್ಲದ ಕಲ್ಪನೆಗಳಿಗೆ ಪರಿಚಯ ಮಾಡಲಾಗುತ್ತದೆ.
+
+### ವಿಷಯಗಳು
+
+1. [ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ಮತ್ತು ವ್ಯಾಪಾರದ ಉಪಕರಣಗಳ ಪರಿಚಯ](1-intro-to-programming-languages/README.md)
+2. [GitHub ಗೆ ಪರಿಚಯ](2-github-basics/README.md)
+3. [ಸಾಧ್ಯತೆಯ ಮೂಲಭೂತಾಂಶಗಳು](3-accessibility/README.md)
+
+### ಕ್ರೆಡಿಟ್ಸ್
+
+ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ಮತ್ತು ವ್ಯಾಪಾರದ ಉಪಕರಣಗಳ ಪರಿಚಯವನ್ನು ♥️ ಜೊತೆಗೆ ಬರೆದವರು [ಜೆಸ್ಮಿನ್ ಗ್ರೀನವೇ](https://twitter.com/paladique)
+
+GitHub ಗೆ ಪರಿಚಯವನ್ನು ♥️ ಜೊತೆಗೆ ಬರೆದವರು [ಫ್ಲೋರ್ ಡ್ರೀಸ್](https://twitter.com/floordrees)
+
+ಸಾಧ್ಯತೆಯ ಮೂಲಭೂತಾಂಶಗಳನ್ನು ♥️ ಜೊತೆಗೆ ಬರೆದವರು [ಕ್ರಿಸ್ಟೋಫರ್ ಹರಿಸನ್](https://twitter.com/geektrainer)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿರಾಕರಣೆ**:
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗೆ ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದೆಂದು ದಯವಿಟ್ಟು ಗಮನವಿರಲಿ. ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅದರ ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿ ಪ್ರಾಮಾಣಿಕ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಗಳಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು   
+ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆಗಳಿಗೆ ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗಿದ್ದೇವೆ ಅಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/2-js-basics/1-data-types/README.md

@@ -0,0 +1,619 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "672b0bb6e8b431075f3bdb7130590d2d",
+  "translation_date": "2026-01-08T12:40:07+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "kn"
+}
+-->
+# ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲತತ್ವಗಳು: ಡೇಟಾ ಪ್ರಕಾರಗಳು
+
+![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.kn.png)  
+> ಪರಿಚಿತ್ರಣ: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+```mermaid
+journey
+    title ನಿಮ್ಮ JavaScript ಡೇಟಾ ಪ್ರಕಾರಗಳ ಸಾಹಸ
+    section ಆಧಾರ
+      ಯೋಜನೆಗಳು ಮತ್ತು ಸ್ಥಿರಾಂಕಗಳು: 5: You
+      ಘೋಷಣಾ ಸಾಹಿತ್ಯ: 4: You
+      ನಿಯೋಜನೆ ಕಲ್ಪನೆಗಳು: 5: You
+    section ಮೂಲ ಪ್ರಕಾರಗಳು
+      ಸಂಖ್ಯೆಗಳು ಮತ್ತು ಗಣಿತ: 4: You
+      ಸ್ಟ್ರಿಂಗ್‌ಗಳು ಮತ್ತು ಪಠ್ಯ: 5: You
+      ಬೂಲಿಯನ್‌ಗಳು ಮತ್ತು ತರ್ಕ: 4: You
+    section ಜ್ಞಾನವನ್ನು ಅನ್ವಯಿಸಿ
+      ಪ್ರಕಾರ ಪರಿವರ್ತನೆ: 4: You
+      ನಿಜ ಜೀವನ ಉದಾಹರಣೆಗಳು: 5: You
+      ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು: 5: You
+```  
+ಡೇಟಾ ಪ್ರಕಾರಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಮೂಲಭೂತ ತತ್ವಗಳಲ್ಲಿ ಒಂದಾಗಿದ್ದು, ನೀವು ಬರೆಯುವ ಪ್ರತಿಯೊಂದು ಕಾರ್ಯಕ್ರಮದಲ್ಲೂ ನೀವು ಅವುಗಳನ್ನು ಎದುರಿಸುವಿರಿ. ಡೇಟಾ ಪ್ರಕಾರಗಳನ್ನು ಪ್ರಾಚೀನ ಅಲೆಕ್ಸಾಂಡ್ರಿಯಾ ಗ್ರಂಥಗಾರರು ಬಳಸಿದ ಫೈಲಿಂಗ್ ವ್ಯವಸ್ಥೆಯಂತೆ ಪರಿಗಣಿಸಿ – ಅವರೆಲ್ಲಾ ಕವಿತೆ, ಗಣಿತ ಮತ್ತು ಇತಿಹಾಸ ಸಂಬಂಧಿತ ವರದಿಗಳಿರುವ ಸ್ಕ್ರೋಲ್ಗಳಿಗೆ ವಿಶಿಷ್ಟ ಸ್ಥಳಗಳನ್ನು ಹೊಂದಿದ್ದರು. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿವಿಧ ರೀತಿಯ ಡೇಟಾಗಾಗಿ ವಿಭಿನ್ನ ವರ್ಗಗಳನ್ನು ಹೊಂದಿದ್ದು, ಮಾಹಿತಿ ಸಂರಚಿಸಲು ಇದೇ ರೀತಿಯ ವ್ಯವಸ್ಥೆಯನ್ನು ಹೊಂದಿದೆ.
+
+ಈ ಪಾಠದಲ್ಲಿ, ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಮುಖ್ಯ ಡೇಟಾ ಪ್ರಕಾರಗಳನ್ನು ಅನ್ವೇಷಿಸುವೆವು. ಸಂಖ್ಯೆಗಳು, ಪಠ್ಯ, ಸತ್ಯ/ಅಸತ್ಯ ಮೌಲ್ಯಗಳ ಹಿಂತಿಕ್ಕುವಿಕೆ ಹೇಗೆ ಮಾಡಬೇಕು ಎಂದು ನೀವು ಕಲಿಯುತ್ತೀರಿ ಮತ್ತು ಸರಿಯಾದ ಪ್ರಕಾರ ಆಯ್ಕೆ ಮಾಡುವುದು ನಿಮ್ಮ ಕಾರ್ಯಕ್ರಮಗಳಿಗೆ ಕಟ್ಟುನಿಟ್ಟಾಗಿರುವುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ. ಈ ತತ್ವಗಳು ಮೊದಲಿಗೆ ಅಸ್ಥಿರವಾಗಿರಬಹುದು, ಆದರೆ ಅಭ್ಯಾಸದೊಂದಿಗೆ ಅವು ಪ್ರಾಕೃತಿಕವಾಗುತ್ತವೆ.
+
+ಡೇಟಾ ಪ್ರಕಾರಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದರಿಂದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಉಳಿದ ವಿಷಯಗಳು ಸ್ಪಷ್ಟವಾಗುತ್ತವೆ. ಕಟ್ಟಡವಾಸ್ತುಕಾರರು ಕೀರ್ಚ್ಯ ವಿಚಾರಿಸುವ ಮುಂಚೆ ಬರುವ ವಿವಿಧ ನಿರ್ಮಿತ ಸಾಮಗ್ರಿಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾಗಿರುವಂತೆ, ಈ ಮೂಲಭೂತಾಂಶಗಳು ನೀವು ಮುಂದೆ ನಿರ್ಮಿಸುವ ಎಲ್ಲದಿಗೂ ಬೆಂಬಲ ನೀಡುತ್ತವೆ.
+
+## ಪಾಠದ ಪೂರ್ವಪ್ರಶ್ನೆಯು
+
+[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/)  
+
+ಈ ಪಾಠವು ಜಾಲತಾಣದಲ್ಲಿ ಪರಸ್ಪರ ಕ್ರಿಯಾತ್ಮಕತೆಯನ್ನು ಒದಗಿಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಮೂಲಭೂತಾಂಶಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
+
+> ನೀವು ಈ ಪಾಠವನ್ನು [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) ನಲ್ಲಿ ಕೂಡ ಪಡೆಯಬಹುದು!
+
+[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
+
+[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
+
+> 🎥 ಬದಲಿಗೆ ಉಪರಿರುವ ಚಿತ್ರಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ, ವೈವಿಧ್ಯಗಳು ಮತ್ತು ಡೇಟಾ ಪ್ರಕಾರಗಳ ಬಗ್ಗೆ ವಿಡಿಯೋಗಳನ್ನು ವೀಕ್ಷಿಸಿ
+
+ದಾರಿಬದ್ಧವಾಗಿ ವ್ಯತ್ಯಯಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ತುಂಬುವ ಡೇಟಾ ಪ್ರಕಾರಗಳಿಂದ ಪ್ರಾರಂಭಿಸೋಣ!
+
+```mermaid
+mindmap
+  root((JavaScript ಡೇಟಾ))
+    Variables
+      let myVar
+      const PI = 3.14
+      var oldStyle
+    Primitive Types
+      number
+        42
+        3.14
+        -5
+      string
+        "ಹಲೋ"
+        'ಲೋಕ'
+        `ಟೆಂಪ್ಲೇಟ್`
+      boolean
+        ತರ್ಮಾನ
+        ಅಸುಳ್ಳು
+      undefined
+      null
+    Operations
+      Arithmetic
+        + - * / %
+      String Methods
+        concatenation
+        template literals
+      Type Conversion
+        implicit
+        explicit
+```  
+## ವ್ಯತ್ಯಯಗಳು
+
+ವ್ಯತ್ಯಯಗಳು ಪ್ರೋಗ್ರಾಮ್ ರಚನೆಯಲ್ಲಿ ಮೂಲಭೂತ ಕಟ್ಟಡ ಬ್ಲಾಕ್‌ಗಳಾಗಿವೆ. ಮಧ್ಯಯುಗದ ರಸಾಯನಶಾಸ್ತ್ರಜ್ಞರು ವಿವಿಧ ಪದಾರ್ಥಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಉಪಯೋಗಿಸಿದ ಲೇಬಲ್ ಸಿಕ್ಕಿದ ಜಾರಿನಂತೆ, ವ್ಯತ್ಯಯಗಳು ನಿಮಗೆ ಮಾಹಿತಿಯನ್ನು ಸಂಗ್ರಹಿಸಲು ಮತ್ತು ಅದಕ್ಕೆ ವಿವರಣಾತ್ಮಕ ಹೆಸರು ನೀಡಲು ಅವಕಾಶ ನೀಡುತ್ತವೆ, ಇದರಿಂದ ನೀವು ನಂತರ ಅದನ್ನು ಉಲ್ಲೇಖಿಸಬಹುದು. ಯಾರಾದರೂ ವಯಸ್ಸನ್ನು ನೆನಪಿಡಬೇಕೆ? ಅದನ್ನು `age` ಎಂಬ ವ್ಯತ್ಯಯದಲ್ಲಿ ಸಂರಕ್ಷಿಸಿ. ಬಳಕೆದಾರರ ಹೆಸರನ್ನು ಹೋಲಿಸಬೇಕೆ? ಅದನ್ನು `userName` ಎಂಬ ವ್ಯತ್ಯಯದಲ್ಲಿ ಇರಿಸಿ.
+
+ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ವ್ಯತ್ಯಯಗಳನ್ನು ಸೃಷ್ಟಿಸುವ ಆಧುನಿಕ ವಿಧಾನವನ್ನು ಮೇಲೆ ಗಮನ ಹರಿಸುವೆವು. ನೀವು ಇಲ್ಲಿ ಕಲಿಯುವ ತಂತ್ರಗಳು ಭಾಷೆಯ ಮಾನ್ಯತೆ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳ ವರ್ಷಗಳ ಪ್ರದರ್ಶನವಾಗಿದೆ.
+
+ವ್ಯತ್ಯಯವನ್ನು ರಚಿಸುವ ಹಾಗೂ ** اعلام ** (ಪ್ರಕಟಿಸುವ) ರೀತಿ ಈ ಕೆಳಗಿನ ರೂಪದಲ್ಲಿ ಇರುತ್ತದೆ **[ಕೀವರ್ಡ್] [ಹೆಸರು]**. ಇದು ಎರಡು ಭಾಗಗಳಿಂದ ಕೂಡಿದೆ:
+
+- **ಕೀವರ್ಡ್**. ಬದಲಾಗಬಹುದಾದ ವ್ಯತ್ಯಯಗಳಿಗೆ `let` ಬಳಸಿ, ಮತ್ತು ಸ್ಥಿರ ಮೌಲ್ಯಗಳಿಗೆ `const` ಬಳಸಿ.
+- **ವ್ಯತ್ಯಯದ ಹೆಸರು**, ಇದು ನೀವು ಸ್ವತಃ ಆಯ್ಕೆಮಾಡಿದ ವಿವರಣಾತ್ಮಕ ಹೆಸರು.
+
+✅ ES6 ನಲ್ಲಿ ಪರಿಚಯಿಸಲ್ಪಟ್ಟ `let` ಕೀವರ್ಡ್ ನಿಮ್ಮ ವ್ಯತ್ಯಯಕ್ಕೆ ಒಂದು _ಬ್ಲಾಕ್ ಸ್ಕೋಪ್_ ಅನ್ನು ನೀಡುತ್ತದೆ. ಹಳೆಯ `var` ಕೀವರ್ಡ್ ಬದಲಿಗೆ `let` ಅಥವಾ `const` ಬಳಸಬೇಕೆಂದು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಮುಂದಿನ ಭಾಗಗಳಲ್ಲಿ ನಾವು ಬ್ಲಾಕ್ ಸ್ಕೋಪ್ಗಳನ್ನು ಹೆಚ್ಚು ವಿವರದಿಂದ ಪರಿಶೀಲಿಸೋಣ.
+
+### ಕಾರ್ಯ - ವ್ಯತ್ಯಯಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದು
+
+1. **ವ್ಯತ್ಯಯವನ್ನು ಪ್ರಕಟಿಸಿ**. ನಮ್ಮ ಮೊದಲ ವ್ಯತ್ಯಯವನ್ನು ರಚಿಸುವುದರಿಂದ ಪ್ರಾರಂಭಿಸೋಣ:
+
+    ```javascript
+    let myVariable;
+    ```
+  
+   **ಇದು ಏನು ಸಾಧಿಸುತ್ತದೆ:**
+   - ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗೆ `myVariable` ಎಂದು ಒಂದು ಸಂಗ್ರಹಸ್ಥಳವನ್ನು ರಚಿಸಲು ಹೇಳುತ್ತದೆ
+   - ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಈ ವ್ಯತ್ಯಯಕ್ಕೆ ಮೆಮೊರಿಯಲ್ಲಿ ಸ್ಥಳವನ್ನು ಮೀಸಲಿಡುತ್ತದೆ
+   - ಈ ಸಮಯದಲ್ಲಿ ವ್ಯತ್ಯಯದ ಮೌಲ್ಯವಿಲ್ಲ (ಅನಿರ್ಧಿಷ್ಟ)
+
+2. **ಅದಕ್ಕೆ ಮೌಲ್ಯ ನೀಡಿ**. ಈಗ ನಮ್ಮ ವ್ಯತ್ಯಯದಲ್ಲಿ ಯಾವುದಾದರೂ ಮೌಲ್ಯವನ್ನು ಇರಿಸೋಣ:
+
+    ```javascript
+    myVariable = 123;
+    ```
+  
+   **ನಿಯುಕ್ತಿಯ ಕಾರ್ಯಪದ್ಧತಿ:**
+   - `=` ನಿರುತ್ತರಿಕಾರಕವು 123 ಎಂಬ ಮೌಲ್ಯವನ್ನು ನಮಗೆ ನೀಡಿದ ವ್ಯತ್ಯಯಕ್ಕೆ ನಿಯೋಜಿಸುತ್ತದೆ
+   - ವ್ಯತ್ಯಯ ಈಗ ಅನಿರ್ಧಿಷ್ಟದಿಂದ ಈ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದೆ
+   - ನೀವು `myVariable` ಬಳಸಿ ಕಾರ್ಯಕ್ರಮದಲ್ಲಿ ಈ ಮೌಲ್ಯವನ್ನು ಉಲ್ಲೇಖಿಸಬಹುದು
+
+   > ಟಿಪ್ಪಣಿ: ಇಲ್ಲಿ `=` ಬಳಸುವವು ಎಂದರೆ 'ನಿಯೋಜನೆ ನಿರುತ್ತರಿಕಾರಕ'ರಿಂದ ಮೌಲ್ಯವೊಂದು ವ್ಯತ್ಯಯಕ್ಕೆ ನೀಡುವ ಕಾರ್ಯ. ಇದು ಸಮತೆ舟 ಸೂಚಿಸುವುದಿಲ್ಲ.
+
+3. **ಸಮಜದಾರಿಯಾದ ಕ್ರಮ ಆಕ್ರಮಿಸಿ**. ಆ ಮರಳಿ, ಆ ಎರಡು ಹಂತವನ್ನು ಒಂದೇ Statement ನಲ್ಲಿ ವಿಂಗಡಿಸೋಣ:
+
+    ```javascript
+    let myVariable = 123;
+    ```
+  
+    **ಈ ವಿಧಾನ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ:**
+    - ನೀವು ವ್ಯತ್ಯಯವನ್ನು ಪ್ರಕಟಿಸುತ್ತಿದ್ದೀರಿ ಮತ್ತು ಮೌಲ್ಯವನ್ನು ನಿಯೋಜಿಸುತ್ತಿದ್ದೀರಿ
+    - ಇದು ಅಭಿವೃದ್ಧಿಗಾರರ ನಡುವೆ ಮಾನ್ಯ ಮಾರ್ಗವಾಗಿದೆ
+    - ಸ್ವಚ್ಛತೆ ಉಳಿಸಿಕೊಂಡು ಕೋಡ್ ಉದ್ದವನ್ನು ಕಡಿಮೆಮಾಡುತ್ತದೆ
+
+4. **ನಿಮ್ಮ ಮನಸ್ಸು ಬದಲಾಯಿಸಿ**. ಬೇರೆ ಸಂಖ್ಯೆ ಸಂಗ್ರಹಿಸಲು ಬಯಸಿದರೆ ಏನು?
+
+   ```javascript
+   myVariable = 321;
+   ```
+  
+   **ಪುನಃ ನಿಯೋಜನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+   - ಈಗ ವ್ಯತ್ಯಯವು 123 ಬದಲಾಗಿ 321 ಹೊಂದಿದೆ
+   - ಹಿಂದಿನ ಮೌಲ್ಯ ಬದಲಾಗುತ್ತದೆ – ವ್ಯತ್ಯಯಗಳು ಒಂದೇ ಸಮಯದಲ್ಲಿ ಒಬ್ಬ ಮೌಲ್ಯವನ್ನಷ್ಟೇ ಸಂಗ್ರಹಿಸುತ್ತವೆ
+   - ಈ ಬದಲಾಯಿಸಬಹುದಾದ ಸ್ವಭಾವವು `let` ನೊಂದಿಗೆ ಪ್ರಕಟಿಸಲ್ಪಡುವ ವ್ಯತ್ಯಯಗಳ ಪ್ರಮುಖ ಲಕ್ಷಣ
+
+   ✅ ಪ್ರಯತ್ನಿಸಿ! ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬರೆಯಬಹುದು. ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಡೆವಲಪರ್ ಟೂಲ್ಸ್ಗೆ ಹೋಗಿ. ಕಾನ್ಸೋಲಿನಲ್ಲಿ `let myVariable = 123` ಎಂದು ಟೈಪ್ ಮಾಡಿ, ರಿಟರ್ನ್ ಒತ್ತಿ, ನಂತರ `myVariable` ಟೈಪ್ ಮಾಡಿ. ಏನಾಗುತ್ತದೆ ನೋಡಿ? ಮುಂದಿನ ಪಾಠಗಳಲ್ಲಿ ಈ ತತ್ವಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚು ಕಲಿಯಲು ಸಿಗುತ್ತದೆ.
+
+### 🧠 **ವ್ಯತ್ಯಯಗಳ ನಿಪುಣತೆ ಪರಿಶೀಲನೆ: ಸ್ವಾಪ್ತರಾಗು**
+
+**ನೀವು ವ್ಯತ್ಯಯಗಳ ಬಗ್ಗೆ ಹೇಗೆ ಭಾವಿಸುತ್ತಿದ್ದೀರೆನ್ನೋ ನೋಡಿ:**
+- ವ್ಯತ್ಯಯವನ್ನು ಪ್ರಕಟಿಸುವುದು ಮತ್ತು ಮೌಲ್ಯವನ್ನು ನಿಯೋಜಿಸುವ ನಡುವೆ ವ್ಯತ್ಯಾಸವನ್ನು ವಿವರಣೆ ಮಾಡಬಲ್ಲೀರಾ?
+- ಪ್ರತಿ ನೀವು ಒಂದು ವ್ಯತ್ಯಯವನ್ನು ಪ್ರಕಟಿಸುವ ಮೊದಲು ಪ್ರಯೋಗಿಸಲು ಯತ್ನಿಸಿದರೆ ಏನಾಗುತ್ತದೆ?
+- ಯಾವಾಗ ನೀವು `let` ಅನ್ನು ವ್ಯತ್ಯಯಕ್ಕೆ `const` ಬದಲಿಗೆ ಆಯ್ಕೆಮಾಡುತ್ತೀರಿ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> Declared: let myVar
+    Declared --> Assigned: myVar = 123
+    Assigned --> Reassigned: myVar = 456
+    Assigned --> [*]: ಚರ ಪಟ್ಟಿದೆ!
+    Reassigned --> [*]: ಮೌಲ್ಯವನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ
+    
+    note right of Declared
+        ಚರ ಹೊಂದಿದೆಯಾದರೂ
+        ಮೌಲ್ಯವಿಲ್ಲ (ಅನಿರ್ಬಂಧಿತ)
+    end note
+    
+    note right of Assigned
+        ಚರ ಹೊಂದಿದೆ
+        ಮೌಲ್ಯ 123
+    end note
+```  
+> **ತ್ವರಿತ ಸಲಹೆ**: ವ್ಯತ್ಯಯಗಳನ್ನು ಲೇಬಲ್ ಇರುವ ಸಂಗ್ರಹದ ಬಾಕ್ಸ್‌ಗಳಂತೆ ಭಾವಿಸಿ. ನೀವು ಬಾಕ್ಸ್ ರಚಿಸುತ್ತಿದ್ದೀರಿ (`let`), ಅದರಲ್ಲಿ ಏನಾದರೂ ಇಡುತ್ತೀರಿ (`=`), ಮತ್ತು ಬೇರೆ ವೇಳೆ ಅದರ ಒಳಗಿನ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸಬಹುದು!
+
+## ಸ್ಥಿರಾಂಕಗಳು
+
+ಕೆಲವೊಮ್ಮೆ ಕಾರ್ಯಕ್ರಮ ನಿರ್ವಹಣೆಯ ಸಮಯದಲ್ಲಿ ಎಂದಿಗೂ ಬದಲಾಗದೆ ಇರಬೇಕಾದ ಮಾಹಿತಿಯನ್ನು ಸಂಗ್ರಹಿಸಬೇಕಾಗುತ್ತದೆ. ಸ್ಥಿರಾಂಕಗಳನ್ನು ಪ್ರಾಚೀನ ಗ್ರೀಸ್‌ನ ಯೂಕ್ಲಿಡ್ ಸ್ಥಾಪಿಸಿದ ಗಣಿತ ತತ್ವಗಳಂತೆ ಪರಿಗಣಿಸಿ – ಒಮ್ಮೆ ತೋರಿಸಿಕೊಂಡು ದಾಖಲಾಗಿದೆ ಎಂದರೆ ಮುಂದಿನ ಸಂಧರ್ಭಕ್ಕೆ ಸ್ಥಿರವಾಗಿ ಉಳಿದಿವೆ.
+
+ಸ್ಥಿರಾಂಕಗಳು ವ್ಯತ್ಯಯಗಳಂತೆ ಕೆಲಸಮಾಡುತ್ತವೆ, ಆದರೆ ಮಹತ್ವದ ನಿರ್ಬಂಧವೊಂದಿದೆ: ಒಮ್ಮೆ ಅವುಕ್ಕೆ ಮೌಲ್ಯ ನೀಡಿದಾಗ, ಅದನ್ನು ಬದಲಾಯಿಸಲಾಗುವುದಿಲ್ಲ. ಈ ಅಚಲತೆ ನಿಮ್ಮ ಕಾರ್ಯಕ್ರಮದಲ್ಲಿ ಪ್ರಮುಖ ಮೌಲ್ಯಗಳಿಗೆ ತಪ್ಪು ಬದಲಾವಣೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
+
+ಸ್ಥಿರಾಂಕಗಳನ್ನು ಪ್ರಕಟಿಸುವುದು ಮತ್ತು ಪ್ರಾರಂಭಿಸುವುದು ವ್ಯತ್ಯಯಗಳಿಗೆ ಹೋಲಿಕೆಮಾಡಿದಾಗ ಯಥೇಚ್ಛವಾಗಿ ಇರುತ್ತದೆ, ಆದರೆ ಕೀವರ್ಡ್ `const` ಆಗಿರುತ್ತವೆ. ಸ್ಥಿರಾಂಕಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಎಲ್ಲಾ ಅಕ್ಷರಗಳು ದೊಡ್ಡಕ್ಷರಗಳಾದ ಹೆಸರಿನಿಂದ ಪ್ರಕಟಿಸಲಾಗುತ್ತವೆ.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+  
+**ಈ ಕೋಡ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- `MY_VARIABLE` ಎಂಬ ಸ್ಥಿರಾಂಕವನ್ನು ಮೌಲ್ಯ 123 ರೊಂದಿಗೆ ರಚಿಸುತ್ತದೆ
+- ಸ್ಥಿರಾಂಕಗಳಿಗೆ ಹೆಚ್ಚುವರಿಯಾಗಿ ದೊಡ್ಡಕ್ಷರಗಳ ಹೆಸರಿನ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಕೆ ಮಾಡುತ್ತದೆ
+- ಈ ಮೌಲ್ಯಕ್ಕೆ ಯಾವುದೇ ಭವಿಷ್ಯದ ಬದಲಾವಣೆಗಳನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ
+
+ಸ್ಥಿರಾಂಕಗಳಿಗೆ ಎರಡು ಪ್ರಮುಖ ನಿಯಮಗಳಿವೆ:
+
+- **ನಿಮಗೆ ಅವುಗಳಿಗೆ ಕೂಡಲೇ ಮೌಲ್ಯ ನೀಡಬೇಕಾಗುತ್ತದೆ** – ಖಾಲಿ ಸ್ಥಿರಾಂಕ ಬೇಡ!
+- **ನೀವು ಆ ಮೌಲ್ಯವನ್ನು ಎಂದಿಗೂ ಬದಲಾಯಿಸಬಾರದು** – ನೀವು ಪ್ರಯತ್ನಿಸಿದರೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಉದ್ಧಟಿಸಿಬಿಡುತ್ತದೆ. ಇದನ್ನೂ ನೋಡೋಣ:
+
+   **ಸರಳ ಮೌಲ್ಯ** - ಕೆಳಗಿನವು ಅಂಗೀಕಾರಾರ್ಹವಿಲ್ಲ:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // ಅಂಗೀಕಾರಾರ್ಹವಿಲ್ಲ
+      ```
+
+   **ನಿಮಗೆ ನೆನಪಿಸುವುದು:**
+   - ಸ್ಥಿರಾಂಕದ ಮೌಲ್ಯವನ್ನು ಮರುಹೊಂದಿಸಲು ಅವಕಾಶ ಇಲ್ಲದಿರುವುದು
+   - ಪ್ರಮುಖ ಮೌಲ್ಯಗಳನ್ನು ತಪ್ಪು ಬದಲಾವಣೆಗಳಿಂದ ರಕ್ಷಿಸುವುದು
+   - ನಿಮ್ಮ ಕಾರ್ಯಕ್ರಮದಲ್ಲಿ ಮೌಲ್ಯ ಸತತವಾಗಿರುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುವುದು
+ 
+   **ವಸ್ತು ಸೃಜನೆಯ ರಕ್ಷಣೆ** - ಕೆಳಗಿನವು ಅಂಗೀಕಾರಾರ್ಹವಿಲ್ಲ:
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // ಅಂಗೀಕಾರಾರ್ಹವಿಲ್ಲ
+      ```
+
+   **ಈ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+   - ಒಟ್ಟು ವಸ್ತುವನ್ನು ಹೊಸದಾಗಿ ಬದಲಾಯಿಸುವುದನ್ನು ತಡೆಹಿಡಿಯುತ್ತದೆ
+   - ಮೂಲ ವಸ್ತುಕ್ಕೆ ಇದ್ದ ಮಾಹಿತಿಯ ರಫ್ತಿಯನ್ನು ರಕ್ಷಿಸುತ್ತದೆ
+   - ಮೆಮೊರಿಯಲ್ಲಿ ವಸ್ತುವಿನ ಗುರುತು ಕಾಪಾಡುತ್ತದೆ
+
+    **ವಸ್ತು ಮೌಲ್ಯವನ್ನು ರಕ್ಷಿಸುವುದಿಲ್ಲ** - ಈ ಕೆಳಗಿನವು ಅಂಗೀಕಾರಾರ್ಹ:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // ಅಂಗೀಕಾರಾರ್ಹ
+      ```
+
+      **ಇಲ್ಲಿ ಏನಾಗುತ್ತದೆ ವಿವರಿಸುವುದು:**
+      - ವಸ್ತುವಿನ ಒಳಗಿನ ಗುಣಲಕ್ಷಣ ಮೌಲ್ಯ ಬದಲಾಗುತ್ತದೆ
+      - ವಸ್ತುವಿನ ಗುರುತು ಒಂದೇ ಹಾಗೆ ಇರುತ್ತದೆ
+      - ಗುರೂತ್ವದೊಳಗಿನ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು ಅದೆಂದು ಗುರುತು ಸ್ಥಿರವಾಗಿರುತ್ತದೆ ಎಂದು ತೋರಿಸುತ್ತದೆ
+
+   > ಗಮನಿಸಿ, `const` ಎಂದರೆ ಗುರುತನ್ನು ಮರುಹೊಂದಿಸುವುದರಿಂದ ರಕ್ಷಿಸಿ ನೀಡುತ್ತದೆ. ಮೌಲ್ಯ _ಅಚಲ_ ಅಲ್ಲವೆ ಮತ್ತು ಬದಲಾಯಿಸಬಹುದಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಅದು ಸಂಕೀರ್ಣ ನಿರ್ಮಾಣವಾಗಿದ್ದರೆ, ಉದಾಹರಣೆಗೆ ವಸ್ತು.
+
+## ಡೇಟಾ ಪ್ರಕಾರಗಳು
+
+ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಹಿತಿಯನ್ನು ವಿವಿಧ ವರ್ಗಗಳಾದ ಡೇಟಾ ಪ್ರಕಾರಗಳಲ್ಲಿ ಸಂಘಟಿಸುತ್ತದೆ. ಈ ತತ್ವವು ಪ್ರಾಚೀನ ಪಂಡಿತರ ಜ್ಞಾನ ವರ್ಗೀಕರಣದಂತೆ – ಅರಿಸ್ಟೋಟಲ್ ವ್ಯತ್ಯಾಸದ ತತ್ತ್ವಗಳನ್ನು ಪರಿಗಣಿಸಿ, ಕವಿತೆ, ಗಣಿತ ಮತ್ತು ನೈಸರ್ಗಿಕ ತತ್ವಶಾಸ್ತ್ರವನ್ನು ಸಮಾನವಾಗಿ ಮುಖ್ಯವಾಗಿ ಮಾಡಲಾರದಂತೆ ತಿಳಿಯುತ್ತಿದ್ದರು.
+
+ಡೇಟಾ ಪ್ರಕಾರಗಳಿಗೆ ಮಹತ್ವವಿರುವುದು, ಬೇರೆ ಬೆಳೆಗಳು ವಿಭಿನ್ನ ರೀತಿಯ ಮಾಹಿತಿಗೆ ಭಿನ್ನವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ವ್ಯಕ್ತಿಯ ಹೆಸರಿನಲ್ಲಿ ಗಣಿತ ಅಥವಾ ಗಣಿತ ಸಮೀಕರಣವನ್ನು ವರ್ಣಮರೆ ಪದ್ಧತಿಯಲ್ಲಿ ಬರೆಯಲು ಸಾಧ್ಯವಿಲ್ಲ, ಹಾಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರತಿ ಕಾರ್ಯಕ್ಕೆ ಸರಿಯಾದ ಡೇಟಾ ಪ್ರಕಾರವನ್ನು ಅವಲಂಬಿಸುತ್ತದೆ. ಇದರ ಅರಿವಿನಿಂದ ದೋಷಗಳನ್ನು ತಡೆಯಲು ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ವಿಶ್ವಾಸಾರ್ಹವಾಗಿಸುತ್ತದೆ.
+
+ವ್ಯತ್ಯಯಗಳು ಸಂಖ್ಯೆ ಮತ್ತು ಪಠ್ಯ ಮೊದಲಾದ ವಿವಿಧ ಮೌಲ್ಯಗಳನ್ನು ಸಂಗ್ರಹಿಸಬಹುದು. ಈ ವಿಭಿನ್ನ ಮೌಲ್ಯಗಳಿಗೆ ಸೇರಿದ ಪ್ರಕಾರಗಳನ್ನು **ಡೇಟಾ ಪ್ರಕಾರ** ಎಂದು ಕರೆಯುತ್ತಾರೆ. ಡೇಟಾ ಪ್ರಕಾರಗಳು ಸಂರಚನಾ ನಿರ್ವಹಣೆಯಲ್ಲಿ ಪ್ರಮುಖ ಪಾತ್ರ ವಹಿಸುತ್ತವೆ ಏಕೆಂದರೆ ಅವು ಪ್ರೋಗ್ರಾಮರ್ಸ್‌ಗೆ ಹೇಗೆ ಕೋಡ್ ಬರೆಯಬೇಕು ಮತ್ತು ಸಾಫ್ಟ್‌ವೇರ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸಬೇಕು ಎಂಬುದರಲ್ಲಿ ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ. ಇನ್ನೂ ಕೆಲವು ಡೇಟಾ ಪ್ರಕಾರಗಳ ವಿಶೇಷ ಲಕ್ಷಣಗಳಿವೆ, ಅವು ಮೌಲ್ಯದಲ್ಲಿ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ರೂಪಾಂತರಿಸಲು ಅಥವಾ ಹೊರತೆಗೆದುಕೊಂಡು ಉಪಯೋಗಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ.
+
+✅ ಡೇಟಾ ಪ್ರಕಾರಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೇಟಾ ಮೂಲತತ್ವಗಳೆಂದು ಕೂಡ ಕರೆಸಿಕೊಳ್ಳುತ್ತವೆ, ಏಕೆಂದರೆ ಇವು ಭಾಷೆಯಿಂದ ಒದಗಿಸಲಾಗುವ ಅತ್ಯಂತ ಕಡಿಮೆ ಮಟ್ಟದ ಡೇಟಾ ಪ್ರಕಾರಗಳು. 7 ಮೂಲತತ್ವಗಳ ಪ್ರಕಾರಗಳಿವೆ: ಸರಣಿ (string), ಸಂಖ್ಯೆ (number), ಬಿಗ್‌ಇಂಟ್ (bigint), ಬೂಲಿಯನ್ (boolean), ಅನಿರ್ಧಿಷ್ಟ (undefined), ಶೂನ್ಯ (null) ಮತ್ತು ಸಂಕೇತ (symbol). ಇವುಗಳ ಪ್ರತಿಯೊಂದು ಯಾವದನ್ನು ಪ್ರತಿನಿಧಿಸಬಹುದು ಎಂಬುದನ್ನು ನಿಮಗೆ ಕಲ್ಪನೆ ಮಾಡಿ. `zebra` ಎಂದರೆ ಏನು? `0` ಯಾ? `true` ಯಾ?
+
+### ಸಂಖ್ಯೆಗಳು
+
+ಸಂಖ್ಯೆಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಅತ್ಯಂತ ಸರಳ ಡೇಟಾ ಪ್ರಕಾರ. ನೀವು 42 ಮೊದಲನೆಯ ಪೂರ್ಣ ಸಂಖ್ಯೆ, 3.14 ಡಶಮಾಂಶ ಅಥವಾ -5 ಪ್ರತಿಕೂಲ ಸಂಖ್ಯೆಗಳನ್ನು ಬಳಸಿದ್ರೂ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅವುಗಳನ್ನು ಏಕಸಮಾನವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ.
+
+ನಮ್ಮ ಹಿಂದಿನ ವ್ಯತ್ಯಯ ನೆನಪಿದೆಯೇ? ನಾವು ಸಂಗ್ರಹಿಸಿದ 123 ನಂಬರು ಡೇಟಾ ಪ್ರಕಾರ ಎನ್ನಬಹುದು:
+
+```javascript
+let myVariable = 123;
+```
+  
+**ಮುಖ್ಯ ಲಕ್ಷಣಗಳು:**
+- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯಗಳನ್ನು ಗುರುತಿಸುತ್ತದೆ
+- ನೀವು ಈ ವ್ಯತ್ಯಯಗಳೊಂದಿಗೆ ಗಣಿತ ಕಾರ್ಯಗಳನ್ನು ನೆರವೇರಿಸಬಹುದು
+- ಸ್ಪಷ್ಟವಾದ ಪ್ರಕಾರ ಪ್ರಕಟಣೆಯ ಅಗತ್ಯವಿಲ್ಲ
+
+ವ್ಯತ್ಯಯಗಳು ಎಲ್ಲಾ ವಿಧದ ಸಂಖ್ಯೆಗಳನ್ನು, ಡಶಮಾಂಶ ಮತ್ತು ಪ್ರತಿಕೂಲ ಸಂಖ್ಯೆಗಳನ್ನೂ ಸೇರಿಸಿಕೊಂಡು ಸಂಗ್ರಹಿಸಬಹುದು. ಸಂಖ್ಯೆಗಳು ಗಣಿತೀಯ ನಿರುತ್ತರಿಕಾರಕರೊಂದಿಗೆ ಕೂಡ ಬಳಸಬಹುದು, ಇವುಗಳನ್ನು ಮುಂದಿನ [ಅರ್ಥಮೆಟಿಕ್ ನಿರುತ್ತರಿಕಾರಕರು](../../../../2-js-basics/1-data-types) ವಿಭಾಗದಲ್ಲಿ ವಿವರಿಸಲಾಗಿದೆ.
+
+```mermaid
+flowchart LR
+    A["🔢 ಸಂಖ್ಯೆಗಳು"] --> B["➕ ಗುಣಾಕಾರ"]
+    A --> C["➖ ತೆಗೆದುಹಾಕುವುದು"]
+    A --> D["✖️ ಗುಣಾತ್ಮಕ"]
+    A --> E["➗ ಭಾಗಿಸುವುದು"]
+    A --> F["📊 ಉಳಿದ ಸಂಖ್ಯೆ %"]
+    
+    B --> B1["1 + 2 = 3"]
+    C --> C1["5 - 3 = 2"]
+    D --> D1["4 * 3 = 12"]
+    E --> E1["10 / 2 = 5"]
+    F --> F1["7 % 3 = 1"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```  
+### ಅರ್ಥಮೆಟಿಕ್ ನಿರುತ್ತರಿಕಾರಕರು
+
+ಅರ್ಥಮೆಟಿಕ್ ನಿರುತ್ತರಿಕಾರಕರು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಗಣಿತೀಯ ಮೌಲ್ಯವನ್ನು ಲೆಕ್ಕ ಹಾಕಲು ಅವಕಾಶ ನೀಡುತ್ತವೆ. ಈ ನಿರುತ್ತರಿಕಾರಕರು ಶತಮಾನಗಳ ಕಾಲ ಗಣಿತಜ್ಞರು ಉಪಯೋಗಿಸಿದ ಸಂಕೇತಗಳಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ – ಅಲ್ಖ್ವಾರಿಜ್ಮೀ ಮುಂತಾದ ಪಂಡಿತರ ಕಾರ್ಯಗಳಲ್ಲಿ ಕಂಡ ಬಂದ ವಿವರಣಾತ್ಮಕ ಗಣಿತ ಸಂಕೇತಗಳು.
+
+ನಿರುತ್ತರಿಕಾರಕರು ಪಾರಂಪಾಯಿಕ ಗಣಿತದಂತೆ: ಕೂಡಲೆ ಸೇರಿಸುವುದಕ್ಕೆ +, ಕಡಿತ ಮಾಡಲು -, ಗುಣಿಸಲು *, ವಿಭಜಿಸಲು / ಮುಂತಾದವು.
+
+ಅರ್ಥಮೆಟಿಕ್ ಕಾರ್ಯಗಳಲ್ಲಿ ಬಳಸಬೇಕಾದ ನಿರುತ್ತರಿಕಾರಕರ ಕೆಲವು ವಿಧಗಳು ಇವೆ, ಇವು ಕೆಳಕಂಡಂತೆ:
+
+| ಸಂಕೇತ | ವಿವರಣೆ                                                                   | ಉದಾಹರಣೆ                         |
+| ------ | ------------------------------------------------------------------------- | -------------------------------- |
+| `+`    | **ಸೇರಿ ಹಾಕುವುದು**: ಎರಡು ಸಂಖ್ಯೆಗಳ ಮೊತ್ತ ಲೆಕ್ಕಹಾಕುತ್ತದೆ                    | `1 + 2 // ನಿರೀಕ್ಷಿತ ಉತ್ತರ 3`      |
+| `-`    | **ಕಡಿತ**: ಎರಡು ಸಂಖ್ಯೆಗಳ ವ್ಯತ್ಯಾಸ ಲೆಕ್ಕಹಾಕುತ್ತದೆ                         | `1 - 2 // ನಿರೀಕ್ಷಿತ ಉತ್ತರ -1`     |
+| `*`    | **ಗುಣಾಕಾರ**: ಎರಡು ಸಂಖ್ಯೆಗಳ ಗುಣಾಕಾರ ಲೆಕ್ಕಹಾಕುತ್ತದೆ                      | `1 * 2 // ನಿರೀಕ್ಷಿತ ಉತ್ತರ 2`      |
+| `/`    | **ಭಾಗಿಸುವಿಕೆ**: ಎರಡು ಸಂಖ್ಯೆಗಳಾನ ಭಾಗದ ಫಲಿತಾಂಶ ಲೆಕ್ಕಹಾಕುತ್ತದೆ            | `1 / 2 // ನಿರೀಕ್ಷಿತ ಉತ್ತರ 0.5`    |
+| `%`    | **ಶೇಷ**: ಎರಡು ಸಂಖ್ಯೆಗಳ ವಿಭಾಜನೆಯ ಶೇಷ ಲೆಕ್ಕಹಾಕುತ್ತದೆ                     | `1 % 2 // ನಿರೀಕ್ಷಿತ ಉತ್ತರ 1`      |
+
+✅ ಪ್ರಯತ್ನಿಸಿ! ನಿಮ್ಮ ಬ್ರೌಸರಿನ ಕಾನ್ಸೋಲ್ನಲ್ಲಿ ಒಂದು ಅರ್ಥಮೆಟಿಕ್ ಕಾರ್ಯವನ್ನು ಮಾಡಿ. ಫಲಿತಾಂಶಗಳು ನಿಮಗೆ ಅಚ್ಚರಿಯಾಗುತ್ತವೆ ಎಂದು ನೋಡೋಣ?
+
+### 🧮 **ಗಣಿತ ಕೌಶಲ್ಯ ಪರಿಶೀಲನೆ: ಆತ್ಮವಿಶ್ವಾಸದಿಂದ ಲೆಕ್ಕ ಹಾಕುವುದು**
+
+**ನಿಮ್ಮ ಅರ್ಥಮೆಟಿಕ್ ತಿಳಿವಳಿಕೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+- `/` (ಭಾಗಿಸುವಿಕೆ) ಮತ್ತು `%` (ಶೇಷ) ನಡುವೆ ಯಾವ ವ್ಯತ್ಯಾಸವಿದೆ?
+- `10 % 3` ಯ ಸಂಖ್ಯೆ ಪೂರೈಸುವ ಮೊತ್ತ ಏನು ಎಂದು ಮುನ್ಸೂಚಿಸಿ? (ಗೈಡ್: ಅದು 3.33 ಅಲ್ಲ...)
+- ಶೇಷ ನಿರುತ್ತರಿಕಾರಕ ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ಗೆ ಯಾಕೆ ಉಪಯುಕ್ತವಾಗಬಹುದು?
+
+```mermaid
+pie title "ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಂಖ್ಯೆ ಕಾರ್ಯಾಚರಣೆಗಳ ಬಳಕೆ"
+    "ಸೇರಿಸಲು (+)" : 35
+    "ಕಳೆಯಲು (-)" : 20
+    "ಗುಣಿಸಲು (*)" : 20
+    "ಹಿಂದಿರುಗಿಸಿ (/)" : 15
+    "ಶೇಷ (%)" : 10
+```  
+> **ನೈಜ-ಜಗತ್ತಿನ ಅರಿವು**: ಶೇಷ ನಿರುತ್ತರಿಕಾರಕ (%) ಸಂಖ್ಯೆಗಳು ಜೋಡಿ/ಏಕಕ, ಮಾದರಿಗಳನ್ನು ರಚಿಸಿ ಅಥವಾ ಯಾದೃಚ್ಛಿಕ ಮಿತಿಗಳನ್ನು ಎಡ/ಬಲ ಆಗಿಸುವದು ಮೊದಲಾದ ಕಾರ್ಯಗಳಿಗೆಲ್ಲ ಸಂತೋಷ್ಟಕರ.
+
+### ಸರಣಿಗಳು (Strings)
+
+ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ಪಠ್ಯದ ಡೇಟಾಗಳನ್ನು ಸರಣಿಗಳೆಂದು ಪ್ರತಿನಿಧಿಸಲಾಗುತ್ತದೆ. "ಸರಣಿ" ಎಂಬ ಪದವು ಕ್ರಮವಾಗಿ ಅಕ್ಷರಗಳನ್ನು ಸರಣಿಯಾಗಿ ಜೋಡಿಸುವ ಕಲ್ಪನೆತಿಂದ ಬಂದಿದೆ, ಮಧ್ಯಯುಗದ ಮಠಗಳಲ್ಲಿ ಸ್ಕ್ರೈಬ್ಸ್ ತಮ್ಮ ಪಠ್ಯ ಲಿಪಿಗಳಲ್ಲಿ ಅಕ್ಷರಗಳನ್ನು ಸಂಯೋಜಿಸುವ ರೀತಿಯಂತೆ.
+
+ಸರಣಿಗಳು ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಮೂಲಮೂಲವಾಗಿವೆ. ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾದ ಪ್ರತಿಯೊಂದು ಪಠ್ಯ – ಬಳಕೆದಾರರ ಹೆಸರುಗಳು, ಬಟನ್ ಲೇಬಲ್‌ಗಳು, ದೋಷ ಸಂದೇಶಗಳು, ವಿಷಯಗಳು – ಸರಣಿ ಡೇಟಾದಂತೆ ನಿರ್ವಹಿಸಲಾಗುತ್ತವೆ. ಕಾರ್ಯಕಾರಿ ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್ಗಳನ್ನು ರಚಿಸುವ لاءِ ಸರಣಿಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು ಅವಶ್ಯಕ.
+
+ಸರಣಿಗಳು ನಾಗರಿಕ ಅಥವಾ ಡಬಲ್ ಕ್ವೋಟ್‌ನ ನಡುವಿನ ಅಕ್ಷರಗಳ ಸಂಗ್ರಹಗಳಾಗಿವೆ.
+
+```javascript
+'This is a string'
+"This is also a string"
+let myString = 'This is a string value stored in a variable';
+```
+  
+**ಈ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+- ಸರಣಿಗಳನ್ನು ನಿರ್ಧರಿಸಲು ಏಕರೂಪದ `'` ಅಥವಾ ಡಬಲ್ `" ` ಉಲ್ಲೇಖಗಳನ್ನು ಬಳಸುತ್ತದೆ
+- ಅಕ್ಷರಗಳು, ಸಂಖ್ಯೆಗಳು ಮತ್ತು ಸಂಕೇತಗಳನ್ನು ಹೊಂದಬಹುದಾದ ಪಠ್ಯ ಡೇಟಾ ಸಂಗ್ರಹಿಸುತ್ತದೆ
+- ನಂತರ ಬಳಕೆಗೆ ಸರಣಿಯ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯತ್ಯಯಗಳಿಗೆ ನಿಯೋಜಿಸುತ್ತದೆ
+- ಪಠ್ಯ ಮತ್ತು ವ್ಯತ್ಯಯ ಹೆಸರಿನ ವಿಭಿನ್ನತೆ ತಿಳಿಸಲು ಉಲ್ಲೇಖಗಳು ಅಗತ್ಯವಿದೆ
+
+ಸರಣಿಯನ್ನು ಬರೆಯುವಾಗ ಉಲ್ಲೇಖಗಳನ್ನು ಬಳಸುವುದು ಮೆಚ್ಚಿನದು, ಇಲ್ಲದಿದ್ದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇದನ್ನು ವ್ಯತ್ಯಯದ ಹೆಸರಂದು ಪರಿಗಣಿಸುತ್ತದೆ.
+
+```mermaid
+flowchart TD
+    A["📝 ಸ್ಟ್ರಿಂಗ್‌ಗಳು"] --> B["ಒಂದು ಉಲ್ಲೇಖಗಳು"]
+    A --> C["ಎರಡು ಉಲ್ಲೇಖಗಳು"]
+    A --> D["ಟೆಂಪ್ಲೇಟ್ ಲಿಟೆರಲ್ಸ್"]
+    
+    B --> B1["'Hello World'"]
+    C --> C1["\"Hello World\""]
+    D --> D1["`Hello \${name}`"]
+    
+    E["ಸ್ಟ್ರಿಂಗ್ ಕಾರ್ಯಾಚರಣೆಗಳು"] --> F["ಸಂಯೋಜನೆ"]
+    E --> G["ಟೆಂಪ್ಲೇಟ್ ಸೇರ್ಪಡೆ"]
+    E --> H["ಉದ್ದ ಮತ್ತು ವಿಧಾನಗಳು"]
+    
+    F --> F1["'Hello' + ' ' + 'World'"]
+    G --> G1["`Hello \${firstName} \${lastName}`"]
+    H --> H1["myString.length"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style D fill:#e8f5e8
+    style G fill:#e8f5e8
+```  
+### ಸರಣಿಗಳ ಫಾರ್ಮ್ಯಾಟಿಂಗ್
+
+ಸರಣಿ ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ನಿಮಗೆ ಪಠ್ಯ ಘಟಕಗಳನ್ನು ಸೇರಿಸಲು, ವ್ಯತ್ಯಯಗಳನ್ನು ಸೇರಿಸಿಕೊಳ್ಳಲು ಮತ್ತು ಕಾರ್ಯಕ್ರಮ ಸ್ಥಿತಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಡೈನಾಮಿಕ್ ವಿಷಯಗಳನ್ನು ರಚಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಈ ತಂತ್ರಜ್ಞಾನವು ಪಠ್ಯವನ್ನು ಕಾರ್ಯಕ್ರಮಕೌಶಲ್ಯದಿಂದ ರಚಿಸಲು ಪಥೋತ್ಪಾದನೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
+
+ಮತ್ತು ನೀವು ಹಲವು ಸರಣಿಗಳನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯ, ಇದನ್ನು ಜೋಡಣೆಯ (concatenation) ಪ್ರಕ್ರಿಯೆ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.
+ಎರಡೂ ಅಥವಾ ಹೆಚ್ಚು ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು **concatenate** ಮಾಡಲು, ಅಥವಾ ಅವುಗಳನ್ನು ಒಟ್ಟುಗೂಡಲು, `+` ಆಪರೇಟರ್ ಅನ್ನು ಬಳಸಿ.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //ನಮಸ್ಕಾರವಿಶ್ವ!
+myString1 + " " + myString2 + "!"; //ನಮಸ್ಕಾರ ವಿಶ್ವ!
+myString1 + ", " + myString2 + "!"; //ನಮಸ್ಕಾರ, ವಿಶ್ವ!
+```
+
+**ಹಂತ ಹಂತವಾಗಿ, ಇಲ್ಲಿ ಏನು ನಡೆಯುತ್ತಿದೆ:**
+- `+` ಆಪರೇಟರ್ ಬಳಸಿ ಬಹುಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು **ಒಟ್ಟುಗೂಡುತ್ತದೆ**
+- ಮೊದಲ ಉದಾಹರಣೆಯಲ್ಲಿ ಸ್ಥಳಗಳಿಲ್ಲದೆ ನೇರವಾಗಿ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು **ಜೋಡಿಸುತ್ತದೆ**
+- ಓದುವ ಮತ್ತಷ್ಟು ಸೌಕರ್ಯಕ್ಕಾಗಿ ಸ್ಟ್ರಿಂಗ್‌ಗಳ ನಡುವೆ ಖಾಲಿ ಸ್ಥಾನಗಳನ್ನಂತಹ `" "` **ಸೇರಿಸಿ**
+- ಸರಿಯಾದ ಸ್ವರೂಪಕ್ಕಾಗಿ ಕಮ್ಮಿಗಳು ಮುಂತಾದ ವ್ಯಾಕರಣ ಚಿಹ್ನೆಗಳನ್ನು **ಸೆರೆಹಾಕುತ್ತದೆ**
+
+✅ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ `1 + 1 = 2` ಆಗುತ್ತದೆ, ಆದರೆ `'1' + '1' = 11` ಆಗುವುದಕ್ಕೆ ಕಾರಣ ಏನು? ಇದು ಕುರಿತು ಯೋಚಿಸಿ. `'1' + 1` ಬಗ್ಗೆ ಏನು?
+
+**ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್** ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸ್ವರೂಪಗೊಳಿಸುವ ಮತ್ತೊಂದು ವಿಧಾನವಾಗಿದೆ, ಇದರಲ್ಲಿ ಕೋಟೇಶನ್ಗಳ ಬದಲು ಬ್ಯಾಕ್‌ಟಿಕ್ ಬಳಸಲಾಗುತ್ತದೆ. ಸಾಮಾನ್ಯ ಪಠ್ಯವಲ್ಲದ ಯಾವುದಾದರೂ ${ } ಎಂಬ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್‌ಗಳಲ್ಲಿ ಇರಬೇಕಾಗುತ್ತದೆ. ಇದರಲ್ಲಿ ಸ್ಟ್ರಿಂಗ್‌ಗಳಾದ ಯಾವುದೇ ಬದಲಾಗುವಗಳು ಸೇರಿವೆ.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //ನಮಸ್ಕಾರ ಪ್ರಪಂಚ!
+`${myString1}, ${myString2}!` //ನಮಸ್ಕಾರ, ಪ್ರಪಂಚ!
+```
+
+**ಪ್ರತಿಯೊಂದು ಭಾಗವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳೋಣ:**
+- ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್ ರಚಿಸಲು ಸಾಮಾನ್ಯ ಉಲ್ಲೇಖಗಳ ಬದಲು ಬ್ಯಾಕ್‌ಟಿಕ್ಸ್ `` ` `` ಅನ್ನು **ಬಳಸುತ್ತದೆ**
+- `${}` ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ ಬದಲಾಗುವಗಳನ್ನು ನೇರವಾಗಿ **ಒಳಗೊಂಡಿದೆ**
+- ಬರೆದಿರುವಂತೆ ಸ್ಥಾನಗಳನ್ನೂ ಸ್ವರೂಪವನ್ನೂ **ಮಾಹಿತಿ ಹಾಗೆ ಉಳಿಸಿಕೊಂಡಿದೆ**
+- ಬದಲಾಗುವಗಳೊಂದಿಗೆ ಸಂಕುಲ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಹೆಚ್ಚು ಸ್ವಚ್ಛವಾದ ವಿಧಾನವನ್ನು **ನೀಡುತ್ತದೆ**
+
+ನೀವು ಯಾವ ವಿಧಾನವನ್ನಾದರೂ ಬಳಸಬಹುದು, ಆದರೆ ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್ ಯಾವುದೇ ಖಾಲಿ ಸ್ಥಳಗಳನ್ನು ಮತ್ತು ಸಾಲು ಮುರಿತಗಳನ್ನು ಗೌರವಿಸುತ್ತವೆ.
+
+✅ ನಿಮಗೆ ಯಾವಾಗ ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ ಬಳಕೆ ಮಾಡಬೇಕು ಮತ್ತು ಸಾಮಾನ್ಯ ಸ್ಟ್ರಿಂಗ್ ಬಳಕೆ ಮಾಡಬೇಕು ಎಂದು ಯೋಚಿಸೋಣ?
+
+### 🔤 **ಸ್ಟ್ರಿಂಗ್ ಮಾಸ್ಟರಿ ಪರಿಶీలನೆ: ಪಠ್ಯ ಸಂಚಿಕೆ ನಂಬಿಕೆ**
+
+**ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗ್ ಕೌಶಲ್ಯವನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿ:**
+- `'1' + '1'` ಏಕೆ `2` ಅಲ್ಲದೆ `'11'` ಆಗುತ್ತದೆ ಎಂದು ತಿಳಿಸಬಹುದೇ?
+- ಯಾವ ಸ್ಟ್ರಿಂಗ್ ವಿಧಾನವು ನಿಮಗೆ ಹೆಚ್ಚು ಓದಲು ಸುಲಭವಾಗಿದೆ: ಸಂಚಿಕೆ ಅಥವಾ ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್?
+- ನೀವು ಸ್ಟ್ರಿಂಗ್‌ಗಳಿಗೆ ಉಲ್ಲೇಖಗಳನ್ನು ಮರೆತರೆ ಏನು ಸಂಭವಿಸುತ್ತದೆ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> PlainText: "ಹೆಲೋ"
+    [*] --> Variable: name = "ಆಲಿಸ್"
+    PlainText --> Concatenated: + " " + name
+    Variable --> Concatenated
+    PlainText --> Template: `ಹೆಲೋ ${name}`
+    Variable --> Template
+    Concatenated --> Result: "ಹೆಲೋ ಆಲಿಸ್"
+    Template --> Result
+    
+    note right of Concatenated
+        ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನ
+        ಹೆಚ್ಚು ವಿವರಣೆಗಳಿದೆ
+    end note
+    
+    note right of Template
+        ಆಧುನಿಕ ES6 ವ್ಯಾಕರಣ
+        ಸ್ವಚ್ಛ ಮತ್ತು ಓದಲು ಸುಲಭ
+    end note
+```
+> **ವೃತ್ತಿಪರ ಸೂಚನೆ**: ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್ ಸಾಮಾನ್ಯವಾಗಿ ಸಂಕೀರ್ಣ ಸ್ಟ್ರಿಂಗ್ ನಿರ್ಮಾಣಕ್ಕಾಗಿ ಇಷ್ಟಪಡುತ್ತಾರೆ ಏಕೆಂದರೆ ಅವು ಹೆಚ್ಚು ಓದಲು ಸುಲಭವಲ್ಲ ಮತ್ತು ಬහු-ಸಾಲುಗಳ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಚೆನ್ನಾಗಿ ಹ್ಯಾಂಡಲ್ ಮಾಡುತ್ತವೆ!
+
+### ಬೂಲಿಯನ್ಸ್
+
+ಬೂಲಿಯನ್ಸ್ ಅತಿ ಸರಳ ಡೇಟಾ ರೂಪವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ: ಅವು ಹೊಂದಿರಬಲ್ಲದು ಬರುವ ಎರಡು ಮೌಲ್ಯಗಳಲ್ಲಿ ಒಂದೇ – `true` ಅಥವಾ `false`. ಈ ದ್ವಿಮಾನ್ಯ ತಾರ್ಕಿಕ ವ್ಯವಸ್ಥೆ ಅನ್ನು 19ನೇ ಶತಮಾನ गणಿತಜ್ಞ ಜಾರ್ಜ್ ಬೂಲ್ ಅವರು ಬೂಲಿಯನ್ ಬೆಳ್‌ಜಿಬ್ರಾ ವಿನ್ಯಾಸಗೊಳಿಸಿದ್ದಾರೆ.
+
+ಸರಳತೆಯಾದರೂ, ಬೂಲಿಯನ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತಾರ್ಕಿಕತೆಗೆ ಅಗತ್ಯವಿದೆ. ಬಳಕೆದಾರ ಲಾಗಿನ್ ಆಗಿರುವುದೋ, ಬಟನ್ ಕ್ಲಿಕ್ ಆಗಿದೆಯೋ ಅಥವಾ ಕೆಲವು ಶರತ್ತುಗಳು ಪೂರ್ತಿಯಾಗಿದೆಯೋ ಎಂದು ಆಧರಿಸಿ ನಿಮ್ಮ ಕೋಡ್ ನಿರ್ಣಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ.
+
+ಬೂಲಿಯನ್ಸ್ ಮಾತ್ರ ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಬಹುದು: `true` ಅಥವಾ `false`. ಬೂಲಿಯನ್ಸ್ ನಿರ್ಣಯಗಳಿಗಾಗಿ ಸಹಾಯ ಮಾಡುತ್ತವೆ ಯಾವ ಸಾಲಿನ ಕೋಡ್ ಕಾರ್ಯಗತವಾಗಬೇಕೆಂದರೆ ಶರತ್ತುಗಳು ಪೂರ್ತಿಯಾಗುವಾಗ. ಹಲವಾರು ಸಂದರ್ಭಗಳಲ್ಲಿ, [ಆಪರೇಟರ್ಗಳು](../../../../2-js-basics/1-data-types) ಬೂಲಿಯನ್ ಮೌಲ್ಯವನ್ನು ಸ್ಥಾಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ ಮತ್ತು ನೀವು ಹೆಚ್ಚಿನ ಬಾರಿ ಬದಲಾಗುವಗಳನ್ನು ಗುಣೋತ್ಪನ್ನಿತ ಅಥವಾ ಮೌಲ್ಯನವೀಕರಣ ಕಾರಣ ಆಪರೇಟರ್ಗಳನ್ನು ಗಮನಿಸಿ ಬರೆಯುತ್ತೀರಿ.
+
+```javascript
+let myTrueBool = true;
+let myFalseBool = false;
+```
+
+**ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು:**
+- ಬೂಲಿಯನ್ ಮೌಲ್ಯ `true` ನೀಡುವ ಬದಲಾಗುವವನ್ನು **ತಯಾರಿಸಿದ್ದೇವೆ**
+- ಬೌಲಿಯನ್ ಮೌಲ್ಯ `false` ಸಂಗ್ರಹಿಸುವುದನ್ನು **ತೋರಿಸಿದ್ದೇವೆ**
+- ನಿಖರವಾದ ಕೀವರ್ಡ್‌ಗಳು `true` ಮತ್ತು `false` (ಉಲ್ಲೇಖಗಳು ಬೇಡ) **ಬಳಸಿದ್ದೇವೆ**
+- ಈ ಬದಲಾಗುವಗಳನ್ನು ಶರತ್ತು-ಆಧಾರಿತ ಹೇಳಿಕೆಗಳಲ್ಲಿ ಬಳಕೆಗಾಗಿ **ಸಿದ್ಧಪಡಿಸಿದ್ದೇವೆ**
+
+✅ ಬದಲಾಗುವವು ಬೂಲಿಯನ್ `true` ಎಂದು ಮೌಲ್ಯಮಾಪನ ಆದರೆ তাকে 'truthy' ಎಂದು ಪರಿಗಣಿಸಬಹುದು. ಆಸಕ್ತಕರವಾಗಿ, ಜಾವಾ ಸ್ಕ್ರಿಪ್ಟ್ ನಲ್ಲಿ [ಎಲ್ಲಾ ಮೌಲ್ಯಗಳೂ truthy ಇವೆ ಅದನ್ನು falsy ಎಂದು ನಿರ್ಧರಿಸಲಾಗದಿದ್ದರೆ ಮಾತ್ರ](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+```mermaid
+flowchart LR
+    A["🔘 ಬೂಲಿಯನ್ ಮೌಲ್ಯಗಳು"] --> B["true"]
+    A --> C["false"]
+    
+    D["ಸತ್ಯ ಮೌಲ್ಯಗಳು"] --> D1["'hello'"]
+    D --> D2["42"]
+    D --> D3["[]"]
+    D --> D4["{}"]
+    
+    E["ಸುಳ್ಳುಮೌಲ್ಯಗಳು"] --> E1["false"]
+    E --> E2["0"]
+    E --> E3["''"]
+    E --> E4["null"]
+    E --> E5["undefined"]
+    E --> E6["NaN"]
+    
+    style B fill:#e8f5e8
+    style C fill:#ffebee
+    style D fill:#e3f2fd
+    style E fill:#fff3e0
+```
+### 🎯 **ಬೂಲಿಯನ್ ಲಾಜಿಕ್ ಪರಿಶೀಲನೆ: ನಿರ್ಣಯ能力**
+
+**ನಿಮ್ಮ ಬೂಲಿಯನ್ ಅರ್ಥವನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ `true` ಮತ್ತು `false` ಹೊರತುಪಡಿಸಿ "truthy" ಮತ್ತು "falsy" ಮೌಲ್ಯಗಳನ್ನು ಯಾಕೆ ಇರಿಸುವುದು?
+- ಈವುಗಳಲ್ಲಿ ಯಾವುದು falsy ಆಗಿರಬಹುದು ಎಂದು ಮುನ್ಸೂಚಿಸಬಹುದೇ: `0`, `"0"`, `[]`, `"false"`?
+- ಬೂಲಿಯನ್‌ಗಳು ಪ್ರೋಗ್ರಾಮ್ ಹರಿವನ್ನು ನಿಯಂತ್ರಿಸುವುದರಲ್ಲಿ ಹೇಗೆ ಉಪಯುಕ್ತವಾಗಬಹುದು?
+
+```mermaid
+pie title "ಸಾಮಾನ್ಯ ಬುಲಿಯನ್ ಬಳಕೆ ಪ್ರಕರಣಗಳು"
+    "ಶರತಳುಕುವ ತರ್ಕ" : 40
+    "ಬಳಕೆದಾರ ಸ್ಥಿತಿ" : 25
+    "ವೈಶಿಷ್ಟ್ಯ ಟೋಗಲ್" : 20
+    "ಮಾನ್ಯತೆ" : 15
+```
+> **ಗಮನಿಸಿ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಕೇವಲ 6 ಮೌಲ್ಯಗಳು falsy ಆಗಿವೆ: `false`, `0`, `""`, `null`, `undefined`, ಮತ್ತು `NaN`. ಬೇರೆ ಎಲ್ಲವೂ truthy!
+
+---
+
+## 📊 **ನಿಮ್ಮ ಡೇಟಾ ಟೈಪ್ಸ್ ಉಪಕರಣ ಸಂಗ್ರಹ**
+
+```mermaid
+graph TD
+    A["🎯 ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೇಟಾ ಪ್ರಕಾರಗಳು"] --> B["📦 ಚರಗಳು"]
+    A --> C["🔢 ಸಂಖ್ಯೆ"]
+    A --> D["📝 ಸತ್ರಗಳು"]
+    A --> E["🔘 ಬೂಲಿಯನ್‌ಗಳು"]
+    
+    B --> B1["let ಬದಲಾಯಿಸಬಹುದಾದ"]
+    B --> B2["const ಬದಲಾಯಿಸಲಾಗದ"]
+    
+    C --> C1["42, 3.14, -5"]
+    C --> C2["+ - * / %"]
+    
+    D --> D1["'ಉಲ್ಲೇಖಗಳು' ಅಥವಾ \\\"ಉಲ್ಲೇಖಗಳು\\\""]
+    D --> D2["`ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್`"]
+    
+    E --> E1["ನಿಜ ಅಥವಾ ತಪ್ಪು"]
+    E --> E2["ಸತ್ಯಶೀಲ vs ಅಸತ್ಯಶೀಲ"]
+    
+    F["⚡ ಪ್ರಮುಖ ಸಂಪ್ರದಾಯಗಳು"] --> F1["ಮಾಡಕಗಳಿಗಾಗಿ ಪ್ರಕಾರ ಮಹತ್ವಪೂರ್ಣ"]
+    F --> F2["ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಗತಿಶೀಲವಾಗಿ ಟೈಪ್ಡ್ ಆಗಿದೆ"]
+    F --> F3["ಚರಗಳು ಪ್ರಕಾರಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು"]
+    F --> F4["ಹೆಸರಿಡುವಿಕೆ ಕೇಸ್-ಸಂವೇದನಶೀಲವಾಗಿದೆ"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ನಿಮ್ಮ ಈ ಕೆಳಗಿನ ಚಾಲೆಂಜ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ನೀವು ಕಲಿತ ಎಲ್ಲ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೇಟಾ ಪ್ರಕಾರಗಳನ್ನು ಮತ್ತು ನೈಜ ಜಾಗತಿಕ ಡೇಟಾ ಪರಿಗಣನೆಗಳನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು, ವೈಯಕ್ತಿಕ ಮಾಹಿತಿ ನಿರ್ವಹಣೆ ಕಾರ್ಯಕ್ರಮವನ್ನು ರಚಿಸಿ.
+
+**ಚಾಲೆಂಜ್:** ಒಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಕ್ರಮವನ್ನು ರಚಿಸಿ, ಅದು ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ಆಬ್ಜೆಕ್ಟ್‌ನ್ನು ಹೊಂದಿರಲಿ, ಅದರಲ್ಲಿ ಹೆಸರು (ಸ್ಟ್ರಿಂಗ್), ವಯಸ್ಸು (ಸಂಖ್ಯೆ), ವಿದ್ಯಾರ್ಥಿ ಸ್ಥಿತಿ (ಬೂಲಿಯನ್), ಮೆಚ್ಚಿನ ಬಣ್ಣಗಳು ಎಂದು ಅರೆ (array), ಮತ್ತು ವಿಳಾಸ ಆಬ್ಜೆಕ್ಟ್ ಇದ್ದು ಅದರ ರಸ್ತೆ, ನಗರ ಮತ್ತು ಕನ್ನಡ ಸಂಖ್ಯೆ ಗುಣಗಳಿವೆ. ಪ್ರೊಫೈಲ್ ಮಾಹಿತಿಯನ್ನು ತೋರಿಸುವ ಮತ್ತು ವೈಯಕ್ತಿಕ ಕ್ಷೇತ್ರಗಳನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುವ ಕಾರ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿರಲಿ. ಸ್ಟ್ರಿಂಗ್ ಸಂಕಲನ, ಟೆಂಪ್ಲೇಟು ಲಿಟರಲ್ಸ್, ವಯಸ್ಸಿನ ಸಂಖ್ಯಾ ಗಣನೆ ಮತ್ತು ಬೂಲಿಯನ್ ಲಾಜಿಕ್ ಅನ್ನು ವಿದ್ಯಾರ್ಥಿ ಸ್ಥಿತಿಗಾಗಿ ಪ್ರದರ್ಶಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
+
+ಇಲ್ಲಿ [ಏಜೆಂಟ್ ಮೋಡ್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚು ತಿಳಿಯಿರಿ.
+
+## 🚀 ಚಾಲೆಂಜ್
+
+ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೆಲವು ವರ್ತನೆಗಳು ಅಭಿವೃದ್ಧಿಪಡಿಸುವವರನ್ನು ಅಚ್ಚರಿಗೊಳಿಸಬಹುದು. ಇಲ್ಲಿ ಒಂದು դասಮೂಲಕ ಉದಾಹರಣೆ ಇದೆ: ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕನ್‌ಸೋಲ್‌ನಲ್ಲಿ ಇದನ್ನು ಟೈಪ್ ಮಾಡಿ: `let age = 1; let Age = 2; age == Age` ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ಗಮನಿಸಿ. ಇದು `false` ಸಿಗುತ್ತದೆ – ಕಾರಣ ತಿಳಿಸಬಹುದೇ?
+
+ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಅನೇಕ ವರ್ತನೆಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ಅವುಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ನಂಬಿಕೆಯಾದ ಮತ್ತು ದೋಷರಹಿತವಾಗಿ ಬರೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+## ಲೆಕ್ಚರ್ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ
+[ಲೆಕ್ಚರ್ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+[ಈ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವ್ಯಾಯಾಮಗಳ ಪಟ್ಟಿಯನ್ನು](https://css-tricks.com/snippets/javascript/) ನೋಡಿ ಮತ್ತು ಒಂದು ಪ್ರಯತ್ನಿಸಿ. ನೀವು ಏನು ಕಲಿತೀರಾ?
+
+## ಹವಾಲೆ
+
+[ಡೇಟಾ ಟೈಪ್ಸ್ ಅಭ್ಯಾಸ](assignment.md)
+
+## 🚀 ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೇಟಾ ಟೈಪ್ಸ್ ಮಾಸ್ಟರಿ ಸಮಯರೇಖೆ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡುವದ್ದು**
+- [ ] ಬ್ರೌಸರ್ ಕನ್‌ಸೋಲ್ ಅನ್ನು ತೆರೆದು ಬಿನ್ನವ ಬಿನ್ನವ ಡೇಟಾ ಪ್ರಕಾರಗಳ 3 ಬದಲಾಗುವಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಚಾಲೆಂಜ್ ಪ್ರಯತ್ನಿಸಿ: `let age = 1; let Age = 2; age == Age` ಮತ್ತು ಇದು ಏಕೆ false ಆಗುತ್ತుందೋ ತಿಳಿದುಕೊಳ್ಳಿ
+- [ ] ನಿಮ್ಮ ಹೆಸರು ಮತ್ತು ಮೆಚ್ಚಿನ ಸಂಖ್ಯೆಯೊಂದಿಗೆ ಸ್ಟ್ರಿಂಗ್ ಸಂಕಲನ ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] ಸ್ಟ್ರಿಂಗ್‌ಗೆ ಸಂಖ್ಯೆ ಸೇರಿಸಿದಾಗ ಏನಾಗುತ್ತದೆ ಪರೀಕ್ಷಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಲ್ಲದು**
+- [ ] ಪಾಠದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಅಸ್ಪಷ್ಟ מושגים ಪರಿಶೀಲನೆ ಮಾಡಿ
+- [ ] ಎರಡೂ ಸಂಖ್ಯೆಗಳ ಸಂಖ್ಯೆಗೂಡಿಸುವ, ಭಾಗಿಸು, ಗುಣಿಸು, ನಿಷೇಧಿಸುವ ಸಣ್ಣ ಕ್ಯಾಲ್ಕುಲೇಟರ್ ರಚಿಸಿ
+- [ ] ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್ ಬಳಸಿ ಸರಳವಾದ ಹೆಸರು ಸ್ವರೂಪಕಾರ ಕಲಿಸಿ
+- [ ] `==` ಮತ್ತು `===` ಹೋಲಿಕೆ ಆಪರೇಟರ್‌ಗಳ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಆಲೋಚಿಸಿ
+- [ ] ವಿವಿಧ ಡೇಟಾ ಪ್ರಕಾರಗಳಿಗೆ ಪರಸ್ಪರ ಪರಿವರ್ತನೆ ಅಭ್ಯಾಸ ಮಾಡಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನೆಲೆಭೂಮಿ**
+- [ ] ಹೊಣೆಗಾರಿಕೆಯೊಂದಿಗೆ ಮತ್ತು ಸೃಜನಶೀಲತೆಯೊಂದಿಗೆ ಹವಾಲೆಯನ್ನು ಸಂಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಕಲಿತ ಎಲ್ಲಾ ಡೇಟಾ ಪ್ರಕಾರಗಳನ್ನು ಬಳಸಿ ವೈಯಕ್ತಿಕ ಪ್ರೊಫೈಲ್ ಆಬ್ಜೆಕ್ಟ್ ರಚಿಸಿ
+- [ ] [CSS-Tricks ನಿಂದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವ್ಯಾಯಾಮಗಳೊಂದಿಗೆ ಅಭ್ಯಾಸ ಮಾಡಿ](https://css-tricks.com/snippets/javascript/)
+- [ ] ಬೂಲಿಯನ್ ಲಾಜಿಕ್ ಬಳಸಿ ಸರಳ ಫಾರ್ಮ್ ಮಾನ್ಯತೆಗಾರರ ರಚನೆ ಮಾಡಿ
+- [ ] ಅರೆ ಮತ್ತು ಆಬ್ಜೆಕ್ಟ್ ಡೇಟಾ ಪ್ರಕಾರಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ (ಮುಂದಿನ ಪಾಠಗಳ ಪೂರ್ವಪ್ರದರ್ಶನ)
+- [ ] ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಮುದಾಯದಲ್ಲಿ ಸೇರಿ ಡೇಟಾ ಪ್ರಕಾರಗಳ ಬಗ್ಗೆ ಪ್ರಶ್ನೆ ಕೇಳಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ಮಟ್ಟದ ಪರಿವರ್ತನೆ**
+- [ ] ಡೇಟಾ ಪ್ರಕಾರ ಜ್ಞಾನದೊಂದಿಗೆ ದೊಡ್ಡ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಯೋಜನೆಗಳಲ್ಲಿ ಸಂಯೋಜಿಸಿ
+- [ ] ನೈಜ ಅನ್ವಯಗಳಲ್ಲಿ ಪ್ರತಿ ಡೇಟಾ ಪ್ರಕಾರವನ್ನು ಯಾಕೆ ಮತ್ತು ಯಾವಾಗ ಬಳಸಬೇಕೆಂದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ಆರಂಭಿಕರಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಭೂತಗಳನ್ನು ವಿವರಿಸಲು ಸಹಾಯ ಮಾಡಿ
+- [ ] ವಿವಿಧ ಬಳಕೆದಾರರ ಡೇಟಾ ನಿರ್ವಹಣೆ ಮಾಡುವ ಸಣ್ಣ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಿ
+- [ ] ಪ್ರಗತಿಶೀಲ ಡೇಟಾ ಪ್ರಕಾರ ವಿಷಯಗಳನ್ನು, ಉದಾ: ಟೈಪ್ ಕೋರ್ಶನ್ ಮತ್ತು ಕಠಿಣ ಸಮಾನತೆಯನ್ನು ಅನ್ವೇಷಿಸಿ
+- [ ] ದೃಶ್ಯ документации ಸುಧಾರಣೆಯೊಂದಿಗೆ ಉಚಿತ ಓಪನ್ ಸೋರ್ಸ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ
+
+### 🧠 **ಅಂತಿಮ ಡೇಟಾ ಪ್ರಕಾರ ಮಾಸ್ಟರಿ ಪರಿಶೀಲನೆ**
+
+**ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನೆಲೆಭೂಮಿಯನ್ನು ಹಬ್ಬಿಸಿ:**
+- ಅದರ ವರ್ತನೆ ಕುರಿತು ನಿಮಗೆ ಅಚ್ಚರಿಯನ್ನುಂಟುಮಾಡಿದ ಯಾವ ಡೇಟಾ ಪ್ರಕಾರ?
+- ನಿಮ್ಮ ಗೊತ್ತು-ಮಾಹಿತಿಗಳನ್ನು ಗೆಳೆಯರಿಗೆ ಬದಲಾಗುವಗಳ ವಿರುದ್ಧ ಸ್ಥಿರಾಂಕಗಳಾಗಿ ಹೇಗೆ ವಿವರಿಸುವಿರಿ?
+- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಟೈಪ್ ವ್ಯವಸ್ಥೆಯ ಬಗ್ಗೆ ನೀವು ಕಂಡ ಮಗ್ನವಾಗಿದ್ದ ಅತಿ ಆಸಕ್ತಿದಾಯಕ ವಿಷಯ ಯಾವುದು?
+- ಈ ಮೂಲಭೂತಗಳೊಂದಿಗೆ ನೀವು ಯಾವ ನೈಜ ಸವಾಲಿನ ಆಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಿಸಲು ಕಲ್ಪಿಸಿಕೊಳ್ಳುತ್ತೀರಿ?
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಜಾವಾಸ್ಕೋಡ್ ಆತ್ಮವಿಶ್ವಾಸ ಯಾತ್ರೆ
+    section ಇ امروز
+      ಗೊಂದಲಗೊಳ್ಳಲಾಗಿದೆ: 3: You
+      ಕುತೂಹಲ: 4: You
+      ಉತ್ಸಾಹಭರಿತ: 5: You
+    section ಈ ವಾರ
+     ฝಿತ್ರ: 4: You
+      ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: 5: You
+      ನಿರ್ಮಾಣ: 5: You
+    section ಮುಂದಿನ ತಿಂಗಳು
+      ಸಮಸ್ಹೆ ಪರಿಹಾರ: 5: You
+      ಇತರರಿಗೆ ಬೋಧನೆ: 5: You
+      ನಿಜವಾದ ಯೋಜನೆಗಳು: 5: You
+```
+> 💡 **ನೀವು ನೆಲೆಭೂಮಿಯನ್ನು ಕಟ್ಟಿಟ್ಟುಕೊಂಡಿದ್ದೀರಿ!** ಡೇಟಾ ಪ್ರಕಾರಗಳ ಅರಿವು ಅಕ್ಷರಮಾಲೆಯನ್ನ ಕಲಿಯುವಂತಹದ್ದು, ಕಥೆಗಳ ಬರವಣಿಗೆಯ ಮೊದಲು. ನೀವು ಬರೆಯುವ ಪ್ರತೀ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಕ್ರಮ ಈ ಮೂಲಭೂತ ಕಲಿಕೆಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಈಗ ನೀವು ವೆಬ್‌ಸೈಟ್‌ಗಳು, ಡೈನಾಮಿಕ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ನೈಜ ಸಮಸ್ಯೆಗಳನ್ನು ನಿಪುಣವಾಗಿ ಪರಿಹರಿಸಬಹುದಾದ ಕಟ್ಟುನಿಟ್ಟಿನ ಅಡಿಪಾಯಗಳನ್ನು ಹೊಂದಿದ್ದೀರಿ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಅದ್ಭುತ ಲೋಕಕ್ಕೆ ಸ್ವಾಗತ! 🎉
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಜಿಲ್ಲೆ ಮುಖಪುಟ**:  
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆಯಾದ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗೆ ಪ್ರಯತ್ನಿಸುವಾಗಲೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸಮರ್ಥತೆಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿಕೊಳ್ಳಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಭ್ರಾಂತಿಗಳು ಅಥವಾ ತಪ್ಪು ನಿರ್ವಚನೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/2-js-basics/1-data-types/assignment.md

@@ -0,0 +1,103 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6fd645e97c48cd5eb5a3d290815ec8b5",
+  "translation_date": "2026-01-08T12:43:58+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "kn"
+}
+-->
+# Data Types Practice: ಇ-ಕಾಮರ್ಸ್ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್
+
+## ಸೂಚನೆಗಳು
+
+ನೀವು ಆಧುನಿಕ ಇ-ಕಾಮರ್ಸ್ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೀರಿ ಎಂದು ಕಲ್ಪಿಸಿ. ಈ ಕಾರ್ಯ ನಿಮ್ಮಿಗೆ ವಿಭಿನ್ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೇಟಾ ತರಪ್ರಕಾರಗಳು ಪ್ರತಿಯೊಂದು ಹೇಗೆ ಜೋಡಣೆಯಾಗುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನೆರವಾಗುತ್ತದೆ.
+
+### ನಿಮ್ಮ ಕಾರ್ಯ
+
+ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೇಟಾ ತರಪ್ರಕಾರಗಳನ್ನು ನೀವು ಹೇಗೆ ಉಪಯೋಗಿಸುವಿರೋದುಗಳ ಸಮಗ್ರ ವಿಶ್ಲೇಷಣೆಯನ್ನು ರಚಿಸಿ. ಏಳು ಮೂಲಭೂತ ಡೇಟಾ ತರಪ್ರಕಾರಗಳು ಮತ್ತು ಆоб್ಜೆಕ್ಟ್ ಗಳಿಗಾಗಿ ನೀವು:
+
+1. **ತರಪ್ರಕಾರವನ್ನು ಗುರುತಿಸಿ** ಮತ್ತು ಅದರ ಉದ್ದೇಶವನ್ನು ವಿವರಿಸಿ  
+2. **ಈ ಡೇಟಾ ತರಪ್ರಕಾರ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಅತ್ಯುತ್ತಮ ಆಯ್ಕೆ ಆಗಿರುವ ಕಾರಣವನ್ನು ವಿವರಿಸಿ**  
+3. **ನಿಜವಾದ ಉದಾಹರಣೆ ಕೋಡ್ ಅನ್ನು ಕೊಡಿ** ಆಗ ಡೇಟಾ ತರಪ್ರಕಾರ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ತೋರಿಸಿ  
+4. **ಈ ಡೇಟಾ ತರಪ್ರಕಾರವು ಶಾಪಿಂಗ್ ಕಾರ್ಟ್‌ನ ಇತರ ಭಾಗಗಳೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ಹೊಂದುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸಿ**
+
+### ಆವರಿಸಲು ಅಗತ್ಯವಿರುವ ಡೇಟಾ ತರಪ್ರಕಾರಗಳು
+
+**ಮೂಲಭೂತ ಡೇಟಾ ತರಪ್ರಕಾರಗಳು:**  
+- **ಸ್ಟ್ರಿಂಗ್**: ಉತ್ಪನ್ನ ಹೆಸರುಗಳು, ವಿವರಣೆಗಳು, ಬಳಕೆದಾರ ಮಾಹಿತಿಗಳು  
+- **ನಂಬರ್**: ಬೆಲೆಗಳು, ಪ್ರಮಾಣಗಳು, ತೆರಿಗೆ ಲೆಕ್ಕಾಚಾರಗಳು  
+- **ಬೂಲಿಯನ್**: ಐಟಂ ಲಭ್ಯತೆ, ಬಳಕೆದಾರ पसंद, ಕಾರ್ಟ್ ಸ್ಥಿತಿ  
+- **ನಲ್**: ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಮೌಲ್ಯಗಳು (ಡಿಸ್ಕೌಂಟ್ ಕೋಡ್ ಇಲ್ಲದಿರುವಂತೆ)  
+- **ಅನಿರ್ಧಿಷ್ಟ (Undefined)**: ಆರಂಭಗೊಳಿಸಲಾದಿಲ್ಲದ ಮೌಲ್ಯಗಳು ಅಥವಾ ಕೊರತೆಯ ಮಾಹಿತಿಗಳು  
+- **ಸಿಂಬಲ್**: ವಿಶಿಷ್ಟ ಗುರುತಿಸುವಿಕೆಗಳು (ಉನ್ನತ ಬಳಕೆ)  
+- **ಬಿಗ್‌ಇಂಟ್**: ದೊಡ್ಡ ಹಣಕಾಸಿನ ಲೆಕ್ಕಾಚಾರಗಳು (ಉನ್ನತ ಬಳಕೆ)  
+
+**ರેફರೆನ್ಸ್ ತರಪ್ರಕಾರಗಳು:**  
+- **ಆಬ್ಜೆಕ್ಟ್**: ಉತ್ಪನ್ನ ವಿವರಗಳು, ಬಳಕೆದಾರ ಪ್ರೊಫೈಲ್‌ಗಳು, ಕಾರ್ಟ್ ಒಳಗಿನ ವಸ್ತುಗಳು  
+- **ಅರೈ**: ಉತ್ಪನ್ನಗಳ ಪಟ್ಟಿ, ಆದೇಶ ಇತಿಹಾಸ, ವರ್ಗಗಳು  
+
+### ಪ್ರತಿ ಡೇಟಾ ತರಪ್ರಕಾರಕ್ಕೆ ಉದಾಹರಣೆಯ ರೂಪ
+
+ಪ್ರತಿ ಡೇಟಾ ತರಪ್ರಕಾರಕ್ಕಾಗಿ, ನಿಮ್ಮ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಹೀಗೆ ರಚಿಸಿ:
+
+```markdown
+## [Data Type Name]
+
+**Purpose in Shopping Cart:** [Explain what this data type does]
+
+**Why This Type:** [Explain why this is the best choice]
+
+**Code Example:**
+```javascript
+// Your realistic code example here
+```
+  
+**ವಾಸ್ತವಿಕ ಬಳಕೆ:** [ಪ್ರಾಯೋಗಿಕವಾಗಿ ಇದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ವಿವರಿಸಿ]  
+
+**ಸಂವಹನ:** [ಈ ಡೇಟಾ ತರಪ್ರಕಾರ ಇತರ ತರಪ್ರಕಾರಗಳೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ಮಾಡುತ್ತದೆ ಎಂದು ವಿವರಿಸಿ]  
+```
+
+### Bonus Challenges
+
+1. **Type Coercion**: Show an example where JavaScript automatically converts between data types in your shopping cart (e.g., string "5" + number 10)
+
+2. **Data Validation**: Demonstrate how you would check if user input is the correct data type before processing
+
+3. **Performance Considerations**: Explain when you might choose one data type over another for performance reasons
+
+### Submission Guidelines
+
+- Create a markdown document with clear headings for each data type
+- Include working JavaScript code examples
+- Use realistic e-commerce scenarios in your examples
+- Explain your reasoning clearly for beginners to understand
+- Test your code examples to ensure they work correctly
+
+## Rubric
+
+| Criteria | Exemplary (90-100%) | Proficient (80-89%) | Developing (70-79%) | Needs Improvement (Below 70%) |
+|----------|---------------------|---------------------|---------------------|------------------------------|
+| **Data Type Coverage** | All 7 primitive types and objects/arrays covered with detailed explanations | 6-7 data types covered with good explanations | 4-5 data types covered with basic explanations | Fewer than 4 data types or minimal explanations |
+| **Code Examples** | All examples are realistic, working, and well-commented | Most examples work and are relevant to e-commerce | Some examples work but may be generic | Code examples are incomplete or non-functional |
+| **Real-world Application** | Clearly connects each data type to practical shopping cart features | Good connection to e-commerce scenarios | Some connection to shopping cart context | Limited real-world application demonstrated |
+| **Technical Accuracy** | All technical information is correct and demonstrates deep understanding | Most technical information is accurate | Generally accurate with minor errors | Contains significant technical errors |
+| **Communication** | Explanations are clear, beginner-friendly, and well-organized | Good explanations that are mostly clear | Explanations are understandable but may lack clarity | Explanations are unclear or poorly organized |
+| **Bonus Elements** | Includes multiple bonus challenges with excellent execution | Includes one or more bonus challenges well done | Attempts bonus challenges with mixed success | No bonus challenges attempted |
+
+### Learning Objectives
+
+By completing this assignment, you will:
+- ✅ **Understand** the seven JavaScript primitive data types and their uses
+- ✅ **Apply** data types to real-world programming scenarios
+- ✅ **Analyze** when to choose specific data types for different purposes
+- ✅ **Create** working code examples that demonstrate data type usage
+- ✅ **Explain** technical concepts in beginner-friendly language
+- ✅ **Connect** fundamental programming concepts to practical applications
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಜಾಣಿಕೆ ಮುಕ್ತಿ**:  
+ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳು ಇರಬಹುದೆಂದು ತಿಳಿದುಕೊಳ್ಳಿ. ಮೂಲ ದಸ್ತಾವೇಜಿನ ಸ್ಥಳೀಯ ಭಾಷೆಯೇ ಅಧಿಕೃತ ಮೂಲವಾಗಿರುತ್ತದೆ. ಗಂಭೀರ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ误boಧನೆಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/2-js-basics/2-functions-methods/README.md

@@ -0,0 +1,579 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
+  "translation_date": "2026-01-08T12:26:23+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "kn"
+}
+-->
+# JavaScript ಮೂಲಗಳು: ವಿಧಾನಗಳು ಮತ್ತು ಕಾರ್ಯಗಳು
+
+![JavaScript ಮೂಲಗಳು - ಕಾರ್ಯಗಳು](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.kn.png)
+> ಸ್ಕೆಚ್ ನೋಟು [Tomomi Imura](https://twitter.com/girlie_mac) ಅವರಿಂದ
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಂಕ್ಷನ್ಗಳ ಸಾಹಸ
+    section ಹಾದಿ
+      Function Syntax: 5: You
+      Calling Functions: 4: You
+      Parameters & Arguments: 5: You
+    section ಅಭಿವೃದ್ಧಿಗೊಳಿಸಿದ تصورات
+      Return Values: 4: You
+      Default Parameters: 5: You
+      Function Composition: 4: You
+    section ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
+      Arrow Functions: 5: You
+      Anonymous Functions: 4: You
+      Higher-Order Functions: 5: You
+```
+## ಪೂರ್ವ-ಓದು ತರಗತಿ ಪ್ರಶ್ನೋತ್ತರ
+[ಪೂರ್ವ-ಓದು ತರಗತಿ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app)
+
+ಏಕೇತನದ ಕೋಡ್ ಆಗಾಗಲೇ ಬರೆಯುವುದು ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ನ ಸಾಮಾನ್ಯ ತೊಂದರೆಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಕಾರ್ಯಗಳು ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುವುದಕ್ಕೆ ನಿಮಗೆ ಕೋಡ್ ಅನ್ನು ಪುನಃಬಳಕೆ ಮಾಡಬಹುದಾದ ಬ್ಲಾಕ್ಗಳಾಗಿ ಪ್ಯಾಕೇಜ್ ಮಾಡಲು ಅವಕಾಶ ನೀಡುತ್ತವೆ. ಕಾರ್ಯಗಳನ್ನು ಹೆನ್‌ರಿ ಫೋರ್ಡ್ ಅವರ ಅಸೆಂಬ್ಲಿ ಲೈನ್ ಕ್ರಾಂತಿ ಮಾಡಲು ಕಾರಣವಾದ ನಿಯಮಿತ ಭಾಗಗಳಂತೆ ভাবಿಕೊಳ್ಳಿ – ಒಮ್ಮೆ ನೀವು ನಂಬಬಹುದಾದ ಘಟಕವನ್ನು ನಿರ್ಮಿಸಿದಾಗ, ನೀವು ಅದನ್ನು ಬೇರೆ ಎಲ್ಲೆಡೆ ನಿರ್ಮಾಣಿಸದೆ ಬೇಕಾದಾಗ ಬಳಸಬಹುದು.
+
+ಕಾರ್ಯಗಳು ನಿಮಗೆ ಕೋಡ್‌ನ ತುಂಡುಗಳನ್ನು ಗುಚ್ಛಿಸಬಹುದಾಗಿಸಿವೆ, ಆದ ಕಾರಣ ನೀವು ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಂದಲ್ಲಿ ಅವುಗಳನ್ನು ಪುನಃಬಳಕೆ ಮಾಡಬಹುದು. ಎಲ್ಲೆಡೆ ಅದೇ ಲಾಜಿಕನ್ನು ನಕಲಿಸುವ ಬದಲು, ನೀವು ಒಮ್ಮೆ ಕಾರ್ಯವನ್ನು ರಚಿಸಿ, ಅದನ್ನು ಬೇಕಾದಾಗ ಕರೆಮಾಡಬಹುದು. ಈ ವಿಧಾನವು ನಿಮ್ಮ ಕೋಡನ್ನು ಸಂಘಟಿತವಾಗಿರಿಸುತ್ತದೆ ಮತ್ತು ನವೀಕರಣಗಳನ್ನು ಬಹಳ ಸುಲಭಗೊಳ್ಳಿಸುತ್ತದೆ.
+
+ಈ ಪಾಠದಲ್ಲಿ, ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ಕಾರ್ಯಗಳನ್ನು ಹೇಗೆ ರಚಿಸಬೇಕು, ಅವರಿಗೆ ಮಾಹಿತಿ ಹೇಗೆ ಸಲ್ಲಿಸಬೇಕು ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಫಲಿತಾಂಶಗಳನ್ನು ಹೇಗೆ ಪಡೆಯಬೇಕು ಎಂಬುದನ್ನು ಕಲಿತೀರಿ. ನೀವು ಕಾರ್ಯಗಳು ಮತ್ತು ವಿಧಾನಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಕಂಡುಹಿಡಿಯುತ್ತೀರಿ, ಆಧುನಿಕ ನೂತನ ಬರಹ ರೀತಿ ವಿಧಾನಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುತ್ತೀರಿ ಮತ್ತು ಕಾರ್ಯಗಳು ಪರಸ್ಪರ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸಬಹುದು ಎಂಬುದನ್ನು ಭೇಟಿ ಮಾಡುತ್ತೀರಿ. ನಾವು ಈ ಕಲ್ಪನೆಗಳನ್ನು ಹಂತ ಹಂತವಾಗಿ ನಿರ್ಮಿಸುತ್ತೇವೆ.
+
+[![ವಿಧಾನಗಳು ಮತ್ತು ಕಾರ್ಯಗಳು](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "ವಿಧಾನಗಳು ಮತ್ತು ಕಾರ್ಯಗಳು")
+
+> 🎥 ಮೇಲಿನ ಚಿತ್ರವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ವಿಧಾನಗಳು ಮತ್ತು ಕಾರ್ಯಗಳ ಬಗ್ಗೆ ಒಂದು ವೀಡಿಯೊಗೆ.
+
+> ನೀವು ಈ ಪಾಠವನ್ನು [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) ನಲ್ಲಿ ತೆಗೆದುಕೊಳ್ಳಬಹುದು!
+
+```mermaid
+mindmap
+  root((JavaScript Functions))
+    Basic Concepts
+      Declaration
+        Traditional syntax
+        Arrow function syntax
+      Calling
+        Using parentheses
+        Parentheses required
+    Parameters
+      Input Values
+        Multiple parameters
+        Default values
+      Arguments
+        Values passed in
+        Can be any type
+    Return Values
+      Output Data
+        return statement
+        Exit function
+      Use Results
+        Store in variables
+        Chain functions
+    Advanced Patterns
+      Higher-Order
+        Functions as parameters
+        Callbacks
+      Anonymous
+        No name needed
+        Inline definition
+```
+## ಕಾರ್ಯಗಳು
+
+ಕಾರ್ಯವು ಒಂದು ಸ್ವತಂತ್ರ ಕೋಡ್‌ನ ಬ್ಲಾಕ್ ಆಗಿದ್ದು ಅದು ನಿರ್ದಿಷ್ಟ ಕೆಲಸವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ನೀವು ಬೇಕಾದಾಗ ಕಾರ್ಯಗತಗೊಳ್ಳಿಸಬಹುದಾದ ಲಾಜಿಕ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ.
+
+ನೀವು ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಂನಲ್ಲಿ ಹಲವಾರು ಬಾರಿ ಅದೇ ಕೋಡ್ ಬರೆವ ಬದಲು, ಅದನ್ನು ಕಾರ್ಯದಲ್ಲಿ ಪ್ಯಾಕೇಜ್ ಮಾಡಿ, ನಿಮಗೆ ಬೇಕಾದಾಗ ಅದನ್ನು ಕರೆಮಾಡಬಹುದು. ಈ ವಿಧಾನವು ನಿಮ್ಮ ಕೋಡ್‌ನ ಸ್ವಚ್ಚತೆಯನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ನವೀಕರಣಗಳನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ನಿಮ್ಮ ಕೋಡ್‌ಗೆ 20 ವಿಭಿನ್ನ ಜಾಗಗಳಲ್ಲಿ ಮಸುಕಾಗಿ ಹೋಲುವ ಲಾಜಿಕ್ ಬದಲಾಯಿಸಬೇಕಾಗಿದ್ದರೆ ಅದರ ನಿರ್ವಹಣೆ ಹೇಗಿರುತ್ತದೆ ಎಂದು ಯೋಚಿಸಿ.
+
+ನಿಮ್ಮ ಕಾರ್ಯಗಳಿಗೆ ಸ್ಪಷ್ಟವಾದ ಹೆಸರು ನೀಡುವುದು ಅವಶ್ಯಕ. ಚೆನ್ನಾಗಿ ಹೆಸರು ನೀಡಿ ಕಾರ್ಯವು ತನ್ನ ಉದ್ದೇಶವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ پہنچಿಸಬೇಕು – ನೀವು `cancelTimer()` ನೋಡಿದಾಗ ಅದು ಏನು ಮಾಡುತ್ತೆ ಎಂಬುದನ್ನು ತಕ್ಷಣ ಗೊತ್ತಾಗುತ್ತದೆ, ಯಾವುದೇ ಸ್ಪಷ್ಟವಾಗಿ ಲೇಬಲ್ ಮಾಡಲಾದ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಏನು ಆಗುವುದೆಂದು ನಿಮಗೆ ತಾನೆ ತಿಳಿಯುತ್ತದೆ.
+
+## ಕಾರ್ಯವನ್ನು ರಚಿಸುವುದು ಮತ್ತು ಕರೆಮಾಡುವುದು
+
+ಸರಳವಾಗಿ ಕಾರ್ಯವನ್ನು ರಚಿಸುವ ವಿಧಾನವನ್ನು ನೋಡೋಣ. ಸಿಂಟ್ಯಾಕ್ಸ್ ನಿಯಮಿತ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ:
+
+```javascript
+function nameOfFunction() { // ಕಾರ್ಯ ನಿರ್ದಿಷ್ಟೀಕರಣ
+ // ಕಾರ್ಯದ ನಿರ್ದಿಷ್ಟೀಕರಣ/ದೇಹ
+}
+```
+
+ಇದನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ:
+- `function` ಕೀವರ್ಡ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗೆ "ನನಗೆ ಕಾರ್ಯ ರಚಿಸಬೇಕಿದೆ!" ಎಂದು ತಿಳಿಸುತ್ತದೆ
+- `nameOfFunction` ಎಂದರೆ ನಿಮ್ಮ ಕಾರ್ಯಕ್ಕೆ ಸ್ಪಷ್ಟವಾದ ಹೆಸರು ನೀಡುವ ಸ್ಥಳ
+- ಕೊಳಕುಗಳು `()` ಕಾರ್ಯಕ್ಕೆ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ಸೇರಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತವೆ (ಇದನ್ನಷ್ಟು ಬೇಗ ತಿಳಿಯೋಣ)
+- ವೃತ್ತಾಕಾರ ಹಾಳೆಗಳು `{}` ಕಾರ್ಯವನ್ನು ಕರೆ ಮಾಡಿದಾಗ ನಡೆಯುವ ನಿಜವಾದ ಕೋಡ್ ಇರಿಸುವ ಸ್ಥಳ
+
+ಈ ಕಾರ್ಯವನ್ನು ದೃಷ್ಟಾಂತವಾಗಿ ರಚಿಸಿ ನೋಡಿ:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+ಈ ಕಾರ್ಯವು ಕಾನ್ಸೋಲ್‌ಗೆ "Hello, world!" ಅ.printಮಾಡುತ್ತದೆ. ನೀವು ಇದನ್ನು ನಿರ್ದೇಶಿಸಿದ ನಂತರ, ಬೇಕಾದಷ್ಟೂ ಬಾರಿ ಇದನ್ನು ಕರೆಮಾಡಬಹುದು.
+
+ನಿಮ್ಮ ಕಾರ್ಯವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು (ಅಥವಾ "ಕರೆಮಾಡಲು") ಕಾರ್ಯದ ಹೆಸರಿನ ನಂತರ ಕೊಳಕುಗಳು ಬರೆಯಿರಿ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಮಗೆ ಕಾರ್ಯವನ್ನು ಕರೆ ಮಾಡುವ ಮೊದಲು ಅಥವಾ ನಂತರ ವ್ಯಾಖ್ಯಾನಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ – ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಜಿನ್ ಕಾರ್ಯಗತಗೊಳಿಸುವ ಕ್ರಮವನ್ನು ನಿಭಾಯಿಸುತ್ತದೆ.
+
+```javascript
+// ನಮ್ಮ ಕಾರ್ಯವನ್ನು ಕರೆಸುತ್ತಿರುವುದು
+displayGreeting();
+```
+
+ಈ ಸಾಲು ನಡೆಯುವಾಗ, ನಿಮ್ಮ `displayGreeting` ಕಾರ್ಯದೊಳಗಿನ ಎಲ್ಲಾ ಕೋಡ್ ಕಾರ್ಯಗತಗೌಪ್ಯವಾಗಿ ನಡೆಯುತ್ತದೆ, ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್‌ನಲ್ಲಿ "Hello, world!" ತೋರಿಸುತ್ತದೆ. ನೀವು ಈ ಕಾರ್ಯವನ್ನು ಪುನರಾವರ್ತನೆಗೆ ಕರೆದಿಕೊಳ್ಳಬಹುದು.
+
+### 🧠 **ಕಾರ್ಯ ಮೂಲಭೂತ ಪರಿಶೀಲನೆ: ನಿಮ್ಮ ಮೊದಲ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ಮಿಸುವುದು**
+
+**ನೀವು મૂળಭೂತ ಕಾರ್ಯಗಳನ್ನು ಹೇಗಿದೆಂಬುದನ್ನು ಪರಿಶೀಲಿಸೋಣ:**
+- ಕಾರ್ಯ ವ್ಯಾಖ್ಯಾನಗಳಲ್ಲಿ `{}` ಕೊಳಕುಗಳನ್ನು ಏಕೆ ಬಳಕೆ ಮಾಡುತ್ತೇವೆ?
+- ನೀವು `displayGreeting` ಬರೆಯುವಾಗ ಕೊಳಕುಗಳನ್ನು ಹೊರತುಪಡಿಸಿದರೆ ಏನಾಗುತ್ತದೆ?
+- ಏಕೆ ನೀವು ಅದೇ ಕಾರ್ಯವನ್ನು ಹಲವಾರು ಬಾರಿ ಕರೆಮಾಡಲು ಇಚ್ಛಿಸುತ್ತೀರಿ?
+
+```mermaid
+flowchart TD
+    A["✏️ ಫಂಕ್ಷನ್ ವ್ಯಾಖ್ಯಾನಿಸಿ"] --> B["📦 ಪ್ಯಾಕೇಜ್ ಕೋಡ್"]
+    B --> C["🏷️ ಅದಕ್ಕೆ ಹೆಸರು ಕೊಡಿ"]
+    C --> D["📞 ಅಗತ್ಯವಿರುವಾಗ ಕರೆಮಾಡಿ"]
+    D --> E["🔄 ಎಲ್ಲೆಡೆ ಪುನಃ ಉಪಯೋಗಿಸಿ"]
+    
+    F["💡 ಲಾಭಗಳು"] --> F1["ಕೋಡ್ ಪುನರಾವೃತ್ತಿ ಇಲ್ಲ"]
+    F --> F2["ಬಾಳಿಕೆ ಸುಲಭ"]
+    F --> F3["ಸ್ಪಷ್ಟ ಸಂಘಟನೆ"]
+    F --> F4["ಪರೀಕ್ಷಣೆಯಲ್ಲಿ ಸುಲಭವದು"]
+    
+    style A fill:#e3f2fd
+    style E fill:#e8f5e8
+    style F fill:#fff3e0
+```
+> **ಟಿಪ್ಪಣಿ:** ನೀವು ಈ ಪಾಠಗಳಲ್ಲಿ **ವಿಧಾನಗಳನ್ನು** ಬಳಸುತ್ತಿದ್ದೀರಿ. `console.log()` ಒಂದು ವಿಧಾನ – ಅದರ ಅರ್ಥ `console` объಕ್ತಿಗೆ ಸೇರಿದ ಕಾರ್ಯ. ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸವೆಂದರೆ ವಿಧಾನಗಳು объಕ್ತ್ಗಳಿಗೆ ಜೋಡಿಸಲಾಗಿದೆ, ಕಾರ್ಯಗಳು ಸ್ವತಂತ್ರವಾಗಿರುತ್ತವೆ. ಹಲವಾರು ಡೆವಲಪರ್‌ಗಳು ಈ ಪದಗಳನ್ನು ಪಾರಂಪರಿಕ ಸಮಾಲೋಚನೆಯಲ್ಲಿ ಪರ್ಯಾಯವಾಗಿ ಬಳಸುತ್ತಾರೆ.
+
+### ಕಾರ್ಯಕ್ಕೆ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
+
+ಇಲ್ಲಿ ಉತ್ತಮ ಕಾರ್ಯಗಳನ್ನು ಬರೆಯಲು ಸಹಾಯಮಾಡುವ ಕೆಲವು ಸಲಹೆಗಳು:
+
+- ನಿಮ್ಮ ಕಾರ್ಯಗಳಿಗೆ ಸ್ಪಷ್ಟ, ವಿವರಣಾತ್ಮಕ ಹೆಸರಿಗಳನ್ನು ನೀಡಿ – ಭವೀಷ್ಯದಲ್ಲಿ ನೀವು ಧನ್ಯವಾದ ಹೇಳುತ್ತೀರಿ!
+- ಬಹು ಪದದ ಹೆಸರಿಗಾಗಿ **camelCase** ಬಳಸಿ (ಉದಾ: `calculateTotal` `calculate_total` ಬದಲು)
+- ಪ್ರತಿ ಕಾರ್ಯ ಒಂದೇ ಒಂದು ವಿಷಯದಲ್ಲಿ ಗಮನವಾಗಿರಲಿ
+
+## ಕಾರ್ಯಕ್ಕೆ ಮಾಹಿತಿ ಪಾಸು ಮಾಡುವುದು
+
+ನಮ್ಮ `displayGreeting` ಕಾರ್ಯವು ಸೀಮಿತವಾಗಿದೆ – ಇದು ಎಲ್ಲರಿಗೂ "Hello, world!" ಮಾತ್ರ ತೋರಿಸಬಹುದು. ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು ಕಾರ್ಯಗಳನ್ನು ಹೆಚ್ಚು ಸ್ಥಿತಿಹೀನ ಮತ್ತು ಉಪಯುಕ್ತವಾಗಿಸಬಹುದು.
+
+**ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು** ಬದಲಾದ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರತಿ ಕಾರ್ಯ ಕರೆಯುವಾಗ ಅಂಟಿಸಲು ಸ್ಥಳಧಾರಕಗಳಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ. ಈ ಮೂಲಕ ಇದೇ ಕಾರ್ಯ ವಿಭಿನ್ನ ಮಾಹಿತಿಯೊಂದಿಗೆ ಪ್ರತಿ ಕಾಲ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬಹುದು.
+
+ನೀವು ನಿಮ್ಮ ಕಾರ್ಯವನ್ನು ಸೃಷ್ಟಿಸುವಾಗ ಕೊಳಕುಗಳಲ್ಲಿ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ವಿವರಿಸಿ, ಮತ್ತು ಹಲವಾರು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ವಿರಾಮಚೇಹ್ನೆಯಿಂದ ಪ್ರತ್ಯೇಕಿಸಿ:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+ಪ್ರತಿ ಪ್ಯಾರಾಮೀಟರ್ ಒಂದು ಸ್ಥಳಪಡಿಸುವ ಜಾಗವನ್ನು ನಿಭಾಯಿಸುತ್ತದೆ – ಯಾರಾದರೂ ನಿಮ್ಮ ಕಾರ್ಯವನ್ನು ಕರೆ ಮಾಡಿದಾಗ, ಅವರು ನಿಜವಾದ ಮೌಲ್ಯಗಳನ್ನು ಈ ಜಾಗಗಳಲ್ಲಿ ಒದಗಿಸುತ್ತಾರೆ.
+
+ನಿಮ್ಮ ಸ್ವಾಗತ ಕಾರ್ಯವನ್ನು ಪ್ರತಿಯೊಬ್ಬರ ಹೆಸರು ಒಪ್ಪಿಕೊಳ್ಳುವಂತೆ ನವೀಕರಿಸೋಣ:
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+ನೀವು ಹಿಂದಿನ ಹೆಸರು ಭಾಗದಲ್ಲಿ ಬ್ಯಾಕ್ಟಿಕ್ ಲಕ್ಷಣ (`` ` ``) ಮತ್ತು `${}` ಬಳಸಿ ನೇರವಾಗಿ ಸಂದೇಶಕ್ಕೆ ಹೆಸರು ಸೇರಿಸುತ್ತಿರಾ – ಇದನ್ನು ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ ಎಂದು ಕರೆಯುತ್ತಾರೆ ಮತ್ತು ಇದು ಚರಗಳನ್ನು ಸರಳವಾಗಿ ನಿರ್ಮಿಸಲು ತುಂಬ ಉಪಯುಕ್ತವಾಗಿದೆ.
+
+ಈಗ ನೀವು ಕಾರ್ಯವನ್ನು ಕರೆ ಮಾಡಿದಾಗ, ಯಾವ ಹೆಸರು ಬೇಕಾದರೂ ಪಾಸು ಮಾಡಬಹುದು:
+
+```javascript
+displayGreeting('Christopher');
+// ಚಲನಗೊಳಿಸಿದಾಗ "ಹಲೋ, ಕ್ರಿಸ್ಟೋಫರ್!" ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ
+```
+
+ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ `'Christopher'` ಎಂಬ ಸರಣಿಯನ್ನು `name` ಪ್ಯಾರಾಮೀಟರ್‌ಗೆ ಒಪ್ಪಿಸುತ್ತಿದೆ, ಮತ್ತು "Hello, Christopher!" ಎಂಬ ವೈಯಕ್ತಿಕ ಸಂದೇಶವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
+
+```mermaid
+flowchart LR
+    A["🎯 ಫಂಕ್ಷನ್ ಕರೆ"] --> B["📥 ಪಾರಾಮೀಟರ್‌ಗಳು"]
+    B --> C["⚙️ ಫಂಕ್ಷನ್ ಬಾಡಿ"]
+    C --> D["📤 ಫಲ್ಯೂಟ್"]
+    
+    A1["displayGreeting('Alice')"] --> A
+    B1["name = 'Alice'"] --> B
+    C1["ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್\n\`ಹಲೋ, \${name}!\`"] --> C
+    D1["'ಹಲೋ, Alice!'"] --> D
+    
+    E["🔄 ಪಾರಾಮೀಟರ್ ಟೈಪ್ಸ್"] --> E1["ಸ್ಟ್ರಿಂಗ್ಸ್"]
+    E --> E2["ನಂಬರ್‌ಗಳು"]
+    E --> E3["ಬೂಲಿಯನ್"]
+    E --> E4["ಆಬ್ಜೆಕ್ಟ್‌ಗಳು"]
+    E --> E5["ಫಂಕ್ಷನ್ಸ್"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style D fill:#fff3e0
+    style E fill:#f3e5f5
+```
+## ಪೂರ್ವನಿಯೋಜಿತ ಮೌಲ್ಯಗಳು
+
+ನಾವು ಕೆಲವು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ಐಚ್ಛಿಕವಾಗಿಸಲು ಬಯಸಿದರೆ? ಅದಕ್ಕೆ ಪೂರ್ವನಿಯೋಜಿತ ಮೌಲ್ಯಗಳು ಸಹಾಯಮಾಡುತ್ತವೆ!
+
+ಎರಡನೇ ರೀತಿಯಲ್ಲಿ ಅಭಿವಂದನಾ ಪದವನ್ನು ಬದಲಾಯಿಸಲು ಆದರೆ ಒಬ್ಬರು ಸೂಚಿಸದಿದ್ದರೆ ನಾವು ಡೀಫಾಲ್ಟ್ ಆಗಿ "Hello" ಬಳಸುತ್ತೇವೆ. ನೀವು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ಸಮಾನ ಚಿಹ್ನೆಯನ್ನು ಬಳಸಿ ಸೆಟ್ ಮಾಡಬಹುದು, ಹೇಗೆ ಒಂದು ಚರವನ್ನು ಸೆಟ್ ಮಾಡುತ್ತಾರೆ:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+ಇಲ್ಲಿ, `name` ಇನ್ನೂ ಅಗತ್ಯವಿದೆ, ಆದರೆ `salutation` ಗೆ ಬೇರೆ ಸ್ವಾಗತ ನೀಡದಿದ್ದರೆ `'Hello'` ಅಳೆಯುತ್ತೇವೆ.
+
+ಈ ಕಾರ್ಯವನ್ನು ಎರಡು ವಿಭಿನ್ನ ರೀತಿಯಲ್ಲಿ ಕರೆ ಮಾಡಬಹುದು:
+
+```javascript
+displayGreeting('Christopher');
+// "ಹೆಲೋ, ಕ್ರಿಸ್ಟೋಫರ್" ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ
+
+displayGreeting('Christopher', 'Hi');
+// "ಹಾಯ್, ಕ್ರಿಸ್ಟೋಫರ್" ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ
+```
+
+ಮೊದಲ ಕರೆದಲ್ಲಿ, ನಾವು ಸ್ವಾಗತ ಹೇಳಿಕೆಯನ್ನು ನೀಡದಿದ್ದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೀಫಾಲ್ಟ್ "Hello" ಅನ್ನು ಬಳಸುತ್ತದೆ. ಎರಡನೇ ಕರೆದಲ್ಲಿ, ನಾವು "Hi" ಎಂಬ ಕಸ್ಟಮ್ ಸ್ವಾಗತವನ್ನು ಬಳಸುತ್ತದೆ. ಈ ಸ್ಥಿತಿಉಪಯುಕ್ತತೆಯಿಂದ ಕಾರ್ಯಗಳು ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಿಗೆ ಸೂಕ್ತವಾಗುತ್ತವೆ.
+
+### 🎛️ **ಪ್ಯಾರಾಮೀಟರ್ ಮಾಸ್ಟರಿ ಪರಿಶೀಲನೆ: ಕಾರ್ಯಗಳನ್ನು ಸ್ಥಿತಿಉಪಯುಕ್ತವಾಗಿಸುವುದು**
+
+**ನಿಮ್ಮ ಪ್ಯಾರಾಮೀಟರ್ ತಜ್ಞತೆ ಪರೀಕ್ಷಿಸಿ:**
+- ಪ್ಯಾರಾಮೀಟರ್ ಮತ್ತು_ARGUMENT_ಗಳ ಮಧ್ಯೆ ವ್ಯತ್ಯಾಸವೇನು?
+- ನಿಜವಾದ ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ನಲ್ಲಿ ಪೂರ್ವನಿಯೋಜಿತ ಮೌಲ್ಯಗಳು ಏಕೆ ಉಪಯುಕ್ತ?
+- ನೀವು ಪ್ಯಾರಾಮೀಟರ್ ಗಿಂತ ಹೆಚ್ಚು_ARGUMENT_ಗಳು ಪಾಸು ಮಾಡಿದರೆ ಏನಾಗಬಹುದು ಎಂದು ನಿರೀಕ್ಷಿಸಬಹುದಾ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> NoParams: function greet() {}
+    [*] --> WithParams: function greet(name) {}
+    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
+    
+    NoParams --> Static: ಯಾವಾಗಲೂ ಒಂದೇ ಔಟ್‌ಪುಟ್
+    WithParams --> Dynamic: ಇನ್‌ಪುಟ್‌ಗಿಂತ ಬದಲಾಗುತ್ತದೆ
+    WithDefaults --> Flexible: ಐಚ್ಛಿಕ ಕಸ್ಟಮೈಜೆಷನ್
+    
+    Static --> [*]
+    Dynamic --> [*]
+    Flexible --> [*]
+    
+    note right of WithDefaults
+        ಅತ್ಯಂತ ಲವಚಿಕ ವಿಧಾನ
+        ಹಿಂದೆಗಿನ ಆವೃತ್ತಿಯ ಸಹಕಾರ
+    end note
+```
+> **ಪರಿಹಾರ ಸಲಹೆ:** ಪೂರ್ವನಿಯೋಜಿತ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು ನಿಮ್ಮ ಕಾರ್ಯಗಳನ್ನು ಬಳಕೆದಾರ ಸ್ನೇಹಿಯಾಗಿ ಮಾಡುತ್ತವೆ. ಬಳಕೆದಾರರು ಸೂಕ್ತ ಡೀಫಾಲ್ಟ್‌ಗಳೊಂದಿಗೆ ತಕ್ಷಣ ಪ್ರಾರಂಭಿಸಬಹುದು, ಆದರೆ ಬೇಕಾದಾಗ ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು!
+
+## ಮರುಪಡೆಯುವ ಮೌಲ್ಯಗಳು
+
+ನಮ್ಮ ಕಾರ್ಯಗಳು ಈಗಾಗಲೇ ಸಂದೇಶಗಳನ್ನು ಕನ್ಸೊಳ್‌ಗೆ ಮುದ್ರಿಸುತ್ತಿವೆ, ಆದರೆ ನೀವು ಕಾರ್ಯದಿಂದ ಏನಾದರೂ ಲೆಕ್ಕಹಾಕಿಸಿ ಫಲಿತಾಂಶವನ್ನು ಪಡೆಯಲು ಬಯಸಿದರೆ?
+
+ಅದಕ್ಕೆ **ಮರುಪಡೆಯುವ ಮೌಲ್ಯಗಳು** ಉಪಯುಕ್ತ. ಏದನ್ನಾದರೂ ತೋರಿಸುವ ಬದಲು, ಕಾರ್ಯವು ನೀವು ಸಂಗ್ರಹಿಸಬಹುದಾದ ಅಥವಾ ನಿಮ್ಮ ಕೋಡ್‌ನ ಬೇರೆ ಭಾಗಗಳಲ್ಲಿ ಉಪಯೋಗಿಸಬಹುದಾದ ಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಬಹುದು.
+
+ಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಲು, `return` ಕೀವರ್ಡ್ ಬಳಸಿ ನಂತರ ಹಿಂತಿರುಗಿಸಲು ಬಯಸಿದ ಮೌಲ್ಯವನ್ನು ಬರೆಯಿರಿ:
+
+```javascript
+return myVariable;
+```
+
+ಮುಖ್ಯ విషయం: ಕಾರ್ಯವು `return` ನಿವೇಶನವನ್ನು ಹೊಯ್ದಾಗ, ತಕ್ಷಣವೇ ಕಾರ್ಯ ನಿಲ್ಲುತ್ತದೆ ಮತ್ತು ಆ ಮೌಲ್ಯವನ್ನು ಕರೆಮಾಡಿರುವ ಜಾಗಕ್ಕೆ ತಲುಪಿಸುತ್ತದೆ.
+
+ನಮ್ಮ ಸ್ವಾಗತ ಕಾರ್ಯವನ್ನು ಮುದ್ರಿಸುವ ಬದಲು ಸಂದೇಶವನ್ನು ಹಿಂತಿರುಗಿಸುವಂತೆ ಬದಲಿಸೋಣ:
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+ಈಗ ಕಾರ್ಯವು ಸ್ವಾಗತವನ್ನು ಮುದ್ರಿಸುವ ಬದಲಾಗಿ, ಸಂದೇಶವನ್ನು ರಚಿಸಿ ನಮಗೆ ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
+
+ಹಿಂತಿರುಗಿದ ಮೌಲ್ಯವನ್ನು ಬಳಸಲು, ನಾವು ಅದನ್ನು ಚರದಲ್ಲಿ ಸಂಗ್ರಹಿಸಬಹುದು:
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+ಈಗ `greetingMessage` ನಲ್ಲಿ "Hello, Christopher" ಇದೆ ಮತ್ತು ನಾವು ಇದನ್ನು ನಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ ಯಾವುದೇ ಸ್ಥಳದಲ್ಲಿ ಬಳಸಬಹುದು – ವೆಬ್ ಪುಟದಲ್ಲಿ ತೋರುವುದಕ್ಕೆ, ಇಮೇಲ್‌ನಲ್ಲಿ ಸೇರಿಸುವುದಕ್ಕೆ ಅಥವಾ ಬೇರೆ ಕಾರ್ಯಕ್ಕೆ ಪಾರ್ಯಕ್ಷಿಸುವುದಕ್ಕೆ.
+
+```mermaid
+flowchart TD
+    A["🔧 ಫಂಕ್ಷನ್ ಪ್ರಕ್ರಿಯೆ"] --> B{"return ಹೇಳಿಕೆ?"}
+    B -->|ಹೌದು| C["📤 ಮರುಹೊಂದಿಸಲಾಗುವ ಮೌಲ್ಯ"]
+    B -->|ಇಲ್ಲ| D["📭 ನಿರ್ದಿಷ್ಟವಿಲ್ಲದ ಮೌಲ್ಯ ಮರುಹೊಂದಿಸಿ"]
+    
+    C --> E["💾 ಚರದಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ"]
+    C --> F["🔗 ವ್ಯಕ್ತಪಡಿಸುವಲ್ಲಿ ಬಳಸುವುದು"]
+    C --> G["📞 ಫಂಕ್ಷನಿಗೆ ಪಾಸ್ ಮಾಡಿ"]
+    
+    D --> H["⚠️ ಸಾಮಾನ್ಯವಾಗಿ ಉಪಯುಕ್ತವಲ್ಲ"]
+    
+    I["📋 ಮರುಹೊಂದಿಸುವ ಮೌಲ್ಯದ ಬಳಕೆ"] --> I1["ಫಲಿತಾಂಶಗಳನ್ನು ಲెక్కಿಸಿ"]
+    I --> I2["ಇನ್ಪುಟ್ ಪರಿಶೀಲಿಸಿ"]
+    I --> I3["ಡೇಟಾವನ್ನು ಪರಿವರ್ತಿಸಿ"]
+    I --> I4["ವಸ್ತುಗಳನ್ನು ರಚಿಸಿ"]
+    
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style I fill:#e3f2fd
+```
+### 🔄 **ಮರುಪಡೆಯುವ ಮೌಲ್ಯಗಳ ಪರಿಶೀಲನೆ: ಫಲಿತಾಂಶಗಳನ್ನು ಪಡೆಯುವುದು**
+
+**ನೀವು ಮರುಪಡೆಯುವ ಮೌಲ್ಯವನ್ನು ಹೇಗೆ ತಿಳಿದುಕೊಳ್ಳುತ್ತೀರಿ:**
+- ಕಾರ್ಯದೊಳಗಿನ `return` ಹೇಳಿಕೆಯಿಂದ ನಂತರದ ಕೋಡ್‌ಗೆ ಏನಾಗುತ್ತದೆ?
+- ಮುದ್ರಿಸುವ ಬದಲು ಮೌಲ್ಯಗಳನ್ನು ಹಿಂತಿರುಗಿಸುವುದು ಯಾಕೆ ಉತ್ತಮ?
+- ಕಾರ್ಯವು ವಿಭಿನ್ನ ಪ್ರಕಾರಗಳ ಮೌಲ್ಯಗಳನ್ನು ಹಿಂತಿರುಗಿಸಬಹುದುವೇ (ಸರಣಿ, ಸಂಖ್ಯೆ, ಬೂಲಿಯನ್)?
+
+```mermaid
+pie title "ಸಾಮಾನ್ಯ ಮರಳುವ ಮೌಲ್ಯ ಪ್ರಕಾರಗಳು"
+    "Strings" : 30
+    "Numbers" : 25
+    "Objects" : 20
+    "Booleans" : 15
+    "Arrays" : 10
+```
+> **ಪ್ರಧಾನ ತತ್ವ:** ಮೌಲ್ಯ ಹಿಂತಿರುಗಿಸುವ ಕಾರ್ಯಗಳು ಹೆಚ್ಚು ಬಹುಮುಖವಾಗಿವೆ ಏಕೆಂದರೆ ಕರೆಮಾಡುವವರು ಫಲಿತಾಂಶದೊಂದಿಗೆ ಏನು ಮಾಡಬೇಕೆಂದು ತಲೋರುತಾರೆ. ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಮాడ್ಯುಲರ್ ಮತ್ತು ಪುನಃಬಳಕೆಗೊಳಿಸುವಂತೆ ಮಾಡುತ್ತದೆ!
+
+## ಕಾರ್ಯಗಳನ್ನು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳಾಗಿ ಪ್ಯಾಸು ಮಾಡುವುದು
+
+ಕಾರ್ಯಗಳನ್ನು ಬೇರೆ ಕಾರ್ಯಗಳಿಗೆ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳಾಗಿ ಪಾಸು ಮಾಡಬಹುದು. ಮೊದಲಿಗೆ ಇದು ಸವಾಲಿನಿರ್ಥಕವಾಗಬಹುದು, ಆದರೆ ಇದು ಸ್ತಿತಿಹೀನ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಮಾದರಿಗಳನ್ನು ಸಾದರಪಡಿಸುತ್ತದೆ.
+
+ಈ ಮಾದರಿ ಸಾಮಾನ್ಯವಾಗಿ "ಏನಾದರೂ ಸಂಭವಿಸಿದಾಗ, ಇನ್ನು ಒಂದು ಕಾರ್ಯವನ್ನ ಮಾಡಿ" ಅಂತ ಹೇಳಬೇಕಾಗಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, "ಟೈಮರ್ ಮುಗಿದಾಗ, ಈ ಕೋಡ್ ರನ್ ಆಗಲಿ" ಅಥವಾ "ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಈ ಕಾರ್ಯವನ್ನು ಕರೆಮಾಡಿ" ಎಂದು.
+
+`setTimeout` ಎಂಬ ಒಳಗೊಂಡ ಕಾರ್ಯವನ್ನು ನೋಡೋಣ, ಇದು ಕೆಲವು ಸಮಯವನ್ನು ಕಾಯುತ್ತದೆ ಮತ್ತು ನಂತರ ಕೆಲವು ಕೋಡ್ ರನ್ ಮಾಡುತ್ತದೆ. ನಮಗೆ ಅದಕ್ಕೆ ಯಾವ ಕೋಡ್ ರನ್ ಮಾಡಬೇಕು ಎಂದು ಹೇಳಬೇಕಾಗುತ್ತದೆ – ಕಾರ್ಯವನ್ನು ಪ್ಯಾರಾಮೀಟರ್ ಸಹಾಯದಿಂದ ಪಾಸು ಮಾಡಲು ಇದು ಸೂಕ್ತ ಉದಾಹರಣೆ!
+
+ಈ ಕೋಡ್ ಪ್ರಯತ್ನಿಸಿ – 3 ಸೆಕೆಂಡಿನ ಮೇಲೆ ಸಂದೇಶವನ್ನು ನೋಡುತ್ತೀರಿ:
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// ಟೈಮರ್ ಮೌಲ್ಯವು ಮಿಲಿಸೆಕೆಂಡು ಗಳಲ್ಲಿ ಇದೆ
+setTimeout(displayDone, 3000);
+```
+
+ನೀವು `displayDone` ಅನ್ನು `setTimeout` ಗೆ (ಕೊಳಕುಗಳಿರದೆ) ಪಾಸು ಮಾಡುತ್ತಿದ್ದೀರಿ. ನಾವು ಕಾರ್ಯವನ್ನು ಸ್ವತಃ ಕರೆ ಮಾಡುತ್ತಿಲ್ಲ – ನಾವು ಅದನ್ನು `setTimeout` ಗೆ ನೀಡುತ್ತಿದ್ದು "3 ಸೆಕೆಂಡಿನ ಮೇಲೆ ಕರೆಮಾಡು" ಎಂದು ಹೇಳುತ್ತಿದ್ದೇವೆ.
+
+### ಅನಾಮಧೇಯ ಕಾರ್ಯಗಳು
+
+ಏಕ ಪ್ರಕರಣಕ್ಕೆ ಮಾತ್ರ ಕಾರ್ಯ ಬೇಕಾದಾಗ ಮತ್ತು ಅದಕ್ಕೆ ಹೆಸರು ನೀಡಬೇಕಾಗಿಲ್ಲದಿದ್ದಾಗ? ಯೋಚಿಸಿ – ನೀವು ಕಾರ್ಯವನ್ನು ಒಮ್ಮೆ ಮಾತ್ರ ಬಳಸದಿದ್ದರೆ, ಅದಕ್ಕಾಗಿ ಹೆಚ್ಚುವರಿ ಹೆಸರು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅತಿವ್ಯವಸ್ಥೆಗೊಳಿಸುತ್ತದೆಯೇ?
+
+ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಮಗೆ **ಅನಾಮಧೇಯ ಕಾರ್ಯಗಳು** (ಹೆಸರು ಇರುವುದಿಲ್ಲದ ಕಾರ್ಯಗಳು) ರಚಿಸಲು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತದೆ, ನೀವು ಅವುಗಳನ್ನು ನೀವು ಅವಶ್ಯಕವಾಗಿರುವ ಸ್ಥಳದಲ್ಲೇ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.
+
+ನಮ್ಮ ಟೈಮರ್ ಉದಾಹರಣೆಯನ್ನು ಅನಾಮಧೇಯ ಕಾರ್ಯ ಬಳಸಿ ಮರು ಬರೆಯುವುದು ಹೀಗಿದೆ:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+ಈದು ಅದೇ ಫಲಿತಾಂಶ, ಆದರೆ ಕಾರ್ಯವು ನೇರವಾಗಿ `setTimeout` ಕರೆ ಒಳಗೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ, ಕೆಲವೊಮ್ಮೆ ಬೇರೆ ಕಾರ್ಯ ವ್ಯಾಖ್ಯಾನ ಅಗತ್ಯವಿಲ್ಲ.
+
+### ಫ್ಯಾಟ್ ಅರೊ (arrow) ಕಾರ್ಯಗಳು
+
+ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇನ್ನೂ ಸಂಕ್ಷಿಪ್ತವಾದ ಕಾರ್ಯಗಳನ್ನು ಬರೆಯಲು **ಅರೊ ಕಾರ್ಯಗಳು** ನಿವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅವು `=>` (ಅರೊ ರೂಪವೆಂದು ಕಾಣುತ್ತದೆ) ಉಪಯೋಗಿಸುತ್ತವೆ ಮತ್ತು ಡೆವಲಪರ್‌ಗಳಲ್ಲಿ ತುಂಬಾ ಜನಪ್ರಿಯವಾಗಿವೆ.
+
+ಅರೊ ಕಾರ್ಯಗಳು `function` ಕೀವರ್ಡ್ ಬಿಟ್ಟುಲಾಗಿ, ಹೆಚ್ಚು ಸಂಕ್ಷಿಪ್ತ ಭಾಷೆಯನ್ನು ಬರೆಯಲು ಸುಲಭ.
+
+ನಮ್ಮ ಟೈಮರ್ ಉದಾಹರಣೆ ಅರೊ ಕಾರ್ಯ ಬಳಸಿ ಹೀಗಿದೆ:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+`()` ಪ್ಯಾರಾಮೀಟರ್ ಇಡಲು ಜಾಗ (ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಖಾಲಿ), ನಂತರ `=>` ಮತ್ತು ಕೊನೆಗೆ ವರ್ಗಾಕಾರ ಹಾಳೆಗಳೊಳಗಿನ ಕಾರ್ಯ ದೇಹ. ಇದು ಶೈಲಿಯಲ್ಲಿ ಹೆಚ್ಚು ಸಂಕ್ಷಿಪ್ತ, ಆದರೆ ಕಾರ್ಯನಿರ್ವಹಣೆಯಲ್ಲಿ ಸಮಾನ.
+
+```mermaid
+flowchart LR
+    A["📝 ಫಂಕ್ಷನ್ ಶೈಲಿಗಳು"] --> B["ಸಾಂಪ್ರದಾಯಿಕ"]
+    A --> C["ಆರೋ"]
+    A --> D["ಅನಾಮಿಕ"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["ಹಾಯ್ಸ್ಟ್ ಆಗಿದೆ"]
+    B --> B3["ಹೆಸರಿಸಿದ"]
+    
+    C --> C1["const name = () => {}"]
+    C --> C2["ಸಂಕ್ಷಿಪ್ತ ವಾಕ್ಯರಚನೆ"]
+    C --> C3["ಆಧುನಿಕ ಶೈಲಿ"]
+    
+    D --> D1["function() {}"]
+    D --> D2["ಹೆಸರು ಇಲ್ಲ"]
+    D --> D3["ಒಂದು ಬಾರಿ ಬಳಸುವದು"]
+    
+    E["⏰ ಬಳಸುವ ಸಮಯ"] --> E1["ಸಾಂಪ್ರದಾಯಿಕ: ಮರುಬಳಸಬಹುದಾದ ಫಂಕ್ಷನ್ಗಳು"]
+    E --> E2["ಆರೋ: ಸಂಕ್ಷಿಪ್ತ ಕಾಲ್‌ಬ್ಯಾಕ್ಗಳು"]
+    E --> E3["ಅನಾಮಿಕ: イವೆಂಟ್ ನಿರ್ವಾಹಕರು"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+### ಪ್ರತಿಯೊಂದು ರೀತಿ ಬಳಸುವಾಗ
+
+ಯಾವಾಗ ಯಾವ ವಿಧಾನವನ್ನು ಬಳಸಬೇಕು? ಪ್ರಾಯೋಗಿಕ ಮಾರ್ಗದರ್ಶಿ: ನೀವು ಕಾರ್ಯವನ್ನು ಎಷ್ಟು ಬಾರಿ ಬಳಸುತ್ತೀರೋ ತಿಳಿದು, ಬಹಳ ಸಲಗಳನ್ನು ಬಳಸಲು ಹೆಸರು ನೀಡಿ ಮತ್ತು ಪ್ರತ್ಯೇಕವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಿ. ಒಮ್ಮೆಕೂಡುವ ತನ್ನ ವಿಶೇಷ ಬಳಸಿಕೋವುದಾದರೆ, ಅನಾಮಧೇಯ ಕಾರ್ಯವನ್ನು ಪರಿಗಣಿಸಿ. ಅರೊ ಕಾರ್ಯ ಮತ್ತು ಸಾಂಪ್ರದಾಯಿಕ ಶೈಲಿ ಎರಡೂ ಸರಾಗ ಆಯ್ಕೆಗಳು, ಆದರೂ ಅರೊ ಕಾರ್ಯಗಳು ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್‌ಬೇಸ್‌ನಲ್ಲಿ ಸಾಮಾನ್ಯ.
+
+### 🎨 **ಕಾರ್ಯ ಶೈಲಿಗಳು ಪರಿಶೀಲನೆ: ಸರಿಯಾದ ಶೈಲಿಯನ್ನು ಆರಿಸುವುದು**
+
+**ನಿಮ್ಮ ಶೈಲಿ ತಿಳಿವಳಿಕೆ ಪರೀಕ್ಷಿಸಿ:**
+- ಯಾವಾಗ ನೀವು ಪರಂಪರাগত ಕಾರ್ಯ ಶೈಲಿಗೆ ಬದಲಿ ಅರೊ ಕಾರ್ಯಗಳನ್ನು ಆಯ್ಕೆಮಾಡಬಹುದು?
+- ಅನಾಮಧೇಯ ಕಾರ್ಯಗಳ ಪ್ರಮುಖ ಲಾಭವೇನು?
+- ಹೆಸರು ಇರುವ ಕಾರ್ಯ ಒ匿名ಕಾರ್ಯಕ್ಕಿಂತ ಉತ್ತಮವಾಗಿರುವ ಸ್ಥಿತಿಯನ್ನು ನೀವು ಯೋಚಿಸಬಹುದೇ?
+
+```mermaid
+quadrantChart
+    title ಕಾರ್ಯ ಆಯ್ಕೆ ನಿರ್ಣಯ ಮಾಟ್ರಿಕ್ಸ್
+    x-axis ಸರಳ --> ಸಂಕೀರ್ಣ
+    y-axis ಒಂದೇ ಬಾರಿ ಬಳಕೆ --> ಪುನರ್ವನ್ನು ಮಾಡುವ
+    quadrant-1 ಬಾಣದ ಕಾರ್ಯಗಳು
+    quadrant-2 ಹೆಸರಾಂತ ಕಾರ್ಯಗಳು
+    quadrant-3 ಅನಾಮಿಕ ಕಾರ್ಯಗಳು
+    quadrant-4 ಸಾಂಪ್ರದಾಯಿಕ ಕಾರ್ಯಗಳು
+    
+    Event Handlers: [0.3, 0.2]
+    Utility Functions: [0.7, 0.8]
+    Callbacks: [0.2, 0.3]
+    Class Methods: [0.8, 0.7]
+    Mathematical Operations: [0.4, 0.6]
+```
+> **ಆಧುನಿಕ ಧೋರಣೆ:** ಅರೊ ಕಾರ್ಯಗಳು ಸಂಕ್ಷಿಪ್ತ ಶೈಲಿಗಾಗಿ ಬಹು ಡೆವಲಪರ್‌ಗಳ ಮುಖಂಡ ಆಯ್ಕೆ ಆಗುತ್ತಿರುವುದು, ಆದರೂ ಸಾಂಪ್ರದಾಯಿಕ ಕಾರ್ಯಗಳಿಗೂ ತಮ್ಮ ಸ್ಥಳವಿದೆ!
+
+---
+
+## 🚀 ಸವಾಲು
+
+ಕಾರ್ಯಗಳು ಮತ್ತು ವಿಧಾನಗಳ ಮಧ್ಯೆ ವ್ಯತ್ಯಾಸವನ್ನು ಒಂದು ವಾಕ್ಯದಲ್ಲಿ ವर्णಿಸಬಹುದುವೇ? ಪ್ರಯತ್ನಿಸಿ!
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಅನುವಾದ: ಈ ಪಾಠದಲ್ಲಿ ಪ್ರಸ್ತುತಪಡಿಸಿದ ವಿವಿಧ ಕಾರ್ಯ ಕಲ್ಪನೆಗಳನ್ನು ಒಳಗೊಂಡ ಗಣಿತ ಕಾರ್ಯಗಳ ಉಪಯುಕ್ತ ಗ್ರಂಥಾಲಯವನ್ನು ರಚಿಸಿ, ಇದರಲ್ಲಿ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು, ಪೂರ್ವನಿಯೋಜಿತ ಮೌಲ್ಯಗಳು, ಮರುಪಡೆಯುವ ಮೌಲ್ಯಗಳು ಮತ್ತು ಅರೊ ಕಾರ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿರಲಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** `mathUtils.js` ಎಂಬ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಅನ್ನು ರಚಿಸಿ, ಈ ಕೆಳಗಿನ ಕಾರ್ಯಗಳೊಂದಿಗೆ:
+1. ಎರಡು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಂಡು ಅವುಗಳ ಮೊತ್ತ ಹಿಂತಿರುಗಿಸುವ `add` ಕಾರ್ಯ
+2. ಪೂರ್ವನಿಯೋಜಿತ ಮೌಲ್ಯಗಳೊಂದಿಗೆ `multiply` ಕಾರ್ಯ (ಎರಡನೇ ಪ್ಯಾರಾಮೀಟರ್ ಪೂರ್ವನಿಯೋಜಿತ గా 1)
+3. ಒಂದು ಸಂಖ್ಯೆಯನ್ನು ತೆಗೆದುಕೊಂಡು ಅದರ ಚದರ ಹಿಂತಿರುಗಿಸುವ ಅರೊ ಕಾರ್ಯ `square`
+4. ಇನ್ನೊಂದು ಕಾರ್ಯವನ್ನು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳಾಗಿ ತೆಗೆದುಕೊಂಡು ಎರಡು ಸಂಖ್ಯೆಗಳ ಮೇಲೆ ಅನ್ವಯಿಸುವ `calculate` ಕಾರ್ಯ
+5. ಎಲ್ಲಾ ಕಾರ್ಯಗಳನ್ನು ಸಮರ್ಪಕ ಪರೀಕ್ಷಾ ಪ್ರಕರಣಗಳೊಂದಿಗೆ ಕರೆಮಾಡಿ ಪ್ರದರ್ಶಿಸುವುದು
+
+[ಏಜೆಂಟ್ режим್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಪಡೆಯಿರಿ.
+
+## ಪಶ್ಚಾತ್ತಾಪ ಪತ್ರೌಪಚಾರಿಕ ಪ್ರಶ್ನೋತ್ತರ
+[ಪಶ್ಚಾತ್ತಾಪ ಪತ್ರೌಪಚಾರಿಕ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಅಧ್ಯಯನ
+
+ಅರೊ ಕಾರ್ಯಗಳ ಬಗ್ಗೆ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಓದಲು ಇದು ಉತ್ತಮ [ಅರೊ ಕಾರ್ಯಗಳ ಬಗ್ಗೆ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions). ಕಾರ್ಯ ಬರೆಯುವ ಅಭ್ಯಾಸ ಮಾಡಿ ಮತ್ತು ನಂತರ ಈ ಶೈಲಿಯಲ್ಲಿ ಮರುಬರೆಯಿರಿ.
+
+## ನಿಯೋಜನೆ
+
+[ ಕಾರ್ಯಗಳಿಂದ_fname_ಆನಂದ](assignment.md)
+
+---
+
+## 🧰 **ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗಳ ಉಪಕರಣ ಸಂಗ್ರಹ ಸಾರಾಂಶ**
+
+```mermaid
+graph TD
+    A["🎯 ಜಾವಾ ಸ್ಕ್ರಿಪ್ಟ್ ಫಂಕ್ಷನ್ಸ್"] --> B["📋 ಫಂಕ್ಷನ್ ಘೋಷಣೆ"]
+    A --> C["📥 ಪ್ಯಾರಾಮೀಟರ್ಗಳು"]
+    A --> D["📤 ಮರುಪಡೆಯುವ ಮೌಲ್ಯಗಳು"]
+    A --> E["🎨 ಆಧುನಿಕ ವ್ಯಾಕರಣ"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["ವಿವರಾತ್ಮಕ ಹೆಸರಿಡುವಿಕೆ"]
+    B --> B3["ಮರುಬಳಕೆಗೊಳ್ಳಬಹುದಾದ ಕೋಡ್ ಬ್ಲಾಕ್ಸ್"]
+    
+    C --> C1["ಇನ್‌ಪುಟ್ ಡೇಟಾ"]
+    C --> C2["ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳು"]
+    C --> C3["ಹೆಚ್ಚಿನ ಪ್ಯಾರಾಮೀಟರ್ಗಳು"]
+    
+    D --> D1["return ಸ್ಟೇಟ್ಮೆಂಟ್"]
+    D --> D2["ಫಂಕ್ಷನ್ ಬಿಟ್ಟುಹೋಗು"]
+    D --> D3["ಡೇಟಾವನ್ನು ಹಿಂದಿರುಗಿಸು"]
+    
+    E --> E1["ಏರೋ ಫಂಕ್ಷನ್ಸ್: () =>"]
+    E --> E2["ಅನಾಮಿಕ ಫಂಕ್ಷನ್ಸ್"]
+    E --> E3["ಹೈಯರ್-ಆರ್ಡರ್ ಫಂಕ್ಷನ್ಸ್"]
+    
+    F["⚡ ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳು"] --> F1["ಕೋಡ್ ಮರುಬಳಕೆ"]
+    F --> F2["ಉತ್ತಮ ಸಂಘಟನೆ"]
+    F --> F3["ಸುಲಭ ಪರೀಕ್ಷೆ"]
+    F --> F4["ಮಾಡ್ಯೂಲರ್ ವಿನ್ಯಾಸ"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+---
+
+## 🚀 ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗಳು ಮಾಸ್ಟರೈ ಸಮಯರೇಖೆ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದವುಗಳು**
+- [ ] ನಿಮ್ಮ ಪ್ರಿಯ ಸಂಖ್ಯೆಯನ್ನು ಹಿಂತಿರುಗಿಸುವ ಸರಳ ಕಾರ್ಯವನ್ನು ಬರೆಯಿರಿ
+- [ ] ಎರಡೂ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಂಡು ಆದುತ್ತ ಪ್ರಕ್ರಿಯೆಯ ಕಾರ್ಯವನ್ನು ರಚಿಸಿ
+- [ ] ಪರಂಪರೆಯ 함수 ಅನ್ನು ಅರೋ ಫಂಕ್ಷನ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಗೆ ಪರಿವರ್ತಿಸಲು ಪ್ರಯತ್ನಿಸಿ
+- [ ] ಸವಾಲಿನ ಅಭ್ಯಾಸ ಮಾಡಿ: ಫಂಕ್ಷನ್‌ಗಳು ಮತ್ತು ವಿಧಾನಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ವಿವರಿಸಿ
+
+### 🎯 **ಈ గంటದಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾಗಿದೆ**
+- [ ] ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಯಾವುದೇ ಗೊಂದಲಮಯ概念ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+- [ ] GitHub Copilot ಸವಾಲಿನಿಂದ ಗಣಿತ ಉಪಕರಣಗಳ ಗ್ರಂಥಾಲಯವನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ಯಾವುದಾದರೂ ಫಂಕ್ಷನ್ ಅನ್ನು ಪ್ಯಾರಾಮೀಟರ್ ಆಗಿ ಬಳಸುವ ಒಂದು ಫಂಕ್ಷನ್ ರಚಿಸಿ
+- [ ] ಮೂಲಭೂತ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳೊಂದಿಗೆ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬರೆಯಲು ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] ಫಂಕ್ಷನ್ ಮರುಮೌಲ್ಯಗಳಿಗೆ ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್‌ಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ಫಂಕ್ಷನ್ ಪ್ರಾಬಲ್ಯ**
+- [ ] "ಫಂಕ್ಷನ್‌ಗಳ ಸವಾರಿ" ಹಿಂದಿನ ಕಾರ್ಯವನ್ನು ಸೃಜನಾತ್ಮಕತೆಯಿಂದ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ನೀವು ಬರೆದ ಕೆಲವು ಪುನರಾವರ್ತಿತ ಕೋಡ್ ಅನ್ನು ಪುನಃಬಳಕೆಯ ಫಂಕ್ಷನ್‌ಗಳಾಗಿ ಮಾರ್ಪಡಿ
+- [ ] ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಮಾತ್ರ ಬಳಸಿ (ಗೋಲ್ಬಲ್ ವೇರಿಯಬಲ್ಸ್ ಇಲ್ಲದೆ) ಸಣ್ಣ ಕ್ಯಾಲ್ಕ್ಯುಲೇಟರ್ ನಿರ್ಮಿಸಿ
+- [ ] `map()` ಮತ್ತು `filter()` ಹೀಗಿನ ಅರೋ ಫಂಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ಅರೋ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಅಭ್ಯಾಸಮಾಡಿ
+- [ ] ಸಾಮಾನ್ಯ ಕಾರ್ಯಗಳಿಗೆ ಉಪಯುಕ್ತ ಫಂಕ್ಷನ್‌ಗಳ ಸಂಕಲನವನ್ನು ರಚಿಸಿ
+- [ ] ಹೈಯರ್-ಆರ್ಡರ್ ಫಂಕ್ಷನ್‌ಗಳು ಮತ್ತು ಕಾರ್ಯಾತ್ಮಕ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಕನ್ಸೆಪ್ಟ್‌ಗಳ ಅಧ್ಯಯನ ಮಾಡಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ರೂಪಾಂತರ**
+- [ ] ಕ್ಲೋಷರ್‌ಗಳು ಮತ್ತು ಸ್ಕೋಪ್ ಹೀಗಿನ ಉನ್ನತ ಫಂಕ್ಷನ್ ಕನ್ಸೆಪ್ಟ್‌ಗಳನ್ನು ಆಳವಾಗಿ ಕಲಿಯೋಣ
+- [ ] ತುಂಬಾ ಫಂಕ್ಷನ್ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸುವ ಪ್ರಾಜೆಕ್ಟ್ ನಿರ್ಮಿಸಿ
+- [ ] ಫಂಕ್ಷನ್ ದಸ್ತಾವೇಜಿಕೆಯುಳ್ಳ ಮುಕ್ತ ಮೂಲಕ್ಕೆ ಆಸಕ್ತಿ ನೀಡಿ
+- [ ] ಮತ್ತೊಬ್ಬರಿಗೆ ಫಂಕ್ಷನ್‌ಗಳು ಮತ್ತು ಭಿನ್ನ ಸಿಂಟ್ಯಾಕ್ಸ್ ಶೈಲಿಗಳ ಬಗ್ಗೆ ಬೋಧಿಸಿ
+- [ ] ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಕಾರ್ಯಾತ್ಮಕ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಪರಿಗಣನೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿ
+- [ ] ಭವಿಷ್ಯದ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಪುನಃಬಳಕೆಯ ಫಂಕ್ಷನ್‌ಗಳ ವೈಯಕ್ತಿಕ ಗ್ರಂಥಾಲಯವನ್ನು ರಚಿಸಿ
+
+### 🏆 **ಅಂತಿಮ ಫಂಕ್ಷನ್ ಚಾಂಪಿಯನ್ ಪರಿಶೀಲನೆ**
+
+**ನಿಮ್ಮ ಫಂಕ್ಷನ್ ಪ್ರಾಬಲ್ಯವನ್ನು ಆಚರಿಸಿ:**
+- ಇವರೆಗೆ ನೀವು ರಚಿಸಿದ ಅತ್ಯಂತ ಉಪಯುಕ್ತ ಫಂಕ್ಷನ್ ಯಾವುದು?
+- ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಕಲಿತ ನಂತರ你的代码 ಸಂಘಟನೆ ಬಗ್ಗೆ ನಿನ್ನ ಸೇರಿದ ವಿಧನದಲ್ಲಿ ಯಾವ ಬದಲಾವಣೆ ಬಂತು?
+- ಯಾವ ಫಂಕ್ಷನ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ನೀವು ಮೆಚ್ಚುತ್ತೀರಿ ಮತ್ತು ಏಕೆ?
+- ನೀವು ಏನಾದರೂ ನೈಜ ಜಗತ್ತಿನ ಸಮಸ್ಯೆಯನ್ನು ಫಂಕ್ಷನ್ ಬರೆಯುವುದರ ಮೂಲಕ ಪರಿಹರಿಸುತ್ತೀರಾ?
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಫังก್ಶನ್ ವಿಶ್ವಾಸ ಅಭಿವೃದ್ಧಿ
+    section ಇಂದು
+      ಸಿಂಟ್ಯಾಕ್ಸ್‌ನಿಂದ ಗೊಂದಲ: 3: You
+      ಮೂಲಭೂತಗಳನ್ನು ಅರಿತುಕೊಳ್ಳುವುದು: 4: You
+      ಸರಳ ಫังก್ಶನ್ ರಚನೆ: 5: You
+    section ಈ ವಾರ
+      ಪ್ಯಾರಾಮೀಟರ್ ಬಳಕೆ: 4: You
+      ಮೌಲ್ಯಗಳನ್ನು ಹಿಂತಿರುಗಿಸುವಿಕೆ: 5: You
+      ಆಧುನಿಕ ಸಿಂಟ್ಯಾಕ್ಸ್: 5: You
+    section ಮುಂದಿನ ತಿಂಗಳು
+      ಫังก್ಶನ್ ಸಂಯೋಜನೆ: 5: You
+      ಮುಂದುವರಿದ ಮಾದರಿಗಳು: 5: You
+      ಇತರರಿಗೆ ಬೋಧನೆ: 5: You
+```
+> 🎉 **ನೀವು ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ನ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ಕನ್ಸೆಪ್ಟ್‌ಗಳನ್ನೊಳಗೊಳ್ಳುತ್ತೀರಿ!** ಫಂಕ್ಷನ್‌ಗಳು ದೊಡ್ಡ ಕಾರ್ಯಕ್ರಮಗಳ ಕಟ್ಟಡದ ಇಟ್ಟಿಗೆಗಳಾಗಿವೆ. ನೀವು ತಯಾರಿಸುವ ಪ್ರತಿ ಅಪ್ಲಿಕೇಶನ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸಿ ಕೋಡ್ ಅನ್ನು ಸಂಘಟಿಸಲು, ಮರುಬಳಕೆಗೆ, ಮತ್ತು ಸಂರಚಿಸಲು ಬಳಸುತ್ತದೆ. ನೀವು ಈಗ ಲಾಜಿಕ್ ಅನ್ನು ಪುನಃಬಳಕೆಗೆ ಸಾದರಪಡಿಸಬಹುದಾದ ഘಟಕಗಳಾಗಿ ಪ್ಯಾಕೇಜ್ ಮಾಡುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದೀರಿ, ಇದರಿಂದ ನೀವು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ತක්ෂಣಿಕ ಪ್ರೋಗ್ರಾಮರ್ ಆಗಿದ್ದೀರಿ. ಹೆಚ್ಚು ಪ್ರಭಾವಿ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಲೋಕಕ್ಕೆ ಸ್ವಾಗತ! 🚀
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಎಚ್ಚರಿಕೆ**:  
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯನ್ನು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ ಸಹ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳಾಗಬಹುದು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದಾಗಿದೆ ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಅಸಲಿಯಾದ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಅಧಿಕೃತ ವನರಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಸಲಹೆ ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಗಾಗಿ ಯಾವುದೇ ತಪ್ಪು ಗ್ರಹಿಕೆಗಳು ಅಥವಾ ತಳಿರುತInterpretations ಕೆಲವರಿಗೂ ಹೊಣೆಗಾರರಾಗದು.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/2-js-basics/2-functions-methods/assignment.md

@@ -0,0 +1,82 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8328f58f4593b4671656ff8f4b2edbd9",
+  "translation_date": "2026-01-08T12:31:14+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "kn"
+}
+-->
+# Functions ನೊಂದಿಗೆ ಮನರಂಜನೆ
+
+## ಸೂಚನೆಗಳು
+
+ಈ ಹುದ್ದೆಯಲ್ಲಿ, ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಂಕ್ಷನ್‌ಗಳು, ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು, ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳು ಮತ್ತು_RETURN_ ಸ್ಟೇಟ್‌ಮೆಂಟ್‌ಗಳ ಬಗ್ಗೆ ಕಲಿತಿರುವ ಸಂकल्पನೆಗಳನ್ನು ಬಲಪಡಿಸಲು ವಿವಿಧ ಬಗೆಯ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸುವ ಅಭ್ಯಾಸ ಮಾಡುತ್ತೀರಿ.
+
+`functions-practice.js` ಎಂಬ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ ಅನ್ನು ರಚಿಸಿ ಮತ್ತು ಕೆಳಗಿನ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ:
+
+### ಭಾಗ 1: ಮೂಲ ಫಂಕ್ಷನ್‌ಗಳು
+1. **ಯಾವುದೇ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳದ, "Hello!" ಅನ್ನು ಕಾನ್ಸೋಲ್ನಲ್ಲಿ ಲಾಗ್ ಮಾಡುವ `sayHello` ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಿ.**
+
+2. **`name` ಎಂಬ ಪ್ಯಾರಾಮೀಟರ್ ತೆಗೆದುಕೊಳ್ಳುವ ಮತ್ತು ಕಾನ್ಸೋಲ್ನಲ್ಲಿ "Hi, my name is [name]" ಎಂಬ ಸಂದೇಶವನ್ನು ಲಾಗ್ ಮಾಡುವ `introduceYourself` ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಿ.**
+
+### ಭಾಗ 2: ಡೀಫಾಲ್ಟ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳೊಂದಿಗೆ ಫಂಕ್ಷನ್‌ಗಳು
+3. **`name` (ಅವಶ್ಯಕ) ಮತ್ತು `greeting` (ಐಚ್ಛಿಕ, ಡೀಫಾಲ್ಟ್ "Hello") ಎಂಬ ಎರಡು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ, ಮತ್ತು `[greeting], [name]!` ಎಂಬ ಸಂದೇಶವನ್ನು ಕಾನ್ಸೋಲ್ನಲ್ಲಿ ಲಾಗ್ ಮಾಡುವ `greetPerson` ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಿ.**
+
+### ಭಾಗ 3: ಮೌಲ್ಯಗಳನ್ನು ಹಿಂತಿರುಗಿಸುವ ಫಂಕ್ಷನ್‌ಗಳು
+4. **`num1` ಮತ್ತು `num2` ಎಂಬ ಎರಡು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ ಮತ್ತು ಅವುಗಳ ಮೊತ್ತವನ್ನು ಹಿಂತಿರುಗಿಸುವ `addNumbers` ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಿ.**
+
+5. **`firstName` ಮತ್ತು `lastName` ಎಂಬ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ ಮತ್ತು ಪೂರ್ಣ ಹೆಸರನ್ನು ಒಂದು ಸಾಲಿನಲ್ಲಿ ಹಿಂತಿರುಗಿಸುವ `createFullName` ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಿ.**
+
+### ಭಾಗ 4: ಎಲ್ಲವನ್ನೂ ಒಂದೇಗೂ మిశ್ರಣ ಮಾಡಿ
+6. **`billAmount` (ಅವಶ್ಯಕ) ಮತ್ತು `tipPercentage` (ಐಚ್ಛಿಕ, ಡೀಫಾಲ್ಟ್ 15) ಎಂಬ ಎರಡು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ, ಮತ್ತು ಟಿಪ್ ಮೊತ್ತವನ್ನು ಲೆಕ್ಕ ಹಾಕಿ ಹಿಂತಿರುಗಿಸುವ `calculateTip` ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಿ.**
+
+### ಭಾಗ 5: ನಿಮ್ಮ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ
+ಪ್ರತಿಯೊಂದು ಫಂಕ್ಷನ್‌ಗಳ ವೈಖರಿ ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ಫಲಿತಾಂಶಗಳನ್ನು `console.log()` ಮೂಲಕ ಪ್ರದರ್ಶಿಸಲು ಫಂಕ್ಷನ್ ಕರೆಗಳನ್ನು ಸೇರಿಸಿ.
+
+**ಉದಾಹರಣೆ ಪರೀಕ್ಷಾ ಕರೆಯುವಿಕೆಗಳು:**
+```javascript
+// ನಿಮ್ಮ ಕಾರ್ಯಗಳನ್ನು ಇಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ
+sayHello();
+introduceYourself("Sarah");
+greetPerson("Alex");
+greetPerson("Maria", "Hi");
+
+const sum = addNumbers(5, 3);
+console.log(`The sum is: ${sum}`);
+
+const fullName = createFullName("John", "Doe");
+console.log(`Full name: ${fullName}`);
+
+const tip = calculateTip(50);
+console.log(`Tip for $50 bill: $${tip}`);
+```
+
+## ರುಬ್ರಿಕ್
+
+| ಮಾನದಂಡಗಳು | ಅತ್ಯುತ್ತಮ | ಸಮರ್ಪಕ | ಸುಧಾರಣೆಯ ಅಗತ್ಯವಿದೆ |
+| -------- | --------- | -------- | ----------------- |
+| **ಫಂಕ್ಷನ್ ರಚನೆ** | ಎಲ್ಲಾ 6 ಫಂಕ್ಷನ್‌ಗಳು ಸರಿಯಾದ ವಾಕ್ಯರಚನೆ ಮತ್ತು ಹೆಸರೀಕರಣ ನಿಯಮಗಳೊಂದಿಗೆ ಸರಿಯಾಗಿ ಅನುಷ್ಠಾನಗೊಳ್ಳುತ್ತವೆ | 4-5 ಫಂಕ್ಷನ್‌ಗಳು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸಲ್ಪಟ್ಟಿವೆ, ಸಣ್ಣ ವಾಕ್ಯರಚನಾ ಸಂಖ್ಯಾ ಸಮಸ್ಯೆಗಳಿವೆ | 3 ಅಥವಾ ಕಡಿಮೆ ಫಂಕ್ಷನ್‌ಗಳು ಅನುಷ್ಠಾನಗೊಳ್ಳಿವೆ ಅಥವಾ ಮುಖ್ಯ ವಾಕ್ಯರಚನಾ ದೋಷಗಳಿವೆ |
+| **ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು ಮತ್ತು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳು** | ಅವಶ್ಯಕ, ಐಚ್ಛಿಕ ಮತ್ತು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ಸರಿಯಾಗಿ ಬಳಸಲಾಗಿದೆ | ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಬಳಸದಿದ್ದರೂ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಸಮಸ್ಯೆಗಳಿರಬಹುದು | ಪ್ಯಾರಾಮೀಟರ್ ಅನುಷ್ಠಾನ ತಪ್ಪಾಗಿದೆ ಅಥವಾ ಇಲ್ಲ |
+| **ಹಿಂತಿರುಗುವ ಮೌಲ್ಯಗಳು** | ಮೌಲ್ಯಗಳನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕಾದ ಫಂಕ್ಷನ್‌ಗಳು ಸರಿಯಾಗಿ ಹಿಂತಿರುಗಿಸುತ್ತವೆ, ಅವುಗಳು ಮಾಡುವುದಿಲ್ಲ ಯಾವುದೆ ಕಾರ್ಯ ಮಾತ್ರ ಮಾಡುತ್ತವೆ | ಹೆಚ್ಚಿನ ಹಿಂತಿರುಗುವ ಮೌಲ್ಯಗಳು ಸರಿಯಾಗಿದೆ, ಸಣ್ಣ ಸಮಸ್ಯೆಗಳಿವೆ | ಹಿಂತಿರುಗುವ ಸ್ಟೇಟ್‌ಮೆಂಟ್‌ಗಳಲ್ಲಿ ಪ್ರಮುಖ ಸಮಸ್ಯೆಗಳು |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಸ್ವಚ್ಛ, ಉತ್ತಮ ಕ್ರಮಿತ ಕೋಡ್, ಅಗತ್ಯವಿರುವ ಬದಲಾವಣೆಗಳ ಹೆಸರಿನೊಂದಿಗೆ ಮತ್ತು ಸರಿಯಾದ ಗುರುತುಬಳಕೆ | ಕೋಡ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಆದರೆ ಸ್ವಚ್ಛತೆ ಕಡಿಮೆ ಅಥವಾ ಉತ್ತಮ ವ್ಯವಸ್ಥೆ ಹೊಂದಿಲ್ಲ | ಕೋಡ್ ಓದಲು ಕಷ್ಟವಾದುದು ಅಥವಾ ದುರ್ಬಲವಾಗಿ ರೂಪಿತವಾಗಿದೆ |
+| **ಪರೀಕ್ಷಣೆ** | ಎಲ್ಲಾ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಸೂಕ್ತ ಫಂಕ್ಷನ್ ಕರೆಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಲಾಗಿದೆ ಮತ್ತು ಫಲಿತಾಂಶಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಪ್ರದರ್ಶನಗೊಳ್ಳುತ್ತದೆ | ಹೆಚ್ಚಿನ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಪರೀಕ್ಷಿಸಲಾಗಿದೆ | ಫಂಕ್ಷನ್‌ಗಳ ಪರೀಕ್ಷೆಯು ಸೀಮಿತ ಅಥವಾ ತಪ್ಪಾಗಿರುತ್ತದೆ |
+
+## ಬೋನಸ್ ಸವಾಲುಗಳು (ಐಚ್ಛಿಕ)
+
+ನಿಮ್ಮನ್ನು ಮತ್ತಷ್ಟು ಸವಾಲು ಹಾಕಲು:
+
+1. **ನಿಮ್ಮ ಫಂಕ್ಷನ್‌ಗಳಲ್ಲಿ ಒಂದರ ಆ್ಯರೋ ಫಂಕ್ಷನ್ ಆವೃತಿಯನ್ನು ರಚಿಸಿ**
+2. **ಮತ್ತು ಯಾವುದಾದರೂ ಫಂಕ್ಷನ್ ಅನ್ನು ಪ್ಯಾರಾಮೀಟರ್ ಆಗಿ ಸ್ವೀಕರಿಸುವ ಫಂಕ್ಷನ್ ರಚಿಸಿ** (ಪಾಠದ setTimeout ಉದಾಹರಣೆಗಳಂತೆ)
+3. **ಪ್ರವೇಶ ಮಾನ್ಯತೆ ಸೇರಿಸಿ** ನಿಮ್ಮ ಫಂಕ್ಷನ್‌ಗಳು ತಪ್ಪಾದ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಚೆನ್ನಾಗಿ ನಿಭಾಯಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಲು
+
+---
+
+> 💡 **ಸೂಚನೆ**: ನಿಮ್ಮ ಬ್ರೌಸರ್‌ ಡೆವಲಪರ್ ಕಾನ್ಸೋಲ್ (F12) ತೆರೆಯುವುದು ಮತ್ತು ನಿಮ್ಮ `console.log()` ವಿವರಣೆಗಳ ಫಲಿತಾಂಶಗಳನ್ನು ನೋಡುವುದು ಮರೆಯಬೇಡಿ!
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಬದ್ಲೋಕೆ**:  
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಭಾಷಾಂತರ ಸೇವೆಯಾದ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿರಬಹುದಾದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಕಾಣಿಸಬಹುದು. ಮೂಲದ ದಸ್ತಾವೇಜಿನ ಮೂಲ ಭಾಷೆಯ ಪ್ರತಿಯನ್ನು ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಕಲ್ಪನೆಗಳು ಅಥವಾ ದ್ವಂದ್ವಾರ್ಥಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/2-js-basics/3-making-decisions/README.md

@@ -0,0 +1,672 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c688385d15dd3645e924ea0ffee8967f",
+  "translation_date": "2026-01-08T12:51:07+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "kn"
+}
+-->
+# ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಭूतಗಳು: ನಿರ್ಧಾರಗಳನ್ನು ಕೈಗೊಳ್ಳುವುದು
+
+![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.kn.png)
+
+> ಸ್ಕೆಚ್‌ನೋಟ್ [Tomomi Imura](https://twitter.com/girlie_mac) ಅವರಿಂದ
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿರ್ಧಾರ ಮಾಡುವ ಸಾಹಸ
+    section ಆಧಾರ
+      ಬೂಲಿಯನ್ ಮೌಲ್ಯಗಳು: 5: You
+      ಹೋಲಿಕೆ ಕಾರ್ಯಾಚರಣೆಗಳು: 4: You
+      ತಾರ್ಕಿಕ ಚಿಂತನೆ: 5: You
+    section ಮೂಲಭೂತ ನಿರ್ಧಾರಗಳು
+      If ಹೇಳಿಕೆಗಳು: 4: You
+      If-Else ತಾರ್ಕಿಕತೆ: 5: You
+      ಸ್ವಿಚ್ ಹೇಳಿಕೆಗಳು: 4: You
+    section ಉನ್ನತ ತಾರ್ಕಿಕತೆ
+      ತಾರ್ಕಿಕ ಕಾರ್ಯಾಚರಣೆಗಳು: 5: You
+      ಸಂಕೀರ್ಣ ಶರತ್ತುಗಳು: 4: You
+      ಟರ್ನರಿ ಅಭಿವ್ಯಕ್ತಿಗಳು: 5: You
+```
+ನಿಮ್ಮ ಆಪ್ಲಿಕೇಶನ್‌ಗಳು ಹೇಗೆ ಚತುರ ನಿರ್ಧಾರಗಳನ್ನು ಕೈಗೊಳ್ಳುತ್ತವೆ ಎಂದು ನೀವು ಎಂದಾದರೂ ಆಸೆಪಡುವಿದ್ದೀರಾ? ನ್ಯಾವಿಗೇಶನ್ ಸಿಸ್ಟಮ್ ವೇಗದ ಮಾರ್ಗವನ್ನು ಹೇಗೆ ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ ಅಥವಾ ಥರ್ಮೋಸ್ಟಾಟ್ ಹೀಟ್ ಆನ್ ಮಾಡಬೇಕೆಂದು ಯಾವಾಗ ತೀರ್ಮಾನಿಸುತ್ತದೆ? ಇದು ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ನಲ್ಲಿ ನಿರ್ಧಾರ ಕೈಗೊಳ್ಳುವ ಮೂಲಭೂತ ತತ್ವ.
+
+ಚಾರ್ಲ್ಸ್ ಬ್ಯಾಬೇಜ್ ಅವರ ಅನಾಲಿಟಿಕಲ್ ಎಂಜಿನ್ ವಿವಿಧ ಪರಿಸ್ಥಿತಿಗಳ ಆಧಾರದ ಮೇಲೆ ಕಾರ್ಯಗಳ ವಿಭಿನ್ನ ಅನುಕ್ರಮಣಗಳನ್ನು ಅನುಸರಿಸಲು ರೂಪಿಸಲಾಗಿದೆ ಹಾಗೆ, ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರೋಗ್ರಾಂಗಳು ಬದಲಾದ ಪರಿಸ್ಥಿತಿಗಳ ಆಧಾರದ ಮೇಲೆ ಆಯ್ಕೆಮಾಡಲೇಬೇಕಾಗುತ್ತದೆ. ಈ ಶಾಖಾಭಿವೃದ್ಧಿ ಮತ್ತು ನಿರ್ಧಾರ ಕೈಗೊಳ್ಳುವ ಸಾಮರ್ಥ್ಯವು ಸ್ಥಿರ ಕೋಡ್ ಅನ್ನು ಪ್ರತ್ಯುತ್ತರ ನೀಡುವ, ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಸಂಚಾಲಿತ ಆ್ಯಪ್‌ಗಳಾಗಿಸಲು ಕಾರಣವಾಗಿದೆ.
+
+ಈ ಪಾಠದಲ್ಲಿ, ನೀವು ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಂಗಳಲ್ಲಿ ಷರತ್ತುಬದ್ಧ ಲಾಜಿಕ್ ಅನ್ನು ಹೇಗೆ ಜಾರಿ ಮಾಡಬೇಕೆಂದು ಕಲಿಯುತ್ತೀರಿ. ನಾವು ಷರತ್ತು ಹೇಳಿಕೆಗಳು, ಹೋಲಿಕೆಯ ಆಪರೇಟರ್‌ಗಳು, ಮತ್ತು ಲಾಜಿಕ್ಯಲ್ ವ್ಯಾಕ್ಯಾನಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ, ಇದರಿಂದ ನಿಮ್ಮ ಕೋಡ್ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿ ಸೂಕ್ತವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಸಾಧ್ಯತೆ ಪಡೆಯುತ್ತದೆ.
+
+## ಪೂರವ ಪಾಠವಾಗಿ ಕ್ವಿಜ್
+
+[ಪೂರ್ವ-ಪಾಠ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/11)
+
+ನಿರ್ಧಾರ ಕೈಗೊಳ್ಳುವುದು ಮತ್ತು ಪ್ರೋಗ್ರಾಂ ಸಂಚಾರವನ್ನು ನಿಯಂತ್ರಿಸುವ ಸಾಮರ್ಥ್ಯವು ಪ್ರೋಗ್ರಾಮಿಂಗ್ನ ಮೂಲ ಹಸಿವು. ಈ ವಿಭಾಗವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರೋಗ್ರಾಂಗಳ ನಿರ್ವಹಣೆ ಮಾರ್ಗವನ್ನು ಬುಲಿಯನ್ ಮೌಲ್ಯಗಳು ಮತ್ತು ಷರತ್ತುವಾಡುವ ಲಾಜಿಕ್ ಮೂಲಕ ಹೇಗೆ ನಿಯಂತ್ರಿಸುವುದನ್ನು ಒಳಗೊಂಡಿದೆ.
+
+[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
+
+> 🎥 ಮೇಲಿನ ಚಿತ್ರವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ನಿರ್ಧಾರ ಕೈಗೊಳ್ಳುವ ಬಗ್ಗೆ ವೀಡಿಯೋ ನೋಡಿರಿ.
+
+> ನೀವು ಈ ಪಾಠವನ್ನು [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) ನಲ್ಲಿ ತೆಗೆದುಕೊಳ್ಳಬಹುದು!
+
+```mermaid
+mindmap
+  root((ನಿರ್ಣಯ ವಹಿಸುವಿಕೆ))
+    Boolean Logic
+      ಸರಿ/ತಪ್ಪು
+      ಹೋಲಿಕೆ ಫಲಿತಾಂಶಗಳು
+      ತಾರ್ಕಿಕ ಅಭಿವ್ಯಕ್ತಿಗಳು
+    Conditional Statements
+      ಆಗಿ ಹೇಳಿಕೆಗಳು
+        ಏಕ ಶರತ್ತು
+        ಕೋಡ್ ಕಾರ್ಯಾಚರಣೆ
+      ಆಗಿ-ಅಥವಾ
+        ಎರಡು ಮಾರ್ಗಗಳು
+        ಪರ್ಯಾಯ ಕ್ರಿಯೆಗಳು
+      ಸ್ವಿಚ್
+        ಅನೇಕ ಆಯ್ಕೆಗಳು
+        ಸ್ವಚ್ಛ ಸಂರಚನೆ
+    Operators
+      Comparison
+        === !== < > <= >=
+        ಮೌಲ್ಯ ಸಂಬಂಧಗಳು
+      Logical
+        && || !
+        ಶರತ್ತುಗಳನ್ನು ಸಂಯೋಜಿಸಿ
+    Advanced Patterns
+      Ternary
+        ? : ವ್ಯಾಕರಣ
+       _inline ನಿರ್ಣಯಗಳು_
+      Complex Logic
+        ನೆಸ್ಟೆಡ್ ಶರತ್ತುಗಳು
+        ಅನೇಕ ಮಾನದಂಡಗಳು
+```
+## ಬುಲಿಯನ್ ಗಳ ಕುರಿತ ಸಂಕ್ಷಿಪ್ತ ಪುನರಾವೃತ್ತಿ
+
+ನಿರ್ಧಾರಗಳಿಗಾಗಿ ಹೋಗುವ ಮೊದಲು, ಕಳೆದ ಪಾಠದಿಂದ ಬುಲಿಯನ್ ಮೌಲ್ಯಗಳನ್ನು ಪುನರಾವրջಿಸೋಣ. ಗಣಿತಜ್ಞ ಜಾರ್ಜ್ ಬುಲ್ ಅವರ ಹೆಸರು ಪಡೆದ ಈ ಮೌಲ್ಯಗಳು ಬೀನರಿ ಸ್ಥಿತಿಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ – `true` ಅಥವಾ `false`. ಇದರಲ್ಲಿ ಎರಡು ಮಧ್ಯಮಸ್ಥಿತಿಗಳಿಲ್ಲ.
+
+ಈ ಬೀನರಿ ಮೌಲ್ಯಗಳು ಎಲ್ಲ ಗಣಕ ಲಾಜಿಕ್‌ಗಳ ಆಧಾರವನ್ನು ರೂಪಿಸುತ್ತವೆ. ನಿಮ್ಮ ಪ್ರóg್ರಾಂ ಎಲ್ಲ ನಿರ್ಧಾರವೂ ಅಂತಿಮವಾಗಿ ಬುಲಿಯನ್ ಮೌಲ್ಯಮಾಪನಕ್ಕೆ ಇಳಿಮುಖವಾಗುತ್ತದೆ.
+
+ಬುಲಿಯನ್ ಚರಗಳು ಸರಳವಾಯಿತು:
+
+```javascript
+let myTrueBool = true;
+let myFalseBool = false;
+```
+
+ಇದು ಸ್ಪಷ್ಟ ಬುಲಿಯನ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಎರಡು ಚರಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
+
+✅ ಬುಲಿಯನ್‌ಗಳು ಇಂಗ್ಲಿಷ್ ಗಣಿತಜ್ಞ, ತತ್ತ್ವಜ್ಞ ಮತ್ತು ಲಾಜಿಕಿಷ್ಟ ಜಾರ್ಜ್ ಬುಲ್ (1815–1864) ಅವರ ಹೆಸರಿನಿಂದ ಪಡೆದವು.
+
+## ಹೋಲಿಕೆಯ ಆಪರೇಟರ್‌ಗಳು ಮತ್ತು ಬುಲಿಯನ್‌ಗಳು
+
+ಪ್ರಾಯೋಗಿಕವಾಗಿ, ನೀವು ಬುಲಿಯನ್ ಮೌಲ್ಯಗಳನ್ನು ಕೈಯಿಂದ ಸಹಜವಾಗಿ ನಿಯೋಜಿಸುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ನೀವು ಅವನ್ನು ಷರತ್ತುಗಳ ಮೌಲ್ಯಮಾಪನದಿಂದ ಸೃಷ್ಟಿಸುವಿರಿ: "ಈ ಸಂಖ್ಯೆ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಿನದೆಯಾ?" ಅಥವಾ "ಈ ಮೌಲ್ಯಗಳು ಸಮಾನವಾಗಿವೆಯಾ?"
+
+ಹೋಲಿಕೆಯ ಆಪರೇಟರ್‌ಗಳು ಈ ಮೌಲ್ಯಮಾಪನಗಳನ್ನು ಮಾಡುವಂತೆ ಮಾಡುತ್ತವೆ. ಅವು ಮೌಲ್ಯಗಳನ್ನು ಹೋಲಿಸಿ, ಬೂಲಿಯನ್ ಫಲಿತಾಂಶವನ್ನು ಪರಿಚಯಿಸುತ್ತವೆ.
+
+| ಚಿಹ್ನೆ | ವಿವರಣೆ                                                                                                                                           | ಉದಾಹರಣೆ           |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `<`    | **ಚಿಕ್ಕದು**: ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಹೋಲಿಸಿ ಎಡಬದಿಯ ಮೌಲ್ಯ ಬಲಬದಿಗಿಂತ ಚಿಕ್ಕದಾಗಿದ್ದರೆ `true` ಬುಲಿಯನ್ ನೀಡುತ್ತದೆ                                      | `5 < 6 // true`      |
+| `<=`   | **ಚಿಕ್ಕದು ಅಥವಾ ಸಮಾನ**: ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಹೋಲಿಸಿ ಎಡಬದಿಯ ಮೌಲ್ಯ ಬಲಬದಿಗಿಂತ ಚಿಕ್ಕದಾಗುವುದಾಗಿಯೇ ಅಥವಾ ಸಮಾನವಾಗಿದ್ದರೆ `true` ನೀಡುತ್ತದೆ               | `5 <= 6 // true`     |
+| `>`    | **ಹೆಚ್ಚು**: ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಹೋಲಿಸಿ ಎಡಬದಿಯ ಮೌಲ್ಯ ಬಲಬದಿಗಿಂತ ಹೆಚ್ಚು ಇದ್ದರೆ `true` ನೀಡುತ್ತದೆ                                                | `5 > 6 // false`     |
+| `>=`   | **ಹೆಚ್ಚು ಅಥವಾ ಸಮಾನ**: ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಹೋಲಿಸಿ ಎಡಬದಿಯ ಮೌಲ್ಯ ಬಲಬದಿಗಿಂತ ಹೆಚ್ಚು ಅಥವಾ ಸಮಾನವಾದರೆ `true` ನೀಡುತ್ತದೆ                                 | `5 >= 6 // false`    |
+| `===`  | **ಕಟ್ಟುನಿರೀಕ್ಷಿತ ಸಮಾನತೆ**: ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಹೋಲಿಸಿ ಮತ್ತು ಅವುಗಳ ಪ್ರಕಾರ ಮತ್ತು ಮೌಲ್ಯ ಎರಡೂ ಸಮಾನವಾಗಿದ್ದರೆ `true` ನೀಡುತ್ತದೆ                      | `5 === 6 // false`   |
+| `!==`  | **ವಿಷಮತೆ**: ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಹೋಲಿಸಿ, ಕಟ್ಟುನಿರೀಕ್ಷಿತ ಸಮಾನತೆ ಫಲಿತಾಂಶದ ವಿಲೊಮ ಬೂಲಿಯನ್ ಮೌಲ್ಯವನ್ನು ನೀಡುತ್ತದೆ                                      | `5 !== 6 // true`    |
+
+✅ ನಿಮ್ಮ ಜ್ಞಾನ ಪರೀಕ್ಷಿಸಲು ಕೆಲವು ಹೋಲಿಕೆಗಳನ್ನು ಬ್ರೌಸರ್ ಕಾನ್ಸೋಲ್‌ನಲ್ಲಿ ಬರೆಯಿರಿ. ಯಾವ ಫಲಿತಾಂಶ ನಿಮಗೆ ಆಶ್ಚರ್ಯವೆಂಟಿಸುತ್ತದ?
+
+```mermaid
+flowchart LR
+    A["🔢 ಮೌಲ್ಯಗಳು"] --> B["⚖️ ಹೋಲಿಕೆ"]
+    B --> C["✅ ಬೂಲಿಯನ್ ಫಲ"]
+    
+    D["5"] --> E["< 6"]
+    E --> F["ನಿಜವಾದ"]
+    
+    G["10"] --> H["=== '10'"]
+    H --> I["ಸುಳ್ಳು"]
+    
+    J["'ಹಲೋ'"] --> K["!== 'ವಿಶ್ವ'"]
+    K --> L["ನಿಜವಾದ"]
+    
+    M["📋 ಆಪರೇಟರ್ ಪ್ರಕಾರಗಳು"] --> M1["ಸಮಾನತೆ: === !=="]
+    M --> M2["ಸಂಬಂಧಿತ: < > <= >="]
+    M --> M3["ಕಟ್ಟಿ vs ಸಡಿಲ"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style M fill:#fff3e0
+```
+### 🧠 **ಹೋಲಿಕೆ ನಾಯಕತ್ವ ಪರೀಕ್ಷೆ: ಬುಲಿಯನ್ ಲಾಜಿಕ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು**
+
+**ನಿಮ್ಮ ಹೋಲಿಕೆ ಅರಿವನ್ನು ಪರೀಕ್ಷಿಸುವುದಾಗಿ:**
+- ತೀರಾ ಸಾಮಾನ್ಯವಾಗಿ `===` (ಕಟ್ಟುನಿರೀಕ್ಷಿತ ಸಮಾನತೆ)ನ್ನು `==` (ಸೌಮ್ಯ ಸಮಾನತೆ) ಗಿಂತ ಪ್ರಾಧಾನ್ಯ ನೀಡಲಾಗುವುದೇಕೆ?
+- `5 === '5'` ಎಷ್ಟು ಫಲ ನೀಡಬಹುದು? ಹಾಗೆಯೇ `5 == '5'` ಯೇನು?
+- `!==` ಮತ್ತು `!=` ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?
+
+```mermaid
+stateDiagram-v2
+    [*] --> Comparison: ಎರಡು ಮೌಲ್ಯಗಳು
+    Comparison --> StrictEqual: === ಅಥವಾ !==
+    Comparison --> Relational: < > <= >=
+    
+    StrictEqual --> TypeCheck: ಪ್ರಕಾರ ಮತ್ತು ಮೌಲ್ಯ ಪರಿಶೀಲನೆ
+    Relational --> NumberCompare: ಸಂಖ್ಯೆಗಳಾಗಿ ಪರಿವರ್ತಿಸಿ
+    
+    TypeCheck --> BooleanResult: ಸರಿ ಅಥವಾ ತಪ್ಪು
+    NumberCompare --> BooleanResult
+    
+    note right of StrictEqual
+        ಪ್ರಾಧಾನ್ಯತೆಯ ವಿಧಾನ
+        ಯಾವುದೇ ಪ್ರಕಾರ ಪರಿವರ್ತನೆ ಇಲ್ಲ
+    end note
+    
+    note right of Relational
+        ವ್ಯಾಪ್ತಿಗಳಿಗೆ ಉಪಯುಕ್ತ
+        ಸಂಖ್ಯಾತ್ಮಕ ಹೋಲಿಕೆಗಳು
+    end note
+```
+> **ಪ್ರೊ ಟಿಪ್**: ಪ್ರಕಾರ ಪರಿವರ್ತನೆ ಅಗತ್ಯವಿಲ್ಲದವರೆಗೆ ಸಮಾನತೆ ಪರೀಕ್ಷೆಗೆ ಸದಾ `===` ಮತ್ತು `!==` ಉಪಯೋಗಿಸಿ. ಇದರಿಂದ ಅನಿರೀಕ್ಷಿತ ವರ್ತನೆ ತಡೆಯಬಹುದು!
+
+## If ಹೇಳಿಕೆ
+
+`if` ಹೇಳಿಕೆ ನಿಮ್ಮ ಕೋಡ್‌ನೊಂದರಲ್ಲಿ ಪ್ರಶ್ನೆ ಕೇಳುವುದಕ್ಕೆ ಹೋಲುತ್ತದೆ. "ಈ ಷರತ್ತು ಸತ್ಯವಾಗಿದ್ದರೆ, ಈ ಕಾರ್ಯವನ್ನು ಮಾಡು." ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ನಿರ್ಧಾರ ಕೈಗೊಳ್ಳಲು ಇದು ಬಹುಮುಖ್ಯ ಸಾಧನವಾಗಿರುತ್ತದೆ.
+
+ಇದೀಗ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:
+
+```javascript
+if (condition) {
+  // ಶರತ್ತು ಸತ್ಯವಾಗಿದೆ. ಈ ಬ್ಲಾಕ್‌ನ ಕೋಡ್ ಕಾರ್ಯಗತವಾಗುತ್ತದೆ.
+}
+```
+
+ಷರತ್ತುಗಳು ಕೋಟುಗಳಲ್ಲಿ ಇರುತ್ತದೆ, ಮತ್ತು ಅದು `true` ಆಗಿದ್ದರೆ, ಕೋಡು ಅನ್ನೂಟು ಉಳಿತಾಯ ಮಾಡುತ್ತವೆ. ಅದು `false` ಆಗಿದ್ದರೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆ ಭಾಗವನ್ನು ದಾಟಿಹೋಗುತ್ತದೆ.
+
+ನೀವು ಬಹುತೇಕ ಹೋಲಿಕೆಯ ಆಪರೇಟರ್‌ಗಳನ್ನು ಶರತ್ತು ಮಾಡಲು ಬಳಸುತ್ತೀರಿ. ಆಶಾಕರ ಉದಾಹರಣೆ ನೋಡೋಣ:
+
+```javascript
+let currentMoney = 1000;
+let laptopPrice = 800;
+
+if (currentMoney >= laptopPrice) {
+  // ಪರಿಸ್ಥಿತಿ ಸರಿ. ಈ ಬ್ಲಾಕ್‌ನಲ್ಲಿ ಕೋಡ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
+  console.log("Getting a new laptop!");
+}
+```
+
+`1000 >= 800` הוא `true` ಎಂದು ಮೌಲ್ಯಮಾಪನಗೊಂಡಿದ್ದರಿಂದ, ಬ್ಲಾಕ್ ಒಳಗಿನ ಕೋಡ್ ಚಲನಾರ್ಥಕ ಆಗಿ, "Gettig a new laptop!" ಎಂಬ ಸಂದೇಶವನ್ನು ಕಾನ್‌ಸೋಲ್‌ನಲ್ಲಿ ತೋರಿಸುತ್ತದೆ.
+
+```mermaid
+flowchart TD
+    A["🚀 ಕಾರ್ಯಕ್ರಮ ಆರಂಭ"] --> B{"💰 currentMoney >= laptopPrice?"}
+    B -->|true| C["🎉 'ಹೊಸ ಲ್ಯಾಪ್ಟಾಪ್ ಪಡೆಯುತ್ತಿದ್ದೇನೆ!'"]
+    B -->|false| D["⏭️ ಕೋಡ್ ಬ್ಲಾಕ್ ಮೀರಿಸಿ"]
+    C --> E["📋 ಕಾರ್ಯಕ್ರಮ ಮುಂದುವರೆಸಿ"]
+    D --> E
+    
+    F["📊 If ಹೇಳಿಕೆಯ ರಚನೆ"] --> F1["if (condition) {"]
+    F1 --> F2["  // ಸತ್ಯವಾಗಿದ್ದರೆ ರನ್ ಮಾಡುವ ಕೋಡ್"]
+    F2 --> F3["}"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style F fill:#e3f2fd
+```
+## If..Else ಹೇಳಿಕೆ
+
+ಆದರೆ ಷರತ್ತು ತಪ್ಪಾಗಿದ್ದಾಗ ಪ್ರೋಗ್ರಾಂ ಬೇರೆಯದೇ ಕೆಲಸ ಮಾಡಬೇಕಿದ್ದರೆ ಏನು? ಅಲ್ಲಿ `else` ಸಹಾಯ ಮಾಡುತ್ತದೆ – ಇದು ಬ್ಯಾಕಪ್ ಯೋಜನೆಯಂತಿದೆ.
+
+`else` ಹೇಳಿಕೆ "ಈ ಷರತ್ತು ಸರಿ ಇಲ್ಲದೆ ಇದ್ದರೆ, ಇದರಂತೆ ಮಾಡಿ" ಎಂದಂತೆ ಸೂಚಿಸುತ್ತದೆ.
+
+```javascript
+let currentMoney = 500;
+let laptopPrice = 800;
+
+if (currentMoney >= laptopPrice) {
+  // ಶರತ್ತು ನಿಜವಾಗಿದೆ. ಈ ಬ್ಲಾಕ್‌ನ ಕೋಡ್ ನಡೆದುಹೋಗುತ್ತದೆ.
+  console.log("Getting a new laptop!");
+} else {
+  // ಶರತ್ತು ಸುಳ್ಳಾಗಿದೆ. ಈ ಬ್ಲಾಕ್‌ನ ಕೋಡ್ ನಡೆಯುತ್ತದೆ.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+ಇದೀಗ, `500 >= 800` ಎಂಬುದು `false` ಆದ್ದರಿಂದ, ಆದ ಮಾಡು ಬ್ಲಾಕ್ ಬಿಟ್ಟು, `else` ಬ್ಲಾಕ್ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. ನೀವು "Can't afford a new laptop, yet!" ಎಂಬ ಸಂದೇಶವನ್ನು ಕಂಡಿರುತ್ತೀರಿ.
+
+✅ ಈ ಕೋಡ್ ಹಾಗೂ ಕೆಳಗಿನ ಕೋಡ್ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕಾನ್‌ಸೋಲ್‌ನಲ್ಲಿ ಓಡಿ ಬ್ಲಾಕ್ ಆಗಿರುವ `console.log()` ಮೌಲ್ಯಗಳನ್ನು ಬದಲಾಯಿಸಲು currentMoney ಮತ್ತು laptopPrice ಚರ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಿಸಿ ಪರೀಕ್ಷಿಸಿ.
+
+### 🎯 **If-Else ಲಾಜಿಕ್ ಪರೀಕ್ಷೆ: ಶಾಖೆಯ ಮಾರ್ಗಗಳು**
+
+**ನಿಮ್ಮ ಷರತ್ತು ಲಾಜಿಕ್ ಅರಿವನ್ನು ಮೌಲ್ಯಮಾಪನಮಾಡಿ:**
+- `currentMoney` ಮತ್ತು `laptopPrice` ಸರಿ ಸಮಾನವಾಗಿದ್ದರೆ ಏನು ಆಗುತ್ತದೆ?
+- ಯಾವುದೇ ನಿಜವಾದ ಪರಿಸ್ಥಿತಿಯ ಉದಾಹರಣೆ ನೀಡಬಹುದು, ಇಲ್ಲಿ if-else ಲಾಜಿಕ್ ಉಪಯುಕ್ತವಾಗಬಹುದು?
+- ಇದನ್ನು ಹೆಚ್ಚು ಬೆಲೆ ಶ್ರೇಣಿಗಳಿಗೆ ವ್ಯಾಪಿಸಲು ಹೇಗೆ ವಿಸ್ತರಿಸಬಹುದು?
+
+```mermaid
+flowchart TD
+    A["🔍 ಶರತ್ತು ಮೌಲ್ಯಮಾಪನ"] --> B{"ಶರತ್ತು ಸತ್ಯವೇ?"}
+    B -->|ಹೌದು| C["📤 IF ಬ್ಲಾಕ್ ಕಾರ್ಯಗತಗೊಳಿಸಿ"]
+    B -->|ಇಲ್ಲ| D["📥 ELSE ಬ್ಲಾಕ್ ಕಾರ್ಯಗತಗೊಳಿಸಿ"]
+    
+    C --> E["✅ ಒಂದು ಮಾರ್ಗ ತೆಗೆದುಕೊಂಡು"]
+    D --> E
+    
+    F["🌐 ವಾಸ್ತವಿಕ ಉದಾಹರಣೆಗಳು"] --> F1["ಬಳಕೆದಾರ ಲಾಗಿನ್ ಸ್ಥಿತಿ"]
+    F --> F2["ವಯಸ್ಸು ಪರಿಶೀಲನೆ"]
+    F --> F3["ಫಾರ್ಮ್ ಮಾನ್ಯತೆ"]
+    F --> F4["ಆಟದ ಸ್ಥಿತಿ ಬದಲಾವಣೆಗಳು"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#e3f2fd
+    style F fill:#f3e5f5
+```
+> **ಪ್ರಮುಖ ತಿಳಿವು**: if-else ಹೇಳಿಕೆ ಸರಿಯಾದ ನಂತರ ಬದಲಾವಣೆಗಳಿರುವ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದೇ ಒಂದು ಮಾರ್ಗ ಬಹಿರ್ಗತವಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಂ ಯಾವ ಪರಿಸ್ಥಿತಿಗಳಿಗೂ ಉತ್ತರ ನೀಡಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.
+
+## Switch ಹೇಳಿಕೆ
+
+ಕೆಲವೊಮ್ಮೆ ನೀವು ಒಂದೇ ಮೌಲ್ಯವನ್ನು ಹಲವಾರು ಆಯ್ಕೆಗಳಿಗಿಂತ ಹೋಲಿಸಬೇಕಾಗುತ್ತದೆ. ನೀವು ಸುಳಿದಂತೆ ಹಲವು `if..else` ಹೇಳಿಕೆಗಳನ್ನು ಸರಿಪಡಿಸಬಹುದು, ಆದರೆ ಅದು ಗೊಂದಲ ಉಂಟುಮಾಡುತ್ತದೆ. `switch` ಹೇಳಿಕೆ ಬಹುಮುಖ ಮೌಲ್ಯಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಸ್ವಚ್ಛ ವಾಕ್ಯರಚನೆ ನೀಡುತ್ತದೆ.
+
+ಈ ತತ್ತ್ವವು ಪ್ರಾರಂಭಿಕ ದೂರವಾಣಿ ವಿನಿಮಯತಂತ್ರಗಳ ಮೆಕ್ಯಾನಿಕಲ್ ಸ್ವಿಚಿಂಗ್ ವ್ಯವಸ್ಥೆಗಳಂತೆ – ಒಂದು ಇನ್ಪುಟ್ ಮೌಲ್ಯ ನಿರ್ದಿಷ್ಟ ಶಾಖೆಯನ್ನು અમಲಿಗೆ ತರುತ್ತದೆ.
+
+```javascript
+switch (expression) {
+  case x:
+    // ಕೋಡ್ ಬ್ಲಾಕ್
+    break;
+  case y:
+    // ಕೋಡ್ ಬ್ಲಾಕ್
+    break;
+  default:
+    // ಕೋಡ್ ಬ್ಲಾಕ್
+}
+```
+
+ಇದೀಗ ಇದರ ಸಂರಚನೆ:  
+- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಒಮ್ಮೆ ಪರಿಣಾಮವನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡುತ್ತದೆ  
+- ಪ್ರತಿ `case` ಅನ್ನು ಸರಿಸುಮಾರುಮಾಡುತ್ತದೆ  
+- ಹೊಂದಿಕೆಯಾಗುವ `case` ಕಂಡರೆ, ಆ ಕೋಡ್ ಬ್ಲಾಕ್ ಅನ್ನು ಚಲಿಸುತ್ತದೆ  
+- `break` ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಸ್ವಿಚ್ ನಿಂದ ನಿಲ್ಲಿಸಲೆಂದು ಸೂಚಿಸುತ್ತದೆ  
+- ಯಾವುದೇ `case` ಹೊಂದಿಕೆಯಾಗದಿದ್ದರೆ, `default` ಬ್ಲಾಕ್ ಚಾಲನೆಗೊಳ್ಳುತ್ತದೆ (ಇದಾದರೆ)
+
+```javascript
+// ವಾರದ ದಿನಕ್ಕಾಗಿ ಸ್ವಿಚ್ ಸ್ಟೇಟ್‌ಮೆಂಟ್ ಬಳಸಿ ಪ್ರೋಗ್ರಾಮ್
+let dayNumber = 2;
+let dayName;
+
+switch (dayNumber) {
+  case 1:
+    dayName = "Monday";
+    break;
+  case 2:
+    dayName = "Tuesday";
+    break;
+  case 3:
+    dayName = "Wednesday";
+    break;
+  default:
+    dayName = "Unknown day";
+    break;
+}
+console.log(`Today is ${dayName}`);
+```
+
+ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `dayNumber` 2 ಆಗಿದ್ದು, `case 2` ಹೊಂದಿಕೆ ಕಂಡು, `dayName` ಅನ್ನು "Tuesday" ಗೆ ನಿಗದಿಮಾಡಿದ ನಂತರ ಸ್ವಿಚ್ ನಿಂದ ನಿರ್ಗಮಿಸುತ್ತದೆ. ಫಲಿತಾಂಶ? "Today is Tuesday" ಅನ್ನು ಕಾನ್‌ಸೋಲ್‌ನಲ್ಲಿ ದಾಖಲಿಸುತ್ತದೆ.
+
+```mermaid
+flowchart TD
+    A["📥 switch(ಪ್ರಕಟಣೆ)"] --> B["🔍 ಒಂದೇ ಬಾರಿ ಮೌಲ್ಯಮಾಪನೆ"]
+    B --> C{"ಕುರುಹು 1 ಜೊತೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆಯೇ?"}
+    C -->|ಹೌದು| D["📋 ಕುರುಹು 1 ಕಾರ್ಯಗತಗೊಳಿಸಿ"]
+    C -->|ಇಲ್ಲ| E{"ಕುರುಹು 2 ಜೊತೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆಯೇ?"}
+    E -->|ಹೌದು| F["📋 ಕುರುಹು 2 ಕಾರ್ಯಗತಗೊಳಿಸಿ"]
+    E -->|ಇಲ್ಲ| G{"ಕುರುಹು 3 ಜೊತೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆಯೇ?"}
+    G -->|ಹೌದು| H["📋 ಕುರುಹು 3 ಕಾರ್ಯಗತಗೊಳಿಸಿ"]
+    G -->|ಇಲ್ಲ| I["📋 ಡೀಫಾಲ್ಟ್ ಕಾರ್ಯಗತಗೊಳಿಸಿ"]
+    
+    D --> J["🛑 ಸ್ಥಗಿತಗೊಳಿಸಿ"]
+    F --> K["🛑 ಸ್ಥಗಿತಗೊಳಿಸಿ"]
+    H --> L["🛑 ಸ್ಥಗಿತಗೊಳಿಸಿ"]
+    
+    J --> M["✅ switch ನಿಂದ ನಿರ್ಗಮನ"]
+    K --> M
+    L --> M
+    I --> M
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style M fill:#e8f5e8
+```
+✅ ಈ ಕೋಡ್ ಹಾಗೂ ಕೆಳಗಿನ ಕೋಡ್ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕಾನ್‌ಸೋಲ್‌ನಲ್ಲಿ ಓಡಿ, a ಚರ ಮೌಲ್ಯ ಬದಲಾಯಿಸಿ `console.log()` ಫಲಿತಾಂಶ ಪರಿಶೀಲಿಸಿ.
+
+### 🔄 **Switch ಹೇಳಿಕೆ ಪಟುತೆ: ಬಹು ಆಯ್ಕೆ**
+
+**ನಿಮ್ಮ ಸ್ವಿಚ್ ಅರಿವನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+- `break` ಹೇಳಿಕೆಯನ್ನು ಮರೆತರೆ ಏನು ಆಗುತ್ತದೆ?
+- ಅನೇಕ `if-else` ಹೇಳಿಕೆಗಳಿಗಿಂತ `switch` ಅನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು?
+- ಎಲ್ಲಾ ಸಾಧ್ಯತೆಗಳನ್ನು ಮುಚ್ಚಿಕೊಂಡಿದ್ದೀರಿ ಎಂದು ನೀವು ಭಾವಿಸಿದರೂ, `default` ಕೇಸ್ ಎಷ್ಟು ಉಪಯುಕ್ತ?
+
+```mermaid
+pie title "ಪ್ರತಿ ನಿರ್ಣಯ ರಚನೆಯನ್ನು ಯಾವಾಗ ಬಳಸುವುದು"
+    "ಸರಳ if-else" : 40
+    "ಸಂಕೀರ್ಣ if-else ಸರಪಳಿ" : 25
+    "ಸ್ವಿಚ್ ಹೇಳಿಕೆಗಳು" : 20
+    "ಟೆರ್ನರಿ ಆಪರೇಟರ್‌ಗಳು" : 15
+```
+> **ಉತ್ತಮ ಅಭ್ಯಾಸ**: ಒಂದೇ ಚರವನ್ನು ಬಹು ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಹೋಲಿಸುವಾಗ `switch` ಉಪಯೋಗಿಸಿ. ಶ್ರೇಣಿ ಪರಿಶೀಲನೆ ಅಥವಾ ಜಟಿಲ ಷರತ್ತುಗಳಿಗೆ `if-else` ಉಪಯೋಗಿಸಿ!
+
+## ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳು ಮತ್ತು ಬುಲಿಯನ್‌ಗಳು
+
+ಸಂಕೀರ್ಣ ನಿರ್ಧಾರಗಳು ಸಹಜವಾಗಿಯೇ ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ಷರತ್ತುಗಳನ್ನು ಒಂದೇ ವೇಳೆ ಮೌಲ್ಯಮಾಪನ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಬುಲಿಯನ್ ಬೀಜಗಣಿತ ಪ್ರಕಾರ ಗಣಿತज्ञರು ಲಾಜಿಕಲ್ ವ್ಯಾಕ್ಯಾನಗಳನ್ನು ಸಂಯೋಜಿಸುವಂತೆ, ಪ್ರೋಗ್ರಾಮಿಂಗ್ ನಲ್ಲಿ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳು ಹಲವು ಬುಲಿಯನ್ ಷರತ್ತುಗಳನ್ನು ಸಂಪರ್ಕಿಸುತ್ತವೆ.
+
+ಈ ಆಪರೇಟರ್‌ಗಳು ಸರಳ true/false ಮೌಲ್ಯಗಳನ್ನು ಕನ್ನಡಿಸುವುದರ ಮೂಲಕ ಜಟಿಲ ಷರತ್ತು ಲಾಜಿಕ್ ನಿರ್ಮಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ.
+
+| ಚಿಹ್ನೆ  | ವಿವರಣೆ                                                                                     | ಉದಾಹರಣೆ                                                                 |
+| ------ | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **ಲಾಜಿಕಲ್ AND**: ಎರಡು ಬುಲಿಯನ್ ವ್ಯಾಕ್ಯಾನಗಳನ್ನು ಹೋಲಿಸುತ್ತದೆ. ಎರಡೂ true ಆಗಿದ್ದರೆ ಮಾತ್ರ true ಪ್ರದಾನ ಮಾಡುತ್ತದೆ | `(5 > 3) && (5 < 10) // ಎರಡೂ true, true ನೀಡಿ`                         |
+| `\|\|` | **ಲಾಜಿಕಲ್ OR**: ಎರಡು ಬುಲಿಯನ್ ವ್ಯಾಕ್ಯಾನಗಳಲ್ಲಿ ಕನಿಷ್ಠ ಒಂದು true ಇದ್ದರೆ true ನೀಡುತ್ತದೆ               | `(5 > 10) \|\| (5 < 10) // ಒಂದು ತಪ್ಪು, ಮತ್ತೊಂದು ಸರಿ, true ನೀಡುತ್ತದೆ` |
+| `!`    | **ಲಾಜಿಕಲ್ NOT**: ಬುಲಿಯನ್ ಮೌಲ್ಯವರೋಧಿ ಮೌಲ್ಯವನ್ನು ನೀಡುತ್ತದೆ                                   | `!(5 > 10) // 5 ದ 10 ಕ್ಕಿಂತ ದೊಡ್ಡದಿಲ್ಲ, ! ಅದನ್ನು true ಮಾಡುತ್ತದೆ`       |
+
+ಈ ಆಪರೇಟರ್‌ಗಳು ಷರತ್ತುಗಳನ್ನು ಉಪಯುಕ್ತ ರೀತಿಯಲ್ಲಿ ಸಂಯೋಜಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತವೆ:  
+- AND (`&&`) ಅಂದರೆ ಎರಡು ಷರತ್ತುಗಳೂ true ಆಗಿರಬೇಕು  
+- OR (`||`) ಅಂದರೆ ಕನಿಷ್ಟ ಒಂದು ಷರತ್ತು true ಆಗಿರಬೇಕು  
+- NOT (`!`) ಅಂದರೆ true ನಿಂದ false ಮತ್ತು false ನಿಂದ true ಗೆ ತಿರುವು
+
+```mermaid
+flowchart LR
+    A["🔗 ತಾರ್ಕಿಕ ಆಪರೇಟರ್‌ಗಳು"] --> B["&& ಮತ್ತು"]
+    A --> C["|| ಅಥವಾ"]
+    A --> D["! ಅಲ್ಲ"]
+    
+    B --> B1["ಎರಡೂ ಸತ್ಯವಾಗಿರಬೇಕು"]
+    B --> B2["true && true = true"]
+    B --> B3["true && false = false"]
+    
+    C --> C1["ಕನಿಷ್ಠ ಒಂದು ಸತ್ಯ"]
+    C --> C2["true || false = true"]
+    C --> C3["false || false = false"]
+    
+    D --> D1["ಮೌಲ್ಯವನ್ನು ತಿರುವುಮಾಡುತ್ತದೆ"]
+    D --> D2["!true = false"]
+    D --> D3["!false = true"]
+    
+    E["🌍 ನಿಜವಾದ ಉದಾಹರಣೆಗಳು"] --> E1["ವಯಸ್ಸು >= 18 && ಪರವಾನಗಿ ಇದೆ"]
+    E --> E2["isWeekend || isHoliday"]
+    E --> E3["!isLoggedIn"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+## ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳೊಂದಿಗೆ ಷರತ್ತುಗಳು ಮತ್ತು ನಿರ್ಧಾರಗಳು
+
+ಇದೀಗ ಕೆಲವು ವೈಯಕ್ತಿಕ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಆಪರೇಟರ್‌ಗಳ ಕಾರ್ಯವನ್ನು ನೋಡೋಣ:
+
+```javascript
+let currentMoney = 600;
+let laptopPrice = 800;
+let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // ಲ್ಯಾಪ್‌ಟಾಪ್ ಬೆಲೆ 20 ಶೇಕಡಾ ರಿಯಾಯಿತಿಯಲ್ಲಿ
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
+  // ಸ್ಥಿತಿ ಸತ್ಯವಾಗಿದೆ. ಈ ಬ್ಲಾಕ್‌ನಲ್ಲಿನ ಕೋಡ್ ಚಾಲನೆ ಆಗುತ್ತದೆ.
+  console.log("Getting a new laptop!");
+} else {
+  // ಸ್ಥಿತಿ ತಪ್ಪಾಗಿದೆ. ಈ ಬ್ಲಾಕ್‌ನಲ್ಲಿನ ಕೋಡ್ ಚಾಲನೆ ಆಗುತ್ತದೆ.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+ಈ ಉದಾಹರಣೆಯಲ್ಲಿ: ನಾವು 20% ರಿಯಾಯಿತಿ ಬೆಲೆಯನ್ನು (640) ಲೆಕ್ಕಹಾಕುತ್ತೇವೆ, ನಂತರ ನಮ್ಮ ಪ್ರಾಪ್ತ ಹಣವು ಪೂರ್ಣ ಬೆಲೆಗೆ ಅಥವಾ ರಿಯಾಯಿತಿ ಬೆಲೆಗೆ ಸಮರ್ಪಕವಾಗಿದೆಯೇ ಎಂದು ಪರೀಕ್ಷಿಸುತ್ತೇವೆ. 600 ರಿಯಾಯಿತಿ ಬೆಲೆಯ 640 ಕ್ಕಿಂತ ಕಡಿಮೆ ಆದರೂ, ಷರತ್ತು true ಆಗಿ ಮೌಲ್ಯಮಾಪನವಾಗುತ್ತದೆ.
+
+### 🧮 **ಲಾಜಿಕಲ್ ಆಪರೇಟರ್ ಪರೀಕ್ಷೆ: ಷರತ್ತುಗಳ ಸಂಯೋಜನೆ**
+
+**ನಿಮ್ಮ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್ ಅರಿವನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+- `A && B` ನಲ್ಲಿ A false ಆಗಿದ್ದರೆ ಏನು ಆಗುತ್ತದೆ? B ಕೂಡ ಮೌಲ್ಯಮಾಪನ ಆಗುತ್ತದೆಯೆ?
+- ಎಲ್ಲಾ ಮೂರು ಆಪರೇಟರ್‌ಗಳ (`&&`, `||`, `!`) ಆವಶ್ಯಕತೆಯಾದ ಸಂದರ್ಭವನ್ನು ನೀವು ಊಹಿಸಬಲ್ಲಿರಾ?
+- `!user.isActive` ಮತ್ತು `user.isActive !== true` ನಡುವೆ ಏನು ವ್ಯತ್ಯಾಸ ಇದೆ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> EvaluateA: A && B
+    EvaluateA --> CheckB: A ಸತ್ಯವಾಗಿದೆ
+    EvaluateA --> ReturnFalse: A ಸುಳ್ಳಾಗಿದೆ
+    CheckB --> ReturnTrue: B ಸತ್ಯವಾಗಿದೆ
+    CheckB --> ReturnFalse: B ಸುಳ್ಳಾಗಿದೆ
+    
+    [*] --> EvaluateC: A || B
+    EvaluateC --> ReturnTrue: A ಸತ್ಯವಾಗಿದೆ
+    EvaluateC --> CheckD: A ಸುಳ್ಳಾಗಿದೆ
+    CheckD --> ReturnTrue: B ಸತ್ಯವಾಗಿದೆ
+    CheckD --> ReturnFalse: B ಸುಳ್ಳಾಗಿದೆ
+    
+    note right of EvaluateA
+        ಶಾರ್ಟ್-ಸರ್ಕ್ಯೂಟ್ ಮೌಲ್ಯಮಾಪನ:
+        A ಸುಳ್ಳಾಗಿದ್ದರೆ, B ಅನ್ನು ಎಂದಿಗೂ ಪರೀಕ್ಷಿಸುವುದಿಲ್ಲ
+    end note
+```
+> **ಕಾರ್ಯಕ್ಷಮತೆ ಸೂಚನೆ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ "ಶಾರ್ಟ್-ಸರ್ಕ್ಯೂಟ್ ಮೌಲ್ಯಮಾಪನ" ಅನ್ನು ಬಳಸುತ್ತದೆ — `A && B` ನಲ್ಲಿ A false ಆಗಿದ್ದರೆ B ಮೌಲ್ಯಮಾಪನ ಆಗುವುದಿಲ್ಲ. ಇದನ್ನು ನಿಮ್ಮ ಲಾಭಕ್ಕಾಗಿ ಬಳಸಿ!
+
+### ನೆಗೆಷನ್ ಆಪರೇಟರ್
+
+ಕೆಲವೊಮ್ಮೆ ಕೇವಲ ಯಾವಾಗ ಯಾವುದು ಸರಿ ಅಲ್ಲದಿರುವುದನ್ನು ಯೋಚಿಸುವುದು ಸುಲಭವಿರುತ್ತದೆ. "ಬಳಕೆದಾರ ಲಾಗಿನ್ ಆಗಿದ್ದಾರೇ?" ಅನುಬಂಧ ಈжಿಕೆ ಬದಲಾಗಿ "ಬಳಕೆದಾರ ಲಾಗಿನ್ ಆಗಿರಲ್ಲವೇ?" ಎಂದು ತಿಳಿಯಲು ಬಯಸಬಹುದು.	exclamation mark (`!`) ಆಪರೇಟರ್ ಲಾಜಿಕ್ ತಿರುವು ಮಾಡುತ್ತದೆ.
+
+```javascript
+if (!condition) {
+  // ಸ್ಥಿತಿ ತಪ್ಪಾಗಿದ್ದಲ್ಲಿ ನಡೆಯುತ್ತದೆ
+} else {
+  // ಸ್ಥಿತಿ ಸರಿ ಆಗಿದ್ದಲ್ಲಿ ನಡೆಯುತ್ತದೆ
+}
+```
+
+`!` ಆಪರೇಟರ್ ಅಂದರೆ "ವಿರುದ್ಧ..." — ಏನಾದರೂ `true` ಇದ್ದರೆ, `!` ಅದನ್ನು `false` ಮಾಡುತ್ತದೆ ಮತ್ತು ವಿಸರ್ಜಕ.
+
+### ಟೆర్నರಿ ವ್ಯಾಕ್ಯಾನಗಳು
+
+ಸರಳ ಷರತ್ತು ಅನಿಯಮಗಳಿಗೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ **ಟೆರ್ಮರಿ ಆಪರೇಟರ್** ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಸಂಕ್ಷಿಪ್ತ ವಾಕ್ಯರಚನೆ ಒಬ್ಬ ಸಾಲಿನಲ್ಲಿ ಷರತ್ತು ವ್ಯಾಖ್ಯಾನವನ್ನು ಬರೆಯಲು ಅನುಕೂಲಕರವಾಗಿದ್ದು, ಷರತ್ತು ಆಧಾರದ ಮೇಲೆ ಎರಡರಲ್ಲಿ ಒಂದು ಮೌಲ್ಯ ನಿಯೋಜಿಸುವಾಗ ಉಪಯುಕ್ತ.
+
+```javascript
+let variable = condition ? returnThisIfTrue : returnThisIfFalse;
+```
+
+ಇದು ಪ್ರಶ್ನೆಯಂತೆ ಓದುತ್ತದೆ: "ಈ ಷರತ್ತು ಸರಿ ಆದ್ರೆ, ಈ ಮೌಲ್ಯ ಬಳಸಿ. ಇಲ್ಲವೆ, ಆ ಮೌಲ್ಯ ಬಳಸಿ."
+
+ಕೆಳಗಿನ ವಿಶೇಷ ಉದಾಹರಣೆ:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ ಈ ಕೋಡ್ ಅನ್ನು ಸ್ವಲ್ಪ ಸಮಯ ಓದಿ. ಈ ಆಪರೇಟರ್‌ಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ನೀವು ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದೀರಾ?
+
+ಈ ಸಾಲು ಹೇಳುತ್ತಿರುವುದು: "`firstNumber` `secondNumber` ಗಿಂತ ದೊಡ್ಡದಿದೆಯಾ? ಆದರೆ ಹೌದಾದರೆ, `firstNumber` ಅನ್ನು `biggestNumber` ಗೆ ನಿಗದಿಮಾಡಿ. ಇಲ್ಲವಾದರೆ `secondNumber` ನಿಗದಿಮಾಡಿ."
+
+ಟೆರ್ಮರಿ ಆಪರೇಟರ್ ಕೇವಲ ಹಳೆಯ `if..else` ಹೇಳಿಕೆಯಲ್ಲಿ ಸಂಕ್ಷಿಪ್ತ ರೂಪವಾಗಿದೆ:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+ಎರಡೂ ವಿಧಾನಗಳು ತಕ್ಕ ಫಲಿತಾಂಶಗಳನ್ನು ನೀಡುತ್ತವೆ. ಟೆರ್ಮರಿ ಆಪರೇಟರ್ ಸಂಕ್ಷಿಪ್ತತೆ ನೀಡುವುದಾದರೆ, ಸಾಂಪ್ರದಾಯಿಕ if-else ರಚನೆ ಹೆಚ್ಚಿನ ಅರ್ಥಗರ್ಭಿತ ಸಂಜ್ಞೆಗಳಿಗೆ ಸ್ಪಷ್ಟವಾಗಿರಬಹುದು.
+
+```mermaid
+flowchart LR
+    A["🤔 ಟೆನರಿ ಅಪರೇಟರ್"] --> B["ಶರತ್ತು ?"]
+    B --> C["valueIfTrue :"]
+    C --> D["valueIfFalse"]
+    
+    E["📝 પરંપರೆದ If-Else"] --> F["if (ಶರತ್ತು) {"]
+    F --> G["  return valueIfTrue"]
+    G --> H["} else {"]
+    H --> I["  return valueIfFalse"]
+    I --> J["}"]
+    
+    K["⚡ ಬಳಸುವ ಸಮಯ"] --> K1["ಸರಳ ನಿಯೋಜನೆಗಳು"]
+    K --> K2["ಸಣ್ಣ ಶರತ್ತುಗಳು"]
+    K --> K3["_inline ಸಂಕಲ್ಪಗಳು"]
+    K --> K4["Return ನಿಶ್ಚಿತಗಳು"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style K fill:#e8f5e8
+```
+---
+
+
+
+## 🚀 ಸವಾಲು
+
+ಮೊದಲು ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳೊಂದಿಗೆ ಬರೆದ ಪ್ರೋಗ್ರಾಂ ಅನ್ನು ರಚಿಸಿ, ನಂತರ ಅದನ್ನು ಟೆರ್ಮರಿ ವ್ಯಾಕ್ಯಾನ ಬಳಸಿ ಮರುಹರ್ತಿ ಮಾಡಿ. ನಿಮ್ಮ ಇಚ್ಛಿತ ವಾಕ್ಯರಚನೆ ಯಾವುದು?
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವರನನೆ:** ಈ ಪಾಠದಿಂದ ಹಲವು ನಿರ್ಧಾರ ತತ್ವಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಸಮಗ್ರ ಗ್ರೇಡ್ کیلಕ್ಯುಲೇಟರ್ ರಚಿಸಿ, ಇದರಲ್ಲಿ if-else ಹೇಳಿಕೆಗಳು, switch ಹೇಳಿಕೆಗಳು, ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳು ಮತ್ತು ಟೆರ್ಮರಿ ವ್ಯಾಕ್ಯಾನಗಳು ಸೇರಿರಲಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ವಿದ್ಯಾರ್ಥಿಯ ಸಂಖ್ಯಾತ್ಮಕ ಅಂಕ (0-100) ಪಡೆದ ಜೊತೆಗೆ ಕೆಳಗಿನ ಮಾನದಂಡಗಳನ್ನು ಅನುಸರಿಸಿ ಅವರ ಅಕ್ಷರ ಗ್ರೇಡ್ ಅನ್ನು ನಿರ್ಧರಿಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರೋಗ್ರಾಂ ಬರೆಯಿರಿ:
+- A: 90-100
+- B: 80-89  
+- C: 70-79
+- D: 60-69
+- F: 60 ಕಿಂತ ಕೆಳಗೆ
+
+ಅಭಿವೃದ್ಧಿ:  
+1. ಅಕ್ಷರ ಗ್ರೇಡ್ ನಿರ್ಧರಿಸಲು if-else ಹೇಳಿಕೆಯನ್ನು ಬಳಸಿ
+2. ವಿದ್ಯಾರ್ಥಿ ಉತ್ತೀರ್ಣರಾದರೆ (ಗ್ರೇಡ್ >= 60) ಮತ್ತು ಗೌರವ ಪಡೆದಿದ್ದರೆ (ಗ್ರೇಡ್ >= 90) ಎಂದು ಪರಿಶೀಲಿಸಲು ಲಾಜಿಕಲ್ ಕಾರ್ಯಚಾಲಕರನ್ನು ಬಳಸಿ  
+3. ಪ್ರತಿ ಅಕ್ಷರಾತ್ಮಕ ಗ್ರೇಡ್‌ಗೆ ವಿಶೇಷ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡಲು ಸ್ವಿಚ್ ಸ್ಟೇಟ್ಮೆಂಟ್ ಅನ್ನು ಬಳಸಿ  
+4. ವಿದ್ಯಾರ್ಥಿ ಮುಂದಿನ ಕೋರ್ಸ್‌ಗಾಗಿ ಅರ್ಹನೋ (ಗ್ರೇಡ್ >= 70) ಎಂದು ನಿರ್ಧರಿಸಲು ಟೆರ್ಣರಿ ಕಾರ್ಯಚಾಲಕವನ್ನು ಬಳಸಿ  
+5. ಅಂಕೆಯನ್ನು 0 ಮತ್ತು 100ರ ನಡುವೆ ಇರುವುದಾಗಿ ಖಚಿತಪಡಿಸಲು ಇನ್‌ಪುಟ್ ಮಾನ್ಯತೆ ಸೇರಿಸಿ  
+
+ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಮ್ ಅನ್ನು 59, 60, 89, 90, ಮತ್ತು ಅಮಾನ್ಯ ಇನ್‌ಪುಟ್‌ಗಳಂತಹ ಅಂಚು ಪ್ರಕರಣಗಳನ್ನು ಒಳಗೊಂಡ ವಿವಿಧ ಅಂಕಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ.  
+
+[ಈಗಲಿನ ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಅಜೆಂಟ್ ಮೋಡ್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಇಲ್ಲಿ ನೋಡಿ.  
+
+
+## ಪಾಠದ ನಂತರದ ಕ್ವಿಜ್  
+
+[ಪಾಠದ ನಂತರದ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/12)  
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ  
+
+ಬಳಕೆದಾರರಿಗೆ ಲಭ್ಯವಿರುವ ಅನೇಕ ಕಾರ್ಯಚಾಲಕರ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ಓದಿ [MDN ನಲ್ಲಿ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).  
+
+ಜೋಶ್ ಕೊಮೋ ಅವರ ಅದ್ಭುತ [ಕಾರ್ಯಚಾಲಕ ಹುಡುಕಾಟ](https://joshwcomeau.com/operator-lookup/) ಮೂಲಕ ಹೋಗಿ!  
+
+## ನಿಯುಕ್ತಿ  
+
+[ಕಾರ್ಯಚಾಲಕರು](assignment.md)  
+
+---
+
+## 🧠 **ನಿಮ್ಮ ನಿರ್ಧಾರಮಾಡುವ ಉಪಕರಣಗಳು ಸಂಕ್ಷೇಪ**  
+
+```mermaid
+graph TD
+    A["🎯 ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿರ್ಣಯಗಳು"] --> B["🔍 ಬೂಲಿಯನ್ ಲಾಜಿಕ್"]
+    A --> C["📊 ಷರತ್ತುಗಳ ವಿವರಣೆ"]
+    A --> D["🔗 ತಾರ್ಕಿಕ ಆಪರೇಟರ್‌ಗಳು"]
+    A --> E["⚡ ಉನ್ನತ ಮಾದರಿಗಳು"]
+    
+    B --> B1["ನಿಜ/ಸುಳ್ಳು ಮೌಲ್ಯಗಳು"]
+    B --> B2["ಹೋಲಿಕೆ ಆಪರೇಟರ್‌ಗಳು"]
+    B --> B3["ನಿಜತ್ವದ ತತ್ತ್ವಗಳು"]
+    
+    C --> C1["if ಹೇಳಿಕೆಗಳು"]
+    C --> C2["if-else ಸರಪಳೆsẹಗಳು"]
+    C --> C3["switch ಹೇಳಿಕೆಗಳು"]
+    
+    D --> D1["&& (AND)"]
+    D --> D2["|| (OR)"]
+    D --> D3["! (NOT)"]
+    
+    E --> E1["ಟೆರ್ನರಿ ಆಪರೇಟರ್"]
+    E --> E2["ಶಾರ್ಟ್-ಸರ್ಕ್ಯೂಟ್ ಮೌಲ್ಯಮಾಪನ"]
+    E --> E3["ಸಂಕೀರ್ಣ ಷರತ್ತುಗಳು"]
+    
+    F["💡 ಪ್ರಮುಖ ಸಿದ್ಧಾಂತಗಳು"] --> F1["ಸ್ಪಷ್ಟ ಓದಲು ಸುಲಭ ಷರತ್ತುಗಳು"]
+    F --> F2["ನಿರಂತರ ಹೋಲಿಕೆ ಶೈಲಿ"]
+    F --> F3["ಸರಿಯಾದ ಆಪರೇಟರ್ ಪ್ರಾಮುಖ್ಯತೆ"]
+    F --> F4["ಕಾರ್ಯಕ್ಷಮ ಮೌಲ್ಯಮಾಪನ ಕ್ರಮ"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```  
+---
+
+## 🚀 ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿರ್ಧಾರಮಾಡುವ ಮಾಸ್ಟರಿ ಸಮಯರೇಖೆ  
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು**  
+- [ ] ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕಾನ್ಸೋಲ್ ನಲ್ಲಿ ಹೋಲಿಕೆ ಕಾರ್ಯಚಾಲಕರ ಅಭ್ಯಾಸ ಮಾಡಿ  
+- [ ] ನಿಮ್ಮ ವಯಸ್ಸನ್ನು ಪರಿಶೀಲಿಸುವ ಸರಳ if-else ಹೇಳಿಕೆಯನ್ನು ಬರೆಯಿರಿ  
+- [ ] ಸವಾಲು ಪ್ರಯತ್ನಿಸಿ: if-else ಅನ್ನು ಟೆರ್ಣರಿ ಕಾರ್ಯಚಾಲಕದಿಂದ ಮರುಬರೆಯಿರಿ  
+- [ ] ವಿಭಿನ್ನ "ಟ್ರೂಥಿ" ಮತ್ತು "ಫಾಲ್ಸಿ" ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಏನು ಸಂಭವಿಸುತ್ತದೆ ಎಂದು ಪರೀಕ್ಷಿಸಿ  
+
+### 🎯 **ಈ ಘಂಟೆಯಲ್ಲಿ ನೀವು ಏನು ಸಾಧಿಸಬಹುದು**  
+- [ ] ಪಾಠದ ನಂತರದ ಕ್ವಿಜ್ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಯಾವುದೇ ಗೊಂದಲಕಾರಿ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ  
+- [ ] GitHub Copilot ಸವಾಲಿನಿಂದ ಸಮಗ್ರ ಗ್ರೇಡ್ ಕ್ಯಾಲ್ಕುಲೇಟರ್ ನಿರ್ಮಿಸಿ  
+- [ ] ನಿಜ ಜೀವನದ ಪರಿಸ್ಥಿತಿಗೆ ಸರಳ ನಿರ್ಧಾರ ಮರವನ್ನು ರಚಿಸಿ (ಉದಾಹರಣೆ: ಧರಿಸುವುದನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದು)  
+- [ ] ಲಾಜಿಕಲ್ ಕಾರ್ಯಚಾಲಕರೊಂದಿಗೆ ಬಹುಶ್ರೇಣಿಯ ಶರತ್ತುಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಅಭ್ಯಾಸ ಮಾಡಿ  
+- [ ] ವಿಭಿನ್ನ ಬಳಕೆಗಾಗಿ ಸ್ವಿಚ್ ಸ್ಟೇಟ್ಮೆಂಟ್‌ಗಳನ್ನು ಪ್ರಯೋಗಿಸಿ  
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ತಂತ್ರಜ್ಞಾನ ಮಾಸ್ಟರಿ**  
+- [ ] ಸೃಜನಶೀಲ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಕಾರ್ಯಚಾಲಕ ನಿಯುಕ್ತಿ ಪೂರ್ಣಗೊಳಿಸಿ  
+- [ ] ವಿವಿಧ ಶರತ್ತುಗಳೊಂದಿಗೆ ಸಣ್ಣ ಕ್ವಿಜ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಿಸಿ  
+- [ ] ಅನೇಕ ಇನ್‌ಪುಟ್ ಶರತ್ತೆಗಳ ಪರಿಶೀಲಿಸುವ ಫಾರ್ಮ್ ಮಾನ್ಯತೆದಾರರ ನಿರ್ಮಿಸಿ  
+- [ ] ಜೋಶ್ ಕೊಮೋ ಅವರ [ಕಾರ್ಯಚಾಲಕ ಹುಡುಕಾಟ](https://joshwcomeau.com/operator-lookup/) ವ್ಯಾಯಾಮಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ  
+- [ ] ಇನ್ನಷ್ಟು ಸೂಕ್ತ ಶರತ್ತುಗಳ ರಚನೆಗಳಿಗಾಗಿ ಇತ್ತೀಚಿನ ಕೋಡ್ ಪುನರ್ ರೂಪಿಸಿ  
+- [ ] ಶಾರ್ಟ್-ಸರ್ಕ್ಯೂಟ್ ಮೌಲ್ಯಮಾಪನ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಣಾಮಗಳ ಅಧ್ಯಯನ ಮಾಡಿ  
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳಾದರೂ ಪರಿವರ್ತನೆ**  
+- [ ] ಸಂಕೀರ್ಣ ಗೂಡಿನಲ್ಲಿದ್ದ ಶರತ್ತುಗಳನ್ನು ನೈಪುಣ್ಯತೆಯಿಂದ ಇಟ್ಟುಕೊಳ್ಳಿ ಮತ್ತು ಕೋಡ್ ಓದುಗತ್ವವನ್ನು ಕಾಪಾಡಿ  
+- [ ] ಸೂಕ್ಷ್ಮ ನಿರ್ಧಾರಮಾಡುವ ಲಾಜಿಕ್‌ನೊಂದಿಗೆ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಿ  
+- [ ] ಸ್ಥಾಪಿತ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಶರತ್ತುಲಾಜಿಕ್ ಅನ್ನು ಉತ್ತಮಪಡಿಸುವ ಮೂಲಕ ಓಪನ್ ಸೋರ್ಸ್‌ಗೆ ಕೊಡುಗೆ ನೀಡಿ  
+- [ ] ವಿಭಿನ್ನ ಶರತ್ತುಗಳ ರಚನೆಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ಯಾವಾಗ ಬಳಸುವುದು ಎಂದು ಇತರರಿಗೆ ಕಲಿಸಿ  
+- [ ] ಶರತ್ತುಲಾಜಿಕ್‌ಗೆ ಕಾರ್ಯಾಚರಣೆ ಕಾರ್ಯಕ್ರಮದ ಪ್ರವೇಶಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ  
+- [ ] ಶರತ್ತು ನಿಯಮಾವಳಿಗಳ ವೈಯಕ್ತಿಕ ಸಂಕಲನವನ್ನು ರಚಿಸಿ  
+
+### 🏆 **ಅಂತಿಮ ನಿರ್ಧಾರಮಾಡುವ ಚಾಂಪಿಯನ್ ಪರಿಶೀಲನೆ**  
+
+**ನಿಮ್ಮ ತರ್ಕಮಯ ಚಿಂತನಾ ಕೌಶಲ್ಯವನ್ನು ಸಂಭ್ರಮಿಸಿ:**  
+- ನೀವು ಯಶಸ್ವಿಯಾಗಿ ಜಾರಿಗೆ ತಂದ ಅತಿ ಸಂಕೀರ್ಣ ನಿರ್ಧಾರಲಾಜಿಕ್ ಯಾವುದು?  
+- ಎಲ್ಲ ಶರತ್ತು ರಚನೆಗಳು ನಿಮ್ಮಿಗೆ ಯಾವುದು ಸೂಚನೆಯಾಗಿದೆ ಮತ್ತು ಏಕೆ?  
+- ಲಾಜಿಕಲ್ ಕಾರ್ಯಚಾಲಕರ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳುವುದು ನಿಮ್ಮ ಸಮಸ್ಯೆ ಪರಿಹಾರ ವಿಧಾನದಲ್ಲಿ ಏನು ಬದಲಾವಣೆ ತಂದಿತು?  
+- ಯಾವ ನಿಜ ಜೀವನ ಅಪ್ಲಿಕೇಶನ್ ಸೂಕ್ಷ್ಮ ನಿರ್ಧಾರಲಾಜಿಕ್‌ನಿಂದ ಲಾಭ ಪಡೆಯುತ್ತದೆ?  
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ತರ್ಕಸಮ್ಮತ ಚಿಂತನೆ ಬೆಳವಣಿಗೆ
+    section ಇವತ್ತು
+      ಬೂಲಿಯನ್ ಗೊಂದಲ: 3: You
+      ಇಫ್-ಎಲ್ಸ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: 4: You
+      ಆಪರೇಟರ್ ಗುರುತಿಸುವಿಕೆ: 5: You
+    section ಈ ವಾರ
+      ಜಟಿಲ ನಿಯಮಗಳು: 4: You
+      ಸ್ವಿಚ್ ಪರಿಣತಿ: 5: You
+      ತರ್ಕಸಮ್ಮತ ಸಂಯೋಜನೆಗಳು: 5: You
+    section ಮುಂದಿನ ತಿಂಗಳು
+      ಸುಧಾರಿತ ಮಾದರಿಗಳು: 5: You
+      ಕಾರ್ಯಕ್ಷಮತೆ ಜಾಗೃತಿ: 5: You
+      ಇತರೆರಿಗೆ ಬೋಧಿಸುವಿಕೆ: 5: You
+```  
+> 🧠 **ನೀವು ಡಿಜಿಟಲ್ ನಿರ್ಧಾರಮಾಡುವ ಕಲೆಯಲ್ಲಿ ಪರಿಣತಿ ಗಳಿಸಿದ್ದೀರಿ!** ಪ್ರತಿ ಸಂವಹನಾತ್ಮಕ ಅಪ್ಲಿಕೇಶನ್ ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳ ಮತ್ತು ಬದಲಾಗುತ್ತಿರುವ ಪರಿಸ್ಥಿತಿಗಳಾದ ಕಾರ್ಯಾಲಗಳಿಗೆ ಅರ್ಥಮಯವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಶರತ್ತುಲಾಜಿಕ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಮ್‌ಗಳು ಯೋಚಿಸಲು, ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ಮತ್ತು ಸೂಕ್ತ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಆಯ್ಕೆಮಾಡಲು ಹೇಗೆ ಮಾಡಬೇಕೆಂದು ನೀವು ಈಗ ತಿಳಿದಿದ್ದೀರಿ. ಈ ತಾರತಮ್ಯಮಯ ನೆಲೆಸಲು ಪ್ರತಿಯೊಂದು ಗತಿಶೀಲ ಅಪ್ಲಿಕೇಶನ್‌ನ ಶಕ್ತಿ! 🎉
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಾಜ್ಯಕಲೆ**:  
+ಈ દસ્તાવેજವನ್ನು AI અનુવાદ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುવાદಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ದತೆಯನ್ನು ಯತ್ನಿಸುವಾಗಲೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಶುದ್ಧತೆಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ತಿಳಿವಳಿಕೆ ಇಡಿ. ಮೂಲ દસ્તಾವೇಜನ್ನು ಅದರ ಮೂಲ ಭಾಷೆಯಲ್ಲಿ અધિકೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುવાદವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಭ್ರಮาหು ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/2-js-basics/3-making-decisions/assignment.md

@@ -0,0 +1,120 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ffe366b2d1f037b99fbadbe1dc81083d",
+  "translation_date": "2026-01-08T12:57:26+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ನಿರ್ಧಾರ ತೆಗೆದುಕೊಳ್ಳುವುದು: ವಿಧ್ಯಾರ್ಥಿ ಶ್ರೇಣಿ ಪ್ರೊಸೆಸರ್
+
+## ಕಲಿಕೆ ಉದ್ದೇಶಗಳು
+
+ಈ ಕಾರ್ಯದಲ್ಲಿ, ನೀವು ಈ ಪಾಠದಿಂದ ನಿರ್ಧಾರ ತೆಗೆದುಕೊಳ್ಳುವ ಸಿದ್ಧಾಂತಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡುತ್ತೀರಿ, ವಿಭಿನ್ನ ಶ್ರೇಣಿ ವ್ಯವಸ್ಥೆಗಳಿಂದ ವಿಧ್ಯಾರ್ಥಿಗಳ ಶ್ರೇಣಿಗಳನ್ನು ಪ್ರೊಸೆಸ್ ಮಾಡುವ ಪ್ರೋಗ್ರಾಂ ರಚಿಸುವ ಮೂಲಕ. ನೀವು `if...else` ಹೇಳಿಕೆಗಳು, ಹೋಲಿಕೆ ಆಪರೇಟರ್‌ಗಳು ಮತ್ತು ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಯಾವ ವಿಧ್ಯಾರ್ಥಿಗಳು ತಮ್ಮ ಪಾಠಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸುತ್ತಾರೆ ಎಂದು ನಿರ್ಧರಿಸುವಿರಿ.
+
+## ಸವಾಲು
+
+ನೀವು ಇತ್ತೀಚೆಗೆ ಇನ್ನೊಬ್ಬ ಸಂಸ್ಥೆಯೊಂದರೊಂದಿಗೆ ಮಿಲಿಸಿ ಕೆಲಸಮಾಡುವ ಶಾಲೆಗೆ ಕೆಲಸಮಾಡುತ್ತೀರಿ. ಈಗ ನೀವು ಎರಡು ಸಂಪೂರ್ಣ ವಿಭಿನ್ನ ಶ್ರೇಣಿ ವ್ಯವಸ್ಥೆಗಳ ವಿಧ್ಯಾರ್ಥಿ ಶ್ರೇಣಿಗಳನ್ನು ಪ್ರೊಸೆಸ್ ಮಾಡಿ ಯಾವ ವಿಧ್ಯార్థಿಗಳು ಪಾಸಾಗಿದ್ದಾರೆ ಎಂದು ನಿರ್ಣಯಿಸಬೇಕಿದೆ. ಇದು ಶರಿಂದ ನಿಯಮಗಳ ಲಾಜಿಕ್ ಅಭ್ಯಾಸ ಮಾಡಿಕೊಳ್ಳಲು ಸೂಕ್ತ ಅವಕಾಶ!
+
+### ಶ್ರೇಣಿ ವ್ಯವಸ್ಥೆಗಳ ಅರಿವು
+
+#### ಮೊದಲ ಶ್ರೇಣಿ ವ್ಯವಸ್ಥೆ (ಸಂಖ್ಯಾತ್ಮಕ)
+- ಶ್ರೇಣಿ ಸಂಖ್ಯೆ 1-5 ರಲ್ಲಿ ಇರುತ್ತದೆ
+- **ಪಾಸಿಂಗ್ ಶ್ರೇಣಿ**: 3 ಮತ್ತು ಮೇಲಿಲ್ಲ (3, 4, ಅಥವಾ 5)
+- **ಫೇಲಿಂಗ್ ಶ್ರೇಣಿ**: 3 ಕೆಳಗೆ (1 ಅಥವಾ 2)
+
+#### ಎರಡನೇ ಶ್ರೇಣಿ ವ್ಯವಸ್ಥೆ (ಅಕ್ಷರ ಶ್ರೇಣಿಗಳು)
+- ಶ್ರೇಣಿಗಳು ಅಕ್ಷರಗಳಲ್ಲಿ ಇರುತ್ತದೆ: `A`, `A-`, `B`, `B-`, `C`, `C-`
+- **ಪಾಸಿಂಗ್ ಶ್ರೇಣಿಗಳು**: `A`, `A-`, `B`, `B-`, `C`, `C-` (ಪಟ್ಟ ಪಟ್ಟಿಯಲ್ಲಿ ಎಲ್ಲಾ ಪಾಸಿಂಗ್ ಆಗಿವೆ)
+- **ಗಮನಿಸಿ**: ಈ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ `D` ಅಥವಾ `F` ರಂತೆ ಫೇಲಿಂಗ್ ಶ್ರೇಣಿಗಳು ಇಲ್ಲ
+
+### ನಿಮ್ಮ ಕೆಲಸ
+
+ಕೆಳಗಿನ ಅರೆ ಈ ವರೂಪ `allStudents` ಅನ್ನು ಕೊಟ್ಟಿದ್ದು ಅವು ಎಲ್ಲಾ ವಿಧ್ಯಾರ್ಥಿಗಳ ಶ್ರೇಣಿಗಳನ್ನು ಮತ್ತು ಅವರ ಗ್ರೇಡ್ಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ತದನಂತ್ರ ಅವರ ತಕ್ಕ ಶ್ರೇಣಿ ವ್ಯವಸ್ಥೆಯ ಪ್ರಕಾರ ಪಾಸಾದ ವಿಧ್ಯಾರ್ಥಿಗಳ ಒಂದು ಹೊಸ ಅರೆ `studentsWhoPass` ರಚಿಸಿ.
+
+```javascript
+let allStudents = [
+  'A',    // ಅಕ್ಷರ ಶ್ರೇಣಿ - ಉತ್ತೀರ್ಣ
+  'B-',   // ಅಕ್ಷರ ಶ್ರೇಣಿ - ಉತ್ತೀರ್ಣ
+  1,      // ಸಂಖ್ಯಾತ್ಮಕ ಶ್ರೇಣಿ - ಯೋಜಿಸದ
+  4,      // ಸಂಖ್ಯಾತ್ಮಕ ಶ್ರೇಣಿ - ಉತ್ತೀರ್ಣ
+  5,      // ಸಂಖ್ಯಾತ್ಮಕ ಶ್ರೇಣಿ - ಉತ್ತೀರ್ಣ
+  2       // ಸಂಖ್ಯಾತ್ಮಕ ಶ್ರೇಣಿ - ಯೋಜಿಸದ
+];
+
+let studentsWhoPass = [];
+```
+
+### ಹಂತ ಹಂತದ ವಿಧಾನ
+
+1. `allStudents` ಅರೆ ಒಳಗಿನ ಪ್ರತಿ ಶ್ರೇಣಿಯ ಮೂಲಕ ಹೋಗಲು **ಲೂಪ್**ಗಳನ್ನು ಹೊಂದಿಸಿ
+2. ಶ್ರೇಣಿ ಪ್ರಕಾರವನ್ನು **ಪರಿಶೀಲಿಸಿ** (ಅದೊಂದು ಸಂಖ್ಯೆನಾ ಅಥವಾ ಸ್ಟ್ರಿಂಗ್ ಆಗಿದೆಯೇ?)
+3. ಸೂಕ್ತ ಶ್ರೇಣಿ ನಿಯಮಗಳನ್ನು **ಅನ್ವಯಿಸಿ**:
+   - ಸಂಖ್ಯೆಗಳಿಗಾಗಿ: ಶ್ರೇಣಿ >= 3 ಎಂದು ಪರಿಶೀಲಿಸಿ
+   - ಸ್ಟ್ರಿಂಗ್‌ಗಳಿಗಾಗಿ: ಅದು ಮಾನ್ಯವಾದ ಪಾಸಿಂಗ್ ಅಕ್ಷರ ಶ್ರೇಣಿಗಳಲ್ಲಿ ಒಂದಾಗಿದೆಯೇ ಎಂದು ನೋಡಿ
+4. **ಪಾಸಿಂಗ್ ಶ್ರೇಣಿಗಳನ್ನು** `studentsWhoPass` ಅರೆಗೆ ಸೇರಿಸಿ
+
+### ಉತ್ತೇಜಕ ಕೋಡ್ ತಂತ್ರಗಳು
+
+ಈ ಪಾಠದಿಂದ ಕೆಳಗಿನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿ:
+
+- **typeof ಆಪರೇಟರ್**: `typeof grade === 'number'` ಎಂದು ಅಧಿಸೂಚಿಸಲು ಶ್ರೇಣಿ ಸಂಖ್ಯಾತ್ಮಕವೇ ಎಂದು ಪರೀಕ್ಷಿಸಿ
+- **ಹೋಲಿಕೆ ಆಪರೇಟರ್‌ಗಳು**: ಸಂಖ್ಯೆ ಶ್ರೇಣಿ ಹೋಲಿಸಲು `>=` ಬಳಸುವುದು
+- **ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳು**: `||` ಒಂದರಿಗಿಂತ ಹೆಚ್ಚು ಅಕ್ಷರ ಶ್ರೇಣಿಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು
+- **if...else ಹೇಳಿಕೆಗಳು**: ವಿಭಿನ್ನ ಶ್ರೇಣಿ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು
+- **ಅರೆ ವಿಧಾನಗಳು**: `.push()` ಹೊಸ ಅರೆಗೆ ಪಾಸಿಂಗ್ ಶ್ರೇಣಿಗಳನ್ನು ಸೇರಿಸುವುದು
+
+### ನಿರೀಕ್ಷಿತ ಔಟ್‌ಪುಟ್
+
+ನೀವು ಕಾರ್್ಯಕ್ರಮವನ್ನು ಸಂಚಾಲಿಸಿದಾಗ, `studentsWhoPass` ಇರುವುದು: `['A', 'B-', 4, 5]`
+
+**ಈ ಶ್ರೇಣಿಗಳು పಾಸುಗಾಗಿ ಕಾರಣ:**
+- `'A'` ಮತ್ತು `'B-'` ಮಾನ್ಯ ಅಕ್ಷರ ಶ್ರೇಣಿಗಳು (ಈ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಎಲ್ಲಾ ಅಕ್ಷರ ಶ್ರೇಣಿಗಳು ಪಾಸಿಂಗ್)
+- `4` ಮತ್ತು `5` ಸಂಖ್ಯಾತ್ಮಕ ಶ್ರೇಣಿಗಳು >= 3 ಆಗಿವೆ
+- `1` ಮತ್ತು `2` ಫೇಲ್ ಆಗಿದೆಯೆಂದು 3 ಕ್ಕಿಂತ ಕಡಿಮೆ ಸಂಖ್ಯೆ ಶ್ರೇಣಿಗಳಾಗಿವೆ
+
+## ನಿಮ್ಮ ಪರಿಹಾರವನ್ನು ಪರೀಕ್ಷಿಸಿ
+
+ನೀವು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ವಿಭಿನ್ನ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ:
+
+```javascript
+// ವಿಭಿನ್ನ ದರ್ಜೆ ಸಂಯोजನೆಗಳೊಂದಿಗೆ ಪರೀಕ್ಷೆ ಮಾಡಿ
+let testGrades1 = ['A-', 3, 'C', 1, 'B'];
+let testGrades2 = [5, 'A', 2, 'C-', 4];
+
+// ನಿಮ್ಮ ಪರಿಹಾರವು ಮಾನ್ಯ ದರ್ಜೆಗಳ ಯಾವುದೇ ಸಂಯೋಜನೆಯೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸಬಹುದು
+```
+
+## ಹೆಚ್ಚುವರಿ ಸವಾಲುಗಳು
+
+ಪ್ರಾಥಮಿಕ ಕಾರ್ಯವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ಈ ವಿಸ್ತರಣೆಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ:
+
+1. **ಸರಿಯಾದ ಭಿನ್ನತೆ**: ಅಯೋಗ್ಯ ಶ್ರೇಣಿಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ (ಉದಾಹರಣೆಗೆ, ಋಣಾತ್ಮಕ ಸಂಖ್ಯೆ ಅಥವಾ ಅಯೋಗ್ಯ ಅಕ್ಷರಗಳು)
+2. **ಸಂಖ್ಯಾಗಣನೆ**: ಪಾಸಾದವರ ಮತ್ತು ಫೇಲ್ ಆದವರ ಎಣಿಕೆ ಮಾಡಿ
+3. **ಶ್ರೇಣಿ ಪರಿವರ್ತನೆ**: ಎಲ್ಲಾ ಶ್ರೇಣಿಗಳನ್ನು ಏಕ ಸಂಖ್ಯೆ ವ್ಯವಸ್ಥೆಗೆ ಪರಿವರ್ತಿಸಿ (A=5, B=4, C=3 ಇತ್ಯಾದಿ)
+
+## ಮೌಲ್ಯಮಾಪನ
+
+| ಮಾನದಂಡ | ಅದ್ಭುತ (4) | ಸಮರ್ಥ (3) | ಅಭಿವೃದ್ಧಿ (2) | ಪ್ರಾರಂಭಿಕ (1) |
+|----------|--------------|----------------|----------------|--------------|
+| **ಕಾರ್ಯಕ್ಷಮತೆ** | ಪ್ರೋಗ್ರಾಂ ಎರಡೂ ವ್ಯವಸ್ಥೆಗಳ ಪಾಸಿಂಗ್ ಶ್ರೇಣಿಗಳನ್ನು ಸರಿಯಾಗಿ ಗುರುತಿಸುತ್ತದೆ | ಕೆಲವು ಸಣ್ಣ ಸಮಸ್ಯೆ ಅಥವಾ ಅತಿಮುಖ್ಯ ತೆಗೆದುಕೊಂಡ ಘಟನೆಗಳೊಂದಿಗೆ ಪ್ರೋಗ್ರಾಂ ಕೆಲಸಮಾಡುತ್ತದೆ | ಪ್ರೋಗ್ರಾಂ ಭಾಗಶಃ ಕೆಲಸಮಾಡುತ್ತದೆ ಆದರೆ ಲಾಜಿಕ್ ದೋಷಗಳಿವೆ | ಪ್ರೋಗ್ರಾಂವು ಹೆಚ್ಚು ದೋಷಗಳನ್ನು ಹೊಂದಿದೆ ಅಥವಾ ಚಾಲನೆ ಆಗುವುದಿಲ್ಲ |
+| **ಕೋಡ್ ರಚನೆ** | ಸ್ವಚ್ಛ ಮತ್ತು ಉತ್ತಮ ಸಂಘಟಿತ ಕೋಡ್ ಸೂಕ್ತ if...else ತರ್ಕದೊಂದಿಗೆ | ಸೂಕ್ತ ನಿರ್ವಹಣೆ ಇದ್ದ ಉತ್ತಮ ರಚನೆ | ಕೆಲವು ಸಂಘಟನೆ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ಮಾನ್ಯ ರಚನೆ | ದುರಂತ ರಚನೆ, ತರ್ಕವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟ |
+| **ಕಾನ್ಸೆಪ್ಟ್ ಬಳಕೆ** | ಹೋಲಿಕೆ ಆಪರೇಟರ್‌ಗಳು, ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳು ಮತ್ತು ಶರತಿ ಹೇಳಿಕೆಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಕೆ | ಪಾಠದ ಕಾನ್ಸೆಪ್ಟ್‌ಗಳ ನಡುವಿನ ಕಡಿಮೆ ಭೇದಗಳೊಂದಿಗೆ ಉತ್ತಮ ಬಳಕೆ | ಪಾಠದ ಕಾನ್ಸೆಪ್ಟ್‌ಗಳ ಕೆಲವು ಉಪಯೋಗ ಆದರೆ ಪ್ರಮುಖ ಅಂಶಗಳು ಅಗತ್ಯ | ಪಾಠದ ಕಾನ್ಸೆಪ್ಟ್‌ಗಳ ಬಹಳಾ ಕಡಿಮೆಯ ಬಳಕೆ |
+| **ಸಮಸ್ಯೆ ಪರಿಹಾರ** | ಸಮಸ್ಯೆಯ ಸ್ಪಷ್ಟ ಅರ್ಥ ಹಾಗೂ ಸುಂದರ ಪರಿಹಾರ ವಿಧಾನ ತೋರಿಸುತ್ತದೆ | ಉತ್ತಮ ಸಮಸ್ಯೆ ಪರಿಹಾರ ವಿಧಾನ ಮತ್ತು ಘನ ವಿಚಾರ | ಸಮಸ್ಯೆ ಪರಿಹಾರ ತಕ್ಕ ಮಟ್ಟಿಗೆ ಆದರೆ ಕೆಲವು ಗೊಂದಲದೊಂದಿಗೆ | ಅಸ್ಪಷ್ಟವಾದ ವಿಧಾನ, ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ ಇಲ್ಲ |
+
+## ಸಲ್ಲಿಕೆ ಮಾರ್ಗದರ್ಶಿಗಳು
+
+1. ಕೊಟ್ಟ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ **ಪರೀಕ್ಷಿಸಿ**
+2. ನಿಮ್ಮ ಲಾಜಿಕ್ ಅನ್ನು ವಿವರಿಸುವ **ಕಾಮೆಂಟುಗಳನ್ನು ಸೇರಿಸಿ**, ವಿಶೇಷವಾಗಿ ಶರತಿ ಹೇಳಿಕೆಗಳಿಗೆ
+3. **ಔಟ್‌ಪುಟ್** ನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶಕ್ಕೆ ಹೊಂದಿರುತ್ತದಾ ಎಂದು ಪರಿಶೀಲಿಸಿ: `['A', 'B-', 4, 5]`
+4. ಖಾಲಿ ಅರೆಗಳು ಅಥವಾ ಅಪ್ರತೀಕ್ಷಿತ ಡೇಟಾ ಪ್ರಕಾರಗಳಂತಹ ಅತಿಕ್ರಮಗಳನ್ನು **ಗಮನಿಸಿ**
+
+> 💡 **ಟಿಪ್**: ಸರಳವಾಗಿ ಪ್ರಾರಂಭಿಸಿ! ಮೊದಲಿಗೆ ಬೇಸಿಕ್ ಕಾರ್ಯಕ್ಷಮತೆಯಿಂದ ಪ್ರಾರಂಭಿಸಿ, ನಂತರ ಹೆಚ್ಚು ವ್ಯವಹಾರಿಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಿ. ಈ ಪಾಠದಲ್ಲಿ ಕಲಿತ ನಿಯಮಗಳನ್ನು ಬಳಸಿ ನಿರ್ಧಾರಾತ್ಮಕ ಲಾಜಿಕ್ ಅಭ್ಯಾಸ ಮಾಡುವ ಗುರಿಯನ್ನು ನೆನಪಿರಲಿ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತಪಾಸಣೆ**:  
+ಈ ದಸ್ತಾವೇಜು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಿದ್ದು, ನಾವು ಬರೆಹದ ಶುದ್ಧತೆಗೆ ಪ್ರಯತ್ನಿಸುವುದಾದರೆも ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳು ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು. ಮಾಲಿನ್ಯ ಭಾಷೆಯಲ್ಲಿ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಪ್ರಾಮಾಣಿಕ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವಪೂರ್ಣ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಗಂಭೀರತೆಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥೈಸುವಿಕೆಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/2-js-basics/4-arrays-loops/README.md

@@ -0,0 +1,750 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "1710a50a519a6e4a1b40a5638783018d",
+  "translation_date": "2026-01-08T13:05:58+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "kn"
+}
+-->
+# JavaScript ಮೂಲಭೂತಗಳು: ಅರೆಗಳು ಮತ್ತು ಲೂಪ್ಗಳು
+
+![JavaScript ಮೂಲಭೂತಗಳು - ಅರೆಗಳು](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.kn.png)
+> ಟೊಮೊಮಿ ಇಮುರುವವರಿಂದ ಸ್ಕೆಚ್ ನೋಟ್ [Tomomi Imura](https://twitter.com/girlie_mac)
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಅರೆಗಳು ಮತ್ತು ಲೂಪ್‌ಗಳ ಸಾಹಸ
+    section ಅರೆ ಮೂಲಭೂತಗಳು
+      ಅರೆಗಳನ್ನು ರಚಿಸುವುದು: 5: You
+      ಅಂಶಗಳನ್ನು ಪ್ರವೇಶಿಸುವುದು: 4: You
+      ಅರೆ ವಿಧಾನಗಳು: 5: You
+    section ಲೂಪ್ ನಿಪುಣತೆ
+      ಫಾರ್ ಲೂಪ್‌ಗಳು: 4: You
+      While ಲೂಪ್‌ಗಳು: 5: You
+      ಆಧುನಿಕ ವಾಕ್ಯರಚನೆ: 4: You
+    section ಡೇಟಾ ಪ್ರಕ್ರಿಯೆ
+      ಅರೆ + ಲೂಪ್‌ಗಳು: 5: You
+      ನಿಜವಾದ ಅಪ್ಲಿಕೇಶನ್ಗಳು: 4: You
+      ಕಾರ್ಯಕ್ಷಮತೆ ಮೆಚ್ಚುಗೆಯು: 5: You
+```
+## ಪೂರ್ವ-ಲೇಕ್ಚರ್ ಕ್ವಿಜ್
+[ಪೂರ್ವ-ಲೇಕ್ಚರ್ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/13)
+
+ವೆಬ್‌ಸೈಟ್‌ಗಳು ಕೇವಲ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ ಐಟಂಗಳನ್ನು ಡೇಟಾ ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಅಥವಾ ನಿಮ್ಮ ಸ್ನೇಹಿತರು ಎಂಬ ಪಟ್ಟಿಯನ್ನು ತೋರಿಸಲು ಹೇಗೆ ಮಾಡುತ್ತವೆ ಎಂದು ಯಾವಾಗಲಾದರೂ ಆಲೋಚಿಸಿಕೊಂಡಿದ್ದೀರಾ? ಅಲ್ಲಿ ಅರೆಗಳು ಮತ್ತು ಲೂಪ್ಗಳು ಬರುವವು. ಅರೆಗಳು ಹೇಗೆ ಬೋಧಿಸುವುದೆಂದರೆ ಅವು ಡಿಜಿಟಲ್ ಕಂಟೈನರ್‌ಗಳಂತೆ ಇದ್ದು, ಒಂದು ಸಮಯದಲ್ಲಿ ಹಲವಾರು ಮಾಹಿತಿಗಳನ್ನು ಹಿಡಿವವು, ಮತ್ತು ಲೂಪ್ಗಳು ಆ ಎಲ್ಲಾ ಡೇಟಾವನ್ನು ಪುನರಾವೃತಿಸುವುದಿಲ್ಲದೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಕೆಲಸ ಮಾಡಬಲ್ಲ ಮೂಲಕಗಳು.
+
+ಈ ಎರಡು ಕಲ್ಪನೆಗಳು ಒಟ್ಟಿಗೆ ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಮ್‌ನಲ್ಲಿ ಮಾಹಿತಿಯನ್ನು ಹ್ಯಾಂಡಲ್ ಮಾಡುವ ಮೂಲ ಆಧಾರವಾಗಿವೆ. ನೀವು ಪ್ರತಿ ಹೆಜ್ಜೆಯನ್ನು ಕೈಯಿಂದ ಬರೆಯುವುದರಿಂದ, ಲಕ್ಷಾಂತರ ಮತ್ತು ಸಾವಿರಾರು ಅಂಶಗಳನ್ನು ವೇಗವಾಗಿ ಸಂಸ್ಕರಿಸಬಹುದಾದ ಚಾತುರ್ಯಮಯ, ಪರಿಣಾಮಕಾರಿ ಕೋಡ್ ಅನ್ನು ರಚಿಸುವ ದಿಕ್ಕಿಗೆ ಸಾಗುವಿರಿ.
+
+ಈ ಪಾಠದ ಅಂತ್ಯದಲ್ಲಿ, ನೀವು ಕೆಲವೇ ಸಾಲುಗಳ ಕೋಡ್ ಮೂಲಕ ಸಂಕೀರ್ಣ ಡೇಟಾ ಕಾರ್ಯಗಳನ್ನು ಹೇಗೆ ಸಾಧಿಸುವುದೆಂದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ. ಈ ಅಗತ್ಯ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಕಲ್ಪನೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.
+
+[![ಅರೆಗಳು](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "ಅರೆಗಳು")
+
+[![ಲೂಪ್ಗಳು](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "ಲೂಪ್ಗಳು")
+
+> 🎥 ಮೇಲಿನ ಚಿತ್ರಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಅರೆಗಳು ಮತ್ತು ಲೂಪ್ಗಳ ಕುರಿತು ವೀಡಿಯೊಗಳನ್ನು ವೀಕ್ಷಿಸಿ.
+
+> ನೀವು ಈ ಪಾಠವನ್ನು [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) ನಲ್ಲಿ ಸಹ ತೆಗೆದುಕೊಳ್ಳಬಹುದು!
+
+```mermaid
+mindmap
+  root((ಡೇಟಾ ಪ್ರೊಸೆಸಿಂಗ್))
+    Arrays
+      Structure
+        ಚತುಷ್ಟಭುಜ ಬೆರಳುಗಳ ವ್ಯಾಕರಣ
+        ಶೂನ್ಯ ಆಧಾರಿತ ಸೂಚ್ಯಂಕ
+        ಡೈನಾಮಿಕ್ ಗಾತ್ರದೂ
+      Operations
+        ಪುಶ್/ಪಾಪ್
+        ಶಿಫ್ಟ್/ಅನ್‌ಶಿಫ್ಟ್
+        ಇನ್‌ಡೆಕ್ಸ್ಓಫ್/ಇನ್‌ಕ್ಲೂಡ್ಸ್
+      Types
+        ಸಂಖ್ಯೆಗಳ ಸರಣಿ
+        ಸ್ಟ್ರಿಂಗ್ ಸರಣಿ
+        ಮಿಶ್ರಿತ ಪ್ರಕಾರಗಳು
+    Loops
+      For Loops
+        ಗಣನೆ ಪುನರಾವೃತ್ತಿಗಳು
+        ಸರಣಿ ಪ್ರಕ್ರಿಯೆ
+        ಭವಿಷ್ಯವಾಣಿ ಪ್ರವಾಹ
+      While Loops
+        ಶರತ್ತಿನ ಆಧಾರಿತ
+        ಅಜ್ಞಾತ ಪುನರಾವೃತ್ತಿಗಳು
+        ಬಳಕೆದಾರ ಇನ್ಪುಟ್
+      Modern Syntax
+        for...of
+        forEach
+        ಫಂಕ್ಷನಲ್ ವಿಧಾನಗಳು
+    Applications
+      Data Analysis
+        სტატისტიკა
+        ಸಂಶೋಧನೆ
+        ಪರಿವರ್ತನೆಗಳು
+      User Interfaces
+        ಪಟ್ಟಿಗಳು
+        ಮೆನುಗಳು
+        ಗ್ಯಾಲರಿಗಳು
+```
+## ಅರೆಗಳು
+
+ಅರೆಗಳನ್ನು ಡಿಜಿಟಲ್ ಫೈಲಿಂಗ್ ಕ್ಯಾಬಿನೆಟ್ ಎಂದು ಭಾವಿಸಿ - ಪ್ರತಿಯೊಂದು ಡ್ರಾಯರ್‌ಗೆ ಒಂದು ದಾಖಲೆ ಸಂಗ್ರಹಿಸುವ ಬದಲು ನೀವು ಹಲವು ಸಂಬಂಧಿಸಿದ ಐಟಂಗಳನ್ನು ಒಂದು ತಾಂತ್ರಿಕ ಕಂಟೈನರ್‌ನಲ್ಲಿ ವ್ಯವಸ್ಥೆ ಮಾಡಬಹುದು. ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಶೈಲಿಯಲ್ಲಿ, ಅರೆಗಳು ಅನೇಕ ಮಾಹಿತಿಗಳನ್ನು ಒಂದು ಸಂಘಟಿತ ಪ್ಯಾಕೇಜಿನಲ್ಲಿ ಸಂಗ್ರಹಿಸುವ ಅವಕಾಶವನ್ನು ನೀಡುತ್ತವೆ.
+
+ನೀವು ಫೋಟೋ ಗ್ಯಾಲರಿ ರಚಿಸುತ್ತಿದ್ದೀರಾ, ಟು-ಡೂ ಪಟ್ಟಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತಿದ್ದೀರಾ ಅಥವಾ ಗೇಮಿನಲ್ಲಿನ ಹೈ ಸ್ಕೋರ್‌ಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತಿದ್ದೀರಾ, ಅರೆಗಳು ಡೇಟಾ ಸಂಘಟನೆಯ ಆಧಾರ ಒದಗಿಸುತ್ತವೆ. ಅವು ಹೇಗೆ ಕೆಲಸ ಮಾಡುವದನ್ನು ನೋಡೋಣ.
+
+✅ ಅರೆಗಳು ನಮ್ಮ ಸುತ್ತಲೂ ಇದ್ದಾರೆ! ಸೃಜನಾತ್ಮಕ ಉದಾಹರಣೆವಾಗಿ ಸೌರ ಪ್ಯಾನೆಲ್ ಅರೆ ಅಥವಾ ಇನ್ನ कोई ನೆನಪಿರುವುದೆ?
+
+### ಅರೆಗಳನ್ನು ರಚಿಸುವುದು
+
+ಅರೆ ರಚಿಸುವುದು ಸುಲಭ - ಕೇವಲ ಚೌಕಟ್ಟಿನ ಬ್ರಾಕೆಟ್‌ಗಳನ್ನು ಉಪಯೋಗಿಸಿ!
+
+```javascript
+// ಖಾಲಿ ಅರೆ - ಐಟಂಗಳನ್ನು ಕಾಯುತ್ತಿರುವ ಖಾಲಿ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ ಹೋಲಿದೆ
+const myArray = [];
+```
+
+**ಇಲ್ಲಿ ಏನಾಗುತ್ತಿದೆ?**
+ನೀವು ಫుందಿ ಖಾಲಿ ಕಂಟೈನರ್ ರಚಿಸಿದ್ದೀರಿ ಅದಕ್ಕೆ ಆ ಚೌಕಟ್ಟಿನ ಬ್ರಾಕೆಟ್‌ಗಳು `[]` ಬಳಕೆ. ಇದನ್ನು ಖಾಲಿ ಪುಸ್ತಕ ಶೆಲ್ಫ್ ಎಂದು ಭಾವಿಸಿ - ನೀವು ಯಾವ ಪುಸ್ತಕಗಳನ್ನು ಆಗ್ರಹಿಸುತ್ತೀರೋ ಅವನ್ನು ಇಡಲು ಸಿದ್ಧವಾಗಿದೆ.
+
+ನೀವು ನಿಮ್ಮ ಅರೆಗೆ ಪ್ರಾಥಮಿಕ ಮೌಲ್ಯಗಳನ್ನು ಕೂಡ ತುಂಬಬಹುದು:
+
+```javascript
+// ನಿಮ್ಮ ಐಸ್ ಕ್ರೀಮ್ ಅಂಗಡಿಯ ರುಚಿ ವಹಿವಾಟು
+const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+// ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ಮಾಹಿತಿ (ವಿಭಿನ್ನ ರೀತಿಯ ಡೇಟಾ ಮಿಶ್ರಣ)
+const userData = ["John", 25, true, "developer"];
+
+// ನಿಮ್ಮ ಇಷ್ಟ ತರಗತಿಯ ಪರೀಕ್ಷಾ ಅಂಕಗಳು
+const scores = [95, 87, 92, 78, 85];
+```
+
+**ಗಮನ ಸೆಳೆಯುವ ಸೊಗಸುಗಳು:**
+- ನೀವು ಪಠ್ಯ, ಸಂಖ್ಯೆಗಳು ಅಥವಾ ಸತ್ಯ/ಸುಳ್ಳು ಮೌಲ್ಯಗಳನ್ನು ಒಂದೇ ಅರೆನಲ್ಲಿ ಹಿಡಿಕೊಳ್ಳಬಹುದು
+- ಪ್ರತಿ ಐಟಂ ಅನ್ನು ಕಾಮಾಗಳಿಂದ ವಿಭಜಿಸಿ - ಸುಲಭ!
+- ಅರೆಗಳು ಸಂಬಂಧಿಸಿದ ಮಾಹಿತಿಯನ್ನು ಒಟ್ಟಿಗೆ ಇಡಲು ಸೂಕ್ತವಾಗಿವೆ
+
+```mermaid
+flowchart LR
+    A["📦 ಸರಣಿ"] --> B["ರಚಿಸಿ [ ]"]
+    A --> C["ಬಹುತ انتظامಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ"]
+    A --> D["ಸೂಚ್ಯಾಮಿತಿಯಿಂದ ಪ್ರವೇಶಿಸಿ"]
+    
+    B --> B1["const arr = []"]
+    B --> B2["const arr = [1,2,3]"]
+    
+    C --> C1["ಅಂಕಿಗಳು"]
+    C --> C2["ಸ್ಟ್ರಿಂಗ್‌ಗಳು"]
+    C --> C3["ಬೂಲಿಯನ್‌ಗಳು"]
+    C --> C4["ಮಿಶ್ರಿತ ಪ್ರಕಾರಗಳು"]
+    
+    D --> D1["arr[0] = ಮೊದಲ"]
+    D --> D2["arr[1] = ಎರಡನೇ"]
+    D --> D3["arr[2] = ಮೂರನೇ"]
+    
+    E["📊 ಸರಣಿ ಸೂಚ್ಯಂಕ"] --> E1["ಸೂಚ್ಯಂಕ 0: ಮೊದಲ"]
+    E --> E2["ಸೂಚ್ಯಂಕ 1: ಎರಡನೇ"]
+    E --> E3["ಸೂಚ್ಯಂಕ 2: ಮೂರನೇ"]
+    E --> E4["ಸೂಚ್ಯಂಕ n-1: ಕೊನೆಯ"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+### ಅರೆ ಸೂಚ್ಯಂಕೀಕರಣ
+
+ಮುಂಚಿತವಾಗಿ ಅರೆಗಳಿಗೆ ಒಂದನ್ನಾಗಿ 0 ರಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಸೂಚ್ಯಂಕವಿದೆ ಎಂದು ಅನಿಸಬಹುದು. ಈ ಶೂನ್ಯ-ಆಧಾರಿತ ಸೂಚ್ಯಂಕವನ್ನು ಕಂಪ್ಯೂટર ಮೆಮೊರಿ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದರ ನಡವಳಿಕೆಯದು - ಇದು ಸಿ (C) ಭಾಷೆಗಳ ಮೊದಲ ದಿನಗಳಿಂದ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ನಿಯಮವಾಗಿದೆ. ಪ್ರತಿಯೊಂದು ಅರೆ ಸ್ಥಾನಕ್ಕೆ ತನ್ನದೇ ಆದ ವಿಳಾಸ ಸಂಖ್ಯೆ **ಸೂಚ್ಯಂಕ** ಎಂದು ಕರೆಯಲ್ಪಡುವುದು.
+
+| ಸೂಚ್ಯಂಕ | ಮೌಲ್ಯ | ವಿವರಣೆ |
+|-------|-------|-------------|
+| 0 | "ಚಾಕ್ಲೆಟ್" | ಮೊದಲ ಅಂಶ |
+| 1 | "ಸ್ಟ್ರಾಬೆರಿ" | ಎರಡನೇ ಅಂಶ |
+| 2 | "ವ್ಯಾನಿಲ್‌ಲಾ" | ಮೂರನೇ ಅಂಶ |
+| 3 | "ಪಿಸ್ತಾಚಿಯೋ" | ನಾಲ್ಕನೇ ಅಂಶ |
+| 4 | "ರಾಕಿ ರೋಡ್" | ಐದನೇ ಅಂಶ |
+
+✅ ನಿಮಗೆ ಅರೆಗಳು 0 ಸೂಚ್ಯಂಕದಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ ಎಂದು ಆಶ್ಚರ್ಯವೇ? ಕೆಲವು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳಲ್ಲಿ, ಸೂಚ್ಯಂಕಗಳು 1 ರಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ. ಇದರ ಹಿಂದೆ ಆಸಕ್ತಿದಾಯಕ ಇತಿಹಾಸವಿದೆ, ಇದನ್ನು ನೀವು [ವಿಕಿಪೀಡಿಯಾ](https://en.wikipedia.org/wiki/Zero-based_numbering) ನಲ್ಲಿ ಓದಬಹುದು.
+
+**ಅರೆ ಅಂಗಾಂಶಗಳನ್ನು ಪ್ರವೇಶಿಸುವುದು:**
+
+```javascript
+const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+// ಬ್ರಾಕೆಟ್ ನೋಟೇಶನ್ ಬಳಸಿ ವೈಯಕ್ತಿಕ ಅಂಶಗಳನ್ನು ಪ್ರವೇಶಿಸಿ
+console.log(iceCreamFlavors[0]); // "ಚಾಕ್ಲೆಟ್" - ಮೊದಲ ಅಂಶ
+console.log(iceCreamFlavors[2]); // "ವ್ಯಾನಿಲ್ಲಾ" - ಮೂರನೇ ಅಂಶ
+console.log(iceCreamFlavors[4]); // "ರಾಕ್‌ಕಿ ರೋಡ್" - ಕೊನೆಯ ಅಂಶ
+```
+
+**ಇಲ್ಲಿ ಏನಾಗುತ್ತಿದೆ ಎಂಬುದರ ವಿವರಣೆ:**
+- **ಚೌಕಟ್ಟಿನ ಬ್ರಾಕೆಟ್ ಸೂಚ್ಯಂಕ ಸಂಖ್ಯೆ ಬಳಸಿ** ಅಂಶಗಳನ್ನು ಪ್ರವೇಶಿಸುತ್ತದೆ
+- **ಅರೆ ನಿಗದಿಪಡಿಸಿದ ಸ್ಥಾನದಲ್ಲಿ ಸಂಗ್ರಹಿತ ಮೌಲ್ಯವನ್ನು** ಹಿಂತಿರುಗಿಸುತ್ತದೆ
+- **ಗುಣಮಟ್ಟವಾಗಿ 0ರಿಂದ ಗಣನೆ ಪ್ರಾರಂಭ** ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಮೊದಲ ಅಂಶ ಸೂಚ್ಯಂಕ 0
+
+**ಅರೆ ಅಂಗಾಂಶಗಳನ್ನು ತಿದ್ದುಪಡಿ ಮಾಡುವುದು:**
+
+```javascript
+// ಈಗಿರುವ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸಿ
+iceCreamFlavors[4] = "Butter Pecan";
+console.log(iceCreamFlavors[4]); // "ಬಟರ್ ಪೇಕನ್"
+
+// ಕೊನೆಯಲ್ಲಿ ಹೊಸ ಅಂಶವನ್ನು ಸೇರಿಸಿ
+iceCreamFlavors[5] = "Cookie Dough";
+console.log(iceCreamFlavors[5]); // "ಕುಕ್ಕಿ ಡೋ"
+```
+
+**ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ:**
+- ಸೂಚ್ಯಂಕ 4 ರಲ್ಲಿನ ಅಂಶವನ್ನು "ರಾಕಿ ರೋಡ್"ನಿಂದ "ಬಟರ್ ಪಿಕಾನ್"ಗೆ **ತಿದ್ದುಪಡಿಸಿದೆ**
+- ಸೂಚ್ಯಂಕ 5 ರಲ್ಲಿ "ಕುಕಿ ಡೋ" ಎಂಬ ಹೊಸ ಅಂಶ **ಹೇರಲಾಗಿದೆ**
+- ಪ್ರಸ್ತುತ ಮಿತಿಯನ್ನು ಮೀರಿಸಿ ಓದಿದಾಗ ಅರೆ ಕೆಲವು ಆಯಾಮಗಳನ್ನು **ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಿಸ್ತರಿಸಿದೆ**
+
+### ಅರೆ ಉದ್ದ ಮತ್ತು ಸಾಮಾನ್ಯ ವಿಧಾನಗಳು
+
+ಅರೆಗಳಿಗೆ ಇವುಗಳು ಮುಂಚಿತ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ವಿಧಾನಗಳನ್ನು ಒಳಗೊಂಡಿವೆ, ಇದು ಡೇಟಾ ಹ್ಯಾಂಡ್ಲಿಂಗ್‌ನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
+
+**ಅರೆ ಉದ್ದವನ್ನು ಕಂಡುಹಿಡಿಯುವುದು:**
+
+```javascript
+const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+console.log(iceCreamFlavors.length); // 5
+
+// ಅರೆಗಳು ಬದಲಾಗುತ್ತಿದ್ದಂತೆ ಉದ್ದವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸಲಾಗುತ್ತದೆ
+iceCreamFlavors.push("Mint Chip");
+console.log(iceCreamFlavors.length); // 6
+```
+
+**ಪ್ರಮುಖ ಅಂಶಗಳು:**
+- ಅರೆ ಯಲ್ಲಿ ಒಟ್ಟು ಅಂಶಗಳ ಸಂಖ್ಯೆಯನ್ನು *ಹಿಂತಿರುಗಿಸುತ್ತದೆ*
+- ಅಂಶಗಳನ್ನು ಸೇರಿಸುವ ಅಥವಾ ತೆಗೆದುಹಾಕುವಾಗ *ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸುತ್ತದೆ*
+- ಲೂಪ್ಗಳು ಹಾಗೂ ಪರಿಶೀಲನೆಗೆ ಬಳಸಬಹುದಾದ *ಚಲನೆಯ ಮಟ್ಟವನ್ನು* ಒದಗಿಸುತ್ತದೆ
+
+**ಅತ್ಯಾವಶ್ಯಕ ಅರೆ ವಿಧಾನಗಳು:**
+
+```javascript
+const fruits = ["apple", "banana", "orange"];
+
+// ಅಂಶಗಳನ್ನು ಸೇರಿಸಿ
+fruits.push("grape");           // ಕೊನೆಯಲ್ಲಿ ಸೇರಿಸಿ: ["apple", "banana", "orange", "grape"]
+fruits.unshift("strawberry");   // ಆರಂಭದಲ್ಲಿ ಸೇರಿಸಿ: ["strawberry", "apple", "banana", "orange", "grape"]
+
+// ಅಂಶಗಳನ್ನು ತೆಗೆದುಹಾಕಿ
+const lastFruit = fruits.pop();        // "grape" ಅನ್ನು ತೆಗೆದುಹಾಕಿ ಮತ್ತು ಮರಳಿ ನೀಡುತ್ತದೆ
+const firstFruit = fruits.shift();     // "strawberry" ಅನ್ನು ತೆಗೆದುಹಾಕಿ ಮತ್ತು ಮರಳಿ ನೀಡುತ್ತದೆ
+
+// ಅಂಶಗಳನ್ನು ಹುಡುಕಿ
+const index = fruits.indexOf("banana"); // 1 반환 ( "banana"ದ ಸ್ಥಾನ)
+const hasApple = fruits.includes("apple"); // ಸತ್ಯವನ್ನು 반환ಿಸುತ್ತದೆ
+```
+
+**ಈ ವಿಧಾನಗಳ ಅರ್ಥ:**
+- `push()` (ಕೊನೆಯ ಭಾಗದಲ್ಲಿ) ಮತ್ತು `unshift()` (ಆರಂಭದಲ್ಲಿ) ಮೂಲಕ ಅಂಶಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ
+- `pop()` (ಕೊನೆಯ ಭಾಗದಿಂದ) ಮತ್ತು `shift()` (ಆರಂಭದಿಂದ) ಮೂಲಕ ಅಂಶಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ
+- `indexOf()` ಬಳಸಿ ಅಂಶಗಳ ಸ್ಥಳವನ್ನು ಹುಡುಕುತ್ತದೆ ಮತ್ತು `includes()` ಬಳಸಿ ಅಂಶಗಳ ಇರواجد_ತೆ ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ತೆಗೆದುಹಾಕಲಾದ ಅಂಶಗಳು ಅಥವಾ ಸ್ಥಾನಗಳ ಸೂಚ್ಯಂಕಗಳನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ
+
+✅ ನಿಮಗೂ ಪ್ರಯತ್ನಿಸಿ! ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕಾನ್ಸೋಲ್‌ನಲ್ಲಿ ಸ್ವಂತ ಅರೆ ರಚಿಸಿ ಮತ್ತು ನಿರ್ವಹಿಸಿ.
+
+### 🧠 **ಅರೆ ಮೂಲಭೂತ ಪರಿಶೀಲನೆ: ನಿಮ್ಮ ಡೇಟಾ ಸಂಘಟನೆ**
+
+**ನಿಮ್ಮ ಅರೆ ತಿಳುವಳಿಕೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+- ಅರೆಗಳು 1 ಬದಲು 0 ರಿಂದ ಎಣಿಕೆ ಪ್ರಾರಂಭಿಸುವುದಕ್ಕೆ ಕಾರಣವೇನು?
+- ನೀವು ಇರುವುದಿಲ್ಲದ ಸೂಚ್ಯಂಕವನ್ನು ಪ್ರವೇಶಿಸಲು ಯತ್ನಿಸಿದರೆ (ಹಾಗೆ `arr[100]` 5-ಅಂಶ ಅರೆನಲ್ಲಿ), ಏನು ಆಗುತ್ತೆ?
+- ಅರೆಗಳು ಉಪಯೋಗಿಯಾಗಲಿರುವ ಮೂರು ನೈಜ-ಜಗತ್ತಿನ ಸಂದರ್ಭಗಳನ್ನು ಊಹಿಸಿ.
+
+```mermaid
+stateDiagram-v2
+    [*] --> EmptyArray: const arr = []
+    EmptyArray --> WithItems: ഘടಕಗಳನ್ನು ಸೇರಿಸಿ
+    WithItems --> Accessing: സൂചികകൾ ഉപയോഗിക്കുക
+    Accessing --> Modifying: മൂല്യങ്ങൾ മാറ്റുക
+    Modifying --> Processing: പద్ధതികൾ ഉപയോഗിക്കുക
+    
+    WithItems --> WithItems: push(), unshift()
+    Processing --> Processing: pop(), shift()
+    
+    note right of Accessing
+        സീറോ-ബേസ്ഡ് സൂചിക
+        arr[0] = ആദ്യ ഘടകം
+    end note
+    
+    note right of Processing
+        ഇൻബിൽറ്റ് പദ്ധതികൾ
+        ഡൈനാമിക് പ്രവർത്തനങ്ങൾ
+    end note
+```
+> **ವಾಸ್ತವ ಜಾಗೃತಿ**: ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ನಲ್ಲಿ ಅರೆಗಳು ಎಲ್ಲೆಡೆಯೂ ಇವೆ! ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಫೀಡ್ಗಳು, ಶಾಪಿಂಗ್ ಕಾರ್ಟ್‌ಗಳು, ಫೋಟೋ ಗ್ಯಾಲರಿಗಳು, ಪ್ಲೇಲಿಸ್ಟ್ ಹಾಡುಗಳು—all ಹಿಂದಿನೆಲೆ ಅರೆಗಳೇ!
+
+## ಲೂಪ್ಗಳು
+
+ಚಾರ್ಲ್ಸ್ ಡಿಕ್ಕೆನ್ಸ್ ಅವರ నవಲ್ಸ್‌ನಿಂದ ಪ್ರಸಿದ್ಧ ಶಿಕ್ಷೆ ಎಂಬುದು ವಿದ್ಯಾರ್ಥಿಗಳು ಸ್ಲೇಟ್ ಮೇಲೆ ನಿಯಮಿತವಾಗಿ ಸಾಲುಗಳನ್ನು ಬರೆಯಬೇಕಾಗುತ್ತದೆ ಎಂಬುದು. ನೀವು ಯಾರಿಗಾದರೂ "ಈ ವ್ಯಾಕ್ಯವನ್ನು 100 ಬಾರಿ ಬರೆಯಿರಿ" ಎಂದು ಹೇಳಬಹುದು ಮತ್ತು ಅದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಆಗುತ್ತದೆ ಎಂದು ಕಲ್ಪನೆ ಮಾಡಿ. ಇದುವೇ ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ಲೂಪ್ಗಳು ಮಾಡುತ್ತವೆ.
+
+ಲೂಪ್ಗಳು ದೀರ್ಘಕಾಲ ಶ್ರಮಶೀಲ ಸಹಾಯಕರಂತೆ ಕೆಲಸಮಾಡುತ್ತವೆ. ನೀವು ಶಾಪಿಂಗ್ ಕಾರ್ಟ್‌ನಲ್ಲಿ ಪ್ರತಿಯೊಬ್ಬ ಐಟಂ ಪರಿಶೀಲಿಸುವುದು ಅಥವಾ ಆಲ್ಬಮ್‌ನಲ್ಲಿ ಎಲ್ಲಾ ಚಿತ್ರಗಳನ್ನು ತೋರಿಸುವುದು ಬೇಕಾದರೆ, ಲೂಪ್ಗಳು ಪುನರಾವೃತ್ತಿ ಕಾರ್ಯವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸುತ್ತವೆ.
+
+JavaScript ಪಟ್ಟಿಯಿಂದ ವಿವಿಧ ಲೂಪ್ ಪ್ರಕಾರಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದನ್ನೂ ನೋಡಿ, ಯಾವಾಗ ಬಳಸಬೇಕು ಅಂದ ತಿಳಿಯೋಣ.
+
+```mermaid
+flowchart TD
+    A["🔄 ಲೂಪ್ ಪ್ರಕಾರಗಳು"] --> B["For ಲೂಪ್"]
+    A --> C["While ಲೂಪ್"]
+    A --> D["For...of ಲೂಪ್"]
+    A --> E["forEach ವಿಧಾನ"]
+    
+    B --> B1["ಬೆಲ್ಲನೆ(iterations) ತಿಳಿದಿವೆ"]
+    B --> B2["కౌంటರ್ ಆಧಾರಿತ"]
+    B --> B3["for(init; ಶರತ್ತು; ಹೆಚ್ಚಿಸುವುದು)"]
+    
+    C --> C1["ಅಜ್ಞಾತ(iterations)"]
+    C --> C2["ಶರತ್ತು ಆಧಾರಿತ"]
+    C --> C3["while(ಶರತ್ತು)"]
+    
+    D --> D1["ನವೀನ ES6+"]
+    D --> D2["ಅರೆಗೆ(iteration)"]
+    D --> D3["for(ಐಟಂ of ಅರೆಗೆ)"]
+    
+    E --> E1["ಕಾರ್ಯಾತ್ಮಕ ಶೈಲಿ"]
+    E --> E2["ಅರೆ ವಿಧಾನ"]
+    E --> E3["ಅರೆ.forEach(ಕಾಲ್‌ಬ್ಯಾಕ್)"]
+    
+    F["⏰ ಬಳಸಬೇಕಾಗಿರುವ ಸಮಯ"] --> F1["For: ಎಣಿಕೆಗಳು, ಸೂಚ್ಯಂಕಗಳು"]
+    F --> F2["While: ಬಳಕೆದಾರ ಇನ್ಪುಟ್, ಹುಡುಕಾಟ"]
+    F --> F3["For...of: ಸರಳ ಲೂಪ್"]
+    F --> F4["forEach: ಕಾರ್ಯಾತ್ಮಕ ಪ್ರೋಗ್ರಾಮಿಂಗ್"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+### For ಲೂಪ್
+
+`for` ಲೂಪ್ ಒಂದು ಟೈಮರ್ ಸರಿಹೊಂದಿಸುವಂತೆ - ನೀವು ಎಷ್ಟೆಷ್ಟು ಬಾರಿ ಏನಾದರೂ ಆಗಬೇಕು ಎಂದಿದ್ದೀರೋ ಅದನ್ನು ಸರಿಯಾಗಿ ಗೊತ್ತಿರುತ್ತದೆ. ಇದು ಹೆಚ್ಚು ವ್ಯವಸ್ಥಿತ ಮತ್ತು ಭವಿಷ್ಯನಿರೀಕ್ಷಿತವಾಗಿದ್ದು, ಅರೆಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಅಥವಾ ಗಣನೆ ಮಾಡಬೇಕು ಎಂದಾದರೆ ಆದರ್ಶ.
+
+**For ಲೂಪ್ ರಚನೆ:**
+
+| ಘಟಕ | ಉದ್ದೇಶ | ಉದಾಹರಣೆ |
+|-----------|---------|----------|
+| **ಆರಂಭಿಕೀಕರಣ** | ಪ್ರಾರಂಭ ಬಿಂದುವನ್ನು ಹೊಂದಿಸುವುದು | `let i = 0` |
+| **ಶರತ್ತು** | ಮುನ್ನಡೆಸುವ ಸಮಯ | `i < 10` |
+| **ವೃದ್ಧಿ** | ಹೇಗೆ ನವೀಕರಿಸುವುದು | `i++` |
+
+```javascript
+// 0ರಿಂದ 9ರವರೆಗೆ ಎಣಿಕೆ
+for (let i = 0; i < 10; i++) {
+  console.log(`Count: ${i}`);
+}
+
+// ಹೆಚ್ಚು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ: ಅಂಕಗಳನ್ನು ಪ್ರಕ್ರಿಯೆ ಮಾಡುವುದು
+const testScores = [85, 92, 78, 96, 88];
+for (let i = 0; i < testScores.length; i++) {
+  console.log(`Student ${i + 1}: ${testScores[i]}%`);
+}
+```
+
+**ಹಂತ ಹಂತವಾಗಿಯೇ, ಏನಾಗುತ್ತದೆ:**
+- ಆರಂಭದಲ್ಲಿ ಕೌಂಟರ್ ಚರ `i` 0ಗೆ **ಆರಂಭಿಕೀಕರಿಸಲಾಗುತ್ತದೆ**
+- ಪ್ರತಿ ಪುನರಾವೃತ್ತಿಗಾಗಿ ಶರತ್ತು `i < 10` **ಪರಿಶೀಲಿಸು**
+- ಶರತ್ತು ಸತ್ಯವಿದ್ದಾಗ ಕೋಡ್ ಬ್ಲಾಕ್ **ನಿರ್ವಹಿಸು**
+- ಪ್ರತಿ ಪುನರಾವೃತ್ತಿಗೆ ನಂತರ `i++` ಬಲ 1 **ಸೇರಿಸು**
+- ಶರತ್ತು ಅಸತ್ಯವಾದಾಗ (i 10 ತಲುಪಿದಾಗ) **ನಿಲ್ಲಿಸು**
+
+✅ ಈ ಕೋಡ್ ಅನ್ನು ಬ್ರೌಸರ್ ಕಾನ್ಸೋಲ್‌ನಲ್ಲಿ ಚಾಲನೆ ಮಾಡಿ. ಕೌಂಟರ್, ಶರತ್ತು ಅಥವಾ ಪುನರಾವೃತ್ತಿ ಅಭಿವ್ಯಕ್ತಿಯಲ್ಲಿ ചെറിയ ಬದಲಾವಣೆ ಮಾಡಿದಾಗ ಏನು ಆಗುತ್ತದೆ? ಇದು ಪಶ್ಚಿಮಾಗಾಮಿ ಭಾಗವಾಗಿ ನಡೆಯಲು ಅದರನ್ನೇಕು ಮಾಡಲು ಸಾಧ್ಯವೇ? 
+
+### 🗓️ **For ಲೂಪ್ ನೈಪುಣ್ಯ ಪರಿಶೀಲನೆ: ನಿಯಂತ್ರಣ ಹೊಂದಿದ ಪುನರಾವೃತಿ**
+
+**ನಿಮ್ಮ For ಲೂಪ್ ತಿಳುವಳಿಕೆಯನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿ:**
+- for ಲೂಪ್ನ ಮೂರು ಭಾಗಗಳು ಯಾವವು, ಮತ್ತು ಪ್ರತಿಯೊಂದರ ಕೆಲಸವೇನು?
+- ನೀವು ಅರೆನ ಸಂಪರ್ಕ backwards ಹೇಗೆ ಲೂಪ್ ಮಾಡಿ?
+- ವೃದ್ಧಿ ಭಾಗ `i++` ಜ್ಞಾಪಿಸಲಿಲ್ಲವಾದರೆ ಏನಾಗುತ್ತದೆ?
+
+```mermaid
+flowchart TD
+    A["🚀 ಫಾರ್ ಲೂಪ್ ಪ್ರಾರಂಭಿಸಿ"] --> B["ಆರಂಭಿಸಿ: let i = 0"]
+    B --> C{"ಶರತ್ತು: i < array.length?"}
+    C -->|true| D["ಕೋಡ್ ಬ್ಲಾಕ್ ನಿರ್ವಹಿಸಿ"]
+    D --> E["ಇನ್‌ಕ್ರಿಮೆಂಟ್: i++"]
+    E --> C
+    C -->|false| F["✅ ಲೂಪ್ ನಿಲ್ಲಿಸಿ"]
+    
+    G["📋 ಸಾಮಾನ್ಯ ಮಾದರಿಗಳು"] --> G1["for(let i=0; i<n; i++)"]
+    G --> G2["for(let i=n-1; i>=0; i--)"]
+    G --> G3["for(let i=0; i<arr.length; i+=2)"]
+    
+    style A fill:#e3f2fd
+    style F fill:#e8f5e8
+    style G fill:#fff3e0
+```
+> **ಲೂಪ್ ಬುದ್ದಿವಾದ**: for ಲೂಪ್ಗಳು ನಿಮಗೆ ಏನೇಷ್ಟು ಬಾರಿ ಪುನರಾವೃತ್ತಿ ಬೇಕೋ ಅದು ತಿಳಿದಾಗ ಅತ್ಯುತ್ತಮವಾಗಿವೆ. ಅವು ಅರೆ ಸಂಸ್ಕರಣೆಗೆ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಆಯ್ಕೆ!
+
+### While ಲೂಪ್
+
+`while` ಲೂಪ್ ಅನ್ನುವುದು "ಇತ್ತೇಳುವವರೆಗೆ ಮುಂದುವರೆ" ಎಂದು ಹೇಳಿದಂತೆ - ನೀವು ಎಷ್ಟು ಬಾರಿ ನಡೆಯುವುದೆಂದು ಸ್ಪಷ್ಟವಾಗಿ ಗೊತ್ತು ಇರಲಾರದು; ಆದರೆ ಯಾವಾಗ ನಿಲ್ಲಿಸಬೇಕೆಂದು ತಿಳಿದಿರುತ್ತೆ. ಇದು ಬಳಕೆದಾರರಿಂದ ಇನ್‌ಪುಟ್‌ ಅಗತ್ಯವಿರುವವರೆಗೂ ಕೇಳುವುದು ಅಥವಾ ನಿಮ್ಮ ಹುಡುಕುತ್ತಿರುವ ಡೇಟಾ ಸಿಕ್ಕುವವರೆಗೆ ಹುಡುಕುವಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
+
+**While ಲೂಪಿನ ಲಕ್ಷಣಗಳು:**
+- ಶರತ್ತು ಸತ್ಯವಾಗಿರುವವರೆಗೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
+- ಯಾವುದೇ ಕೌಂಟರ್ ಚರಗಳ ಕೈಯಿಂದ ನಿರ್ವಹಣೆಯನ್ನು ಅಗತ್ಯವಿರುತ್ತದೆ
+- ಪ್ರತಿ ಪುನರಾವೃತ್ತಿಗೆ ಶರತ್ತು ಪರಿಶೀಲನೆ
+- ಶರತ್ತು ಎಂದಿಗೂ ಅಸತ್ಯವಾಗದಿದ್ದರೆ ಅನಂತ ಲೂಪ್ ಉಂಟಾಗಲು ಸಾಧ್ಯ
+
+```javascript
+// ಮೂಲ ಎಣಿಕೆ ಉದಾಹರಣೆ
+let i = 0;
+while (i < 10) {
+  console.log(`While count: ${i}`);
+  i++; // ಹೆಚ್ಚಿಸುವುದನ್ನು ತಪ್ಪಿಸಿಕೊಳ್ಳಬೇಡಿ!
+}
+
+// ಹೆಚ್ಚು ಉಪಯುಕ್ತ ಉದಾಹರಣೆ: ಬಳಕೆದಾರರ ಇನ್ಪುಟ್ ಪ್ರಕ್ರಿಯೆಕರಣ
+let userInput = "";
+let attempts = 0;
+const maxAttempts = 3;
+
+while (userInput !== "quit" && attempts < maxAttempts) {
+  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
+  attempts++;
+}
+
+if (attempts >= maxAttempts) {
+  console.log("Maximum attempts reached!");
+}
+```
+
+**ಈ ಉದಾಹರಣೆಗಳ ಅರ್ಥ:**
+- ಲೂಪ್ ಶರೀರದೊಳಗೆ ಕೈಯಿಂದ ಕೌಂಟರ್ ಚರ `i` ನಿರ್ವಹಣೆ
+- ಅನಂತ ಲೂಪ್ಗಳ ತಡೆಯಕ್ಕೆ ಕೌಂಟರ್ ವೃದ್ಧಿ
+- ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್ ಮತ್ತು ಪ್ರಯತ್ನ ಮಿತಿಗೆ ಉಪಯುಕ್ತ ವಿವರಣೆ
+- ನಿರಂತರ ಕಾರ್ಯನಿರ್ವಹಣೆಗೆ ಸುರಕ್ಷತಾ ವ್ಯವಸ್ಥೆಗಳ ಒಳಗೊಂಡಿದೆ
+
+### ♾️ **While ಲೂಪ್ ಜ್ಞಾನ ಪರಿಶೀಲನೆ: ಶರತ್ತು ಆಧಾರಿತ ಪುನರಾವೃತ್ತಿ**
+
+**ನಿಮ್ಮ while ಲೂಪ್ ಜ್ಞಾನವನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+- while ಲೂಪ್ಗಳಲ್ಲಿ ಮುಖ್ಯ ಅಪಾಯವೇನು?
+- ನೀವು ಯಾವಾಗ while ಲೂಪ್ ಅನ್ನು for ಲೂಪ್ಗಿಂತ ಮೆಚ್ಚಿಕೊಳ್ಳುತ್ತೀರಿ?
+- ಅನಂತ ಲೂಪ್ಗಳನ್ನು ನೀವು ಹೇಗೆ ತಡೆಯಬಹುದು?
+
+```mermaid
+flowchart LR
+    A["🔄 While ಮತ್ತು For ನಡುವೆ"] --> B["While ಲೂಪ್"]
+    A --> C["For ಲೂಪ್"]
+    
+    B --> B1["ಅಜ್ಞಾತ ಪುನರಾವೃತ್ತಿಗಳು"]
+    B --> B2["ಶರತ್ತು ಆಧಾರಿತ"]
+    B --> B3["ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್, ಹುಡುಕಾಟ"]
+    B --> B4["⚠️ ಅಪಾಯ: ಅನಂತ ಲೂಪ್ಗಳು"]
+    
+    C --> C1["ಜಾನಿತ ಪುನರಾವೃತ್ತಿಗಳು"]
+    C --> C2["ಕೌಂಟರ್ ಆಧಾರಿತ"]
+    C --> C3["ಅರೆಯ ಪ್ರಕ್ರಿಯೆ"]
+    C --> C4["✅ ಭದ್ರ: ನಿರೀಕ್ಷಿತ ಕೊನೆ"]
+    
+    D["🛡️ ಭದ್ರತಾ ಸಲಹೆಗಳು"] --> D1["ಎಲ್ಲಾ ಸಮಯದಲ್ಲೂ ಶರತ್ತು ವ್ಯತ್ಯಾಸ ಮಾಡು"]
+    D --> D2["ಬೆಳಕು ಓರುವ ನಿಯಮಗಳನ್ನು ಸೇರಿಸಿ"]
+    D --> D3["ಅತ್ಯ максимಪುನರಾವೃತ್ತಿ ಮಿತಿ ನಿಗದಿ ಮಾಡು"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+```
+> **ಸುರಕ್ಷತೆ ಮೊದಲಿಗೆ**: while ಲೂಪ್ಗಳು ಶಕ್ತಿವಂತವಾದವು, ಆದರೆ ಶರತ್ತಿನ ನಿಟ್ಟಿಯಲ್ಲಿ ಜಾಗ್ರತೆ ಅಗತ್ಯವಿದೆ. ನಿಮ್ಮ ಲೂಪ್ ಶರತ್ತು ಕೊನೆಗೆ ಶೂನ್ಯವಾಗಬೇಕು ಎಂದಾಗಲೇ ಮುಂದುವರಿಯಲಿ!
+
+### ಆಧುನಿಕ ಲೂಪ್ ಪರ್ಯಾಯಗಳು
+
+JavaScript ನಿಮಗೆ ಆಧುನಿಕ ಲೂಪ್ ವ್ಯಾಕರಣವನ್ನ ಒದಗಿಸುತ್ತದೆ, ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಓದುವಿಕೆಗೆ ಹೆಚ್ಚು ಸುಲಭ ಮತ್ತು ತಪ್ಪು ಸಂಭವನೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
+
+**For...of ಲೂಪ್ (ES6+):**
+
+```javascript
+const colors = ["red", "green", "blue", "yellow"];
+
+// ಆಧುನಿಕ ವಿಧಾನ - ಸ್ವಚ್ಛವಾಗಿ ಮತ್ತು ಸುರಕ್ಷಿತವಾಗಿ
+for (const color of colors) {
+  console.log(`Color: ${color}`);
+}
+
+// ಪಾರಂಪರಿಕ for ಲೂಪ್ ಜೊತೆ ಹೋಲಿಕೆ ಮಾಡಿ
+for (let i = 0; i < colors.length; i++) {
+  console.log(`Color: ${colors[i]}`);
+}
+```
+
+**for...of ಯ ಪ್ರಮುಖ ಲಾಭಗಳು:**
+- ಸೂಚ್ಯಂಕ ನಿರ್ವಹಣೆ ಮತ್ತು ಸಂಪರ್ಕ ತಪ್ಪುಗಳನ್ನು ನಿವಾರಣೆ ಮಾಡುತ್ತದೆ
+- ಅರೆ ಉಪಾದಾನಗಳಿಗೆ ನೇರ ಪ್ರವೇಶ ನೀಡುತ್ತದೆ
+- ಕೋಡ್ ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ವ್ಯಾಕರಣ ಸಪರಿಶುದ್ಧಿ ಮಾಡುತ್ತದೆ
+
+**forEach ವಿಧಾನ:**
+
+```javascript
+const prices = [9.99, 15.50, 22.75, 8.25];
+
+// ಕಾರ್ಯಾತ್ಮಕ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಶೈಲಿಗಾಗಿ forEach ಬಳಸಿ
+prices.forEach((price, index) => {
+  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
+});
+
+// ಸರಳ ಕಾರ್ಯಗಳಿಗಾಗಿ ಬಾಣದ ಕಾರ್ಯಗಳೊಂದಿಗೆ forEach
+prices.forEach(price => console.log(`Price: $${price}`));
+```
+
+**forEach ಕುರಿತು ತಿಳಿಯೋಣ:**
+- ಪ್ರತಿ ಅರೆ ಅಂಶಕ್ಕೆ ಒಂದು ಕಾರ್ಯಾನ್ವಯವನ್ನು ನಡೆಸುತ್ತದೆ
+- ಅಂಶ ಮೌಲ್ಯ ಮತ್ತು ಸೂಚ್ಯಂಕ ಎರಡನ್ನು ಕಾರ್ಯಕ್ಕೆ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳಾಗಿ ಒದಗಿಸುತ್ತದೆ
+- ಲೂಪ್ ಅನ್ನು ಮುಕ್ತಾಯಗೊಳಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ (ಪಾರಂಪರಿಕ ಲೂಪ್ಗಳಂಥವಲ್ಲ)
+- ಹೊಸ ಅರೆ ಸೃಷ್ಟಿಸುವುದಿಲ್ಲ, undefined ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ
+
+✅ ನೀವು for ಲೂಪ್ನನ್ನೋ ಅಥವಾ while ಲೂಪ್ನನ್ನೋ ಆಯ್ಕೆ ಮಾಡುವಾಗ ಅಯಾಯವಿದೇ? StackOverflow ನಲ್ಲಿ १७ ಸಾವಿರ ವೀಕ್ಷಕರು ಸಹ ಇದರ ಬಗ್ಗೆ ಪ್ರಶ್ನೆ ಮಾಡಿದ್ದರು. ಕೆಲವು ಅಭಿಪ್ರಾಯಗಳು [ನಿಮಗೆ ಆಸಕ್ತಿದಾಯಕವಾಗಬಹುದು](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+### 🎨 **ಆಧುನಿಕ ಲೂಪ್ ವ್ಯಾಕರಣ ಪರೀಕ್ಷೆ: ES6+ ಸ್ವೀಕಾರ**
+
+**ನಿಮ್ಮ ಆಧುನಿಕ JavaScript ತಿಳಿವಳಿಕೆಯನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿ:**
+- ಪರಂಪರাগত for ಲೂಪ್ಗಿಂತ for...of ಯ ಏನು ಲಾಭ?
+- ನೀವು ಯಾವಾಗ ಇನ್ನೂ ಪರಂಪರাগত for ಲೂಪ್ಗಳನ್ನು ಪ್ರೀತಿಸುತ್ತೀರಿ?
+- forEach ಮತ್ತು map ನಡುವಿನ ಅಂತರವೇನು?
+
+```mermaid
+quadrantChart
+    title ಲೂಪ್ ಆಯ್ಕೆ ಮಾರ್ಗದರ್ಶಿ
+    x-axis ಸಾಂಪ್ರದಾಯಿಕ --> ಆಧುನಿಕ
+    y-axis ಸರಳ --> ಸಂಕೀರ್ಣ
+    quadrant-1 ಆಧುನಿಕ ಸಂಕೀರ್ಣ
+    quadrant-2 ಸಾಂಪ್ರದಾಯಿಕ ಸಂಕೀರ್ಣ
+    quadrant-3 ಸಾಂಪ್ರದಾಯಿಕ ಸರಳ
+    quadrant-4 ಆಧುನಿಕ ಸರಳ
+    
+    ಸಾಂಪ್ರದಾಯಿಕ For: [0.2, 0.7]
+    While ಲೂಪ್: [0.3, 0.6]
+    For...of: [0.8, 0.3]
+    forEach: [0.9, 0.4]
+    ಅರೆ ಮೈಥಡ್ಸ್: [0.8, 0.8]
+```
+> **ಆಧುನಿಕ ಪ್ರವೃತ್ತಿ**: ES6+ ವ್ಯಾಕರಣವಾಗಿರುವ for...of ಮತ್ತು forEach ಅನ್ನು ಅರೆ ಪ್ರಕ್ರಿಯೆಗಾಗಿ ಆದ್ಯತೆ ನೀಡಲಾಗುತ್ತಿದೆ ಏಕೆಂದರೆ ಅವು ಸ್ವಚ್ಛ ಹಾಗೂ ಕಡಿಮೆ ದೋಷಪೂರ್ಣವಾಗಿದೆ!
+
+## ಲೂಪ್ಗಳು ಮತ್ತು ಅರೆಗಳು
+
+ಅರೆಗಳನ್ನು ಲೂಪ್ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದರಿಂದ ಶಕ್ತಿಶಾಲಿ ಡೇಟಾ ಸಂಸ್ಕರಣೆ ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಪಟ್ಟಿ ತೋರಿಸುವುದು ಅಥವಾ ಅಂಕೆಗಳನ್ನು ಲೆಕ್ಕ ಹಾಕುವುದು ಸೇರಿದಂತೆ ಅನೇಕ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಕಾರ್ಯಗಳಿಗೆ ಇದು ಮೂಲಭೂತ.
+
+**ಪರಂಪರাগত ಅರೆ ಸಂಸ್ಕರಣೆ:**
+
+```javascript
+const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+// ಕ್ಲಾಸಿಕ್ ಫಾರ್ ಲೂಪ್ ವಿಧಾನ
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
+}
+
+// ಆಧುನಿಕ ಫಾರ್...ಅಫ್ ವಿಧಾನ
+for (const flavor of iceCreamFlavors) {
+  console.log(`Available flavor: ${flavor}`);
+}
+```
+
+**ಪ್ರತೀ ವಿಧಾನದ ಅರ್ಥ:**
+- ಲೂಪಿನ ಮಿತಿಯನ್ನು ನಿರ್ಧರಿಸಲು ಅರೆ ಉದ್ದ ಗುಣಲಕ್ಷಣ ಬಳಕೆ
+- ಪರಂಪರাগত for ಲೂಪಲ್ಲಿ ಸೂಚ್ಯಂಕ ಮೂಲಕ ಅಂಶಗಳನ್ನು ಪ್ರವೇಶಿಸುವುದು
+- for...of ಲೂಪ್ನಲ್ಲಿ ನೇರವಾಗಿ ಅಂಶಗಳನ್ನು ಪ್ರವೇಶಿಸುವುದು
+- ಪ್ರತಿಯೊಂದು ಅರೆ ಅಂಶವನ್ನು ಹೋಲಿಕೆಯಾಗಿ ಪ್ರಕ್ರಿಯೆ ಮಾಡುವುದು
+
+**ಪ್ರಾಯೋಗಿಕ ಡೇಟಾ ಸಂಸ್ಕರಣೆ ಉದಾಹರಣೆ:**
+
+```javascript
+const studentGrades = [85, 92, 78, 96, 88, 73, 89];
+let total = 0;
+let highestGrade = studentGrades[0];
+let lowestGrade = studentGrades[0];
+
+// ಎಲ್ಲಾ ಶ್ರೇಣಿಗಳನ್ನು ಒಂದು ಲೂಪ್‌ನೊಂದಿಗೆ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ
+for (let i = 0; i < studentGrades.length; i++) {
+  const grade = studentGrades[i];
+  total += grade;
+  
+  if (grade > highestGrade) {
+    highestGrade = grade;
+  }
+  
+  if (grade < lowestGrade) {
+    lowestGrade = grade;
+  }
+}
+
+const average = total / studentGrades.length;
+console.log(`Average: ${average.toFixed(1)}`);
+console.log(`Highest: ${highestGrade}`);
+console.log(`Lowest: ${lowestGrade}`);
+```
+
+**ಈ ಕೋಡ್ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:**
+- ಮೊತ್ತ ಮತ್ತು ಅತಿಕ್ರಮಣಗಳ ಟ್ರ್ಯಾಕಿಂಗ್ ಚರಗಳನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ
+- ಪ್ರತಿ ಅಂಕೆಯನ್ನು ಒಂದೇ ಫರುವ ಲೂಪ್ನಲ್ಲಿ ಪ್ರಕ್ರಿಯೆ ಮಾಡುತ್ತದೆ
+- ಸರಾಸರಿ ಲೆಕ್ಕಿಸುವ ಉದ್ದೇಶಕ್ಕಾಗಿ ಮೊತ್ತ ಸಂಗ್ರಹಿಸುತ್ತದೆ
+- ಪುನರಾವೃತ್ತಿಯ ವೇಳೆ ಅತಿ ಹೆಚ್ಚು ಮತ್ತು ಕಡಿಮೆಯ ಅಂಕಿಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ
+- ಲೂಪ್ನ ನಂತರ ಅಂತಿಮ ಅಂಕಿ-ಗಣಿತಗಳನ್ನು ಲೆಕ್ಕಿಸುತ್ತದೆ
+
+✅ ನಿಮ್ಮ ಸ್ವಂತ ಅರೆ ಲೂಪ್ ಮೂಲಕ ಪೃಖ್ಯಾಯಿಸಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಕಾನ್ಸೋಲ್‌ನಲ್ಲಿ.
+
+```mermaid
+flowchart TD
+    A["📦 ಅರೇ ಡೇಟಾ"] --> B["🔄 ಲೂಪ್ ಪ್ರಕ್ರಿಯೆ"]
+    B --> C["📈 ಫಲಿತಾಂಶಗಳು"]
+    
+    A1["[85, 92, 78, 96, 88]"] --> A
+    
+    B --> B1["ಒಟ್ಟು ಲೆಕ್ಕಿಸಿ"]
+    B --> B2["ಕನಿಷ್ಟ/ಗರಿಷ್ಠ ಕಂಡುಹಿಡಿಯಿರಿ"]
+    B --> B3["ಶರತ್ತುಗಳಿಗೆ ಎಣಿಕೆ"]
+    B --> B4["ಡೇಟಾವನ್ನು ಪರಿವರ್ತನೆ ಮಾಡಿ"]
+    
+    C --> C1["ಸರಾಸರಿ: 87.8"]
+    C --> C2["ಗರಿಷ್ಠ: 96"]
+    C --> C3["ಪಾಸಾಗಿರುವವರು: 5/5"]
+    C --> C4["ಅಕ್ಷರ ಶ್ರೇಣಿಗಳು"]
+    
+    D["⚡ ಪ್ರಕ್ರಿಯೆ ಮಾದರಿಗಳು"] --> D1["ಚಾರಣ (ಮೊತ್ತ)"]
+    D --> D2["ತೂಕಣಿಕೆ (ಕನಿಷ್ಟ/ಗರಿಷ್ಠ)"]
+    D --> D3["ಫಿಲ್ಟರಿಂಗ್ (ಶರತ್ತುಗಳು)"]
+    D --> D4["ಮ್ಯಾಪಿಂಗ್ (ಪರಿವರ್ತನೆ)"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#f3e5f5
+```
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ಈ ಕೆಳಗಿನ ಚಾಲೆಂಜ್ ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಅನ್ನು ಬಳಸಿರಿ:
+
+**ವಿವರಣೆ:** ಅರೆಗಳ ಮತ್ತು ಲೂಪ್ಗಳನ್ನು ಸಂಯೋಜಿಸಿ ವಿಶ್ಲೇಷಣಾ ಕಾರ್ಯಕ್ಕಾಗಿ ಸಮಗ್ರ ಡೇಟಾ ಸಂಸ್ಕರಣಾ ಕಾರ್ಯವನ್ನು ಕಟ್ಟೊಂಡು, ಅರ್ಥಪೂರ್ಣ ವಿವರಗಳನ್ನು ರಚಿಸಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** `analyzeGrades` ಎಂಬ ಕಾರ್ಯವನ್ನು ರಚಿಸಿ, ಇದು ವಿದ್ಯಾರ್ಥಿಗಳ ಅಂಕಗಳ (ಪ್ರತಿಯೊಂದರಲ್ಲಿಯೂ ಹೆಸರು ಮತ್ತು ಅಂಕಗಳ ಗುಣಗಳನ್ನು ಹೊಂದಿರುವ ಅರೆ) ಡೇಟಾವನ್ನು ಸ್ವೀಕರಿಸಿ, ಎತ್ತರದ ಅಂಕಿ, ಕಡಿಮೆ ಅಂಕಿ, ಸರಾಸರಿ ಅಂಕಿ, 70 ಅಥವಾ ಹೆಚ್ಚು ಅಂಕಿ ಪಡೆದ ವಿದ್ಯಾರ್ಥಿಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಸರಾಸರಿ ಮೀರಿದ ಅಂಕಿಯನ್ನು ಪಡೆದ ವಿದ್ಯಾರ್ಥಿಗಳ ಹೆಸರುಗಳ ಅರೇ ಅನ್ನು ಒಳಗೊಂಡ ಸಂಕೀರ್ಣ ಮಾಹಿತಿ ನಿಷ್ಪಾದನೆ ಮಾಡುತ್ತದೆ. ಕನಿಷ್ಟ ಎರಡು ವಿಭಿನ್ನ ಲೂಪ್ ಪ್ರಕಾರಗಳನ್ನು ನಿಮ್ಮ ಪರಿಹಾರದಲ್ಲಿ ಬಳಸಿ.
+
+ಇಲ್ಲಿ [ಏಜೆಂಟ್ ಮೋಡ್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಯನ್ನು ತಿಳಿಯಿರಿ.
+
+## 🚀 ಚಾಲೆಂಜ್
+JavaScript ಕೆಲವು ಆಧುನಿಕ ಸರಣಿಯ ವಿಧಾನಗಳನ್ನು ನೀಡುತ್ತದೆ, ಇದು ನಿರ್ದಿಷ್ಟ ಕಾರ್ಯಗಳಿಗೆ ಪರಂಪರাগত ಲೂಪುಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು. [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), ಮತ್ತು [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) ಅನ್ವೇಷಿಸಿ.
+
+**ನಿಮ್ಮ ಸವಾಲು:** ಕನಿಷ್ಟ ಮೂರು ವಿಭಿನ್ನ ಸರಣಿಯ ವಿಧಾನಗಳನ್ನು ಉಪಯೋಗಿಸಿ ವಿದ್ಯಾರ್ಥಿಗಳ ಅಂಕಗಳನ್ನು ಪರಿಷ್ಕರಿಸಿ. ಆಧುನಿಕ JavaScript ವಾಕ್ಯರಚನೆಯೊಂದಿಗೆ ಕೋಡ್ ಎಷ್ಟು ಸ್ವಚ್ಛ ಹಾಗೂ ಓದಲಾಡುವಾಗಿರುವುದನ್ನು ಗಮನಿಸಿ.
+
+## ಪೋಷ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್
+[ಪೋಷ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/14)
+
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+JavaScript ನ ಸರಣಿಗಳಲ್ಲಿನ ಹಲವು ವಿಧಾನಗಳು ಡೇಟಾ ನಿರ್ವಹಣೆಗೆ ಅತ್ಯಂತ ಉಪಯುಕ್ತವಾಗಿವೆ. [ಈ ವಿಧಾನಗಳನ್ನು ಓದಿ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) ಮತ್ತು ಅವುಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ (pattern push, pop, slice ಮತ್ತು splice) ನಿಮ್ಮ ರಚನೆಯ ಸರಣಿಯಲ್ಲಿ.
+
+## ನಿಯೋಜನೆ
+
+[ಸರಣಿಯನ್ನು ಲೂಪ್ ಮಾಡಿ](assignment.md)
+
+---
+
+## 📊 **ನಿಮ್ಮ ಸರಣಿಗಳು ಮತ್ತು ಲೂಪ್ಸ್ ಸಾಧನ ಸಂಕಲನ**
+
+```mermaid
+graph TD
+    A["🎯 ಸರಣಿಗಳು & ಪುನರಾವರ್ತನೆ ನಿಪುಣತೆ"] --> B["📦 ಸರಣಿ ಮೂಲಭೂತಗಳು"]
+    A --> C["🔄 ಪುನರಾವರ್ತನೆ ವಿಧಗಳು"]
+    A --> D["🔗 ಡೇಟಾ ಪ್ರಕ್ರಿಯೆ"]
+    A --> E["🎨 ಆಧುನಿಕ ತಂತ್ರಗಳು"]
+    
+    B --> B1["ರಚನೆ: [ ]"]
+    B --> B2["ಸೂಚ್ಯಾಂಕನ: arr[0]"]
+    B --> B3["ವಿಧಾನಗಳು: push, pop"]
+    B --> B4["ಗುಣಲಕ್ಷಣಗಳು: length"]
+    
+    C --> C1["For: ज्ञಾತ ಪುನರಾವರ್ತನೆಗಳು"]
+    C --> C2["While: ಸ್ಥಿತಿಗತಿಯ ಆಧಾರಿತ"]
+    C --> C3["For...of: ನೇರ ಪ್ರವೇಶ"]
+    C --> C4["forEach: ಕ್ರಿಯಾತ್ಮಕ"]
+    
+    D --> D1["ಸಂಖ್ಯಾಶಾಸ್ತ್ರ ಲೆಕ್ಕಾಚಾರ"]
+    D --> D2["ಡೇಟಾ ಪರಿವರ್ತನೆ"]
+    D --> D3["ಶೋಧನೆ ಮತ್ತು ನೀಡಿಕೆ"]
+    D --> D4["ನೇರ-ಸಮಯ ಪ್ರಕ್ರಿಯೆ"]
+    
+    E --> E1["ಎರೋ ಕಾರ್ಯಗಳು"]
+    E --> E2["ವಿಧಾನ ಶ್ರೇಣಿ"]
+    E --> E3["ವಿಭಜನೆ"]
+    E --> E4["ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್"]
+    
+    F["💡 ಪ್ರಮುಖ ಲಾಭಗಳು"] --> F1["ಕಾರ್ಯಕ್ಷಮ ಡೇಟಾ ಕೈಗಾರಿಕೆ"]
+    F --> F2["ಕುಕಮ ಸಂಯೋಜನೆಯ ಕಡಿತ"]
+    F --> F3["ವಿಸ್ತಾರಗೊಳ್ಳುವ ಪರಿಹಾರಗಳು"]
+    F --> F4["ಶುಭ್ರ ಸಂರಚನೆ"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+---
+
+## 🚀 ನಿಮ್ಮ ಸರಣಿಗಳು ಮತ್ತು ಲೂಪ್ಸ್ ಪರಿಣತಿ ಕಾಲರೇಖೆ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು**
+- [ ] ನಿಮ್ಮ ಇಷ್ಟದ ಚಲನಚಿತ್ರಗಳ ಸರಣಿಯನ್ನು ರಚಿಸಿ ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳನ್ನು ಪ್ರವೇಶಿಸಿ
+- [ ] 1 ರಿಂದ 10 ರವರೆಗೆ ಎಣಿಸುವ for ಲೂಪನ್ನು ಬರೆಯಿರಿ
+- [ ] ಪಾಠದಲ್ಲಿ ನೀಡಲಾದ ಆಧುನಿಕ ಸರಣಿ ವಿಧಾನಗಳ ಸವಾಲನ್ನು ಪ್ರಯತ್ನಿಸಿ
+- [ ] ನಿಮ್ಮ ಬ್ರೌಸರಿನ ಕನ್ಸೊಲ್‌ನಲ್ಲಿ ಸರಣಿ ಸೂಚ್ಯಾಂಕ ನಿಯಂತ್ರಣ ಅಭ್ಯಾಸ ಮಾಡಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದವುಗಳು**
+- [ ] ಪಾಠದ ನಂತರದ ಕ್ವಿಜ್ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಯಾವುದೇ ಕಠಿಣ ಅಂಶಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+- [ ] GitHub Copilot ಸವಾಲಿನಿಂದ ಸಮಗ್ರ ಶ್ರೇಣಿ ವಿಶ್ಲೇಷಕ ನಿರ್ಮಿಸಿ
+- [ ] ಐಟಂಗಳನ್ನು ಸೇರಿಸುವ ಮತ್ತು ತೆಗೆದುಹಾಕುವ ಸರಳ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ ರಚಿಸಿ
+- [ ] ವಿಭಿನ್ನ ಲೂಪ್ ವಿಧಗಳಾದರೀತಿಯನ್ನು ಪರಿವರ್ತಿಸುವ ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] `push`, `pop`, `slice`, ಮತ್ತು `splice` ಮುಂತಾದ ಸರಣಿ ವಿಧಾನಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರ ವಿಸ್ತಾರ ಡೇಟಾ ಪ್ರಕ್ರಿಯೆ ಪ್ರಯಾಣ**
+- [ ] "ಸರಣಿಯನ್ನು ಲೂಪ್ ಮಾಡಿ" ನೇಯ್ದ ನಿಯೋಜನೆಯನ್ನು ಸೃಜನಾತ್ಮಕ ಸುಧಾರಣೆಗಳೊಂದಿಗೆ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಸರಣಿಗಳು ಮತ್ತು ಲೂಪ್ಸ್ ಉಪಯೋಗಿಸಿ ಟು-ಡೂ ಲಿಸ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಿ
+- [ ] ಸಂಖ್ಯಾತ್ಮಕ ಡೇಟಾಗೆ ಸರಳ ಸಂಕೇತಕ ಕ್ಯಾಲ್ಕ್ಯುಲೇಟರ್ ರಚಿಸಿ
+- [ ] [MDN ಸರಣಿ ವಿಧಾನಗಳು](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) ಜೊತೆ ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] ಫೋಟೋ ಗ್ಯಾಲರಿ ಅಥವಾ ಸಂಗೀತ ಪ್ಲೇಲಿಸ್ಟ್ ಇಂಟರ್‌ಫೇಸ್ ರಚಿಸಿ
+- [ ] `map`, `filter`, ಮತ್ತು `reduce` ಬಳಸಿ ಕಾರ್ಯಕಾರಿ ಕಾರ್ಯಕ್ರಮದ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಅನ್ವೇಷಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ವಿಸ್ತಾರ ಪರಿವರ್ತನೆ**
+- [ ] ಉನ್ನತ ಸರಣಿ ಕಾರ್ಯಾಚರಣೆಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ ಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ಸಂಪೂರ್ಣ ಡೇಟಾ ದೃಶ್ಯೀಕರಣ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ರಚಿಸಿ
+- [ ] ಡೇಟಾ ಪ್ರಕ್ರಿಯೆ ಸಂಬಂಧಿತ open source ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ
+- [ ] ಅನುಭವದಿಂದ ಸರಣಿಗಳು ಮತ್ತು ಲೂಪ್ಸ್ ಕುರಿತು ಯಾರಿಗಾದರೂ ಬೋಧಿಸಿ
+- [ ] ಪುನಃಬಳಕೆ ಮಾಡಬಹುದಾದ ಡೇಟಾ ಪ್ರಕ್ರಿಯೆ ಕಾರ್ಯಗಳ ವೈಯಕ್ತಿಕ ಲೈಬ್ರರಿ ರಚಿಸಿ
+- [ ] ಸರಣಿಗಳ ಮೇಲೆ ನಿರ್ಮಿತ ಅಲ್ಗೊರಿದಮ್ಸ್ ಮತ್ತು ಡೇಟಾ ರಚನೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿ
+
+### 🏆 **ಅಂತಿಮ ಡೇಟಾ ಪ್ರಕ್ರಿಯೆ ಚಾಂಪಿಯನ್ ಪರಿಶೀಲನೆ**
+
+**ನಿಮ್ಮ ಸರಣಿ ಮತ್ತು ಲೂಪ್ಸ್ ಪರಿಣತಿಯನ್ನು ಹರ್ಷಿಸಿಕೊಳ್ಳಿ:**
+- ನೈಜ ಜಗತ್ತಿನ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ನೀವು ತಿಳಿದ ಅತ್ಯಂತ ಉಪಯುಕ್ತ ಸರಣಿ ಕಾರ್ಯವೇನು?
+- ಯಾವ ಲೂಪಿನ ವಿಧ ನಿಮಗೆ ಅತ್ಯಂತ ಸಹಜವಾಗಿದೆ ಮತ್ತು ಯಾಕೆ?
+- ಸರಣಿಗಳು ಮತ್ತು ಲೂಪ್ಸ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ನಿಮ್ಮ ಡೇಟಾ ಸಂಘಟನೆಯ ಪ್ರವರ್ತನೆ ಹೇಗೆ ಬದಲಾಗಿದೆ?
+- ನೀವು ಮುಂದಿನ ಬಾರಿ ಯಾವ ಸಂಕೀರ್ಣ ಡೇಟಾ ಪ್ರಕ್ರಿಯೆ ಕಾರ್ಯವನ್ನು ನಿರ್ವಹಿಸಲು ಇಚ್ಛಿಸುತ್ತೀರಿ?
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಡೇಟಾ ಪ್ರೊಸೆಸಿಂಗ್ tiến
+    section ಇವತ್ತು
+      ಅರೇ ಗೊಂದಲ: 3: ನೀವು
+      ಲೂಪ್ ಮೂಲಗಳು: 4: ನೀವು
+      ಸೂಚ್ಯಂಕ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ: 5: ನೀವು
+    section ಈ ವಾರ
+      ವಿಧಾನ ಮಾಸ್ಟರಿ: 4: ನೀವು
+      ಪರಿಣಾಮಕಾರಿ ಪ್ರೊಸೆಸಿಂಗ್: 5: ನೀವು
+      ಆಧುನಿಕ ಸಂಖ್ಯಾಶೈಲಿ: 5: ನೀವು
+    section ಮುಂದಿನ ತಿಂಗಳು
+      ಸಂಕೀರ್ಣ ಆಲ್ಗಾರಿಥಮ್ ಗಳು: 5: ನೀವು
+      ಕಾರ್ಯಕ್ಷಮತೆ ಅನುಕೂಲಪಡಿಸು: 5: ನೀವು
+      ಇತರರಿಗೆ ಬೋಧನೆ: 5: ನೀವು
+```
+> 📦 **ನೀವು ಡೇಟಾ ಸಂಘಟನೆ ಮತ್ತು ಪ್ರಕ್ರಿಯೆಯ ಶಕ್ತಿಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿದ್ದೀರಿ!** ಸರಣಿಗಳು ಮತ್ತು ಲೂಪ್ಸ್ ಒಂದೊಂದೂ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೂಲाधಾರ. ಸರಳ ಪಟ್ಟಿ முதல் ಸಂಕೀರ್ಣ ಡೇಟಾ ವಿಶ್ಲೇಷಣೆಯವರೆಗೆ ನೀವು ಈಗ ಮಾಹಿತಿಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮತ್ತು ಸೊಬಗು ಬಳಸಿ ಸಂಚಯಿಸಬಹುದು. ಪ್ರತಿಯೊಬ್ಬ ಡೈನಾಮಿಕ್ ವೆಬ್‌ಸೈಟ್, ಮೊಬೈಲ್ ಅ್ಯಪ್ ಮತ್ತು ಡೇಟಾ ಚಾಲಿತ ಅಪ್ಲಿಕೇಶನ್ ಈ ಮೂಲಭೂತ ತತ್ತ್ವಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ವ್ಯಾಜ್ಯತೀಯ ಡೇಟಾ ಪ್ರಕ್ರಿಯೆಯ ಜಗತ್ತಿಗೆ ಸ್ವಾಗತ! 🎉
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಜ್ಯಕಷ್ಟು**:  
+ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯನ್ನು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸಂಗತಿಗಳನ್ನು ಹೊಂದಿರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆ ಪ್ರಾಧಿಕೃತ ಮೂಲಹಾಗೂ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಉಪಯೋಗಿಸುವುದರಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅಗತ್ಯಾರ್ಹತೆಗಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/2-js-basics/4-arrays-loops/assignment.md

@@ -0,0 +1,124 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8abcada0534e0fb3a7556ea3c5a2a8a4",
+  "translation_date": "2026-01-08T13:11:18+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಅರೇಸ್ ಮತ್ತು ಲೂಪ್ ಗಳ ಅಸೈನ್‌ಮೆಂಟ್
+
+## ಸೂಚನೆಗಳು
+
+ಅರೇಸ್ ಮತ್ತು ಲೂಪ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ಅಭ್ಯಾಸ ಮಾಡಲು ಕೆಳಗಿನ ವ್ಯಾಯಾಮಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ. ಪ್ರತಿ ವ್ಯಾಯಾಮ ಪಾಠದ ಸಂಪ್ರದಾಯಗಳ ಮೇಲೆ ಅನುಸರಿಸುತ್ತದೆ ಮತ್ತು ನೀವು ವಿಭಿನ್ನ ಲೂಪ್ ಪ್ರಕಾರಗಳು ಮತ್ತು ಅರೇ ಮೆತೃಡ್ಗಳನ್ನು ಅನ್ವಯಿಸಲು ಪ್ರೇರೇಪಿಸುತ್ತದೆ.
+
+### ವ್ಯಾಯಾಮ 1: ಸಂಖ್ಯೆ ಮಾದರಿ ರಚನೆ
+1-20ರ ನಡುವೆ ಪ್ರತಿ 3ನೇ ಸಂಖ್ಯೆಯನ್ನು ಸೂಚಿಸುತ್ತ ಹಾಗೂ ಅದನ್ನು ಕಾನ್ಸೋಲ್‌ ಗೆ ಮುದ್ರಿಸುವ ಒಂದು ಪ್ರೋಗ್ರಾಂ ರಚಿಸಿ.
+
+**ಅವಶ್ಯಕತೆಗಳು:**
+- ಕಸ್ಟಮ್ ಹೆಚ್ಚಣೆ ಹೊಂದಿರುವ `for` ಲೂಪ್ ಬಳಸಿ
+- ಬಳಕೆದಾರನಿಗೆ ಅನುಕೂಲಕರ ಆಕಾರದಲ್ಲಿ ಸಂಖ್ಯೆಗಳ ಪ್ರದರ್ಶನ ಮಾಡಿ
+- ನಿಮ್ಮ ತರ್ಕವನ್ನು ವಿವರಿಸುವ ವಿವರಣಾತ್ಮಕ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ
+
+**ನಿರೀಕ್ಷಿತ ಔಟ್ಪುಟ್:**
+```
+3, 6, 9, 12, 15, 18
+```
+
+> **ಟಿಪ್:** ನಿಮ್ಮ for ಲೂಪ್‌ನ ಇಟರೇಷನ್-ವಿವರಣೆಯನ್ನು ಬದಲಿಸಿ ಸಂಖೇಯಗಳನ್ನು ಬಿಡಿಸುವಂತೆ ಮಾಡಿ.
+
+### ವ್ಯಾಯಾಮ 2: ಅರೇ ವಿಶ್ಲೇಷಣೆ
+ಕನಿಷ್ಠ 8 ವಿಭಿನ್ನ ಸಂಖ್ಯೆಗಳ ಅರೇ ರಚಿಸಿ ಮತ್ತು ಡೇಟಾವನ್ನು ವಿಶ್ಲೇಷಿಸುವ ಕಾರ್ಯಗಳನ್ನು ಬರೆಯಿರಿ.
+
+**ಅವಶ್ಯಕತೆಗಳು:**
+- ಕನಿಷ್ಠ 8 ಮೌಲ್ಯಗಳೊಂದಿಗೆ `numbers` ಎನ್ನುವ ಅರೇ ರಚಿಸಿ
+- ಅತಿ ದೊಡ್ಡ ಸಂಖ್ಯೆಯನ್ನು retourನ ಮಾಡುವ `findMaximum()` ಎನ್ನುವ Function ಬರೆಯಿರಿ
+- ಅತಿ ಕಡಿಮೆ ಸಂಖ್ಯೆಯನ್ನು retourನ ಮಾಡುವ `findMinimum()` ಎನ್ನುವ Function ಬರೆಯಿರಿ  
+- ಎಲ್ಲಾ ಸಂಖ್ಯೆಗಳ ಒಟ್ಟು retourನ ಮಾಡುವ `calculateSum()` ಎನ್ನುವ Function ಬರೆಯಿರಿ
+- ಪ್ರತಿಯೊಂದು Function ಅನ್ನು ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಫಲಿತಾಂಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಿ
+
+**ಬೋನಸ್ ಚಾಲೆಂಜ್:** ಅರೇಯಲ್ಲಿ ಎರಡನೇ ಅತಿ ದೊಡ್ಡ ಸಂಖ್ಯೆಯನ್ನು ಕಂಡುಹಿಡಿಯುವ Function ರಚಿಸಿ.
+
+### ವ್ಯಾಯಾಮ 3: ಶ್ರೇಣಿ ಅರೇ ಪ್ರಕ್ರಿಯೆ
+ನಿಮ್ಮ ಪ್ರಿಯ ಸಿನಿಮಾಗಳು/ಪುಸ್ತಕಗಳು/ಪಾಡ್ ಗಳೆಯ ಅರೇ ರಚಿಸಿ ಮತ್ತು ವಿಭಿನ್ನ ಲೂಪ್ ಪ್ರಕಾರಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ.
+
+**ಅವಶ್ಯಕತೆಗಳು:**
+- ಕನಿಷ್ಠ 5 ಸ್ಟ್ರಿಂಗ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಅರೇ ರಚಿಸಿ
+- ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ಐಟಂಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಪಾರಂಪರಿಕ `for` ಲೂಪ್ ಬಳಸಿ (1. ಐಟಂ ಹೆಸರು)
+- ಐಟಂಗಳನ್ನು ದೊಡ್ಡ ಅಕ್ಷರಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು `for...of` ಲೂಪ್ ಬಳಸಿ
+- ಒಟ್ಟು ಅಕ್ಷರಗಳನ್ನು ಎಣಿಸಲು ಮತ್ತು ಪ್ರದರ್ಶಿಸಲು `forEach()` ಮೆತೃಡ್ ಬಳಸಿ
+
+**ಉದಾಹರಣೆ ಔಟ್ಪುಟ್:**
+```
+Traditional for loop:
+1. The Matrix
+2. Inception
+3. Interstellar
+
+For...of loop (uppercase):
+THE MATRIX
+INCEPTION
+INTERSTELLAR
+
+Character count:
+Total characters across all titles: 42
+```
+
+### ವ್ಯಾಯಾಮ 4: ಡೇಟಾ ಫಿಲ್ಟರಿಂಗ್ (ಬೃಹತ್)
+ವಿದ್ಯಾರ್ಥಿಗಳ ಪ್ರತಿನಿಧಿಸುವ ಅಬ್ಜೆಕ್ಟ್‌ಗಳ ಅರೇ ಇವುಗಳನ್ನು ಪ್ರಕ್ರಿಯಿಸುವ ಪ್ರೋಗ್ರಾಂ ರಚಿಸಿ.
+
+**ಅವಶ್ಯಕತೆಗಳು:**
+- ಕನಿಷ್ಠ 5 ವಿದ್ಯಾರ್ಥಿ ಅಬ್ಜೆಕ್ಟ್‌ಗಳಿಂದ `name`, `age`, `grade` ಎಂಬ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿರುವ ಅರೇ ರಚಿಸಿ
+- 18 ವರ್ಷ ಅಥವಾ ಹೆಚ್ಚುವಾಗಿರುವ ವಿದ್ಯಾರ್ಥಿಗಳನ್ನು ಹುಡುಕಲು ಲೂಪ್‌ಗಳ ಬಳಕೆ ಮಾಡಿ
+- ಎಲ್ಲಾ ವಿದ್ಯಾರ್ಥಿಗಳ ಸರಾಸರಿ ಗ್ರೇಡ್ ಲೆಕ್ಕ ಹಾಕಿ
+- 85ರ ಮೇಲಾಗಿರುವ ಗ್ರೇಡ್‌ಗಳೊಂದಿಗೆ ವಿದ್ಯಾರ್ಥಿಗಳ ಹೊಸ ಅರೇ ರಚಿಸಿ
+
+**ಉದಾಹರಣಾ ರಚನೆ:**
+```javascript
+const students = [
+  { name: "Alice", age: 17, grade: 92 },
+  { name: "Bob", age: 18, grade: 84 },
+  // ಮತ್ತಷ್ಟು ವಿದ್ಯಾರ್ಥಿಗಳನ್ನು ಸೇರಿಸಿ...
+];
+```
+
+## ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪರೀಕ್ಷಿಸುವಿಕೆ
+
+ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಂಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು:
+1. ಪ್ರತಿಯೊಂದು ವ್ಯಾಯಾಮವನ್ನು ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕಾನ್ಸೋಲ್‌ನಲ್ಲಿ ಕಳಿಸಿ
+2. ಔಟ್ಪುಟ್‌ಗಳು ನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತಿವೆಯೇ ಎಂದು ದೃಢೀಕರಿಸಿ
+3. ವಿಭಿನ್ನ ಡೇಟಾ ಸೆಟ್‌ಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ
+4. ನಿಮ್ಮ ಕೋಡ್ ಅಸಾಧಾರಣ ಸಂದರ್ಭಗಳನ್ನು (ಖಾಲಿ ಅರೇಗಳು, ಏಕತ್ವ ಅಂಶಗಳು) ನಿಭಾಯಿಸುವುದನ್ನು ಪರಿಶೀಲಿಸಿ
+
+## ಸಲ್ಲಿಕೆ ಮಾರ್ಗಸೂಚಿಗಳು
+
+ನಿಮ್ಮ ಸಲ್ಲಿಕೆಯಲ್ಲಿ ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸಿ:
+- ಪ್ರತಿಯೊಂದು ವ್ಯಾಯಾಮಕ್ಕೆ ಉತ್ತಮವಾಗಿ ಕಾಮೆಂಟ್‌ಚೇಷಿತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್
+- ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಂಗಳು ಚಾಲನೆಯಲ್ಲಿರುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು ಅಥವಾ ಪಠ್ಯ ಔಟ್ಪುಟ್ನು
+- ಪ್ರತಿಯೊಂದು ಕಾರ್ಯಕ್ಕಾಗಿ ನೀವು ಆಯ್ದ ಲೂಪ್ ಪ್ರಕಾರ ಮತ್ತು ಕಾರಣದ ಸಂಕ್ಷಿಪ್ತ ವಿವರಣೆ
+
+## ಮೌಲ್ಯಮಾಪನ ಕ್ರಮ
+
+| ಮಾನದಂಡಗಳು | ಸರ್ಪ್ರಶಸ್ತ (3 ಅಂಕಗಳು) | ಯೋಗ್ಯ (2 ಅಂಕಗಳು) | ಸುಧಾರಣೆಗೆ ಅಗತ್ಯ (1 ಅಂಕ) |
+| -------- | -------------------- | ------------------- | --------------------------- |
+| **ಕಾರ್ಯಕ್ಷಮತೆ** | ಎಲ್ಲಾ ವ್ಯಾಯಾಮಗಳು ಬೋನಸ್ ಚಾಲೆಂಜ್‌ಗಳೊಂದಿಗೆ ಸರಿಯಾಗಿ ಪೂರ್ಣಗೊಂಡಿವೆ | ಎಲ್ಲಾ ಅಗತ್ಯ ವ್ಯಾಯಾಮಗಳು ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ | ಕೆಲವು ವ್ಯಾಯಾಮಗಳು ಅಪೂರ್ಣ ಅಥವಾ ದೋಷಗಳಿವೆ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಸ್ವಚ್ಛ, ಉತ್ತಮವಾಗಿ ಸಂಘಟಿತ ಕೋಡ್ ಮತ್ತು ವಿವರಣಾತ್ಮಕ ಚರವರನ್ನು ಬಳಸಲಾಗಿದೆ | ಕೋಡ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಆದರೆ ಸ್ವಚ್ಛವಾಗಿರಬಾರದು | ಕೋಡ್ ಅಸ್ವತಂತ್ರ ಅಥವಾ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟ |
+| **ಕಾಮೆಂಟ್‌ಗಳು** | ತರ್ಕ ಮತ್ತು ನಿರ್ಣಯಗಳನ್ನು ವಿವರಿಸುವ ವ್ಯಾಪಕ ಕಾಮೆಂಟ್‌ಗಳು | ಮೂಲಭೂತ ಕಾಮೆಂಟ್‌ಗಳು ಇದ್ದವು | ಕನಿಷ್ಟ ಅಥವಾ ಕಾಮೆಂಟ್‌ಗಳಿಲ್ಲ |
+| **ಲೂಪ್ ಬಳಕೆ** | ವಿಭಿನ್ನ ಲೂಪ್ ಪ್ರಕಾರಗಳ ಅರ್ಥವನ್ನು ಸೂಕ್ತವಾಗಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ | ಲೂಪ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಬಳಸುತ್ತದೆ ಆದರೆ ನಿರ್ಬಂಧಿತ ವಿಧಗಳು | ತಪ್ಪು ಅಥವಾ ಅಸಮರ್ಥ ಲೂಪ್ ಬಳಕೆ |
+| **ಪರೀಕ್ಷಣೆ** | ಅನೇಕ ದೃಶ್ಯಗಳೊಂದಿಗೆ ಸೂಕ್ಷ್ಮ ಪರೀಕ್ಷೆಯ ಸಾಕ್ಷ್ಯಗಳು | ಮೂಲಭೂತ ಪರೀಕ್ಷೆ ಪ್ರದರ್ಶಿತವಾಗಿದೆ | ಪರೀಕ್ಷೆಯ ಅನಿಷ್ಟ ದ್ರಷ್ಟಾಂತಗಳಿಲ್ಲ |
+
+## ಪ್ರತ್ಯಾಮ್ನ ಪ್ರಶ್ನೆಗಳು
+
+ವ್ಯಾಸಯ ನಂತರ, ತಿಳಿದುಕೊಳ್ಳಿ:
+1. ಯಾವ ಲೂಪ್ ಪ್ರಕಾರ ಬಳಸುವುದು ಸ್ವಾಭಾವಿಕವಾಗಿ ಅನಿಸುತ್ತಿತ್ತು ಮತ್ತು ಏಕೆ?
+2. ಅರೇಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ನೀವು ಎದುರಿಸಿದ ಸವಾಲುಗಳು ಏನೆಂದು?
+3. ಈ ನಿಪುಣತೆಗಳನ್ನು ನೈಜ ಜಾಗತಿಕ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಯೋಜನೆಗಳಿಗೆ ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು?
+4. ಪ್ರಕಾರ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ನಿಮ್ಮ ಕೋಡ್ ಗಣಿತಮಾಡಬೇಕಾದರೆ ನೀವು ಏನು ವಿಭಿನ್ನ ಮಾಡುತ್ತೀರಿ?
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಜಿಸಿ ಸೂಚನೆ**:  
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಸ್ತಾವೇಜು ಅದರ ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕಾರಿಗಳಿಗೆ ಆದ ಮೂಲದಂತೆ ಪರಿಗಣಿಸಲಾಗುವುದು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಗರ್ಭಿತ ತೊಂದರೆಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗಿದ್ದೇವೆ ಎಂಬುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/2-js-basics/README.md

@@ -0,0 +1,30 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2026-01-08T10:45:23+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "kn"
+}
+-->
+# ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಚಯ
+
+ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವೆಬ್‌ನ ಭಾಷೆ. ಈ ನಾಲ್ಕು ಪಾಠಗಳಲ್ಲಿ, ನೀವು ಅದರ ಮೂಲ ತತ್ವಗಳನ್ನು ಕಲಿಯುತ್ತೀರಿ.
+
+### ವಿಷಯಗಳು
+
+1. [ಚರಗಳು ಮತ್ತು ಡೇಟಾ ಪ್ರಕಾರಗಳು](1-data-types/README.md)
+2. [ಫಂಕ್ಷನ್ಗಳು ಮತ್ತು ವಿಧಾನಗಳು](2-functions-methods/README.md)
+3. [ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ನಿರ್ಧಾರಗಳನ್ನು ಕೈಗೊಳ್ಳುವುದು](3-making-decisions/README.md)
+4. [IOರೇಗಳು ಮತ್ತು ಲೂಪ್ಗಳ](4-arrays-loops/README.md)
+
+### ಋಣಗಳು
+
+ಈ ಪಾಠಗಳನ್ನು ♥️ಧ್ಯಾ ತಮ್ಮಿಂದ ಬರೆಯಲಾಗಿದೆ [ಜೆಸ್ಮೀನ್ ಗ್ರೀನವೇ](https://twitter.com/paladique), [ಕ್ರಿಸ್ಟೋಫರ್ ಹ್ಯಾರಿಸನ್](https://twitter.com/geektrainer) ಮತ್ತು [ಕ್ರಿಸ್ ನೋರಿಂಗ್](https://twitter.com/chris_noring)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿಮ್ಮೆಚ್ಚರಿಕೆ**:
+ಈ ದಸ್ತಾವೇಜು [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಭಾಷಾಂತರ ಸೇವೆಯನ್ನು ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಮಗೆ ನಿಖರತೆಯನ್ನು ಸಾಧಿಸಲು ಪ್ರಯತ್ನವಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸಂಗತಿಗಳು ಇರುವ ಸಾಧ್ಯತೆ ಇದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಸ್ತಾವೇಜಿನ ಸ್ಥಳೀಯ ಭಾಷೆಯ ಪ್ರತಿಯನ್ನು ಪ್ರಾಧಿಕಾರ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದದ ಸೇವೆ ಪಡೆದುಕೊಳ್ಳುವುದು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ஏற்பட்ட ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆಗಳಿಗೆ ಅಥವಾ ಕಲಹಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/3-terrarium/1-intro-to-html/README.md

@@ -0,0 +1,206 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3fcfa99c4897e051b558b5eaf1e8cc74",
+  "translation_date": "2026-01-08T18:42:06+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "kn"
+}
+-->
+Translation for chunk 1 of 'README.md' skipped due to timeout.
+- **ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ** ಪ್ರತಿ ದೃಶ್ಯಾಂಶದ ಘಟಕಗಳನ್ನು (ಮೇಲ್ಭಾಗ, ಗೋಡೆಗಳು, ಮಣ್ಣು, ಕೆಳಭಾಗ)
+- **ಸಮರ್ಪಿಸುತ್ತದೆ** ಗಾಜಿನ ಪ್ರತಿಬಿಂಬ ಪ್ರಭಾವಗಳಿಗೆ ಫಲಿತಾಂಶಾಂಶಗಳನ್ನು (ತಿಪ್ಪಣಿಯಾದ ಘಟಕಗಳು)
+- **ಬಳಸುತ್ತದೆ** ವಿವರಣಾತ್ಮಕ ವರ್ಗದ ಹೆಸರುಗಳನ್ನು, ಪ್ರತಿ ಘಟಕದ ಉದ್ದೇಶ ಸ್ಪಷ್ಟವಾಗುವಂತೆ
+- **ಸಿದ್ಧಪಡಿಸುತ್ತದೆ** ಗಾಜಿನ ಟೆರೆರಿಯಂ ರೂಪವನ್ನು ಸೃಷ್ಟಿಸಲು CSS ಶೈಲಿಗಾಗಿ ರಚನೆಯನ್ನು
+
+> 🤔 **ಏನಾದರೂ ಗಮನಿಸಿದಿರಾ?**: ನೀವು ಈ ಮಾರ್ಕಪ್ ಸೇರಿಸಿದ್ದರೂ, ಪುಟದಲ್ಲಿ ಹೊಸದೇನೂ ಕಾಣುವುದಿಲ್ಲ! ಇದು ಸ್ಪಷ್ಟವಾಗಿ ತೋರುತ್ತದೆ ಹೇಗೆ HTML ರಚನೆ ಒದಗಿಸುತ್ತದೆ ಹಾಗೂ CSS ರೂಪವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ `<div>` ಘಟಕಗಳು ಅಸ್ತিত্বದಲ್ಲಿವೆ ಆದರೆ ಇನ್ನಷ್ಟು ದೃಶ್ಯ ಶೈಲಿಯಿಲ್ಲ – ಇದು ಮುಂದಿನ ಪಾಠದಲ್ಲಿ ಬರಲಿದೆ!
+
+```mermaid
+flowchart TD
+    A[HTML ಡಾಕ್ಯುಮೆಂಟ್] --> B[ಡಾಕ್ಯುಮೆಂಟ್ ಮುಖ್ಯ]
+    A --> C[ಡಾಕ್ಯುಮೆಂಟ್ ದೇಹ]
+    B --> D[ಶೀರ್ಷಿಕೆ ಅಂಶ]
+    B --> E[ಮೆಟಾ ಚರಸೆಟ್]
+    B --> F[ಮೆಟಾ ವೀಕ್ಷಣಾಂಗ]
+    C --> G[ಪ್ರಧಾನ ಶೀರ್ಷಿಕೆ]
+    C --> H[ಪುಟ కంటೈನರ್]
+    H --> I[ಎಡ కంటೈನರ್ 7 ಸಸ್ಯಗಳೊಂದಿಗೆ]
+    H --> J[ಬಲ కంటೈನರ್ 7 ಸಸ್ಯಗಳೊಂದಿಗೆ]
+    H --> K[ಟೆರಾರಿಯಂ ರಚನೆ]
+    
+    style A fill:#e1f5fe
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style H fill:#f3e5f5
+```
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**HTML ರಚನೆಯಲ್ಲಿ ಪರಿಣಿತಿ**: ಮುಂದೆಯುವ ಮೊದಲು, ನೀವು ಇವುಗಳನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ HTML ರಚನೆ ಮತ್ತು ದೃಶ್ಯ ರೂಪದ ವ್ಯತ್ಯಾಸವನ್ನು ವಿವರಿಸಲು
+- ✅ ಅರ್ಥಪೂರ್ಣ ಮತ್ತು ಅರ್ಥರಹಿತ HTML ಘಟಕಗಳನ್ನು ಗುರುತಿಸಲು
+- ✅ ಸರಿಯಾದ ಮಾರ್ಕಪ್ ಸೌಲಭ್ಯತೆಯನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತದೆ ಎಂದು ತಿಳಿಸಲು
+- ✅ ಸಂಪೂರ್ಣ ದಸ್ತಾವೇಜು ಸಸ್ಯ ರಚನೆಯನ್ನು ಗುರುತಿಸಲು
+
+**ನಿಮ್ಮ ಅರ್ಥವನ್ನು ಪರೀಕ್ಷಿಸಿ**: JavaScript ನಿಷ್ಕ್ರಿಯ ಮತ್ತು CSS ತೆಗೆದುಹಾಕಿದ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಿಮ್ಮ HTML ಫೈಲ್ ತೆರೆಯಲು ಪ್ರಯತ್ನಿಸಿ. ಇದು ನೀವು ನಿರ್ಮಿಸಿದ ಶುದ್ಧ ಅರ್ಥಪೂರ್ಣ ರಚನೆಯನ್ನು ತೋರಿಸುತ್ತದೆ!
+
+---
+
+## GitHub Copilot ಏಜೆಂಟು ಸವಾಲು
+
+ಈ ಕೆಳಗಿನ ಸವಾಲು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ಟೆರೆರಿಯಂ ಪ್ರಾಜೆಕ್ಟಿಗೆ ಸೇರಿಸಬಹುದಾದ ಸಸ್ಯ ಕಾಳಜಿ ಮಾರ್ಗದರ್ಶಿ ವಿಭಾಗಕ್ಕಾಗಿ ಅರ್ಥಪೂರ್ಣ HTML ರಚನೆ ಸೃಷ್ಟಿಸಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಮುಖ್ಯ ಶೀರ್ಷಿಕೆ "Plant Care Guide" ಹೊಂದಿರುವ, ಮೂರು ಉಪವಿಭಾಗಗಳು "Watering", "Light Requirements", ಮತ್ತು "Soil Care" ಎಂಬ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ, ಪ್ರತಿ ಉಪವಿಭಾಗದಲ್ಲಿ ಸಸ್ಯ ಕಾಳಜಿ ಮಾಹಿತಿಯ ಪ್ಯಾರಾಗ್ರಾಫ್ ಇರುವಂತೆ ನಿರ್ಮಿಸಿ. ಸರಿಯಾದ ಅರ್ಥಪೂರ್ಣ HTML ಟ್ಯಾಗ್‌ಗಳು `<section>`, `<h2>`, `<h3>`, ಮತ್ತು `<p>` ಬಳಸಿ ಸೂಕ್ತವಾಗಿ ರಚಿಸಿ.
+
+ಇಲ್ಲಿ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ.
+
+## HTML ಇತಿಹಾಸ ಸವಾಲು
+
+**ವೆಬ್ ಇತಿಹಾಸವನ್ನು ತಿಳಿಯಿರಿ**
+
+1990 ರಲ್ಲಿ ಟಿಮ್ ಬರ್ನರ್ಸ್-ಲೀ ಅವರು CERN ನಲ್ಲಿ ಮೊದಲ ವೆಬ್ ಬ್ರೌಸರ್ ಸೃಷ್ಟಿಸಿದಾಗಿನಿಂದ HTML ಪ್ರಗತಿಪಡುತ್ತಾ ಬಂದಿದೆ. `<marquee>` ತರಹದ ಕೆಲವು ಹಳೆಯ ಟ್ಯಾಗ್‌ಗಳನ್ನು ನವೀನ ಸೌಲಭ್ಯತೆ ಮಾನದಂಡಗಳು ಮತ್ತು ಪ್ರತ್ಯುತ್ತರ ವಿನ್ಯಾಸ ಶೈಲಿಗಳಿಂದ ಕಾರ್ಯನಿರ್ವಹಿಸದ ಕಾರಣ ಅವರು ಅನಾವರಣಗೊಳ್ಳಲಾಗಿದೆ.
+
+**ಈ ಪ್ರಯೋಗ ಪ್ರಯತ್ನಿಸಿ:**
+1. ನಿಮ್ಮ `<h1>` ಶೀರ್ಷಿಕೆಯನ್ನು ಕಿಥುಕೊಳ್ಳುವಂತೆ `<marquee>` ಟ್ಯಾಗ್ ಬಳಿಕಲಿರಿ: `<marquee><h1>My Terrarium</h1></marquee>`
+2. ನಿಮ್ಮ ಪುಟವನ್ನು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ತೆರೆಯಿರಿ ಹಾಗೂ ಸ್ಕ್ರೋಲಿಂಗ್ ಪ್ರಭಾವವನ್ನು ಗಮನಿಸಿ
+3. ಏಕೆ ಈ ಟ್ಯಾಗ್ ಅನಾವರಣಗೊಂಡಿತು ಎಂಬುದನ್ನು ಪರಿಗಣಿಸಿ (ಸೂಚನೆ: ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ಸೌಲಭ್ಯತೆ ಕುರಿತು ಯೋಚಿಸಿ)
+4. `<marquee>` ಟ್ಯಾಗ್ ತೆಗೆದುಹಾಕಿ ಮತ್ತು ಅರ್ಥಪೂರ್ಣ ಮಾರ್ಕಪ್‌ಗೆ ಮರಳಿರಿ
+
+**ಪ್ರತಿಬಿಂಬ ಪ್ರಶ್ನೆಗಳು:**
+- ಸ್ಕ್ರೋಲಿಂಗ್ ಶೀರ್ಷಿಕೆ ದೃಷ್ಟಿಬಾಧಿತ ಅಥವಾ ಚಲನೆ ಸಹಿಷ್ಣು ಬಳಕೆದಾರರಿಗೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ?
+- ಯಾವ ನವೀನ CSS ತಂತ್ರಗಳು ಅದೇ ರೀತಿಯ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ಹೆಚ್ಚು ಸೌಲಭ್ಯಪೂರ್ಣವಾಗಿ ಉಂಟುಮಾಡಬಹುದು?
+- ಅನಾವರಣಗೊಂಡ ಭಾಗಗಳನ್ನು ಬದಲು ಇಂದಿನ ವೆಬ್ ಮಾನದಂಡಗಳನ್ನು ಬಳಸುವುದು ಏಕೆ ಮುಖ್ಯ?
+
+ಇನ್ನು ಮುಂದೆ [ಹಳೆ ಮತ್ತು ಅನಾವರಣಗೊಂಡ HTML ಘಟಕಗಳು](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) ಕುರಿತಾಗಿ ತಿಳಿದುಕೊಳ್ಳಿ, ವೆಬ್ ಮಾನದಂಡಗಳು ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತವೆ ಎಂಬುದನ್ನು.
+
+## ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/16)
+
+## ಪರಿಶೀಲನೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+**ನಿಮ್ಮ HTML ಜ್ಞಾನವನ್ನು ಗಾಢಗೊಳಿಸಿ**
+
+HTML ವೆಬ್‌ಗಳ ಮೂಲಭೂತಗಳಾಗಿ 30 ವರ್ಷಕ್ಕೂ ಮೆರೆಯುತ್ತಿದ್ದೇವೆ, ಸರಳ ದಸ್ತಾವೇಜು ಮಾರ್ಕಪ್ ಭಾಷೆಯಿಂದ ಇಂಟರಾಕ್ಟಿವ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ನಿರ್ಮಾಣ ನೆಲೆಯವರೆಗೆ ಅಭಿವೃದ್ಧಿ ಕಂಡಿದೆ. ಈ ಪ್ರಗತಿಯನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು ನವೀನ್ ವೆಬ್ ಮಾನದಂಡಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಉತ್ತಮ ಅಭಿವೃದ್ಧಿ ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯಕ.
+
+**ಶಿಫಾರಸು ಮಾಡಿದ ಅಧ್ಯಯನ ಮಾರ್ಗಗಳು:**
+
+1. **HTML ಇತಿಹಾಸ ಮತ್ತು ಪ್ರಗತಿ**
+   - HTML 1.0 ರಿಂದ HTML5 ರವರೆಗೆ ಕಾಲರೇಖೆಯನ್ನು ಸಂಶೋಧಿಸಿ
+   - ಕೆಲವು ಟ್ಯಾಗ್‌ಗಳು ಅನಾವರಣಗೊಂಡ ಕಾರಣಗಳನ್ನು ವಿವರಿಸಿ (ಸೌಲಭ್ಯತೆ, ಮೊಬೈಲ್ ಸ್ನೇಹಿ, ನಿರ್ವಹಣೆ)
+   - ಹೊಸ HTML ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಪ್ರಸ್ತಾವನೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+
+2. **ಅರ್ಥಪೂರ್ಣ HTML ವಿಶ್ಲೇಷಣೆ**
+   - [HTML5 ಅರ್ಥಪೂರ್ಣ ಘಟಕಗಳ](https://developer.mozilla.org/docs/Web/HTML/Element) ಸಂಪೂರ್ಣ ಪಟ್ಟಿ ಅಧ್ಯಯನ ಮಾಡಿ
+   - `<article>`, `<section>`, `<aside>`, ಮತ್ತು `<main>` ಯಾವಾಗ ಬಳಸಬೇಕು ಎಂದು ಅಭ್ಯಾಸ ಮಾಡಿ
+   - ಜಾಸ್ತಿ ಸೌಲಭ್ಯತೆಯಿಗಾಗಿ ARIA ಲಕ್ಷಣಗಳ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳಿ
+
+3. **ನವೀನ್ ವೆಬ್ ಅಭಿವೃದ್ಧಿ**
+   - Microsoft Learn ನಲ್ಲಿ [ಪ್ರತ್ಯುತ್ತರ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) ಮೂಲಕ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+   - ಹೇಗೆ HTML CSS ಮತ್ತು JavaScript ಜೊತೆ ಸೇರಿಕೊಳ್ಳುತ್ತದೆ ತಿಳಿದುಕೊಳ್ಳಿ
+   - ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು SEO ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಕಲಿಯಿರಿ
+
+**ಪರಿಶೀಲನೆ ಪ್ರಶ್ನೆಗಳು:**
+- ನೀವು ಕಂಡುಹಿಡಿದ ಅನಾವರಣಗೊಂಡ HTML ಟ್ಯಾಗ್‌ಗಳು ಯಾವುವು, ಮತ್ತು ಅವು ಏಕೆ ತೆಗೆದುಹಾಕಲಾಯಿತು?
+- ಮುಂದಿನ ಆವೃತ್ತಿಗಳಿಗಾಗಿ ಯಾವ ಹೊಸ HTML ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪ್ರಸ್ತಾಪಿಸಲಾಗುತ್ತಿದೆ?
+- ಅರ್ಥಪೂರ್ಣ HTML ವೆಬ್ ಸೌಲಭ್ಯತೆ ಮತ್ತು SEO ಗೆ ಹೇಗೆ ಕೊಡುಗೆ ನೀಡುತ್ತದೆ?
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು**
+- [ ] DevTools (F12) ತೆರೆಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ಪ್ರಿಯ ವೆಬ್‌ಸೈಟ್‌ನ HTML ರಚನೆಯನ್ನು ಪರಿಶೀಲಿಸಿ
+- [ ] ಸರಳ HTML ಫೈಲ್ ನಿರ್ಮಿಸಿ with ನಾಮಾಂಕಿತ ಟ್ಯಾಗ್‌ಗಳು: `<h1>`, `<p>`, ಮತ್ತು `<img>`
+- [ ] W3C HTML Validator ಆನ್ಲೈನ್ ಬಳಸಿ ನಿಮ್ಮ HTML ಪರಿಶೀಲಿಸಿ
+- [ ] ನಿಮ್ಮ HTML ಗೆ `<!-- comment -->` ಮೂಲಕ ಕಾಮೆಂಟ್ ಸೇರಿಸಲು ಪ್ರಯತ್ನಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದುದು**
+- [ ] ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಅರ್ಥಪೂರ್ಣ HTML ಅಂಶಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+- [ ] ಸರಿಯಾದ HTML ರಚನೆಯೊಂದಿಗೆ ಸ್ವತಃ ಕುರಿತು ಸರಳ ಜಾಲತಾಣ ನಿರ್ಮಿಸಿ
+- [ ] ವಿಭಿನ್ನ ಶೀರ್ಷಿಕೆ ಮಟ್ಟಗಳು ಮತ್ತು ಪಠ್ಯ ವಿನ್ಯಾಸ ಟ್ಯಾಗ್‌ಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ
+- [ ] ಚಿತ್ರಗಳು ಮತ್ತು ಲಿಂಕ್‌ಗಳನ್ನು ಸೇರಿಸಿ ಬಹುರೂಪಿಶೈಲಿ שילובים ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] ನೀವು ಇನ್ನೂ ಪ್ರಯತ್ನಿಸದ HTML5 ವೈಶಿಷ್ಟ್ಯಗಳ ಸಂಶೋಧನೆ ಮಾಡಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರಭರ್ತಿ HTML ಪ್ರಯಾಣ**
+- [ ] ಅರ್ಥಪೂರ್ಣ ಮಾರ್ಕಪ್‌తో ಟೆರೆರಿಯಂ ಪ್ರಾಜೆಕ್ಟ್ ಕಾರ್ಯ ನಿಭಾಯಿಸಿ
+- [ ] ARIA ಲೇಬಲ್ ಮತ್ತು ಪಾತ್ರಗಳ ಬಳಕೆ ಮೂಲಕ ಸೌಲಭ್ಯಪೂರ್ಣ ವೆಬ್‌ಸೈಟ್ ಹಂಚಿಕೊಳ್ಳಿ
+- [ ] ವಿವಿಧ ಇನ್‌ಪುಟ್ ವಿಧಗಳೊಂದಿಗೆ ಫಾರಂ ರಚನಾ ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] localStorage ಅಥವಾ ಜಿಯೋಲೋಕೇಶನ್ ಹೀಗೆ HTML5 API ಗಳನ್ನು ಅರಿತುಕೊಳ್ಳಿ
+- [ ] ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ HTML ಮಾದರಿಗಳು ಮತ್ತು ಮೊಬೈಲ್-ಮೊದಲ ವಿನ್ಯಾಸ ಅಧ್ಯಯನ ಮಾಡಿ
+- [ ] ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿಗಾಗಿ ಇತರ ಡೆವಲಪರ್‌ಗಳ HTML ಕೋಡ್ ಪರಿಶೀಲಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳು ತುಂಬಾ ವೆಬ್ ಫಲಕ**
+- [ ] ನಿಮ್ಮ HTML ಪರಿಣಿತಿಯನ್ನು ತೋರುವ ಪೋರ್ಟ್‌ಫೋಲಿಯೊ ಜಾಲತಾಣ ನಿರ್ಮಿಸಿ
+- [ ] Handlebars Framework ಬಳಸಿ HTML ಟೆಂಪ್ಲೇಟಿಂಗ್ ಕಲಿತುಕೊಳ್ಳಿ
+- [ ] HTML ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಸುಧಾರಣೆಗೆ ಓಪನ್ ಸೋರ್ಸ್ ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ
+- [ ] ಕಸ್ಟಮ್ ಘಟಕಗಳಂತಹ ಉನ್ನತ HTML ಅಂಶಗಳಲ್ಲಿ ಪರಿಣತಿ ಸಾಧಿಸಿ
+- [ ] HTML, CSS ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು, JavaScript ಗ್ರಂಥಾಲಯಗಳೊಡನೆ ಸಮನ್ವಯ ಮಾಡಿ
+- [ ] HTML ಮೂಲಭೂತಗಳನ್ನು ಕಲಿಯುತ್ತಿರುವವರಿಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡಿ
+
+## 🎯 ನಿಮ್ಮ HTML ಪರಿಣತಿ ಸಮಯರೇಖೆ
+
+```mermaid
+timeline
+    title HTML ಕಲಿಕೆಯ ಪ್ರಗತಿ
+    
+    section ಮೂಲಧಾರ (5 ನಿಮಿಷಗಳು)
+        ಡಾಕ್ಯುಮೆಂಟ್ ರಚನೆ: ಡಾಕ್ಟೈಪ್ ಘೋಷಣೆ
+                         : HTML ಮೂಲ ಅಂಶ
+                         : ಹೆಡ್ ವಿರುದ್ಧ ಬಾಡಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+        
+    section ಮೆಟಾಡೇಟಾ (10 ನಿಮಿಷಗಳು)
+        ಅಗತ್ಯ ಮೇಟಾ ಟ್ಯಾಗ್ಗಳು: ಅಕ್ಷರ ಸಂಕೇತ
+                           : ವ್ಯೂಪೋರ್ಟ್ ಸಂಕಲನ
+                           : ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ
+        
+    section ವಿಷಯ ರಚನೆ (15 ನಿಮಿಷಗಳು)
+        ಚಿತ್ರ ಸಂಯೋಜನೆ: ಸರಿಯಾದ ಫೈಲ್ ಮಾರ್ಗಗಳು
+                         : ಪರ್ಯಾಯ ಪಠ್ಯದ ಮಹತ್ವ
+                         : ಸ್ವಯಂ-ಮುಚ್ಚುವ ಟ್ಯಾಗ್ಗಳು
+        
+    section ವಿನ್ಯಾಸ ಏಕೀಕರಣ (20 ನಿಮಿಷಗಳು)
+        ಕಾಂಟೈನರ್ ತಂತ್ರಶಾಸ್ತ್ರ: ರಚನೆಗಾಗಿ ಡಿವ್ ಅಂಶಗಳು
+                          : ವರ್ಗ ಮತ್ತು ID ನಾಮಕರಣ
+                          : ನಲ್ಲಿ ಅಂಶ ಹಿರಾರಕಿ
+        
+    section ಆರ್ಥಪೂರ್ಣ ನಿರ್ವಹಣೆ (30 ನಿಮಿಷಗಳು)
+        ಅರ್ಥಪೂರ್ಣ ಗುರುತು: ಶೀರ್ಷಿಕೆ ಹಿರಾರಕಿ
+                         : ಸ್ಕ್ರೀನ್ ರೀಡರ್ ನ್ಯಾವಿಗೇಶನ್
+                         : 접근성 ಉತ್ತಮತಾಂಶಗಳು
+        
+    section ಪ್ರಗತಿಶೀಲ ಕಲ್ಪನೆಗಳು (1 ಗಂಟೆ)
+        HTML5 ವೈಶಿಷ್ಟ್ಯಗಳು: ಆಧುನಿಕ ಆರ್ಥಪೂರ್ಣ ಅಂಶಗಳು
+                      : ARIA ಗುಣಲಕ್ಷಣಗಳು
+                      : ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಗಣನೆಗಳು
+        
+    section ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು (1 ವಾರ)
+        ಕೋಡ್ ಏಕೀಕರಣ: ಫೈಲ್ ರಚನೆ ಮಾದರಿಗಳು
+                         : ನಿರ್ವಹಿಸಬಹುದಾದ ಗುರುತುಗಾರಿಕೆ
+                         : ತಂಡ ಸಹಕಾರ
+        
+    section ದರ್ಜೆ ತಜ್ಞ (1 ತಿಂಗಳು)
+        ಆಧುನಿಕ ವೆಬ್ ನಿಲುವಳಿಗಳು: ಪ್ರಗತಿಶೀಲ ಸುಧಾರಣೆ
+                            : ಕ್ರಾಸ್ ಬ್‌ರೌಸರ್ ಹೊಂದಾಣಿಕೆ
+                            : HTML ವಿಶೇಷಣ ನವೀಕರಣಗಳು
+```
+### 🛠️ ನಿಮ್ಮ HTML ಉಪಕರಣಗಳ ಸಾರಾಂಶ
+
+ಈ ಪಾಠ ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ಈಗ ನಿಮ್ಮ ಬಳಿ:
+- **ದಸ್ತಾವೇಜು ರಚನೆ**: ಸರಿಯಾದ DOCTYPE ಹೊಂದಿದ ಪೂರ್ಣ HTML5 ಅಾಧಾರ
+- **ಅರ್ಥಪೂರ್ಣ ಮಾರ್ಕಪ್**: ಸೌಲಭ್ಯತೆ ಮತ್ತು SEO ನ್ನು ಸುಧಾರಿಸುವ ಅರ್ಥಪೂರ್ಣ ಟ್ಯಾಗ್‌ಗಳು
+- **ಚಿತ್ರ ಸಂಯೋಜನೆ**: ಸರಿಯಾದ ಫೈಲ್ ಸಂರಚನೆ ಮತ್ತು alt ಪಠ್ಯ ಅಭ್ಯಾಸಗಳು
+- **ನ್ಯಾಸ ಕಂಟೇನರ್‌ಗಳು**: ವಿವರಣಾತ್ಮಕ ವರ್ಗದ ಹೆಸರಿನೊಂದಿಗೆ ಡಿವ್‌ಗಳ ವ್ಯವಹಾರ
+- **ಸೌಲಭ್ಯತೆ ಅರಿವು**: ಸ್ಕ್ರೀನ್ ರೀಡರ್ ನೇವಿಗೇಶನ್ನ ಬಗ್ಗೆ ಅರ್ಥ
+- **ನವೀನ ಮಾನದಂಡಗಳು**: ಪ್ರಸ್ತುತ HTML5 ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಅನಾವರಣಗೊಂಡ ಟ್ಯಾಗ್ ಜ್ಞಾನ
+- **ಪ್ರಾಜೆಕ್ಟ್ ಆಧಾರ**: CSS ಶೈಲಿಗೆ ಹಾಗೂ JavaScript ಇಂಟರಾಕ್ಟಿವಿಟಿಗೆ ಬಲವಾದ ನೆಲ
+
+**ಮುಂದಿನ ಹಂತಗಳು**: ನಿಮ್ಮ HTML ರಚನೆ ಈಗ CSS ಶೈಲಿಗೆ ಸಿದ್ಧವಾಗಿದೆ! ನೀವು ನಿರ್ಮಿಸಿದ ಅರ್ಥಪೂರ್ಣ ನೆಲ ಮುಂದಿನ ಪಾಠವನ್ನು ತುಂಬಾ ಸುಲಭವಾಗಿಸಿ. 
+
+
+## ಅಸೈನ್ಮೆಂಟ್
+
+[ನಿಮ್ಮ HTML ಅಭ್ಯಾಸ: ಒಂದು ಬ್ಲಾಗ್ ಮಾದರಿ ನಿರ್ಮಿಸಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅಸ್ವೀಕರಣಾತ್ಮಕ ನಿರೂಪಣೆ**:  
+ಈ ಡೊಕ್ಯೂಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಅಗತ್ಯತೆಯಷ್ಟು ನಿಖರತೆಗೆ ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪು ವಿವರಗಳು ಇರಬಹುದಾಗಿದೆ ಎಂದು ತಿಳಿದುಕೊಳ್ಳಿ. ಮೂಲ ಡೊಕ್ಯೂಮೆಂಟ್ ಅದರ ಹುಟ್ಟಿಗ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕಾಗಿದೆ. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದನ್ನು ಸಹಾಯವಾಗಿ ಪಡೆಯುವಂತೆ ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆ ಅಥವಾ ತಪ್ಪಿದ್ರವ್ಯಗಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/3-terrarium/1-intro-to-html/assignment.md

@@ -0,0 +1,154 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "650e63282e1dfa032890fcf5c1c4119d",
+  "translation_date": "2026-01-08T18:52:06+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "kn"
+}
+-->
+# HTML ಅಭ್ಯಾಸ ಅಸ್ಸೈನ್‌ಮೆಂಟ್: ಬ್ಲಾಗ್ ಮಾದರಿ ರಚಿಸಲು
+
+## ಕಲಿಕಾ उद्दೇಶಗಳು
+
+ನಿಮ್ಮ HTML ಜ್ಞಾನವನ್ನು ಬಳಸಿ ಸಂಪೂರ್ಣ ಬ್ಲಾಗ್ ಹೋಂಪೇಜ್ ರಚನೆ ವಿನ್ಯಾಸ ಮತ್ತು ಕೋಡಿಗೆ ಅನ್ವಯಿಸಿ. ಈ ಹ್ಯಾಂಡ್‌ಆನ್ ಅಸೈನ್‌ಮೆಂಟ್ ಸಾಂದರ್ಭಿಕ HTML ಸಂಯೋಜನೆಗಳು, ಪ್ರವೇಶಯೋಗ್ಯತೆ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು, ಮತ್ತು ವೃತ್ತಿಪರ ಕೋಡ್ ಸಂಘಟನೆಯ ಕೌಶಲ್ಯಗಳನ್ನು ಶಕ್ತಿಮಡುವುದರಲ್ಲಿ ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇದನ್ನು ನೀವು ನಿಮ್ಮ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಪ್ರಯಾಣದಲ್ಲಿ ಬಳಸಿಕೊಳ್ಳುತ್ತೀರಿ.
+
+**ಈ ಅಸ್ಸೈನ್‌ಮೆಂಟ್ ಪೂರೈಸುವುದರಿಂದ ನೀವು:**
+- ಕೋಡಿಂಗ್ ಮುಂಚೆ ವೆಬ್‌ಸೈಟ್ ಲೇಔಟ್‌ಗಳನ್ನು ಯೋಜನೆ ಮಾಡುವುದು ಅಭ್ಯಾಸ ಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ
+- ಸಾಂದರ್ಭಿಕ HTML ಅಂಶಗಳನ್ನು ಸರಿಯಾದ ರೀತಿಯಲ್ಲಿ ಅನ್ವಯಿಸುತ್ತೀರಿ
+- ಪ್ರವೇಶಯೋಗ್ಯ, ಚೆನ್ನಾಗಿ ಸಂರಚಿತ ಮಾರ್ಕಪ್ ರಚಿಸುತ್ತೀರಿ
+- ಕಾಮೆಂಟುಗಳು ಮತ್ತು ಸಂಘಟನೆಯೊಂದಿಗೆ ವೃತ್ತಿಪರ ಕೋಡಿಂಗ್ ಚಟುವಟಿಕೆಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತೀರಿ
+
+## ಪ್ರಾಜೆಕ್ಟ್ ಅಗತ್ಯತೆಗಳು
+
+### ಭಾಗ 1: ವಿನ್ಯಾಸ ಯೋಜನೆ (ದೃಶ್ಯ ಮಾದರಿ)
+
+**ನಿಮ್ಮ ಬ್ಲಾಗ್ ಹೋಂಪೇಜಿನ ದೃಶ್ಯ ಮಾದರಿಯನ್ನು ರಚಿಸಿ, ಇದರಲ್ಲಿ ಇದೊಂದು ಸೇರಿರಬೇಕು:**
+- ವೆಬ್‌ಸೈಟ್ ಶೀರ್ಷಿಕೆ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್ ಇರುವ ಹೆಡರ್
+- ಕನಿಷ್ಠ 2-3 ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಪೂರ್ವವೀಕ್ಷಣೆಗಳೊಂದಿಗೆ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ
+- ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಗಾಗಿ ಸೈಡ್ಬಾರ್ (ಕುರಿತು ವಿಭಾಗ, ಇತ್ತೀಚಿನ ಪೋಸ್ಟ್‌ಗಳು, ವರ್ಗಗಳು)
+- ಸಂಪರ್ಕ ಮಾಹಿತಿ ಅಥವಾ ಲಿಂಕ್‌ಗಳೊಂದಿಗೆ ಫುಟರ್
+
+**ಮಾದರಿ ನಿರ್ಮಾಣ ಆಯ್ಕೆಗಳು:**
+- **ಹಸ್ತರಚಿತ ರೇಖಾಚಿತ್ರ**: ಕಾಗದ ಮತ್ತು ಪೆನ್ಸಿಲ್ ಬಳಸಿ, ನಂತರ ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಫೋಟೋಗೆಟಂದು ಅಥವಾ ಸ್ಕ್ಯಾನ್ ಮಾಡಿ
+- **ಡಿಜಿಟಲ್ ಉಪಕರಣಗಳು**: Figma, Adobe XD, Canva, PowerPoint, ಅಥವಾ ಯಾವುದೇ ಚಿತ್ರಣ ಅಪ್ಲಿಕೇಶನ್
+- **ವೈರ್‌ಫ್ರೇಮ್ ಉಪಕರಣಗಳು**: Balsamiq, MockFlow, ಅಥವಾ ಸಮಾನ ವೈರ್‌ಫ್ರೇಮಿಂಗ್ ಸಾಫ್ಟ್‌ವೇರ್
+
+**ನಿಮ್ಮ ಮಾದರಿ ವಿಭಾಗಗಳನ್ನು ಲೇಬಲ್ ಮಾಡಿ** ನೀವು ಉಪಯೋಗಿಸಲು ಯೋಜಿಸಿರುವ HTML ಅಂಶಗಳೊಂದಿಗೆ (ಉದಾ: "Header - `<header>`", "Blog Posts - `<article>`").
+
+### ಭಾಗ 2: HTML ಅಂಶಗಳ ಯೋಜನೆ
+
+**ನಿಮ್ಮ ಮಾದರಿಯ ಪ್ರತಿ ವಿಭಾಗವನ್ನು ನಿರ್ದಿಷ್ಟ HTML ಅಂಶಗಳಿಗೆ ನಕ್ಷೆಗೊಳಿಸುವ ಪಟ್ಟಿ ರಚಿಸಿ:**
+
+```
+Example:
+- Site Header → <header>
+- Main Navigation → <nav> with <ul> and <li>
+- Blog Post → <article> with <h2>, <p>, <time>
+- Sidebar → <aside> with <section> elements
+- Page Footer → <footer>
+```
+
+**ಅಗತ್ಯ ಅಂಶಗಳು ಸೇರಿಸಬೇಕಾಗಿದೆ:**
+ನಿಮ್ಮ HTML ಕನಿಷ್ಠ 10 ವಿಭಿನ್ನ ಸಾಂದರ್ಭಿಕ ಅಂಶಗಳನ್ನು ಈ ಸೂಚಿಯಲ್ಲಿ ಒಳಗೊಂಡಿರಬೇಕು:
+- `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
+- `<h1>`, `<h2>`, `<h3>`, `<p>`, `<ul>`, `<li>`, `<a>`
+- `<img>`, `<time>`, `<blockquote>`, `<strong>`, `<em>`
+
+### ಭಾಗ 3: HTML ಅನುಷ್ಠಾನ
+
+**ನಿಮ್ಮ ಬ್ಲಾಗ್ ಹೋಂಪೇಜ್ ಅನ್ನು ಈ ಮಾನದಂಡಗಳನ್ನು ಅನುಸರಿಸಿ ಕೋಡ್ ಮಾಡಿ:**
+
+1. **ದಸ್ತಾವೇಜು ರಚನೆ**: ಸರಿಯಾದ DOCTYPE, html, head, ಮತ್ತು body ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿರಲಿ
+2. **ಸಾಂದರ್ಭಿಕ ಮಾರ್ಕಪ್**: HTML ಅಂಶಗಳನ್ನು ಅವುಗಳ ಗುರಿಗಾಗಿ ಬಳಸಲಿ
+3. **ಪ್ರವೇಶಯೋಗ್ಯತೆ**: ಚಿತ್ರಗಳಿಗೆ ಸರಿಯಾದ alt ಪಠ್ಯ ಮತ್ತು ಅರ್ಥಪೂರ್ಣ ಲಿಂಕ್ ಪಠ್ಯ ಸೇರಿಸಿ
+4. **ಕೋಡ್ ಗುಣಮಟ್ಟ**: ಸಮರ್ಪಕ ಇಂಡೆಂಟ್ ಮತ್ತು ಅರ್ಥಪೂರ್ಣ ಕಾಮೆಂಟುಗಳ ಬಳಕೆ
+5. **ವಿಷಯ**: ನೈಜ ಬ್ಲಾಗ್ ವಿಷಯ ಸೇರಿಸಿ (ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವನ್ನು ಬಳಸಬಹುದು)
+
+**ಉದಾಹರಣೆ HTML ರಚನೆ:**
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Personal Blog</title>
+</head>
+<body>
+    <!-- Main site header -->
+    <header>
+        <h1>My Blog Title</h1>
+        <nav>
+            <!-- Navigation menu -->
+        </nav>
+    </header>
+    
+    <!-- Main content area -->
+    <main>
+        <!-- Blog posts go here -->
+    </main>
+    
+    <!-- Sidebar content -->
+    <aside>
+        <!-- Additional information -->
+    </aside>
+    
+    <!-- Site footer -->
+    <footer>
+        <!-- Footer content -->
+    </footer>
+</body>
+</html>
+```
+
+### ಭಾಗ 4: ಚಿಂತನೆ
+
+**ಸಂಕ್ಷಿಪ्त ಚಿಂತನೆ (3-5 ವಾಕ್ಯಗಳಲ್ಲಿ) ಬರೆಯಿರಿ:**
+- ಯಾವ HTML ಅಂಶಗಳನ್ನು ನೀವು ಅತ್ಯಂತ ನಂಬಿಕೆ ಹೊಂದಿದ್ದಿರಿ?
+- ಯೋಜನೆ ಅಥವಾ ಕೋಡಿಂಗ್ ಮಾಡುವಾಗ ನೀವು ಎದುರಿಸಿದ ಸವಾಲುಗಳು ಏನೆ?
+- ಸಾಂದರ್ಭಿಕ HTML ನಿಮ್ಮ ವಿಷಯವನ್ನು ಜಾಗೃತಿಗೊಳಿಸಲು ಹೇಗೆ ಸಹಾಯ ಮಾಡಿತು?
+- ನಿಮ್ಮ ಮುಂದಿನ HTML ಪ್ರಾಜೆಕ್ಟ್ನಲ್ಲಿ ನೀವು ಯಾವುದನ್ನು ವಿಭಿನ್ನವಾಗಿ ಮಾಡಬಯಸುತ್ತೀರಿ?
+
+## ಸಲ್ಲಿಕೆ ಪರಿಶೀಲನೆ ಪಟ್ಟಿ
+
+**ಸಲ್ಲಿಸುವ ಮುಂಚೆ ನೀವು ಪರಿಶೀಲಿಸಿಕೊಳ್ಳಿ:**
+- [ ] ಲೇಬಲ್ ಮಾಡಲಾದ HTML ಅಂಶಗಳೊಂದಿಗೆ ದೃಶ್ಯ ಮಾದರಿ
+- [ ] ಸರಿಯಾದ ದಸ್ತಾವೇಜು ರಚನೆಯೊಂದಿಗೆ ಪೂರ್ಣಗೊಳಿಸಿದ HTML ಫೈಲ್
+- [ ] ಕನಿಷ್ಠ 10 ವಿಭಿನ್ನ ಸಾಂದರ್ಭಿಕ HTML ಅಂಶಗಳನ್ನು ಯೋಗ್ಯವಾಗಿ ಬಳಕೆ ಮಾಡಿದಂತೆ
+- [ ] ನಿಮ್ಮ ಕೋಡ್ ರಚನೆಯನ್ನು ವಿವರಿಸುವ ಅರ್ಥಪೂರ್ಣ ಕಾಮೆಂಟುಗಳು
+- [ ] ಮಾನ್ಯ HTML ಸಿಂಟ್ಯಾಕ್ಸ್ (ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ)
+- [ ] ಪ್ರಾಂಪ್ಟ್ ಪ್ರಶ್ನೆಗಳಿಗೆ ಉತ್ತರಿಸುವ ಲಿಖಿತ ಚಿಂತನೆ
+
+## ಮೌಲ್ಯಮಾಪನ ನ್ಡಕಿ
+
+| ಮಾನದಂಡ | ಉದಾತ್ತ (4) | ಪರಿಣತ (3) | ಅಭಿವೃದ್ಧಿ (2) | ಆರಂಭಿಕ (1) |
+|----------|------------|-------------|--------------|-------------|
+| **ಯೋಜನೆ ಮತ್ತು ವಿನ್ಯಾಸ** | ವಿವರವಾದ, ಚೆನ್ನಾಗಿ ಲೇಬಲ್ ಮಾಡಲಾದ ಮಾದರಿ, ವಿನ್ಯಾಸ ಮತ್ತು HTML ಸಾಂದರ್ಭಿಕ ರಚನೆಯ ಸ್ಪಷ್ಟ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ | ಸ್ಪಷ್ಟ ಮಾದರಿ, ಹೆಚ್ಚಿನ ವಿಭಾಗಗಳು ಸರಿಯಾಗಿ ಲೇಬಲ್ ಮಾಡಲ್ಪಟ್ಟಿವೆ | ಮೂಲಭೂತ ಮಾದರಿ, ಕೆಲವು ಲೇಬಲಿಂಗ್, ಸಾಮಾನ್ಯ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ | ಅಗ್ಗದ ಅಥವಾ ಅಸ್ಪಷ್ಟ ಮಾದರಿ, ಸರಿಯಾದ ವಿಭಾಗ ಗುರುತಿಸುವಿಕೆ ಇಲ್ಲ |
+| **HTML ಸಾಂದರ್ಭಿಕ ಬಳಕೆ** | 10+ ಸಾಂದರ್ಭಿಕ ಅಂಶಗಳನ್ನು ಯೋಗ್ಯವಾಗಿ ಬಳಕೆ, HTML ರಚನೆ ಮತ್ತು ಪ್ರವೇಶಯೋಗ್ಯತೆ ಬಗ್ಗೆ ಆಳವಾದ ಅರ್ಥ | 8-9 ಸಾಂದರ್ಭಿಕ ಅಂಶಗಳನ್ನು ಸರಿಯಾಗಿ ಬಳಕೆ, ಸಾಂದರ್ಭಿಕ ಮಾರ್ಕಪ್ ಬಗ್ಗೆ ಉತ್ತಮ ಅರ್ಥ | 6-7 ಸಾಂದರ್ಭಿಕ ಅಂಶಗಳನ್ನು ಬಳಕೆ, ಕೆಲವು ಗೊಂದಲ | 6 ಕ್ಕಿಂತ ಕಡಿಮೆ ಅಂಶಗಳು ಅಥವಾ ಅಸಂಬದ್ಧ ಬಳಕೆ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ ಮತ್ತು ಸಂಘಟನೆ** | ಅತ್ಯಂತ ಒಳ್ಳೆಯ ಸಂಘಟಿತ, ಸರಿಯಾದ ಇಂಡೆಂಟೇಶನ್, ಸಮಗ್ರ ಕಾಮೆಂಟ್‌ಗಳು ಮತ್ತು ತೃಪ್ತಿಪಡಿಸುವ HTML ಸಿಂಟ್ಯಾಕ್ಸ್ | ಚೆನ್ನಾಗಿ ಸಂಘಟಿತ ಕೋಡ್, ಉತ್ತಮ ಇಂಡೆಂಟೇಶನ್, ಸಹಾಯಕರ ಕಾಮೆಂಟ್‌ಗಳು, ಮಾನ್ಯ ಸಿಂಟ್ಯಾಕ್ಸ್ | ಬಹುತೇಕ ಸಂಘಟಿತ ಕೋಡ್, ಕೆಲವು ಕಾಮೆಂಟ್‌ಗಳು, ಸಣ್ಣ ಸಿಂಟ್ಯಾಕ್ಸ್ ಸಮಸ್ಯೆಗಳು | ಕೆಟ್ಟ ಸಂಘಟನೆ, ಕನಿಷ್ಠ ಕಾಮೆಂಟ್‌, ಅನೇಕ ಸಿಂಟ್ಯಾಕ್ಸ್ ದೋಷಗಳು |
+| **ಪ್ರವೇಶಯೋಗ್ಯತೆ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು** | ಅತ್ಯುತ್ತಮ ಪ್ರವೇಶವ್ಯವಸ್ಥೆ, ಅರ್ಥಪೂರ್ಣ alt ಪಠ್ಯ, ಸರಿಯಾದ ಶೀರ್ಷಿಕೆ ಕ್ರಮ, ಎಲ್ಲಾ ನವೀನ HTML ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು | ಉತ್ತಮ ಪ್ರವೇಶ ಕಾರ್ಯಗಳು, ಸರಿಯಾದ ಶೀರ್ಷಿಕೆ ಮತ್ತು alt ಬಳಕೆ, ಹೆಚ್ಚಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು | ಕೆಲವು ಪ್ರವೇಶ ಕಾರ್ಯಗಳು, ಮೂಲ alt ಪಠ್ಯ ಮತ್ತು ಶೀರ್ಷಿಕೆ ಸಂರಚನೆ | ಕೆಲವು ಅಥವಾ ಕಡಿಮೆ ಪ್ರವೇಶ ಕಾರ್ಯಗಳು, ತಿರುಳು ಶೀರ್ಷಿಕೆ, ಉತ್ತಮ ಅಭ್ಯಾಸ ಇಲ್ಲ |
+| **ಚಿಂತನೆ ಮತ್ತು ಅಭ್ಯಾಸ** | ಆಳವಾದ ಅರ್ಥ ಮತ್ತು ಕಲಿಕೆಯ ಪ್ರಕ್ರಿಯೆಯ ವಿಚಾರಪೂರ್ಣ ವಿಶ್ಲೇಷಣೆ ಹೊಂದಿದ ಚಿಂತನೆ | ಮುಖ್ಯ ಅಂಶಗಳ ಅರ್ಥ ಮತ್ತು ಸ್ವಯಂ ತಿಳುವಳಿಕೆಯೊಂದಿಗೆ ಉತ್ತಮ ಚಿಂತನೆ | HTML ಅಂಶಗಳ ಬಗ್ಗೆ ಸೀಮಿತ ಅರ್ಥ ಹೊಂದಿದ ಸರಳ ಚಿಂತನೆ | ಕನಿಷ್ಠ ಅಥವಾ ಚಿಂತನೆಯಿಲ್ಲ, ಕಲಿತ ಅಂಶಗಳ ಜಾಗೃತಿಯಿಲ್ಲ |
+
+## ಕಲಿಕಾ ಸಂಪನ್ಮೂಲಗಳು
+
+**ಮುಖ್ಯ ಉಲ್ಲೇಖಗಳು:**
+- [MDN HTML ಅಂಶಗಳ ಉಲ್ಲೇಖ](https://developer.mozilla.org/docs/Web/HTML/Element) - ಎಲ್ಲಾ HTML ಅಂಶಗಳ ಸಂಪೂರ್ಣ ಮಾರ್ಗದರ್ಶಿ
+- [HTML5 ಸಾಂದರ್ಭಿಕ ಅಂಶಗಳು](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) - ಸಾಂದರ್ಭಿಕ ಮಾರ್ಕಪ್ ಬಗ್ಗೆ ಅರ್ಥ
+- [ವೆಬ್ ಪ್ರವೇಶಯೋಗ್ಯತಾ ಮಾರ್ಗದರ್ಶಿಗಳು](https://www.w3.org/WAI/WCAG21/quickref/) - ಪ್ರವೇಶಯೋಗ್ಯ ವೆಬ್ ವಿಷಯ ರಚನೆ
+- [HTML ಮಾನ್ಯತೆಪತ್ರಕ](https://validator.w3.org/) - ನಿಮ್ಮ HTML ಸಿಂಟ್ಯಾಕ್ಸ್ ಪರಿಶೀಲಿಸಿ
+
+**ಯಶಸ್ಸಿನ ಪ್ರೋ ಟಿಪ್ಸ್:**
+- ಯಾವುದೇ ಕೋಡ್ ಬರೆಯುವ ಮೊದಲು ನಿಮ್ಮ ಮಾದರಿಯಿಂದ ಪ್ರಾರಂಭಿಸಿ
+- ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಬಳಸಿ ನಿಮ್ಮ HTML ರಚನೆಯನ್ನು ಪರಿಶೀಲಿಸಿ
+- ವಿಭಿನ್ನ ಪರದೆ ಗಾತ್ರಗಳಲ್ಲಿ ನಿಮ್ಮ ಪುಟವನ್ನು ಪರೀಕ್ಷಿಸಿ (CSS ಇಲ್ಲದೇ ಸಹ)
+- ನಿಮ್ಮ HTML ಅನ್ನು ಹಿಂದುಮುಂದು ಓದಿ, ರಚನೆ ಲಾಜಿಕಲ್ ಆಗಿದೆಯಾ ಎಂದು ದೃಢೀಕರಿಸಿ
+- ಸ್ಕ್ರೀನ್ ರೀಡರ್ ನಿಮ್ಮ ಪುಟ ರಚನೆಯನ್ನು ಹೇಗೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಗಮನಿಸಿ
+
+> 💡 **ಗಮನಿಸಿ**: ಈ ಅಸ್ಸೈನ್‌ಮೆಂಟ್ HTML ರಚನೆ ಮತ್ತು ಸಾಂದರ್ಭಿಕತೆಗಳ ಮೇಲೆ ಒತ್ತು ನೀಡುತ್ತದೆ. ದೃಶ್ಯ ಶೈಲಿಯನ್ನು ಚಿಂತಿಸಬೇಡಿ – ಅದು CSS ಗಾಗಿ! ನಿಮ್ಮ ಪುಟ ಸರಳವಾಗಿ ಕಾಣಬಹುದು, ಆದರೆ ಚೆನ್ನಾಗಿ ರಚನೆಗೊಂಡ ಮತ್ತು ಅರ್ಥಪೂರ್ಣವಾಗಿರಬೇಕು.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಜ್ಯವಾಣಿ**:  
+ಈ ದಾಖಲೆ ಅನ್ನು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ತಪ್ಪುಗಳು அல்லது ಅಶುದ್ಧತೆಗಳಿರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆ ಪ್ರಾಮಾಣಿಕ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕಾಗಿದೆ. ಮಹತ್ವಪೂರ್ಣ ಮಾಹಿತಿ માટે ನಿಪುಣ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರವನ್ನು ಉಪಯೋಗಿಸುವುದರಿಂದ ಸಂಭವಿಸುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿಕೆ ಅಥವಾ ವ್ಯಾಖ್ಯಾನಗಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗಿರುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/3-terrarium/2-intro-to-css/README.md

@@ -0,0 +1,726 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e39f3a4e3bcccf94639e3af1248f8a4d",
+  "translation_date": "2026-01-08T19:24:40+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "kn"
+}
+-->
+# ಟೆರೇರಿಯಂ ಪ್ರಾಜೆಕ್ಟ್ ಭಾಗ 2: CSS ಪರಿಚಯ
+
+```mermaid
+journey
+    title ನಿಮ್ಮ CSS ಶೈಲಿಶಾಸ್ತ್ರದ ಪ್ರಯಾಣ
+    section ಆಧಾರ
+      Link CSS file: 3: Student
+      Understand cascade: 4: Student
+      Learn inheritance: 4: Student
+    section ಸೆಲೆಕ್ಟರ್‌ಗಳು
+      Element targeting: 4: Student
+      Class patterns: 5: Student
+      ID specificity: 5: Student
+    section ವಿನ್ಯಾಸ
+      Position elements: 4: Student
+      Create containers: 5: Student
+      Build terrarium: 5: Student
+    section ಪಾಲಿಷ್
+      Add visual effects: 5: Student
+      Responsive design: 5: Student
+      Glass reflections: 5: Student
+```
+![CSS ಗೆ ಪರಿಚಯ](../../../../translated_images/webdev101-css.3f7af5991bf53a20.kn.png)
+> [ಟೊಮೊми ಇಮುರಾ](https://twitter.com/girlie_mac) ರವರ ಸ್ಕೆಚ್ ನೋಟ
+
+ನಿಮ್ಮ HTML ಟೆರೇರಿಯಂ ಹೌದು ಎಂದಾದರೂ ತುಂಬಾ ಸರಳವಾಗಿ ಕಂಡಿತಾ? CSS ಆ ಸರಳ ರಚನೆಯನ್ನು ದೃಶ್ಯಾತ್ಮಕವಾಗಿ ಆಕರ್ಷಕವಾಗಿಸುವುದೇ ಆಗಿದೆ.
+
+HTML ಮನೆ ಕಟ್ಟುವ ಫ್ರೇಮ್ ಹಾಗೆವಾದರೆ, CSS ಮನೆ ಯನ್ನ ಸ್ವಾಗತ ಹೊಂದುತ್ತಿರುವಂತೆ ತೋರಿಸುವ ಎಲ್ಲಾ ಚيزುಗಳು - ಬಣ್ಣದ ಬಣ್ಣಗಳು, ಫರ್ನಿಚರ್ ವ್ಯವಸ್ಥೆ, ಬೆಳಕು, ಮತ್ತು ಕೊಠಡಿಗಳ ಸಂಚಲನ. ಪ್ಯಾಲೇಸ್ ಆಫ್ ವರ್ಸಾಯಿಸ್ ಒಂದು ಸರಳ ಬೇಟೆಯ ಹಳ್ಳಿ ಆಗಿರೋದು ಹೇಗೆ, ಆದರೆ ಅಲ್ಲಿ ಸುಂದರ ಅಲಂಕರಣ ಮತ್ತು ವಿನ್ಯಾಸದ ಮೂಲಕ ಜಗತ್ತಿನ ಅತ್ಯುತ್ತಮ ಕಟ್ಟಡಗಳಲ್ಲಿ ಒಂದಾಗಿ ಪರಿವರ್ತಿತವಾಯಿತು ಅಂತಕೂಟ್ಲೆ.
+
+ಇಂದು ನಾವು ನಿಮ್ಮ ಟೆರೇರಿಯಂ ಅನ್ನು ಕಾರ್ಯक्षमದಿಂದ ಹೊಳೆಯುವಂತೆ ಮಾಡೋಣ. ನೀವು ಎಲಿಮೆಂಟ್ ಗಳನ್ನು ಸಂಯೋಜಿಸುವಂತೆ ಕಲಿತೀರಿ, ವಿಭಿನ್ನ ಪರದೆ ಗಾತ್ರಗಳಿಗೆ ಸೈಟ್‌ಗಳನ್ನು ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಮಾಡೋಣ ಮತ್ತು ವೆಬ್‌ಸೈಟ್‌ಗಳ ಆಕರ್ಷಣೀಯತೆ ಮೂಡಿಸುವಂತೆ ದೃಶ್ಯವುಂಟುಮಾಡೋಣ.
+
+ಈ ಪಾಠದ ಅಂತ್ಯಕ್ಕೆ, ಸೂಕ್ತವಾಗಿ CSS ಶೈಲಿ ಹೇಗೆ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ನುಡಿಮುತ್ತಾಗಿ ಸುಧಾರಿಸಬಲ್ಲದು ನೋಡಿ. ನಿಮ್ಮ ಟೆರೇರಿಯಂಗೆ ಕೆಲವು ಶೈಲಿ ಸೇರಿಸಲಿದ್ದೇವೆ.
+
+```mermaid
+mindmap
+  root((CSS ಮೂಲತत्त्वಗಳು))
+    Cascade
+      Specificity Rules
+      ಹಕ್ಕುಪಂಚಿಕೆ
+      Priority Order
+      ಸಾಂಘರ್ಷ ಪರಿಹಾರ
+    Selectors
+      ಅಂಗಪಟ್ಟೆ ಟ್ಯಾಗ್‌ಗಳು
+      ವರ್ಗಗಳು (.class)
+      IDಗಳು (#id)
+      Combinators
+    Box Model
+      ಮಾರ್ಜಿನ್
+      ಬಾರ್ಡರ್
+      ಪ್ಯಾಡಿಂಗ್
+      ವಿಷಯ
+    Layout
+      ಸ್ಥಾನಗುಚ್ಛ
+      ಪ್ರದರ್ಶನ ಪ್ರಕಾರಗಳು
+      ಫ್ಲಕ್ಸ್ಬಾಕ್ಸ್
+      ಗ್ರೀಡ್
+    Visual Effects
+      ಬಣ್ಣಗಳು
+      ನೆರಳಗಳು
+      ಹಸ್ತಾಂತರಗಳು
+      ಚಲನೆಗಳು
+    Responsive Design
+      ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು
+      ಸುಲಭ ಘಟಕಗಳು
+      ವೀಕ್ಷಕ ಮेटಾ
+      ಮೊಬೈಲ್ ಮೊದಲ
+```
+## ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೆಪತ್ರಿಕೆ
+
+[ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೆಪತ್ರಿಕೆ](https://ff-quizzes.netlify.app/web/quiz/17)
+
+## CSS ಆರಂಭಿಸುವುದು
+
+CSS ನ್ನು ಜನರು ತುಂಬಾ "ಅತ್ಯಂತ ಸುಂದರವಾಗಿ ಮಾಡುವುದು" ಎಂದು ಭಾವಿಸುತ್ತಾರೆ ಆದರೆ ಇದರ ವ್ಯಾಪ್ತಿಯು ತುಂಬಾ ವಿಶಾಲವಾಗಿದೆ. CSS ಸಿನಿಮಾ ನಿರ್ದೇಶಕರಂತೆ - ನೀವು ಎಲ್ಲವನ್ನೂ ನೋಡಿಸುವುದಲ್ಲದೆ, ಅದು ಹೇಗೆ ಚಲಿಸುತ್ತದೆ, ಸಂವಹನಕ್ಕೆ ಹೇಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ, ಮತ್ತು ವಿಭಿನ್ನ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ಹೇಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಅವುಗಳನ್ನು ನಿಯಂತ್ರಿಸುತ್ತೀರಿ.
+
+ಅಧುನಾತನ CSS ಅತ್ಯಂತ ಸಾಮರ್ಥ್ಯವಂತದ್ದು. ನೀವು ಫೋನ್‌ಗಳು, ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳು ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್ ಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪರಿವರ್ತಿಸುವ ವಿನ್ಯಾಸಗಳನ್ನು ಬರೆಯಬಹುದು. ನೀವು ಸಲುಹೊಯ್ದ ಅನ್ಯಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು, ಇದು ಬಳಕೆದಾರರ ಗಮನವನ್ನು ಅಗತ್ಯವಿರುವ ಸ್ಥಳಕ್ಕೆ ಕರೆದೊಯ್ಯುತ್ತದೆ. ಎಲ್ಲವೂ ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಫಲಿತಾಂಶಗಳು ಅತ್ಯंत ಸೋಗಾದವು.
+
+> 💡 **ಪ್ರೋ ಟಿಪ್**: CSS ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಸಾಮರ್ಥ್ಯಗಳೊಂದಿಗೆ ಸತತವಾಗಿ ಅಭಿವೃದ್ಧಿಯಾಗುತ್ತಿದೆ. ಉತ್ಪಾದನಾ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಹೊಸ CSS ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸುವ ಮೊದಲು [CanIUse.com](https://caniuse.com) ನಲ್ಲಿ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ತಪಾಸಣೆ ಮಾಡಿರಿ.
+
+**ಈ ಪಾಠದಲ್ಲಿ ನಾವು ಸಾಧಿಸುವುದು:**
+- ಟೆರೇರಿಯಂಗೆ ಆಧುನಿಕ CSS ತಂತ್ರಗಳನ್ನು ಬಳಸಿ ಸಂಪೂರ್ಣ ವಿಸ್ತೃತ ವಿನ್ಯಾಸವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ
+- ಕಾರ್ಯಪದ್ಧತಿ, ಪರಂಪರೆ ಮತ್ತು CSS ಆಯ್ಕೆದಾರರಂತಹ ಮೂಲಭೂತ ತತ್ವಗಳನ್ನು ಅನ್ವೇಷಣೆ ಮಾಡುವುದು
+- ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಸ್ಥಾನಪರಿಚಯ ಮತ್ತು ವಿನ್ಯಾಸ ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸುವುದು
+- CSS ಆಕಾರಗಳು ಮತ್ತು ಶೈಲಿ ಬಳಸಿ ಟೆರೇರಿಯಂ ಒಳಚರಂಡಿಯನ್ನು ರಚಿಸುವುದು
+
+### ಪೂರ್ವಾಪೇಕ್ಷೆ
+
+ನೀವು ಹಿಂದಿನ ಪಾಠದಿಂದ ನಿಮ್ಮ ಟೆರೇರಿಯಂ‌ಗಾಗಿ HTML ರಚನೆಯನ್ನು ಪೂರ್ಣಮಾಡಿರಬೇಕು ಮತ್ತು ಅದನ್ನು ಶೈಲಿಗೊಳಿಸಲು ಸಿದ್ಧವಾಗಿರಬೇಕು.
+
+> 📺 **ವೀಡಿಯೋ ಸಂಪನ್ಮೂಲ**: ಸಹಾಯಕ ವೀಡಿಯೋ ವಾಕ್ತೃತ್ವವನ್ನು ವೀಕ್ಷಿಸಿ
+>
+> [![CSS ಬೇಸಿಕ್ಸ್ ಟ್ಯುಟೋರಿಯಲ್](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### ನಿಮ್ಮ CSS ಕಡತವನ್ನು ಸಜ್ಜುಗೊಳಿಸುವುದು
+
+ಶೈಲಿ ಸಲ್ಲಿಸುವುದನ್ನು ಆರಂಭಿಸುವ ಮೊದಲು, CSS ಅನ್ನು ನಮ್ಮ HTML ಗೆ ಸಂಪರ್ಕಿಸುವ ಅಗತ್ಯವಿದೆ. ಈ ಸಂಪರ್ಕ ಬ್ರೌಸರ್‌ಗೆ ಟೆರೇರಿಯಂ ಶೈಲಿ ಸೂಚನೆಗಳನ್ನು ಎಲ್ಲಿಂದ ಪಡೆಯಬೇಕೆಂಬುದನ್ನು ತಿಳಿಸುತ್ತದೆ.
+
+ನಿಮ್ಮ ಟೆರೇರಿಯಂ ಫೋಲ್ಡರ್ ನಲ್ಲಿ `style.css` ಎಂಬ ಹೊಸ ಫೈಲ್ ಸೃಷ್ಟಿಸಿ, ನಂತರ ಅದನ್ನು ನಿಮ್ಮ HTML ಕಡತದ `<head>` ವಿಭಾಗದಲ್ಲಿ ಲಿಂಕ್ ಮಾಡಿ:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+**ಈ ಕೋಡ್ ಮಾಡುವುದೇನು:**
+- ನಿಮ್ಮ HTML ಮತ್ತು CSS ಕಡತಗಳ ನಡುವಣ ಸಂಪರ್ಕವನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ
+- ಬ್ರೌಸರ್‌ಗೆ `style.css` ನಲ್ಲಿನ ಶೈಲಿಗಳನ್ನು ಲೋಡ್ ಮತ್ತು ಅನ್ವಯಿಸುವುದಾಗಿ ಹೇಳುತ್ತದೆ
+- `rel="stylesheet"` ಗುಣಲಕ್ಷಣ ಬಳಸಿ ಇದು CSS ಕಡತ ಎಂದು ಸೂಚಿಸುತ್ತದೆ
+- `href="./style.css"` ಮೂಲಕ ಕಡತದ ಮಾರ್ಗವನ್ನು ಸೂಚಿಸುತ್ತದೆ
+
+## CSS Cascading ಅರ್ಥ
+
+ನೀವು ಎಂದಾದರೂ ಯೋಚಿಸಿದ್ದೀರಾ, CSS ಗೆ "Cascading" style sheets ಎನ್ನುತ್ತಾರೆ ಎಂತಾರೆ? ಶೈಲಿಗಳು ಜಲಪ್ರವಾಹದಂತಾಗಿಯೇ ಕೆಳಗೆ ಹರಿಯುತ್ತವೆ ಮತ್ತು ಕೆಲವೊಮ್ಮೆ ಪರಸ್ಪರ ಘರ್ಷಣೆಗೊಳಗಾಗುತ್ತವೆ.
+
+ಸೆನೆಯ ಆಜ್ಞೆ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರಿಶೀಲಿಸಿ — генерал ಮಾನ್ಯಕೆ "ಎಲ್ಲಾ ಸೇನಾನಿಗಳು ಹಸಿ ಹಸಿರು ಬಣ್ಣದ ವಸ್ತ್ರ ಧರಿಸಲಿ" ಎಂದು ಹೇಳಿದರೆ, ಆದರೆ ನಿಮ್ಮ ಯೂನಿಟ್‌ಗೆ ದಾಖಲಿಸಿದ ನಿರ್ದಿಷ್ಟ ಆದೇಶ "ಸಮಾರಂಭಕ್ಕಾಗಿ ನೀಲಿ ವಸ್ತ್ರ ಹಾಕಿ" ಎಂದು ಇದ್ದರೆ, ಇನ್ನಷ್ಟು ನಿರ್ದಿಷ್ಟ ಆದೇಶ ಉತ್ತಮ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ. CSS ಕೂಡ ಇದೇ ತರ್ಕವನ್ನು ಅನುಸರಿಸುತ್ತದೆ ಮತ್ತು ಈ ಹೈಯರಾರ್ಕಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದರಿಂದ ಡಿಬಗ್ ಮಾಡಲು ತುಂಬಾ ಸುಲಭವಾಗುತ್ತದೆ.
+
+### Cascading ಆದ್ಯತೆಯನ್ನು ಪ್ರಯೋಗಿಸೋಣ
+
+ನಮ್ಮ cascading ಪರಿಣಾಮವನ್ನು ನೋಡಲು ಶೈಲಿ ಘರ್ಷಣೆಯನ್ನು ಸೃಷ್ಟಿಸೋಣ. ಮೊದಲು ನಿಮ್ಮ `<h1>` ಟ್ಯಾಗ್‌ಗೆ inline ಶೈಲಿಯನ್ನು ಸೇರಿಸಿ:
+
+```html
+<h1 style="color: red">My Terrarium</h1>
+```
+
+**ಈ ಕೋಡ್ ಮಾಡುವುದೇನು:**
+- inline ಶೈಲಿಯನ್ನು ಬಳಸಿ `<h1>` ಎಲಿಮೆಂಟ್‌ಗೆ ನೇರವಾಗಿ ಕೆಂಪು ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ
+- `style` ಗುಣಲಕ್ಷಣ ಬಳಸಿ HTML ನಲ್ಲಿ ನೇರವಾಗಿ CSS ನ್ನು ಒಳಗೊಳಿಸುತ್ತದೆ
+- ಈ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್‌ಗೆ ಅತ್ಯಂತ ಪ್ರಾಮುಖ್ಯತೆಯ ಶೈಲಿ ನಿಯಮವನ್ನು ರಚಿಸುತ್ತದೆ
+
+ಹೀಗೆಯೇ ಈ ನಿಯಮವನ್ನು ನಿಮ್ಮ `style.css` ಫೈಲಿಗೆ ಸೇರಿಸಿ:
+
+```css
+h1 {
+  color: blue;
+}
+```
+
+**ಮೇಲಿನ ನಿಯಮಗಳಲ್ಲಿ ನಾವು:**
+- ಎಲ್ಲಾ `<h1>` ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸುವ CSS ನಿಯಮವನ್ನು ಸೂಚಿಸಿದ್ದೇವೆ
+- ಬಾಹ್ಯ ಶೈಲಿ ಬಳಸಿ ಪಠ್ಯದ ಬಣ್ಣ ನಿಲುವಂಗಿ ನೀಲಿ ಮಾಡಿದೇವೆ
+- inline ಶೈಲಿಗಳಿಗಿಂತ ಕಡಿಮೆ ಪ್ರಾಮುಖ್ಯತೆಯ ನಿಯಮವನ್ನು ರಚಿಸಿದ್ದೇವೆ
+
+✅ **ಅಧ್ಯಯನ ಪರೀಕ್ಷೆ**: ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಯಾವ ಬಣ್ಣ ತೋರಿಸುತ್ತದೆ? ಆ ಬಣ್ಣಕ್ಕೆ ಏಕೆ ಪ್ರಾಮುಖ್ಯತೆಯಿದೆ? ನೀವು ಯಾವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಶೈಲಿಗಳನ್ನು ಮೀರಿಸುವುದೆಂದು ಯೋಚಿಸುತ್ತೀರಾ?
+
+```mermaid
+flowchart TD
+    A["ಬ್ರೌಸರ್ h1 ಅಂಶವನ್ನು ಕಂಡುಹಿಡಿದುಕೊಳ್ಳುತ್ತದೆ"] --> B{"ಇನ್ಲೈನ್ ಶೈಲಿಗೆ ಪರಿಶೀಲನೆ"}
+    B -->|Found| C["style='color: red'"] 
+    B -->|None| D{"ಐಡಿ ನಿಯಮಗಳಿಗೆ ಪರಿಶೀಲನೆ"}
+    C --> E["ಕೆಂಪು ಬಣ್ಣ ಅನ್ನು ಅನ್ವಯಿಸಿ (1000 ಅಂಕಗಳು)"]
+    D -->|Found| F["#heading { color: green }"]
+    D -->|None| G{"ವರ್ಗ ನಿಯಮಗಳಿಗೆ ಪರಿಶೀಲನೆ"}
+    F --> H["ಹಸಿರು ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸಿ (100 ಅಂಕಗಳು)"]
+    G -->|Found| I[".title { color: blue }"]
+    G -->|None| J{"ಅಂಶ ನಿಯಮಗಳಿಗೆ ಪರಿಶೀಲನೆ"}
+    I --> K["ನೀಲಿ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸಿ (10 ಅಂಕಗಳು)"]
+    J -->|Found| L["h1 { color: purple }"]
+    J -->|None| M["ಬ್ರೌಸರ್ ಡಿಫಾಲ್ಟ್ ಬಳಸಿರಿ"]
+    L --> N["ನೇರಳೆ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸಿ (1 ಅಂಕ)"]
+    
+    style C fill:#ff6b6b
+    style F fill:#51cf66
+    style I fill:#339af0
+    style L fill:#9775fa
+```
+> 💡 **CSS ಆದ್ಯತೆಯ ಕ್ರಮ (ಅತ್ಯಂತ ಅಧಿಕದಿಂದ ಕಡಿಮೆ):**
+> 1. **Inline ಶೈಲಿಗಳು** (style ಗುಣಲಕ್ಷಣ)
+> 2. **ಐಡಿಗಳು** (#myId)
+> 3. **ತರೆಗಳು** (.myClass) ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳು
+> 4. **ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆದಾರರು** (h1, div, p)
+> 5. **ಬ್ರೌಸರ್ ಮೌಲ್ಯದ ನಿಬಂಧನೆಗಳು**
+
+## CSS ಪರಂಪರೆ ಕಾರ್ಯಾಚರಣೆ
+
+CSS ಪರಂಪರೆ ಜಿನೆಟಿಕ್ಸ್ ಹಾಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ — ಎಲಿಮೆಂಟ್‌ಗಳು ತಮ್ಮ ಪೋಷಕ eleಮೆಂಟ್‌ಗಳಿಂದ ಕೆಲವು ಗುಣಗಳನ್ನು ಪರಂಪರೆಯಾಗಿ ಪಡೆಯುತ್ತವೆ. ನೀವು ಮಾನವನ `<body>` ಮೇಲೆ ಫಾಂಟ್‌ ಫ್ಯಾಮಿಲಿ ಸಿದ್ಧ ಮಾಡಿದರೆ ಎಲ್ಲಾ ಪಠ್ಯವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅದೇ ಫಾಂಟ್ ಬಳಸುತ್ತದೆ. ಇದು ಹ್ಯಾಬ್ಸ್‌ಬರ್ಗ್ ಕುಟುಂಬದ ವಿಶಿಷ್ಟ ಜವಳಿನ ಶೈಲಿಯನ್ನು ತಲಾ ಯೋಗ್ಯ ವ್ಯಕ್ತಿಗಳಲ್ಲಿ ಕಾಣಿಸುವಂತೆ.
+
+ಆದ್ರೆ ಎಲ್ಲವೂ ಪರಂಪರೆಯಾಗದು. ಪಠ್ಯದ ಶೈಲಿ (ಫಾಂಟ್‌ಗಳು ಮತ್ತು ಬಣ್ಣಗಳು) ಪರಂಪರೆಯಾಗುತ್ತವೆ, ಆದ್ರೆ ವಿನ್ಯಾಸ ಗುಣಲಕ್ಷಣಗಳು (ಮಾರ್ಜಿನ್ಗಳು ಮತ್ತು ಬಾರ್ಡರ್‌ಗಳು) ಪರಂಪರೆಯಾಗುವುದಿಲ್ಲ. ಮಕ್ಕಳಿಗೆ ಭೌತಿಕ ಲಕ್ಷಣಗಳ ಮೇಲೆ ಪರಂಪರೆ ಕಲಿತಂತೆ ಆದರೆ ತಮಗೆ ತಾಯ್ತಂದೆಗಳ ಫ್ಯಾಷನ್ ಆಯ್ಕೆಗಳು ಅಲ್ಲ.
+
+### ಫಾಂಟ್ ಪರಂಪರೆಯನ್ನು ಗಮನಿಸಿ
+
+ನಾವು `<body>` ಮೇಲೆ ಫಾಂಟ್ ಫ್ಯಾಮಿಲಿ ನಿಶ್ಚಯಿಸಿ ಪರಂಪರೆಯ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಪರೀಕ್ಷಿಸೋಣ:
+
+```css
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+```
+
+**ಈಈಗಾಗುವದನ್ನು ಪೋಷಣೆಯಾಗಿ ಓದಿ:**
+- ಸಂಪೂರ್ಣ ಪುಟಕ್ಕೆ ಫಾಂಟ್ ಫ್ಯಾಮಿಲಿ ನಿಸುವುದು `<body>` ಎಲಿಮೆಂಟ್ ಗುರಿಯಾಗಿಸಿ
+- ಉತ್ತಮ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಗೆ ಬದಲಾವಣೆ ವಾಗಿ ಫಾಂಟ್ ಸ್ಟ್ಯಾಕ್ ಬಳಸುವುದು
+- ವಿಭಿನ್ನ ಕಾರ್ಯನಿರ್ವಹಣೆ ವ್ಯವಸ್ಥೆಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಕಾಣುವ ಆಧುನಿಕ ಸಿಸ್ಟಮ್ ಫಾಂಟ್‌ಗಳು ಬಳಕೆ ಮಾಡುವುದು
+- ಸ್ಪಷ್ಟವಾಗಿ ಎಲ್ಲಾ ಮಕ್ಕಳ ಎಲಿಮೆಂಟ್‌ಗಳು ಪರಂಪರೆಯಿಂದ ಈ ಫಾಂಟ್ ಬಳಸುವಂತೆ ಮಾಡುವುದು, ಉಲ್ಲೇಖಿಸಿದರೆ ಮಾತ್ರ ಮೀರಿಸಲಾಗುತ್ತದೆ
+
+ನಿಮ್ಮ ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳು (F12) ತೆರೆಯಿರಿ, Elements ಟ್ಯಾಬ್‌ಗೆ ಹೋಗಿ, ಮತ್ತು ನಿಮ್ಮ `<h1>` ಎಲಿಮೆಂಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ. ಅದು ನೆಲೆಯ `<body>` ಮೂಲಕ ಫಾಂಟ್ ಫ್ಯಾಮಿಲಿ ಪರಂಪರೆಯನ್ನು ಪಡೆಯುತ್ತಿದೆ:
+
+![ಪರಂಪರೆಯಾಗುತ್ತಿರುವ ಫಾಂಟ್](../../../../translated_images/1.cc07a5cbe114ad1d.kn.png)
+
+✅ **ಪ್ರಯೋಗ ಸಮಯ**: `<body>` ಮೇಲೆ `color`, `line-height`, ಅಥವಾ `text-align` ಮುಂತಾದ ಇತರೆ ಪರಂಪರೆಯಾಗುವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿಶ್ಚಯಿಸಿ ನೋಡಿ. ನಿಮ್ಮ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಏನು ಆಗುತ್ತದೆ?
+
+> 📝 **ಪರಂಪರೆಯಾಗುವ ಗುಣಲಕ್ಷಣಗಳು ಒಳಗೊಂಡವು**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
+>
+> **ಪರಂಪರೆಯಾಗದ ಗುಣಲಕ್ಷಣಗಳು ಒಳಗೊಂಡವು**: `margin`, `padding`, `border`, `width`, `height`, `position`
+
+### 🔄 **ವಿದ್ಯಾಮೂಲಕ ಪರಿಶೀಲನೆ**
+**CSS ನ ಮೂಲಭೂತ ಅರ್ಥ:** ಆಯ್ಕೆದಾರರಗೆ ಹೋಗುವ ಮೊದಲು ಖಾತರಿಪಡಿಸಿಕೊಳ್ಳಿ ನೀವು:
+- ✅ cascading ಮತ್ತು ಪರಂಪರೆ ನಡುವಿನ ವ್ಯತ್ಯಾಸ ಬರೆದಿಟ್ಟು ಹೇಳಬಲ್ಲಿರಿ
+- ✅ ವಿಶೇಷತೆಯಿಂದ ಯಾವ ಶೈಲಿ ಗೆಲ್ಲುತ್ತದೆಯೋ ಅನುಮಾನೆ ಮಾಡಬಲ್ಲಿರಿ
+- ✅ ಯಾವ ಗುಣಲક્ષણಗಳು ಪೋಷಕ eleಮೆಂಟ್ ನಿಂದ ಪರಂಪರೆಯಾಗುತ್ತವೆಯೋ ಗುರುತಿಸಬಲ್ಲಿರಿ
+- ✅ CSS ಫೈಲ್ ಗಳು HTML ಗೆ ಸರಿಯಾಗಿ ಲಿಂಕ್ ಮಾಡಲಾಗಿದೆ ಎಂದು ಖಾತ್ರಿಪಡಿಸಿಕೊಳ್ಳಿ
+
+**ಸರಳ ಪರೀಕ್ಷೆ**: ಈ ಶೈಲಿಗಳು ಇದ್ದರೆ, `<div class="special">` ಒಳಗಿನ `<h1>`ಯ ಬಣ್ಣ ಯಾವುದು ಇರಬಹುದು?
+```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` (ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರ) ಯುನಿಟ್‌ಗಳನ್ನು ಬಳಸಿ ಪರದೆಯ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೊಂಡ ಉದ್ದವನ್ನು ನಿಶ್ಚಯಿಸುತ್ತದೆ
+- ಒಟ್ಟಾರೆ ಅಗಲದಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಸೇರಿಸುವುದಕ್ಕಾಗಿ `box-sizing: border-box` ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ
+- ಶುದ್ಧವಾಗಿ ಹೆಚ್ಚುವರಿ `px` ಯುನಿಟ್ ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ
+- ಕಣ್ಣಿಗೆ ಅಲಿಯೋ ಆಗುವಂತೆ ಸುಮ್ಮನಾದ ಹಿನ್ನೆಲೆಯ ಬಣ್ಣವನ್ನು ನಿಶ್ಚಯಿಸುತ್ತದೆ
+
+✅ **ಕೋಡ್ ಗುಣಮಟ್ಟದ ಸವಾಲು**: ಈ CSS DRY (ನಿಮ್ಮನ್ನು ಪುನರಾವರ್ತಿಸಬೇಡಿ) ಸಿದ್ಧಾಂತವನ್ನು ಉಲ್ಲಂಘಿಸುತ್ತದೆ. ನೀವು ಇದನ್ನು ID ಮತ್ತು ಕ್ಲಾಸ್ ಎರಡನ್ನೂ ಬಳಸಿ ಪುನರ್ ರಚಿಸಬಲ್ಲಿರಾ?
+
+**ಸುಧಾರಿತ ವಿಧಾನ:**
+```html
+<div id="left-container" class="container"></div>
+<div id="right-container" class="container"></div>
+```
+
+```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 ಗಿಂತ ಭಿನ್ನವಾಗಿ, ಕ್ಲಾಸ್‌ಗಳು ನಿಮ್ಮ HTML ನಲ್ಲಿ ಯಾವುದೇ ಸಂಖ್ಯೆಯಲ್ಲಿ ಪುನಃಬಳಸಬಹುದು, ಅದರಿಂದ ಶೈಲಿಗೊಳಿಸುವ ಸಾಮಾನ್ಯ ಮಾದರಿಗಳಿಗಾಗಿ ಅದ್ಭುತವಾಗಿದೆ.
+
+ನಮ್ಮ ಟೆರೇರಿಯಂನಲ್ಲಿ, ಪ್ರತಿ ಸಸ್ಯಕ್ಕೆ ಸಮಾನ ಶೈಲಿಯು ಬೇಕಾದರೂ ವೈಯಕ್ತಿಕ ಸ್ಥಾನಪರಿಚಯವೂ ಬೇಕಿದೆ. ನಾವು ಹಂಚಿಕೊಳ್ಳುವ ಶೈಲಿಗಾಗಿ ಕ್ಲಾಸ್ ಮತ್ತು ವೈಯಕ್ತಿಕ ಸ್ಥಾನಪರಿಚಯಕ್ಕಾಗಿ ID ನ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸು ತೀರ್ಮಾನ ಮಾಡುತ್ತೇವೆ.
+
+**ಪ್ರತಿ ಸಸ್ಯದ HTML ರಚನೆ:**
+```html
+<div class="plant-holder">
+  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f.kn.png" />
+</div>
+```
+
+**ಮುಖ್ಯ ಅಂಶಗಳ ವಿವರಣೆ:**
+- ಎಲ್ಲಾ ಸಸ್ಯಗಳಿಗಾಗಿ ಏಕಮಟ್ಟದ ಕಂಟೈನರ್ ಶೈಲಿಗೇರಿಸಲು `class="plant-holder"` ಬಳಕೆ
+- ಚಿತ್ರದ ಸಾಮಾನ್ಯ ಶೈಲಿ ಮತ್ತು ವರ್ತನೆಗೆ `class="plant"` ಅನ್ವಯಿಸುವುದು
+- ವೈಯಕ್ತಿಕ ಸ್ಥಾನಪರಿಚಯ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಂವಹನಕ್ಕಾಗಿ `id="plant1"` ಸೇರಿಸುವುದು
+- ತಂತ್ರಾಂಶ ಓದುಗರಿಗೆ ಸೂಕ್ತ ವಿವರಣಾತ್ಮಕ alt ಪಠ್ಯ ಒದಗಿಸುವುದು
+
+ಈ ಶೈಲಿಗಳನ್ನು ನಿಮ್ಮ `style.css` ಫೈಲ್ ಗೆ ಸೇರಿಸಿ:
+
+```css
+.plant-holder {
+  position: relative;
+  height: 13%;
+  left: -0.6rem;
+}
+
+.plant {
+  position: absolute;
+  max-width: 150%;
+  max-height: 150%;
+  z-index: 2;
+  transition: transform 0.3s ease;
+}
+
+.plant:hover {
+  transform: scale(1.05);
+}
+```
+
+**ಈ ಶೈಲಿಗಳ ವಿವರ:**
+- `plant-holder` ನಿಗದಿತ ಪ್ರತ್ಯೇಕ ಸ್ಥಾನದ ಕಂಟೆಕ್ಸ್ಟ್ ರಚಿಸುತ್ತದೆ
+- ಪ್ರತಿ ಸಸ್ಯದ ಹೋಲ್ಡರ್ ಗಾತ್ರವನ್ನು 13% ಎತ್ತರವನ್ನಿಟ್ಟುಕೊಂಡಿದೆ, ಇದರಿಂದ ಎಲ್ಲಾ ಸಸ್ಯಗಳು ಲಂಬವಾಗಿ ಸರಿಯಾಗಿ ಕಾಣುವಂತೆ
+- ಸಸ್ಯದ ಕಂಟೈನರ್‌ನೊಳಗಿನ ಕೇಂದ್ರ ಸಾರ್ವಜನಿಕವನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಸ್ವಲ್ಪ ಎಡಕ್ಕೆ ಸರಿಸಿದಿದೆ
+- ಹೆಚ್ಚು ಗರಿಷ್ಠ ಅಗಲ ಮತ್ತು ಗರಿಷ್ಠ ಎತ್ತರ ನಿಲುವಂಗಿ responsive ರೂಪಾಂತರ ಅನುಮತಿಸುತ್ತದೆ
+- ಟೆರೇರಿಯಂನ ಇತರ ಎಲಿಮೆಂಟ್ ಗಳಿಗಿಂತ ಮುಂದಿರಿಸಲು `z-index` ಬಳುಕೊಳ್ಳುವುದು
+- ಉತ್ತಮ ಬಳಕೆದಾರ ಸಂವಹನಕ್ಕೆ CSS ರವಾನೆಯೊಂದಿಗೆ ಸಣ್ಣ ಹವರ್ ಪರಿಣಾಮ ಸೇರಿಸಲಾಗಿದೆ
+
+✅ **ವಿಚಾರಣೀಯತೆ**: .plant-holder ಮತ್ತು .plant ಎರಡು ಆಯ್ಕೆದಾರರ ಅಗತ್ಯವೇನು? ನಾವು ಒಂದೇ ಒಂದು ಬಳಸದಿದ್ದರೆ ಏನಾಗಬಹುದು?
+
+> 💡 ** ವಿನ್ಯಾಸ ಮಾದರಿ**: ಕಂಟೈನರ್ (.plant-holder) ವಿನ್ಯಾಸ ಮತ್ತು ಸ್ಥಾನಪರಿಚಯವನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ, ಮತ್ತು ವಿಷಯ (.plant) ಕಾಣಿಕೆ ಮತ್ತು ಸ್ಕೇಲಿಂಗ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಈ ಬೇರ್ಪಡಿಸುವಿಕೆ ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಣೀಯ ಮತ್ತು ಗತಿಶೀಲವಾಗಿಸುವುದರಲ್ಲಿ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+## CSS ಸ್ಥಾನಪರಿಚಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+
+CSS ಸ್ಥಾನಪರಿಚಯ ನಾಟಕ ನಿರ್ದೇಶಕರಂತೆ ಆಗಿದ್ದು - ನೀವು ಎಲ್ಲ ಅಭಿನೇತರನ್ನಿರಿಸಲು ಮತ್ತು ವೇದಿಕೆ ಮೇಲೆ ಹೇಗೆ ಸರಿಯಲು ಸೂಚಿಸುತ್ತೀರಿ. ಕೆಲವು ನಟರು ಸಾಮಾನ್ಯ ವ್ಯವಸ್ಥೆಯನ್ನನುಸರಿಸುತ್ತಾರೆ, ಇತರರು ನಾಟಕೀಯ ಪರಿಣಾಮಕ್ಕಾಗಿ ವಿಶೇಷ ಸ್ಥಾನಪರಿಚಯ ಪಡೆಯುತ್ತವೆ.
+
+ಸ್ಥಾನಪರಿಚಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಾಗ, ಅನೇಕ ವಿನ್ಯಾಸ ಸವಾಲುಗಳು ಪರಿಹಾರವಾಗುತ್ತವೆ. ಬಳಕೆದಾರರು ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಾಗ ಮೇಲಿನ ಭಾಗದಲ್ಲಿ ನವಿಗೇಶನ್ ಬಾರ್ ಉಳಿಯಬೇಕಾದರೆ? ಅದಕ್ಕೆ ಸ್ಥಾನಪರಿಚಯ ಜವಾಬ್ದಾರಿಯಾಗುತ್ತದೆ. ಒಂದು ನಿರ್ದಿಷ್ಟ ಸ್ಥಳದಲ್ಲಿ ಸೂಚಿಗೊಂಬೆ ತೋರಿಸಲು ಬೇಕಾದರೆ? ಹಾಗೂ ಅಷ್ಟೆ.
+
+### ಐದು ಸ್ಥಾನಪರಿಚಯ ಮೌಲ್ಯಗಳು
+
+```mermaid
+quadrantChart
+    title CSS ಸ್ಥಾನ ನಿಯೋಜನೆ ರಣನೀತಿ
+    x-axis ಡಾಕ್ಯುಮೆಂಟ್ ಹರಿವು --> ಹರಿವಿನಿಂದ ತೆಗೆಯಲಾಗಿದೆ
+    y-axis ಸ್ಥಿರ ಸ್ಥಾನ --> ನಿಖರ ನಿಯಂತ್ರಣ
+    quadrant-1 ನಿಖರ
+    quadrant-2 ಫಿಕ್ಸ್ಡ್
+    quadrant-3 ಸ್ಥಿರ
+    quadrant-4 ಸ್ಟಿಕ್ಕಿ
+    
+    Static: [0.2, 0.2]
+    Relative: [0.3, 0.6]
+    Absolute: [0.8, 0.8]
+    Fixed: [0.9, 0.7]
+    Sticky: [0.5, 0.9]
+```
+| ಸ್ಥಾನಪರಿಚಯ ಮೌಲ್ಯ | ವರ್ತನೆ        | ಬಳಕೆ ಪ್ರಕರಣ        |
+|----------------|------------|-------------------|
+| `static`       | ಡಿಫಾಲ್ಟ್ ಪ್ರವಾಹ, top/left/right/bottom ಗಮನಿಸದು | ಸಾಮಾನ್ಯ ಡಾಕ್ಯುಮೆಂಟ್ ವಿನ್ಯಾಸ |
+| `relative`     | ಸ್ವাভাবಿಕ ಸ್ಥಾನಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಸ್ಥಾನಪರಿಚಯ | ಸಣ್ಣ ಸರವಣಿ, ಸಂಬಂಧಿತ ಪರಿಸ್ಥಿತಿ ಸೃಜನ |
+| `absolute`     | ಸಮೀಪದಲ್ಲಿನ ಸ್ಥಾನಪರಿಚಿತ ಅಜ್ಜನೋರಿಯೇಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದ | ನಿಖರಬದ್ಧ ಸ್ಥಾನಪರಿಚಯ, ಒತ್ತುಗೊಂಡಾಕೃತಿ |
+| `fixed`        | ವೀಕ್ಷಣಾ ಪ್ರದೇಶಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಸ್ಥಾನಪರಿಚಯ | ನವಿಗೇಶನ್ ಬಾರ್ ಗಳು, ಭಾಸಮಾನ ಎಲ್ಲುವೆಲ್ಲು |
+| `sticky`       | ಸ್ಕ್ರೋಲ್ ಆಧಾರಿತವಾಗಿ relative ಮತ್ತು fixed ನಡುವಿನ ಬದಲಾವಣೆ | ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಾಗ ಅಡ್ಡ ಸಾಲುಗಳು ಸ್ಥಿರ |
+
+### ನಮ್ಮ ಟೆರೇರಿಯಂನ ಸ್ಥಳಪರಿಚಯ
+
+ನಮ್ಮ ಟೆರೇರಿಯಂ ಒಂದು ಕೌಶಲ್ಯಮಯ ಸಂಯೋಜನೆ ಪ್ರಕರಣದಲ್ಲಿ ವಿವಿಧ ಸ್ಥಾನಪರಿಚಯಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಬಯಸಿದ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸುತ್ತದೆ:
+
+```css
+/* Container positioning */
+.container {
+  position: absolute; /* Removes from normal flow */
+  /* ... other styles ... */
+}
+
+/* Plant holder positioning */
+.plant-holder {
+  position: relative; /* Creates positioning context */
+  /* ... other styles ... */
+}
+
+/* Plant positioning */
+.plant {
+  position: absolute; /* Allows precise placement within holder */
+  /* ... other styles ... */
+}
+```
+
+**ಸ್ಥಾನಪರಿಚಯ ತಂತ್ರಜ್ಞಾನ ತೀರಸ್ಕರಣೆ:**
+- `absolute` ಕಂಟೈನರ್‌ಗಳು ಸಾಮಾನ್ಯ ಡಾಕ್ಯುಮೆಂಟ್ ಪ್ರವಾಹದಿಂದ ತೆಗೆದು ಪರದೆ ಅಂಚುಗಳಲ್ಲಿ ಅಂಟಿವೆ
+- ಸಂಬಂಧಿತ ಸಸ್ಯದ ಹೋಲ್ಡರ್‌ಗಳು ಸ್ಥಾನಪರಿಚಯದ ಸಂದರ್ಭವನ್ನು ನಿರ್ಮಿಸುತ್ತವೆ ಆದರೆ ತೆರಪಿನ ಪ್ರವಾಹದಲ್ಲಿ ಇರುತ್ತವೆ
+- ಸಂಬಂಧಿತ ಕಂಟೈನರ್ ಒಳಗೆ ಸಸ್ಯಗಳು ನಿಖರವಾಗಿ `absolute` ಸ್ಥಾನಪರಿಚಯ ಹೊಂದಿಕೊಳ್ಳಬಹುದು
+- ಈ ಸಂಯೋಜನೆ ಸಸ್ಯಗಳು ಲಂಬವಾಗಿ ಸವರಿಕೊಳ್ಳುವಂತೆ ಇರಿಸಲು ಹಾಗೂ ವೈಯಕ್ತಿಕವಾಗಿ ಹೇರಿಕೊಳ್ಳುವುದು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ
+
+> 🎯 **ದುರಂತರ ಮಾಹಿತಿ**: ಮುಂದಿನ ಪಾಠದಲ್ಲಿ ಸಸ್ಯಗಳು ಎಳೆಯುವ ಸಾಧ್ಯತೆಗಾಗಿ ಅವರಿಗೆ absolute ಸ್ಥಾನಪರಿಚಯ ಬೇಕಾಗುತ್ತದೆ. absolute ಸ್ಥಾನಪರಿಚಯವು ಅವುಗಳನ್ನು ಸಾಮಾನ್ಯ ವಿನ್ಯಾಸ ಪ್ರವಾಹದಿಂದ ತೆಗೆದುಹಾಕುತ್ತದೆ, ಡ್ರ್ಯಾಗ್-ಆಂಡ್-ಡ್ರಾಪ್ ಸಂವಹನವನ್ನು ಸಾಧ್ಯಮಾಡುತ್ತದೆ.
+
+✅ **ಪ್ರಯೋಗ ಸಮಯ**: ಸ್ಥಾನಪರಿಚಯ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಿಸಿ ಫಲಿತಾಂಶಗಳನ್ನು ಗಮನಿಸಿ:
+- `.container` ನ್ನು `absolute` ನಿಂದ `relative` ಗೆ ಬದಲಿಸಿದರೆ ಏನಾಗುತ್ತದೆ?
+- `.plant-holder` relative ಬದಲಾಗಿ absolute ಆಡುವಾಗ ಲೇಔಟ್ ಹೇಗೆ ಬದಲಾಗುತ್ತದೆ?
+- `.plant` ಅನ್ನು relative ಪಾಸಿಷನಿಂಗ್ ಗೆ ಬದಲಿಸಿದಾಗ ಏನಾಗುತ್ತದೆ?
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**CSS ಪಾಸಿಷನಿಂಗ್ ನ ಪರಿಣತಿ**: ನಿಮ್ಮ ಅರಿವನ್ನು ಪರಿಶೀಲಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಎಡವಣೆ-ಬಿಟ್ಟು ಸರಿಸಲು ಏಕೆ ಸಸ್ಯಗಳಿಗೆ absolute ಪಾಸಿಷನಿಂಗ್ ಬೇಕಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸಬಹುದು?
+- ✅ relative ಕಂಟೈನರ್‌ಗಳು ಪಾಸಿಷನಿಂಗ್ ಕಾನ್ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದೀರಾ?
+- ✅ ಪಕ್ಕದ ಕಂಟೈನರ್‌ಗಳು absolute ಪಾಸಿಷನಿಂಗ್ ಅನ್ನು ಏಕೆ ಬಳಸುತ್ತವೆ?
+- ✅ ನೀವು ಎಲ್ಲ ಪಾಸಿಷನ್ ಘೋಷಣೆಗಳನ್ನು ತೆಗೆದುಹಾಕಿದರೆ ಏನಾಗಬಹುದು?
+
+**ನೈಜ ಜಗತ್ತಿನ ಸಂಪರ್ಕ**: CSS ಪಾಸಿಷನಿಂಗ್ ನೈಜ ಜಗತ್ತಿನ ಲೇಔಟ್ ಅನ್ನು ಹೇಗೆ ಅನುಸರಿಸುತ್ತದೆ ಎಂದು ಯೋಚಿಸಿ:
+- **Static**: ಪುಸ್ತಕಗಳನ್ನು ತಲಾ ನೆಲದ ಮೇಲೆ (ಸ್ವಾಭಾವಿಕ ಕ್ರಮ)
+- **Relative**: ಪುಸ್ತಕವನ್ನು ಸ್ವಲ್ಪ moved ಆದರೆ ಅದರ ಸ್ಥಾನ ಉಳಿಸಿ
+- **Absolute**: ನಿಶ್ಚಿತ ಪುಟದ ಸಂಖ್ಯೆಯಲ್ಲಿ ಬುಕ್‌ಮಾರ್ಕ್ ಹಾಕುವುದು
+- **Fixed**: ನೀವು ಪುಟಗಳನ್ನು ತಿರುಗಿಸುವಾಗವೂ ಕಾಣುವ ಸ್ಕಿಕ್ಕಿ ಟಿಪ್ಪಣಿ
+
+## CSS ಜೊತೆಗೆ ಟೆರೇರಿಯಂ ನಿರ್ಮಾಣ
+
+ಈಗ ನಾವು ಕೇವಲ CSS ನೊಂದಿಗೆ ಗ್ಲಾಸ್ ಜಾರ್ ರಚಿಸುವುದಾದರಷ್ಟೆ — ಚಿತ್ರಗಳು ಅಥವಾ ಗ್ರಾಫಿಕ್ಸ್ ಸಾಫ್ಟ್‌ವೇರ್ ಅಗತ್ಯವಿಲ್ಲ.
+
+ಸ್ಥಿರವಾದ ಗ್ಲಾಸ್, ನೆರಳುಗಳು, ಮತ್ತು ಆಳದ ಪರಿಣಾಮಗಳನ್ನು ಪಾಸಿಷನಿಂಗ್ ಮತ್ತು ಟ್ರಾನ್ಸ್‌ಪೆರಂಸಿ ಬಳಸಿ ತೋರಿಸುವುದು CSS ನ ದೃಶ್ಯ ಶಕ್ತಿಗಳನ್ನು ಸಾಬೀತು ಮಾಡುತ್ತದೆ. ಈ ತಂತ್ರವೇ ಬಾಹೌಸ್ ಚಳುವಳಿಯ ವಾಸ್ತುಶಿಲ್ಪಿಗಳು ಸರಳ ಜ್ಯಾಮಿತೀಯ ಆಕಾರಗಳನ್ನು ಬಳಸಿ ಸೌಂದರ್ಯಪೂರ್ಣ, ಸಂಕೀರ್ಣ ರಚನೆಗಳನ್ನು ಸೃಷ್ಟಿಸಿದ್ದು ಹೇಗಿದೆ ಅಂದರೆ ಹೋಲಿಕೆಯಾಗಿದೆ. ಈ ಸಿದ್ಧಾಂತಗಳನ್ನು ತಿಳಿದ ಮೇಲೆ ನೀವು ಬಹು ವೆಬ್ ವಿನ್ಯಾಸಗಳ CSS ತಂತ್ರಗಳನ್ನು ಗುರುತಿಸಬಹುದು.
+
+```mermaid
+flowchart LR
+    A[ಜಾರ್ ಶೃಂಗ] --> E[ಪೂರ್ಣ ಟೆರಾರಿಯಮ್]
+    B[ಜಾರ್ ಗೋಡೆಗಳು] --> E
+    C[ಮಣ್ಣಿನ ಪದರ] --> E
+    D[ಜಾರ್ ಕೆಳಗೆ] --> E
+    F[ಗಾಜಿನ ಪರಿಣಾಮಗಳು] --> E
+    
+    A1["50% ಅಗಲ<br/>5% ಎತ್ತರ<br/>ಮೇಲೆ ಸ್ಥಾನ"] --> A
+    B1["60% ಅಗಲ<br/>80% ಎತ್ತರ<br/>ಮೋಜು ವಿಳಂಬಗಳು<br/>0.5 ಸ್ಥಳಮಾನ"] --> B
+    C1["60% ಅಗಲ<br/>5% ಎತ್ತರ<br/>ಕಪ್ಪು ಕಂದು<br/>ಕೆಳಗಿನ ಪದರ"] --> C
+    D1["50% ಅಗಲ<br/>1% ಎತ್ತರ<br/>ಕೆಳಗಿನ ಸ್ಥಿತಿ"] --> D
+    F1["ಸೂಕ್ಷ್ಮ ನೆರಳುಗಳು<br/>ಪಾರದರ್ಶಕತೆ<br/>Z-ಇಂಡೆಕ್ಸ್ ಪದರೀಕರಣ"] --> F
+    
+    style E fill:#d1e1df,stroke:#3a241d
+    style A fill:#e8f5e8
+    style B fill:#e8f5e8
+    style C fill:#8B4513
+    style D fill:#e8f5e8
+```
+### ಗ್ಲಾಸ್ ಜಾರ್ ಭಾಗಗಳನ್ನು ರಚಿಸಲಾಗುವುದು
+
+ನಾವು ಟೆರೇರಿಯಂ ಜಾರ್ ಅನ್ನು ಕಿತ್ತುಕೊಂಡು ಮುಂದೆ ಸಾಗೋಣ. ಪ್ರತಿ ಭಾಗವು absolute ಪಾಸಿಷನಿಂಗ್ ಮತ್ತು ಪ್ರತಿಶತ ಆಧಾರಿತ ಗಾತ್ರವನ್ನು ಬಳಸುತ್ತದೆ, ಇದರಿಂದ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ ಸಾದ್ಯ.
+
+```css
+.jar-walls {
+  height: 80%;
+  width: 60%;
+  background: #d1e1df;
+  border-radius: 1rem;
+  position: absolute;
+  bottom: 0.5%;
+  left: 20%;
+  opacity: 0.5;
+  z-index: 1;
+  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
+}
+
+.jar-top {
+  width: 50%;
+  height: 5%;
+  background: #d1e1df;
+  position: absolute;
+  bottom: 80.5%;
+  left: 25%;
+  opacity: 0.7;
+  z-index: 1;
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.jar-bottom {
+  width: 50%;
+  height: 1%;
+  background: #d1e1df;
+  position: absolute;
+  bottom: 0;
+  left: 25%;
+  opacity: 0.7;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.dirt {
+  width: 60%;
+  height: 5%;
+  background: #3a241d;
+  position: absolute;
+  border-radius: 0 0 1rem 1rem;
+  bottom: 1%;
+  left: 20%;
+  opacity: 0.7;
+  z-index: -1;
+}
+```
+
+**ಟೆರೇರಿಯಂ ನಿರ್ಮಾಣದ ಅರ್ಥ:**
+- **ಎಲ್ಲಾ ಪರದೆ ಗಾತ್ರಗಳಲ್ಲೂ ಪ್ರತಿಶತ ಆಧಾರಿತ ಗಾತ್ರವನ್ನು ಬಳಸುವ ಮೂಲಕ ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆ ಸಾಧಿಸುವುದು**
+- **ಘಟಕಗಳನ್ನು ನಿಖರವಾಗಿ ಸರಳವಾಗಿ ಸರಿಸಲು absolute ಪಾಸಿಷನಿಂಗ್ ಅನ್ವಯಿಸುವುದು**
+- **ಗಾಜಿನ ಟ್ರಾನ್ಸ್‌ಪೆರಂಸಿ ಪರಿಣಾಮಕ್ಕಾಗಿ ವಿಭಿನ್ನ ಧಾಟುಕಟ್ಟಿನ ಮೌಲ್ಯಗಳನ್ನು ಅನ್ವಯಿಸುವುದು**
+- **`z-index` ಲೆಯರಿಂಗ್ ಅನುಸರಿಸಿ ಸಸ್ಯಗಳು ಜಾರ್ ಒಳಗೆ ಕಾಣುವಂತೆ ಮಾಡುವುದು**
+- **ವಾಸ್ತವಿಕತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಸೂಕ್ಷ್ಮ ಬಾಕ್ಸ್ ಶಾಡೋ ಮತ್ತು ಸೂಕ್ಷ್ಮ ಬಾರ್ಡರ್-ರೇಡಿಯಸ್ ಸೇರಿಸಿ**
+
+### ಪ್ರತಿಶತಗಳೊಂದಿಗೆ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ
+
+ನೀವೀಗ ಗಮನಿಸುವುದೇನೆಂದರೆ ಎಲ್ಲ ಗಾತ್ರಗಳು ನಿಶ್ಚಿತ ಪಿಕ್ಸ್‌ಗಳಿಗಲ್ಲದೆ ಪ್ರತಿಶತರ ಮೂಲಕ ವ್ಯಾಖ್ಯಾನಗೊಂಡಿವೆ:
+
+**ಇದು ನಿಮಗೆ ಏಕೆ ಮುಖ್ಯ:**
+- **ಟೆರೇರಿಯಂ ಯಾವುದೇ ಪರದೆ ಗಾತ್ರದ ಮೇಲೆ ಅನುಪಾತದಲ್ಲಿ ವಿಸ್ತಾರವಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ**
+- **ಜಾರ್ ಭಾಗಗಳ ನಡುವೆ ದೃಶ್ಯ ಸಂಬಂಧವನ್ನು ಉಳಿಸುತ್ತದೆ**
+- **ಮೊಬೈಲ್ ಫೋನಿನಿಂದ ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್ ಮോണಿಟರ್ಗಳಿಗೂ ಸಾದೃಶ್ಯ ಅನುಭವ ಕೊಡುತ್ತದೆ**
+- **ದೃಶ್ಯ ಲೇಔಟ್ ಮುರಿಯದೇ ವಿನ್ಯಾಸವನ್ನು ಹೊಂದಿಕೊಳ್ಳಲು ಅನುವುಮಾಡುತ್ತದೆ**
+
+### CSS ಯೂನಿಟ್‌ಗಳ ಪ್ರಾಯೋಗಿಕ ಬಳಕೆ
+
+ನಾವು ಬಾರ್ಡರ್-ರೇಡಿಯಸ್ ಗೆ `rem` ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತೇವೆ, ಇದು ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಅನುನಯಿಸುತ್ತದೆ. ಇದರಿಂದ ಬಳಕೆದಾರರ ಫಾಂಟ್ ಆಪ್ಶನ್‌ಗಳನ್ನು ಗೌರವಿಸುವ ಸುಲಭ ವಿನ್ಯಾಸಗಳು ಸೃಷ್ಟಿಯಾಗುತ್ತವೆ. ಅಧಿಕ ವಿವರಗಳಿಗೆ ಅಧಿಕೃತ [CSS ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳ ವಿವರಣೆ](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ಓದು.
+
+✅ **ಚಿತ್ರಾತ್ಮಕ ಪ್ರಯೋಗ**: ಈ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಿಸಿ ಪರಿಣಾಮಗಳನ್ನು ಗಮನಿಸಿ:
+- ಜಾರ್ ಸ್ಪಷ್ಟತೆ 0.5 ರಿಂದ 0.8 ಗೆ ಬದಲಾಯಿಸಿದಾಗ ಗಾಜಿನ ನೋಟ ಹೇಗೆ ಬದಲಾಗುತ್ತದೆ?
+- ಮಣ್ಣಿನ ಬಣ್ಣವನ್ನು `#3a241d` ನಿಂದ `#8B4513` ಗೆ ಬದಲಾಯಿಸಿದಾಗ ದೃಶ್ಯ ಪರಿಣಾಮ ಏನಾಗುತ್ತದೆ?
+- ಮಣ್ಣಿನ `z-index` ಅನ್ನು 2 ಗೆ ಬದಲಾಯಿಸಿದರೆ ಲೇಯರಿಂಗ್‌ಗೆ ಏನಾಗುತ್ತದೆ?
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**CSS ದೃಶ್ಯ ವಿನ್ಯಾಸ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ**: ದೃಶ್ಯ CSS ಅರಿವು ತಪಾಸಣೆ:
+- ✅ ಪ್ರತಿಶತ ಆಧಾರಿತ ಗಾತ್ರಗಳು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸವನ್ನು ಹೇಗೆ ಸೃಷ್ಟಿಸುತ್ತವೆ?
+- ✅ ಸ್ಪಷ್ಟತೆ ಗಾಜಿನ ಟ್ರಾನ್ಸ್‌ಪೆರಂಸಿ ಪರಿಣಾಮವನ್ನು ಹೇಗೆ ತರುತ್ತದೆ?
+- ✅ ಲೆಯರಿಂಗ್‌ನಲ್ಲಿ z-index ಪಾತ್ರವೇನು?
+- ✅ ಬಾರ್ಡರ್-ರೇಡಿಯಸ್ ಮೌಲ್ಯಗಳು ಜಾರ್ ಆಕಾರವನ್ನು ಹೇಗೆ ರಚಿಸುತ್ತವೆ?
+
+**ವಿನ್ಯಾಸ ತತ್ವ**: ಸರಳಾಕೃತಿಗಳು ಬಳಸಿ ಸಂಕೀರ್ಣ ದೃಶ್ಯಗಳನ್ನು ಹೇಗೆ ರಚಿಸುತ್ತೆವೆ ನೋಡಿರಿ:
+1. **ಆಯತಾಕೃತಿಗಳು** → **ಮೂಗುಮುಖದ ಆಯತಾಕೃತಿಗಳು** → **ಜಾರ್ ಭಾಗಗಳು**
+2. **ಸಧಾರಣ ಬಣ್ಣಗಳು** → **ಪಾರದರ್ಶಕತೆ** → **ಗ್ಲಾಸ್ ಪರಿಣಾಮ**
+3. **ಒಂದು ಒಂದು ಘಟಕಗಳು** → **ಪಲೆಯಾದ ಸಂಯೋಜನೆಗಳು** → **3D ನೋಟ**
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ನೀವು ಕೆಳಗಿನ ಚಾಮೇಲ್ ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡನ್ನು ಬಳಸಿರಿ:
+
+**ವಿವರಣೆ:** ಟೆರೇರಿಯಂ ಸಸ್ಯಗಳನ್ನು ಸ್ವಲ್ಪ ಸ್ವಲ್ಪ ಎಡ-ಬಲದ ತಿರುವು ತೋರಿಸುವ animation ರಚಿಸಿ, ಇದು ಪ್ರಕೃತಿಸಮಾನ ಗಾಳಿ ಪರಿಣಾಮವನ್ನು ಇಟ್ಟುಕೊಳ್ಳುತ್ತದೆ. ಇದರಿಂದ CSS animation, transform ಮತ್ತು keyframe ಗಳ ಅಭ್ಯಾಸವಾಗುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಟೆರೇರಿಯಂದ ದೃಶ್ಯ ಆಕರ್ಷಣೆ ಹೆಚ್ಚುತ್ತದೆ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಟೆರೇರಿಯಂ ಸಸ್ಯಗಳು 2-3 ಡಿಗ್ರಿ ಎಡ ಬಲಕ್ಕೆ ಸ್ವಲ್ಪ ತಿರುಗುವ sway animation `.plant` ಕ್ಲಾಸ್ ಗೆ ಸೇರಿಸಿ. ಅವಧಿ 3-4 ಸೆಕೆಂಡುಗಳಿರಲಿ, ಅನಂತ ಲೂಪ್ ಆಗಲಿ ಮತ್ತು ನೈಸರ್ಗಿಕ ಚಲನವಲನಕ್ಕಾಗಿ easing ಫಂಕ್ಷನ್ ಇರಲಿ.
+
+ಇಲ್ಲಿ agent mode ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳಿ: [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
+
+## 🚀 ಚಾಲೆಂಜ್: ಗ್ಲಾಸ್ ಪ್ರತಿಬಿಂಬ ಸೇರ್ಪಡೆ
+
+ನಿಮ್ಮ ಟೆರೇರಿಯಂಗೆ ವಾಸ್ತವಿಕ ಗ್ಲಾಸ್ ಪ್ರತಿಬಿಂಬವನ್ನು ಸೇರಿಸಲು ಸಿದ್ಧರಾಗಿ? ಈ ತಂತ್ರವು ಆಳ ಮತ್ತು ಸತ್ಯತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
+
+ನೀವು ಗಾಜಿನ ಮೇಲಿನ ಬೆಳಕಿನ ಪ್ರತಿಬಿಂಬವನ್ನು ಸುಕ್ಷ್ಮವಾಗಿ ಆಗಿಸುವ ಬಿಳಿ ಅಥವಾ ಹಳದಿ ಬಣ್ಣದ ಅಂಡಾಕೃತಿಗಳನ್ನು ಸೃಷ್ಟಿಸುವಿರಿ. ಜಾರ್ ಎಡ ಬದಿಯಲ್ಲಿ ಸೂಕ್ತವಾಗಿ ಸ್ಥಾನನಿರ್ವಹಿಸಿ, ಸಮರ್ಪಕ ಸ್ಪಷ್ಟತೆ ಮತ್ತು ಬ್ಲರ್ ಪರಿಣಾಮಗಳನ್ನು ಬಳಸಬೇಕು. `border-radius` ಬಳಸಿ ಸೊಗಸಾದ ಬಬಲ್ ಚಿತ್ತರಗಳನ್ನು ಮಾಡಿ. ಗ್ರೇಡಿಯೆಂಟ್ ಅಥವಾ ಬಾಕ್ಸ್-ಶಾಡೋ ಪ್ರಾಯೋಗಗಳನ್ನು ಪ್ರಯೋಗಿಸಿ ಪ್ರತಿಬಿಂಬವನ್ನು ಅಲಂಕರಿಸಬಹುದು.
+
+## ಪಾಠದ ನಂತರದ ಸಹವಿದ್ಯಾರ್ಥಿ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪಾಠದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/18)
+
+## ನಿಮ್ಮ CSS ಮಾರ್ಗವನ್ನು ವಿಸ್ತರಿಸಿ
+
+CSS ಪ್ರಥಮವಾಗಿ ಸಂಕೀರ್ಣವಾಗಿ ತೋರುತ್ತದೆ, ಆದರೆ ಮೂಲ ತತ್ತ್ವಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದರಿಂದ ಆಧುನಿಕ ತಂತ್ರಗಳಿಗೆ ಪೂರಕವಾಗಿ ಬೆಳೆಸಬಹುದು.
+
+**ನಂತರದ CSS ಅಧ್ಯಯನ ವಿಭಾಗಗಳು:**
+- **Flexbox** - ಅಂಶಗಳ ಸರಳ ಹೊಂದಿಕೆ ಮತ್ತು ವಿತರಣೆ
+- **CSS Grid** - ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳ ರಚನೆಗಾಗಿ ಶಕ್ತಿಶಾಲಿ ಸಾಧನಗಳು
+- **CSS Variables** - ಪುನರಾವೃತ್ತಿ ಕಡಿಮೆ ಮಾಡಿ ನಿರ್ವಹಣೆ ಸುಲಭಪಡಿಸುವುದು
+- **Responsive design** - ವಿವಿಧ ಪರದೆ ಗಾತ್ರಗಳಲ್ಲಿ ಯೋಗ್ಯ ಕಾರ್ಯಾಚರಣೆ
+
+### ಇನ್ಟರ್‌಍ಕ್ಟಿವ್ ಕಲಿಕೆಯ ಸಂಪನ್ಮೂಲ
+
+ಈ ತತ್ವಗಳನ್ನು ಈ ಮನರಂಜನೆಯ ಆಟಗಳ ಮೂಲಕ ಅಭ್ಯಾಸಮಾಡಿ:
+- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - ಸಂತೋಷಕರ ಪ್ರಶ್ನೆಗಳ ಮೂಲಕ Flexbox ನ ಶಿಕ್ಷಣ
+- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - ವರ್ಚುವಲ್ ಕ್ಯಾರಟ್ ಬೆಳೆಯಿಸಿ CSS Grid ಕಲಿಕೆ
+- 🎯 [CSS Battle](https://cssbattle.dev/) - CSS ನ ಕಲಿಕೆಗೆ ಕೋಡಿಂಗ್ ಸವಾಲುಗಳು
+
+### ಹೆಚ್ಚುವರಿ ಕಲಿಕೆ
+
+ಸಂಪೂರ್ಣ CSS ಸಿದ್ಧಾಂತಗಳಿಗಾಗಿ ಈ Microsoft Learn ಮಾಯಾಜಾಲ ಪೂರ್ಣಗೊಳಿಸಿ: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು**
+- [ ] ಡೆವ್‌ಟೂಲ್ಸ್ ತೆರೆದು ಯಾವುದೇ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ CSS ಶೈಲಿಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+- [ ] ಸರಳ CSS ಫೈಲ್ ರಚಿಸಿ ಅದನ್ನು HTML ಪುಟಕ್ಕೆ ಲಿಂಕ್ ಮಾಡಿ
+- [ ] ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸುವುದು ಪ್ರಯತ್ನಿಸಿ: ಹೆಕ್ಸ್, RGB ಮತ್ತು ನೇಮಕದ ಬಣ್ಣಗಳು
+- [ ] ಬಾಕ್ಸ್ ಮಾದರಿಯಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಮಾರ್ಜಿನ್ ಅನ್ನು ಲಭ್ಯವಾಗಿಸಿ ಅಭ್ಯಾಸ ಮಾಡಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ಸಾಧಿಸಬಹುದಾದುದು**
+- [ ] ಪಾಠದ ಬಳಿಕದ ಪ್ರಶ್ನೋತ್ತರ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು CSS ಮೌಲ್ಯಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+- [ ] ಫಾಂಟ್, ಬಣ್ಣ ಮತ್ತು ಜಾಗದೊಂದಿಗೆ ನಿಮ್ಮ HTML ಪುಟವನ್ನು ಆವೃತ್ಸಿಕೊಳ್ಳಿ
+- [ ] ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಅಥವಾ ಗ್ರಿಡ್ ಬಳಸಿ ಸರಳ ಲೇಔಟ್ ಸೃಷ್ಟಿಸಿ
+- [ ] ಸ್ಮೂತ್ ಪರಿಣಾಮಕ್ಕಾಗಿ CSS ಟ್ರಾಂಸಿಶನ್ಗಳನ್ನು ಪ್ರಯೋಗಿಸಿ
+- [ ] ಮೀಡಿಯಾ ಕುಈರಿಸ್ ಮೂಲಕ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ ಅಭ್ಯಾಸ ಮಾಡಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರ ಭರಿತ CSS ಸಾಹಸ**
+- [ ] ಕ್ರಿಯೆಟಿವ್ ಫ್ಲೇರ್ ಜೊತೆ ಟೆರೇರಿಯಂ ಶೈಲಿಕರಣ ಕಾರ್ಯಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಫೋಟೋ ಗ್ಯಾಲರಿ ಲೇಔಟ್ ನಿರ್ಮಾಣಕ್ಕೆ CSS Grid ನ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣ ಹಿಡಿಯೋಣ
+- [ ] ಜೀವನದ ಸ್ಪಂದನಕ್ಕೆ CSS ಅನಿಮೆಷನ್‌ಗಳು ಕಲಿತುಕೊಳ್ಳಿ
+- [ ] Sass ಅಥವಾ Less ಪ್ರೀಪ್ರೊಸೆಸರ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸಿ
+- [ ] ವಿನ್ಯಾಸ ತತ್ವಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ ಮತ್ತು CSS ಗೆ ಅನ್ವಯಿಸಿ
+- [ ] ಆನ್ಲೈನ್‌ನಲ್ಲಿ ಕಂಡು ಹಿಡಿದ ಗೌರವಗಳ ವಿನ್ಯಾಸವನ್ನು ವಿಶ್ಲೇಷಿಸಿ ಪುನರೃತ್ಥಾನ ಮಾಡಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳುಗಳ ಕಾಲ ವಿನ್ಯಾಸ ನಿಪುಣತೆ**
+- [ ] ಸಂಪೂರ್ಣ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವೆಬ್‌ಸೈಟ್ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ ನಿರ್ಮಿಸಿ
+- [ ] CSS-in-JS ಅಥವಾ utility-first ಫ್ರೇಮ್ವರ್ಕ್ ಗಳನ್ನು ಕಲಿತುಬೇಡಿ (ಉದಾ: ಟೈಲ್‌ವಿಂಡ್)
+- [ ] CSS ಸುಧಾರಣೆಯೊಂದಿಗೆ open-source ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ
+- [ ] CSS ಕಸ್ಟಮೈಸ್ ಪ್ರಾಪರ್ಟೀಸ್ ಮತ್ತು containment ನಂತಹ ಉನ್ನತ වಾಕ್ಯಗಳನ್ನು ಕುಶಲ ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] ಪುನರುಪಯೋಗಿಸುವ ಘಟಕ ಗ್ರಂಥಾಲಯಗಳನ್ನು ಮೊಡ್ಯೂಲರ್ CSS ಮೂಲಕ ರಚಿಸಿ
+- [ ] CSS ಕಲಿತವರಿಗೆ ಮುಂಡುಗುಡ್ಡಿ ಮಾಡಿ ಮತ್ತು ವಿನ್ಯಾಸ ಜ್ಞಾನ ಹಂಚಿ
+
+## 🎯 ನಿಮ್ಮ CSS ನಿಪುಣತೆ ಸಮಯರೇಖೆ
+
+```mermaid
+timeline
+    title CSS ಅಧ್ಯಯನ ಪ್ರಗತಿ
+    
+    section ನೆಲೆ (10 ನಿಮಿಷ)
+        ಫೈಲ್ ಸಂಪರ್ಕ: CSS ಅನ್ನು HTML ಗೆ ಲಿಂಕ್ ಮಾಡಿ
+                       : ಕ್ಯಾಸ್ಕೆಡ್ ನಿಯಮಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+                       : উত্তরಾಧಿಕಾರ ಮೂಲಭೂತಗಳನ್ನು ಕಲಿಯಿರಿ
+        
+    section ಸೆಲೆಕ್ಟರ್ಸ್ (15 ನಿಮಿಷ)
+        ಗುರಿ ಘಟಕಗಳು: ಘಟಕ ಸೆಲೆಕ್ಟರ್ಸ್
+                          : ವರ್ಗ ಮಾದರಿಗಳು
+                          : ಐಡಿ ವಿಶೇಷತೆ
+                          : ಸಂಯೋಜಕರು
+        
+    section ಬಾಕ್ಸ್ ಮಾದರಿ (20 ನಿಮಿಷ)
+        ವಿನ್ಯಾಸ ಮೂಲಭೂತಗಳು: ಮಾರ್ಜಿನ್ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್
+                           : ಗಡಿಯ ಗುಣಲಕ್ಷಣಗಳು
+                           : ವಿಷಯ ಗಾತ್ರಮಾಪನ
+                           : ಬಾಕ್ಸ್-ಮೋದಲಿಂಗ್ ವರ್ತನೆ
+        
+    section ಸ್ಥಾನಮಾನ (25 ನಿಮಿಷ)
+        ಘಟಕ ನಿಯೋಜನೆ: ಸ್ಥಿರ ವಿರುದ್ಧ ಸಂಬಂಧಿತ
+                         : ಸಂಪೂರ್ಣ ಸ್ಥಾನಮಾನ
+                         : Z-ಅಭಿನಯ ಪದರಗಳು
+                         : ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ಘಟಕಗಳು
+        
+    section ದೃಷ್ಯ ವಿನ್ಯಾಸ (30 ನಿಮಿಷ)
+        ಶೈಲಿ ನೈಪುಣ್ಯ: ಬಣ್ಣಗಳು ಮತ್ತು ಪಾರದರ್ಶಕತೆ
+                       : ನೆರಳುಗಳು ಮತ್ತು ಪರಿಣಾಮಗಳು
+                       : ಪರಿವರ್ತನೆಗಳು
+                       : ಪರಿವರ್ತನಾ ಗುಣಲಕ್ಷಣಗಳು
+        
+    section ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸ (45 ನಿಮಿಷ)
+        ಬಹು ಸಾಧನ ಬೆಂಬಲ: ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳು
+                            : ಲವಚಿಕ ವಿನ್ಯಾಸಗಳು
+                            : ಮೊಬೈಲ್-ಮೊದಲ ದೃಷ್ಟಿಕೋನ
+                            : ವೀಕ್ಷಣಾ ವಿನ್ಯಾಸದ ಗರಿಷ್ಠಾಕರಣ
+        
+    section ಉನ್ನತ ತಂತ್ರಗಳು (1 ವಾರ)
+        ಆಧುನಿಕ CSS: ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ವಿನ್ಯಾಸಗಳು
+                  : CSS ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಗಳು
+                  : ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳು
+                  : ಅನಿಮೇಶನ್ ಕೀಫ್ರೇಮ್ಗಳು
+        
+    section ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು (1 ತಿಂಗಳು)
+        CSS ವಾಸ್ತುಶಿಲ್ಪ: ಘಟಕ ಮಾದರಿಗಳು
+                        : ನಿರ್ವಹಣಾರ್ಹ ಕೋಡ್
+                        : ಕಾರ್ಯಕ್ಷಮತೆ ಗರಿಷ್ಠಾಕರಣ
+                        : ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಿಕೆ
+```
+### 🛠️ ನಿಮ್ಮ CSS ಉಪಕರಣ ಪಟ್ಟಿ ಸಾರಾಂಶ
+
+ಈ ಪಾಠದ ನಂತರ ನೀವು ಪಡೆದಿರುವುದು:
+- **Cascade ಅರ್ಥಮಾಡಿಕೆ**: ಹೇಗೆ ಶೈಲಿಗಳು ಪರಸ್ಪರ ಪೋಷಣೆ ಮತ್ತು ಮೀರಿಸುವುದು
+- **ಸೆಲೆಕ್ಟರ್ ಪರಿಣತಿ**: ಅಂಶಗಳು, ಕ್ಲಾಸ್‌ಗಳು ಮತ್ತು ಐಡಿ ಗಳೊಂದಿಗೆ ಖಚಿತ ಗುರಿ ಸಾಧನೆ
+- **ಪಾಸಿಷನಿಂಗ್ ಕೌಶಲ್ಯ**: ಘಟಕಗಳ ತಕ್ಕ ಸ್ಥಳ ನಿರ್ಧಾರ ಮತ್ತು ಲೇಯರಿಂಗ್
+- **ದೃಶ್ಯ ವಿನ್ಯಾಸ**: ಗ್ಲಾಸ್ ಪರಿಣಾಮಗಳು, ನೆರಳು ಮತ್ತು ಪಾರದರ್ಶಕತೆ ರಚನೆ
+- **ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ತಂತ್ರಗಳು**: ಪ್ರತಿಶತ ಆಧಾರಿತ ಲೇಔಟ್‌ಗಳು ಎಲ್ಲ ಪರದೆಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವವು
+- **ಕೋಡ್ ಸಂಯೋಜನೆ**: ಸ್ವಚ್ಛ, ನಿರ್ವಹಣಾ ಸುಲಭ CSS ರಚನೆ
+- **ಆಧುನಿಕ ಅಭ್ಯಾಸಗಳು**: ಸಂಬಂಧಿತ ಯೂನಿಟ್ ಬಳಕೆ ಮತ್ತು ಪ್ರವೇಶಯೋಗ್ಯ ವಿನ್ಯಾಸ ಮಾದರಿಗಳು
+
+**ಮುಂದಿನ ಹಾದಿಗಳು:** ನಿಮ್ಮ ಟೆರೇರಿಯಂನಲ್ಲಿ ಈಗ ರಚನೆ (HTML) ಮತ್ತು ಶೈಲಿ (CSS) ಎರಡೂ ಇದೆ. ಕೊನೆಯ ಪಾಠದಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಪರಸ್ಪರ ಕ್ರಿಯೆ ಸೇರಿಸಲಾಗುವುದು!
+
+## ನಿಯೋಜನೆ
+
+[CSS ಪುನರ್‌ರಚನೆ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಬೋಧನೆ:**
+ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾಡನಾ ಸೇವೆಯನ್ನು ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯತ್ತ ಪ್ರಯತ್ನಿಸುವಾಗಲೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿದ್ದುಕೊಳ್ಳುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಾಖಲೆ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಗಳಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಗೊಂದಲಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳಿಗಾಗಿ ನಾವು ಜವಾಬ್ದಾರರಾಗುತ್ತಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/3-terrarium/2-intro-to-css/assignment.md

@@ -0,0 +1,136 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bee6762d4092a13fc7c338814963f980",
+  "translation_date": "2026-01-08T19:30:28+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "kn"
+}
+-->
+# CSS ಮರುವ್ಯವಸ್ಥೆ ಕಾರ್ಯನಿರ್ವಹಣಾ
+
+## ಉದ್ದೇಶ
+
+ನಿಮ್ಮ ಟೆರೆರಿಯಂ ಪ್ರೊಜೆಕ್ಟ್ ಅನ್ನು ಆಧುನಿಕ CSS ವಿನ್ಯಾಸ ತಂತ್ರಗಳನ್ನು ಬಳಸಲು ಪರಿವರ್ತನೆ ಮಾಡಿ! ಪ್ರಸ್ತುತ ಅಬ್ಸೊಲುಟ್ ಪೋಜಿಷನಿಂಗ್ ವಿಧಾನವನ್ನು ಮರು ರಚಿಸಿ **Flexbox** ಅಥವಾ **CSS Grid** ಅನ್ನು ಹೆಚ್ಚು ನಿರ್ವಹಣೀಯ, ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಜಾರಿಗೊಳಿಸಿ. ಈ ಕಾರ್ಯನಿರ್ವಹಣೆಯು ನಿಮ್ಮ ಟೆರೆರಿಯಂದ ದೃಶ್ಯ ಆಕರ್ಷಕತೆಯನ್ನು ಕಾಯ್ದುಕೊಂಡು ಆಧುನಿಕ CSS ಪ್ರಮಾಣಧಾರಣೆಗಳನ್ನು ಅನ್ವಯಿಸುವ ಸವಾಲಾಗಿದೆ.
+
+ವಿಭಿನ್ನ ವಿನ್ಯಾಸ ವಿಧಾನಗಳನ್ನು ಯಾವಾಗ ಮತ್ತು ಹೇಗೆ ಬಳಸಬೇಕು ಎಂಬುದನ್ನು ಅರಿಯುವುದು ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗಾಗಿ ಅತ್ಯಗತ್ಯ ನೈಪುಣ್ಯವಾಗಿದೆ. ಈ ವ್ಯಾಯಾಮವು ಸಾಂಪ್ರದಾಯಿಕ ಪೋಜಿಷನಿಂಗ್ ತಂತ್ರಗಳನ್ನೂ ಆಧುನಿಕ CSS ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಸೇರ್ಪಡೆಗೊಳಿಸುತ್ತದೆ.
+
+## ಕಾರ್ಯನಿರ್ವಹಣಾ ಸೂಚನೆಗಳು
+
+### ಹಂತ 1: ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ಯೋಜನೆ
+1. **ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಟೆರೆರಿಯಂ ಕೋಡ್ ಪರಿಶೀಲಿಸಿ** - ಯಾವ ಎಲೆಮೆಂಟ್‌ಗಳು ಈಗ ಅಬ್ಸೊಲುಟ್ ಪೋಜಿಷನಿಂಗ್ ಬಳಿಸುತ್ತಿವೆ ಎಂಬುದನ್ನು ಗುರುತಿಸಿ
+2. **ನಿಮ್ಮ ವಿನ್ಯಾಸ ವಿಧಾನ ಆಯ್ಕೆಮಾಡಿ** - Flexbox ಅಥವಾ CSS Grid ಯಾವುದು ನಿಮ್ಮ ವಿನ್ಯಾಸ ಉದ್ದೇಶಗಳಿಗೆ ಸೂಕ್ತವೆಂದು ನಿರ್ಧರಿಸಿ
+3. **ನಿಮ್ಮ ಹೊಸ ವಿನ್ಯಾಸ ರಚನೆಗೆ ಚಿತ್ರಣ ಮಾಡಿ** - ಕಾಂಟೇನರ್‌ಗಳು ಮತ್ತು ಸಸಿಗಳನ್ನು ಹೇಗೆ ವ್ಯವಸ್ಥಿತಗೊಳಿಸುವುದೆಂದು ಯೋಜನೆ ಮಾಡಿಕೊಳ್ಳಿ
+
+### ಹಂತ 2: ಜಾರಿಗೊಳಿಸುವಿಕೆ
+1. **ನಿಮ್ಮ ಟೆರೆರಿಯಂ ಪ್ರೊಜೆಕ್ಟ್‌ನ ಹೊಸ ಆವೃತ್ತಿಯನ್ನು** ಪ್ರತ್ಯೇಕ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ರಚಿಸಿ
+2. **ಆವಶ್ಯಕತೆಯ ಪ್ರಕಾರ HTML ರಚನೆ ನವೀಕರಿಸಿ** ನಿಮ್ಮ ಆಯ್ದ ವಿನ್ಯಾಸ ವಿಧಾನಕ್ಕೆ ಬೆಂಬಲ ನೀಡಲು
+3. **CSS ಅನ್ನು ಮರು ರೂಪಿಸಿ** ಅಬ್ಸೊಲ್ಯೂಟ್ ಪೋಜಿಷನಿಂಗ್ ಬದಲು Flexbox ಅಥವಾ CSS Grid ಬಳಸಿ
+4. **ದೃಶ್ಯ ಸಾಂಮ್ಯತೆ ಕಾಯ್ದುಕೊಳ್ಳಿ** - ನಿಮ್ಮ ಸಸಿಗಳು ಮತ್ತು ಟೆರೆರಿಯಂ ಜಾರ್ ಒಂದೇ ಸ್ಥಾನಗಳಲ್ಲಿ ಕಾಣಿಸಬೇಕು
+5. **ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವರ್ತನೆ ಜಾರಿಗೊಳಿಸಿ** - ವಿಭಿನ್ನ ಪರದೆ ಗಾತ್ರಗಳಿಗೆ ನಿಮ್ಮ ವಿನ್ಯಾಸ ಸುಗಮವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಬೇಕು
+
+### ಹಂತ 3: ಪರೀಕ್ಷೆ ಮತ್ತು ದಾಖಲೆ ಕಲಿಕೆ
+1. **ಕ್ರಮಬದ್ಧ ಬ್ರೌಸರ್ ಪರೀಕ್ಷೆ** - ನಿಮ್ಮ ವಿನ್ಯಾಸ ಕ್ರೋಮ್, ಫೈರ್ಫಾಕ್ಸ್, ಎಡ್‌ಜ್ ಮತ್ತು ಸಫಾರಿಯಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದಾನೇ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಿ
+2. **ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಪರೀಕ್ಷೆ** - ಮೊಬೈಲ್, ಟ್ಯಾಬ್ಲೆಟ್ ಮತ್ತು ಡೆಸ್ಕ್ಟಾಪ್ ಪರದೆ ಗಾತ್ರಗಳಲ್ಲಿ ನಿಮ್ಮ ವಿನ್ಯಾಸ ಪರಿಶೀಲಿಸಿ
+3. **ದಾಖಲೆಕೃತ್ಯ** - ನಿಮ್ಮ CSS‌ಗೆ ಪರಿಗಣನೀಯ ಟಿಪ್ಪಣಿಗಳನ್ನು ಸೇರಿಸಿ ನಿಮ್ಮ ವಿನ್ಯಾಸ ಆಯ್ಕೆಗಳನ್ನು ವಿವರಿಸಲು
+4. **ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು** - ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಪರದೆ ಗಾತ್ರಗಳಲ್ಲಿ ನಿಮ್ಮ ಟೆರೆರಿಯಂನ ಚಿತ್ರಗಳನ್ನು ಸೆರೆಹಿಡಿಯಿರಿ
+
+## ತಂತ್ರಜ್ಞಾನ ಅಗತ್ಯಗಳು
+
+### ವಿನ್ಯಾಸ ಜಾರಿಗೊಳಿಸುವಿಕೆ
+- **ಒಂದು ಆಯ್ಕೆಮಾಡಿ**: Flexbox ಅಥವಾ CSS Grid ಒಂದನ್ನಿಷ್ಟು ಉಪಯೋಗಿಸಿ (ಎರಡನ್ನೂ ಸೇರಿಸಬೇಡಿ)
+- **ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ**: ಫಿಕ್ಸ್ ಪಿಕ್ಸೆಲ್ಸ್ ಬದಲಾಗಿ ಸ ಆಪ್ತ ಘಟಕಗಳು (`rem`, `em`, `%`, `vw`, `vh`) ಬಳಸಿರಿ
+- **ಪ್ರವೇಶಾಯೋಗ್ಯತೆ**: ಸರಿಯಾದ ಸೆಮ್ಯಾಂಟಿಕ್ HTML ರಚನೆ ಮತ್ತು alt ಪಠ್ಯವನ್ನು ಉಳಿಸಿ
+- **ಕೋಡ್ ಗುಣಮಟ್ಟ**: ಸತತ ನಾಮಕರಣ ನಿಯಮಗಳನ್ನು ಉಪಯೋಗಿಸಿ ಮತ್ತು CSS ಅನ್ನು ಪ್ರಯುಕ್ತವಾಗಿ ಸಂಘಟಿಸಿ
+
+### ಆಧುನಿಕ CSS ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಿ
+```css
+/* Example Flexbox approach */
+.terrarium-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+
+.plant-containers {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1200px;
+}
+
+/* Example Grid approach */
+.terrarium-layout {
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+  grid-template-rows: auto 1fr;
+  min-height: 100vh;
+  gap: 1rem;
+}
+```
+
+### ಬ್ರೌಸರ್ ಬೆಂಬಲ ಅಗತ್ಯಗಳು
+- **ಕ್ರೋಮ್/ಎಡ್‌ಜ್**: ಇತ್ತೀಚಿನ 2 ಆವೃತ್ತಿಗಳು
+- **ಫೈರ್ಫಾಕ್ಸ್**: ಇತ್ತೀಚಿನ 2 ಆವೃತ್ತಿಗಳು  
+- **ಸಫಾರಿ**: ಇತ್ತೀಚಿನ 2 ಆವೃತ್ತಿಗಳು
+- **ಮೊಬೈಲ್ ಬ್ರೌಸರ್‌ಗಳು**: iOS Safari, Chrome Mobile
+
+## ಡೆಲಿವರೆಬಲ್ಸ್
+
+1. **ನವೀಕರಿಸಿದ HTML ಫೈಲ್** ಸುಧಾರಿತ ಸೆಮ್ಯಾಂಟಿಕ್ ರಚನೆಯೊಂದಿಗೆ
+2. **ಮರು ರೂಪಿಸಿದ CSS ಫೈಲ್** ಆಧುನಿಕ ವಿನ್ಯಾಸ ತಂತ್ರಗಳನ್ನು ಬಳಸಿಕೊಂಡು
+3. **ಸ್ಕ್ರೀನ್‌ಶಾಟ್ ಸಂಗ್ರಹ** ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ತೋರಿಸುವುದು:
+   - ಡೆಸ್ಕ್ಟಾಪ್ ದೃಶ್ಯ (1920x1080)
+   - ಟ್ಯಾಬ್ಲೆಟ್ ದೃಶ್ಯ (768x1024) 
+   - ಮೊಬೈಲ್ ದೃಶ್ಯ (375x667)
+   - ಕನಿಷ್ಠ 2 ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳು
+4. **README.md ಫೈಲ್** __ಲೇಖನ__:  
+   - ನಿಮ್ಮ ವಿನ್ಯಾಸ ಆಯ್ಕೆ (Flexbox ವಿರುದ್ಧ Grid) ಮತ್ತು ಕಾರಣಗಳು  
+   - ಮರು ರೂಪಿಸುವಿಕೆ ವೇಳೆ ಎದುರಿಸಿದ ಸವಾಲುಗಳು  
+   - ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಟಿಪ್ಪಣಿಗಳು  
+   - ನಿಮ್ಮ ಕೋಡ್ ಆಫ್‌ಲೈನ್ ಮಾಡಲು ಸೂಚನೆಗಳು  
+
+## ಮೌಲ್ಯಮಾಪನ ರೂಬ್ರಿಕ್
+
+| ಮಾನದಂಡಗಳು | ಉದಾತ್ತ (4) | ಪರಿಣತ (3) | ಅಭಿವೃದ್ಧಿ (2) | ಪ್ರಾರಂಭ (1) |
+|----------|---------------|----------------|---------------|---------------|
+| **ವಿನ್ಯಾಸ ಜಾರಿಗೊಳಿಸುವಿಕೆ** | Flexbox/Grid ನ ಪ್ರಗತಿಶೀಲ ವೈಶಿಷ್ಟ್ಯಗಳ ಬಳಕೆಯಲ್ಲಿನ ತಜ್ಞತೆ; ಸಂಪೂರ್ಣ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ | ಸರಿಯಾದ ಜಾರಿಗೊಳಿಸುವಿಕೆ ಮತ್ತು ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವರ್ತನೆ | ಆಧಾರಿಕ ಜಾರಿಗೊಳಿಸುವಿಕೆ ಮತ್ತು ಸ್ವಲ್ಪ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಸಮಸ್ಯೆಗಳು | ಅಸಂಪೂರ್ಣ ಅಥವಾ ತಪ್ಪು ವಿನ್ಯಾಸ ಜಾರಿಗೊಳಿಸುವಿಕೆ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಶುದ್ಧ, ಸ್ವತಃಸಂಘಟಿತ CSS, ಅರ್ಥಪೂರ್ಣ ಟಿಪ್ಪಣಿಗಳು ಮತ್ತು ಸತತ ನಾಮಕರಣ | ಉತ್ತಮ ಸಂಘಟನೆ, ಕೆಲವು ಟಿಪ್ಪಣಿಗಳು | ಸರಾಸರಿ ಸಂಘಟನೆ, ಕನಿಷ್ಟ ಟಿಪ್ಪಣಿಗಳು | ಪ್ರಾಮಾಣಿಕವಾಗದ ಸಂಘಟನೆ; ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟ |
+| **ಕ್ರಮಬದ್ಧ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ** | ಎಲ್ಲಾ ಅಗತ್ಯ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಪರಿಪೂರ್ಣ ಸಾಂಕೇತಿಕತೆ ಮತ್ತು ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು | ಉತ್ತಮ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಸ್ವಲ್ಪ ವ್ಯತ್ಯಾಸಗಳ ದಾಖಲಾತಿ | ಕೆಲವೊಂದು ಹೊಂದಾಣಿಕೆ ಸಮಸ್ಯೆಗಳು ಆದರೆ ಕಾರ್ಯಪಡೆಯುವವು | ಮುಖ್ಯ ಹೊಂದಾಣಿಕೆ ಸಮಸ್ಯೆಗಳು ಅಥವಾ ಪರೀಕ್ಷೆಯ ಕೊರತೆ |
+| **ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ** | ಅತ್ಯುತ್ತಮ ಮೊಬೈಲ್-ಪ್ರಥಮ ಮತ್ತು ಸುಗಮ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು | ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವರ್ತನೆ ಮತ್ತು ಸೂಕ್ತ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು | ಮೂಲಭೂತ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಕೆಲವು ವಿನ್ಯಾಸ ಸಮಸ್ಯೆಗಳು | ಮಿತಿಮೀರಿ ಅಥವಾ ಕೆಡಿದ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವರ್ತನೆ |
+| **ದಾಖಲೆಕೃತ್ಯ** | ಸಂಪೂರ್ಣ README ವಿವರವಾದ ವಿವರಗಳು ಮತ್ತು ಅರ್ಥಕತೆಗಳನ್ನು ಒಳಗೊಂಡಂತೆ | ಉತ್ತಮ ದಾಖಲೆ, ಎಲ್ಲಾ ಅಗತ್ಯ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಂತೆ | ಮೂಲಭೂತ ದಾಖಲೆ, ಕನಿಷ್ಟ ವಿವರಗಳು | ಅಪೂರ್ಣ ಅಥವಾ ಕೊರತೆ ದಾಖಲೆ |
+
+## ಉಪಕಾರಕಾರಿಯಾದ ಸಂಪನ್ಮೂಲಗಳು
+
+### ವಿನ್ಯಾಸ ವಿಧಾನ ಮಾರ್ಗದರ್ಶಿಗಳು
+- 📖 [ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್‌ಗೆ ಸಂಪೂರ್ಣ ಮಾರ್ಗದರ್ಶಿ](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- 📖 [CSS ಗ್ರಿಡ್‌ಗೆ ಸಂಪೂರ್ಣ ಮಾರ್ಗದರ್ಶಿ](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- 📖 [ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ವಿರುದ್ಧ ಗ್ರಿಡ್ - ಸರಿಯಾದ ಸಾಧನ ಆಯ್ಕೆಮಾಡಿ](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
+
+### ಬ್ರೌಸರ್ ಪರೀಕ್ಷಾ ಸಾಧನಗಳು
+- 🛠️ [ಬ್ರೌಸರ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಮೋಡ್](https://developer.chrome.com/docs/devtools/device-mode/)
+- 🛠️ [ನಾನು ಉಪಯೋಗಿಸಬಹುದೇ - ವೈಶಿಷ್ಟ್ಯ ಬೆಂಬಲ](https://caniuse.com/)
+- 🛠️ [ಬ್ರೌಸರ್ ಸ್ಟಾಕ್ - ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಪರೀಕ್ಷೆ](https://www.browserstack.com/)
+
+### ಕೋಡ್ ಗುಣಮಟ್ಟ ಸಾಧನಗಳು
+- ✅ [CSS ಮಾನ್ಯತಾಪ್ರದರ್ಶಕ](https://jigsaw.w3.org/css-validator/)
+- ✅ [HTML ಮಾನ್ಯತಾಪ್ರದರ್ಶಕ](https://validator.w3.org/)
+- ✅ [WebAIM ವಿರೋಧಾತ್ಮಕತೆ ಪರಿಶೀಲಕ](https://webaim.org/resources/contrastchecker/)
+
+## ಬೋನಸ್ ಸವಾಲುಗಳು
+
+🌟 **ಪ್ರಗತಿಶೀಲ ವಿನ್ಯಾಸಗಳು**: ನಿಮ್ಮ ವಿನ್ಯಾಸ ಬಾಗಿಲಿನಲ್ಲಿ ಎರಡನ್ನೂ, Flexbox ಮತ್ತು Grid, ಜಾರಿಗೊಳಿಸಿ  
+🌟 **ಆನಿಮೇಶನ್ ಏಕೀಕರಣ**: ನಿಮ್ಮ ಹೊಸ ವಿನ್ಯಾಸಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವ CSS ಪರಿವರ್ತನೆಗಳು ಅಥವಾ ಆನಿಮೇಶನ್ಗಳನ್ನು ಸೇರಿಸಿ  
+🌟 **ಡಾರ್ಕ್ ಮೋಡ್**: CSS ಕಸ್ಟಮ್ ಪ್ರೋಪರ್ಟೀಸ್ ಆಧಾರಿತ ಥೀಂ ಸ್ವಿಚರ್ ಜಾರಿಗೊಳಿಸಿ  
+🌟 **ಕಾಂಟೇನರ್ ಕ್ವೆರಿ**: ಘಟಕ ಮಟ್ಟದ ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆಗೆ ಆಧುನಿಕ ಕಾಂಟೇನರ್ ಕ್ವೆರಿ ತಂತ್ರಗಳನ್ನು ಬಳಸಿ  
+
+> 💡 **ಸ್ಮರಣೆ**: ಕಾರ್ಯವು ಕೆಲಸ ಮಾಡಿಸುವುದಲ್ಲದೆ, ನಿಮ್ಮ ಆಯ್ದ ವಿನ್ಯಾಸ ವಿಧಾನವು ಈ ವಿನ್ಯಾಸ ಸವಾಲಿಗೆ ಅತ್ಯುತ್ತಮ ಪರಿಹಾರವಾಗಿರುವುದರ ಅರ್ಥವನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು ಮುಖ್ಯ!
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಪ್ರತ್ಯಾಹಾರ**:  
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಾದಕ್ಕೆ ಪ್ರಯತ್ನಿಸುತ್ತೇವೆ ಆದರೆ ಸ್ವಚालित ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂಬುದು ಗಮನದಲ್ಲಿರಲಿ. ಮೂಲ ಡಾಕ್ಯುಮೆಂಟ್ ತನ್ನ ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ಪ್ರೊಫೆಷನಲ್ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸುವಾಗ ಉಂಟಾಗುವ ಒಂದಾದರೊಬ್ಬ ತಪ್ಪು ಅರ್ಥದಿಗಾಗಿ ನಾವು ಜವಾಬ್ದಾರಿಯಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/3-terrarium/3-intro-to-DOM-and-closures/README.md

@@ -0,0 +1,773 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "973e48ad87d67bf5bb819746c9f8e302",
+  "translation_date": "2026-01-08T19:01:20+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "kn"
+}
+-->
+# ಟೆರಾರಿಯನ್ ಪ್ರಾಜೆಕ್ಟ್ ಭಾಗ 3: DOM ನಿರ್ವಹಣೆ ಮತ್ತು JavaScript ಕ್ಲೋಶರ್‌ಗಳು
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಜಾವಾಸ್‌ಕ್ರಿಪ್ಟ್ DOM ಪಯಣ
+    section ಬೆಸುಗೆ
+      DOM ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 3: Student
+      ಕ್ಲೋಜರ್‌ಗಳು ಕಲಿಯಿರಿ: 4: Student
+      ಅಂಶಗಳನ್ನು ಸಂಪರ್ಕಿಸಿ: 4: Student
+    section ಸಂವಹನ
+      ಡ್ರ್ಯಾಗ್ ಘಟನೆಗಳನ್ನು ಸಜ್ಜುಗೊಳಿಸಿ: 4: Student
+      ಸಂಯೋಜಕಗಳನ್ನು ಹತ್ತಿರವಿಡಿ: 5: Student
+      ಚಲನೆ ನಿರ್ವಹಿಸಿ: 5: Student
+    section ಪೋಷಕತ್ವ
+      ಶುದ್ಧೀಕರಣವನ್ನು ಸೇರಿಸಿ: 4: Student
+      ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ: 5: Student
+      ಟೆರೇರಿಯಂ ಪೂರ್ಣಗೊಳಿಸಿ: 5: Student
+```
+![DOM ಮತ್ತು ಒಂದು ಕ್ಲೋಶರ್](../../../../translated_images/webdev101-js.10280393044d7eaa.kn.png)
+> ಸ್ಪಷ್ಟಚಿತ್ರಣ [ಟೊಮೊಮಿ ಇಮುರು](https://twitter.com/girlie_mac) ಅವರಿಂದ
+
+ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಅತ್ಯಂತ ಆಕರ್ಷಕ ಅಂಶಗಳಲ್ಲಿ ಒಂದಕ್ಕೆ ಸ್ವಾಗತ - ವಿಷಯಗಳನ್ನು ಸಂವಾದಾತ್ಮಕವಾಗಿ ಮಾಡುವುದಕ್ಕೆ! ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾದರಿ (DOM) ನಿಮ್ಮ HTML ಮತ್ತು JavaScript ನಡುವಿನ ಸೇತುವೆಯಾಗಿದ್ದು, ಇಂದು ನಾವು ಅದನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಟೆರಾರಿಯನ್‌ಗೆ ಜೀವ ತುಂಬಿಸುತ್ತೇವೆ. ಟಿಮ್ ಬರ್ಮರ್ಸ್-ಲೀ ಮೊದಲ ವೆಬ್ ಬ್ರೌಸರ್ ಅನ್ನು ರಚಿಸುವಾಗ, ಅವರು ಡೈನಾಮಿಕ್ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಡಾಕ್ಯುಮೆಂಟ್‌ಗಳುಳ್ಳ ಒಂದು ವೆಬ್‌ನ ಕನಸನ್ನು ಕಂಡಿದ್ದರು - DOM ಆ ಕನಸನ್ನು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ.
+
+ನಾವು JavaScript ಕ್ಲೋಶರ್‌ಗಳನ್ನೂ ಅನ್ವೇಷಿಸುವуем, ತಿಳಿದುಕೊಳ್ಳಲು ಭಾರಿ ಅನ್ನಿಸಬಹುದು ಆದರೆ ಉಪಯುಕ್ತತೆ ತುಂಬಿದೆ. ಕ್ಲೋಶರ್‌ಗಳನ್ನು "ಸ್ಮರಣೆ ತಾಣಗಳು" ಹೇಗೆ ಎಂದು ಪರಿಗಣಿಸಿ, ಇಲ್ಲಿ ನಿಮ್ಮ ಫಂಕ್ಷನ್‌ಗಳು ಪ್ರಮುಖ ಮಾಹಿತಿ ನೆನಪಿಟ್ಟುಕೊಳ್ಳಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಇದು ಪ್ರತಿ ಸಸ್ಯವು ತನ್ನ ಸ್ಥಾನವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿಕೊಳ್ಳುವ ತನ್ನದೇ ಆದ ಡೇಟా ದಾಖಲೆಯಂತೆ.
+
+ಈ ಪಾಠದ ಕೊನೆಯಲ್ಲಿ, ನೀವು ಅವುಗಳು ಎಷ್ಟು ಸ್ವಾಭಾವಿಕ ಮತ್ತು ಉಪಯುಕ್ತ ಪ್ರವೃತ್ತಿಗಳು ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳುತ್ತೀರಿ.
+
+ನಾವು ನಿರ್ಮಿಸುವುದು ಇಲ್ಲಿದೆ: ಬಳಕೆದಾರರು ಎಂದಾದರೂ ತಮ್ಮ ಇಚ್ಛೆಯಂತೆ ಸಸ್ಯಗಳನ್ನು ಕೀಳಿ ಬಿಡುವ (ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರೋಪ್) ಮಾಡಬಹುದಾದ ಟೆರಾರಿಯನ್. ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರೋಪ್ ಫೈಲ್ ಅಪ್ಲೋಡ್ಗಳು, ಸಂವಾದಾತ್ಮಕ ಆಟಗಳು ಎಲ್ಲವೂ ಇದರಿಂದ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ನಿಮ್ಮ ಟೆರಾರಿಯನ್‌ಗೆ ಜೀವ ತುಂಬಿಸೋಣ.
+
+```mermaid
+mindmap
+  root((DOM & JavaScript))
+    DOM Tree
+      ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆ
+      ಪ್ರಾಪಟಿ ಪ್ರವೇಶ
+      ಘಟನೆ ನಿರ್ವಹಣೆ
+      ಡೈನಾಮಿಕ್ ಅಪ್‌ಡೇಟ್ಸ್
+    Events
+      ಪೋಯಿಂಟರ್ ಘಟನೆಗಳು
+      ಮಾಉಸ್ ಘಟನೆಗಳು
+      ಟಚ್ ಘಟನೆಗಳು
+      ಘಟನಾಚರಣೆ ಶ್ರೋತೃಗಳು
+    Closures
+      ಖಾಸಗಿ ಚರಗಳು
+      ಫಂಕ್ಷನ್ ವ್ಯಾಪ್ತಿ
+      ಮೆಮರಿ ಸ್ಥಿತಿಗತಿಸ್ಥಿತಿ
+      ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+    Drag & Drop
+      ಸ್ಥಾನ ಟ್ರ್ಯಾಕಿಂಗ್
+      ಸಮನ್ವಯ ಗಣಿತ
+      ಘಟನೆ ಜೀವನಚರితం
+      ಬಳಕೆದಾರ ಬಾಂಧವ್ಯ
+    Modern Patterns
+      ಘಟನಾಚರಣೆ ನಿಯೋಜನೆ
+      ಕಾರ್ಯಕ್ಷಮತೆ
+      ಕ್ರಾಸ್-ಡಿವೈಸ್
+      ಪ್ರವೇಶನೀಯತೆ
+```
+## ಉಪನ್ಯಾಸ ಮುನ್ನ ಅಧ್ಯಯನ ಪ್ರಶ್ನೆಗಳ ಸಂಕಲನ
+
+[ಉಪನ್ಯಾಸ ಮುನ್ನ ಕುಯಿಜ್](https://ff-quizzes.netlify.app/web/quiz/19)
+
+## DOM ಬಗೆಗೆ ತಿಳಿದುಕೊಳ್ಳುವುದು: ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಪುಟಗಳಿಗೆ ನಿಮ್ಮ ಪ್ರವೇಶದ್ವಾರ
+
+ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾದರಿ (DOM) JavaScript ನಿಮ್ಮ HTML ಘಟಕಗಳೊಂದಿಗೆ ಸಂವಹನಗೊಳ್ಳುವ ಮಾರ್ಗವಾಗಿದೆ. ನಿಮ್ಮ ಬ್ರೌಸರ್ ಒಂದು HTML ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡಿದಾಗ, ಅದು ಪಾತ್ರಪತ್ರದಲ್ಲಿ ಆ ಪುಟದ ಸಂರಚಿತ ಪ್ರತಿನಿಧಾನವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ - ಅದೇ DOM. ಇದನ್ನು ಕುಟುಂಬ ವೃಕ್ಷದಂತೆ ಪರಿಗಣಿಸಿ, ಪ್ರತಿಯೊಂದು HTML ಘಟಕವು ಒಂದು ಕುಟುಂಬದ ಸದಸ್ಯ ಮತ್ತು JavaScript ಅದನ್ನು ಪ್ರವೇಶಿಸಬಹುದು, ಪರಿಷ್ಕರಿಸಬಹುದು ಅಥವಾ ಪುನರ್ಮಾರ್ಪಣೆ ಮಾಡಬಹುದು.
+
+DOM ನಿರ್ವಹಣೆ ಸ್ಥಿತಿಸ್ಥಾಪಕ ಪುಟಗಳನ್ನು ಸಂವಾದಾತ್ಮಕ ವೆಬ್‌ಸೈಟ್‌ಗಳಾಗಿಸಲು ಪರಿವರ್ತಿಸುತ್ತದೆ. ನೀವು ಪ್ರತಿಯೊಂದು ಬಾರಿ ಬಟನ್ ಹೋವರ್ ಮಾಡಿದಾಗ ಬಣ್ಣ ಬದಲಾದುದನ್ನು, ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡದೆ ವಿಷಯ ಮಾರ್ಪಡುವುದನ್ನು ಅಥವಾ ಆಂಗಲ್ನಲ್ಲಿ ಎಳೆಯಬಹುದಾದ ಅಂಶಗಳನ್ನು ನೋಡಿದಾಗ, ಅದು DOM ನಿರ್ವಹಣೆಯ ಕೆಲಸವೇ ಆಗಿದೆ.
+
+```mermaid
+flowchart TD
+    A["ದಾಖಲೆ"] --> B["HTML"]
+    B --> C["ತಲೆ"]
+    B --> D["ದೇಹ"]
+    C --> E["ಶೀರ್ಷಿಕೆ"]
+    C --> F["ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳು"]
+    D --> G["H1: ನನ್ನ ಟೆರೆರಿಯಂ"]
+    D --> H["ಡಿವ್: ಪುಟ ಕಂಟೈನರ್"]
+    H --> I["ಡಿವ್: ಎಡ ಕಂಟೈನರ್"]
+    H --> J["ಡಿವ್: ಬಲ ಕಂಟೈನರ್"]
+    H --> K["ಡಿವ್: ಟೆರೆರಿಯಂ"]
+    I --> L["ಸಸ್ಯ ಘಟಕಗಳು 1-7"]
+    J --> M["ಸಸ್ಯ ಘಟಕಗಳು 8-14"]
+    
+    L --> N["ಚಿತ್ರ#ಸಸ್ಯ1"]
+    L --> O["ಚಿತ್ರ#ಸಸ್ಯ2"]
+    M --> P["ಚಿತ್ರ#ಸಸ್ಯ8"]
+    M --> Q["ಚಿತ್ರ#ಸಸ್ಯ9"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style D fill:#e8f5e8
+    style H fill:#fff3e0
+    style N fill:#ffebee
+    style O fill:#ffebee
+    style P fill:#ffebee
+    style Q fill:#ffebee
+```
+![DOM ವೃಕ್ಷ ಪ್ರತಿನಿಧಾನ](../../../../translated_images/dom-tree.7daf0e763cbbba92.kn.png)
+
+> DOM ಹಾಗೂ ಅದಕ್ಕೆ ಉಲ್ಲೇಖಿಸುವ HTML ಮಾರ್ಕ್ಅಪ್‌ನ ಪ್ರತಿನಿಧಾನ. [ಒಲ್ಫಾ ನಾಸ್ರಾವೋಯಿ](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ಅವರಿಂದ
+
+**DOM ನ ಶಕ್ತಿಯ ಮೂಲ:**
+- **ನೀವು<html> ಪುಟದಲ್ಲಿರುವ ಯಾವುದೇ ಅಂಶವನ್ನು ಪ್ರವೇಶಿಸಲು** ರಚಿಸಿರುವ ಸರಳ, ವ್ಯವಸ್ಥಿತ ದಾರಿ
+- **ಪುಟ ರಿಫ್ರೆಶ್ ಇಲ್ಲದೇ** ಡೈನಾಮಿಕ್ ವಿಷಯಗಳ ನವೀಕರಣಕ್ಕೆ ಅವಕಾಶ
+- **ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗಳಿಗೂ (ಕ್ಲಿಕ್, ಡ್ರ್ಯಾಗ್ ಮೊದಲಾದವು) ತಕ್ಷಣ ಪ್ರತಿಕ್ರಿಯಿಸುವುದಕ್ಕೆ** ಸಾಮರ್ಥ್ಯ
+- **ಆಧುನಿಕ ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ** ಆಧಾರದ ಸ್ತಂಭ
+
+## JavaScript ಕ್ಲೋಶರ್‌ಗಳು: ಅನುಶಾಸಿತ ಮತ್ತು ಶಕ್ತಿಶಾಲಿ ಕೋಡ್ ರಚನೆ
+
+[JavaScript ಕ್ಲೋಶರ್](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ಒಂದು ಫಂಕ್ಷನ್‌ಗೆ ತನ್ನದೇ ಆದ ಖಾಸಗಿ ಕೆಲಸದ ವಾತಾವರಣವನ್ನು ನೀಡಿದಂತೆ, ನಿರಂತರ ಸ್ಮೃತಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಗಲಾಪಾಗೋಸ್ ದ್ವೀಪಗಳಲ್ಲಿನ ಡಾರ್ವಿನ್‌ನ ಫಿಂಚ್ ಪಕ್ಷಿಗಳಾಗಿ ಪ್ರತಿ ಪ್ರಭೇದವು ತನ್ನ ವಿಶಿಷ್ಟ ಪರಿಸರವನ್ನೂ ಆಧರಿಸಿ ವಿಶೇಷ ಮೋಪಿನ್ರು DEVELOP ಮಾಡಿಕೊಳ್ಳುವಂತೆ ಕ್ಲೋಶರ್‌ಗಳು ಕೂಡ ಒಂಥ ರೀತಿಯಲ್ಲಿವೆ, ಪೋಷಕ ಫಂಕ್ಷನ್ ಮುಗಿದ ಬಳಿಕಲೂ ತನ್ನ ವಿಶೇಷ ಪರಿಸರವನ್ನು "ನೋಡುಕೊಳ್ಳುತ್ತವೆ".
+
+ನಮ್ಮ ಟೆರಾರಿಯನ್‌ನಲ್ಲಿ, ಕ್ಲೋಶರ್‌ಗಳು ಪ್ರತಿ ಸಸ್ಯವನ್ನು ತನ್ನ ಸ್ಥಾನವನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ನೆನಪಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ. ವೃತ್ತಿಪರ JavaScript ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಈ ಮಾದರಿ ವ್ಯಾಪಕವಾಗಿ ಬಳಕೆಯಲ್ಲಿದ್ದು, ಜ್ಞಾನದ ಮೂಲಭೂತವಾದ ಅಂಶವಾಗಿದೆ.
+
+```mermaid
+flowchart LR
+    A["dragElement(plant1)"] --> B["ಕ್ಲೋಜರ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ"]
+    A2["dragElement(plant2)"] --> B2["ಕ್ಲೋಜರ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ"]
+    
+    B --> C["ಖಾಸಗಿ ಚರಗಳು"]
+    B2 --> C2["ಖಾಸಗಿ ಚರಗಳು"]
+    
+    C --> D["pos1, pos2, pos3, pos4"]
+    C --> E["pointerDrag ಕಾರ್ಯ"]
+    C --> F["elementDrag ಕಾರ್ಯ"]
+    C --> G["stopElementDrag ಕಾರ್ಯ"]
+    
+    C2 --> D2["pos1, pos2, pos3, pos4"]
+    C2 --> E2["pointerDrag ಕಾರ್ಯ"]
+    C2 --> F2["elementDrag ಕಾರ್ಯ"]
+    C2 --> G2["stopElementDrag ಕಾರ್ಯ"]
+    
+    H["ಸಸ್ಯ 1 ಅದರ ಸ್ಥಾನವನ್ನು ನೆನಪಿಡುತ್ತದೆ"] --> B
+    H2["ಸಸ್ಯ 2 ಅದರ ಸ್ಥಾನವನ್ನು ನೆನಪಿಡುತ್ತದೆ"] --> B2
+    
+    style B fill:#e8f5e8
+    style B2 fill:#e8f5e8
+    style C fill:#fff3e0
+    style C2 fill:#fff3e0
+```
+> 💡 **ಕ್ಲೋಶರ್‌ಗಳ ಸಾಮಗ್ರಿಯನ್ನು ಅರಿಯುವುದು**: ಕ್ಲೋಶರ್‌ಗಳು JavaScript ನ ಪ್ರಮುಖ ವಿಷಯವಾಗಿದ್ದು, ಹಲವಾರು ಡೆವಲಪರ್‌ಗಳು ಸಾಕಷ್ಟು ಕಾಲಗಳ ಕಾಲ ಅವುಗಳ ತಾತ್ವಿಕ ಅಂಶಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಓಗಿಕೊಳ್ಳುವ ಮೊದಲು ಬಳಕೆ ಮಾಡುತ್ತಾರೆ. ಇಂದು ನಾವು ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಕ್ಕೆ ಗಮನವಿಡುತ್ತೇವೆ - ನೀವು ನಮ್ಮ ಸಂವಾದಾತ್ಮಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಕ್ಲೋಶರ್‌ಗಳು ಸಹಜವಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ತಿಳಿದುಕೊಳ್ಳುತ್ತೀರಿ.
+
+![DOM ವೃಕ್ಷ ಪ್ರತಿನಿಧಾನ](../../../../translated_images/dom-tree.7daf0e763cbbba92.kn.png)
+
+> DOM ಹಾಗೂ ಅದಕ್ಕೆ ಉಲ್ಲೇಖಿಸುವ HTML ಮಾರ್ಕ್‌ಅಪ್‌ನ ಪ್ರತಿನಿಧಾನ. [ಒಲ್ಫಾ ನಾಸ್ರಾವೋಯಿ](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ಅವರಿಂದ
+
+ಈ ಪಾಠದಲ್ಲಿ, ನಾವು ಪೇಜ್‌ನ ಸಸ್ಯಗಳನ್ನು ಆನ್ಲೈನ್‌ನಲ್ಲಿ ನಿರ್ವಹಿಸಲು ಬಳಸಲಿರುವ JavaScript ಅನ್ನು ರಚಿಸುವ ಮೂಲಕ ನಮ್ಮ ಸಂವಾದಾತ್ಮಕ ಟೆರಾರಿಯನ್ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸುವೆವು.
+
+## ಪ್ರಾರಂಭಿಸುವ ಮುನ್ನ: ಯಶಸ್ಸಿಗಾಗಿ ಸಿದ್ಧತೆ
+
+ನೀವು ಹಿಂದಿನ ಟೆರಾರಿಯನ್ ಪಾಠಗಳಿಂದ ನಿಮ್ಮ HTML ಮತ್ತು CSS ಫೈಲುಗಳನ್ನು ಅಗತ್ಯವಿದೆ - ನಾವು ಸ್ಥಿತಿಸ್ಥಾಪಕ ವಿನ್ಯಾಸವನ್ನು ಸಂವಾದಾತ್ಮಕಗೊಳಿಸೋಣ. ನೀವು ಮೊದಲ ಬಾರಿಗೆ ಸೇರುತ್ತಿದ್ದರೆ, ಆ ಪಾಠಗಳನ್ನು ಮುಂಚಿತವಾಗಿ ಮುಗಿಸುವುದು ಮುಖ್ಯ ಸೂತ್ರಾಧಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ.
+
+ನಾವು ನಿರ್ಮಿಸುವುದು ಇದಾಗಿದೆ:
+- **ಎಲ್ಲಾ ಟೆರಾರಿಯನ್ ಸಸ್ಯಗಳಿಗೆ ಸ್ಮೂತ್ ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರೋಪ್**
+- **ಸ್ಥಾನದ ಸಂವೇದನೆಯನ್ನು ಸಸ್ಯಗಳು ನೆನಪಿಡಲು ಟ್ಯಾಕಿಂಗ್**
+- **ವ್ಯವಸಥಿತ, ಸಂಪೂರ್ಣ ಸಂವಾದಾತ್ಮಕ ಇಂಟರ್ಫೇಸ್‌ಗೆ ವನ್ಯ JavaScript ಬಳಕೆ**
+- **ಕ್ಲೋಶರ್ ಮಾದರಿಗಳು ಬಳಸಿ ಸ್ವಚ್ಛ, ಸುসংಘಟಿತ ಕೋಡ್**
+
+## ನಿಮ್ಮ JavaScript ಫೈಲನ್ನು ಸಿದ್ಧಪಡಿಸುವುದು
+
+ನಿಮ್ಮ ಟೆರಾರಿಯನ್‌ಗೆ ಸಂವಾದಾತ್ಮಕತೆಯನ್ನು ನೀಡಲಿರುವ JavaScript ಫೈಲನ್ನು ರಚಿಸೋಣ.
+
+**ಹೆಜ್ಜೆ 1: ನಿಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲನ್ನು ರಚಿಸಿ**
+
+ನಿಮ್ಮ ಟೆರಾರಿಯನ್ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ, `script.js` ಎಂಬ ಹೊಸ ಫೈಲನ್ನು ರಚಿಸಿ.
+
+**ಹೆಜ್ಜೆ 2: JavaScript ಅನ್ನು ನಿಮ್ಮ HTML ಗೆ ಲಿಂಕ್ ಮಾಡುವುದು**
+
+ನಿಮ್ಮ `index.html` ಫೈಲಿನ `<head>` ವಿಭಾಗಕ್ಕೆ ಈ ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್ ಅನ್ನು ಸೇರಿಸಿ:
+
+```html
+<script src="./script.js" defer></script>
+```
+
+**`defer` ಗುಣಲಕ್ಷಣ ಯಾಕೆ ಮುಖ್ಯ:**
+- **ಸಂಪೂರ್ಣ HTML ಲೋಡ್ ಆದ ನಂತರ ನಿಮ್ಮ JavaScript ಕಾರ್ಯಾಚರಣೆ ಕೈಗೊಳ್ಳಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ**
+- **JavaScript ಲೋಡ್ ಆಗದೇ ಇರುವ ಅಂಶಗಳನ್ನು ಹುಡುಕುತ್ತಿದ್ದ ತಪ್ಪುಗಳನ್ನು ತಡೆಯುತ್ತದೆ**
+- **ಎಲ್ಲಾ ಸಸ್ಯ ಅಂಶಗಳು ಸಂವಾದಾತ್ಮಕತೆಗೆ ಸಿದ್ಧವಾಗಿರುತ್ತವೆ ಎಂದು ಖಾತರಿಪಡಿಸುತ್ತದೆ**
+- **ಪುಟದ ಕೆಳಭಾಗದಲ್ಲಿ ಸ್ಕ್ರಿಪ್ಟ್ ಇಡುವುದಕ್ಕಿಂತ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯುಂಟುಮಾಡುತ್ತದೆ**
+
+> ⚠️ **ಮುಖ್ಯ ಟಿಪ್ಪಣಿ**: `defer` ಗುಣಲಕ್ಷಣ ಸಾಮಾನ್ಯ ಸಮಯ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ. ಇದಿಲ್ಲದೆ, JavaScript ಪರಿಶೀಲನೆಗೆ ಸಿದ್ಧವಾಗದ HTML ಅಂಶಗಳನ್ನು ಪ್ರಾಪ್ತಿಸಿಕೊಂಡು ತಪ್ಪುಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
+
+---
+
+## JavaScript ನ್ನು ನಿಮ್ಮ HTML ಅಂಶಗಳಿಗೆ ಸಂಪರ್ಕಿಸುವುದು
+
+ಅಂಶಗಳನ್ನು ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದಂತೆ ಮಾಡಲು ಮೊದಲು JavaScript ಅವುಗಳನ್ನು DOM ನಲ್ಲಿ ತಿಳಿದುಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ. ಇದನ್ನು ಗ್ರಂಥಾಲಯದ ಕಟಾಲೋಗಿಂಗ್ ವ್ಯವಸ್ಥೆಯಂತೆ ಪರಿಗಣಿಸಿ - ಕಟಾಲೋಗ್ ಸಂಖ್ಯೆಯನ್ನು ಪಡೆದ ಮೇಲೆ, ನೀವು ನೀವು ಬೇಕಾದ ಪುಸ್ತಕವನ್ನು ಪೂರ್ತಿ ಪಡೆಯಬಹುದು.
+
+ನಾವು ಇದಕ್ಕೆ `document.getElementById()` ಪદ્ધತಿಯನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದು ಖಚಿತವಾದ ಫೈಲ್ಪತ್ರಿಕೆಯಂತೆ - ನೀವು ಒಂದು ID ನೀಡುತ್ತೀರಿ, ಇದು ಆ HTML ಅಂಶವನ್ನು ನಿಖರವಾಗಿ ಹುಡುಕುತ್ತದೆ.
+
+### ಎಲ್ಲಾ ಸಸ್ಯಗಳಿಗೆ ಡ್ರ್ಯಾಗ್ ಕಾರ್ಯಾಚರಣೆ ಸಕ್ರಿಯಗೊಳಿಸುವುದು
+
+ನಿಮ್ಮ `script.js` ಫೈಲಿಗೆ ಈ ಕೋಡ್ ಅನ್ನು ಸೇರಿಸಿ:
+
+```javascript
+// ಎಲ್ಲಾ 14 ಸಸಿಗಳಿಗೆ ಡ್ರ್ಯಾಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+**ಈ ಕೋಡ್ ಸಾಧಿಸುವುದು:**
+- **ಪ್ರತಿ ಸಸ್ಯ ಅಂಶವನ್ನು ಅದರ ವಿಶಿಷ್ಟ ID ಮೂಲಕ DOM ನಲ್ಲಿ ಹುಡುಕುವುದು**
+- **ಪ್ರತಿ HTML ಅಂಶಕ್ಕೆ JavaScript ನ ದಿಗ್ಗಜ ಉಲ್ಲೇಖವನ್ನು ಪಡೆದುಕೊಳ್ಳುವುದು**
+- **ಪ್ರತಿ ಅಂಶವನ್ನು `dragElement` ಫಂಕ್ಷನ್‌ಗೆ ಪಾಸು ಮಾಡುವುದು (ನಾಳೆ ನಾವು ಸೃಷ್ಟಿಸುವುದು)**
+- **ಎಲ್ಲಾ ಸಸ್ಯಗಳನ್ನು ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರೋಪ್‌ಗಾಗಿ ಸಿದ್ಧಗೊಳಿಸುವುದು**
+- **ನಿಮ್ಮ HTML ರಚನೆಯನ್ನು JavaScript ಕಾರ್ಯಾಚರಣೆಗೆ ಸಂಪರ್ಕಿಸುವುದು**
+
+> 🎯 **ಐಡಿಗಳನ್ನು ಕ್ಲಾಸ್‌ಗಳ ಬದಲು ಯಾಕೆ ಬಳಸುತ್ತೇವೆ?** ಐಡಿಗಳು ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳಿಗೆ ವಿಶಿಷ್ಟ ಗುರುತಿನ ಸಂಖ್ಯೆ ನೀಡುತ್ತವೆ, CSS ಕ್ಲಾಸ್‌ಗಳು ಗುಂಪುಗಳಿಗೆ ಶೈಲಿಗಾಗಿ. JavaScript ನಿಂದ ಪ್ರತ್ಯೇಕ ಅಂಶಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಐಡಿಗಳು ನಿಖರತೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಒದಗಿಸುತ್ತವೆ.
+
+> 💡 **ಪ್ರೊ ಟಿಪ್**: ಪ್ರತಿಯೊಂದು ಸಸ್ಯಕ್ಕಾಗಿ `dragElement()` ಅನ್ನು ವೈಯಕ್ತಿಕವಾಗಿ ಕರೆಯುವ ಕಾರಣವೇನು ಎಂದರೆ, ಪ್ರತಿ ಸಸ್ಯ ಸಸ್ವತಂತ್ರವಾಗಿ ಇರಬೇಕಾದ ಡ್ರ್ಯಾಗ್ ನಡೆಸುವಿಕೆಯನ್ನು ಹೊಂದಲು ಆಗಬಹುದು. ಇದು ಸ್ಮೂತ್ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಅಗತ್ಯ.
+
+### 🔄 **ಶಿಕ್ಷಣ ಪರೀಕ್ಷೆ**
+**DOM ಸಂಪರ್ಕ ಅಭ್ಯಾಸ**: ಡ್ರಾಗ್ ಕಾರ್ಯಕ್ಕೆ ಹೋಗುವ ಮೊದಲು, ಕೆಳಗಿನ ವಿಚಾರಗಳನ್ನು ಪರಿಶೀಲಿಸಿ:
+- ✅ `document.getElementById()` HTML ಅಂಶಗಳನ್ನು ಹೇಗೆ ಹುಡುಕುತ್ತದೆ ಎಂದು ವಿವರಿಸಬಲ್ಲಿರಾ
+- ✅ ಪ್ರತಿ ಸಸ್ಯಕ್ಕಾಗಿ ವಿಶಿಷ್ಟ ID ಗಳನ್ನು ಯಾಕೆ ಬಳಸುತ್ತಾರೆ ಎಂದು ತಿಳಿದಿರುತ್ತೀರಾ
+- ✅ ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿನ `defer` ಗುಣಲಕ್ಷಣದ ಅರ್ಥ ಏನು
+- ✅ JavaScript ಮತ್ತು HTML DOM ಮೂಲಕ ಹೇಗೆ ಸಂಪರ್ಕ ಹೊಂದಿವೆ ಎಂದು ಗ್ರಹಿಸಿ
+
+**ಸ್ವ-ಪರೀಕ್ಷೆ**: ಎರಡು ಅಂಶಗಳು ಒಂದೇ ID ಇದ್ದರೆ ಏನೆ ಆಗುತ್ತದೆ? `getElementById()` ಏಕೆ ಮೂರು ಅಂಶಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ಮರಳಿಸುವುದಿಲ್ಲ?
+*ಉತ್ತರ: ID ಗಳು ವಿಭಿನ್ನವಾಗಿರಬೇಕು; ನಕಲಿ ವಿಷಯದಲ್ಲಿ ಪ್ರಥಮ ಅಂಶ ಮಾತ್ರ ಮರಳುತ್ತದೆ*
+
+---
+
+## ಡ್ರ್ಯಾಗ್ ಅಂಶ ಕ್ಲೋಶರ್ ರಚನೆ
+
+ಈಗ ನಾವು ಡ್ರ್ಯಾಗ್ ಕಾರ್ಯಾಚರಣೆಯ ಹೃದಯಭಾಗವನ್ನು ಸೃಷ್ಟಿಸುವೆವು: ಪ್ರತಿ ಸಸ್ಯದ ಡ್ರ್ಯಾಗ್ ಆಚಾರಣೆಯನ್ನು ನಿರ್ವಹಿಸುವ ಕ್ಲೋಶರ್. ಈ ಕ್ಲೋಶರ್ ಹಲವಾರು ಅಂಗಾನುಕ್ರಮ функ్షನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದ್ದು ಮೌಸ್ ಚಲನೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ ಅಂಶಗಳ ಸ್ಥಾನಗಳನ್ನು ನವೀಕರಿಸುತ್ತದೆ.
+
+ಕ್ಲೋಶರ್‌ಗಳು ಎಷ್ಟು ಸೂಕ್ತವಾದದೋ ಎಂದು ನೋಡಿ, ಏಕೆಂದರೆ ಅವು "ಖಾಸಗಿ" ಚರಗಳನ್ನು ಫಂಕ್ಷನ್ ಕರೆಗಳ ಮಧ್ಯೆ ಉಳಿಸಿಕೊಂಡು ಪ್ರತಿ ಸಸ್ಯಕ್ಕೆ ಸ್ವತಂತ್ರ ಸ್ಥಾನದ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ.
+
+### ಸರಳ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಕ್ಲೋಶರ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+
+ನನಗೆ ಕ್ಲೋಶರ್‌ಗಳನ್ನು ತೋರಿಸುವ ಸರಳ ಉದಾಹರಣೆ ಇದಿದೆ:
+
+```javascript
+function createCounter() {
+    let count = 0; // ಇದು ಖಾಸಗಿ ಬದಲಾಯಿಸುವಂತೆ ಇದೆ
+    
+    function increment() {
+        count++; // ಒಳಗಿನ ಫಂಕ್ಷನ್ ಬಾಹ್ಯ ಬದಲಾಯಿಸುವಿಕೆ ನೆನಪುತ್ತದೆ
+        return count;
+    }
+    
+    return increment; // ನಾವು ಒಳಗಿನ ಫಂಕ್ಷನ್ ಅನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತಿದ್ದೇವೆ
+}
+
+const myCounter = createCounter();
+console.log(myCounter()); // ೧
+console.log(myCounter()); // ೨
+```
+
+**ಈ ಕ್ಲೋಶರ್ ಮಾದರಿಯಲ್ಲಿ ಏನು జరుగುತ್ತಿದೆ:**
+- **ಖಾಸಗಿ `count` ಚರವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಇದು ಈ ಕ್ಲೋಶರ್ ಒಳಗಿನಷ್ಟೇ ಇದೆ**
+- **ಆಂಗೊಳಗಿನ ಫಂಕ್ಷನ್ ಆ ಹೊರಗಿನ ಚರವನ್ನೂ ಬಳಸಬಹುದು, ಪರಿವರ್ತನೆ ಮಾಡಬಹುದು (ಕ್ಲೋಶರ್ ವಿಧಾನ)**
+- **ನಮಗೆ ಆ ಅಂಗಪಟ್ಟಿಯನ್ನು ಹಿಂತಿರುಗಿಸಿದಾಗ, ಅದು ಆ ಖಾಸಗಿ ಡೇಟಾವನ್ನು ನೆನಪಿಡುತ್ತದೆ**
+- **`createCounter()` ಕಾರ್ಯಾವಧಿ ಮುಗಿದರೂ ಸಹ, `count` ಮೌಲ್ಯ ಉಳಿದಿರುತ್ತದೆ ಮತ್ತು ನೆನಪಿರುತ್ತದೆ**
+
+### ಡ್ರ್ಯಾಗ್ ಕಾರ್ಯಾಚರಣೆಗಾಗಿ ಕ್ಲೋಶರ್‌ಗಳು ಯಾಕೆ ಸೂಕ್ತ
+
+ನಮ್ಮ ಟೆರಾರಿಯನ್‌ಗೆ, ಪ್ರತಿ ಸಸ್ಯ ತನ್ನ ಪ್ರಸ್ತುತ ಸ್ಥಾನ ನಿಯತಾಂಕಗಳನ್ನು ನೆನಪಿಡಬೇಕು. ಕ್ಲೋಶರ್‌ಗಳು ಈ ಸಮಸ್ಯೆಗೆ ತಕ್ಕ ಪರಿಹಾರ:
+
+**ನಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಮುಖ್ಯ ಲಾಭಗಳು:**
+- **ಪ್ರತಿ ಸಸ್ಯಕ್ಕೆ ಖಾಸಗಿ ಸ್ಥಾನ ಚರಗಳನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಉಳಿಸುತ್ತದೆ**
+- **ಡ್ರ್ಯಾಗ್ ಘಟನೆಗಳ ನಡುವೆ ನಿರಂತರಸ್ಥಿತಿಯನ್ನು ಕಾಯುತ್ತದೆ**
+- **ಬೇರೆ ಬೇರೆ ಡ್ರ್ಯಾಗ್ ಆಗಬಹುದಾದ ಅಂಶಗಳ ಪರಸ್ಪರ ಸಂಘರ್ಷವನ್ನು ತಡೆಗಟ್ಟುತ್ತದೆ**
+- **ಸ್ವಚ್ಛ, ಸಂಘಟಿತ ಕೋಡ್ ರಚನೆ ಒದಗಿಸುತ್ತದೆ**
+
+> 🎯 **ಅಭ್ಯಾಸ ಗುರಿ**: ಈಗಾಗಲೇ ನಿಮಗೆ ಕ್ಲೋಶರ್‌ಗಳ ಎಲ್ಲಾ ಜ್ಞಾನ ಬೇಕಾಗಿಲ್ಲ. ಡ್ರ್ಯಾಗಿಂಗ್ ಕಾರ್ಯಾಚರಣೆಗಾಗಿ ಅದು ಹೇಗೆ ಸಹಾಯಮಾಡುತ್ತದೆಯೋ ನೋಡುವಿಕೆಗೆ ಸೀಮಿತವಾಗಿರಿ.
+
+```mermaid
+stateDiagram-v2
+    [*] --> Ready: ಪುಟ ಲೋಡ್ ಆಗುತ್ತದೆ
+    Ready --> DragStart: ಬಳಕೆದಾರನು ಒತ್ತುತ್ತಾನೆ (pointerdown)
+    DragStart --> Dragging: ಮೌಸ್/ಬೆರಳು ಚಲಿಸುತ್ತದೆ (pointermove)
+    Dragging --> Dragging: ಮುಂದುವರಿಯುತ್ತಾ ಚಲಿಸುವುದು
+    Dragging --> DragEnd: ಬಳಕೆದಾರನು ಬಿಡುಗಡೆ ಮಾಡುತ್ತಾನೆ (pointerup)
+    DragEnd --> Ready: ಮುಂದಿನ ಡ್ರಾಗ್‌ಗಾಗಿ ಮರುಹೊಂದಿಸಿ
+    
+    state DragStart {
+        [*] --> CapturePosition
+        CapturePosition --> SetupListeners
+        SetupListeners --> [*]
+    }
+    
+    state Dragging {
+        [*] --> CalculateMovement
+        CalculateMovement --> UpdatePosition
+        UpdatePosition --> [*]
+    }
+    
+    state DragEnd {
+        [*] --> RemoveListeners
+        RemoveListeners --> CleanupState
+        CleanupState --> [*]
+    }
+```
+### `dragElement` ಫಂಕ್ಷನ್ ರಚನೆ
+
+ನಿಮ್ಮ ಸಸ್ಯ ಅಂಶ ಘೋಷಣೆಯ ಕೆಳಗೆ ಈ ಮುಖ್ಯ function ಅನ್ನು ಸೇರಿಸಿ. ಇದು ಎಲ್ಲಾ ಡ್ರ್ಯಾಗ್ ನಿಯಂತ್ರಣ ನಡೆಸುತ್ತದೆ:
+
+```javascript
+function dragElement(terrariumElement) {
+    // ಸ್ಥಾನ ಟ್ರ್ಯಾಕಿಂಗ್ 변수ಗಳನ್ನು ಪ್ರಾರಂಭಿಸಿ
+    let pos1 = 0,  // ಹಿಂದಿನ ಮೌಸ್ X ಸ್ಥಾನ
+        pos2 = 0,  // ಹಿಂದಿನ ಮೌಸ್ Y ಸ್ಥಾನ
+        pos3 = 0,  // ಪ್ರಸ್ತುತ ಮೌಸ್ X ಸ್ಥಾನ
+        pos4 = 0;  // ಪ್ರಸ್ತುತ ಮೌಸ್ Y ಸ್ಥಾನ
+    
+    // ಪ್ರಾರಂಭಿಕ ಡ್ರ್ಯಾಗ್ ಇವೆಂಟ್ ಶ್ರೋತ を ಸ್ಥಾಪಿಸಿ
+    terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+**ಸ್ಥಾನದ ಟ್ರ್ಯಾಕಿಂಗ್ ವ್ಯವಸ್ಥೆಯ ಅರ್ಥ:**
+- **`pos1` ಮತ್ತು `pos2`**: ಹಳೆಯ ಮತ್ತು ಹೊಸ ಮೌಸ್‍ಅವರಿಗೆ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಜೋಡಿಸಿಕೊಂಡಿವೆ
+- **`pos3` ಮತ್ತು `pos4`**: ಪ್ರಸ್ತುತ ಮೌಸ್ ಸ್ಥಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತವೆ
+- **`terrariumElement`**: ನಾವು ಡ್ರ್ಯಾಗ್ ಮಾಡಬೇಕಾದ ವಿಶೇಷ ಸಸ್ಯ ಅಂಶ
+- **`onpointerdown`**: ಬಳಕೆದಾರರು ಡ್ರ್ಯಾಗ್ ಆರಂಭಿಸುವ ಘಟನೆ
+
+**ಕ್ಲೋಶರ್ ಮಾದರಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:**
+- **ಪ್ರತಿ ಸಸ್ಯ ಅಂಶಕ್ಕೆ ಖಾಸಗಿ ಸ್ಥಾನ ಚರಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ**
+- **ಡ್ರ್ಯಾಗ್ ಲೈಫ್ಸೈಕಲ್‌ನ್ನು ಪೂರ್ತಿ ಅವುಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ**
+- **ಪ್ರತಿ ಸಸ್ಯವು ತನ್ನ ಸ್ವತಂತ್ರ ಸ್ಥಾನದ ಸುದ್ದಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ**
+- **`dragElement` ಮೂಲಕ ಸ್ವಚ್ಛ ಇಂಟರ್ಫೇಸ್ ಒದಗಿಸುತ್ತದೆ**
+
+### ಪಾಯಿಂಟರ್ ಅಪಘಟನೆಗಳನ್ನು ಯಾಕೆ ಬಳಕೆ ಮಾಡುತ್ತೇವೆ?
+
+ನೀವು ಏಕೆ `onpointerdown` ಅನ್ನು `onclick` ಬದಲಿಗೆ ತೆಗೆದುಕೊಳ್ಳುತ್ತೇವೆ ಎಂದು ಆಶ್ಚರ್ಯ ಪಟ್ಟಿರಬಹುದು. ಈ ಕಾರಣಗಳು ಇಲ್ಲಿವೆ:
+
+| ಘಟನೆಯ ಪ್ರಕಾರ | ಉತ್ತಮವಾದ ಬಳಕೆ | ಗಡಿಬಿಡಿ |
+|------------|----------|-------------|
+| `onclick` | ಸರಳ ಬಟನ್ ಕ್ಲಿಕ್ಸ್ | ಡ್ರ್ಯಾಗ್ ಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳಲಾರದು (ಕೆವಲ ಕ್ಲಿಕ್ ಮತ್ತು ಬಿಡುಗಡೆ) |
+| `onpointerdown` | ಮೌಸ್ ಮತ್ತು ಸ್ಪರ್ಶ ಎರಡಿಗೂ | ಹೊಸದು, ಆದರೆ ಉತ್ತಮ ಬೆಂಬಲ ಹೊಂದಿದೆ |
+| `onmousedown` | ಡೆಸ್ಕ್‌ಟಾಪ್ ಮೌಸ್ ಗಾಗಿ ಮಾತ್ರ | ಮೊಬೈಲ್ ಬಳಕೆದಾರರಿಗೆ ಸಮಸ್ಯೆ |
+
+**ನಾವು ನಿರ್ಮಿಸುತ್ತಿರುವುದಕ್ಕೆ ಪಾಯಿಂಟರ್ ಘಟನೆಗಳು ಯಾಕೆ ಸೂಕ್ತ:**
+- **ಮೌಸ್, ಬೆರಳು ಅಥವಾ ಸ್ಟೈಲಸ್ ಅಧಿಕಾರದಿಂದ ಇರಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ**
+- **ಲಾಗ್ ಟಾಪ್, ಟ್ಯಾಬ್ಲೆಟ್ ಅಥವಾ ಫೋನ್ ಎಲ್ಲದರಲ್ಲೂ ಅದು ಸಮಾನ ಅನುಭವ**
+- **ವಾಸ್ತವಿಕ ಡ್ರ್ಯಾಗ್ ಚಲನೆಯನ್ನು ನಿಭಾಯಿಸುತ್ತದೆ (ಕೆವಲ ಕ್ಲಿಕ್ ಅಲ್ಲ)**
+- **ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ನಿರೀಕ್ಷೆಬಂದ ಅನುಭವ ಸೃಷ್ಟಿಸುತ್ತದೆ**
+
+> 💡 **ಭವಿಷ್ಯನಿರೀಕ್ಷಣೆ**: ಪಾಯಿಂಟರ್ ಘಟನೆಗಳು ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಹಿಡಿಯಲು ಆಧುನಿಕ ವಿಧಾನ. ಮೌಸ್ ಮತ್ತು ಸ್ಪರ್ಶಕ್ಕೆ ಪ್ರತ್ಯೇಕ ಕೋಡ್ ಬರೆದಿಲ್ಲದೆ ಇಬ್ಬರನ್ನೂ ಪಡೆಯಬಹುದು. ಅದ್ಭುತವೆ ಅಲ್ಲವೆ?
+
+### 🔄 **ಶಿಕ್ಷಣ ಪರೀಕ್ಷೆ**
+**ಘಟನೆ ನಿರ್ವಹಣೆಯ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ**: ಕೆಳಗಿನ ಪ್ರಶ್ನೆಗಳಿಗೆ ಉತ್ತರ ನೀಡಿ:
+- ✅ ನಾವು ಏಕೆ ಮೌಸ್ ಘಟನಗಳ ಬದಲು ಪಾಯಿಂಟರ್ ಕಾರ್ಯಕ್ರಮಗಳನ್ನು ಬಳಸುತ್ತೇವೆ?
+- ✅ ಕ್ಲೋಶರ್ ಚರಗಳು ಫಂಕ್ಷನ್ ಕರೆಗಳ ನಡುವೆ ಹೇಗೆ ಉಳಿಯುತ್ತವೆ?
+- ✅ ಸ್ಮೂತ್ ಡ್ರ್ಯಾಗ್‌ಗಾಗಿ `preventDefault()` ಯ ಪಾತ್ರವೇನು?
+- ✅ ಏಕೆ ನಾವು ಪ್ರತಿ ಅಂಶದ ಬದಲು ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಕೇಳಿಕೆಳನ್ನು ಮಾಡುತ್ತೇವೆ?
+
+**ಯಥಾರ್ಥ ಜಗತ್ತಿನ ಸಂಪರ್ಕ**: ಪ್ರತಿದಿನ ನೀವು ಬಳಸುವ ಡ್ರಾಗ್-ಅಂಡ್-డ್ರೋಪ್ ಇಂಟರ್ಫೇಸ್‌ಗಳ ಬಗ್ಗೆ ಯೋಚಿಸಿ:
+- **ಫೈಲ್ ಅಪ್ಲೋಡ್ಗಳು**: ಬ್ರೌಸರ್ ವಿಂಡೋಗೆ ಫೈಲ್ ಎಳೆಯುವುದು
+- **ಕನ್‌ಬನ್ ಬೋರ್ಡ್‌ಗಳು**: ಕಾರ್ಯಗಳನ್ನು ಕಾಲಮ್‌ಗಳ ನಡುವೆ ಸರಿಸಲು
+- **ಚಿತ್ರ ಗ್ಯಾಲರಿ**: ಫೋಟೋಗಳ ಕ್ರಮ ಬದಲಾಯಿಸಲು
+- **ಮೊಬೈಲ್ ಇಂಟರ್ಫೇಸ್‌ಗಳು**: ಸ್ಪರ್ಶ ದೊಡ್ಡಿ ಮತ್ತು ಎಳೆಯುವಿಕೆ
+
+---
+
+## `pointerDrag` ಫಂಕ್ಷನ್: ಡ್ರ್ಯಾಗ್ ಪ್ರಾರಂಭವನ್ನು ಹಿಡಿದುಕೊಳ್ಳುವುದು
+
+ಬಳಕೆದಾರರು ಸಸ್ಯವನ್ನು ಒತ್ತಿದಾಗ (ಮೌಸ್ ಕ್ಲಿಕ್ ಅಥವಾ ಬೆರಳೆ ಟಚ್ ಮೂಲಕ) `pointerDrag` ಕಾರ್ಯ ಸಕ್ರೀಯಗೊಳ್ಳುತ್ತದೆ. ಈ ಕಾರ್ಯ ಆರಂಭಿಕ ನಿರ್ಧಿಷ್ಟ ಅಂಶಗಳ ಸ್ಥಾನದ ನಿರ್ಧಾರ ಮಾಡಿ ಡ್ರ್ಯಾಗ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಹೊರಡುತ್ತದೆ.
+
+ಈ ಕಾರ್ಯವನ್ನು ನಿಮ್ಮ `dragElement` ಕ್ಲೋಶರ್ ಒಳಗೆ, `terrariumElement.onpointerdown = pointerDrag;` ಸಾಲಿನ ನಂತರ ಸೇರಿಸಿ:
+
+```javascript
+function pointerDrag(e) {
+    // ಡಿಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ವರ್ತನೆ (ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆ ಮಾಡುವುದು ಮುಂತಾದವು) ತಡೆಯಿರಿ
+    e.preventDefault();
+    
+    // ಪ್ರಾರಂಭಿಕ ಮೌಸ್/ಸ್ಪರ್ಶ ಸ್ಥಾನದನ್ನ ಹಿಡಿ
+    pos3 = e.clientX;  // ಎಕ್ಸฃಯ ಸಂಪನ್ಮೂಲ ಡ್ರ್ಯಾಗ್ ಪ್ರಾರಂಭವಾದ ಸ್ಥಳ
+    pos4 = e.clientY;  // ವೈ ಸಂಯೋಜಕಡೆ ಡ್ರ್ಯಾಗ್ ಪ್ರಾರಂಭವಾದ ಸ್ಥಳ
+    
+    // ಡ್ರ್ಯಾಗಿಂಗ್ ಪ್ರಕ್ರಿಯೆಗಾಗಿ ಘಟನೆ ಕೇಳಿಕೊಳಬಹುದಾದ ಕಾರ್ಯಗಳನ್ನು ರಚಿಸಿ
+    document.onpointermove = elementDrag;
+    document.onpointerup = stopElementDrag;
+}
+```
+
+**ಹೆಜ್ಜೆ ಹಂತವಾಗಿ ಏನು ನಡೆಯುತ್ತಿದೆ:**
+- **ಡ್ರ್ಯಾಗ್ ತಡೆಗಟ್ಟುವ ಬ್ರೌಸರ್ ನಡವಳಿಕೆಯನ್ನು ತಡೆಯುತ್ತದೆ**
+- **ಬಳಕೆದಾರರು ಡ್ರ್ಯಾಗ್ ಪ್ರಾರಂಭಿಸಿದ ನಿಖರ ಸ್ಥಾನಾಂಕಗಳನ್ನು ದಾಖಲಿಸುತ್ತದೆ**
+- **ಚಲಿಸುವಿಕೆಗೆ ಸಂಬಂಧಿಸಿದ ಇವೆಂಟ್ ಕೇಳಿಕೆಳನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ**
+- **ಡಾಕ್ಯೂಮೆಂಟ್ ವ್ಯಾಪ್ತಿಯಲ್ಲಿ ಮೌಸ್/ಬೆರಳೆ ಚಲನೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ**
+
+### ಘಟನೆ ತಡೆಗಟ್ಟುವಿಕೆ ಅರ್ಥ
+
+`e.preventDefault()` ಸಾಲು ಸ್ಮೂತ್ ಡ್ರ್ಯಾಗ್‌ಗೆ ಅತ್ಯಂತ ಮುಖ್ಯ:
+
+**ತಡೆಗಡುತಿಲ್ಲದಿದ್ದರೆ, ಬ್ರೌಸರ್‌ಗಳು:**
+- **ಪುಟದ ಮೇಲೆ ಡ್ರ್ಯಾಗ್ ಮಾಡುವಾಗ ಪಠ್ಯ ಆಯ್ಕೆ ಮಾಡಬಹುದು**
+- **ಬಲ ಕ್ಲಿಕ್ ಡ್ರ್ಯಾಗ್‌ನಲ್ಲಿ ಸಂಧರ್ಭ ಮೆನುಗಳನ್ನು ತಲುಪಿಸಬಹುದು**
+- **ನಮ್ಮ ಸ್ವಂತ ಡ್ರ್ಯಾಗ್ ಕಾರ್ಯವಿಧಾನಕ್ಕೆ ಅಡ್ಡಿಯಾಗಬಹುದು**
+- **ಡ್ರ್ಯಾಗ್ ಕಾರ್ಯಾಚರಣೆಯಲ್ಲಿ ದೃಶ್ಯ ದೋಷವನ್ನು ಸೃಷ್ಟಿಸ್ತದೆ**
+
+> 🔍 **ಪ್ರಯೋಗ**: ಈ ಪಾಠ ಮುಗಿದ ಬಳಿಕ `e.preventDefault()` ಅನ್ನು ತೆಗೆದುಹಾಕಿ ಪ್ರಯತ್ನಿಸಿ, ಅದು ಡ್ರ್ಯಾಗ್ ಅನುಭವವನ್ನು ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ ನೋಡೋಣ. ನೀವು ಇದನ್ನು ಶೀಘ್ರ ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ!
+
+### ಸ್ಥಳಾಂಕ ಟ್ರ್ಯಾಕಿಂಗ್ ವ್ಯವಸ್ಥೆ
+
+`e.clientX` ಮತ್ತು `e.clientY` ಲಕ್ಷಣಗಳು ಮೌಸ್/ಟಚ್ ನಿಖರ ಸ್ಥಾನಾಂಕಗಳನ್ನು ನೀಡುತ್ತವೆ:
+
+| ಲಕ್ಷಣ | ಏನು ಅಳೆಯುತ್ತದೆ | ಉಪಯೋಗವಾಗುವ ಸ್ಥಳ |
+|----------|------------------|----------|
+| `clientX` | ವೀಕ್ಷಣಾ ವಿಂಡೋದಿಂದ ಎಡ-ಬಲ ಆಧಾರಿತ ಸ್ಥಾನ | ಎಡ-ಬಲ ಚಲನವಲನ ಟ್ರ್ಯಾಕಿಂಗ್ |
+| `clientY` | ವೀಕ್ಷಣಾ ವಿಂಡೋದಿಂದ ಮೇಲ್ನೋಟ ಆಧಾರಿತ ಸ್ಥಾನ | ಮೇಲೆ-ಕೆಳ ಚಲನವಲನ ಟ್ರ್ಯಾಕಿಂಗ್ |
+**ಈ ಸಂಯೋಜನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+- **ಪಿಕ್ಸೆಲ್-ಪರಿಪೂರ್ಣ** ಸ್ಥಾನ ನಿಯೋಜನೆ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ
+- **ಬಳಕೆದಾರನು ಪಾಯಿಂಟರ್ ನನ್ನು ಚಲಿಸುವಂತೆ** ನಿಖರ-ಸಮಯದಲ್ಲಿಯೇ ನವೀಕರಿಸುತ್ತದೆ
+- **ವಿವಿಧ ಪರದೆ ಗಾತ್ರಗಳು ಮತ್ತು ಜೂಂ ಮಟ್ಟಗಳಾದ್ಯಂತ ಸ್ಥಿರವಾಗಿ** ಇರಿಸುತ್ತದೆ
+- **ಮೃದು, ಸ್ಪಂದನಶೀಲ ಡ್ರ್ಯಾಗ್ ಕ್ರಿಯೆಗಳ ಸಾಧ್ಯತೆ** ಒದಗಿಸುತ್ತದೆ
+
+### ಡಾಕ್ಯುಮೆಂಟ್-ಮಟ್ಟದ ಈವೆಂಟ್ ಶ್ರೋತರುಗಳನ್ನು ಸ್ಥಾಪಿಸುವುದು
+
+ನಾವು ಡ್ರ್ಯಾಗ್ ಮತ್ತು ನಿಲ್ಲಿಸುವ ಈವೆಂಟ್ ಗಳನ್ನು ಸಸ್ಯ ಅಂಶಕ್ಕೆ ಮಾತ್ರವಲ್ಲದೆ ಪೂರ್ಣ `document` ಗೆ ಹೇಗೆ ಲಗತ್ತಿಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ:
+
+```javascript
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+
+**ಡಾಕ್ಯುಮೆಂಟ್ ಗೆ ಲಗತ್ತಿಸುವ ಕಾರಣಗಳು:**
+- **ಮೌಸ್ ಸಸ್ಯ ಅಂಶದಿಂದ ಹೊರಹೋಗಿದ್ರೆ ಸಹ ಟ್ರ್ಯಾಕಿಂಗ್ ಮುಂದುವರಿಯುತ್ತದೆ**
+- **ಬಳಕೆದಾರನು ವೇಗವಾಗಿ ಚಲಿಸಿದರೂ ಡ್ರ್ಯಾಗ್ ಮಧ್ಯಸ್ಥಿಕೆ ತಡೆತಡೆಯುತ್ತದೆ**
+- **ಪೂರ್ಣ ಪರದೆ ಮೇಲೆ ಮೃದುವಾಗಿ ಡ್ರ್ಯಾಗ್ ಆಗಬಹುದು**
+- **ಬ್ರೌಸರ್ ವಿಂಡೋ ಹೊರಗೆ ಕರ್ಸರ್ ಚಲಿಸುವ ಮಾರುತಗಳ ನಿರ್ವಹಣೆ ಮಾಡುತ್ತದೆ**
+
+> ⚡ **ಕಾರ್ಯಕ್ಷಮತೆ ಟಿಪ್ಪಣಿ**: ಡ್ರ್ಯಾಗ್ ನಿಲ್ಲಿಸಿದಾಗ ಈ ಡಾಕ್ಯುಮೆಂಟ್-ಮಟ್ಟದ ಶ್ರೋತರನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸೋಣ, ಇದು	memೋರಿ ಲೀಕ್ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
+
+## ಡ್ರ್ಯಾಗ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಸಂಪೂರ್ಣಗೊಳಿಸುವುದು: ಚಲನೆ ಮತ್ತು ಸ್ವಚ್ಛತೆ
+
+ಈಗ ನಾವು ಉಳಿದ ಎರಡು ಫಂಕ್ಷನ್ ಗಳನ್ನು ಸೇರಿಸುತ್ತೇವೆ: ನೈಜ ಡ್ರ್ಯಾಗಿಂಗ್ ಚಲನೆ ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ಡ್ರ್ಯಾಗ್ ನಿಲ್ಲಿಸಿದಾಗ ಸ್ವಚ್ಛಗೊಳಿಸುವುದು. ಈ ಫಂಕ್ಷನ್ ಗಳು ಒಟ್ಟಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಿ ನಿಮ್ಮ ಟೆರೇರೀಯಂನಲ್ಲಿ ಸಸ್ಯಗಳ ಮೃದು, ಸ್ಪಂದನಶೀಲ ಚಲನೆ ಸೃಷ್ಟಿಸುತ್ತವೆ.
+
+### elementDrag ಫಂಕ್ಷನ್: ಚಲನೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವುದು
+
+`pointerDrag` ನ ಮುಗಿಯುವ ಮುಂಬರುವ ಕದನ ಬೀಗಿನ ನಂತರ `elementDrag` ಫಂಕ್ಷನ್ ಅನ್ನು ಸೇರಿಸಿ:
+
+```javascript
+function elementDrag(e) {
+    // ಕೊನೆಯ ಘಟನೆದಿಂದ ಸರಿದ ದೂರವನ್ನು ಲೆಕ್ಕಹಾಕಿ
+    pos1 = pos3 - e.clientX;  // ಸಮತಲ ದೂರ ಸರಿದಿದೆ
+    pos2 = pos4 - e.clientY;  // ಲಂಬ ದೂರ ಸರಿದಿದೆ
+    
+    // ಪ್ರಸ್ತುತ ಸ್ಥಾನ ಟ್ರ್ಯಾಕಿಂಗ್ ನವೀಕರಿಸಿ
+    pos3 = e.clientX;  // ಹೊಸ ಪ್ರಸ್ತುತ X ಸ್ಥಾನ
+    pos4 = e.clientY;  // ಹೊಸ ಪ್ರಸ್ತುತ Y ಸ್ಥಾನ
+    
+    // ಏಳಿಯಿಂದ ಸ್ಥಾನದ ಮೇಲೆ ಚಲನವನ್ನು ಅನ್ವಯಿಸಿ
+    terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
+    terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
+}
+```
+
+**ಸ್ಥಾನ ಗಣಿತಗಳನ್ನು ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳುವುದು:**
+- **`pos1` ಮತ್ತು `pos2`**: ಕೊನೆಯ ನವೀಕರಣದ ನಂತರ ಎಷ್ಟು ಮೌಸ್ ಚಲಿಸಿದೆ ಎಂದು ಲೆಕ್ಕ ಹಾಕುವುದು
+- **`pos3` ಮತ್ತು `pos4`**: ಮುಂದಿನ ಲೆಕ್ಕಾಚಾರಕ್ಕಾಗಿ ಇತ್ತೀಚಿನ ಮೌಸ್ ಸ್ಥಾನವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ
+- **`offsetTop` ಮತ್ತು `offsetLeft`**: ಅಂಶದ ಪ್ರಸ್ತುತ ಸ್ಥಾನವನ್ನು ಪುಟದಲ್ಲಿ ಪಡೆಯುವುದು
+- **ಮುಖಾಂತರ ಮೈನಸ್ ಲಾಜಿಕ್**: ಅಂಶ ಮುವುದು ಮೌಸ್ ಚಲನೆಯಷ್ಟೇ ಪ್ರಮಾಣಕ್ಕೆ
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Mouse
+    participant JavaScript
+    participant Plant
+    
+    User->>Mouse: (100, 50) ರಲ್ಲಿ ಡ್ರ್ಯಾಗ್ ಪ್ರಾರಂಭಿಸಿ
+    Mouse->>JavaScript: pointerdown ಘಟನೆ
+    JavaScript->>JavaScript: ಪ್ರಾರಂಭಿಕ ಸ್ಥಾನವನ್ನು ಸಂಗ್ರಹಿಸಿ (pos3=100, pos4=50)
+    JavaScript->>JavaScript: ನಡಿಗೆ/ಅಪ್ ಶ್ರೋತೃಗಳನ್ನು ಹೊಂದಿಸಿ
+    
+    User->>Mouse: (110, 60) ಗೆ ನಡಿ
+    Mouse->>JavaScript: pointermove ಘಟನೆ
+    JavaScript->>JavaScript: ಲೆಕ್ಕಹಾಕಿ: pos1=10, pos2=10
+    JavaScript->>Plant: ನವೀಕರಿಸಿ: ಎಡ += 10px, ಮೇಲೆ += 10px
+    Plant->>Plant: ಹೊಸ ಸ್ಥಾನದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಿ
+    
+    User->>Mouse: (120, 65) ನಲ್ಲಿ ಬಿಡುಗಡೆ ಮಾಡಿ
+    Mouse->>JavaScript: pointerup ಘಟನೆ
+    JavaScript->>JavaScript: ಶ್ರೋತೃಗಳನ್ನು ತೆಗೆದುಹಾಕಿ
+    JavaScript->>JavaScript: ಮುಂದಿನ ಡ್ರ್ಯಾಗ್‌ಗಾಗಿ ಮರುಹೊಂದಿಸಿ
+```
+**ಇದೀಗ ಚಲನೆಯ ಲೆಕ್ಕಾಚಾರದ ತೊಂದರೆ:**
+1. **ಹಳೆ ಮತ್ತು ಹೊಸ ಮೌಸ್ ಸ್ಥಾನಗಳ ವ್ಯತ್ಯಾಸವನ್ನು ಗಾತ್ರಮಾಡುತ್ತದೆ**
+2. **ಮೌಸ್ ಚಲನೆಯ ಆಧಾರದಲ್ಲಿ ಅಂಶವನ್ನು ಎಷ್ಟು ಚಲಿಸಬೇಕು ಎಂದು ಲೆಕ್ಕಹಾಕುತ್ತದೆ**
+3. **ಅಂಶದ CSS ಸ್ಥಾನ ಲಕ್ಷಣಗಳನ್ನು ನಿಖರ-ಸಮಯದಲ್ಲಿ ನವೀಕರಿಸುತ್ತದೆ**
+4. **ಮುಂದಿನ ಚಲನೆಯ ಲೆಕ್ಕಾಚಾರದ ಆಧಾರದಾಗಿ ಹೊಸ ಸ್ಥಾನವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ**
+
+### ಗಣಿತದ ದೃಶ್ಯಾತ್ಮಕ ಪ್ರತಿನಿಧಾನ
+
+```mermaid
+sequenceDiagram
+    participant Mouse
+    participant JavaScript
+    participant Plant
+    
+    Mouse->>JavaScript: (100,50) ರಿಂದ (110,60) ಗೆ ಚಲಿಸು
+    JavaScript->>JavaScript: ಲೆಕ್ಕ ಮಾಡು: 10px ಬಲಕ್ಕೆ, 10px ಕೆಳಗೆ ಸರಿದಿದೆ
+    JavaScript->>Plant: ಸ್ಥಾನದ ನವೀಕರಣ +10px ಬಲಕ್ಕೆ, +10px ಕೆಳಗೆ
+    Plant->>Plant: ಹೊಸ ಸ್ಥಾನದಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಿ
+```
+### stopElementDrag ಫಂಕ್ಷನ್: ಸ್ವಚ್ಛತೆ ಮಾಡುವುದು
+
+`elementDrag` ನ ಮುಗಿಯುವ ಮುಂಬರುವ ಕದನ ಬೀಗಿನ ನಂತರ ಸ್ವಚ್ಛತೆ ಮಾಡುವ ಫಂಕ್ಷನ್ ಅನ್ನು ಸೇರಿಸಿ:
+
+```javascript
+function stopElementDrag() {
+    // ದಾಖಲೆ ಮಟ್ಟದ ಘಟನೆ ಕೇಳಿಸುವವರನ್ನು ತೆಗೆದುಹಾಕಿ
+    document.onpointerup = null;
+    document.onpointermove = null;
+}
+```
+
+**ಸ್ವಚ್ಛತೆ ಅಗತ್ಯವಿರುವ ಕಾರಣಗಳು:**
+- **ಮುಗಿಯದಂತಹ ಈವೆಂಟ್ ಶ್ರೋತರಿಂದ ನೆನಪು ದೋಣಿಯನ್ನು ತಡೆಯುತ್ತದೆ**
+- **ಬಳಕೆದಾರ ಸಸ್ಯವನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿದಾಗ ಡ್ರ್ಯಾಗಿಂಗ್ ನಿಲ್ಲಿಸುತ್ತದೆ**
+- **ಇತರ ಅಂಶಗಳು ಸ್ವತಂತ್ರವಾಗಿ ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾಗಿಸುತ್ತದೆ**
+- **ಮುಂದಿನ ಡ್ರ್ಯಾಗ್ ಕಾರ್ಯಾಚರಣೆಗೆ ವ್ಯವಸ್ಥೆಯನ್ನು ಪುನಃ ಸಂಯೋಜಿಸುತ್ತದೆ**
+
+**ಸ್ವಚ್ಛತೆ ಇಲ್ಲದಿದ್ದರೆ ಸಂಭವಿಸುವುದು:**
+- ಡ್ರ್ಯಾಗ್ ನಿಲ್ಲಿಸಿದ ನಂತರವೂ ಈವೆಂಟ್ ಶ್ರೋತರು ಚಲಿಸುತ್ತಿರುತ್ತಾರೆ
+- ಬಳಕೆಯಲ್ಲದ ಶ್ರೋತರು ಸ್ನಾಯು ಉಸಿರಾಟವನ್ನು ಕುಳಿತಿರುತ್ತವೆ
+- ಇತರ ಅಂಶಗಳು ಜೊತೆ ಸಂವಹನ ಮಾಡುವಾಗ ಅಸಾಮಾನ್ಯ ವರ್ತನೆಗಳು ಉಂಟಾಗುತ್ತವೆ
+- ಅನಗತ್ಯ ಈವೆಂಟ್ ನಿರ್ವಹಣೆಯಲ್ಲಿ ಬ್ರೌಸರ್ ಸಂಪನ್ಮೂಲಗಳು ವ್ಯರ್ಥವಾಗುತ್ತವೆ
+
+### CSS ಸ್ಥಾನ ಲಕ್ಷಣಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+
+ನಮ್ಮ ಡ್ರ್ಯಾಗ್ ವ್ಯವಸ್ಥೆ ಎರಡು ಪ್ರಮುಖ CSS ಲಕ್ಷಣಗಳನ್ನು ಸಂಚಾಲಿಸುತ್ತದೆ:
+
+| ಲಕ್ಷಣ | ಏನು ನಿಯಂತ್ರಿಸುತ್ತದೆ | ನಾವು ಹೇಗೆ ಬಳಸುತ್ತೇವೆ |
+|----------|------------------|---------------|
+| `top` | ಮೇಲ್ಭಾಗದ ಅಂಚಿನಿಂದ ದೂರ | ಡ್ರ್ಯಾಗ್ ಸಮಯದಲ್ಲಿ ಲಂಬ ಸ್ಥಾನಣಾಸು |
+| `left` | ಬಲ್ಭಾಗದ ಅಂಚಿನಿಂದ ದೂರ | ಡ್ರ್ಯಾಗ್ ಸಮಯದಲ್ಲಿ ಆಡುವಾಣಿನ ಸ್ಥಾನಣಾಸು |
+
+**offset ಲಕ್ಷಣಗಳ ಮುಖ್ಯ ಅಂಶಗಳು:**
+- **`offsetTop`**: ಸ್ಥಾನಿತ ಪೋಷಕ ಅಂಶದ ಮೇಲ್ಭಾಗದಿಂದ ಪ್ರಸ್ತುತ ದೂರ
+- **`offsetLeft`**: ಸ್ಥಾನಿತ ಪೋಷಕ ಅಂಶದ ಎಡಭಾಗದಿಂದ ಪ್ರಸ್ತುತ ದೂರ
+- **ಸ್ಥಾನ ನಿಯೋಜನೆ ಪ್ರ_CONTEXT_**: ಈ ಮೌಲ್ಯಗಳು ಹತ್ತಿರದ ಸ್ಥಾನಿತ ಪೂರ್ವಜರ יחסದಲ್ಲಿವೆ
+- **ನಿಖರ-ಸಮಯ ನವೀಕರಣಗಳು**: CSS ಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸಿದಾಗ ತಕ್ಷಣ ಬದಲಾವಣೆ ಸಂಭವಿಸುತ್ತದೆ
+
+> 🎯 **ಡಿಸೈನ್ ತತ್ವಗಳು**: ಈ ಡ್ರ್ಯಾಗ್ ವ್ಯವಸ್ಥೆ ಮನಃಪೂರ್ವಕವಾಗಿ ಲವಚಿಕವಾಗಿದೆ – ಇಲ್ಲಿಗೆ "ಡ್ರಾಪ್ ವಲಯಗಳು" ಅಥವಾ ನಿರ್ಬಂಧಗಳಿಲ್ಲ. ಬಳಕೆದಾರರುplantsಗಳನ್ನು ಎಲ್ಲೆಡೆ ಹೊಂಡಬಹುದು, ಈ ಮೂಲಕ ತಮ್ಮ ಟೆರೇರಿಯಂ ವಿನ್ಯಾಸದ ಮೇಲಿನ ಸೃಜನಾತ್ಮಕ ನಿಯಂತ್ರಣ ಸಂಪೂರ್ಣವಾಗಿ ದೊರೆಯುತ್ತದೆ.
+
+## ಎಲ್ಲವನ್ನೂ ಒಟ್ಟುಗೂಡಿಸುವುದು: ನಿಮ್ಮ ಪೂರ್ಣ ಡ್ರ್ಯಾಗ್ ವ್ಯವಸ್ಥೆ
+
+ಅಭಿನಂದನೆಗಳು! ನೀವು ಪೆÇಡವ ಇಡೀ ಡ್ರ್ಯಾಗ್-ಆಂಡ್-ಡ್ರಾಪ್ ವ್ಯವಸ್ಥೆಯನ್ನು ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ರಚಿಸಿದ್ದೀರಿ. ನಿಮ್ಮ ಪೂರ್ಣ `dragElement` ಫಂಕ್ಷನ್ ಈಗ ಶಕ್ತಿಶಾಲಿ ಕ್ಲೋಶರ್ ಅನ್ನು ಹೊಂದಿದ್ದು ನೀವೆಲ್ಲಾ ಸಸ್ಯಗಳ ಗುರುತಿನತೆಯಲ್ಲಿ ಖಾಸಗಿ ಸ್ಥಾನಗಳ ನಿಯಂತ್ರಣ ಮಾಡುತ್ತದೆ ಮತ್ತು ಇತರ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ:
+
+**ನಿಮ್ಮ ಕ್ಲೋಶರ್ ಸಾಧಿಸುವುದು:**
+- **ಪ್ರತಿಯೊಂದು ಸಸ್ಯಕ್ಕೆ ಖಾಸಗಿ ಸ್ಥಾನ ವ್ಯತ್ಯಯಗಳ ನಿರ್ವಹಣೆ**
+- **ಡ್ರ್ಯಾಗ್ ಜೀವನಚಕ್ರವನ್ನು ಪ್ರಾರಂಭದಿಂದ ಕೊನೆಯವರೆಗೆ ನಿರ್ವಹಣೆ**
+- **ಪೂರ್ಣ ಪರದೆ ಮೇಲೆ ಮೃದು, ಸ್ಪಂದನಶೀಲ ಚಲನೆಯನ್ನು ಒದಗಿಸುವುದು**
+- **ನೆನಪು ದೋಣಿಯ ಲೀಕ್ ತಡೆಯಲು ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸರಿಯಾಗಿ ಸ್ವಚ್ಛಗೊಳಿಸುವುದು**
+- **ಟೆರೇರಿಯಂ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಸ್ಪಷ್ಟ, ಸೃಜನಾತ್ಮಕ ಇಂಟರ್ಫೇಸ್ ಸೃಷ್ಟಿಸುವುದು**
+
+### ನಿಮ್ಮ ಸಂವೇದಿ ಟೆರೇರಿಯಂ ಪರೀಕ್ಷಿಸುವುದು
+
+ಈಗ ನಿಮ್ಮ ಸಂವೇದಿ ಟೆರೇರಿಯಂ ಪರೀಕ್ಷಿಸಿ! ನಿಮ್ಮ `index.html` ಫೈಲ್ ಅನ್ನು ವೆಬ್ ಬ್ರೌಸರ್ ನಲ್ಲಿ ತೆರೆಯಿರಿ ಮತ್ತು ಕಾರ್ಯಚಟುವಟಿಕೆಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ:
+
+1. **ಯಾವುದೇ ಸಸ್ಯವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಹಿಡಿದುಕೊಳ್ಳಿ** ಡ್ರ್ಯಾಗ್ ಪ್ರಾರಂಭಿಸಲು
+2. **ಮೌಸ್ ಅಥವಾ ಬೆರಳು ಚಲಿಸಿ** ಮತ್ತು ಸಸ್ಯವು ಮೃದುವಾಗಿ ಹಿಂಬಾಲಿಸುತ್ತಿರುವಂತೆ ವೀಕ್ಷಿಸಿ
+3. **ಬಿಡುಹಾಕಿ** ಸಸ್ಯವನ್ನು ಹೊಸ ಸ್ಥಾನದಲ್ಲಿ ಬಿಟ್ಟಿರಿ
+4. **ಬಿವಿಧ ವಿನ್ಯಾಸಗಳಲ್ಲಿ ಪ್ರಯೋಗ ಮಾಡಿ** ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಅನ್ವೇಷಿಸಲು
+
+🥇 **ಸಾಧನೆ**: ನೀವು ನಿತ್ಯವಾದ ಜವಾಬ್ದಾರಿಗಳು ಸಂಪಾದಕರ ಬಳಕೆಯ ಇಷ್ಟದ ಮೂಲಭೂತ ತತ್ವಗಳನ್ನು ಬೆಳಸುವ ಸಂಪೂರ್ಣ ಇಂಟರ್ಫೇಸ್ ಹೊಂದಬಹುದಾದ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸಿದ್ದೀರಿ. ಆ ಡ್ರ್ಯಾಗ್-ಆಂಡ್-ಡ್ರಾಪ್ ಕಾರ್ಯಕ್ಷಮತೆ ಫೈಲ್ ಅಪ್ಲೋಡ್ಗಳು, ಕಾಂಬನ್ ಬೋರ್ಡ್ಗಳು ಮತ್ತು ಇತರ ಸಂವೇದಿ ಇಂಟರ್ಫೇಸ್ಗಳ ಹಿನ್ನೆಲೆಯ ಪ್ರಥಮ ತತ್ವಗಳು ಹೀಗಿವೆ.
+
+### 🔄 **ಶিক্ষಣೀಯ ಪರಿಶೀಲನೆ**
+**ಪೂರ್ಣ ವ್ಯವಸ್ಥೆಯ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು**: ನಿಮ್ಮ ಡ್ರ್ಯಾಗ್ ವ್ಯವಸ್ಥೆಯ ಮೆಾಹಕತೆಯನ್ನು ಪರಿಶೀಲಿಸಿ:
+- ✅ ಪ್ರತಿ ಸಸ್ಯಕ್ಕಾಗಿ ಕ್ಲೋಶರ್ ಗಳು ಸ್ವತಂತ್ರ ಸ್ಥಿತಿಯನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತವೆ?
+- ✅ ಮೃದು ಚಲನಕ್ಕೆ ಸಮನ್ವಯ ಲೆಕ್ಕಾಚಾರದ ಗಣಿತ ಅಗತ್ಯವಿರುವುದು ಏಕೆ?
+- ✅ ಈವೆಂಟ್ ಶ್ರೋತರನ್ನು ಸ್ವಚ್ಛಗೊಳ್ಳುವುದನ್ನು ಧರಿಗೆ ತೋರದೇ ಇದ್ದರೆ ಏನಾಗುತ್ತದೆ?
+- ✅ ಈ ಮಾದರಿಯನ್ನು ಇನ್ನಷ್ಟು ಸಂಕೀರ್ಣ ಸಂವಹನಕ್ಕೆ ಹೇಗೆ ವಿಸ್ತರಿಸಬಹುದು?
+
+**ಕೋಡ್ ಗುಣಮಟ್ಟದ ಚಿಂತನೆ**: ನಿಮ್ಮ ಪೂರ್ಣ ಪರಿಹಾರವನ್ನು ವಿಮರ್ಶಿಸಿ:
+- **ಮಾಡ್ಯುಲರ್ ವಿನ್ಯಾಸ**: ಪ್ರತಿ ಸಸ್ಯಕ್ಕೆ ಸ್ವಂತ ಕ್ಲೋಶರ್ ಇನ್ಸ್ಟಾನ್ಸ್ ನೀಡಲಾಗಿದೆ
+- **ಈವೆಂಟ್ ಕಾರ್ಯಕ್ಷಮತೆ**: ಶ್ರೋತrohಗಳನ್ನು ಸರಿಯಾಗಿ ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಸ್ವಚ್ಛಗೊಳಿಸುವಿಕೆ
+- **ಕ್ರಾಸ್-ಡಿವೈಸ್ ಬೆಂಬಲ**: ಡೆಸ್ಕ್ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್ ಎರಡರಲ್ಲೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
+- **ಕಾರ್ಯಕ್ಷಮತೆಯ ವಿವರವಾದ ಶ್ರದ್ಧೆ**: ನೆನಪು ಲೀಕ್ ಅಥವಾ ಅನವಶ್ಯಕ ಲೆಕ್ಕಾಚಾರ ಇಲ್ಲ
+
+![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.kn.png)
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ಈ ಕೆಳಗಿನ ಚಾಲೆಂಜ್ ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಅನ್ನು ಬಳಸಿರಿ:
+
+**ವರಣೆ:** ಟೆರೇರಿಯಂ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸುಧಾರಿಸಿ, ಎಲ್ಲ ಸಸ್ಯಗಳನ್ನು ಮೂಲ ಸ್ಥಾನದ ಬಳಿ ಮೃದು ಅನಿಮೇಷನ್ ಗಳೊಂದಿಗೆ ಮರುಹೊಂದಿಸುವ ಮರುಹೊಂದಿಸುವ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸೇರಿಸಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಮರುಹೊಂದಿಸುವ ಬಟನ್ ಅನ್ನು ರಚಿಸಿ, ಅದು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಎಲ್ಲಾ ಸಸ್ಯಗಳನ್ನು CSS ಟ್ರಾನ್ಸಿಷನ್ ಗಳ ಮೂಲಕ ಮೂಲ ಬದಿಯ ಸ್ಥಾನಗಳಿಗೆ 1 ಸೆಕೆಂಡ್ ಗೊಳಿಸಿ ಮೃದು ಅನಿಮೇಟು ಮಾಡಿ ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಫಂಕ್ಷನ್ ಪುಟ ಲೋಡ್ ಆಗುವ ಸಮಯದಲ್ಲಿ ಮೂಲ ಸ್ಥಾನಗಳನ್ನು ಸಂಗ್ರಹಿಸಬೇಕು.
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗೆ.
+
+## 🚀 ಹೆಚ್ಚುವರಿ ಚಾಲೆಂಜ್: ನಿಮ್ಮ ಕೌಶಲಗಳನ್ನು ವಿಸ್ತರಿಸಿ
+
+ನಿಮ್ಮ ಟೆರೇರಿಯಂ ನ ಮುಂದುವರಿಸುವ ಸಿದ್ಧತೆ ಇದ್ದರೆ ಈ ಸುಧಾರಣೆಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ:
+
+**ಸೃಜನಾತ್ಮಕ ವಿಸ್ತರಣೆಗಳು:**
+- **ಡಬಲ್ ಕ್ಲಿಕ್** ಮಾಡಿ ಸಸ್ಯವನ್ನು ಮುಂಭಾಗಕ್ಕೆ (z-ಇಂಡೆಕ್ಸ್ ಉಪಕ್ರಮ)
+- **ಹೋವರ್ ಮಾಡುವಾಗ ಹರಿದೊಳಗಿನ ಪ್ರಭೆಯನ್ನು** ಸೇರಿಸಿ
+- **ಟೆರೇರಿಯಂ ಹೊರಗೆ ಸಸ್ಯಗಳನ್ನು ಡ್ರ್ಯಾಗ್ ಮಾಡದಂತೆ** ಸೀಮಿತಗೊಳಿಸಿ
+- **ಸ್ಥಾನಗಳನ್ನು localStorage ಬಳಸಿ ಉಳಿಸುವ ಸೇಫ್ ಫಂಕ್ಷನ್ ರಚಿಸಿ**
+- **ಸಸ್ಯಗಳನ್ನು ಎತ್ತಲು ಮತ್ತು ಹಾಕಲು ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ**
+
+> 💡 **ಕಲಿಕೆ ಅವಕಾಶ**: ಈ ಪ್ರತಿಯೊಂದು ಚಾಲೆಂಜ್ ಡಿಒಎಂ ಸಂಚಾಲನೆ, ಈವೆಂಟ್ ನಿರ್ವಹಣೆ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸದ ಹೊಸ ಆಯಾಮಗಳನ್ನು ಕಲಿಸುತ್ತದೆ.
+
+## ಪಾಠೋತ್ತರ ಕ್ವಿಜ್
+
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/20)
+
+## ಪರಿಗಣನೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ: ನಿಮ್ಮ ತಿಳಿವಳಿಕೆಯನ್ನು ಆಳಗೊಳಿಸುವುದು
+
+ನೀವು ಡಿಒಎಂ ಸಂಚಾಲನೆ ಮತ್ತು ಕ್ಲೋಶರ್ ಗಳ ಮೂಲಭೂತಗಳನ್ನು ನಿಭಾಯಿಸಿದ್ದೀರಿ, ಆದರೆ ಇನ್ನೂ ಅನೇಕ ವಿಷಯಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಇದೆ! ನಿಮ್ಮ ಜ್ಞಾನ ಮತ್ತು ಕೌಶಲ್ಯಗಳನ್ನು ವಿಸ್ತರಿಸಲು ಕೆಲವು ಮಾರ್ಗಗಳು ಇಲ್ಲಿವೆ.
+
+### ಪರ್ಯಾಯ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ವಿಧಾನಗಳು
+
+ನಾವು ಗರಿಷ್ಟ ಲವಚಿಕತೆಗೆ ಪಾಯಿಂಟರ್ ಈವೆಂಟ್ ಗಳನ್ನು ಬಳಸಿದ್ದೇವೆ, ಆದರೆ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ವಿವಿಧ ವಿಧಾನಗಳಿವೆ:
+
+| ವಿಧಾನ | ಉತ್ತಮದಲ್ಲಿ | ಕಲಿಕೆಯಲ್ಲಿ ಮೌಲ್ಯ |
+|----------|----------|----------------|
+| [HTML ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳು, ಅಧಿಕೃತ ಡ್ರ್ಯಾಗ್ ವಲಯಗಳು | ಸರ್ವಜ್ಞ ಬ್ರೌಸರ್ ಸಾಮರ್ಥ್ಯಗಳ ಅರಿವು |
+| [ಟಚ್ ಈವೆಂಟ್ಗಳು](https://developer.mozilla.org/docs/Web/API/Touch_events) | ಮೊಬೈಲ್ ವಿಶೇಷ ಸಂವಹನ | ಮೊಬೈಲ್-ಫಸ್ಟ್ ಅಭಿವೃದ್ಧಿ ಮಾದರಿ |
+| CSS `transform` ಲಕ್ಷಣಗಳು | ಸವಿದ ಅನಿಮೇಷನ್ಗಳು | ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ ತಂತ್ರಗಳು |
+
+### ಅಭಿವೃದ್ಧಿಶೀಲ DOM ಸಂಚಾಲನೆ ವಿಷಯಗಳು
+
+**ನಿಮ್ಮ ಅಧ್ಯಯನದ ಮುಂದಿನ ಹಂತಗಳು:**
+- **ಈವೆಂಟ್ ಬಲವಾದ ನಿಯೋಜನೆ**: ಬಹು ಅಂಶಗಳಿಗೆ ಈವೆಂಟ್‌ಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ಇಳಿಸುವುದು
+- **ಇಂಟರ್ಸೆಕ್ಷನ್ ಅಬ್ಜರ್ವರ್**: ಅಂಶಗಳು ವೀಕ್ಷಣಾ ವೀಕ್ಷಣೆಯ ಒಳಗೆ/ಹೊರಗೆ ಆಗುವಾಗ ಪತ್ತೆ ಹಚ್ಚುವುದು
+- **ಮ್ಯುಟೇಷನ್ ಅಬ್ಜರ್ವರ್**: DOM ರಚನೆ ಬದಲಾವಣೆಗಳ ಮೇಲೆ ನೋಟವಿಡುವದು
+- **ವೆಬ್ ಕಾಂಪೋನಂಟ್‌ಗಳು**: ಪುನರುಪಯೋಗ ಮಾಡಬಹುದಾದ, ಅಂಕಿತ UI ಅಂಶಗಳನ್ನು ಸೃಷ್ಟಿಸುವುದು
+- **ವರ್ಚುವಲ್ DOM ತತ್ವಗಳು**: ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು DOM ನ ನವೀಕರಣಗಳನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತವೆ ಎಂಬ ಅರ್ಥ
+
+### ಮುಂದುವರಿದ ಕಲಿಕೆಗೆ ಅಗತ್ಯ ಸಂಪನ್ಮೂಲಗಳು
+
+**ತಾಂತ್ರಿಕ ದಾಖಲಾತಿಗಳು:**
+- [MDN ಪಾಯಿಂಟರ್ ಈವೆಂಟ್ ಗೈಡ್](https://developer.mozilla.org/docs/Web/API/Pointer_events) - ಸಂಪೂರ್ಣ ಸೂಚನೆ
+- [W3C ಪಾಯಿಂಟರ್ ಈವೆಂಟ್ ಸ್ಪೆಸಿಫಿಕೇಶನ್](https://www.w3.org/TR/pointerevents1/) - ಅಧಿಕೃತ ಮಾನದಂಡಗಳು
+- [ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕ್ಲೋಶರ್ಸ್ ಆಳವಾದ ಅಧ್ಯಯನ](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - ಪ್ರಗತಿಶೀಲ ಕ್ಲೋಶರ್ ಮಾದರಿಗಳು
+
+**ಬ್ರೌಸರ್ ಅನುಕೂಲತೆ:**
+- [CanIUse.com](https://caniuse.com/) - ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ವೈಶಿಷ್ಟ್ಯಗಳ ಬೆಂಬಲ
+- [MDN ಬ್ರೌಸರ್ ಅನುಕೂಲತೆ ಡೇಟಾ](https://github.com/mdn/browser-compat-data) - ವಿವರವಾದ ಸಹಾಯ
+
+**ಅಭ್ಯಾಸ ಅವಕಾಶಗಳು:**
+- **ಸರಿಹೊಂದಿದ ಡ್ರ್ಯಾಗ್ ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಪಜಲ್ ಆಟ ನಿರ್ಮಿಸಿ**
+- **ಡ್ರ್ಯಾಗ್-ಆಂಡ್-ಡ್ರಾಪ್ ಟಾಸ್ಕ್ ನಿರ್ವಹಣೆಯ ಕನಬಾನ್ ಬೋರ್ಡ್ ರಚಿಸಿ**
+- **ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ ಫೋಟೋಗಳೊಂದಿಗೆ ಚಿತ್ರ ಗ್ಯಾಲರಿ ವಿನ್ಯಾಸಗೊಳಿಸಿ**
+- **ಮೊಬೈಲ್ ಇಂಟರ್ಫೇಸ್ಗಾಗಿ ಟಚ್ ಇಶಾರೆಗಳನ್ನು ಪ್ರಯೋಗಿಸಿ**
+
+> 🎯 **ಕಲಿಕೆಯಲ್ಲಿ ತಂತ್ರ**: ಈ ತತ್ವಗಳನ್ನು ಬಲಪಡಿಸಲು ಉತ್ತಮ ಮಾರ್ಗ ಅಭ್ಯಾಸ. ವಿವಿಧ ಡ್ರ್ಯಾಗ್‌ಗಾಗಿ ಇಂಟರ್ಫೇಸ್‌ಗಳ ನಿರ್ಮಾಣ ಪ್ರಯತ್ನಿಸಿ – ಪ್ರತಿಯೊಂದು ಪ್ರಾಜೆಕ್ಟ್ ಬಳಕೆದಾರ ಸಂವಹನ ಮತ್ತು DOM ಸಂಚಾಲನೆ ಬಗ್ಗೆ ಹೊಸ ಮಾಹಿತಿ ಕಲಿಸುತ್ತದೆ.
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು**
+- [ ] ಬ್ರೌಸರ್ ಡೆವ್‌ಟೂಲ್ಗಳನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಕಾಂಸೋಲ್‌ನಲ್ಲಿ `document.querySelector('body')` ಅನ್ನು ಟೈಪ್ ಮಾಡಿ
+- [ ] `innerHTML` ಅಥವಾ `textContent` ಬಳಸಿ ವೆಬ್‌ಪೇಜ್ ಸTek Ghedತಿಪ್ಪಣಿ ಬದಲಾಯಿಸಿ
+- [ ] ಯಾವುದೇ ಬಟನ್ ಅಥವಾ ಲಿಂಕ್‌ಗೆ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಶ್ರೋತ ಸೇರಿಸಿ
+- [ ] ಎಲೆಮಿಂಟ್‌ಗಳ ಪ್ಯಾನೆಲ್ ಬಳಸಿ DOM ಻್ರಿಗೆ ರಚನೆಯನ್ನು ಪರಿಶೀಲಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಏನು ಸಾಧಿಸಬಹುದು**
+- [ ] ಪಾಠ ಮುಗಿದ ನಂತರ ಕುಯಿಜ್ ಮಾಡಿ ಮತ್ತು DOM ಸಂಚಾಲನೆ ತತ್ವಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+- [ ] ಬಳಕೆದಾರ ಕ್ಲಿಕ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಸಂವೇದಿ ವೆಬ್‌ಪುಟವನ್ನು ರಚಿಸಿ
+- [ ] ಬಗೆಬಗೆಯ ಈವೆಂಟ್‌ಗಳೊಂದಿಗೆ ಈವೆಂಟ್ ನಿರ್ವಹಣೆಯನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ (ಕ್ಲಿಕ್, ಮೌಸ್‌ಓವರ್, ಕೀಪ್ರೆಸ್)
+- [ ] ಸರಳ ಟು-ಡೂ ಪಟ್ಟಿ ಅಥವಾ ಕೋಂಟರ್ ಅನ್ನು DOM ಸಂಚಾಲನೆ ಬಳಸಿ ನಿರ್ಮಿಸಿ
+- [ ] HTML ಅಂಶಗಳು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಸ್ತುಗಳ ನಡುವಿನ ಸಂಬಂಧವನ್ನು ಅನ್ವೇಷಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪಯಣ**
+- [ ] ಡ್ರ್ಯಾಗ್-ಆಂಡ್-ಡ್ರಾಪ್ ಕಾರ್ಯಕ್ಷಮತೆಯೊಂದಿಗೆ ಸಂವೇದಿ ಟೆರೇರಿಯಂ ಪ್ರಾಜೆಕ್ಟ್ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಸಮರ್ಥವಾದ ಈವೆಂಡ್ ನಿರ್ವಹಣೆಗೆ ಈವೆಂಟ್ ನಿಯೋಜನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ಈವೆಂಟ್ ಲೂಪ್ ಮತ್ತು ಅಸಿಂಕ್ರೊನಸ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಲಿಯಿರಿ
+- [ ] ಖಾಸಗಿ ಸ್ಥಿತಿಯೊಂದಿಗೆ ಮಾಡ್ಯುಲ್ ನಿರ್ಮಾಣಕ್ಕಾಗಿ ಕ್ಲೋಶರ್ ಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] ಇಂಟರ್ಸೆಕ್ಷನ್ ಅಬ್ಜರ್ವರ್ ಮುಂತಾದ ಆಧುನಿಕ DOM API ಗಳನ್ನು ಅನ್ವೇಷಿಸಿ
+- [ ] ಫ್ರೇಂವರ್ಕ್‌ಗಳನ್ನು ಬಳಸದೆ ಸಂವೇದಿ ಅಂಶಗಳನ್ನು ನಿರ್ಮಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ಮಾಸ-ಲಾಂಗ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಸ್ಟರಿ**
+- [ ] ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಸಂಕೀರ್ಣ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಿ
+- [ ] ಆಧುನಿಕ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳನ್ನು (React, Vue ಅಥವಾ Angular) ಕಲಿಸಿ ಮತ್ತು ವೆನಿಲ್ಲಾ DOM ಜೊತೆಗೆ ಹೋಲಿಸಿ
+- [ ] ಓಪನ್ ಸೊರ್ಸ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ
+- [ ] ವೆಬ್ ಕಾಂಪೋನಂಟ್‌ಗಳು ಮತ್ತು ಕಸ್ಟಮ್ ಅಂಶಗಳಂತಹ ಪ್ರಗತಿಶೀಲ ತತ್ವಗಳನ್ನು ಹಾಳು ಮಾಡಿ
+- [ ] ಉತ್ತಮ DOM ಮಾದರಿಗಳೊಂದಿಗೆ ಕಾರ್ಯಕ್ಷಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ರೂಪಿಸಿರಿ
+- [ ] ಡಿಒಎಂ ಸಂಚಾಲನೆ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲತತ್ವಗಳ ಬಗ್ಗೆ ಇತರರಿಗೆ ಬೋಧನೆ ಮಾಡಿ
+
+## 🎯 ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡಿಒಎಂ ಮಾಸ್ಟರಿ ಸಮಯರೇಖೆ
+
+```mermaid
+timeline
+    title DOM & ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಲಿಕಾ ಪ್ರಗತಿ
+    
+    section ಆಧಾರ (15 ನಿಮಿಷಗಳು)
+        DOM ತಿಳುವಳಿಕೆ: ಅಂಶ ಆಯ್ಕೆ ವಿಧಾನಗಳು
+                      : ಮರ ರಚನೆ ನ್ಯಾವಿಗೇಶನ್
+                      : ಸ್ವತ್ತು ಪ್ರವೇಶ ಮಾದರಿಗಳು
+        
+    section ಘಟನೆ ನಿರ್ವಹಣೆ (20 ನಿಮಿಷಗಳು)
+        ಬಳಕೆದಾರ ಪರಸ್ಪರ ಕ್ರಿಯೆ: ಪಾಯಿಂಟರ್ ಘಟನೆ ಮೂಲಭೂತಗಳು
+                            : ಘಟನೆ ಶ್ರೋತೃ ಸ್ಥಾಪನೆ
+                            : ಕ್ರಾಸ್-ಡಿವೈಸ್ ಹೊಂದಾಣಿಕೆ
+                            : ಘಟನೆ ತಡೆಯುವ ತಂತ್ರಗಳು
+        
+    section ಕ್ಲೋಜರ್ಸ್ (25 ನಿಮಿಷಗಳು)
+        ವ್ಯಾಪ್ತಿಯ ನಿರ್ವಹಣೆ: ಖಾಸಗಿ ಚರ ಸರಚನೆ
+                        : ಫಂಕ್ಷನ್ ಸ್ಥಾಯಿತ್ವ
+                        : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ ಮಾದರಿಗಳು
+                        : ಮೆಮೊರಿ ಪರಿಣಾಮಕಾರಿತ್ವ
+        
+    section ಡ್ರಾಗ್ ಸಿಸ್ಟಮ್ (30 ನಿಮಿಷಗಳು)
+        ಪರಸ್ಪರ ಕ್ರಿಯಾತ್ಮಕ ವೈಶಿಷ್ಟ್ಯಗಳು: ಸಂಯೋಜನೆ ಹೂರಣಿಕೆ
+                                    : ಸ್ಥಾನ ಗಣನೆ
+                                    : ಚಲನೆ ಗಣಿತಶಾಸ್ತ್ರ
+                                    : ಶುದ್ಧೀಕರಣ ಪ್ರಕ್ರಿಯೆಗಳು
+        
+    section ಸುಧಾರಿತ ಮಾದರಿಗಳು (45 ನಿಮಿಷಗಳು)
+        ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು: ಘಟನೆ ನಿಯೋಜನೆ
+                           : ಕಾರ್ಯಕ್ಷಮತೆ максимум
+                           : ದೋಷ ನಿರ್ವಹಣೆ
+                           : ಪ್ರವೇಶ ಸಾಧ್ಯತೆ ಪರಿಗಣನೆ
+        
+    section ಫ್ರೇಮ್ವರ್ಕ್ ತಿಳುವಳಿಕೆ (1 ವಾರ)
+        ಆಧುನಿಕ ಅಭಿವೃದ್ಧಿ: ವರ್ಚುವಲ್ DOM ಪರಿಕಲ್ಪನೆಗಳು
+                         : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ ಗ್ರಂಥಾಲಯಗಳು
+                         : ಘಟಕ ವಾಸ್ತುಶಿಲ್ಪಗಳು
+                         : ನಿರ್ಮಾಣ ಸಾಧನ ಏಕೀಕರಣ
+        
+    section ಪರಿಣತ ಮಟ್ಟ (1 ತಿಂಗಳು)
+        ಸುಧಾರಿತ DOM API ಗಳು: ಇಂಟರ್ಸೆಕ್ಷನ್ ಅವಸರ
+                             : ಮ್ಯೂಟೇಶನ್ ಅವಸರ
+                             : ಕಸ್ಟಮ್ ಅಂಶಗಳು
+                             : ವೆಬ್ ಘಟಕಗಳು
+```
+### 🛠️ ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಟೂಲ್ಕಿಟ್ ಸಾರಾಂಶ
+
+ಈ ಪಾಠವನ್ನು ಮುಗಿಸಿದ ನಂತರ ಮತ್ತಷ್ಟು ಹೊಂದಿದ್ದೀರಿ:
+- **ಡಿಒಎಂ ಮಾಸ್ಟರಿ**: ಅಂಶ ಆಯ್ಕೆ, ಲಕ್ಷಣ ನಿರ್ವಹಣೆ ಮತ್ತು ಮರ ನವಿಗೇಷನ್
+- **ಈವೆಂಟ್ ಪರಿಣತಿ**: ಪಾಯಿಂಟರ್ ಈವೆಂಟ್ ಗಳೊಂದಿಗೆ ಕ್ರಾಸ್-ಡಿವೈಸ್ ಕ್ರಿಯೆಗಳು
+- **ಕ್ಲೋಶರ್ ಅರ್ಥ**: ಖಾಸಗಿ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ ಮತ್ತು ಫಂಕ್ಷನ್ ಸ್ಥಾಯಿತ್ವ
+- **ಸಂವೇದಿ ವ್ಯವಸ್ಥೆಗಳು**: ಮೊದಲಿನಿಂದ ಕೊನೆಯವರೆಗೆ ಪೂರ್ಣ ಡ್ರ್ಯಾಗ್-ಆನ್-ಡ್ರಾಪ್ ಅನುಷ್ಠಾನ
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಜಾಗೃತಿ**: ಸರಿಯಾದ ಈವೆಂಟ್ ಕ್ಲೀನ್ಅಪ್ ಮತ್ತು ನೆನಪು ನಿರ್ವಹಣೆ
+- **ಆಧುನಿಕ ಮಾದರಿಗಳು**: ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಬಳಸುವ ಕೋಡ್ ಸಂಘಟನೆ ತಂತ್ರಗಳು
+- **ಬಳಕೆದಾರ ಅನುಭವ**: ಸ್ಪಷ್ಟ, ಸ್ಪಂದನಶೀಲ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು
+
+**ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು ಗಳಿಸಿದಿರಿ**: ನೀವು ಈ ತಂತ್ರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಿ:
+- **Trello/ಕಾಂಬನ್ ಬೋರ್ಡ್‌ಗಳು**: ಕಾಲಮ್‌ಗಳ ಮಧ್ಯೆ ಕಾರ್ಡ್ ಡ್ರ್ಯಾಗ್
+- **ಫೈಲ್ ಅಪ್ಲೋಡ್ ವ್ಯವಸ್ಥೆಗಳು**: ಡ್ರ್ಯಾಗ್-ಆಂಡ್-ಡ್ರಾಪ್ ಫೈಲ್ ನಿರ್ವಹಣೆ
+- **ಚಿತ್ರ ಗ್ಯಾಲರಿ**: ಫೋಟೋ ವಿನ್ಯಾಸ ಇಂಟರ್ಫೇಸ್‌ಗಳು
+- **ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್ ಗಳು**: ಟಚ್ ಆಧಾರಿತ ಸಂವಹನ ಮಾದರಿಗಳು
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು React, Vue ಅಥವಾ Angular ಮುಂತಾದ ಆಧುನಿಕ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಸಿದ್ಧರಾಗಿದ್ದೀರಿ, ಇವು ಈ ಮೂಲ DOM ಸಂಚಾಲನೆ ತತ್ವಗಳ ಮೇಲೆ ಕಟ್ಟಲ್ಪಟ್ಟಿವೆ!
+
+## ಹುದ್ದೆ
+
+[ಡಿಒಎಂ ಜೊತೆ ಇನ್ನಷ್ಟು ಕೆಲಸ ಮಾಡಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**DISCLAIMER**:  
+ಈ ದಸ್ತಾವೇಜು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಖಚಿತತೆಯ ಕಡೆಗೆ ಶ್ರಮಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸಮರ್ಪಕತೆಗಳು ಕಂಡುಬರುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ದಸ್ತಾವೇಜಿನ ಮೂಲ ಭಾಷೆಯಾಗಿದೆ ಅಧಿಕೃತ ಮೂಲವಾಗಿರಬೇಕು. ಗಂಭೀರ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದ ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆಗಳಿಗೆ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/3-terrarium/3-intro-to-DOM-and-closures/assignment.md

@@ -0,0 +1,139 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
+  "translation_date": "2026-01-08T19:08:26+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "kn"
+}
+-->
+# DOM элемೆಂಟ್ ಪರಿಶೀಲನೆ ಅಸೈನ್ಮೆಂಟ್
+
+## ಅವಲೋಕನ
+
+ನೀವು ಈಗಾಗಲೇ DOM ವ್ಯವಸ್ಥಾಪನೆಯ ಶಕ್ತಿ ಅನುಭವಿಸಿದ್ದು, DOM ಇಂಟರ್ಫೇಸ್ಗಳ ವಿಶಾಲ ಜಗತ್ತನ್ನು ಅನ್ವೇಷಿಸುವ ಸಮಯ ಬಂದಿದೆ. ಈ ಅಸೈನ್ಮೆಂಟ್, ಕೇವಲ ಎಲೆಮೆಂಟ್‌ಗಳನ್ನು ಸೆಳೆಯುವುದನ್ನು ಮೀರಿ ವಿವಿಧ ವೆಬ್ ತಂತ್ರಜ್ಞಾನಗಳು DOM ಜೊತೆ ಹೇಗೆ ಸಂವಹನ ಮಾಡುತ್ತವೆ ಎಂಬುದರ ನಿಮ್ಮ ಅರಿವನ್ನು ಗಾಢಗೊಳಿಸುತ್ತದೆ.
+
+## ಅಧ್ಯಯನ ಉದ್ದೇಶಗಳು
+
+ಈ ಅಸೈನ್ಮೆಂಟ್ ಪೂರ್ಣಗೊಳಿಸುವ ಮೂಲಕ ನೀವು:
+- **ಶೋಧನೆ** ಮಾಡಿ ನಿರ್ದಿಷ್ಟ DOM ಇಂಟರ್ಫೇಸ್ನ ದಾಳಿದೃಷ್ಟಿ ಪಡೆಯುತ್ತೀರಿ
+- **ವಿಶ್ಲೇಷಣೆ** ಮಾಡಿ DOM ವ್ಯವಸ್ಥಾಪನೆಯ ನೈಜ ಜಾಗತಿಕ ಅನುಷ್ಠಾನಗಳನ್ನು
+- **ಸಂಪರ್ಕಿಸಲು** ಸಿದ್ಧಾಂತಾತ್ಮಕ ತತ್ವಗಳನ್ನು ವ್ಯವಹಾರಿಕ ಅನ್ವಯಗಳಿಗೆ
+- **ಅಭಿವೃದ್ಧಿಪಡಿಸಲು** ತಾಂತ್ರಿಕ ದಾಖಲೆಗೈದಿಕತೆ ಮತ್ತು ವಿಶ್ಲೇಷಣೆಯಲ್ಲಿ ಕೌಶಲ್ಯಗಳನ್ನು
+
+## ಸೂಚನೆಗಳು
+
+### ಹಂತ 1: ನಿಮ್ಮ DOM ಇಂಟರ್ಫೇಸ್ ಆಯ್ಕೆಮಾಡಿ
+
+MDN ನ ವಿಸ್ತೃತ [DOM ಇಂಟರ್ಫೇಸ್ ಪಟ್ಟಿ](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) ಭೇಟಿ ನೀಡಿ ಮತ್ತು ಆಸಕ್ತಿಯ ಇಂಟರ್ಫೇಸ್ ಆಯ್ಕೆಮಾಡಿ. ನಮೂದಿಸಿದ ವರ್ಗಗಳಿಂದ ಆಯ್ಕೆ ಮಾಡುವುದು ವಿಭಿನ್ನತೆಗಾಗಿ ಪರಿಗಣಿಸಿ:
+
+**ಆರಂಭಿಕರಿಗೆ ಅನುಕೂಲಕರ ಆಯ್ಕೆಗಳು:**
+- `Element.classList` - CSS ಕ್ಲಾಸುಗಳನ್ನು ಗತಿಶೀಲವಾಗಿ ನಿರ್ವಹಣೆ
+- `Document.querySelector()` - ಉನ್ನತ ಎಲೆಮೆಂಟ್ ಆಯ್ಕೆ
+- `Element.addEventListener()` - ಪಾಯಿಂಟರ್ ಘಟನೆಗಳೆ ಇತರ ಘಟನೆಗಳನ್ನು ನಿರ್ವಹಣೆ
+- `Window.localStorage` - ಕ್ಲಯಿಂಟ್-ಸೈಡ್ ಡೇಟಾ ಸಂಗ್ರಹಣೆ
+
+**ಮಧ್ಯಮ ಮಟ್ಟದ ಸವಾಲುಗಳು:**
+- `Intersection Observer API` - ಎಲೆಮೆಂಟ್ ದೃಶ್ಯಮಾನತೆಯನ್ನು ಕಂಡುಹಿಡಿಯುವುದು
+- `MutationObserver` - DOM ಬದಲಾವಣೆಗಳ ಮೇಲ್ವಿಚರಣೆ
+- `Drag and Drop API` - ನಮ್ಮ ಪಾಯಿಂಟರ್ ಆಧಾರಿತ ವಿಧಾನಕ್ಕೆ ಪರ್ಯಾಯ
+- `Geolocation API` - ಬಳಕೆದಾರ ಸ್ಥಳವನ್ನು ಪಡೆಯುವುದು
+
+**ಆಧುನಿಕ ಅನ್ವೇಷಣೆ:**
+- `Web Components` - ಕಸ್ಟಂ ಎಲೆಮೆಂಟ್‌ಗಳು ಮತ್ತು ಛಾಯಲ್ಪದ DOM
+- `Canvas API` - ಪ್ರೋಗ್ರಾಮ್ಮ್ಯಾಟಿಕ್ ಗ್ರಾಫಿಕ್ಸ್
+- `Web Workers` - ಹಿನ್ನೆಲೆ ಪ್ರোসೆಸಿಂಗ್
+- `Service Workers` - ಆಫ್‌ಲೈನ್ ಕಾರ್ಯಕ್ಷಮತೆ
+
+### ಹಂತ 2: ಶೋಧನೆ ಮತ್ತು ದಾಖಲೆ ತಯಾರಿಸಿ
+
+300-500 ಪದಗಳ ವಿವರವಾದ ವಿಶ್ಲೇಷಣೆಯನ್ನು ರಚಿಸಿ, ಇದರಲ್ಲಿ ಒಳಗೊಂಡಿರಲಿ:
+
+#### ತಾಂತ್ರಿಕ ಅವಲೋಕನ
+- ನೀವು ಆಯ್ಕೆಮಾಡಿದ ಇಂಟರ್ಫೇಸ್ ಏನನ್ನು ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ, ಆರಂಭಿಕರಿಗೆ ಅನುಕೂಲಕರ ಭಾಷೆಯಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಿ
+- ಒದಗಿಸುವ ಪ್ರಮುಖ ವಿಧಾನಗಳು, ಗುಣಲಕ್ಷಣಗಳು, ಅಥವಾ ಘಟನೆಗಳನ್ನು ವಿವರಿಸಿ
+- ಅದು ಪರಿಹರಿಸುವ ಪ್ರಕಾರದ ಸಮಸ್ಯೆಗಳನ್ನು ವರ್ಣಿಸಿ
+
+#### ನೈಜ ಜಾಗತಿಕ ಅನುಷ್ಠಾನ
+- ನಿಮ್ಮ ಆಯ್ಕೆ ಇಂಟರ್ಫೇಸ್ ಬಳಕೆಮಾಡಿರುವ ವೆಬ್‌ಸೈಟ್ ಕಂಡುಹಿಡಿಯಿರಿ (ಕೋಡ್ ಪರಿಶೀಲನೆ ಅಥವಾ ಉದಾಹರಣೆಗಳ ಶೋಧನೆ)
+- ಸಾಧ್ಯವಿದ್ದರೆ ಕೋಡ್ ತುಣುಕುಗಳೊಂದಿಗೆ ನಿರ್ದಿಷ್ಟ ಅನುಷ್ಠಾನವನ್ನು ದಾಖಲಿಸಿ
+- ಡೆವಲಪರ್‌ಗಳು ಈ ವಿಧಾನವನ್ನು ಯಾಕೆ ಆಯ್ಕೆಮಾಡಿದ್ದಾರೆ ಎಂಬುದನ್ನು ವಿಶ್ಲೇಷಿಸಿ
+- ಇದು ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತದೆ ಎಂದು ವಿವರಿಸಿ
+
+#### ವ್ಯವಹಾರಿಕ ಅನ್ವಯ
+- ನಿಮ್ಮ ಇಂಟರ್ಫೇಸನ್ನು ತೆರಾರಿಯಂ ಪ್ರಾಜೆಕ್ಟನಲ್ಲಿ ನಾವು ಬಳಸಿದ ತಂತ್ರಗಳಿಗೆ ಹೋಲಿಸಿ
+- ನಿಮ್ಮ ಇಂಟರ್ಫೇಸ್ನಿಂದ ತೆರಾರಿಯಂ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೇಗೆ ಸುಧಾರಿಸಬಹುದು ಅಥವಾ ವಿಸ್ತರಿಸಬಹುದು ಎಂಬ ಸಲಹೆ ನೀಡಿ
+- ಈ ಇಂಟರ್ಫೇಸ್ ಉಪಯುಕ್ತವಾಗಬಹುದಾದ ಇತರ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು ಗುರುತಿಸಿ
+
+### ಹಂತ 3: ಕೋಡ್ ಉದಾಹರಣೆ
+
+ನಿಮ್ಮ ಇಂಟರ್ಫೇಸ್ ಕೆಲಸನಿರ್ವಹಣೆಯನ್ನು ತೋರಿಸುವ ಸರಳ, ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಕೋಡ್ ಉದಾಹರಣೆಯನ್ನು ಒಳಗೊಂಡಿರಲಿ. ಇದು:
+- **ಕಾರ್ಯನಿರ್ವಹಿಸುವುದು** - ಪರೀಕ್ಷಿಸಲಿದೆ ಸಮಯ 코드는 ನಿಜವಾಗಿಯೂ ಕಾರ್ಯನಿರ್ವಹಿಸಬೇಕು
+- **ಕಾಮೆಂಟುಗಳೊಂದಿಗೆ** - ಪ್ರತಿ ಭಾಗ ಏನು ಮಾಡುತ್ತದೆ ಎಂದು ವಿವರಿಸಿ
+- **ಸಂಬಂಧಿಸಿದ** - ಪ್ರಾಯೋಗಿಕ ಬಳಕೆಗೆ ಸಂಪರ್ಕ ಹೊಂದಿದ್ದಿರಲಿ
+- **ಆರಂಭಿಕರಿಗೆ ಅನುಕೂಲಕರ** - ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಅಧ್ಯಯನ ಮಾಡುತ್ತಿದ್ದವರಿಗೂ ಅರ್ಥವಾಗುವಂತೆ ಇರಲಿ
+
+## ಸಲ್ಲಿಕೆಯ ವಿನ್ಯಾಸ
+
+ನಿಮ್ಮ ಸಲ್ಲಿಕೆಯನ್ನು ಸ್ಪಷ್ಟ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ ರಚಿಸಿ:
+
+```markdown
+# [Interface Name] DOM Investigation
+
+## What It Does
+[Technical overview]
+
+## Real-World Example
+[Website analysis and implementation details]
+
+## Code Demonstration
+[Your working example with comments]
+
+## Reflection
+[How this connects to our terrarium project and future applications]
+```
+
+## ಮೌಲ್ಯಮಾಪನ ಕರಕಟ
+
+| ಮಾನದಂಡ | ಔತಣ (A) | ನಿಪುಣ (B) | ಅಭಿವೃದ್ದಿಗೊಳ್ಳುತ್ತಿರೋ (C) | ಸುಧಾರಣೆಯ ಅಗತ್ಯ (D) |
+|----------|-----------|------------|----------------|--------------------|
+| **ತಾಂತ್ರಿಕ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ** | ಖಚಿತ ವಿವರಣೆಗಳು ಮತ್ತು ಸರಿಯಾದ ಪ/rem ಉಪಯೋಗಗಳೊಂದಿಗೆ ಆಳವಾದ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ ತೋರಿಸುತ್ತದೆ | ಬಹುಮತವಾಗಿ ಸರಿಯಾದ ವಿವರಣೆಗಳೊಂದಿಗೆ ಉತ್ತಮ ಅರ್ಥಪಟುತನ ತೋರಿಸುತ್ತದೆ | ಬೇಸಿಕ್ ಅರ್ಥಪಟುತನ ಕಾರಣ ಕೆಲವು ಗಡಿಬಿಡಿಗಳು | ಪ್ರಮುಖ ದೋಷಗಳೊಂದಿಗೆ ಸೀಮಿತ ಅರ್ಥಪಟುತನ |
+| **ನೈಜ ಜಾಗತಿಕ ವಿಶ್ಲೇಷಣೆ** | ನೈಜ ಅನುಷ್ಠಾನದ ವಿಶೇಷ ಉದಾಹರಣೆಗಳನ್ನು ಗುರುತಿಸಿ ಮತ್ತು ಸಂಪೂರ್ಣ ವಿಶ್ಲೇಷಣೆ ಮಾಡುತ್ತದೆ | ಪರ್ಯಾಯ ವಿಶ್ಲೇಯನದೊಂದಿಗೆ ನೈಜ ಉದಾಹರಣೆಯನ್ನು ಕಂಡುಹಿಡಿಯುತ್ತದೆ | ಉದಾಹರಣೆ ಕಂಡುಹಿಡಿದರೂ, ವಿಶ್ಲೇಷಣೆ ಆಳದಲ್ಲಿಲ್ಲ | ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಪಷ್ಟವಿಲ್ಲದ ಅಥವಾ ತಪ್ಪು ನೈಜ ಜಾಗತಿಕ ಸಂಪರ್ಕ |
+| **ಕೋಡ್ ಉದಾಹರಣೆ** | ಕಾರ್ಯನಿರ್ವಹಣೆಯಾದ, ಚೆನ್ನಾಗಿ ಕಾಮೆಂಟ್ ಮಾಡಿದ ಕೋಡ್ ಇಂಟರ್ಫೇಸ್ ಸೃಷ್ಟಿ ಮಾಡುತ್ತದೆ | ಸಮರ್ಪಕ ಕಾಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಕೋಡ್ | ಕೋಡ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಆದರೆ ಡಾಕ್ಯುಮೆಂಟೇಷನ್ ಉತ್ತಮವಾಗಿರಬೇಕು | ಕೋಡ್ ಎರರ್‌ಗಳಿರುವ ಅಥವಾ ಅಪರಿಚ್ಛೇದ ವಿವರಣೆ |
+| **ಲೇಖನ ಗುಣಮಟ್ಟ** | ಸ್ಪಷ್ಟ, ಆಕರ್ಷಕ ಬರವಣಿಗೆ ಸರಿಯಾದ ವಿನ್ಯಾಸ ಹಾಗೂ ತಾಂತ್ರಿಕ ಸಂವಹನ | ಚೆನ್ನಾಗಿ ಸಂಘಟಿತ ಮತ್ತು ಉತ್ತಮ ತಾಂತ್ರಿಕ ಬರವಣಿಗೆ | ಸಮರ್ಪಕ ಸಂಘಟನೆ ಮತ್ತು ಸ್ಪಷ್ಟತೆ | ಬಡ ಸಂಘಟನೆ ಅಥವಾ ಅಸ್ಪಷ್ಟ ಸಂವಹನ |
+| **ವಿಚಾರಮಯವಾಗಿ ಚಿಂತಿಸುವಿಕೆ** | ತತ್ತ್ವಗಳ ನಡುವೆ ಸೊಗಸಾದ ಸಂಪರ್ಕವನ್ನು ಮಾಡುತ್ತದೆ ಮತ್ತು ನವೀನ ಅನ್ವಯಗಳನ್ನು ಸಲಹೆ ಮಾಡುತ್ತದೆ | ಉತ್ತಮ ವಿಶ್ಲೇಷಣಾತ್ಮಕ ಚಿಂತನೆ ಮತ್ತು ಪ್ರಸ್ತುತ ಸಂಬಂಧತೆ ತೋರಿಸುತ್ತದೆ | ಕೆಲವು ವಿಶ್ಲೇಷಣೆಗಳಿವೆ ಆದರೆ ಆಳವೇ ಇಲ್ಲ | ತೀವ್ರ ಚಿಂತನೆಯ ಲೋಪ |
+
+## ಯಶಸ್ಸಿನ ಸಲಹೆಗಳು
+
+**ಶೋಧನಾ ತಂತ್ರಗಳು:**
+- **ಶುರುಮಾಡಿ** MDN ಡಾಕ್ಯುಮೆಂಟೇಶನ್‌ನಿಂದ ಪ್ರಾಮಾಣಿಕ ಮಾಹಿತಿಗಾಗಿ
+- **ಹುಡುಕಿ** GitHub ಅಥವಾ CodePen ನಲ್ಲಿ ಕೋಡ್ ಉದಾಹರಣೆಗಳನ್ನ
+- **ಪರಿಶೀಲಿಸಿ** ಜನಪ್ರಿಯ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಸಾಧನಗಳ ಮೂಲಕ
+- **ನೋಡಿ** ವಿವರಾತ್ಮಕ ವಿಡಿಯೋ ಟ್ಯುಟೋರಿಯಲ್ಗಳೆಂದು
+
+**ಬರವಣಿಗೆ ಮಾರ್ಗಸೂಚಿಗಳು:**
+- **ಬಳಸಿ** ನಿಮ್ಮ ಸ್ವಂತ ಪದಗಳನ್ನು, ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ನಕಲಿಸದೇ
+- ** ಸೇರಿಸಿ** ವಿಶೇಷ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಕೋಡ್ ತುಣುಕುಗಳು
+- **ವಿವರಿಸಿ** ತಾಂತ್ರಿಕ ತತ್ವಗಳನ್ನು ಸ್ನೇಹಿತನಿಗೆ ಬೋಧಿಸುವಂತೆ
+- **ಸಂಪರ್ಕಿಸಿ** ನಿಮ್ಮ ಇಂಟರ್ಫೇಸ್ನನ್ನು ವಿಶಾಲ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ತತ್ವಗಳಿಗೆ
+
+**ಕೋಡ್ ಉದಾಹರಣೆ ಆಲೋಚನೆಗಳು:**
+- **ರಚಿಸಿ** ಇಂಟರ್ಫೇಸ್ಸ್ ಮುಖ್ಯ ಲಕ್ಷಣಗಳನ್ನು ತೋರಿಸುವ ಸರಳ ಡೆಮೊ
+- **ನಿರ್ಮಿಸಿ** ನಮ್ಮ ತೆರಾರಿಯಂ ಪ್ರಾಜೆಕ್ಟ್‌ನ ತತ್ವಗಳ ಮೇಲೆ
+- **ಗುರಿ** ಗತಿಶೀಲತೆಯನ್ನು ದೃಶ್ಯ ರಚನೆಯ ಮೇಲೆ ಇಡದೆ
+- **ಪರೀಕ್ಷಿಸಿ** ನಿಮ್ಮ ಕೋಡ್ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
+
+## ಸಲ್ಲಿಕೆಗೂಡುವ ಸಮಯ
+
+[ಇಲ್ಲಿ ಸಮಯನ್ನು ಸೇರಿಸಿ]
+
+## ಪ್ರಶ್ನೆಗಳಿವೆಯಾ?
+
+ಈ ಅಸೈನ್ಮೆಂಟ್ ಸಂಬಂಧ ಯಾವುದೇ ಸ್ಪಷ್ಟತೆ ಬೇಕಾದರೆ, ಕೇಳಲು ಹಿಂಜರಿಯಬೇಡಿ! ಈ ಪರಿಶೀಲನೆ DOM ಮೂಲಕ ಪ್ರತಿದಿನ ನಾವು ಬಳಸುವ ಪರಸ್ಪರಕಾರಿ ವೆಬ್ ಅನುಭವಗಳನ್ನು ಹೇಗೆ ಸಾಧ್ಯಮಾಡುತ್ತದೆ ಎಂಬುದರ ನಿಮ್ಮ ಅರಿವನ್ನು ಉನ್ನತಿಗೆ ಕರೆದೊಯ್ಯುತ್ತದೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಾಗಪತ್ರ**:  
+ಈ ದಸ್ತಾವೇಜು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾದದ್ದು. ನಾವು ನಿಖರತೆಯನ್ನು ಸಾಧಿಸಲು ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದೆಂದು ದಯವಿಟ್ಟು ಜಾಗರೂಕವಾಗಿರಿ. ಮೂಲೆ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅಧಿಕೃತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಘನ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದ ಬಳಕೆದಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪುಭಾವನೆಗಳಿಗೂ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/3-terrarium/README.md

@@ -0,0 +1,30 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bc5c5550f79d10add90ce419ee34abb3",
+  "translation_date": "2026-01-08T11:37:01+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "kn"
+}
+-->
+## ನಿಮ್ಮ ಟೆರೇರಿಯಂ ಅನ್ನು ನಿಯೋಜಿಸಿ
+
+ನೀವು ನಿಮ್ಮ ಟೆರೇರಿಯಂ ಅನ್ನು **ಆಜೂರು ಸ್ಥಿರ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಸ್** ಬಳಸಿ ವೆಬಿನಲ್ಲಿ ನಿಯೋಜಿಸಬಹುದು ಅಥವಾ ಪ್ರಕಟಿಸಬಹುದು.
+
+1. ಈ ರೆಪೋವನ್ನು ಫೋರ್ಕ್ ಮಾಡಿ
+
+2. ಈ ಬಟನ್ ಒತ್ತಿ 👇  
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+3. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸೃಷ್ಟಿಸಲು ಸೆಟ್ ಅಪ್ ವಿಜಾರ್ಡ್ ಅನುಸರಿಸಿ.  
+   - **ಆ್ಯಪ್ ರೂಟ್** ಅನ್ನು `/solution` ಅಥವಾ ನಿಮ್ಮ ಕೋಡ್ಬೇಸ್‌ನ ಮೂಲಕ್ಕೆ ಹೊಂದಿಸಿ.  
+   - ಈ ಆ್ಯಪ್‌ನಲ್ಲಿ ಯಾವುದೇ API ಇಲ್ಲ, ಆದ್ದರಿಂದ API ಕಾನ್ಫಿಗರೇಶನ್ ಮರೆಮಾಚಬಹುದು.  
+   - `.github` ಫೋಲ್ಡರ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರಚಿಸಲಾಗುತ್ತದೆ, ಇದು ಆಜೂರು ಸ್ಥಿರ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಸ್‌ಗಳಿಗೆ ನಿಮ್ಮ ಆ್ಯಪ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಮತ್ತು ಪ್ರಕಟಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಜಾಹೀರಾತು**:  
+ಈ ದಸ್ತಾವೇಜು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಾದಕ್ಕಾಗಿ ಪ್ರಯತ್ನಿಸುತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅತಿಶಯೋಕ್ತಿಗಳು ಇರಬಹುದೆಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಸ್ತಾವೇಜು ಅದರ ಸ್ವದೇಶೀ ಭಾಷೆಯಲ್ಲಿ ಪ್ರಾಮಾಣಿಕ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಅತ್ಯವಶ್ಯಕ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮನುಷ್ಯ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗಬಹುದಾದ ಯಾವುದೇ ಅರ್ಥಾರ್ಹತೆಗಳ ತುಚ್ಛಮತಿಗಳು ಅಥವಾ ತಪ್ಪುತೈರುಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/3-terrarium/solution/README.md

@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2026-01-08T19:10:25+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "kn"
+}
+-->
+# My Terrarium: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ HTML, CSS ಮತ್ತು DOM ಹಸ್ತಕ್ಷೇಪವನ್ನು ಕಲಿಯಲು ಒಂದು ಪ್ರಾಜೆಕ್ಟ್ 🌵🌱
+
+ಒಂದು ಸಣ್ಣ ಡ್ರಾಗ್ ಮತ್ತು ಡ್ರೋಪ್ ಕೋಡ್-ಪ್ರಾರ್ಥನೆ. ಸ್ವಲ್ಪ HTML, JS ಮತ್ತು CSS ಜೊತೆಗೆ, ನೀವು ಒಂದು ವೆಬ್ ಇಂಟರ್ಫೇಸ್ ನಿರ್ಮಿಸಿ, ಅಂದ Saj​​​​​​​​ ದಿ ಕೊಟ್ಟು, ಮತ್ತು ಒಂದು ಇಂಟರೆಕ್ಷನ್ ಸೇರಿಸಬಹುದು.
+
+![my terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.kn.png)
+
+## ಕ್ರೆಡಿಟ್ಸ್
+
+♥️ ಜೊತೆ ಬರೆಯಲಾಗಿದೆ [Jen Looper](https://www.twitter.com/jenlooper) ದ್ವಾರಾ
+
+CSS ಬಳಸಿ ರಚಿಸಲಾದ ಟೆರೇರಿಯಂ Jakub Mandra ಅವರ ಗ್ಲಾಸ್ ಜಾರ್ [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY)ದಿಂದ ಪ್ರೇರಿತವಾಗಿದೆ.
+
+ಕಲಾಕೃತಿ Procreate ಉಪಯೋಗಿಸಿ [Jen Looper](http://jenlooper.com) ದಿಂದ ಕೈಯಿಂದ ರೇಖಾಂಕಿತವಾಗಿದೆ.
+
+## ನಿಮ್ಮ ಟೆರೇರಿಯಂ ಅನ್ನು ನಿರ್ವಹಿಸಿ
+
+ನೀವು ನಿಮ್ಮ ಟೆರೇರಿಯಂ ಅನ್ನು ವೆಬ್‌ಗೆ ಡಿಪ್ಲಾಯ್ ಅಥವಾ ಪಬ್ಲಿಷ್ ಮಾಡಲು Azure Static Web Apps ಬಳಸಿ ಬಹುದು.
+
+1. ಈ ರೆಪೋವನ್ನು ಫೋರ್ಕ್ ಮಾಡಿ
+
+2. ಈ ಬಟ್ಟನವನ್ನು ಒತ್ತಿ
+
+[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. ನಿಮ್ಮ ಆಪ್ ಸೃಷ್ಟಿಸುವ ಖಚಿತಪಡಿಸುವ ವಿಧಿಯಿಂದ ವಿಸಾರ್ಡ್ ಮೂಲಕ ಸಾಗಿರಿ. ಆಪ್ ರೂಟ್ ಅನ್ನು `/solution` ಅಥವಾ ನಿಮ್ಮ ಕೋಡ್ ಬೇಸ್‌ನ ಮೂಲವಾಗಿರಿಸಬೇಕು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಈ ಆಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಯಾವುದೇ API ಇಲ್ಲ, ಆದ್ದರಿಂದ ಅದನ್ನು ಸೇರಿಸುವ ಬಗ್ಗೆ ಚಿಂತಿಸಬೇಕಾಗಿಲ್ಲ. ನೀವು ಫೋರ್ಕ್ ಮಾಡಿದ ರೆಪೋದಲ್ಲಿ ಒಂದು .github ಫೋಲ್ಡರ್ ನಿರ್ಮಿಸಲಾಗುವುದು, ಇದು Azure Static Web Apps‌ನ ಬಿಲ್ಡ್ ಸೇವೆಗೆ ನಿಮ್ಮ ಆಪ್ ಅನ್ನು ಹೊಸ URL ಗೆ ಬಿಲ್ಡ್ ಮತ್ತು ಪಬ್ಲಿಷ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಾಗಪತ್ರ**:
+ಈ ದಸ್ತಾವೇಜು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿಕೊಂಡು ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಖಚಿತತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಯന്ത്രಮೂಲಕ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ಗಮನದಲ್ಲಿರಿಸಿಕೊಳ್ಳಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಸ್ತಾವೇಜುವೇ ಪ್ರಾಮಾಣಿಕಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕಾಗಿದೆ. ಮುಖ್ಯ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸ್ಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸುವ ನಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪುಬುರುಡುಗಳ ಅಥವಾ ಅರ್ಥಮಾತೃಪ್ಫಗಳ ಹೊಣೆ ಲಭ್ಯವಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/4-typing-game/README.md

@@ -0,0 +1,290 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
+  "translation_date": "2026-01-08T11:35:00+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "kn"
+}
+-->
+# ಇವೆಂಟ್-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್ - ಟೈಪಿಂಗ್ ಆಟವನ್ನು ನಿರ್ಮಿಸಿ
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಟೈಪಿಂಗ್ ಆಟದ ಅಭಿವೃದ್ಧಿ ಪ್ರಯಾಣ
+    section ಮೆಲಕುಲು
+      ಆಟದ ರಚನೆ ಯೋಜನೆ: 3: Student
+      ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸಗೊಳಿಸಿ: 4: Student
+      HTML ಅಂಶಗಳನ್ನು ಸೆಟ್ ಅಪ್ ಮಾಡಿ: 4: Student
+    section ಕಾರ್ಯಕ್ಷಮತೆ
+      ಬಳಕೆದಾರರ ಇನ್ಪುಟ್ನ್ನು ನಿಭಾಯಿಸಿ: 4: Student
+      ಸಮಯವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ: 5: Student
+      ನಿಖರತೆ ಗಣನೆ ಮಾಡಿ: 5: Student
+    section ವೈಶಿಷ್ಟ್ಯಗಳು
+      ದೃശ്യ ಫೀಡ್‌ಬ್ಯಾಕ್ ಸೇರಿಸಿ: 5: Student
+      ಆಟದ ಲಾಜಿಕ್ ಅನುಷ್ಠಾನ: 5: Student
+      ಅನುಭವವನ್ನು ಸುಧಾರಿಸಿ: 5: Student
+```
+## ಪರಿಚಯ
+
+ಪ್ರತೀ ಡೆವಲಪರ್ ತಿಳಿದಿರುವ, ಆದರೆ ಕಮ್ಮಿ ಮಾತನಾಡುವದ್ದು ಏನಿದೆ ಎಂದರೆ: ವೇಗವಾಗಿ ಟೈಪ್ ಮಾಡುವುದು ಒಂದು ಸೂಪರ್‌ಪವರ್! 🚀 ಯೋಚಿಸಿ - ನಿಮ್ಮ ಮನಸ್ಸಿನಿಂದ ನಿಮ್ಮ ಕೋಡ್ ಎಡಿಟರ್‌ಗೆ ನಿಮ್ಮ ಆಲೋಚನೆಗಳನ್ನು ವೇಗವಾಗಿ ಹೇಗೆ ತಲುಪಿಸುವಿರಿ ಎಂದರೆ, ನಿಮ್ಮ ಸೃಜನಶೀಲತೆಯು ಹೆಚ್ಚುತ್ತಾ ಹೋಗುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಯೋಚನೆಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ನಡುವೆ ನೇರ ಸಂಪರ್ಕದಂತೆ.
+
+```mermaid
+pie title ಗೇಮ್ ವೈಶಿಷ್ಟ್ಯಗಳು
+    "ವಾಸ್ತವಿಕ-ಸಮಯ ಪ್ರತಿಕ್ರಿಯೆ" : 25
+    "ಕಾರ್ಯಕ್ಷಮತೆ ಟ್ರ್ಯಾಕಿಂಗ್" : 20
+    "ಪರಸ್ಪರ UI" : 20
+    "ಟೈಮರ್ ಪ್ರಣಾಳಿ" : 15
+    "ಕೊಟೇಶನ್ ನಿರ್ವಹಣೆ" : 10
+    "ಫಲಿತಾಂಶ ಪ್ರದರ್ಶನ" : 10
+```
+ಈ ಕೌಶಲ್ಯವನ್ನು ಸುಧಾರಿಸಲು ಅತ್ಯುತ್ತಮ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದು ತಿಳಿದುಕೊಳ್ಳಲು ಇಚ್ಛಿಸುವಿರಾ? ನೀವು ಊಹಿಸಿದ್ದಾರೆ - ನಾವು ಒಂದು ಆಟವನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ!
+
+```mermaid
+flowchart LR
+    A[ಆಡುಗಾರನು ಆಟವನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತಾನೆ] --> B[ಯಾದೃಚ್ಛಿಕ ಉೇಷಣೆ ಪ್ರದರ್ಶಿಸಲಾಗಿದೆ]
+    B --> C[ಆಡುಗಾರನು ಅಕ್ಷರಗಳನ್ನು ಟೈಪ್ ಮಾಡುತ್ತಾನೆ]
+    C --> D{ಅಕ್ಷರ ಸರಿಯಿದೆಯೇ?}
+    D -->|Yes| E[ಹಸಿರು ಹೈಲೈಟ್]
+    D -->|No| F[ಕೆಂಪು ಹೈಲೈಟ್]
+    E --> G[ನಿಖರತೆಯನ್ನು ನವೀಕರಿಸು]
+    F --> G
+    G --> H{ಉೇಷಣೆ ಪೂರ್ಣವಾಯಿತೇ?}
+    H -->|No| C
+    H -->|Yes| I[WPM ಲೆಕ್ಕಿಸಿ]
+    I --> J[ఫలితాలను ಪ್ರದರ್ಶಿಸಿ]
+    J --> K[ಮತ್ತು ಆಟವಾಡಬೇಕಾ?]
+    K -->|Yes| B
+    K -->|No| L[ಆಟ ಮುಕ್ತಾಯ]
+    
+    style A fill:#e1f5fe
+    style D fill:#fff3e0
+    style E fill:#e8f5e8
+    style F fill:#ffebee
+    style I fill:#f3e5f5
+```
+> ಒಟ್ಟಿಗೆ ಒಂದು ಅದ್ಭುತ ಟೈಪಿಂಗ್ ಆಟವನ್ನು ನಿರ್ಮಿಸೋಣ!
+
+ನೀವು ಕಲಿತಿರುವ ಎಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಎಚ್ಟಿಎಂಎಲ್ ಮತ್ತು ಸಿಎಸ್‌ಎಸ್ ಕೌಶಲ್ಯಗಳನ್ನು ಬಳಸಲು ಸಜ್ಜಾಗಿದ್ದೀರಾ? ನಾವು ನಿರ್ಮಿಸುವ ಆಟವು ದೊಡ್ಡ ತನಿಖೆಗಾರ [ಶೆರ್ಲಾಕ್ ಹೊಲ್ಮ್ಸ್](https://en.wikipedia.org/wiki/Sherlock_Holmes) ಅವರ ಯಾದೃಚ್ಛಿಕ ಉಕ್ತಿಗಳೊಂದಿಗೆ ನಿಮಗೆ ಸವಾಲು ನೀಡುತ್ತದೆ. ಈ ಆಟವು ನೀವು ಎಷ್ಟು ವೇಗವಾಗಿ ಮತ್ತು ಸರಿಯಾಗಿ ಟೈಪ್ ಮಾಡಬಹುದು ಎಂಬುದನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ - ಮತ್ತು ನಂಬಿ, ಇದು ನೀವು ಭಾವಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ಅತೀಂದ್ರಿಯಾಗಿದೆ!
+
+```mermaid
+mindmap
+  root((ಟೈಪಿಂಗ್ ಆಟ ಅಭಿವೃದ್ಧಿ))
+    User Interface
+      Input Elements
+      Visual Feedback
+      Responsive Design
+      Accessibility
+    Game Logic
+      Quote Selection
+      Timer Management
+      Accuracy Tracking
+      Score Calculation
+    Event Handling
+      Keyboard Input
+      Button Clicks
+      Real-time Updates
+      Game State Changes
+    Performance Metrics
+      Words Per Minute
+      Character Accuracy
+      Error Tracking
+      Progress Display
+    User Experience
+      Immediate Feedback
+      Clear Instructions
+      Engaging Content
+      Achievement System
+```
+![demo](../../../4-typing-game/images/demo.gif)
+
+## ನೀವು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾಗಿರುವುದು
+
+```mermaid
+flowchart TD
+    A[ಬಳಕೆದಾರ ಕ್ರಿಯಾ] --> B{ಕೇಳಿದ ಘಟನೆಯ ಪ್ರಕಾರ?}
+    B -->|ಕೀಲಿಮಣಿಯ ಒತ್ತು| C[ಕೀಲಿಮಣಿಯ ಕಾರ್ಯಕ್ರಮ]
+    B -->|ಬಟನ್ ಕ್ಲಿಕ್| D[ಮೌಸ್ ಕಾರ್ಯಕ್ರಮ]
+    B -->|ಸಮಯಮಿತಿ| E[ಸಮಯ ಕಾರ್ಯಕ್ರಮ]
+    
+    C --> F[ಅಕ್ಷರ ಪರಿಶೀಲನೆ]
+    D --> G[ಗೇಮ್ ಪ್ರಾರಂಭ/ಪುನಃ ಸೆಟ್]
+    E --> H[ಟೈಮರ್ ನವೀಕರಣ]
+    
+    F --> I{ಸರಿಯೇ?}
+    I -->|ಹೌದು| J[ಹಸಿರು ಸಂವೇದನೆ]
+    I -->|ಇಲ್ಲ| K[ಕೆಂಪು ಸಂವೇದನೆ]
+    
+    J --> L[ಸ್ಕೋರ್ ನವೀಕರಣ]
+    K --> L
+    L --> M[ಗೇಮ್ ಸ್ಥಿತಿ ಪರಿಶೀಲನೆ]
+    
+    G --> N[ಹೊಸ ಉಧ್ಯೇಶ ರಚನೆ]
+    H --> O[ಸಮಯ ಪ್ರದರ್ಶನ]
+    
+    M --> P{ಗೇಮ್ ಸಂಪೂರ್ಣ?}
+    P -->|ಹೌದು| Q[ಫಲಿತಾಂಶ ಪ್ರದರ್ಶಿಸಿ]
+    P -->|ಇಲ್ಲ| R[ಗೇಮ್ ಮುಂದುವರಿಸಿ]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#fff3e0
+    style Q fill:#f3e5f5
+```
+ನಾವು ಮುಂದಾಗುವ ಮೊದಲು, ಈ ಅರ್ಥಗಳನ್ನು ನೀವು ತಿಳಿದಿರುವುದಾಗಿ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ವೇಗದಾಗಿ ಸ್ಮರಣೆ ಬೇಕಾದರೆ ಚಿಂತೆ ಮಾಡಬೇಡಿ - ನಾವುಲ್ಲಿಯವರೆಗೂದಲ್ಲಿಯೇ ಇದ್ದೇವಿ!):
+
+- ಪಠ್ಯ ಇನ್‌ಪುಟ್ ಮತ್ತು ಬಟನ್ ನಿಯಂತ್ರಣಗಳನ್ನು ರಚಿಸುವುದು
+- ಸಿಎಸ್‌ಎಸ್ ಮತ್ತು ಕ್ಲಾಸ್‌ಗಳ ಮೂಲಕ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿಸುವುದು  
+- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಭೂತಗಳು
+  - ಅರೇ ರಚನೆ ಮಾಡುವುದು
+  - ಯಾದೃಚ್ಛಿಕ ಸಂಖ್ಯೆ ರಚಿಸುವುದು
+  - ಪ್ರಸ್ತುತ ಸಮಯ ಪಡೆಯುವುದು
+
+ಈಗಳಲ್ಲಿ ಎದ್ದುಕೊಳ್ಳುವಕೆ ಇಂಥದು ಇದ್ದರೆ, ಅದು ಸೂಕ್ತವಾಗಿದೆ! ನಿಮ್ಮ ಜ್ಞಾನವನ್ನು ಗಟ್ಟಿಗೊಳಿಸುವ ಅತ್ಯುತ್ತಮ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದು ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಕೈಹಾಕಿ ಕಲಿಯುವುದು.
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಪ್ರಾರಂಬಿಕ ಮೌಲ್ಯಮಾಪನ**: ಅಭಿವೃದ್ಧಿ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಎಚ್ಟಿಎಂಎಲ್ ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು ಇನ್‌ಪುಟ್ ಎಲಿಮೆಂಟ್ಸ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ
+- ✅ ಸಿಎಸ್‌ಎಸ್ ಕ್ಲಾಸ್‌ಗಳು ಮತ್ತು ಡೈನಾಮಿಕ್ ಶೈಲಿ ಸಂಬಂದಗಳು
+- ✅ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇವೆಂಟ್ ಲಿಸನರ್‌ಗಳು ಮತ್ತು ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು
+- ✅ ಅರೆ manipulation ಮತ್ತು ಯಾದೃಚ್ಛಿಕ ಆಯ್ಕೆ
+- ✅ ಸಮಯದ ಮಾಪನ ಮತ್ತು ಲೆಕ್ಕಾಚಾರಗಳು
+
+**ತ್ವರಿತ ಸ್ವ-ಪರೀಕ್ಷೆ**: ಈ ಅರ್ಥಗಳು ಕ್ರೀಡಾತ್ಮಕ ಆಟದಲ್ಲಿ ಹೇಗೆ ಕೈಗೂಡುತ್ತವೆ ಎಂದು ವಿವರಿಸಬಹುದೇ?
+- **ಇವೆಂಟ್ಗಳು** ಬಳಕೆದಾರರು ಎಲಿಮೆಂಟ್ಗಳೊಡನೆ ಸಂವಹನ ನಡೆಸುವಾಗ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ
+- **ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು** ಆ ಘಟನೆಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ ಆಟದ ಸ್ಥಿತಿಯನ್ನು ನವೀಕರಿಸುತ್ತವೆ
+- **ಸಿಎಸ್‌ಎಸ್** ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳಿಗಾಗಿ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುತ್ತದೆ
+- **ಸಮಯ ಮಿತಿಯಿಲ್ಲದೆ** ಪ್ರದರ್ಶನವನ್ನು ಅಳೆಯಲು ಮತ್ತು ಆಟದ ಪ್ರಗತಿಗೆ ಸಹಾಯ ಮಾಡಿ
+
+```mermaid
+quadrantChart
+    title ಟೈಪಿಂಗ್ ಆಟ ಕೌಶಲ್ಯಗಳ ಅಭಿವೃದ್ಧಿ
+    x-axis ಆರಂಭಿಕ --> ತಜ್ಞ
+    y-axis ಸ್ಥಿರ --> ಪರಸ್ಪರಕ್ರಿಯಾಶೀಲ
+    quadrant-1 ಅತ್ಯಧಿಕ ಆಟಗಳು
+    quadrant-2 ರియಲ್-ಟೈಮ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು
+    quadrant-3 ಮೂಲ ಪುಟಗಳು
+    quadrant-4 ಪರಸ್ಪರಕ್ರಿಯಾಶೀಲ ತಾಣಗಳು
+    
+    HTML Forms: [0.3, 0.2]
+    CSS Styling: [0.4, 0.3]
+    Event Handling: [0.7, 0.8]
+    Game Logic: [0.8, 0.9]
+    Performance Tracking: [0.9, 0.7]
+```
+## ಈ ಘಟನೆಯನ್ನು ದೇವಲಪ್ ಮಾಡೋಣ!
+
+[ಇವೆಂಟ್-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಬಳಸಿ ಟೈಪಿಂಗ್ ಆಟವನ್ನು ನಿರ್ಮಿಸುವುದು](./typing-game/README.md)
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದವುಗಳು**
+- [ ] ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕಾಂಸೋಲ್ ತೆರಯಿರಿ ಮತ್ತು `addEventListener` ಬಳಸಿ ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳನ್ನು ಕೇಳಿ
+- [ ] ಸರಳ HTML ಪುಟವನ್ನು ರಚಿಸಿ, ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್-ನೊಂದಿಗೆ ಟೈಪಿಂಗ್ ಪತ್ತೆಮಾಡಿ ಪರೀಕ್ಷಿಸಿ
+- [ ] ಟೈಪ್ ಮಾಡಿದ ಪಠ್ಯವನ್ನು ಗುರಿ ಪಠ್ಯದಿಂದ ಹೋಲಿಸಿ ಸ್ಟ್ರಿಂಗ್ ನಿರ್ವಹಣೆ ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] `setTimeout` ಮೂಲಕ ಸಮಯ ನಿಯಂತ್ರಣ ಕಾರ್ಯಗಳನ್ನು ಮನಗಾಣಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲೇ ಸಾಧಿಸಬಹುದಾದವುಗಳು**
+- [ ] ಪಾಠದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರವನ್ನು ಮುಗಿಸಿ ಇವೆಂಟ್-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತಿಳಿದುಕೊಳ್ಳಿ
+- [ ] ಪದಗಳ ಪರಿಶೀಲನೆಗಾಗಿ ಟೈಪಿಂಗ್ ಆಟದ ಮೂಲ ಆವೃತ್ತಿಯನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ಸರಿಯಾದ ಮತ್ತು ತಪ್ಪು ಟೈಪಿಗಾಗಿ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ಸೇರಿಸಿ
+- [ ] ವೇಗ ಮತ್ತು ನಿಖರತೆಗೆ ಆಧರಿಸಿ ಸರಳ ಸ್ಕೋರಿಂಗ್ ಸಿಸ್ಟಮ್ ಅನುಷ್ಠಾನ ಮಾಡಿ
+- [ ] ನಿಮ್ಮ ಆಟವನ್ನು ದೃಶ್ಯಾತ್ಮಕವಾಗಿ ಆಕರ್ಷಕವಾಗಿಸಲು CSS ಶೈಲಿ ಮಾಡಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ಆಟ ಅಭಿವೃದ್ಧಿ**
+- [ ] ಎಲ್ಲಾ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಟೈಪಿಂಗ್ ಆಟವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಸುಧಾರಣೆ ಮಾಡಿ
+- [ ] ಪದ ಜಟಿಲತೆಯೊಂದಿಗೆ ಕಠಿಣ ಮಟ್ಟಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಬಳಕೆದಾರರ ಅಂಕಿಅಂಶಗಳ (WPM, ಸಮಯೋಚಿತ ನಿಖರತೆ) ಟ್ರ್ಯಾಕಿಂಗ್ ಅನುಷ್ಠಾನ ಮಾಡಿ
+- [ ] ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಧ್ವನಿ ಪರಿಣಾಮಗಳು ಮತ್ತು ಅನಿಮೇಶನ್‌ಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಟಚ್ ಸಾಧನಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ನಿಮ್ಮ ಆಟವನ್ನು ಮೊಬೈಲ್-ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಮಾಡಿ
+- [ ] ನಿಮ್ಮ ಆಟವನ್ನು ಆನ್‌ಲೈನ್ ಹಂಚಿಕೊಳ್ಳಿ ಮತ್ತು ಬಳಕೆದಾರರ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸಂಗ್ರಹಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳಾವ್ಯಾಪಿ ಪರಸ್ಪರ ಕ್ರಿಯಾತ್ಮಕ ಅಭಿವೃದ್ಧಿ**
+- [ ] ವಿಭಿನ್ನ ಸಂವಹನ ಮಾದರಿಗಳನ್ನು ಅನ್ವೇಷಿಸುವ ಬಹು ಆಟಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ಆಟ ಲೂಪ್, ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ, ಪ್ರದರ್ಶನ ಪರಿಷ್ಕರಣೆಗಳನ್ನು ಕಲಿಯಿರಿ
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ ಆಟ ಅಭಿವೃದ್ಧಿ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಸಹಾಯ ಮಾಡಿ
+- [ ] ಪವರ್‌ಫುಲ್ ಸಮಯ ಅಂಶಗಳು ಮತ್ತು ಸ್ಮೂತ್ ಅನಿಮೇಶನ್‌ಗಳಲ್ಲಿ ಪರಿಣತಿ ಪಡೆಯಿರಿ
+- [ ] ವಿವಿಧ ಪರಸ್ಪರ ಕ್ರಿಯಾತ್ಮಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಪ್ರದರ್ಶನ ಮಾಡುತ್ತಾ ಪೋರ್ಟ್ಫೋಲಿಯೋ ರಚಿಸಿ
+- [ ] ಆಟ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಬಳಕೆದಾರ ಸಂವಹನದ ಬಗ್ಗೆ ಆಸಕ್ತಿ ಇರುವವರಿಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡಿ
+
+## 🎯 ನಿಮ್ಮ ಟೈಪಿಂಗ್ ಆಟ ಮಾಸ್ಟರಿ ಸಮಯರೇಖೆ
+
+```mermaid
+timeline
+    title ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಕಲಿಕಾ ಪ್ರಗತಿ
+    
+    section ಸೆಟಪ್ (10 ನಿಮಿಷಗಳು)
+        Project Structure: HTML ನೆಲೆ
+                         : CSS ಶೈಲಿ ಸೆಟಪ್
+                         : JavaScript ಫೈಲ್ ಸೃಷ್ಟಿ
+        
+    section ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ (20 ನಿಮಿಷಗಳು)
+        Interactive Elements: ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳು
+                            : ಬಟನ್ ನಿಯಂತ್ರಣಗಳು
+                            : ಡಿಸ್‌ప್ಲೇ ಪ್ರದೇಶಗಳು
+                            : ಪ್ರತಿಕ್ರೀಯಾಶೀಲ ವಿನ್ಯಾಸ
+        
+    section ઘટના ನಿರ್ವಹಣೆ (25 ನಿಮಿಷಗಳು)
+        User Interaction: ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳು
+                        : ಮೌಸ್ ಘಟನೆಗಳು
+                        : ರಿಯಲ್-ಟೈಮ್ ಪ್ರತಿಕ್ರಿಯೆ
+                        : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+        
+    section ಗೇಮ್ ಲಾಜಿಕ್ (30 ನಿಮಿಷಗಳು)
+        Core Functionality: ಉಕ್ತಿಗಳ ರಚನೆ
+                          : ಪಾತ್ರ ಹೋಲಿಕೆ
+                          : ನಿಖರತೆ ಗಣನೆ
+                          : ಟೈಮರ್ ಅನುಷ್ಠಾನ
+        
+    section ಕಾರ್ಯಕ್ಷಮತೆ ಟ್ರ್ಯಾಕಿಂಗ್ (35 ನಿಮಿಷಗಳು)
+        Metrics & Analytics: WPM ಗಣನೆ
+                           : ದೋಷ ಟ್ರ್ಯಾಕಿಂಗ್
+                           : ಪ್ರಗತಿ ದೃಶ್ಯೀಕರಣ
+                           : ಫಲಿತಾಂಶ ಪ್ರದರ್ಶನ
+        
+    section ಪೊಳಿಷ್ & ವೃದ್ಧಿ (45 ನಿಮಿಷಗಳು)
+        User Experience: ದೃಷ್ಟಿಮಾತು ಪ್ರತಿಕ್ರಿಯೆ
+                       : ಧ್ವನಿ ಪರಿಣಾಮಗಳು
+                       : ಅನಿಮೇಷನ್ಗಳು
+                       : ಪ್ರವೇಶಸೌಲಭ್ಯ ವೈಶಿಷ್ಟ್ಯಗಳು
+        
+    section ಮುನ್ನಡೆಯ ವೈಶಿಷ್ಟ್ಯಗಳು (1 ವಾರ)
+        Extended Functionality: ಕಷ್ಟದ ಮಟ್ಟಗಳು
+                              : ಲೀಡರ್ಬೋರ್ಡ್‌ಗಳು
+                              : ಕಸ್ಟಮ್ ಉಕ್ತಿಗಳು
+                              : ಬಹುಪಾತ್ರ ಆಯ್ಕೆಗಳು
+        
+    section ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು (1 ತಿಂಗಳು)
+        Game Development: ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ
+                        : ಕೋಡ್ ಸ್ಥಾಪತ್ಯ
+                        : ಪರೀಕ್ಷಾ ತಂತ್ರಗಳು
+                        : ಬಿಡುಗಡೆ ಮಾದರಿಗಳು
+```
+### 🛠️ ನಿಮ್ಮ ಆಟ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣಗಳ ಸಾರಾಂಶ
+
+ಈ ಪ್ರಾಜೆಕ್ಟ್ ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನೀವು ಪಾರಂಗತರಾಗಿರುತ್ತೀರಿ:
+- **ಇವೆಂಟ್-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಬಳಕೆದಾರ ಆದೇಶಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಸ್ಪಂದನಶೀಲ ಯೂಐ
+- **ರೀಲ್-ಟೈಮ್ ಪ್ರತಿಕ್ರಿಯೆ**: ತಕ್ಷಣದ ದೃಶ್ಯ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮ ನವೀಕರಣಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಮಾಪನ**: ಸರಿಯಾದ ಸಮಯ ಮತ್ತು ಸ್ಕೋರಿಂಗ್ ಸಿಸ್ಟಮ್‌ಗಳು
+- **ಆಟದ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಅಪ್ಲಿಕೇಶನ್ ಹರಿವು ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವ ನಿಯಂತ್ರಣ
+- **ಪರಸ್ಪರ ಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸ**: ಆಕರ್ಷಕ, ಬೋಧಕ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ರಚಿಸುವುದು
+- **ಆಧುನಿಕ ವೆಬ್ APIs**: ಶ್ರೀಮಂತ ಸಂವಹನಗಳಿಗಾಗಿ ಬ್ರೌಸರ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಉಪಯೋಗಿಸುವುದು
+- **ಪ್ರವೇಶ ಯೋಗ್ಯತೆ ಮಾದರಿಗಳು**: ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಒತ್ತಾಯರಹಿತ ವಿನ್ಯಾಸ
+
+**ವಾಸ್ತವಿಕ ಅನ್ವಯಿಕೆಗಳು**: ಈ ಕೌಶಲ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ:
+- **ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಯಾವುದೇ ಪರಸ್ಪರ ಸ್ನೇಹಿ ಇಂಟರ್ಫೇಸ್ ಅಥವಾ ಡಾಷ್‌ಬೋರ್ಡ್
+- **ಶಿಕ್ಷಣಾತ್ಮಕ ಸಾಫ್ಟ್‌ವೇರ್**: ಕಲಿಕಾ ವೇದಿಕೆಗಳು ಮತ್ತು ಕೌಶಲ್ಯ ಮೌಲ್ಯಮಾಪನ ಟೂಲ್ಗಳು
+- **ಉತ್ಪಾದಕತೆ ಉಪಕರಣಗಳು**: ಪಠ್ಯ ಸಂಪಾದಕ, ಐಡಿಇಗಳು ಮತ್ತು ಸಹಕಾರ ಸಾಫ್ಟ್‌ವೇರ್
+- **ಆಟ ಜಗತ್ತು**: ಬ್ರೌಸರ್ ಆಟಗಳು ಮತ್ತು ಪರಸ್ಪರ ಮನೋರಂಜನೆ
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ಸ್ಪರ್ಶ ಆಧಾರಿತ ಇಂಟರ್ಫೇಸ್ಗಳು ಮತ್ತು ಜೆಸ್ಚರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು ಸುಧಾರಿತ ಆಟ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು, ವಾಸ್ತವಿಕ ಸಮಯ ಬಹು-ಆಟಗಾರ ವ್ಯವಸ್ಥೆಗಳು ಅಥವಾ ಸಂಗತಿಪೂರ್ಣ ಪರಸ್ಪರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಸಿದ್ಧರಾಗಿದ್ದೀರಿ!
+
+## ಕ್ರೆಡಿಟ್‌ಗಳು
+
+♥️ ಜೊತೆಗೆ ಬರೆದವರು [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿರಾಕರಣೆ**:  
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆಯಾದ [Co-op Translator](https://github.com/Azure/co-op-translator) ಉಪಯೋಗಿಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಾಖಲೆ ನಿರ್ಮಾಣಾತ್ಮಕ ಮೂಲವಾಗಿರುತ್ತದೆ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ನಿಜವಾದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸುವುದರಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅವಗाहನೆಗಳು ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳ ಬಗ್ಗೆ ನಾವು ಜವಾಬ್ದಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/4-typing-game/solution/README.md

@@ -0,0 +1,17 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2026-01-08T18:08:15+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "kn"
+}
+-->
+ಇದು ಒಂದು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ bırakáilte.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಬಗ್ಗೆ ಸ್ಪಷ್ಟನೆ**:  
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಅನ್ನು ಬಳಸಿಕೊಂಡು ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸಮರ್ಪಕತೆಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದೆ ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅಧಿಕಾರಪೂರ್ವಕ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವ್ಯಾಪಾರಿಕ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸುವುದರಿಂದ ಸಂಭವಿಸುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/4-typing-game/typing-game/README.md

@@ -0,0 +1,613 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "da8bc72041a2bb3826a54654ee1a8844",
+  "translation_date": "2026-01-08T18:19:31+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "kn"
+}
+-->
+# ಈವೆಂಟ್ಗಳನ್ನು ಬಳಸಿ ಆಟವನ್ನು ಸೃಜನೆ ಮಾಡುವುದು
+
+ನೀವು ഒരುದೊಮ್ಮೆ ಚಿಂತಿಸಿದ್ದೀರಾ ವೆಬ್‌ಸೈಟ್‌ಗಳು ನೀವು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಥವಾ ಟೆಕ್ಸ್ಟ್ ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಟೈಪ್ ಮಾಡಿದಾಗ ಹೇಗೆ ತಿಳಿಯುತ್ತವೆ? ಅದೇ ಈವೆಂಟ್-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ನ ಮಾಯಾಜಾಲ! ಈ ಅತಿಹೆಚ್ಚು ಮಹತ್ವದ ಕೌಶಲ್ಯವನ್ನು ಕಲಿಯಲು ಉತ್ತಮ ವಿಧಾನ ಏನು ಎಂದರೆ — ನೀವು ಮಾಡುತ್ತಿರುವ ಪ್ರತಿ ಕೀಸ್ಟ್ರೋಕ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಟೈಪಿಂಗ್ ವೇಗದ ಆಟವನ್ನು ರಚಿಸುವುದು.
+
+ನೀವು ನೇರವಾಗಿ ನೋಡಲಿದ್ದೀರಿ ಹೇಗೆ ವೆಬ್ ಬ್ರೌಸರಗಳು ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ಗೆ "ಮಾತನಾಡುತ್ತವೆ". ನೀವು ಪ್ರತೀ ಬಾರಿ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಟೈಪ್ ಮಾಡಿದಾಗ, ಅಥವಾ ನಿಮ್ಮ ಮೌಸ್ ಅನ್ನು ನಿಯಂತ್ರಿಸಿದಾಗ, ಬ್ರೌಸರ್ ಸಣ್ಣ ಸಂದೇಶಗಳನ್ನು (ನಾವು ಅದನ್ನು ಈವೆಂಟುಗಳು ಎಂದು ಕರೆಯುತ್ತೇವೆ) ನಿಮ್ಮ ಕೋಡಿಗೆ ಕಳುಹಿಸುತ್ತಿದೆ, ಮತ್ತು ನೀವು ಹೇಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕೆಂದರೆ ಅದನ್ನು ನಿರ್ಧರಿಸಬೇಕು!
+
+ನಾವು ಇಲ್ಲಿ ಮುಗಿಸಿದಾಗ, ನೀವು ನಿಮ್ಮದ್ದು ಒಂದು ನಿಜವಾದ ಟೈಪಿಂಗ್ ಆಟ ರಚಿಸಿದ್ದೀರಿ ಇದು ನಿಮ್ಮ ವೇಗ ಮತ್ತು ನಿಖರತೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ. ಹೆಚ್ಚಿನ ಮಹತ್ವದಲ್ಲಿ, ನೀವು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿರಿ ಸಬ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರತಿಯೊಂದು ಸ್ನೇಹಪರ ವೆಬ್‌ಸೈಟ್ ಕೆಲಸ ಮಾಡಿಸುವ ಮೂಲಭೂತ ಧಾರಣೆಗಳನ್ನು. ಬನ್ನಿ ಪ್ರಾರಂಭಿಸೋಣ!
+
+## ಪೂರ್ವ ಉಪನ್ಯಾಸ ಪ್ರಶ್ನೋತ್ತರ 
+
+[ಪೂರ್ವ ಉಪನ್ಯಾಸ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/21)
+
+## ಈವೆಂಟ್ ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್
+
+ನಿಮ್ಮ ಪ್ರಿಯ ಅಪ್ಲಿಕೇಶನ್ ಅಥವಾ ವೆಬ್‌ಸೈಟ್ ಬಗ್ಗೆ ಯೋಚಿಸಿ — ಅದು ಚೈತನ್ಯ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆಯನ್ನು ಹೇಗೆ ಹೊಂದಿದೆ? ಅದು ನಿಮ್ಮ ಮಾಡಿದ ಕಾರ್ಯಗಳಿಗೆ ಹೇಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದರಿಂದಲೇ! ಪ್ರತಿ ಟ್ಯಾಪ್, ಕ್ಲಿಕ್, ಸ್ವೈಪ್, ಅಥವಾ ಕೀಸ್ಟ್ರೋಕ್ ಒಂದು "ಈವೆಂಟ್" ಅನ್ನು ಸೃಜಿಸುತ್ತದೆ, ಮತ್ತು ಅಲ್ಲಿ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ನಿಜವಾದ ಮಾಯಾಜಾಲವು ನಡೆಯುತ್ತದೆ.
+
+ಇದು ವೆಬ್‌ಗಾಗಿ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಅನ್ನು ಇಷ್ಟನೀಯವಾಗಿಸುವುದು: ನಾವು ಯಾರಾದರೂ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವುದು ಅಥವಾ ಟೆಕ್ಸ್ಟ್ ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಟೈಪ್ ಆರೆಂಬುದನ್ನು ಗುರುತಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ಅವರು ತಕ್ಷಣ ಕ್ಲಿಕ್ ಮಾಡಬಹುದು, ಐದು ನಿಮಿಷ ಕಾಯಬಹುದು ಅಥವಾ ಇಲ್ಲವೇ ಒಂದು ಬಾರಿ ಕೂಡ ಕ್ಲಿಕ್ ಮಾಡದು! ಈ ಅನಿಶ್ಚಿತತೆ ಕಾರಣ ನಾವು ನಮ್ಮ ಕೋಡ್ ಬರೆಯುವ ರೀತಿಯನ್ನು ತಾರತಮ್ಯ ರೀತಿಯಲ್ಲಿ ಯೋಚಿಸಬೇಕಾಗುತ್ತದೆ.
+
+ನೀವು ಪದಾರ್ಥವನ್ನು ಮೇಲಿನಿಂದ ಕೆಳಗೆ ಚಾಲನೆ ಮಾಡುವಂತೆ ಕೋಡ್ ಬರೆಯುವ ಬದಲು, ನಾವು ಏನಾದರೂ ಸಂಭವಿಸಲು ಕಾಯುತ್ತಿರುವ ಕೋಡ್ ಬರೆಯುತ್ತೇವೆ. ಇದು 1800ರ ಲಾಸ್ ಕ್ಯಾಲ್ಗಳಲ್ಲಿ ಟೈಲಿಗ್ರಾಫ್ ಆಪರೇಟರ್‌ಗಳು ತಮ್ಮ ಯಂತ್ರಗಳ ಬಳಿಯಲ್ಲಿ ಕುಳಿತುಕೊಂಡು, ಸಂದೇಶ ಬಂದ ತಕ್ಷಣ ಪ್ರತಿ ಕ್ಷಣದಲ್ಲಿ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಇರುತ್ತದೆ.
+
+ಆಗ "ಈವೆಂಟ್" ಎಂದರೆ ಏನು? ಸರಳವಾಗಿ ಹೇಳುವುದಾದರೆ, ಅದು ಸಂಭವಿಸುವುದು! ನೀವು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ – ಅದು ಒಂದು ಈವೆಂಟ್. ನೀವು ಅಕ್ಷರವನ್ನು ಟೈಪ್ ಮಾಡಿದಾಗ – ಅದು ಒಂದು ಈವೆಂಟ್. ನೀವು ನಿಮ್ಮ ಮೌಸ್ ಅನ್ನು ಸರಿಸಿದಾಗ – ಅದು ಇನ್ನೊಂದು ಈವೆಂಟ್.
+
+ಈವೆಂಟ್-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ನಮಗೆ ನಮ್ಮ ಕೋಡ್ ಅನ್ನು ಕೇಳಲು ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಿಸಲು ಸಜ್ಜಾಗಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ನಾವು ವಿಶೇಷ ಫಂಕ್ಶನ್‌ಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತೇವೆ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ **ಈವೆಂಟ್ ಶ್ರೋತ**ಗಳು (event listeners) ವಿಶೇಷ ಘಟನೆಗಳು ಸಂಭವಿಸಲು ಕಾಯುತ್ತವೆ, ಆಗ ಅವು ಸಕ್ರಿಯವಾಗುತ್ತವೆ.
+
+ಈವೆಂಟ್ ಶ್ರೋತಗಳನ್ನು ನಿಮ್ಮ ಕೋಡಿಗೆ ಬಾಗಿಲುನಿಗ್ಗಾದ ಬಂತು ಎಂದು ಯೋಚಿಸಿ. ನೀವು ಬಾಗಿಲುನಿಗ್ಗಾದವನ್ನು (`addEventListener()`) ಸೆಟ್ ಮಾಡುತ್ತೀರಿ, ಯಾವ ಶಬ್ದವನ್ನು ಕೇಳಬೇಕೆಂದು ಹೇಳುತ್ತೀರಿ (ಒಂದು 'click' ಅಥವಾ 'keypress' ಹಾಗೆ), ಮತ್ತು ಯಾರಾದರೂ ಅದನ್ನು ಒತ್ತಿದಾಗ ಏನು ನಡೆಯಬೇಕು ಎಂದು ನಿಮಗೆ ತಿಳಿಸುತ್ತದೆ (ನಿಮ್ಮ ಕಸ್ಟಮ್ ಫಂಕ್ಶನ್).
+
+**ಈವೆಂಟ್ ಶ್ರೋತಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ:**
+- **ನೋಡುತ್ತದೆ** ವಿಶೇಷ ಉಪಯೋಗದ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು, ಉದಾಹರಣೆಗೆ ಕ್ಲಿಕ್, ಕೀಸ್ಟ್ರೋಕ್, ಅಥವಾ ಮೌಸ್ ಚಲನೆಗಳು
+- **ನಿರ್ವಹಿಸುತ್ತದೆ** ನಿಮ್ಮ ಕಸ್ಟಮ್ ಕೋಡ್ ಅನ್ನು ಆ ಕಾರ್ಯ ಸಂಭವಿಸಿದಾಗ
+- **ತಕ್ಷಣವೇ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ** ಉಪಯೋಗದ ಸಂತುಷ್ಟಿಗಾಗಿ
+- **ನಿರ್ವಹಿಸುತ್ತದೆ** ಒಂದೇ ತತ್ವದ ಮೇಲೆ ಹಲವಾರು ಈವೆಂಟ್‌ಗಳನ್ನು ವಿಭಿನ್ನ ಶ್ರೋತಗಳ ಮೂಲಕ
+
+> **ಟಿಪ್ಪಣಿ:** ಈವೆಂಟ್ ಶ್ರೋತಗಳನ್ನು ಸೃಷ್ಟಿಸುವ ಅನೇಕ ಮಾರ್ಗಗಳಿವೆ. ನೀವು ಅನಾಮಿಕ ಫಂಕ್ಶನ್‌ಗಳನ್ನು ಅಥವಾ ವ್ಯಕ್ತಿಗತ ಹೆಸರಿನ ಫಂಕ್ಶನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ನೀವು ವಿಭಿನ್ನ ತ್ವರಿತ ಮಾರ್ಗಗಳನ್ನು ಬಳಸಬಹುದು, ಉದಾ. `click` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸೆಟ್ ಮಾಡುವುದು ಅಥವಾ `addEventListener()` ಅನ್ನು ಬಳಸುವುದು. ನಮ್ಮ ಅಭ್ಯಾಸದಲ್ಲಿ ನಾವು `addEventListener()` ಮತ್ತು ಅನಾಮಿಕ ಫಂಕ್ಷನ್‌ಗಳ ಮೇಲೆ ಗಮನಹರಿಸುತ್ತೇವೆ, ಏಕೆಂದರೆ ಇದು ಸೇವಕ ಪ್ರಧಾನವಾಗಿದ್ದು ಬಹುಮಾನವಾಗಿ ಬಳಸಲ್ಪಡುವ ವಿಧಾನ. ಇದು ಅತ್ಯಂತ ಸ್ವ Eleanor ಸಾಧಕೀಯವೂ ಆಗಿದ್ದು, ಏಕೆಂದರೆ `addEventListener()` ಎಲ್ಲಾ ಈವೆಂಟ್‌ಗಳಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಮತ್ತು ಈವೆಂಟ್ ಹೆಸರನ್ನು ಪ್ಯಾರಾಮೀಟರ್ ಆಗಿ ನೀಡಬಹುದು.
+
+### ಸಾಮಾನ್ಯ ಈವೆಂಟುಗಳು
+
+ವೆಬ್ ಬ್ರೌಸರಗಳು ಬಹಳಷ್ಟು ವಿಭಿನ್ನ ಈವೆಂಟ್‌ಗಳನ್ನು ಕೇಳಲು ಅವಕಾಶ ನೀಡುತ್ತವೆ, ಆದಾಗ್ಯೂ ಬಹುತೇಕ ಸಂವಹನಾತ್ಮಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಕೆಲವು ಮೂಲಭೂತ ಈವೆಂಟ್‌ಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತವೆ. ಈ ಆಧಾರದ ಈವೆಂಟ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಸೇವಕ ನಿತ್ಯ ನವೀನ ಸಂವಹನಗಳನ್ನು ನಿರ್ಮಿಸಲು ಮೂಲಭೂತ ಅಡಿಪಾಯವನ್ನು ಕೊಡುವುದು.
+
+ನೀವು ಕೇಳಲು ಸಾಧ್ಯ ಇರುವ [ಬಹುಸಂಖ್ಯೆ ಈವೆಂಟುಗಳು](https://developer.mozilla.org/docs/Web/Events) ಲಭ್ಯವಿವೆ. ಸಾಮಾನ್ಯವಾಗಿ, ಬಳಕೆದಾರರು ಪುಟದಲ್ಲಿ ಮಾಡುವ ಯಾವುದೇ ಕಾರ್ಯವು ಒಂದು ಈವೆಂಟ್ ಅನ್ನು ಹೋರುತ್ತದೆ, ಇದು ನಿಮಗೆ ಬೇಕಾದ ಅನುಭವವನ್ನು ಬೆಳೆಗೊಳಿಸಲು ಹೆಚ್ಚು ಶಕ್ತಿ ನೀಡುತ್ತದೆ. ಒಗ್ಗಟ್ಟಾಗಿ, ನಿಮಗೆ ಸಾಮಾನ್ಯವಾಗಿ ಕೆಲವು ಈವೆಂಟ್‌ಗಳಷ್ಟೇ ಬೇಕಾಗುತ್ತದೆ. ಇಲ್ಲಿವೆ ಕೆಲವು ಸಾಮಾನ್ಯ ಈವೆಂಟ್‌ಗಳು (ನಾವು ನಮ್ಮ ಆಟ ರಚಿಸುವಾಗ ಬಳಸುವ ಎರಡು ಸಹ ಸೇರಿವೆ):
+
+| ಈವೆಂಟ್ | ವಿವರಣೆ | ಸಾಮಾನ್ಯ ಬಳಕೆ ಪ್ರಕರಣಗಳು |
+|---------|---------|-------------------------|
+| `click` | ಬಳಕೆದಾರನು ಏನಾದಾದರೂ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ | ಬಟನ್‌ಗಳು, ಲಿಂಕ್‌ಗಳು, ಪ್ರತ್ಯಾಧಾರಿತ ಭಾಗಗಳು |
+| `contextmenu` | ಬಳಕೆದಾರನು ಬಲಕೈ ಮೌಸ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ | ಕಸ್ಟಮ್ ಬಲ-ಕ್ಲಿಕ್ ಮೆನುಗಳು |
+| `select` | ಬಳಕೆದಾರನು ಕೆಲವು ಪಠ್ಯವನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ | ಪಠ್ಯ ಸಂಪಾದನೆ, ನಕಲಾತಿ ಕಾರ್ಯಗಳು |
+| `input` | ಬಳಕೆದಾರನು ಕೆಲವು ಪಠ್ಯವನ್ನು ನಮೂದಿಸಿದಾಗ | ಫಾರ್ಮ್ ಪರಿಶೀಲನೆ, ರಿಯಲ್‌ಟೈಮ್ ಶೋಧನೆ |
+
+**ಈ ಈವೆಂಟ್ ವಿಧಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+- **ಪ್ರೇರಣೆ** ಆಗುತ್ತದೆ ಬಳಕೆದಾರರು ಪುಟದ ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳಲ್ಲಿ ಕ್ರಿಯೆ ಸಲ್ಲಿಸಿದಾಗ
+- **ನೀಡುತ್ತದೆ** ಉಪಯೋಗದ ಕಾರ್ಯಾಚರಣೆಗಳ ವಿವರವನ್ನು ಈವೆಂಟ್ ಒಬ್ಜೆಕ್ಟ್‌ಗಳ ಮೂಲಕ
+- **ಸಾಧಿಸಲು** ಪ್ರತಿಕ್ರಿಯಾಶೀಲ, ಸಂವಹನಾತ್ಮಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ರಚನೆ
+- **ಕಾರ್ಯಕ್ಷಮವಾಗುತ್ತದೆ** ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಸತತವಾಗಿ
+
+## ಆಟ ಸೃಷ್ಟಿಸುವುದು
+
+ಈಗ ನೀವು ಈವೆಂಟ್‌ಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಿರುವುದರಿಂದ, ಅದನ್ನು ಪ್ರಾಯೋಗದಲ್ಲಿ ಇಡೋಣ ಮತ್ತು ಕೌಶಲ್ಯವನ್ನು ಅಭ್ಯಾಸ ಮಾಡೋಣ. ನಾವು ಒಂದು ಟೈಪಿಂಗ್ ವೇಗದ ಆಟವನ್ನು ರಚಿಸುತ್ತೇವೆ ಇದು ಈವೆಂಟ್ ನಿರ್ವಹಣೆಯನ್ನು ತೋರಿಸುತ್ತದೆ ಮತ್ತು ನಿಮಗೆ ಒಂದು ಪ್ರಮುಖ ಡೆವಲಪರ್ ಕೌಶಲ್ಯವನ್ನು ಪಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಈವೆಂಟ್‌ಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ಹುಡುಕಾಟ ಮಾಡೋಣ. ನಮ್ಮ ಆಟ ಆಡುವವರ ಟೈಪಿಂಗ್ ಕೌಶಲ್ಯವನ್ನು ಪರೀಕ್ಷಿಸುವುದು, ಇದು ಎಷ್ಟೋ ಉಪೇಕ್ಷಿತ ಮಹತ್ವದ ಕೌಶಲ್ಯವಾಗಿದೆ ಎಲ್ಲಾ ಡೆವಲಪರ್‌ಗಳಿಗೆ. ಹ್ಯಾಂಡ್ ಫ್ಯಾಕ್ಟ್: ನಾವು ಇಂದು ಬಳಸುತ್ತಿರುವ ಕ್ಯೂಡಬ್ಲ್ಯೂಇಆರ್‌ಟಿವೈ ಕೀಬೋರ್ಡ್ ವಿನ್ಯಾಸವು 1870ರ ದಶಕದಲ್ಲಿ ಟೈಪ್ರೈಟರ್‌ಗಳಿಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲ್ಪಟ್ಟಿದ್ದು — ಮತ್ತು ಉತ್ತಮ ಟೈಪಿಂಗ್ ಕೌಶಲ್ಯಗಳು ಇಂದುವೂ ಪ್ರೋಗ್ರಾಮರ್‌ಗಳಿಗೆ ಬಹಳ ಮುಖ್ಯವಾಗಿವೆ! ಆಟದ ಸಾಮಾನ್ಯ потоки ಹೀಗೆ ಇರುತ್ತದೆ:
+
+```mermaid
+flowchart TD
+    A[ತಂಡ ಆರಂಭಿಸಲು ಕ್ಲಿಕ್ ಮಾಡುತ್ತದೆ] --> B[ಯಾದೃಚ್ಛಿಕ ಉಕ್ತಿಯನ್ನು ತೋರಿಸುತ್ತದೆ]
+    B --> C[ತಂಡ ಪಠ್ಯಪಟ್ಟಿಕೆನೊಳಗೆ ಟೈಪ್ ಮಾಡುತ್ತದೆ]
+    C --> D{ಪದ ಪೂರ್ಣವಾಯಿತೇ?}
+    D -->|ಹೌದು| E[ಮುಂದಿನ ಪದವನ್ನು ಹೈಲೈಟ್ ಮಾಡಿ]
+    D -->|ಇಲ್ಲ| F{ಇದರವರೆಗೆ ಸರಿದಿದ್ದೇ?}
+    F -->|ಹೌದು| G[ಸಾಮಾನ್ಯ ಶೈಲಿಯನ್ನು ಉಳಿಸಿ]
+    F -->|ಇಲ್ಲ| H[ದೋಷ ಶೈಲಿಯನ್ನು ತೋರಿಸಿ]
+    E --> I{ಉಕ್ತಿ ಪೂರ್ಣವಾಯಿತೇ?}
+    I -->|ಇಲ್ಲ| C
+    I -->|ಹೌದು| J[ಸಮಯದೊಂದಿಗೆ ಯಶಸ್ವಿ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ]
+    G --> C
+    H --> C
+```
+**ನಮ್ಮ ಆಟ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:**
+- **ಪ್ರಾರಂಭವಾಗುತ್ತದೆ** ಆಟಗಾರ ಪ್ರಾರಂಭ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮತ್ತು ಯಾದೃಚ್ಛಿಕ ಉಲ್ಲೇಖವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ
+- **ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ** ಆಟಗಾರನ ಟೈಪಿಂಗ್ ಪ್ರಗತಿಯನ್ನು ಪದದಂತೆ ನೈಜ ಸಮಯದಲ್ಲಿ
+- **ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ** ಪ್ರಸ್ತುತ ಪದವನ್ನು ಆಟಗಾರನ ಗಮನ ಸರಿಸಲು
+- **ನೀಡುತ್ತದೆ** ಟೈಪಿಂಗ್ ದೋಷಗಳಿಗೆ ತಕ್ಷಣದ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ
+- **ಗಣನೆ ಮಾಡುತ್ತದೆ** ಮತ್ತು ಪ್ರದರ್ಶಿಸುತ್ತದೆ ಒಟ್ಟು ಸಮಯವನ್ನು ಉಲ್ಲೇಖ ಮುಗಿದ ಮೇಲೆ
+
+ಬನ್ನಿ ನಮ್ಮ ಆಟ ನಿರ್ಮಿಸೋಣ, ಮತ್ತು ಈವೆಂಟುಗಳ ಬಗ್ಗೆ ಕಲಿಯೋಣ!
+
+### ಕಡತ ರಚನೆ
+
+ನಾವು ಕೋಡ್ ಬರೆಯುವ ಮೊದಲು, ವ್ಯವಸ್ಥಿತವಾಗೋಣ! ಪ್ರಾರಂಭದಿಂದ ಸ್ವಚ್ಛ ಕಡತ ರಚನೆ ಹೊಮ್ಮಿಸಲು ನಿಮಗೆ ನಂತರ ತಲೆನೋವು ಕಮ್ಮಿಯಾಗುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಯೋಜನೆಯನ್ನು ವೃತ್ತಿಪರವಾಗಿಸುತ್ತದೆ. 😊
+
+ನಾವು ಸರಳವಾಗಿ ಮೂರು ಕಡತಗಳನ್ನು ಇಡುತ್ತೇವೆ: `index.html` ನಮ್ಮ ಪುಟ ರಚನೆಗೆ, `script.js` ನಮ್ಮ ಆಟದ ಲಾಜಿಕ್‌ಗಳಿಗೆ, ಮತ್ತು `style.css` ಎಲ್ಲವನ್ನು ಸುಂದರವಾಗಿ ತೋರಿಸಲು. ಇದೇ ವೆಬ್‌ಗಳ ಬಹುಮಾನವಾದ ಕ್ಲಾಸಿಕ್ ಟ್ರಿಯೋ!
+
+**ನಿಮ್ಮ ಕೆಲಸಕ್ಕೆ ಹೊಸ ಫೋಲ್ಡರ್ ರಚಿಸಲು ಕಾನ್ಸೋಲ್ ಅಥವಾ ಟರ್ಮಿನಲ್ ವಿಂಡೋ ತೆರೆದ ಬಳಿಕ ಕೆಳಗಿನ ಆದೇಶ ನಡಪಡಿಸಿ:**
+
+```bash
+# ಲಿನಕ್ಸ್ ಅಥವಾ ಮ್ಯಾಕ್ಒಎಸ್
+mkdir typing-game && cd typing-game
+
+# ವಿಂಡೋಸ್
+md typing-game && cd typing-game
+```
+
+**ಈ ಆದೇಶಗಳು ಮಾಡುವುದೇನು:**
+- ನಿಮ್ಮ ಯೋಜನೆ ಕಡತಗಳಿಗಾಗಿ `typing-game` ಎಂದು ಹೊಸ ಡೈರೆಕ್ಟರಿ ಸೃಷ್ಟಿಸುತ್ತದೆ
+- ತಕ್ಷಣಾಗಿ ಆ ಡೈರೆಕ್ಟರಿಯ ಒಳಗೆ ನವಿಗೇಟ್ ಆಗುತ್ತದೆ
+- ನಿಮ್ಮ ಆಟ ಅಭಿವೃದ್ಧಿಗಾಗಿ ಸ್ವಚ್ಛ ಕಾರ್ಯಸ್ಥಳವನ್ನು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ
+
+**ವಿಜುವಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ ತೆರೆಯಿರಿ:**
+
+```bash
+code .
+```
+
+**ಈ ಆದೇಶಕ್ಕೆ:**
+- ಪ್ರಸ್ತುತ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ವಿಜುವಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ
+- ನಿಮ್ಮ ಯೋಜನೆ ಫೋಲ್ಡರನ್ನು ಸಂಕಲಕರಿನಲ್ಲಿ ತೆರೆಯುತ್ತದೆ
+- ಅಭಿವೃದ್ಧಿ ಉಪಕರಣಗಳಿಗೆ ಸತ್ವಬಾಧಿತ ಪ್ರವೇಶ ನೀಡುತ್ತದೆ
+
+**ಈ ಫೋಲ್ಡರ್‌ಗೆ ತಿದ್ದುಪಡಿ ಮಾಡಿ ಮೂರು ಕಡತಗಳನ್ನು ವಿಜುವಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್‌ನಲ್ಲಿ ಸೇರಿಸಿ:**
+- `index.html` - ನಿಮ್ಮ ಆಟದ ರಚನೆ ಮತ್ತು ವಿಷಯವನ್ನು ಹೊಂದಿದೆ
+- `script.js` - ಎಲ್ಲಾ ಆಟ ಲಾಜಿಕ್ ಮತ್ತು ಈವೆಂಟ್ ಶ್ರೋತಗಳ ನಿರ್ವಹಣೆ
+- `style.css` - ದೃಶ್ಯ ಪರಿಣಾಮ ಮತ್ತು ಶೈಲಿಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ
+
+## ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್ ರಚನೆ
+
+ಈಗ ನಾವು ಎಲ್ಲರ ಘಟನಾಚರಣೆ ನಡೆಯುವ ವೇದಿಕೆಯನ್ನು ನಿರ್ಮಿಸೋಣ! ಇದು ಒಂದು ಬಾಹ್ಯಾಕಾಶ ನೌಕೆಯ ನಿಯಂತ್ರಣ ಫಲಕವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವಂತೆ — ನಾವು ಖಚಿತಪಡಿಸೋಣ ಪ್ಲೇಯರ್‌ಗಳಿಗೆ ಬೇಕಾದ ಎಲ್ಲವೂ ಸ್ವಭಾವಿಕವಾಗಿ ಅಲ್ಲಿ ಇರುವಂತೆ.
+
+ನಮ್ಮ ಆಟಕ್ಕೆ ಬೇಕಾದುದೇನೋ ತಿಳಿದುಕೊಳ್ಳೋಣ. ನೀವು ಒಂದು ಟೈಪಿಂಗ್ ಆಟ ಆಡುತ್ತಿದ್ದರೆ, ಪರದೆ ಮೇಲೆ ಏನು ನೋಡಲು ಇಷ್ಟಪಡುತ್ತೀರಿ? ನಾವು ಬೇಕಾದವು ಇಲ್ಲಿ:
+
+| UI ಅಂಶ | ಉದ್ದೇಶ | HTML ಅಂಶ |
+|----------|---------|-----------|
+| ಉಲ್ಲೇಖ ಪ್ರದರ್ಶನ | ಟೈಪ್ ಮಾಡುವ ಪಠ್ಯ ತೋರಿಸುತ್ತದೆ | `<p>` ಜೊತೆಗೆ `id="quote"` |
+| ಸಂದೇಶ ಪ್ರದೇಶ | ಸ್ಥಿತಿ ಮತ್ತು ಯಶಸ್ಸಿನ ಸಂದೇಶಗಳ ಪ್ರದರ್ಶನ | `<p>` ಜೊತೆಗೆ `id="message"` |
+| ಟೆಕ್ಸ್ಟ್ ಇನ್ಪುಟ್ | ಆಟಗಾರರು ಉಲ್ಲೇಖವನ್ನು ಟೈಪ್ ಮಾಡುತ್ತಾರೆ | `<input>` ಜೊತೆಗೆ `id="typed-value"` |
+| ಪ್ರಾರಂಭ ಬಟನ್ | ಆಟ ಪ್ರಾರಂಭಿಸುತ್ತದೆ | `<button>` ಜೊತೆಗೆ `id="start"` |
+
+**UI ರಚನೆಯ ಅರಿವು:**
+- **ವ್ಯವಸ್ಥಿತಗೊಳಿಸುತ್ತದೆ** ವಿಷಯವನ್ನು ಮೇಲಿನಿಂದ ಕೆಳಗೆ ಯುಕ್ತಿಕವಾಗಿ
+- **ನಿಡುತ್ತದೆ** ಅನನ್ಯ ID ಗಳನ್ನು JavaScript ಗಾಗಿ ಗುರಿತಿಸಿಕೊಂಡು
+- **ನಿರ್ದೇಶಿಸುತ್ತದೆ** ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಕ್ರಮವನ್ನು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ
+- **ಒಳಗೊಂಡಿದೆ** ಪಂಚಾಯತಿ HTML ಅಂಶಗಳನ್ನು ಪ್ರವೇಶಣೀಯತೆಗೆ
+
+ಎಲ್ಲಾ ID ಗಳನ್ನು ನಮಗಿಳಿದು ನಾವು ಅವುಗಳನ್ನು JavaScript ನಲ್ಲಿ ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಜೊತೆಗೆ ನಾವು ರಚಿಸುವ CSS ಮತ್ತು JavaScript ಕಡತಗಳಿಗೂ ಪ್ರತ್ಯಯ ನೀಡುತ್ತೇವೆ.
+
+`index.html` ಎಂಬ ಹೊಸ ಕಡತ ಸೃಷ್ಟಿಸಿ. ಕೆಳಗಿನ HTML ಸೇರಿಸಿ:
+
+```html
+<!-- inside index.html -->
+<html>
+<head>
+  <title>Typing game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Typing game!</h1>
+  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
+  <p id="quote"></p> <!-- This will display our quote -->
+  <p id="message"></p> <!-- This will display any status messages -->
+  <div>
+    <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
+    <button type="button" id="start">Start</button> <!-- To start the game -->
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+**ಈ HTML ರಚನೆಯ ಪ್ರಮುಖ ಅಂಶಗಳು:**
+- ಶೈಲಿಗಾಗಿ `<head>` ನಲ್ಲಿ CSS ಶೈಲಿಪುಸ್ತಕವನ್ನು ಲಿಂಕ್ ಮಾಡಲಾಗಿದೆ
+- ಬಳಸುವವರಿಗಾಗಿ ಸ್ಪಷ್ಟ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಸೂಚನೆಗಳನ್ನು ರಚಿಸಲಾಗಿದೆ
+- ಪಲ್ಸ್‌ಹೋಲ್ಡರ್ `<p>`ಗಳು ವಿಶೇಷ ID ಗಳೊಂದಿಗೆ ಗಣಕಯಂತ್ರದಿಂದ ನಿಯಂತ್ರಣ ಮಾಡಲು ಸಿದ್ಧವಾಗಿದೆ
+- ಪ್ರವೇಶಣೀಯತೆ ವಿಷ್ಯಗಳ ಅಂಶಗಳೊಂದಿಗೆ ಇನ್ಪುಟ್ ಫೀಲ್ಡ್ ಹೊಂದಿದೆ
+- ಆಟ ಪ್ರಾರಂಭಿಸಲು ಬಟನ್ ನೀಡಲಾಗಿದೆ
+- ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯಿಗಾಗಿಯೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಡತವು ಅಂತ್ಯದಲ್ಲಿ ಲೋಡ್ ಮಾಡಲಾಗಿದೆ
+
+### ಅಪ್ಲಿಕೇಶನ್ ಪ್ರಾರಂಭಿಸುವುದು
+
+ನೀವು ಆಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಯಮುಕ ভাবে ಪರೀಕ್ಷಿಸುವುದರಿಂದ ಸಮಸ್ಯೆಯನ್ನು ಶೀಘ್ರವಾಗಿ ಹಿಡಿಯಬಹುದು ಮತ್ತು ನೈಜ ಸಮಯದಲ್ಲಿ ಪ್ರಗತಿಯನ್ನು ಕಾಣಬಹುದು. ಲೈವ್ ಸರ್ವರ್ ಒಂದು ಅಮೂಲ್ಯ ಉಪಕರಣವಾಗಿದೆ ಇದು ನೀವು ಉಳಿಸುವಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬ್ರೌಸರ್ ಅನ್ನು ರಿಲೋಡ್ ಮಾಡುತ್ತದೆ, ವಿನ್ಯಾಸ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಿಂದ ಮಾಡುತ್ತದೆ.
+
+ತವಕವಾಗಿ ಸ್ಥಿರಗೊಂಡು ಅಭಿವೃದ್ಧಿ ಮಾಡುವುದು ಉತ್ತಮ. ನಾವು ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಚಾಲನೆ ಮಾಡೋಣ. Visual Studio Code ಗೆ ಐಷಾರಾಮಿ ವಿಸ್ತರಣೆ ಇದ್ದಾರೆ ಅದನ್ನು [ಲೈವ್ ಸರ್ವರ್](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ, ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಹೋಸ್ಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ನೀವು ಕಡತ ಉಳಿಸುವಾಗ ಬ್ರೌಸರ್ ಅನ್ನು ರಿಫ್ರೇಶ್ ಮಾಡುತ್ತದೆ.
+
+**[ಲೈವ್ ಸರ್ವರ್](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) ಸ್ಥಾಪಿಸಲು ಲಿಂಕ್ ಅನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಇನ್‌ಸ್ಟಾಲ್ ಕ್ಲಿಕ್ ಮಾಡಿ:**
+
+**ಈ ಸ್ಥಾಪನೆಯ ವೇಳೆ ಏನು ನಡೆಯುತ್ತದೆ:**
+- ನಿಮ್ಮ ಬ್ರೌಸರ್ ನಿಮ್ಮ Visual Studio Code ತೆರೆಯಲು ಪ್ರಾಂಪ್ಟ್ ಮಾಡುತ್ತದೆ
+- ನೀವು ವಿಸ್ತರಣೆಯ ಸ್ಥಾಪನಾ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಮಾರ್ಗದರ್ಶನ ಪಡೆಯುತ್ತೀರಿ
+- ಸ್ಥಾಪನೆ ಪೂರ್ಣಗೊಳ್ಳಲು Visual Studio Code ಮರುಪ್ರಾರಂಭಿಸುವ ಅಗತ್ಯವಿರಬಹುದು
+
+**ಸ್ಥಾಪನೆಯ ನಂತರ, Visual Studio Code ನಲ್ಲಿ Ctrl-Shift-P (ಅಥವಾ Cmd-Shift-P) ಒತ್ತಿ ಕಮಾಂಡ್ ಪಾಲೆಟ್ ತೆರೆಯಿರಿ:**
+
+**ಕಮಾಂಡ್ ಪಾಲೆಟ್ ಅರ್ಥ:**
+- Visual Studio Code ನ ಎಲ್ಲಾ ಕಮಾಂಡ್‌ಗಳಿಗೆ ತ್ವರಿತ ಪ್ರವೇಶ ಕೊಡುತ್ತದೆ
+- ಟೈಪ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಕಮಾಂಡ್‌ಗಳನ್ನು ಹುಡುಕುತ್ತದೆ
+- ವೇಗದ ಅಭಿವೃದ್ಧಿಗೆ ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್‌ಕಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ
+
+**"Live Server: Open with Live Server" ಎಂದು ಟೈಪ್ ಮಾಡಿ:**
+
+**ಲೈವ್ ಸರ್ವರ್ ಮಾಡುವುದು:**
+- ನಿಮ್ಮ ಯೋಜನೆಗಾಗಿ ಸ್ಥಳೀಯ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಪ್ರಾರಂಭ ಮಾಡುತ್ತದೆ
+- ನೀವು ಕಡತ ಉಳಿಸುವಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬ್ರೌಸರ್ ರಿಫ್ರೇಶ್ ಆಗುತ್ತದೆ
+- ನಿಮ್ಮ ಕಡತಗಳನ್ನು ಸ್ಥಳೀಯ URL (ಸಾಮಾನ್ಯವಾಗಿ `localhost:5500`) ನಲ್ಲಿ ಸರ್ವ್ ಮಾಡುತ್ತದೆ
+
+**ಬ್ರೌಸರ್ ತೆರೆಯಿರಿ ಮತ್ತು `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` ಎಂಬ ಹೊಸ ಕಡತ ರಚಿಸಿ.
+
+### ನಿರಂತರಗಳನ್ನು ಸೇರಿಸೋಣ
+
+ನಾವು ಕಾರ್ಯಾರಂಭಿಸಲು ಮುನ್ನ, ನಮ್ಮ ಎಲ್ಲಾ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸಂಗ್ರಹಿಸೋಣ! ಹೇಗೆ NASA ಮಿಷನ್ನಿನ ನಿಯಂತ್ರಣ ಎಲ್ಲಾ ಮಾನಿಟರಿಂಗ್ ವ್ಯವಸ್ಥೆಗಳನ್ನು ವಿಮಾನಾರಂಭಕ್ಕೂ ಮುನ್ನ ಸಿದ್ಧಪಡಿಸುತ್ತದೆ ಅಷ್ಟೇ, ಎಲ್ಲವನ್ನೂ ಪೂರ್ವಸಿದ್ಧತಾ ಮಾಡುವುದರಿಂದ ಮುಂದೆ ಸರಿಯಾದ ಕೆಲಸ ಸುಲಭವಾಗುತ್ತದೆ. ಇದು ಕೊನೆಗೆ ಬಳಕೆ ಮಿತಿಗಳನ್ನು ಹುಡುಕಬೇಕಾಗದಂತೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಟೈಪೋ ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಸಹಾಯಕ.
+
+ಮೊದಲು ನಾವು ಸಿದ್ಧಪಡಿಸಬೇಕಾದ ವಸ್ತುಗಳು:
+
+| ಡೇಟಾ ಪ್ರಕಾರ | ಉದ್ದೇಶ | ಉದಾಹರಣೆ |
+|--------------|---------|----------|
+| ನಾಲ್ಳುಗಳ ಏರೆ | ಆಟದ ಎಲ್ಲಾ ಸಾಧ್ಯ ನುಡಿ ಸಾಲುಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ | `['Quote 1', 'Quote 2', ...]` |
+| ಪ್ರಚ್ಛದ ನಗರದ | ಪ್ರಸ್ತುತ ನುಡಿ ಸಾಲನ್ನು ವೈಯಕ್ತಿಕ ಶಬ್ದಗಳಲ್ಲಿ ವಿಭಾಗಿಸಿ | `['When', 'you', 'have', ...]` |
+| ಶಬ್ದ ಸೂಚ್ಯಂಕ | ಆಟಗಾರನು ಟೈಪ್ ಮಾಡುತ್ತಿರುವ ಶಬ್ದವನ್ನು ಹಿಡಿದುಕೋಳು | `0, 1, 2, 3...` |
+| ಪ್ರಾರಂಭ ಸಮಯ | ಸ್ಕೋರ್‌ಗಾಗಿ ಕಳೆದ ಸಮಯವನ್ನು ಲೆಕ್ಕಿಸು | `Date.now()` |
+
+**ನಮ್ಮ UI ಎಲಿಮೆಂಟ್ಗಳ ಉಲ್ಲೇಖ ಕೂಡ ಬೇಕಾಗುತ್ತದೆ:**
+| ಅಂಶ | ID | ಉದ್ದೇಶ |
+|---------|----|---------|
+| ಪಠ್ಯ ಇನ್ಪುಟ್ | `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()` ಬಳಸಿ ಅಂಶಗಳನ್ನು ಪಡೆಯಬಹುದು. ಏಕೆಂದರೆ ನಾವು ಈ ಅಂಶಗಳನ್ನು ನಿಯತಕಾಲಿಕವಾಗಿ ಸೂಚಿಸಲಿದ್ದೇವೆ, ಸರಿಯಾದ ಸ್ಟ್ರಿಂಗ್ ಲಿಟ್ಟರಲ್ಸ್ ಬಳಸಿ ಟೈಪೋ ತಪ್ಪಿಸಲು ನಾವು ಕಾನ್ಸ್‌ಟ್ಯಾನ್ಟ್ಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. [Vue.js](https://vuejs.org/) ಅಥವಾ [React](https://reactjs.org/) ಮುಂತಾದ ಫ್ರೇಮ್‌ವರ್ಕ್ಗಳು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಕೇಂದ್ರಿತವಾಗಿ ಉತ್ತಮವಾಗಿ ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ.
+>
+**ಈ ವಿಧಾನವು ಏಕೆ ಉತ್ತಮವಾಗಿದೆ ಎಂಬುದಕ್ಕೆ ಕಾರಣಗಳು:**
+- **ಬರವಣಿಗೆಯ ತಪ್ಪುಗಳನ್ನು** ನಿರೋಧಿಸುತ್ತದೆ, ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹಲವಾರು ಬಾರಿ ಸೂಚಿಸುವಾಗ
+- **ವಿವರಣಾತ್ಮಕ ಕಾಂಸ್ಟ್ ಹೆಸರಿನಿಂದ** ಕೋಡ್ ಓದುಗರತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ
+- **IDE ಬೆಂಬಲದಲ್ಲಿ** ಸ್ವಯಂ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಯನ್ನು ಮತ್ತು ದೋಷ ಪರಿಶೀಲನೆಯನ್ನು ಸಾಧ್ಯಮಾಡುತ್ತದೆ
+- **ಪುನರ್ ಸ್ಥಾಪನೆಯನ್ನು** ಸುಲಭಗೊಳಿಸುತ್ತದೆ, ನಂತರ ಎಲಿಮೆಂಟ್ ID ಬದಲಾದರೆ
+
+`const`, `let` ಮತ್ತು `var` ಬಳಸುವ ಬಗ್ಗೆ ವಿಡಿಯೋ ನೋಡಲು ಒಂದು ನಿಮಿಷ ಕೊಡಿ
+
+[![ವೇರಿಯಬಲಿನ ಪ್ರಕಾರಗಳು](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "ವೇರಿಯಬಲಿನ ಪ್ರಕಾರಗಳು")
+
+> 🎥 ವೇರಿಯಬಲ್ಗಳ ಬಗ್ಗೆ ವಿಡಿಯೋ ನೋಡಲು ಮೇಲಿನ ಚಿತ್ರ ಕ್ಲಿಕ್ ಮಾಡಿ.
+
+### ಪ್ರಾರಂಭ ತರ್ಕ ಸೇರಿಸಿ
+
+ಇಲ್ಲಿ ಎಲ್ಲವೂ ಜೋಡಣೆಯಾಗುತ್ತದೆ! 🚀 ನೀವು ನಿಮ್ಮ ಮೊದಲ ನಿಜವಾದ ಘಟನಾ ಶ್ರೋತೆಯನ್ನು ಬರೆಯುತ್ತಿದ್ದೀರಿ, ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಬಟನ್ ಕ್ಲಿಕ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದನ್ನು ಕಂಡಾಗ ಸಂತೋಷವಾಗುತ್ತದೆ.
+
+ಒಂದು ಬಾರಿ ಯೋಚಿಸಿ: ಯಾರಾದರೂ ಆ "Start" ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಲಿದ್ದಾರೆ, ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಅವರಿಗೆ ಸಿದ್ಧವಾಗಿರಬೇಕು. ಅವರು ಯಾವಾಗ ಕ್ಲಿಕ್ ಮಾಡಬೇಕೋ ನಮಗೆ ತಿಳಿದಿಲ್ಲ- ತಕ್ಷಣ ಅಥವಾ ಕಾಫಿ ಕುಡಿಯಬಹುದು- ಆದರೆ ಅವರು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ನಿಮ್ಮ ಆಟ ಬದುಕು ಹಿಡಿದೀತು.
+
+ಬಳಕೆದಾರರು `start` ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ನಾವು ಒಂದು ನುಡಿ ಸಾಲನ್ನು ಆರಿಸಿ, ಬಳಕೆದಾರ ಮುಖಮುಖಿಯಿಂದ ತಯಾರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರಸ್ತುತ ಶಬ್ದ ಮತ್ತು ಸಮಯದ ಟ್ರ್ಯಾಕಿಂಗ್ ಅಳವಡಿಸುತ್ತೇವೆ. ಕೆಳಗಿನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನೀವು ಸೇರಿಸಬೇಕಾಗಿರುವುದು; ನಾವು ಇದರ ಬಗ್ಗೆ ಅದು ಪಾಠದ ನಂತರ ಚರ್ಚಿಸೋಣ.
+
+```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 ನವೀಕರಣಗಳು
+  // ಕ್ಲಾಸ್ ಸೆಟ್ ಮಾಡಲು span ಲೆಮೆಂಟ್‌ಗಳ ಸರಣಿಯನ್ನು ರಚಿಸಿ
+  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
+  // ಸ್ಟ್ರಿಂಗ್ ಆಗಿ ಪರಿವರ್ತಿಸಿ ಮತ್ತು ಉಪಮಾನದ ಪ್ರದರ್ಶನದಲ್ಲಿ 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ಕ್ಕೆ ಮರುಹೊಂದಿಸುತ್ತದೆ
+- ಹೊಸ ಸುತ್ತ oscillateಗೆ ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಸಜ್ಜುಗೊಳಿಸುತ್ತದೆ
+
+**🎨 UI ಸಜ್ಜುಗಾರಿಕೆ ಮತ್ತು ಪ್ರದರ್ಶನ:**
+- ಪ್ರತಿ ಶಬ್ದವನ್ನು ವೈಯಕ್ತಿಕ ಅಂಶಕ್ಕಾಗಿ `<span>` ಎಲಿಮೆಂಟ್‌ಗಳಲ್ಲಿ ಪರಿವರ್ತಿಸುತ್ತದೆ
+- DOM ನವೀಕರಣಕ್ಕಾಗಿ span ಅಂಶಗಳನ್ನು ಒಟ್ಟು ಸ್ಟ್ರಿಂಗ್ ಆಗಿ ಜೋಡಿಸುತ್ತದೆ
+- ಮೊದಲ ಶಬ್ದದ ಮೇಲೆ `highlight` ಶೈಲಿ ವರ್ಗವನ್ನು ಜೋಡಿಸಿ ವಿಶೇಷವಾಗಿ ತೋರಿಸುತ್ತದೆ
+- ಯಾವುದೇ ಹಳೆಯ ಆಟದ ಸಂದೇಶಗಳನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ ಸ್ವಚ್ಛವಾಗಿರಲು
+
+**⌨️ ಪಠ್ಯಪೆಟ್ಟು ಸಿದ್ಧತೆ:**
+- ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರದಲ್ಲಿನ ಯಾವುದೇ ಪಠ್ಯ ತೆರವುಗೊಳಿಸುತ್ತದೆ
+- ಆಟಗಾರರು ತಕ್ಷಣ ಟೈಪ್ ಮಾಡುವುದು ಆರಂಭಿಸುವಂತೆ ಫೋಕಸ್ ನ್ನು ಕೊಡುತ್ತದೆ
+- ಹೊಸ ಆಟದ ಅಧಿವೇಶನಕ್ಕಾಗಿ ಇನ್ಪುಟ್ ಪ್ರದೇಶವನ್ನು ಸಜ್ಜುಗೊಳಿಸುತ್ತದೆ
+
+**⏱️ ಟೈಮರ್ ಪ್ರಾರಂಭ:**
+- `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++;
+    // ಉಲ್ಲೇಖದಲ್ಲಿನ ಎಲ್ಲಾ ಅಂಶಗಳ ಕ್ಲಾಸ್ ಹೆಸರನ್ನು ರೀಸೆಟ್ ಮಾಡಿ
+    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[ಇನ್ಪುಟ್ ತೆರವುಮಾಡಿ, ಮುಂದಿನ ಪದಕ್ಕೆ ಸರಿಸಿ, ಹೈಲೈಟ್ ನವೀಕರಿಸಿ]
+    E -->|ಇಲ್ಲ| G{ಈವರೆಗೆ ಸರಿಯಾಗಿ ಟೈಪ್ ಮಾಡಲಾಗುತ್ತಿದೆ ಇದೆಯಾ?}
+    G -->|ಹೌದು| H[ದೋಷ ಶೈಲಿಯನ್ನು ತೆಗೆಯಿರಿ]
+    G -->|ಇಲ್ಲ| I[ದೋಷ ಶೈಲಿಯನ್ನು ತೋರಿಸಿ]
+```
+**🏁 ನುಡಿ ಪೂರ್ಣ (ಸ್ಥಿತಿ 1):**
+- ಟೈಪ್ ಮಾಡಿದ ಮೌಲ್ಯವು ಪ್ರಸ್ತುತ ಶಬ್ದಕ್ಕೆ ಸರಿ ಮತ್ತು ನಾವು ಕೊನೆಯ ಶಬ್ದದಲ್ಲಿ ಇದ್ದೇವೆ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಪ್ರಾರಂಭ ಸಮಯದಿಂದ ಪ್ರಸ್ತುತ ಸಮಯ ವರೆಗಿನ ಕಳೆದ ಸಮಯ ಲೆಕ್ಕಿಸುತ್ತದೆ
+- ಸೆಕೆಂಡುಗಳಿಗೆ ಪರಿವರ್ತಿಸಲು 1,000 ರಿಂದ ಭಾಗಿಸುತ್ತದೆ
+- ಪೂರ್ಣಗೊಳಿಸುವ ಸಮಯದೊಂದಿಗೆ ಅಭಿನಂದನೆ ಸಂದೇಶವನ್ನು ತೋರಿಸುತ್ತದೆ
+
+**✅ ಶಬ್ದ ಪೂರ್ಣ (ಸ್ಥಿತಿ 2):**
+- ಇನ್ಪುಟ್ ಕೊನೆಯಲ್ಲಿ ತೆರವು ಇರುವಾಗ ಶಬ್ದ ಪೂರ್ಣವಾಗಿದೆ ಎಂದು ಪತ್ತೆ ಹಚ್ಚುತ್ತದೆ
+- ಕಡಿತವಾದ ಇನ್ಪುಟ್ ಪ್ರಸ್ತುತ ಶಬ್ದಕ್ಕೊಮ್ಮೆ ಸರಿಹೊತ್ತುದು ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಮುಂದಿನ ಶಬ್ದಕ್ಕೆ ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರವನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ
+- `wordIndex` ಅನ್ನು ಹೆಚ್ಚಿಸಿ ಮುಂದಿನ ಶಬ್ದಕ್ಕೆ ಸಾಗುತ್ತದೆ
+- ಹೈಲೈಟ್ ಮಾಡಿದ ಶಬ್ದವನ್ನು ನವೀಕರಿಸಲು ಎಲ್ಲಾ ವರ್ಗಗಳನ್ನು ತೆರವುಗೊಳಿಸಿ ಹೊಸ ಶಬ್ದವನ್ನು ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ
+
+**📝 ಟೈಪಿಂಗ್ ಪ್ರಗತಿಯಲ್ಲಿದೆ (ಸ್ಥಿತಿ 3):**
+- ಪ್ರಸ್ತುತ ಶಬ್ದವು ಈಗಾಗಲೇ ಟೈಪ್ ಮಾಡಲಾದವುಗಳಿಂದ ಪ್ರಾರಂಭವಾಗಿದೆ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಯಾವುದೇ ದೋಷ ಶೈಲಿಯನ್ನು ತೆರವುಗೊಳಿಸಿ ಇನ್ಪುಟ್ ಸರಿಯಾದದ್ದು ಎಂದು ತೋರಿಸುತ್ತದೆ
+- ತಡೆರಹಿತವಾಗಿ ನವೀಕರಿಸುವಿಕೆ ಅನುಮತಿಸುತ್ತದೆ
+
+**❌ ದೋಷ ಸ್ಥಿತಿ (ಸ್ಥಿತಿ 4):**
+- ಟೈಪ್ ಮಾಡಿದ ಪಠ್ಯ ನಿರೀಕ್ಷಿತ ಶಬ್ದ ಪ್ರಾರಂಭದೊಂದಿಗೆ ಹೊಂದಿಕೆಯಿಲ್ಲದಾಗ ಪ್ರಚೋದಿಸುತ್ತಿದೆ
+- ತಕ್ಷಣದ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಗೆ ದೋಷ CSS ವರ್ಗವನ್ನು ಜೋಡಿಸುತ್ತದೆ
+- ಆಟಗಾರರಿಗೆ ದೋಷಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಗುರುತಿಸಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ಸಹಾಯಮಾಡುತ್ತದೆ
+
+## ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಪರೀಕ್ಷಿಸಿ
+
+ನೀವು ಏನು ಸಾಧಿಸಿದ್ದೀರೋ ನೋಡಿರಿ! 🎉 ನೀವು ಇವೆಂಟ್‌ ಚಾಲಿತ ಕಾರ್ಯಕ್ರಮವನ್ನು ಬಳಸಿ ನಿಜವಾದ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಟೈಪಿಂಗ್ ಆಟವನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಾ. ಅದನ್ನು ಮೆಚ್ಚಿಕೊಳ್ಳಲು ಒಂದು ಕ್ಷಣ ತೆಗೆದುಕೊಳ್ಳಿ- ಇದು ಸಣ್ಣ ಸಾಧನೆಯಲ್ಲ!
+
+ಈಗ ಪರೀಕ್ಷಿಸುವ ಹಂತ ಬಂದಿದೆ! ಇದು ನಿರೀಕ್ಷಿಸಿದಂತೆ ಕೆಲಸ ಮಾಡುವುದೇ? ನಾವು ಏನಾದರೂ ತಪ್ಪಿಸಿಕೊಂಡಿರಾ? ಹಾಗಾದರೆ ನಿಮ್ಮಿಗೆ ತಿಳಿಯಲಿ: ತಕ್ಷಣವೇ ಎಲ್ಲವೂ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡದಿದ್ದರೂ, ಅದು ಸಾಮಾನ್ಯ. ಅನುಭವಿಗಳಾದ ಡೆವಲಪರ್ಗಳು ಸಹ ತಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ ಹೆಚ್ಚಿನ ವೇಳೆ ದೋಷಗಳನ್ನು ನೋಡುತ್ತಾರೆ. ಇದು ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯ ಭಾಗ.
+
+`start` ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಟೈಪ್ ಮಾಡಬಿಡಿ! ಇದು ಹಿಂದೆ ನಾವು ನೋಡಿದ ಆನಿಮೇಷನ್‌ನಂತೆ ಕಾಣಬೇಕು.
+
+![ಆಟದ ಚಲನಚಿತ್ರ](../../../../4-typing-game/images/demo.gif)
+
+**ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಬೇಕಾದವು:**
+- ಸ್ಟಾರ್ಟ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಯಾದೃಚ್ಛಿಕ ನುಡಿ ಸಾಲು ಪ್ರದರ್ಶಿತವಾಗುತ್ತದೆ ಎಂದು ಪರಿಶೀಲಿಸು
+- ಟೈಪಿಂಗ್ ಪ್ರಸ್ತುತ ಶಬ್ದವನ್ನು ಅಚ್ಚವಾಗಿ ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
+- ತಪ್ಪು ಟೈಪಿಂಗ್‌ಗೆ ದೋಷ ಶೈಲಿ ತೋರಿಕೆಯಾಗುತ್ತದೆ ಎಂದು ಪರಿಶೀಲಿಸಿ
+- ಶಬ್ದಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸುವಾಗ ಹೈಲೈಟ್ ಸರಿಯಾಗಿ ಮುಂದುವರಿಯುತ್ತದೆ ಎಂಬುದನ್ನು ಪರೀಕ್ಷಿಸಿ
+- ನುಡಿ ಸಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಸಮಯದೊಂದಿಗೆ ಸಂಪೂರ್ಣ ನಿಮ್ಮ ಸಂದೇಶ ತೋರಿಸುತ್ತದೆ
+
+**ಸಾಮಾನ್ಯ ದೋಷ ಪರಿಶೀಲಿಸುವ ಸಲಹೆಗಳು:**
+- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳಿಗಾಗಿ ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್ (F12) ಪರಿಶೀಲಿಸಿ
+- ಎಲ್ಲ ಫೈಲ್ ಹೆಸರು ಸೂಕ್ಷ್ಮ ಭೇದಗಳೊಂದಿಗೆ ಸರಿಹೊಂದಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
+- ಲೈವ್ ಸರ್ವರ್ ಸರಿಯಾಗಿ ಚಾಲಿತವಾಗಿ ರಿಫ್ರೆಶ್ ಆಗುತ್ತಿದೆಯೇ ಎಂದು ತಪಾಸಣೆ ಮಾಡಿ
+- ವಿಭಿನ್ನ ನುಡಿ ಸಾಲುಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ ಯಾದೃಚ್ಛಿಕ ಆಯ್ಕೆ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🎮
+
+ನಿಮ್ಮಿಕೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ಆಟಗಾರರ ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಧಾರದ ಮೇಲೆ ಆಟವನ್ನು ಹೊಂದಿಸುವ ಕಠಿಣತೆ ವ್ಯವಸ್ಥೆಯನ್ನು ಜಾರಿಗೆ ತಂದು ಟೈಪಿಂಗ್ ಆಟವನ್ನು ವಿಸ್ತರಿಸಿ. ಈ ಸವಾಲು ಉನ್ನತ ಮಟ್ಟದ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್, ಡೇಟಾ ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ಡೈನಾಮಿಕ್ UI ನವೀಕರಣಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಟೈಪಿಂಗ್ ಆಟಕ್ಕೆ ಕಠಿಣತೆ ಹೊಂದಿಸುವ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿ ಅದು:
+1. ಆಟಗಾರರ ಟೈಪಿಂಗ್ ವೇಗ (ನಿಮಿಷಕ್ಕೆ ಶಬ್ದಗಳು) ಮತ್ತು ಸರಿಯಾದತ್ತೆಯ ಪ್ರಮಾಣವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ
+2. ತ್ರಿಯಾದ ಕಠಿಣತೆ ಮಟ್ಟಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ: ಸುಲಭ (ಸರಳ ನುಡಿಗಳು), ಮಧ್ಯಮ (ಪ್ರಸ್ತುತ ನುಡಿಗಳು), ಕಠಿಣ (ವಿರಾಮಚಿಹ್ನೆಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ನುಡಿಗಳು)
+3. ಪ್ರಸ್ತುತ ಕಠಿಣತೆ ಮತ್ತು ಆಟಗಾರರ ಅಂಕಿಅಂಶಗಳನ್ನು UI ಯಲ್ಲಿಸಿ ತೋರಿಸುತ್ತದೆ
+4. 3 ಸರಳ ಪ್ರದರ್ಶನಗಳ ನಂತರ ಕಠಿಣಿಕತೆಯನ್ನು ಹೆಚ್ಚಿಸುವ ಸ್ಟ್ರೀಕ್ ಕೌಂಟರ್ ಅನ್ನು ಜಾರಿಗೆ ತರಬೇಕು
+5. ಕಠಿಣತೆ ಬದಲಬೇಕಾದಾಗ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ (ಬಣ್ಣಗಳು, ಚಲನಚಿತ್ರಗಳು) ಒದಗಿಸುತ್ತದೆ
+
+ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಜಾರಿಗೊಳಿಸಲು ಅಗತ್ಯವಿರುವ HTML ಅಂಶಗಳು, CSS ಶೈಲಿಗಳು ಮತ್ತು JavaScript ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಸೇರಿಸಿ. ತರ್ಕಪೂರ್ವಕ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಸರಿಯಾದ ARIA ಲೇಬಲ್‌ಗಳೊಂದಿಗೆ ಆಟವು ಪ್ರವೇಶಾರ್ಹವಾಗಿರಬೇಕಾಗಿದೆ.
+
+[ಏಜೆಂಟ್ ಮೋಡ್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚು ತಿಳಿದುಕೊಳ್ಳಿ.
+
+## 🚀 ಸವಾಲು 
+
+ನಿಮ್ಮ ಟೈಪಿಂಗ್ ಆಟದ ಮುಂದಿನ ಹಂತಕ್ಕೆ ಹೋಗಲು ಸಿದ್ಧರಾ? ಈ ಉನ್ನತ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಜಾರಿಗೊಳಿಸುವ ಮೂಲಕ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು DOM ಮ್ಯ nuoಗಳನ್ನು ನಿಮ್ಮ ಅರಿವು ಹೆಚ್ಚಿಸಿ:
+
+**ಹೆಚ್ಚಿನ ಕಾರ್ಯಕ್ಷಮತೆ ಸೇರಿಸಿ:**
+
+| ವೈಶಿಷ್ಟ್ಯ | ವಿವರಣೆ | ನೀವು ಅಭ್ಯಾಸ ಮಾಡುವ ಕೌಶಲಗಳು |
+|---------|-------------|------------------------|
+| **ಇನ್ಪುಟ್ ನಿಯಂತ್ರಣ** | ಪೂರ್ಣಗೊಂಡ ನಂತರ `input` ಇವೆಂಟ್ ಶ್ರೋತೆಯನ್ನು ನಿಷೇಧಿಸಿ, ಮತ್ತು ಬಟನ್ ಕ್ಲಿಕ್ ಆಗುವಾಗ ಮತ್ತೆ ಸಕ್ರಿಯಗೊಳಿಸಿ | ಇವೆಂಟ್ ನಿರ್ವಹಣೆ ಮತ್ತು ಸ್ಥಿತಿ ನಿಯಂತ್ರಣ |
+| **UI ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ** | ಆಟಗಾರ ನುಡಿ ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಪಠ್ಯ ಪೆಟ್ಟಿಗೆಯನ್ನು ನಿಷೇಧಿಸಿ | DOM ಗುಣಲಕ್ಷಣದ ಮಾನಿಪ್ಯುಲೇಶನ್ |
+| **ಮೋಡಲ್ ಡೈಲಾಗ್** | ಯಶಸ್ವೀ ಸಂದೇಶವನ್ನು ಹೊಂದಿರುವ ಮೋಡಲ್ ಡೈಲಾಗ್ ಬಾಕ್ಸ್ ತೋರಿಸಿ | ಉನ್ನತ UI ಮಾದರಿಗಳು ಮತ್ತು ಪ್ರವೇಶಾರ್ಹತೆ |
+| **ಹೈ ಸ್ಕೋರ್ ವ್ಯವಸ್ಥೆ** | `localStorage` ಬಳಸಿ ಹೈ ಸ್ಕೋರ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ | ಬ್ರೌಸರ್ ಸಂಗ್ರಹಣಾ APIಗಳು ಮತ್ತು ಡೇಟಾ ಸ್ಥಿರತೆ |
+
+**ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆ ಸಲಹೆಗಳು:**
+- ಸತತ ಸಂಗ್ರಹಣೆಗೆ `localStorage.setItem()` ಮತ್ತು `localStorage.getItem()` ಬಗ್ಗೆ ಸಂಶೋಧನೆ ಮಾಡಿ
+- ಇವೆಂಟ್ ಶ್ರೋತೆಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಸೇರಿಸುವ ಮತ್ತು ತೆಗೆದುಹಾಕುವ ಅಭ್ಯಾಸ ಮಾಡಿ
+- HTML ಡೈಲಾಗ್ ಅಂಶಗಳ ಅಥವಾ CSS ಮೋಡಲ್ ಮಾದರಿಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+- ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ನಿಷೇಧ ಮತ್ತು ಸಕ್ರಿಯಗೊಳಿಸುವಾಗ ಪ್ರವೇಶಾರ್ಹತೆಯನ್ನು ಪರಿಗಣಿಸಿ
+
+## ಉಪನ್ಯಾಸೋತ್ತರ ಕ್ವಿಜ್
+
+[ಉಪನ್ಯಾಸೋತ್ತರ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/22)
+
+---
+
+## 🚀 ನಿಮ್ಮ ಟೈಪಿಂಗ್ ಆಟದ ಮಾಸ್ಟರಿ ವೇಳಾಪಟ್ಟಿ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು**
+- [ ] ನಿಮ್ಮ ಟೈಪಿಂಗ್ ಆಟವು ವಿವಿಧ ನುಡಿ ಸಾಲುಗಳೊಂದಿಗೆ ಸುಗಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಪರೀಕ್ಷಿಸಿ
+- [ ] CSS ಶೈಲಿಯನ್ನು ಪ್ರಯೋಗಿಸಿ- ಹೈಲೈಟ್ ಮತ್ತು ದೋಷ ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸಲು ಯತ್ನಿಸಿ
+- [ ] ನಿಮ್ಮ ಬ್ರೌಸರ್ ಡೆವ್‌ಟೂಲ್ಸ್ (F12) ತೆರೆದು ಆಟವಾಡುವಾಗ ಕನ್ಸೋಲನ್ನು ನೋಡು
+- [ ] ಸಾಧ್ಯವಾದಷ್ಟು ವೇಗವಾಗಿ ಒಂದು ನುಡಿ ಸಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ನಿಮ್ಮನ್ನು ಚಾಲೇಂಜ್ ಮಾಡಿ
+
+### ⏰ **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದುದು**
+- [ ] ಏರೆಯಲ್ಲಿ ಇನ್ನಷ್ಟು ನುಡಿ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಿ (ನಿಮ್ಮ ಪಾಸಂದಿನ ಪುಸ್ತಕಗಳು ಅಥವಾ ಚಿತ್ರದ ನುಡಿಗಳಿಂದ)
+- [ ] ಸವಾಲಿನ ವಿಭಾಗದಿಂದ `localStorage` ಹೈ ಸ್ಕೋರ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಜಾರಿಗೊಳಿಸಿ
+- [ ] ಪ್ರತಿ ಆಟದ ನಂತರ ಪ್ರದರ್ಶನ ಮಾಡುವ ನಿಮಿಷಕ್ಕೆ ಶಬ್ದಗಳ ಗಣಕ ರಚಿಸಿ
+- [ ] ಸರಿಯಾದ ಟೈಪಿಂಗ್, ತಪ್ಪುಗಳು ಮತ್ತು ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಗಾಗಿ ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರ-ನಿರಂತರ ಸಾಹಸ**
+- [ ] ಸ್ನೇಹಿತರು ಪಕ್ಕದಲ್ಲಿ ಸ್ಪರ್ಧಿಸಲು ಮಲ್ಟಿಪ್ಲೇಯರ್ ಆವೃತ್ತಿ ರಚಿಸಿ
+- [ ] ವಿಭಿನ್ನ ಕಠಿಣತಾ ಮಟ್ಟಗಳೊಂದಿಗೆ ವಿಭಿನ್ನ ನುಡಿ ಸಾಲುಗಳನ್ನೊಳಗೊಂಡ ಆಟ ರಚಿಸಿ
+- [ ] ನುಡಿ ಸಾಲು ಎಷ್ಟು ಪೂರ್ಣಮಾಡಲಾಗಿದೆ ಎಂಬುದನ್ನು ತೋರಿಸುವ ಪ್ರಗತಿ ಬಾರನ್ನು ಸೇರಿಸಿ
+- [ ] ವೈಯಕ್ತಿಕ ಅಂಕಿಅಂಶಗಳ ಟ್ರ್ಯಾಕಿಂಗ್ ಗಾಗಿ ಬಳಕೆದಾರ ಖಾತೆಗಳನ್ನು ಜಾರಿಗೆ ತರಿರಿ
+- [ ] ಕಸ್ಟಮ್ ಥೀಮ್‌ಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಿ ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ತಮ್ಮ ಇಷ್ಟದ ಶೈಲಿಯನ್ನು ಆರಿಸುವ ಅವಕಾಶ ನೀಡಿ
+
+### 🗓️ **ನಿಮ್ಮ ತಿಂಗಳ ನವೀಕರಣ**
+- [ ] ಸರಿಯಾದ ಬೊಜ್ಜೆ ಆವರಣವನ್ನು ಕ್ರಮಕ್ರಮವಾಗಿ ಕಲಿಸುವ ಪಾಠಗಳೊಂದಿಗೆ ಟೈಪಿಂಗ್ ಕೋರ್ಸ್ ರಚಿಸಿ
+- [ ] ಯಾವೆಲ್ಲ ಅಕ್ಷರಗಳು ಅಥವಾ ಶಬ್ದಗಳು ಹೆಚ್ಚು ದೋಷಕಾರಿಯಾಗಿರುವುದನ್ನು ತೋರಿಸುವ ವಿಶ್ಲೇಷಣೆ ರಚಿಸಿ
+- [ ] ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಮತ್ತು ಕೀಬೋರ್ಡ್ ಬಣ್ಣರೂಪಗಳಿಗೆ ಬೆಂಬಲ ಸೇರಿಸಿ
+- [ ] ಶಿಕ್ಷಣ APIs ಗಳೊಂದಿಗೆ ಲಿಂಕ್ ಮಾಡಿ ಸಾಹಿತ್ಯ ಡೇಟಾಬೇಸಿನಿಂದ ನುಡಿ ಸಾಲುಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ
+- [ ] ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿಗೊಳ್ಳಿಸಿದ ಟೈಪಿಂಗ್ ಆಟವನ್ನು ಇತರರು ಬಳಸಲು ಮತ್ತು ಅನುಭವಿಸಲು ಪ್ರಕಟಿಸಿರಿ
+
+### 🎯 **ಅಂತಿಮ ಪರಿಗಣನೆ**
+
+**ಮುಂದೆ ಸಾಗುವ ಮೊದಲು, ಒಂದು ಕ್ಷಣ ತೆಗೆದು ಹಬ್ಬಿಸಿಕೊಳ್ಳಿ:**
+- ಈ ಆಟ ನಿರ್ಮಿಸುವಾಗ ನೀವು ಯಾರಿಗೆ ಅನಿಸಿತು ಅತಿ ಸಂತೋಷದ ಕ್ಷಣ ಯಾವುದು?
+- ನೀವು ಪ್ರಾರಂಭಿಸಿದ ಸಮಯಕ್ಕೆ ಹೋಲಿಸಿದರೆ ಈಗಾಗಲೇ ಇವೆಂಟ್ ಚಾಲಿತ ಕಾರ್ಯಕ್ರಮದ ಬಗ್ಗೆ ನೀವು ಹೇಗಿದ್ದೀರಾ?
+- ಈ ಆಟಕ್ಕೆ ನೀವು ಹೊಂದಿಸಲು ಉತ್ಸುಕವಾಗಿರುವ ಒಂದು ವೈಶಿಷ್ಟ್ಯ ಯಾವುದು?
+- ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ನೀವು ಬೇರೆ ಯೋಜನೆಗಳಿಗೆ ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು?
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಈವೆಂಟ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ವಿಶ್ವಾಸ ಸಹಸ್ರ
+    section ಇವತ್ತು
+      ಈವೆಂಟ್‌ಗಳನ್ನು ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳುವುದು: 3: You
+      UI ನಿರ್ಮಾಣ ಮಾಡುವುದು: 4: You
+      ಈವೆಂಟ್ ಶ್ರೋತೆಗಳನ್ನು ಬರೆಯುವುದು: 5: You
+    section ಈ ವಾರ
+      ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸುವುದು: 4: You
+      ದೋಷಗಳ ಪರಿಶೀಲನೆ: 5: You
+      ಬಳಕೆದಾರ ಅನುಭವ ಸುಧಾರಣೆ: 4: You
+    section ಮುಂದಿನ ತಿಂಗಳು
+      ಜಟಿಲ ಅಪ್ಲಿಕೇಶನ್ಗಳ ನಿರ್ಮಾಣ: 5: You
+      ಇತರರಿಗೆ ಕಲಿಸುವುದು: 5: You
+      ಫ್ರೇಮ್ವರ್ಕ್ ಗಳು ರಚಿಸುವುದು: 5: You
+```
+> 🌟 **ಜ್ಞಾಪನೆ**: ನೀವು ಇದೀಗ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವೆಬ್‌ಸೈಟ್ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಅಡಿಪಾಯವಾಗಿರುವ ಹೃದಯಭಾಗವನ್ನು ಬಲ್ಲಿರಿ. ಇವೆಂಟ್ ಚಾಲಿತ ಕಾರ್ಯಕ್ರಮವೇ ವೆಬ್ ಅನ್ನು ಜೀವಂತವಾಗಿ ಹಾಗೂ ಪ್ರತಿಕ್ರಿಯಾಶೀಲವಾಗಿಸುವುದಕ್ಕೆ ಕಾರಣ. ಪ್ರತಿಗೂಡುಮೆನ್ನುಗಳನ್ನು ನೋಡಿದಾಗ, ನೀವು ಟೈಪ್ ಮಾಡುತ್ತಿದ್ದಂತೆ ಪರಿಶೀಲನೆಯಿಂದ ಕೂಡಿದ ಫಾರ್ಮ್, ಅಥವಾ ಕ್ಲಿಕ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಆಟ, ಎಲ್ಲವೂ ಈಗ ನಿಮ್ಮಿಗೆ ಗೊತ್ತಾದ ಮಾಯಾಜಾಲ. ನೀವು ಕೇವಲ ಕೋಡ್ ಕಲಿಯೋದು ಮಾತ್ರವಲ್ಲದೆ, ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತಿದ್ದೀರಿ! 🎉
+
+---
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+[ಬ್ರೌಸರ್ ಮೂಲಕ ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಇವೆಂಟ್‌ಗಳ ಪಟ್ಟಿ](https://developer.mozilla.org/docs/Web/Events) ಓದಿ ಮತ್ತು ನೀವು ಯಾವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಯಾವ ಇವೆಂಟ್ ಅನ್ನು ಉಪಯೋಗಿಸುವಿರೋ ಪರಿಗಣಿಸಿ.
+
+## ಕಾರ್ಯ
+
+[ಹೊಸ ಕೀಬೋರ್ಡ್ ಆಟವನ್ನು ರಚಿಸಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತಪ್ಪು ನಿರಾಕರಣೆ**:
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗಾಗಿ ಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಗ್ರಹಿಕೆಗಳ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಕ್ರಿಯೆಗಳ ಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/4-typing-game/typing-game/assignment.md

@@ -0,0 +1,57 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3eac59d70e2532a677a2ce6bf765485a",
+  "translation_date": "2026-01-08T18:29:11+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಹೊಸ ಕೀಬೋರ್ಡ್ ಆಟವನ್ನು ರಚಿಸಿ
+
+## ಸೂಚನೆಗಳು
+
+ನೀವು ಟೈಪಿಂಗ್ ಆಟದೊಂದಿಗೆ ಇವೆಂಟ್ ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಮೂಲಭೂತಾಂಶಗಳನ್ನು ಸಂಪೂರ್ಣ maîtrise ಮಾಡಿರುವುದರಿಂದ, ಈಗ ನಿಮ್ಮ ಸೃಜನಶೀಲತೆಯನ್ನು ಬಿಡುಗಡೆಯಾಗಿಸುವ ಸಮಯವಾಗಿದೆ! ನೀವು ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್, DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ಮತ್ತು ಬಳಕೆದಾರ ಸಂವಹನ ಮಾದರಿಗಳ ಅರ್ಥವನ್ನು ತೋರಿಸುವ ನಿಮ್ಮ ಸ್ವಂತ ಕೀಬೋರ್ಡ್ ಆಧಾರಿತ ಆಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ ಮತ್ತು ನಿರ್ಮಿಸುತ್ತೀರಿ.
+
+ವಿಶಿಷ್ಟ ಕಾರ್ಯಗಳನ್ನು ನೆರವೇರಿಸಲು ಕೀಬೋರ್ಡ್ ಇವೆಂಟ್‌ಗಳನ್ನು ಬಳಸುವ ಸಣ್ಣ ಆಟವನ್ನು ರಚಿಸಿ. ಇದು ಬೇರೆ ರೀತಿಯ ಟೈಪಿಂಗ್ ಆಟವಾಗಿರಬಹುದು, ಕೀ ನಿಯಂತ್ರಣಗಳಲ್ಲಿ ಪರಿಕಲ್ಪನೆಗೆ ತಕ್ಕಂತೆ ಪರದೆಗೆ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಚಿತ್ರಿಸುವ ಕಲಾತ್ಮಕ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿರಬಹುದು, ಏರೋ ಕೀಗಳೊಂದಿಗೆ ನಿಯಂತ್ರಿಸುವ ಸರಳ ಆರ್ಕೇಡ್-ಶೈಲಿ ಆಟವಾಗಿರಬಹುದು, ಅಥವಾ ನೀವು ಕಲ್ಪಿಸಿಕೊಳಬಹುದು ಎಂಬ ಯಾವುದೇ ಸೃಜನಾತ್ಮಕ ಕಲ್ಪನೆ ಇರಬಹುದು. ಸೃಜನಾತ್ಮಕವಾಗಿರಿ ಮತ್ತು ವಿಭಿನ್ನ ಕೀಗಳು ವಿಭಿನ್ನ ವರ್ತನೆಗಳನ್ನು ಹೇಗೆ ಹುಟ್ಟುಹಾಕಬಹುದು ಎಂದು ಯೋಚಿಸಿ!
+
+**ನಿಮ್ಮ ಆಟವು ಒಳಗೊಂಡಿರಬೇಕು:**
+
+| ಅವಶ್ಯಕತೆ | ವಿವರಣೆ | ಉದ್ದೇಶ |
+|-------------|-------------|---------|
+| **ಇವೆಂಟ್ ಲಿಸ್ಟನರ್‌ಗಳು** | ಕನಿಷ್ಠ 3 ವಿಭಿನ್ನ ಕೀಬೋರ್ಡ್ ಇವೆಂಟ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದು | ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಸಂಶೋಧನೆಯ ಪ್ರದರ್ಶನ |
+| **ದೃಶ್ಯ ಫೀಡ್ಬ್ಯಾಕ್** | ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್‌ಗೆ ತಕ್ಷಣದ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುವುದು | DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ನಿಯಂತ್ರಣದ ಮೇಧಾವಿತ್ವವನ್ನು ತೋರಿಸುವುದು |
+| **ಆಟ ಲಾಜಿಕ್** | ಅಂಕೆಗೆ, ಹಂತಗಳಿಗೆ ಅಥವಾ ಪ್ರಗತಿಗಾನಿ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಒಳಗೊಂಡಿರಲಿ | ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿಯನ್ನು ಅನುಷ್ಟಾನದಲ್ಲಿ ಅಭ್ಯಾಸ ಮಾಡುವುದು |
+| **ಬಳಕೆದಾರ ಸಂವಾದ** | ಸ್ಪಷ್ಟ ನಿರ್ದೇಶನಗಳು ಮತ್ತು ಆಳವಾದ ನಿಯಂತ್ರಣಗಳು | ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವುದು |
+
+**ವಿಚಾರಿಸಲು ಸೃಜನಶೀಲ ಯೋಜನೆ ಕಲ್ಪನೆಗಳು:**
+- **ರಿದಮ್ ಆಟ**: ಆಟಗಾರರು ಸಂಗೀತ ಅಥವಾ ದೃಶ್ಯ ಸೂಚನೆಗಳೊಂದಿಗೆ ಕೀಲಿಗಳನ್ನು ಸಮಯಕ್ಕೆ ಸರಿಯಾಗಿ ಒತ್ತುತ್ತಾರೆ
+- **ಪಿಕ್ಸೆಲ್ ಆರ್ಟ್ ಸೃಷ್ಟಿಕರ್ತ**: ವಿಭಿನ್ನ ಕೀಲಿಗಳು ವಿಭಿನ್ನ ಬಣ್ಣಗಳು ಅಥವಾ ಮಾದರಿಗಳನ್ನು ಚಿತ್ರಿಸುತ್ತವೆ
+- **ಶಬ್ದ ನಿರ್ಮಾಪಕ**: ಆಟಗಾರರು ವಿಶೇಷ ಕ್ರಮದಲ್ಲಿ ಅಕ್ಷರಗಳನ್ನು ಟೈಪ್ ಮಾಡಿ ಪದಗಳನ್ನು ರಚಿಸುತ್ತಾರೆ
+- **ಸ್ನೇಕ್ ಆಟ**: ಬಾಣ ಕೀಲಿಗಳೊಂದಿಗೆ ಹಾವು ನಿಯಂತ್ರಿಸಿ ಐಟಂಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ
+- **ಮ್ಯೂಸಿಕ್ ಸಿಂಥಸೈಝರ್**: ವಿಭಿನ್ನ ಕೀಲಿಗಳು ವಿಭಿನ್ನ ಸಂಗೀತ ಟೋನುಗಳು ಅಥವಾ ಧ್ವನಿಗಳನ್ನು ಪ್ಲೇ ಮಾಡುತ್ತವೆ
+- **ಸ್ಪೀಡ್ ಟೈಪಿಂಗ್ ವೈವಿಧ್ಯಗಳು**: ವರ್ಗ-ವಿಶೇಷ ಟೈಪಿಂಗ್ (ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಪದಗಳು, ಪರಿಭಾಷಿತ ಭಾಷೆಗಳು)
+- **ಕೀಬೋರ್ಡ್ ಡ್ರಂಬರ್**: ಬೃಹತ್ ಬೀಗಗಳಿಗೆ ವಿಭಿನ್ನ ಡ್ರಮ್ ಧ್ವನಿಗಳನ್ನು ನಿಯೋಜಿಸುವ ಮೂಲಕ ಬೀಟ್ ರಚಿಸಿ
+
+**ಕಾರ್ಯಯೋಜನೆಯ ಮಾರ್ಗಸೂಚಿಗಳು:**
+- **ಸರಳ ಕಲ್ಪನೆಯಿಂದ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ಜಟಿಲತೆ ಹಂತವಾಗಿ ನಿರ್ಮಿಸಿ**
+- **ಸಹಜವಾದ, ಸ್ಪಂದನಾತ್ಮಕ ನಿಯಂತ್ರಣಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿ**
+- **ಆಟದ ಸ್ಥಿತಿ ಮತ್ತು ಆಟಗಾರರ ಪ್ರಗತಿಗೆ ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಸೂಚಕಗಳನ್ನು ಒಳಗೊಂಡಿರಲಿ**
+- **ಬೇರೆ ಬಳಕೆದಾರರೊಂದಿಗೆ ನಿಮ್ಮ ಆಟವನ್ನು ಪರೀಕ್ಷಿಸಿ ಗಮನಾರ್ಹ ಆಟ ನಿರ್ವಹಣೆಯನ್ನು ಖಚಿತಪಡಿಸಿ**
+- **ತಪ್ಪದೆ ನಿಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ ಟಿಪ್ಪಣಿಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ತಂತ್ರವನ್ನು ವಿವರಿಸಿ**
+
+## ಶ್ರೇಣಿಪಟ್ಟಿ
+
+| ಮಾನದಂಡಗಳು | ಉತ್ಕೃಷ್ಠ | ತೃಪ್ತಿದಾಯಕ | ಸುಧಾರಣೆ ಅಗತ್ಯವಿದೆ |
+| -------- | --------- | -------- | ----------------- |
+| **ಫಂಕ್ಷನಾಲಿಟಿ** | ಬಹುತೇಕ ಲಕ್ಷಣಗಳೊಂದಿಗೆ ಪೂರ್ಣ,.polished ಆಟ ಮತ್ತು ಸೂಕ್ಷ್ಮ ಆಟ ನಿರ್ವಹಣೆ | ಕೀಬೋರ್ಡ್ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ತೋರಿಸುವ ಮೂಲ ಭಾಗಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಆಟ | ಅತೀ ನ್ಯೂನ, ನಿರ್ವಹಣಾರ್ಹತೆ ಕಡಿಮೆ ಇಲ್ಲದ(gameplay) ಅಥವಾ ಪ್ರಮುಖ ದೋಷಗಳೊಂದಿಗೆ ಅನುಷ್ಟಾನ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಚೆನ್ನಾಗಿ ಸಂಘಟಿತ, ಟಿಪ್ಪಣಿಗಳು ವಹಿಸಿ ಉತ್ತಮ ಆಚರಣೆಗಳ ಅನುಸರಣೆ ಮತ್ತು ಪರಿಣಾಮಕಾರಿಯಾದ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ | ಸ್ವಚ್ಛ, ಓದಲು ಸುಲಭವಾದ ಕೋಡ್ ಮತ್ತು ಸೂಕ್ತವಾಗಿ ಇವೆಂಟ್ ಲಿಸ್ಟನರ್‌ಗಳು ಮತ್ತು DOM ನಿಯಂತ್ರಣ ಬಳಸಿದ್ದು | ಮೂಲ್ವಾಗಿ ಕೋಡ್ ರಚನೆ, ಕೆಲ ಸಂಘಟನಾ ಸಮಸ್ಯೆಗಳ ಅಥವಾ ಅಸಂಕ್ಷಿಪ್ತ ಅನುಷ್ಠಾನಗಳೊಂದಿಗೆ |
+| **ಬಳಕೆದಾರ ಅನುಭವ** | ಅನುಕೂಲಕರ ನಿಯಂತ್ರಣ, ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ವೃತ್ತಿಪರ ಅನುಭವದ ಆಟ ಆಡಿಕೆ | ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಅಂತರ್ಜಾಲಗಳೊಂದಿಗೆ ಅಗತ್ಯ ಕ್ಷೇತ್ರಗಳು ನೈಜ ಮತ್ತು ಸ್ಪಂದನಾತ್ಮಕ ನಿಯಂತ್ರಣಗಳು | ಮೂಲ ಸಂವಾದ, ಸ್ಪಷ್ಟವಿಲ್ಲದ ಸೂಚನೆಗಳು ಅಥವಾ ಕಡಿಮೆ ಸ್ಪಂದನಶೀಲ ನಿಯಂತ್ರಣಗಳು |
+| **ಸೃಜನಶೀಲತೆ** | ಕೀಬೋರ್ಡ್ ಇವೆಂಟ್‌ಗಳ ವಿಶಿಷ್ಟ ಉಪಯೋಗ ಮತ್ತು ಸೃಜನಾತ್ಮಕ ಸಮಸ್ಯೆ ಪರಿಹಾರದಿಂದ ಮೂಲ ಕಲ್ಪನೆ | ಸಾಮಾನ್ಯ ಆಟ ಮಾದರಿಗಳ ಮೇಲೆ ರುಚಿಕರ ಬದಲಾಗುವಿಕೆ ಮತ್ತು ಉತ್ತಮ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಬಳಕೆ | ಮೂಲ ಕಲ್ಪನೆಯ ಸಾಮಾನ್ಯ ಅನುಷ್ಠಾನ ಮತ್ತು ಕನಿಷ್ಠ ಸೃಜನಾತ್ಮಕ ಅಂಶಗಳು |
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತಿರಸ್ಕರಣೆ**:  
+ಈ ದಾಖಲೆಯನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ದತೆಯತ್ತ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೆ ಕೂಡ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸ ಪಷ್ಟತೆಗಳು ಇರಬಹುದು ಎಂಬುದು ತಿಳಿದುಕೊಳ್ಳಿ. ಮೂಲ ದಾಖಲೆ ತನ್ನ ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಆತಂಕಕರ ಮಾಹಿತಿಗೆ, ವ್ಯಾಪಾರದ ಮಾನ್ಯತೆಯ ಪಾತ್ರಧಾರಿಯ ವ್ಯವಸಾಯೀ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥ ತಪ್ಪುಗಳ ಅಥವಾ ತಪ್ಪುಭವನೆಗಳಿಗಾಗಿ ನಾವು ಜವಾಬ್ದಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/1-about-browsers/README.md

@@ -0,0 +1,555 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "00aa85715e1efd4930c17a23e3012e69",
+  "translation_date": "2026-01-08T15:47:54+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬ್ರೌಸರ ವಿಸ್ತಾರ ಪ್ರಾಜೆಕ್ಟ್ ಭಾಗ 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
+```
+![ಬ್ರೌಸರ ಸ್ಕೆಟ್‌ನೋಟ್](../../../../translated_images/browser.60317c9be8b7f84a.kn.jpg)
+> ಸ್ಕೆಟ್‌ನೋಟ್ [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((ಬ್ರೌಸರ್ ವಾಸ್ತುಶಿಲ್ಪ))
+    Core Components
+      Rendering Engine
+      JavaScript Engine
+      Network Stack
+      Storage APIs
+    User Interface
+      ವಿಳಾಸ ಬಾರ್
+      ಟ್ಯಾಬ್ ನಿರ್ವಹಣೆ
+      ಬುಕ್‌ಮಾರ್ಕ್‌ಗಳು
+      ವಿಸ್ತರಣಾ ಐಕಾನ್‌ಗಳು
+    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" ಟೈಪ್ ಮಾಡಿದಾಗ, ಬ್ರೌಸರ ಜಾಗತಿಕ ಸರ್ವರ್‌ಗಳಿಂದ ವಿಷಯದ ವಿನಂತಿಯನ್ನು ಮಾಡುತ್ತದೆ, ನಂತರ ಆ ಕೋಡ್ ಅನ್ನು ಪುನರ್‌ವಿಚಾರಿಸಿ, ನೀವು ನೋಡುತ್ತಿರುವ ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಪುಟಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.
+
+ಈ ಪ್ರಕ್ರಿಯೆ 1990 ರಲ್ಲಿ ಟಿಮ್ ಬರ್ನರ್ಸ್-ಲೀ ರಚಿಸಿದ ಮೊದಲ ವೆಬ್ ಬ್ರೌಸರ, WorldWideWeb, ಹೇಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಲ್ಪಟ್ಟಿತ್ತು ಎಂಬುದನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ, ಇದು ಎಲ್ಲರಿಗೂ ಹೈಪರ್‌ಲಿಂಕ್ ಡಾಕ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡಿತು.
+
+✅ **ಚಿಕ್ಕ ಇತಿಹಾಸ**: ಮೊದಲ ಬ್ರೌಸರ ಹೆಸರೇ 'WorldWideWeb' ಆಗಿತ್ತು ಮತ್ತು ಅದನ್ನು ಸರ್ ಟಿಮೋಥಿ ಬರ್ನರ್ಸ್-ಲೀ 1990 ರಲ್ಲಿ ರಚಿಸಿದ್ದರು.
+
+![ಪ್ರಾಚೀನ ಬ್ರೌಸರಗಳು](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.kn.jpg)
+> ಕೆಲವೊಂದು ಪ್ರಾಚೀನ ಬ್ರೌಸರಗಳು, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ಅವರ ಮೂಲಕ
+
+### ಬ್ರೌಸರ್‌ಗಳು ವೆಬ್ ವಿಷಯವನ್ನು 어떻게 ಪ್ರಕ್ರಿಯೆ ಪಡಿಸುತ್ತವೆ
+
+URL ನವೊಲೆ ಮಾಡಿಕೊಂಡು ವೆಬ್ ಪುಟವನ್ನು ನೋಡುವವರೆಗೆ ಹಲವಾರು ಸಂಯೋಜಿತ ಹಂತಗಳು ಸೆಕೆಂಡ್‌ಗಳಲ್ಲಿ ನಡೆಯುತ್ತವೆ:
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant Extension
+    participant DNS
+    participant Server
+    
+    User->>Browser: URL ಟೈಪ್ ಮಾಡಿ ಎಂಟರ್ ಒತ್ತುತ್ತದೆ
+    Browser->>Extension: beforeRequest ಈವೆಂಟ್ ಪ್ರಾರಂಭಿಸಿ
+    Extension->>Extension: URL ಯನ್ನು ಬದಲಾಯಿಸುವ ಅಗತ್ಯ ಹೊಂದಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
+    Browser->>DNS: ಸರ್ವರ್ IP ವಿಳಾಸ ನೋಡಿ
+    DNS->>Browser: IP ವಿಳಾಸ ತಲುಪಿಸಿ
+    Browser->>Server: ವೆಬ್ ಪುಟದ ವಿಷಯವನ್ನು ವಿನಂತಿಸಿ
+    Server->>Browser: HTML, CSS, ಮತ್ತು JavaScript ಕಳುಹಿಸಿ
+    Browser->>Extension: beforeResponse ಈವೆಂಟ್ ಪ್ರಾರಂಭಿಸಿ
+    Extension->>Extension: ಅಗತ್ಯವಿದ್ದರೆ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸಿ
+    Browser->>User: ಸಂಪೂರ್ಣ ವೆಬ್ ಪುಟವನ್ನು ಪ್ರದರ್ಶಿಸಿ
+    Extension->>User: ಎಕ್ಸ್ಟೆಂಶನ್ UI ನವೀಕರಣಗಳನ್ನು ತೋರಿಸಿ
+```
+**ಈ ಪ್ರಕ್ರಿಯೆ ಸಾಧಿಸುವದು:**
+- **ಮಾನವ ಓದುಗ URL ಅನ್ನು ಡಿಎನ್‌ಎಸ್ ಲುಕ್ ಅಪ್ ಮೂಲಕ ಸರ್ವರ್ ಐಪಿ ವಿಳಾಸಕ್ಕೆ** ಅನುವಾದಿಸುತ್ತದೆ
+- **HTTP ಅಥವಾ HTTPS ಪ್ರೋಟೋಕಾಲುಗಳನ್ನು ಬಳಸಿ ವೆಬ್ ಸರ್ವರ್ ಜೊತೆ ಸುರಕ್ಷಿತ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ**
+- **ಸರ್ವರ್ ನಿಂದ ನಿರ್ದಿಷ್ಟ ವೆಬ್ ಪುಟ ವಿಷಯವನ್ನು ವಿನಂತಿಸುತ್ತದೆ**
+- **ಸರ್ವರ್‌ನಿಂದ HTML ಮಾರ್ಕ್ ಅಪ್, CSS ಶೈಲಿಗಳನ್ನು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ**
+- **ಎಲ್ಲಾ ವಿಷಯವನ್ನು ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಪುಟವಾಗಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ**
+
+### ಬ್ರೌಸರ್ ಕೋರ್ ವೈಶಿಷ್ಟ್ಯಗಳು
+
+ಆಧುನಿಕ ಬ್ರೌಸರಗಳು ವಿಸ್ತಾರ ಡೆವಲಪರ್‌ಗಳು ಬಳಸಬಹುದಾದ ಹಲವಾರು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ:
+
+| ವೈಶಿಷ್ಟ್ಯ | ಉದ್ದೇಶ | ವಿಸ್ತಾರ ಅವಕಾಶಗಳು |
+|---------|---------|------------------------|
+| **ರೆಂಡರಿಂಗ್ ಎಂಜಿನ್** | HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರದರ್ಶನ | ವಿಷಯ ಹೊರತಾಗಿಸಲು, ಶೈಲಿ ಸೇರ್ಪಡೆಗೆ |
+| **ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಂಜಿನ್** | ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು | ಅನುಕೂಲವೊಂದಿಗೆ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು, API ಸಂವಹನಗಳು |
+| **ಲೋಕಲ್ ಸ್ಟೋರೆಜ್** | ಸ್ಥಳೀಯವಾಗಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ | ಬಳಕೆದಾರ ಆದ್ಯತೆಗಳು, ಕ್ಯಾಶೆಡ್ ಡೇಟಾ |
+| **ನೆಟ್‌ವರ್ಕ್ ಸ್ಟಾಕ್** | ವೆಬ್ ವಿನಂತಿಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ | ವಿನಂತಿ ನಿಗೂಳಿಸುವಿಕೆ, ಡೇಟಾ ವಿಶ್ಲೇಷಣೆ |
+| **ಸುರಕ್ಷತೆ ಮಾದರಿ** | ಬಳಕೆದಾರರನ್ನು ಹಾನಿಕರ ವಿಷಯಗಳಿಂದ ರಕ್ಷಿಸುತ್ತದೆ | ವಿಷಯ ಫಿಲ್ಟರಿಂಗ್, ಸುರಕ್ಷತೆ ಸುಧಾರಣೆಗಳು |
+
+**ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದರಿಂದ ನಿಮಗೆ:**
+- **ನಿಮ್ಮ ವಿಸ್ತಾರ ಹೆಚ್ಚಿನ ಮೌಲ್ಯವನ್ನು ಸೇರಿಸಬಹುದಾದ ಸ್ಥಳಗಳನ್ನು ಗುರುತಿಸಲು**
+- **ನಿಮ್ಮ ವಿಸ್ತಾರದ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಸರಿಯಾದ ಬ್ರೌಸರ API ಗಳನ್ನು ಆಯ್ಕೆಮಾಡಲು**
+- **ಬ್ರೌಸರ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಸಾಮರ್ಥ್ಯಯುತವಾಗಿ ಕೆಲಸ ಮಾಡುವ ವಿಸ್ತಾರಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು**
+- **ನಿಮ್ಮ ವಿಸ್ತಾರ ಬ್ರೌಸರದ ಸುರಕ್ಷತಾ ಉತ್ತಮ ಅನುಸರಣೆಗಳನ್ನು ಪಾಲಿಸಬೇಕೆಂದು ಖಾತ್ರಿ ಮಾಡಿಕೊಳ್ಳಲು**
+
+### ಕ್ರಾಸ್-ಬ್ರೌಸರ ಡೆವಲಪ್‌ಮೆಂಟ್ ಪರಿಗಣನೆಗಳು
+
+ಬೇರೆಬೇರೆ ಬ್ರೌಸರಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ವಲ್ಪ ತಾರತಮ್ಯಗಳೊಂದಿಗೆ ನಿಯಮಾವಳಿಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುತ್ತವೆ, ಬಹುಶಃ ಬೇರೆ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ಒಂದೇ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ವಿಭಿನ್ನವಾಗಿ ಹ್ಯಾಂಡಲ್ ಮಾಡುವ ಹಾಗೆ. ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್ ಮತ್ತು ಸಫಾರಿ ಪ್ರತಿಯೊಂದು ವಿಭಿನ್ನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿವೆ, ಮತ್ತು ವಿಸ್ತಾರ ಡೆವಲಪರ್ ಗಳು ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕು.
+
+> 💡 **ಪ್ರೊ ಟಿಪ್**: ವಿವಿಧ ಬ್ರೌಸರಗಳಲ್ಲಿಉಪಯೋಗಿಸುವ ವೆಬ್ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಪರಿಶೀಲಿಸಲು [caniuse.com](https://www.caniuse.com) ಬಳಸಿ. ಇದು ನಿಮ್ಮ ವಿಸ್ತಾರದ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಯೋಜಿಸುವಾಗ ಅತ್ಯಂತ ಮೌಲ್ಯಯುತವಾಗಿದೆ!
+
+**ವಿಸ್ತಾರ ಡೆವಲಪ್‌ಮೆಂಟ್ ಕೀ ಪರಿಗಣನೆಗಳು:**
+- **ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್ ಮತ್ತು ಎಡ್ಜ್ ಬ್ರೌಸರ‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ**
+- **ಬೇರೆಬೇರೆ ಬ್ರೌಸರ ವಿಸ್ತಾರ API ಮತ್ತು ಮ್ಯಾನಿಫೆಸ್ಟ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳಿ**
+- **ಭಿನ್ನ ಪ್ರదర్శನಾ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಮಿತಿಗಳನ್ನು ನಿಭಾಯಿಸಿ**
+- **ಬ್ರೌಸರ-ನಿರ್ಧರಿತ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆFallback‌ ಗಳು ಒದಗಿಸಿ, ಅವು ಲಭ್ಯವಿಲ್ಲದಿದ್ದರೆ**
+
+✅ ** ವಿಶ್ಲೇಷಣಾತ್ಮಕ ತತ್ವಾಂಶ**: ನಿಮ್ಮ ಬಳಕೆದಾರರು ಯಾವ ಬ್ರೌಸರ‌ನ್ನು ಹೆಚ್ಚು ಬಳಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ನಿಮ್ಮ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಯೋಜನೆಗಳಲ್ಲಿ ವಿಶ್ಲೇಷಣೆ ಪ್ಯಾಕೇಜನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ ಕಂಡುಹಿಡಿಯಬಹುದು. ಈ ಡೇಟಾ ನಿಮಗೆ ಮೊದಲಿಗೆ ಯಾವ ಬ್ರೌಸರ‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕು ಎಂದು ಆದಾನ ನೀಡುತ್ತದೆ.
+
+## ಬ್ರೌಸರ ವಿಸ್ತಾರಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು
+
+ಬ್ರೌಸರ ವಿಸ್ತಾರಗಳು ಸಾಮಾನ್ಯ ವೆಬ್ ಬ್ರೌಸಿಂಗ್ ಸವಾಲುಗಳನ್ನು ನಿರಾಕರಿಸುವ ಮೂಲಕ ಬ್ರೌಸರ ಮುಖಮಟ್ಟದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೇರವಾಗಿ ಸೇರಿಸುತ್ತವೆ. ಬೇರೆಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಅಥವಾ ಸಂಕೀರ್ಣ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳ ಅವಶ್ಯಕತೆ ಇಲ್ಲದೆ, ವಿಸ್ತಾರಗಳು ತಕ್ಷಣ ಉಪಕರಣಗಳು ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.
+
+ಈ ಪರಿಕಲ್ಪನೆ ಮೊದಲ ಕಂಪ್ಯೂಟರ್ ಪಯೊನಿಯರ್ಸ್ ಡಗ್ಲಸ್ ಎಂಜಲ್‌ಬಾರ್ಟ್ ಮಾನವ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ತಂತ್ರಜ್ಞಾನದಿಂದ ವೃದ್ಧಿಸುವಂತೆ ಕಲ್ಪಿಸಿದ್ದರು - ವಿಸ್ತಾರಗಳು ನಿಮ್ಮ ಬ್ರೌಸರ ಮೂಲ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ.
+
+```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]
+```
+**ಜನಪ್ರಿಯ ವಿಸ್ತಾರ ವರ್ಗಗಳು ಮತ್ತು ಅವುಗಳ ಲಾಭಗಳು:**
+- **ಉತ್ಪಾದಕತೆ ಉಪಕರಣಗಳು**: ಕಾರ್ಯ ನಿರ್ವಾಹಕರು, ಟಿಪ್ಪಣಿ ತೆಗೆದುಕೊಳ್ಳುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಸಮಯ ಟ್ರ್ಯಾಕರ್‌ಗಳು ನೀವು ಸಂಘಟಿತವಾಗಿರಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ
+- **ಸುರಕ್ಷತೆ ಸುಧಾರಣಗಳು**: ಪಾಸ್‌ವರ್ಡ್ ಮ್ಯಾನೇಜರ್‌ಗಳು, ಜಾಹೀರಾತು ತಡೆಗಡೆ ಮಾಡುವವರು ಮತ್ತು ಗೌಪ್ಯತಾ ಉಪಕರಣಗಳು ನಿಮ್ಮ ಡೇಟಾವನ್ನು ರಕ್ಷಿಸುತ್ತವೆ
+- **ಡೆವಲಪರ್ ಉಪಕರಣಗಳು**: ಕೋಡ್ ಫಾರ್ಮ್ಯಾಟರ್‌ಗಳು, ಬಣ್ಣ ಆರಿಸುವ ಉಪಕರಣಗಳು ಮತ್ತು ಡಿಬಗ್ ಉಪಕರಣಗಳು ಅಭಿವೃದ್ಧಿಯನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತವೆ
+- **ವಿಷಯ ಸುಧಾರಣೆಗಳು**: ಓದು ಮೋಡ್‌ಗಳು, ವೀಡಿಯೋ ಡೌನ್‌ಲೋಡರ್‌ಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್‌ಶಾಟ್ ಉಪಕರಣಗಳು ನಿಮ್ಮ ವೆಬ್ ಅನುಭವವನ್ನು ಉತ್ತಮಗೊಳಿಸುತ್ತವೆ
+
+✅ **ಪರಾವರ್ತನೆ ಪ್ರಶ್ನೆ**: ನಿಮ್ಮ ಪ್ರಿಯ ಬ್ರೌಸರ ವಿಸ್ತಾರಗಳೇನು? ಅವು ವಿಶೇಷವಾಗಿ ಯಾವ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ ಮತ್ತು ನಿಮ್ಮ ಬ್ರೌಸಿಂಗ್ ಅನುಭವವನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತವೆ?
+
+### 🔄 **ಶಿಕ್ಷಣ ಸಂಬಂಧಿ ಪರಿಶೀಲನೆ**
+**ಬ್ರೌಸರ ಆರ್ಕಿಟೆಕ್ಚರ್ ತಿಳಿವಳಿಕೆ**: ವಿಸ್ತಾರ ಅಭಿವೃದ್ಧಿಗೆ ಮುಂಚೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಬ್ರೌಸರ‌ಗಳು ವೆಬ್ ವಿನಂತಿಗಳನ್ನು ಹೇಗೆ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತವೆ ಮತ್ತು ವಿಷಯವನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ವಿವರಿಸಬಹುದೇ?
+- ✅ ಬ್ರೌಸರ ಆರ್ಕಿಟೆಕ್ಚರ್ ಮುಖ್ಯ ಘಟಕಗಳನ್ನು ಗುರುತಿಸಬಹುದೇ?
+- ✅ ವಿಸ್ತಾರಗಳು ಬ್ರೌಸರ ಕಾರ್ಯಕ್ಷಮತೆಯೊಂದಿಗೆ ಹೇಗೆ ಸಂಯೋಜಿತವಾಗುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಹುದೇ?
+- ✅ ಬಳಕೆದಾರರನ್ನು ರಕ್ಷಿಸುವ ಸುರಕ್ಷತಾ ಮಾದರಿಯನ್ನು ಪರಿಚಯಿಸಬಹುದೇ?
+
+**ತ್ವರಿತ ಸ್ವ-ಪರೀಕ್ಷೆ**: URL ಟೈಪ್ ಮಾಡಿ ವೆಬ್ ಪುಟವನ್ನು ನೋಡುವವರೆಗೆ ಹಾದಿಯನ್ನು ಪತ್ತೆಮಾಡಬಹುದೇ?
+1. **DNS ಲುಕ್-ಅಪ್** URL ಅನ್ನು ಐಪಿ ವಿಳಾಸಕ್ಕೆ ಪರಿವರ್ತಿಸುತ್ತದೆ
+2. **HTTP ವಿನಂತಿ** ಸರ್ವರ್‌ನಿಂದ ವಿಷಯ আহರಿಸುತ್ತದೆ
+3. **ಪಾರ್ಸಿಂಗ್** HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ
+4. **ರೆಂಡರಿಂಗ್** ಅಂತಿಮ ವೆಬ್ ಪುಟವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ
+5. **ವಿಸ್ತಾರಗಳು** ಹಲವಾರು ಹಂತಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸಬಹುದು
+
+## ವಿಸ್ತಾರಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುವುದು ಮತ್ತು ನಿರ್ವಹಣೆ
+
+ವಿಸ್ತಾರಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಜನರು ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುವಾಗ ಬಳಕೆದಾರ ಅನುಭವದ ನಿರೀಕ್ಷೆಯನ್ನು ಮಾಡಬಹುದು. ಇನ್‌ಸ್ಟಾಲೇಶನ್ ಪ್ರಕ್ರಿಯೆ ಆಧುನಿಕ ಬ್ರೌಸರ‌ಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿದೆ, ಕೆಲವು ಸಣ್ಣ ವ್ಯತ್ಯಾಸಗಳು ಮಾತ್ರ ಇಂಟರ್‌ಫೇಸ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಇರುತ್ತವೆ.
+
+![ಎಡ್ಜ್ ಬ್ರೌಸರ‌ನ open edge://extensions ಪುಟ ಮತ್ತು open settings ಮೆನು ಸ್ಕೆನ್ಷಾಟ್](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.kn.png)
+
+> **ಮುಖ್ಯವಾದುದು**: ನಿಮ್ಮ ಸ್ವಂತ ವಿಸ್ತಾರಗಳನ್ನು ಪರೀಕ್ಷಿಸುವಾಗ ಡೆವಲಪರ್ ಮೋಡ್ ಅನ್ನು ಟೋಗಲ್ ಆನ್ ಮಾಡಿ ಮತ್ತು ಬೇರೆ ಸ್ಟೋರ್‌ಗಳಿಂದ ವಿಸ್ತಾರಗಳನ್ನು ಅನುಮತಿಸಿ.
+
+### ಡೆವಲಪ್ಮೆಂಟ್ ವಿಸ್ತಾರ ಇನ್‌ಸ್ಟಾಲೇಶನ್ ಪ್ರಕ್ರಿಯೆ
+
+ನೀವು ನಿಮ್ಮ ಸ್ವತ: ವಿಸ್ತಾರಗಳನ್ನು ಡೆವಲಪ್ ಮತ್ತು ಪರೀಕ್ಷಿಸುವಾಗ, ಈ ಕಾರ್ಯವಿಧಾನವನ್ನು ಅನುಸರಿಸಿ:
+
+```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. **ಬಲಮೇಲೆ ಮೇಲಿನ “ಸೆಟ್ಟಿಂಗ್ಸ್ ಮತ್ತು ಹೆಚ್ಚಿನವು” (`...` ಐಕಾನ್) ಕ್ಲಿಕ್ ಮಾಡಿ**
+3. **ಡ್ರಾಪ್ಡೌನ್ ಮೆನವಲ್ಲಿಂದ "ವಿಸ್ತಾರಗಳು" ಆಯ್ಕೆಮಾಡಿ**
+
+**ಹಂತ 3: ನಿಮ್ಮ ವಿಸ್ತಾರ ಲೋಡ್ ಮಾಡಿ**
+- **ಹೊಸ ಸ್ಥಾಪನೆಗಳಿಗೆ**: `load unpacked` ಆಯ್ಕೆ ಮಾಡಿ ನಿಮ್ಮ `/dist` ಫೋಲ್ಡರ್ ಅನ್ನು ಆರಿಸಿ
+- **ಅಪ್‌ಡೇಟ್‌ಗಳಿಗೆ**: ಈಗಾಗಲೇ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿರುವ ವಿಸ್ತಾರದ ಎದುರಿಗೆ ಇರುವ `reload` ಗುರುತು ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ
+- **ಪರೀಕ್ಷಿಸಲು**: ಹೆಚ್ಚುವರಿ ಡಬ್ಬಗಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಪ್ರವೇಶ ಮಾಡುವಂತೆ "ಡೆವಲಪರ್ ಮೋಡ್" ಸಕ್ರಿಯಗೊಳಿಸಿ
+
+### ಉತ್ಪಾದನಾ ವಿಸ್ತಾರ ಇನ್‌ಸ್ಟಾಲೇಶನ್
+
+> ✅ **ಗಮನಿಸಿ**: ಈ ಡೆವೆಲಪ್‌ಮೆಂಟ್ ಸೂಚನೆಗಳು ನೀವು ನಿರ್ಮಿಸುವ ವಿಸ್ತಾರಗಳಿಗೆ ಮಾತ್ರ. ಪ್ರಕಟಿಸಿದ ವಿಸ್ತಾರಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು ಅಧಿಕೃತ ಬ್ರೌಸರ ವಿಸ್ತಾರ ಅಂಗಡಿಗಳನ್ನು, ಉದಾಹರಣೆಗೆ [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) ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಪ್ರಾಂತ್ಯ ಕೋಡ್ ಅನ್ನು ಹುಡುಕಿ (ಉದಾಹರಣೆಗೆ, ಬೋಸ್ಟನ್ 'US-NEISO' ಅನ್ನು ಬಳಸುತ್ತದೆ)
+
+**ಡೆವಲಪ್‌ಮೆಂಟ್ ಉಪಕರಣಗಳು:**
+- **[Node.js ಮತ್ತು 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`**: ವಿಸ್ತಾರದ ಮೆಟಾಡೇಟಾ, ಅನುಮತಿಗಳನ್ನು ಮತ್ತು ಪ್ರವೇಶ ಬಿಂದುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ
+- **`index.html`**: ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಇದು ಬಳಕೆದಾರರು ವಿಸ್ತಾರವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಕಾಣುತ್ತದೆ
+- **`background.js`**: ಹಿನ್ನೆಲೆ ಕಾರ್ಯ ಮತ್ತು ಬ್ರೌಸರ ಇವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ
+- **`main.js`**: ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ನಂತರ ಅಂತಿಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್ ಅನ್ನು ಹೊಂದಿದೆ
+- **`src/index.js`**: ನಿಮ್ಮ ಪ್ರಮುಖ ಡೆವಲಪ್‌ಮೆಂಟ್ ಕೋಡ್ ಇದರಲ್ಲಿ ಇರುತ್ತದೆ, ಇದು `main.js` ಗೆ ಸಂಯೋಜಿಸಲಾಗುತ್ತದೆ
+
+> 💡 **ಸಂಘಟನೆಯ ಮೆಲುಕು**: ನಿಮ್ಮ API ಕೀ ಮತ್ತು ಪ್ರಾಂತ್ಯ ಕೋಡ್ ಅನ್ನು ಡೆವಲಪ್‌ಮೆಂಟ್ ವೇಳೆ ಸುಲಭವಾಗಿ ಉಲ್ಲೇಖಿಸಲು ಭದ್ರವಾಗಿ ಟಿಪ್ಪಣಿಯಲ್ಲಿ ಇಟ್ಟುಕೊಳ್ಳಿ.
+
+✅ **ಸುರಕ್ಷತಾ ಟಿಪ್ಪಣಿ**: API ಕೀಗಳನ್ನು ಅಥವಾ ಸಂವೇದನಾಶೀಲ ಗುಪ್ತಪದಗಳನ್ನು ನಿಮ್ಮ ಕೋಡ್ ರೆಪೊಸಿಟರಿಯಲ್ಲಿ ಎಂದೂ ಕಮಿಟ್ ಮಾಡಬೇಡಿ. ಮುಂದಿನ ಹಂತಗಳಲ್ಲಿ ಇದನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ನಿಭಾಯಿಸುವ ವಿಧಾನಗಳನ್ನು ತೋರಿಸಲಾಗುತ್ತದೆ.
+
+## ವಿಸ್ತಾರ ಇಂಟರ್‌ಫೇಸ್ ನಿರ್ಮಿಸುವುದು
+
+ಈಗ ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್ ಘಟಕಗಳನ್ನು ನಿರ್ಮಿಸುವೆವು. ವಿಸ್ತಾರವು ಎರಡು ಪರದೆಯ ದೃಷ್ಟಿಕೋನವನ್ನು ಉಪಯೋಗಿಸುತ್ತದೆ: ಮೊದಲ ಬಾರಿಗೆ ಸೆಟ್ಟಿಂಗ್‌ಗಾಗಿ ವಿನ್ಯಾಸ ಪರದೆ ಮತ್ತು ಡೇಟಾ ಪ್ರದರ್ಶನಕ್ಕಾಗಿ ಫಲಿತಾಂಶ ಪರದೆ.
+
+ಈ ವಿಧಾನ ಪ್ರಗತಿಯ ಸೂಚನೆ ತತ್ವವನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಇದು ಮಾಹಿತಿ ಮತ್ತು ಆಯ್ಕೆಗಳನ್ನು ಸಂಬಂಧಿತ ಕ್ರಮದಲ್ಲಿ ಬಹಿರಂಗಪಡಿಸಿ ಬಳಕೆದಾರರನ್ನು ಅತಿಭಾರದೊಳಗಾಗದಂತೆ ಮಾಡುತ್ತದೆ.
+
+### ವಿಸ್ತಾರ ವೀಕ್ಷಣೆಗಳ ಸಮೀಕ್ಷೆ
+
+**ಸೆಟಪ್ ವೀಕ್ಷಣೆ** - ಮೊದಲು ಬಳಕೆದಾರ ಸಂರಚನೆ:
+![ವಿಸ್ತಾರವನ್ನು ಬ್ರೌಸರಿನಲ್ಲಿ ತೆರೆಯಲಾದ ಸಂದರ್ಭದಲ್ಲಿ, ಪ್ರಾಂತ್ಯ ಹೆಸರು ಮತ್ತು API ಕೀಗಳ ನಮೂದಾಗಿರುವ ಫಾರ್ಮ್ ಭೇಟಿನೋಟ.](../../../../translated_images/1.b6da8c1394b07491.kn.png)
+
+**ಫಲಿತಾಂಶ ವೀಕ್ಷಣೆ** - ಕಾರ್ಬನ್ ಫೂಟ್‌ಪ್ರಿಂಟ್ ಡೇಟಾ ಪ್ರದರ್ಶನ:
+![ಸಂಪೂರ್ಣಗೊಂಡ ವಿಸ್ತಾರವು US-NEISO ಪ್ರಾಂತ್ಯದ ಕಾರ್ಬನ್ ಬಳಕೆ ಮತ್ತು ಜಾಡು ಇಂಧನ ಶೇಕಡಾವಾರು ಮೌಲ್ಯಗಳನ್ನು ತೋರುತ್ತಿದೆ.](../../../../translated_images/2.1dae52ff08042246.kn.png)
+
+### ಸಂರಚನಾ ಫಾರ್ಮ್ ನಿರ್ಮಿಸುವುದು
+
+ಸೆಟಪ್ ಫಾರ್ಮ್ ಪ್ರಾಥಮಿಕ ಬಳಕೆಗಾಗಿಯು ಬಳಕೆದಾರ ಸಂರಚನಾ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ. ಒಮ್ಮೆ ಸಂರಚಿಸಿದ ಮೇಲೆ, ಈ ಮಾಹಿತಿಯು ಮುಂದಿನ ಸೆಷನ್‌ಗಳಿಗೆ ಬ್ರೌಸರ ಸ್ಟೋರೇಜ್‌ನಲ್ಲಿ ಉಳಿದುಕೊಳ್ಳುತ್ತದೆ.
+
+`/dist/index.html` ಫೈಲ್‌ನಲ್ಲಿ ಈ ಫಾರ್ಮ್ ರಚನೆಯನ್ನು ಸೇರಿಸಿ:
+
+```html
+<form class="form-data" autocomplete="on">
+    <div>
+        <h2>New? Add your Information</h2>
+    </div>
+    <div>
+        <label for="region">Region Name</label>
+        <input type="text" id="region" required class="region-name" />
+    </div>
+    <div>
+        <label for="api">Your API Key from tmrow</label>
+        <input type="text" id="api" required class="api-key" />
+    </div>
+    <button class="search-btn">Submit</button>
+</form>
+```
+
+**ಈ ಫಾರ್ಮ್ ಸಾಧಿಸುವುದು:**
+- **ಸರಿಯಾದ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಜೋಡಿಸಿಕೊಂಡು ಸಿಮೆಂಟಿಕ್ ಫಾರ್ಮ್ ರಚನೆ ಮಾಡುತ್ತದೆ**
+- **ಮೆಲುಕುವಿಕೆಗಾಗಿಯೇ ಬ್ರೌಸರದ ಆಟೋ ಕಂಪ್ಲೀಟ್ ಕಾರ್ಯಚಟುವಟಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ**
+- **`required` ಗುಣಲಕ್ಷಣ ಬಳಸಿ ಎರಡೂ ಕ್ಷೇತ್ರಗಳು ಭರ್ತಿಯಾಗಿರಬೇಕೆಂದು ಹಾಜರಾತಿ ಮಾಡುತ್ತದೆ**
+- **ಸರಳ ಶೈಲಿ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗುರಿಯಾಗಲು ವಿವರವಾದ ಕ್ಲಾಸ್ ಹೆಸರನ್ನು ಬಳಕೆ ಮಾಡುತ್ತದೆ**
+- **ಮೊದಲ ಬಾರಿಗೆ ವಿಸ್ತಾರವನ್ನು ಸೆಟ್ ಮಾಡುತ್ತಿರುವ ಬಳಕೆದಾರರಿಗೆ ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ**
+
+### ಫಲಿತಾಂಶ ಪ್ರದರ್ಶನವನ್ನು ನಿರ್ಮಿಸುವುದು
+
+ಮುಂದೆ, ಕಾರ್ಬನ್ ಫೂಟ್‌ಪ್ರಿಂಟ್ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸುವ ಫಲಿತಾಂಶ ಪ್ರದೇಶವನ್ನು ರಚಿಸಿ. ಈ HTML ಅನ್ನು ಫಾರ್ಮ್ ಕೆಳಗೆ ಸೇರಿಸಿ:
+
+```html
+<div class="result">
+    <div class="loading">loading...</div>
+    <div class="errors"></div>
+    <div class="data"></div>
+    <div class="result-container">
+        <p><strong>Region: </strong><span class="my-region"></span></p>
+        <p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+        <p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+    </div>
+    <button class="clear-btn">Change region</button>
+</div>
+```
+
+**ಈ ರಚನೆ ಒದಗಿಸುವುದು:**
+- **`loading`**: API ಡೇಟಾ ಲೋಡ್ ಆಗುತ್ತಿದ್ದಾಗ ಲೋಡಿಂಗ್ ಸಂದೇಶವನ್ನು ತೋರಿಸುತ್ತದೆ
+- **`errors`**: API ಕರೆ ವಿಫಲವಾದರೆ ಅಥವಾ ಡೇಟಾ ಅಮಾನ್ಯವಾದರೆ ದೂಷಣೆ ಸಂದೇಶಗಳನ್ನು ತೋರಿಸುತ್ತದೆ
+- **`data`**: ಡೆವಲಪ್‌ಮೆಂಟ್ ಸಮಯದಲ್ಲಿ ಡಿಬಗ್ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಕಚ್ಚಾ ಡೇಟಾವನ್ನು ಹೊಂದಿದೆ
+- **`result-container`**: ಪ್ರೊಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿದ ಕಾರ್ಬನ್ ಫೂಟ್‌ಪ್ರಿಂಟ್ ಮಾಹಿತಿಯನ್ನು ಬಳಕೆದಾರರಿಗೆ ತೋರಿಸುತ್ತದೆ
+- **`clear-btn`**: ಬಳಕೆದಾರರಿಗೆ ಪ್ರಾಂತ್ಯ ಬದಲಾಯಿಸಿ ವಿಸ್ತಾರವನ್ನು ಮறு ಸಂರಚಿಸಲು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತದೆ
+
+### ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸಿದ್ಧಪಡಿಸುವುದು
+
+ಈಗ ಪ್ರಾಜೆಕ್ಟ್ ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು:
+
+```bash
+npm install
+```
+
+**ಈ ಇನ್‌ಸ್ಟಾಲೇಶನ್ ಪ್ರಕ್ರಿಯೆಯು ಸಾಧಿಸುವುದು:**
+- **`package.json` ನಲ್ಲಿರುವ ವೆಬ್‌ಪ್ಯಾಕ್ ಮತ್ತು ಇತರ ಡೆವಲಪ್‌ಮೆಂಟ್ ಅವಲಂಬನೆಗಳನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡುತ್ತದೆ**
+- **ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಂಯೋಜನೆಗಾಗಿ ಬಿಲ್ಡ್ ಟೂಲ್ಚೇನ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುತ್ತದೆ**
+- **ವಿಸ್ತಾರ ನಿರ್ಮಾಣ ಮತ್ತು ಪರೀಕ್ಷೆಯ ಸಮಯತಂಗೆ ಡೆವಲಪ್‌ಮೆಂಟ್ ಪರಿಸರ ಸಜ್ಜುಗೊಳಿಸುತ್ತದೆ**
+- **ಕೋಡ್ ಒಗ್ಗೂಡಿಸುವಿಕೆ, ಆಪ್ಟిమೈಜೇಶನ್ ಮತ್ತು ಮಲ್ಟಿ-ಬ್ರೌಸರ ಹೊಂದಾಣಿಕೆ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ**
+
+> 💡 **ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ಒಳನೋಟ**: ವೆಬ್‌ಪ್ಯಾಕ್ ನಿಮ್ಮ ಮೂಲ ಕೋಡ್ ಅನ್ನು `/src/index.js` ನಿಂದ `/dist/main.js` ಗೆ ಬಂಡಲ್ ಮಾಡುತ್ತದೆ. ಈ ಪ್ರಕ್ರಿಯೆ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಉತ್ಪಾದನೆಗಾಗಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಬ್ರೌಸರ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
+
+### ನಿಮ್ಮ ಪ್ರಗತಿಯಿಂದ ಪರೀಕ್ಷಿಸಿ
+
+ಈ ದಶ್ಕದಲ್ಲಿ, ನೀವು ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ಪರೀಕ್ಷಿಸಬಹುದು:
+1. **ನಡೆಪಿಸಿ** ನಿಮ್ಮ ಕೋಡ್ ಸಂಗ್ರಹಿಸಲು build ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ  
+2. **ಲೋಡ್ ಮಾಡಿ** ಡೆವಲಪರ್ ಮೋಡ್ ಬಳಸಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ಗೆ ವಿಸ್ತರಣೆ ಸೇರಿಸಿ  
+3. **ಪರಿಶೀಲಿಸಿ** ರೂಪವು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶವಾಗುತ್ತದೆಯೇ ಮತ್ತು ವೃತ್ತಿಪರವಾಗಿ ಕಾಣಿತೆಯೇ ಎಂದು  
+4. **ತಪಾಸಿಸಿ** ಎಲ್ಲಾ ರೂಪ ಅಂಶಗಳು ಸರಿಯಾಗಿ ಸಮತೋಲಿತವಾಗಿದ್ದ ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದ್ದಾರೆಯೇ  
+
+**ನೀವು ಸಾಧಿಸಿದ ವಿಷಯಗಳು:**  
+- **ನಿರ್ಮಿಸಿದಿರಿ** ನಿಮ್ಮ ವಿಸ್ತರಣೆಗೆ ಮೂಲಭೂತ HTML ರಚನೆ  
+- **ತಯಾರಿಸಿದ್ದಿರಿ** ಸೂಕ್ತ ವ್ಯಾಕರಣದ ಮಾರ್ಕಪ್‌ನೊಂದಿಗೆ ಕಾನ್ಫಿಗರೇಷನ್ ಮತ್ತು ಫಲಿತಾಂಶ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು  
+- **ಸ್ಥಾಪಿಸಿಕೊಂಡಿರಿ** ಆಧುನಿಕ ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯಪದ್ಧತಿಯನ್ನು ಕೈಗಾರಿಕಾ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಬಳಸಿ  
+- **ಸಿದ್ಧಗೊಳಿಸಿದ್ದಿರಿ** ಇಂಟರ್‌ಆಕ್ಟಿವ್ JavaScript ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸೇರಿಸಲು ನೆಲೆ  
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**  
+**ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿ ಪ್ರಗತಿ**: ಮುಂದುವರೆಸುವ ಮೊದಲು ನಿಮ್ಮ ಅರಿವನ್ನು ಪರಿಶೀಲಿಸಿ:  
+- ✅ ಪ್ರತಿ ಕಡತದ ಗುರಿಯನ್ನು ನೀವು ವಿವರಿಸಬಹುದೆ?  
+- ✅ build ಪ್ರಕ್ರಿಯೆ ನಿಮ್ಮ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದೀರಾ?  
+- ✅ ನಾವು ಏಕೆ ಕಾನ್ಫಿಗರೇಷನ್ ಮತ್ತು ಫಲಿತಾಂಶಗಳನ್ನು ವಿಭಿನ್ನ UI ವಿಭಾಗಗಳಾಗಿ ಬೇರ್ಪಡಿಸುತ್ತೇವೆ?  
+- ✅ ರೂಪ ರಚನೆ ಹೇಗೆ ಉಪಯೋಗ ಮತ್ತು ಪ್ರವೇಶಾರ್ಹತೆಯನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ?  
+
+**ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯಪದ್ಧತಿ ಅರಿವು**: ನೀವು ಈಗ ಸಾಧ್ಯವಾಗಿದೆ:  
+1. **ಮಾರ್ಪಡಿ** ನಿಮ್ಮ ವಿಸ್ತರಣೆಯ ಇಂಟರ್ಫೇಸ್‌ನ HTML ಮತ್ತು CSS ಅನ್ನು  
+2. **ನಡೆಪಿಸಿ** ನಿಮ್ಮ ಬದಲಾವಣೆಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು build ಆಜ್ಞೆ  
+3. **ಪುನರಾರಂಭಿಸಿ** ನವೀಕರಣಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ವಿಸ್ತರಣೆಯನ್ನು  
+4. **ಡೆಬಗ್ ಮಾಡಿ** ಸಮಸ್ಯೆಗಳನ್ನು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಉಪಕರಣಗಳನ್ನು ಬಳಸಿ  
+
+ನೀವು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿಯ ಮೊದಲ ಹಂತವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ್ದೀರಿ. ರೈಟ್ ಬ್ರದರ್ಸ್ ಮೊದಲಿಗೆ ಏರೋಡೈನಾಮಿಕ್ಸ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಂತೆ, ಈ ನೆಲೆಗಳು ಮುಂದಿನ ಪಾಠದಲ್ಲಿ ಹೆಚ್ಚು ಜಟಿಲ ಇಂಟರ್‌ಆಕ್ಟಿವ್ ಲಕ್ಷಣಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಸಿದ್ಧತೆ ಒದಗಿಸುತ್ತವೆ.  
+
+## GitHub Copilot Agent ಚಾಲೆಂಜ್ 🚀  
+
+Agent ಮೋಡ್ ಬಳಸಿ ಕೆಳಗಿನ ಚಾಲೆಂಜ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:  
+
+**ವಿವರಣೆ:** API ಕೀ ಮತ್ತು ಪ್ರಾಂತ ಕೋಡ್‌ಗಳನ್ನು ಎಂಟರ್ ಮಾಡುತ್ತಿರುವಾಗ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಫಾರ್ಮ್ ಮಾನ್ಯತೆ ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ಹೆಚ್ಚಿಸಿ.  
+
+**ಪ್ರಾಂಪ್ಟ್:** ನಿಮ್ಮ JavaScript ಮಾನ್ಯತೆ ಕಾರ್ಯಗಳು API ಕೀ ಕ್ಷೇತ್ರವು ಕನಿಷ್ಠ 20 ಅಕ್ಷರಗಳನ್ನು ಹೊಂದಿದೆಯೇ ಮತ್ತು ಪ್ರಾಂತ ಕೋಡ್ ಸರಿಯಾದ ಸ್ವರೂಪದಲ್ಲಿ ಇದೆಯೇ (ಉದಾಹರಣೆಗೆ 'US-NEISO') ಎಂದು ಪರಿಶೀಲಿಸಬೇಕು. ಮಾನ್ಯ ಇನ್‌ಪುಟ್‌ಗಳಿಗಾಗಿ ಇನ್‌ಪುಟ್ ಬಾರ್ಡರ್ ಬಣ್ಣಗಳನ್ನು ಹಸಿರು ಮತ್ತು ಅಮಾನ್ಯಗಳಿಗೆ ಕೆಂಪು ಬದಲಿಸುವ ಮೂಲಕ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ಸೇರಿಸಿ. ಸುರಕ್ಷತೆಗಾಗಿ API ಕೀ ಪ್ರದರ್ಶನವನ್ನು ತೋರಿಸುವ/ಮರೆಮಾಡುವ ಟೋಗಲ್ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಕೂಡ ಸೇರಿಸಿ.  
+
+ಇಲ್ಲಿ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ.  
+
+## 🚀 ಚಾಲೆಂಜ್  
+
+ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಅಂಗಡಿ ನೋಡಿಸಿ ಹಾಗೂ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ಗೆ ಒಂದು ವಿಸ್ತರಣೆ ಸ್ಥಾಪಿಸಿ. ಇದರ ಕಡತಗಳನ್ನು ಆಸಕ್ತಿದಾಯಕ ರೀತಿಯಲ್ಲಿ ಪರಿಶೀಲಿಸಬಹುದು. ನೀವು ಏನು ಕಂಡುಹಿಡಿದಿರಿ?  
+
+## ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ  
+
+[ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/24)  
+
+## ವಿಮರ್ಶೆ & ಸ್ವಯಂ ಅಧ್ಯಯನ  
+
+ಈ ಪಾಠದಲ್ಲಿ ನೀವು ವೆಬ್ ಬ್ರೌಸರ್ ಇತಿಹಾಸದ ಬಗ್ಗೆ ಸ್ವಲ್ಪ ಕಲಿತುಕೊಂಡಿರಿ; ವೆಬ್ ಅದನ್ನು ಹೇಗೆ ಬಳಸುತ್ತೇವೆ ಎಂದು ವಿಶ್ವ ವೆಬ್ ಆವಿಷ್ಕಾರಕರ ಕನಸು ಏನಾಗಿತ್ತು ಎಂದು ತಿಳಿಯಲು ಈ ಅವಕಾಶವನ್ನು ಉಪಯೋಗಿಸಿ. ಕೆಲವು ಉಪಯುಕ್ತ ತಾಣಗಳು:  
+
+[ವೆಬ್ ಬ್ರೌಸರ್‌ಗಳ ಇತಿಹಾಸ](https://www.mozilla.org/firefox/browsers/browser-history/)  
+
+[ವೆಬ್ಬಿನ ಇತಿಹಾಸ](https://webfoundation.org/about/vision/history-of-the-web/)  
+
+[ಟಿಮ್ ಬರ್ನರ್ಸ್-ಲೀ ಅವರ ಸಂದರ್ಶನ](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)  
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನಿಮಗೆ ಸಾಧ್ಯವಾದದು**  
+- [ ] Chrome/Edge ವಿಸ್ತರಣೆ ಪುಟವನ್ನು ತೆರೆಯಿರಿ (chrome://extensions) ಮತ್ತು ನೀವು ಏನು ಸ್ಥಾಪಿಸಿದ್ದೀರೋ ಅನ್ವೇಷಿಸಿ  
+- [ ] ವೆಬ್ ಪುಟ ಲೋಡ್ ಮಾಡುವಾಗ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಡೆವ್‌ಟೂಲ್‌ಗಳ ನೆಟ್ವರ್ಕ್ ಟ್ಯಾಬ್ ನೋಡಿ  
+- [ ] ಪುಟ ಮೂಲ (Ctrl+U) ನೋಡಲು ಪ್ರಯತ್ನಿಸಿ HTML ರಚನೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ  
+- [ ] ಯಾವುದೇ ವೆಬ್ ಪುಟದ ಅಂಶವನ್ನು ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಡೆವ್‌ಟೂಲ್‌ನಲ್ಲಿ ಅದರ CSS ಅನ್ನು ಬದಲಾಯಿಸಿ  
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದದ್ದು**  
+- [ ] ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಬ್ರೌಸರ್ ಅಡಿಫಾಂಡಮೆಂಟಲ್ಸ್ ತಿಳಿದುಕೊಳ್ಳಿ  
+- [ ] ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯಿಗಾಗಿ ಸರಳ manifest.json ಫೈಲ್ ರಚಿಸಿ  
+- [ ] ಪುಪ್ ಅಪ್ ತೋರಿಸುವ ಸರಳ "ಹಲೋ ವರ್ಲ್ಡ್" ವಿಸ್ತರಣೆ ನಿರ್ಮಿಸಿ  
+- [ ] ಡೆವಲಪರ್ ಮೋಡ್‌ನಲ್ಲಿ ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ ಪರೀಕ್ಷಿಸಿ  
+- [ ] ಗುರಿ ಬ್ರೌಸರ್‌ನ ವಿಸ್ತರಣೆ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಅನ್ನು ಅನ್ವೇಷಿಸಿ  
+
+### 📅 **ನಿಮ್ಮ ವಾರ-ದೀರ್ಘ ವಿಸ್ತರಣೆ ಯಾತ್ರೆ**  
+- [ ] ವಾಸ್ತವಿಕ ಉಪಯುಕ್ತತೆಯೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಸಂಪೂರ್ಣಗೊಳಿಸಿ  
+- [ ] ಕಾಂಟೆಂಟ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು, ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಮತ್ತು ಪಾಪ್‌ಅಪ್ ಸಂವಹನ ತಿಳಿದುಕೊಳ್ಳಿ  
+- [ ] ಸಂಗ್ರಹಣೆ, ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ಸಂದೇಶಗಳ ಪ್ರಕಾರ ಬ್ರೌಸರ್ API ಗಳಲ್ಲಿ ಪರಿಣತಿ ಪಡೆಯಿರಿ  
+- [ ] ನಿಮ್ಮ ವಿಸ್ತರಣೆಗೆ ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸ ಮಾಡಿ  
+- [ ] ವಿವಿಧ ವೆಬ್ ಸೈಟ್‌ಗಳು ಮತ್ತು ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ವಿಸ್ತರಣೆ ಪರೀಕ್ಷಿಸಿ  
+- [ ] ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಅಂಗಡಿಯಲ್ಲಿಯೇ ಪ್ರಕಟಿಸಿ  
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ-ದೀರ್ಘ ಬ್ರೌಸರ್ ಅಭಿವೃದ್ಧಿ**  
+- [ ] ವಿಭಿನ್ನ ಬಳಕೆದಾರ ಸಮಸ್ಯೆಗಳಿಗೆ ಪರಿಹಾರ ನೀಡುವ ಬಹು ವಿಸ್ತರಣೆಗಳು ನಿರ್ಮಿಸಿ  
+- [ ] ಉನ್ನತ ಬ್ರೌಸರ್ API ಮತ್ತು ಭದ್ರತೆ ಉತ್ತಮ ಕ್ರಮಗಳನ್ನು ಕಲಿಯಿರಿ  
+- [ ] ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳ ಬಾಹ್ಯ ಕೋಡ್‌ನಲ್ಲಿ ಕೊಡುಗೆ ನೀಡಿ  
+- [ ] ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಪ್ರೋಗ್ರೆಸಿವ್ ಹೆಚ್ಚಳವನ್ನು ಮಾಸ್ಟರ್ ಮಾಡಿ  
+- [ ] ಇತರರಿಗಾಗಿ ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣಗಳು ಮತ್ತು ಟೆಂಪ್ಲೇಟ್‌ಗಳನ್ನು ರಚಿಸಿ  
+- [ ] ಇತರ ಡೆವಲಪರ್‌ಗಳ ಸಹಾಯ ಮಾಡುವ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಪರಿಣಿತರಾಗಿರಿ  
+
+## 🎯 ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಮಾಸ್ಟರಿಯ ಸಮಯರೇಖೆ  
+
+```mermaid
+timeline
+    title ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿ ಪ್ರಗತಿ
+    
+    section ಆಧಾರಭೂತ (15 ನಿಮಿಷಗಳು)
+        Browser Understanding: ಕೋರ್ ವಾಸ್ತುಶಿಲ್ಪ
+                              : ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆ
+                              : ವಿಸ್ತರಣೆ ಸಂಯೋಜನೆ ಬಿಂದುವುಗಳು
+        
+    section ಸೆಟಪ್ (20 ನಿಮಿಷಗಳು)
+        Development Environment: ಪ್ರಾಜೆಕ್ಟ್ ವಿನ್ಯಾಸ
+                               : ಬಿಲ್ಡ್ ಸಾಧನಗಳ ಸಂರಚನೆ
+                               : ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಮೋಡ್
+                               : ವಿಸ್ತರಣೆ ಲೋಡ್ ಪ್ರಕ್ರಿಯೆ
+        
+    section ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸ (25 ನಿಮಿಷಗಳು)
+        User Experience: HTML ರಚನೆ
+                       : CSS ಶೈಲಿಕರಣ
+                       : ನಮೂನೆಯ ಮಾನ್ಯತೆ
+                       : ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸ
+        
+    section ಕೋರ್ ಕಾರ್ಯಾಚರಣೆ (35 ನಿಮಿಷಗಳು)
+        JavaScript Integration: ಘಟನಾ ನಿರ್ವಹಣೆ
+                              : API ಸಂವಹನಗಳು
+                              : ಡೇಟಾ ಸಂಗ್ರಹಣೆ
+                              : ದೋಷ ನಿರ್ವಹಣೆ
+        
+    section ಬ್ರೌಸರ್ APIs (45 ನಿಮಿಷಗಳು)
+        Platform Integration: ಅನುಮತಿ ವ್ಯವಸ್ಥೆ
+                            : ಸಂಗ್ರಹಣೆ APIs
+                            : ಟ್ಯಾಬ್ ನಿರ್ವಹಣೆ
+                            : ಪ್ರ_CONTEXT ಮೆನುಗಳು
+        
+    section ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯಗಳು (1 ವಾರ)
+        Professional Extensions: ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್ಗಳು
+                               : ವಿಷಯ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು
+                               : ಕ್ರಾಸ್ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ
+                               : ಕಾರ್ಯಕ್ಷamata ಉತ್ತಮಗೊಳಣೆ
+        
+    section ಪ್ರಕಟಣೆ (2 ವಾರಗಳು)
+        Distribution: ಸ್ಟೋರ್ ಸಲ್ಲಿಕೆ
+                   : ವಿಮರ್ಶಾ ಪ್ರಕ್ರಿಯೆ
+                   : ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ
+                   : ನವೀಕರಣ ನಿರ್ವಹಣೆ
+        
+    section ಪರಿಣತಿ ಮಟ್ಟ (1 ತಿಂಗಳು)
+        Extension Ecosystem: ಸುಧಾರಿತ APIಗಳು
+                           : ಭದ್ರತೆ ಉತ್ಕೃಷ್ಟ ಅಭ್ಯಾಸಗಳು
+                           : ಎಂಟರ್ಪ್ರೈಸ್ ವೈಶಿಷ್ಟ್ಯಗಳು
+                           : ಫ್ರೇಮ್ವರ್ಕ್ ಸಂಯೋಜನೆ
+```  
+### 🛠️ ನಿಮ್ಮ ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣ ಬರೆದಿಖಿತಿ ಸಾರಾಂಶ  
+
+ಈ ಪಾಠವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ಮೇಲೆ ಇಂದು ನಿಮಗೆ:  
+- **ಬ್ರೌಸರ್ ವಾಸ್ತುಶಿಲ್ಪ ಅರಿವು**: ರೆಂಡರಿಂಗ್ ಎಂಜಿನ್ಸ್, ಭದ್ರತಾ ಮಾದರಿಗಳು ಮತ್ತು ವಿಸ್ತರಣೆ ಅನುಸಂಧಾನ  
+- **ಅಭಿವೃದ್ಧಿಯ ಪರಿಸರ**: Webpack, NPM ಹಾಗೂ ಡೆಬಗ್ಗಿನ ಸಾಮರ್ಥ್ಯಗಳೊಂದಿಗೆ ಆಧುನಿಕ ಸಲಕರಣೆಗಳ ಸಾಲು  
+- **UI/UX ನೆಲೆ​​**: ಪ್ರಗತಿಶೀಲ ಬಹಿರಂಗಪಡಿಸುವ ಮಾದರಿಗಳೊಂದಿಗೆ ವ್ಯಾಕರಣಾತ್ಮಕ HTML ರಚನೆ  
+- **ಭದ್ರತಾ ಜಾಗೃತಿ**: ಬ್ರೌಸರ್ ಅನುಮತಿಗಳ ಅರಿವು ಮತ್ತು ಸುರಕ್ಷಿತ ಅಭಿವೃದ್ಧಿ ಕ್ರಮಗಳು  
+- **ಕ್ರಾಸ್ ಬ್ರೌಸರ್ ಪರಿಕಲ್ಪನೆಗಳು**: ಹೊಂದಾಣಿಕೆ ಪರಿಗಣನೆಗಳು ಮತ್ತು ಪರೀಕ್ಷಾ ವಿಧಾನಗಳು  
+- **API ಸಂಯೋಜನೆ**: ಹೊರಗಿನ ಡೇಟಾ ಮೂಲಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ನೆಲೆನಿಲ್ಲಿಸು  
+- **ವೃತ್ತಿಪರ ಕಾರ್ಯಪದ್ಧತಿ**: ಕೈಗಾರಿಕಾ-ಮಟ್ಟದ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಪರೀಕ್ಷಾ ವಿಧಾನಗಳು  
+
+**ವಾಸ್ತವಿಕ ಜಗತ್ತಿನ ಅನ್ವಯಗಳು**: ಈ ಕೌಶಲ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ:  
+- **ವೆಬ್ ಅಭಿವೃದ್ಧಿ**: ಏಕದೃಶ್ಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಪ್ರಗತಿಶೀಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು  
+- **ಡೆಸ್ಕ್‌ಟಾಪ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು**: ಎಲೆಕ್ಟ್ರಾನ್ ಮತ್ತು ವೆಬ್ ಆಧಾರಿತ ಡೆಸ್ಕ್‌ಟಾಪ್ ಸಾಫ್ಟ್‌ವೇರ್  
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ಹೈಬ್ರಿಡ್ ಆಪ್ ಮತ್ತು ವೆಬ್ ಆಧಾರಿತ ಮೊಬೈಲ್ ಪರಿಹಾರಗಳು  
+- **ಎಂಟರ್‌ಪ್ರೈಸ್ ಉಪಕರಣಗಳು**: ಆಂತರಿಕ ಕಾರ್ಯಕ್ಷಮತೆ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಕಾರ್ಯಪದ್ಧತಿ ಸ್ವಯಂಕರಣೆ  
+- **ಓಪನ್ ಸೋರ್ಸ್**: ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಯೋಜನೆಗಳು ಮತ್ತು ವೆಬ್ ಮಾನದಂಡಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡುವುದು  
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು ಮುಂದೆ ಇಂಟರ್‌ಆಕ್ಟಿವ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸೇರಿಸಲು, ಬ್ರೌಸರ್ API ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಮತ್ತು ಬಳಕೆದಾರರ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುವ ವಿಸ್ತರಣೆಗಳನ್ನು ರಚಿಸಲು ಸಿದ್ಧರಾಗಿದ್ದೀರಿ!  
+
+## ನೇಮಕಾತಿ  
+
+[ನಿಮ್ಮ ವಿಸ್ತರಣೆಯ ಶೈಲಿಯನ್ನು ಮರುರಚಿಸಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ರೆಡ್ಡು ನೋಟಿಸು**:  
+ಈ ದಾಖಲೆ AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಮೂಲಕ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ಪ್ರಮಾಣಿಕತೆಯನ್ನು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳಿರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿರುತ್ತದೆ. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಸಲಹೆ ನೀಡಲಾಗಿದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥ ತಿಳಿಯದಿಕೆ ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆಯ ಕುರಿತು ನಾವು ಹೊಣೆಗಾರರಾಗಲು ಸಾಧ್ಯವಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/1-about-browsers/assignment.md

@@ -0,0 +1,146 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b6897c02603d0045dd6d8256e8714baa",
+  "translation_date": "2026-01-08T15:56:29+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಕಾರ್ಯ: ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಮರು obliksilu
+
+## ಸ್ಪಷ್ಟನೆ
+
+ನೀವು ನಿಮ್ಮ ಕಾರ್ಬನ್ ಫುಟ್ಪ್ರಿಂಟ್ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗೆ HTML ರಚನೆಯನ್ನು ರಚಿಸಿದ್ದ ಮೇಲೆ, ಅದನ್ನು ದೃಶ್ಯವಾಗಿ ಆಕರ್ಷಕ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿಯಾಗಿ ಮಾಡಲು ಸಮಯವಾಗಿದೆ. ಉತ್ತಮ ವಿನ್ಯಾಸ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸು ತದೆ ಮತ್ತು ನಿಮ್ಮ ವಿಸ್ತರಣೆprofessionally ಮತ್ತು ಆಕರ್ಷಕವಾಗಿಸುತ್ತದೆ.
+
+ನಿಮ್ಮ ವಿಸ್ತರಣೆಗೆ ಮೂಲಭೂತ CSS ಶೈಲಿಯುತವಿದೆ, ಆದರೆ ಈ ಕಾರ್ಯವು ನಿಮ್ಮ ವೈಯಕ್ತಿಕ ಶೈಲಿಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವ ವಿಶಿಷ್ಟ ದೃಶ್ಯ ಚಿಹ್ನೆಯನ್ನು ರಚಿಸಲು ತಾಕತ್ ನೀಡುತ್ತದೆ, ಅದೇ ಸಮಯದಲ್ಲಿ ಉತ್ತಮ ಬಳಕೆಲಭ್ಯತೆಯನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತದೆ.
+
+## ಸೂಚನೆಗಳು
+
+### ಭಾಗ 1: தற்போதಿನ ವಿನ್ಯಾಸ ವಿಶ್ಲೇಷಣೆ ಮಾಡಿ
+
+ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡುವ ಮುನ್ನ, ಇತ್ತೀಚಿನ CSS ರಚನೆಯನ್ನು ಪರಿಶೀಲಿಸಿ:
+
+1. **ನಿಮ್ಮ ವಿಸ್ತರಣೆ ಯೋಜನೆಯಲ್ಲಿ CSS ಕಡತಗಳನ್ನು ಕಂಡುಹಿಡಿಯಿರಿ**
+2. **ಪ್ರಸ್ತುತ ಶೈಲಿಯ 접근 ಮತ್ತು ಬಣ್ಣ ವಿನ್ಯಾಸವನ್ನು ಪರಿಶೀಲಿಸಿ**
+3. **ರೂಪರೇಖೆ, ಟೈಪೋಗ್ರಾಫಿ ಮತ್ತು ದೃಶ್ಯ ಹೈರಾರ್ಕಿಯಲ್ಲಿ ಸುಧಾರಣೆಯ ಪ್ರದೇಶಗಳನ್ನು ಗುರುತಿಸಿ**
+4. ** ವಿನ್ಯಾಸವು ಬಳಕೆದಾರರ ಗುರಿಗಳನ್ನು (ಸುಲಭ ಫಾರ್ಮ್ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆ ಮತ್ತು ಸ್ಪಷ್ಟ ಡೇಟಾ ಪ್ರದರ್ಶನ) ಹೇಗೆ ಬೆಂಬಲಿಸುತ್ತದೆ ಎಂದು ಪರಿಗಣಿಸಿ**
+
+### ಭಾಗ 2: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಶೈಲಿ ವಿನ್ಯಾಸಮಾಡಿ
+
+ಒಗ್ಗೂಡಿದ ದೃಶ್ಯ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸಿ, ಇದರಲ್ಲಿ ಒಳಗೊಂಡಿವೆ:
+
+**ಬಣ್ಣ ವಿನ್ಯಾಸ:**
+- ಪರಿಸರಾತ್ಮಕ ವಿಷಯಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವ ಪ್ರಾಥಮಿಕ ಬಣ್ಣ ಪ್ಯಾಲೆಟ್ ಆಯ್ಕೆಮಾಡಿ
+- ಪ್ರವೇಶಾತೆಗೆ ಸೂಕ್ತವಾದ ಸಾಕಷ್ಟು ವಿವೇಚನೆಯನ್ನು ಖಚಿತಪಡಿಸಿ (WebAIM ಯಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ)
+- ಬಣ್ಣಗಳು ವಿಭಿನ್ನ ಬ್ರೌಸರ್ ಥೀಮ್‌ಗಳಲ್ಲಿ ಹೇಗೆ ಕಾಣಿಸುತ್ತವೆ ಎಂದು ಪರಿಗಣಿಸಿ
+
+**ಟೈಪೋಗ್ರಾಫಿ:**
+- ಸಣ್ಣ ವಿಸ್ತರಣೆ ಗಾತ್ರಗಳಲ್ಲಿ ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುವ ಓದಬಹುದಾದ ಫಾಂಟ್‌ಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ
+- ಸೂಕ್ತ ಫಾಂಟ್ ಗಾತ್ರಗಳು ಮತ್ತು ತೂಕಗಳೊಂದಿಗೆ ಸ್ಪಷ್ಟ ಹೈರಾರ್ಕಿಯನ್ನು ಸ್ಥಾಪಿಸಿ
+- ಪLights್ ಮತ್ತು ಡಾರ್ಕ್ ಬ್ರೌಸರ್ ಥೀಮ್‌ಗಳಲ್ಲಿ ಪಠ್ಯ ಸ್ಪಷ್ಟವಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿ
+
+**ರೂಪರೇಖೆ ಮತ್ತು ಅಂತರ:**
+- ಫಾರ್ಮ್ ಅಂಶಗಳು ಮತ್ತು ಡೇಟಾ ಪ್ರದರ್ಶನದ ದೃಶ್ಯ ಸಂಘಟನೆಯನ್ನು ಸುಧಾರಿಸಿ
+- ಉತ್ತಮ ಓದುವಿಕೆಗಾಗಿ ಸೂಕ್ತ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಮಾರ್ಜಿನ್‌ಗಳನ್ನು ಸೇರಿಸಿ
+- ವಿಭಿನ್ನ ಪರದೆ ಗಾತ್ರಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ ತತ್ವಗಳನ್ನು ಪರಿಗಣಿಸಿ
+
+### ಭಾಗ 3: ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಅನುಷ್ಠಾನ ಮಾಡಿ
+
+ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಲು CSS ಕಡತಗಳನ್ನು ಬದಲಾಯಿಸಿ:
+
+```css
+/* Example starting points for customization */
+
+.form-data {
+    /* Style the configuration form */
+    background: /* your choice */;
+    padding: /* your spacing */;
+    border-radius: /* your preference */;
+}
+
+.result-container {
+    /* Style the data display area */
+    background: /* complementary color */;
+    border: /* your border style */;
+    margin: /* your spacing */;
+}
+
+/* Add your custom styles here */
+```
+
+**ಶೈಲಿಗೊಳಿಸಲು ಮುಖ್ಯ ಪ್ರದೇಶಗಳು:**
+- **ಫಾರ್ಮ್ ಅಂಶಗಳು**: ಇನ್ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳು, ಲೇಬಲ್‌ಗಳು, ಮತ್ತು ಸಲ್ಲಿಸುವ ಬಟನ್
+- **ಫಲಿತಾಂಶ ಪ್ರದರ್ಶನ**: ಡೇಟಾ ಕುಂಟೈನರ್, ಪಠ್ಯ ಶೈಲಿ, ಮತ್ತು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು
+- **ಆಂತರಿಕ ಅಂಶಗಳು**: ಹೋವರ್ ಪರಿಣಾಮಗಳು, ಬಟನ್ ಸ್ಥಿತಿಗಳು, ಮತ್ತು ಪರಿವರ್ತನೆಗಳು
+- **ಒಟ್ಟು ರೂಪರೇಖೆ**: ಕುಂಟೈನರ್ ಅಂತರ, ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳು, ಮತ್ತು ದೃಶ್ಯ ಹೈರಾರ್ಕಿ
+
+### ಭಾಗ 4: ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಸುಧಾರಿಸಿ
+
+1. **`npm run build`** ಜೊತೆಗೆ ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು ನಿರ್ಮಿಸಿ
+2. **ನಿಮ್ಮ ಬ್ರೌಸರ್‌ಗೆ ನವೀಕರಿಸಿದ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ**
+3. **ಎಲ್ಲಾ ದೃಶ್ಯ ಸ್ಥಿತಿಗಳನ್ನು ಪರಿಶೀಲಿಸಿ** (ಫಾರ್ಮ್ ಎಂಟ್ರಿ, ಲೋಡಿಂಗ್, ಫಲಿತಾಂಶ ಪ್ರದರ್ಶನ, ದೋಷಗಳು)
+4. **ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಸಾಧನಗಳ ಮೂಲಕ ಪ್ರವೇಶಕರಣತೆಗೆ ಪರಿಶೀಲನೆ ಮಾಡಿ**
+5. **ವಾಸ್ತವಿಕ ಬಳಕೆಯ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಶೈಲಿಗಳನ್ನು ಸುಧಾರಿಸಿ**
+
+## ಸೃಜನಾತ್ಮಕ ಸವಾಲುಗಳು
+
+### ಬೇಸಿಕ್ ಮಟ್ಟ
+- ಬಣ್ಣಗಳು ಮತ್ತು ಫಾಂಟ್ ಸೇರಿಸಿ ಸದೃಢ ಥೀಮ್ ಸೃಷ್ಟಿಸಿ
+- ಇಂಟರ್ಫೇಸಿನ ಮೂಲಕ ಅಂತರ ಮತ್ತು ಅಳವಡಿಕೆಯನ್ನು ಸುಧಾರಿಸಿ
+- ಆಂತರಿಕ ಅಂಶಗಳಿಗೆ ಸೂಕ್ಷ್ಮ ಹೋವರ್ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+
+### ಮಧ್ಯಂತರ ಮಟ್ಟ
+- ನಿಮ್ಮ ವಿಸ್ತರಣೆಗೆ ಕಸ್ಟಮ್ ಐಕಾನ್‌ಗಳು ಅಥವಾ ಗ್ರಾಫಿಕ್‌ಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಿ
+- ವಿಭಿನ್ನ ಸ್ಥಿತಿಗಳ ಮಧ್ಯೆ ಸ್ಮೂತ್ ಪರಿವರ್ತನೆಗಳನ್ನು ಅನುಷ್ಠಾನ ಮಾಡಿ
+- API ಕರೆಗಳಿಗೆ ಏಕಕಾಲೀನ ಲೋಡಿಂಗ್ ಅನಿಮೆಷನ್ ರಚಿಸಿ
+
+### ಉನ್ನತ ಮಟ್ಟ
+- ಹಲವೆಡೆ ಥೀಮ್ ಆಯ್ಕೆಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಿ (ಬಿಳಿ/ಕಪ್ಪು/ಅತ್ಯಧಿಕ ವೈರುದ್ದ)
+- ವಿಭಿನ್ನ ಬ್ರೌಸರ್ ವಿಂಡೋ ಗಾತ್ರಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸವನ್ನು ಅನುಷ್ಠಾನ ಮಾಡಿ
+- ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವ ಸೂಕ್ಷ್ಮ ಸಂವೇದನೆಗಳನ್ನು ಸೇರಿಸಿ
+
+## ಸಲ್ಲಿಸುವ ಮಾರ್ಗಸೂಚಿಗಳು
+
+ನಿಮ್ಮ ಪೂರ್ಣಗೊಂಡ ಕಾರ್ಯದಲ್ಲಿ ಇದನ್ನು ಒಳಗೊಂಡಿರಬೇಕು:
+
+- **ನಿಮ್ಮ ಕಸ್ಟಮ್ ಶೈಲಿಯೊಂದಿಗೆ ಬದಲಾಯಿಸಿದ CSS ಕಡತಗಳು**
+- **ಬಳಕೆ ಮಾಡಲಾದ ವಿವಿಧ ಸ್ಥಿತಿಗಳಲ್ಲಿ ನಿಮ್ಮ ವಿಸ್ತರಣೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು** (ಫಾರ್ಮ್, ಲೋಡಿಂಗ್, ಫಲಿತಾಂಶ)
+- **ಸಣ್ಣ ವಿವರಣೆ** (2-3 ವಾಕ್ಯಗಳು) ನಿಮ್ಮ ವಿನ್ಯಾಸ ಆಯ್ಕೆಗಳು ಮತ್ತು ಅವು ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ವಿವರಿಸುವದು
+
+## ಮೌಲ್ಯಮಾಪನ ಕ್ರಮ
+
+| ಮಾನದಂಡ | ವಿರಳ (4) | ನೈಪುಣ್ಯ (3) | ಅಭಿವೃದ್ಧಿ (2) | ಪ್ರಾರಂಭ (1) |
+|----------|---------------|----------------|----------------|----------------|
+| **ದೃಶ್ಯ ವಿನ್ಯಾಸ** | ಕ್ರಿಯೇಟಿವ್, ಒಗ್ಗೂಡಿದ ವಿನ್ಯಾಸ, ಬಳಕೆಲಭ್ಯತೆಯನ್ನು ಬೆಳಸುತ್ತಿದ್ದ ಮತ್ತು ಬಲವಾದ ವಿನ್ಯಾಸ ಸಿದ್ಧಾಂತಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವ | ಉತ್ತಮ ವಿನ್ಯಾಸ ಆಯ್ಕೆಗಳು, ಸತತ ಶೈಲಿ ಮತ್ತು ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಹೈರಾರ್ಕಿ | ಮೂಲಭೂತ ವಿನ್ಯಾಸ ಸುಧಾರಣೆಗಳೊಂದಿಗೆ ಕೆಲವು ಸತತತೆ ಸಮಸ್ಯೆಗಳು | ಅಲ್ಪ ಶೈಲಿ ಬದಲಾವಣೆಗಳ ಅಥವಾ ಅಸತತ ವಿನ್ಯಾಸ |
+| **ಕಾರ್ಯಕ್ಷಮತೆ** | ಎಲ್ಲಾ ಶೈಲಿ ನೀಡಿದ ಸ್ಥಿತಿಗಳಲ್ಲಿ ಮತ್ತು ಬ್ರೌಸರ್ ಪರಿಸರಗಳಲ್ಲಿ ಸುಗಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ | ಶೈಲಿ ಅಲ್ಪ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ಉತ್ತಮ ಕೆಲಸ ಮಾಡುತ್ತವೆ | ಕೆಲವು ಪ್ರದರ್ಶನ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ಬಹುಶಃ ಶೈಲಿ ಕಾರ್ಯನಿರ್ವಹಣೆಯಲ್ಲ | ಬಳಕೆಲಭ್ಯತೆಗೆ ಪರಿಣಾಮ ಬೀರುವ ಪ್ರಮುಖ ಶೈಲಿ ಸಮಸ್ಯೆಗಳು |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಸ್ವಚ್ಛ, ಚೆನ್ನಾಗಿ ಸಂಯೋಜಿತ CSS, ಅರ್ಥಪೂರ್ಣ ಕ್ಲಾಸ್ ಹೆಸರುಗಳು ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಸಲೆಕ್ಟರ್‌ಗಳು | ಸೂಕ್ತ ಸಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸಿ ಉತ್ತಮ CSS ರಚನೆ | ಸ್ವೀಕೃತ CSS ಕೇಸ್ ಕೆಲವೊಂದು ಸಂಘಟನೆ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ | ಕೀಟಿಯ CSS ರಚನೆ ಅಥವಾ ಜಟಿಲ ಶೈಲಿ |
+| **ಪ್ರವೇಶಿಕತೆ** | ಉತ್ತಮ ಬಣ್ಣ ವಿವೇಚನೆ, ಓದಬಹುದಾದ ಫಾಂಟ್‌ಗಳು, ಮತ್ತು ಬಾಧಿತರಿಗೆ ಪರಿಗಣನೆ | ಉತ್ತಮ ಪ್ರವೇಶಿಕೆ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸುಧಾರಣೆಗೆ ಮಾರ್ಗ | ಮೂಲಭೂತ ಪ್ರವೇಶಿಕೆಯ ಪರಿಗಣನೆ ಕೆಲವೊಂದಿಷ್ಟು ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ | ಪ್ರವೇಶಿಕೆಯ ಅಗತ್ಯತೆಯ ಮೇಲೆ ಸೀಮಿತ ಗಮನ |
+
+## ಯಶಸ್ಸಿಗೆ ಸಲಹೆಗಳು
+
+> 💡 **ವಿನ್ಯಾಸ ಸಲಹೆ**: ಸಣ್ಣ ಬದಲಾವಣೆಗಳಿಂದ ಪ್ರಾರಂಭಿಸಿ, ನಂತರ ಹೆಚ್ಚು ನಾಟಕೀಯ ಶೈಲಿಗೆ ಏರಿಕೆ ಮಾಡಿರಿ. ಟೈಪೋಗ್ರಾಫಿ ಮತ್ತು ಅಂತರದಲ್ಲಿ ಸಣ್ಣ ಸುಧಾರಣೆಗಳು ಅತಿ ಶ್ರೇಷ್ಠ ಗುಣಮಟ್ಟದ ಪರಿಣಾಮ ಉಂಟುಮಾಡುತ್ತವೆ.
+
+**ಅನುಸರಿಸುವ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು:**
+- ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು ಬಿಳಿ ಮತ್ತು ಕಪ್ಪು ಬ್ರೌಸರ್ ಥೀಮ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ
+- ಉತ್ತಮ ವ್ಯಾಪ್ತಿಗಾಗಿ ಸಂಬಂಧಿತ ಘಟಕಗಳನ್ನು (em, rem) ಬಳಸಿ
+- CSS ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ ಸತತ ಅಂತರವನ್ನು ಕಾಯ್ದುಕೊಳ್ಳಿ
+- ವಿಭಿನ್ನ ದೃಶ್ಯ ಅಗತ್ಯಗಳ ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ವಿನ್ಯಾಸ ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂದು ಪರಿಗಣಿಸಿ
+- ನಿಮ್ಮ CSS ಸರಿಯಾದ ವ್ಯಾಕರಣವನ್ನು ಅನುಸರಿಸುವುದಾಗಿ ಪರಿಶೀಲಿಸಿ
+
+> ⚠️ **ಸಾಮಾನ್ಯ ভুল:** ದೃಶ್ಯ ಆಕರ್ಷಕತೆಗಾಗಿ ಬಳಕೆಲಭ್ಯತೆ ಬಲಿ ಹಾಕಬೇಡಿ. ನಿಮ್ಮ ವಿಸ್ತರಣೆ ಚಿತ್ತಾಕರ್ಷಕ ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಣಾತ್ಮಕವಾಗಿರಬೇಕು.
+
+**ಮರೆತುಬಾರದಿರಿ:**
+- ಪ್ರಮುಖ ಮಾಹಿತಿಯನ್ನು ಸುಲಭವಾಗಿ ಓದಬಹುದಾಗಿರಿಸಿ
+- ಬಟನ್‌ಗಳು ಮತ್ತು ಆಂತರಿಕ ಅಂಶಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಲು ಸುಲಭವಾಗಿರಲಿ
+- ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳಿಗೆ ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಕಾಪಾಡಿ
+- ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ನಿಜವಾದ ಡೇಟಾ ಜೊತೆ ಪರೀಕ್ಷಿಸಿ, ಕೇವಲ ಪ್ಲೇಸ್ಹೋಲ್ಡರ್ ಪಠ್ಯದಿಂದಲ್ಲ
+
+ಕಾರ್ಯಕ್ಷಮ ಮತ್ತು ದೃಶ್ಯವಾಗಿ ಅದ್ಭುತವಾದ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ರಚಿಸುವಲ್ಲಿ ಶುಭಾಶಯಗಳು!
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅಸ್ವೀಕಾರ**:
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) を ಉಪಯೋಗಿಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗೆ ಪ್ರಯತ್ನಿಸುವಾಗ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದದಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸ್ಪಷ್ಟತೆಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿಯೇ ಇರುವ ಮೂಲ ದಾಖಲೆ ಅನ್ನು ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ತೀವ್ರ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮನುಷ್ಯ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾದ ಯಾವುದೇ ತಪ್ಪುಗಳನ್ನು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಪುಗಳನ್ನು ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/2-forms-browsers-local-storage/README.md

@@ -0,0 +1,668 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2b6203a48c48d8234e0948353b47d84e",
+  "translation_date": "2026-01-08T15:12:48+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬ್ರೌಸರಿನ ವಿಸ್ತರಣೆ ಯೋಜನೆಯ ಭಾಗ 2: API ಅನ್ನು ಕಾಲ್ ಮಾಡಿ, ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಬಳಸಿರಿ
+
+```mermaid
+journey
+    title ನಿಮ್ಮ API ಏಕೀಕರಣ ಮತ್ತು ಸಂಗ್ರಹಣೆ ಯಾತ್ರಿ
+    section ಮೂಲ
+      DOM ಉಲ್ಲೇಖಗಳನ್ನು ಸೆಟ್ ಮಾಡಿ: 3: Student
+      ಈವೆಂಟ್ ಶ್ರೋತೃಗಳನ್ನು ಸೇರಿಸಿ: 4: Student
+      ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯನ್ನು ನಿರ್ವಹಿಸಿ: 4: Student
+    section ಡೇಟಾ ನಿರ್ವಹಣೆ
+      ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ: 4: Student
+      API ಕಾಲ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿ: 5: Student
+      ಅಸಿಂಕ್ರೊನಸ್ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಿ: 5: Student
+    section ಬಳಕೆದಾರ ಅನುಭವ
+      ದೋಷ ನಿಭಾಯಿಕೆಯನ್ನು ಸೇರಿಸಿ: 5: Student
+      ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಸೃಷ್ಟಿಸಿ: 4: Student
+      ಸಂವಹನಗಳನ್ನು ಮೆರುಗು ಮಾಡಿ: 5: Student
+```
+## ಪಠ್ಯಕ್ಕೆ ಮುನ್ನ ಪರೀಕ್ಷೆ
+
+[ಪಠ್ಯಗೆ ಮುನ್ನ ಪರೀಕ್ಷೆ](https://ff-quizzes.netlify.app/web/quiz/25)
+
+## ಪರಿಚಯ
+
+ನೀವು ಆರಂಭಿಸಿದ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ನೆನಪಿದೆಯೇ? ಈಗಾಗಲೇ ನೀವು ಒಳ್ಳೆಯದೊಂದು ಫಾರ್ಮ್ ರಚಿಸಿದ್ದು, ಆದರೆ ಅದು ಅಸ್ಥಿರವಾಗಿದೆ. ಇಂದು ನಾವು ಅದನ್ನು ನಿಜವಾದ ಡೇಟಾಗೆ ಸಂಪರ್ಕಿಸಿ, ಅದಕ್ಕೆ ಮೆಮೊರಿ ನೀಡುವ ಮೂಲಕ ಜೀವಂತ ಮಾಡೋಣ.
+
+ಅಪೊಲೊ ಮಿಷನ್ ನಿಯಂತ್ರಣ ಕಂಪ್ಯೂಟರ್‌ಗಳ ಬಗ್ಗೆ ಯೋಚಿಸಿ - ಅವು ನಿಗದಿತ ಮಾಹಿತಿಯನ್ನು ಮಾತ್ರ ಪ್ರದರ್ಶಿಸದೆ, ನಿರಂತರವಾಗಿ ಬಾಹ್ಯ ಬಾಹ್ಯಕಾಶ ಜಾಹೀರಾತುಗಳೊಂದಿಗೆ ಸಂಪರ್ಕದಲ್ಲಿದ್ದವು, ಟೆಲಿಮೆಟ್ರಿ ಡೇಟಾದೊಂದಿಗೆ ನವೀಕರಿಸುತ್ತಿದ್ದವು ಮತ್ತು ಪ್ರಮುಖ ಮಿಷನ್ ನಿಯಮಾವಳಿಗಳನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳುತ್ತಿದ್ದವು. ಇಂತಹ ಡೈನಾಮಿಕ್ ವ್ಯವಹಾರವನ್ನು ನಾವು ಇಂದು ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ. ನಿಮ್ಮ ವಿಸ್ತರಣೆ ಇಂಟರ್ನೆಟ್‌ಗೆ ತಲುಪುತ್ತದೆ, ನಿಜವಾದ ಪರಿಸರ ಡೇಟಾವನ್ನು ಹಿಡಿದುಕೊಳ್ಳುತ್ತದೆ ಹಾಗೂ ನಿಮ್ಮ ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ಮುಂದಿನ ಬಾರಿ ನೆನಪಿಸಿಕೊಳ್ಳುತ್ತದೆ.
+
+API ಸಂಯೋಜನೆ ಕಠಿಣವಾಗಿಯೂ ಕಾಣಬಹುದು, ಆದರೆ ಅದು ನಿಮ್ಮ ಕೋಡ್ ಗಳು ಇತರ ಸೇವೆಗಳೊಂದಿಗೆ ಸಂವಹನ ಮಾಡುವುದನ್ನು ಕಲಿಸುವುದೇ ಆಗಿದೆ. ನಾವು ಇಂದು ಮಾಡುವಂತೆ ಹವಾಮಾನ ಮಾಹಿತಿಯನ್ನು, ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಫೀಡ್ ಗಳನ್ನು, ಅಥವಾ ಕಾರ್ಬನ್ ಪಾದಚಿಹ್ನೆಯ ಮಾಹಿತಿಯನ್ನು ಪಡೆಯುವದು ಈ ಡಿಜಿಟಲ್ ಸಂಪರ್ಕಗಳನ್ನು ಸ್ಥಾಪಿಸುವ ಬಗ್ಗೆ.
+
+ಬ್ರೌಸರ್‌ಗಳು ಮಾಹಿತಿಯನ್ನು ಉಳಿಸುವುದನ್ನು ಹೇಗೆ ಸಹ ಮಾಡಬಹುದು ಎಂಬುದನ್ನು ಕೂಡ ಅನ್ವೇಷಣೆ ಮಾಡೋಣ - ಮೇಲ್ಮನಸ್ಸಿಗೆ ಬರುವಂತೆ, ಗ್ರಂಥಾಲಯಗಳು ಪುಸ್ತಕಗಳು ಎಲ್ಲಿದ್ದವು ಎಂಬುದನ್ನು ನೆನಪಿಡಲು ಕಾರ್ಡ್ ಕ್ಯಾಟಲಾಗ್ ಗಳನ್ನು ಬಳಸುತ್ತವೆ.
+
+ಈ ಪಾಠದ ಕೊನೆಯಲ್ಲಿ, ನೀವು ನಿಜವಾದ ಡೇಟಾವನ್ನು ಪಡೆದು, ಬಳಕೆದಾರ ಪ್ರಾಧಾನ್ಯಗಳನ್ನು ಸಂಗ್ರಹಿಸುವ, ಮತ್ತು ಸ್ಮೂತ್ ಅನುಭವ ಒದಗಿಸುವ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ಹೊಂದಿರುತ್ತೀರಿ. ಶುರು ಮಾಡೋಣ!
+
+```mermaid
+mindmap
+  root((Dynamic Extensions))
+    DOM Manipulation
+      Element Selection [ತತ್ವ ಆಯ್ಕೆ]
+      Event Handling [ಕಾರ್ಯಕ್ರಮ ನಿರ್ವಹಣೆ]
+      State Management [ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ]
+      UI Updates [UI ನವೀಕರಣಗಳು]
+    Local Storage
+      Data Persistence [ದತ್ತಾಂಶ ಸ್ಥಿರತೆ]
+      Key-Value Pairs [ಕೀ-ಮೌಲ್ಯ ಜೋಡಿಗಳು]
+      Session Management [ಸೆಷನ್ ನಿರ್ವಹಣೆ]
+      User Preferences [ಬಳಕೆದಾರ ಆದ್ಯತೆಗಳು]
+    API Integration
+      HTTP Requests [HTTP ವಿನಂತಿಗಳು]
+      Authentication [ಪ್ರಮಾಣೀಕರಣ]
+      Data Parsing [ದತ್ತಾಂಶ ವಿಶ್ಲೇಷಣೆ]
+      Error Handling [ದೋಷ ನಿರ್ವಹಣೆ]
+    Async Programming
+      Promises [ಪ್ರತಿಜ್ಞೆಗಳು]
+      Async/Await [ಅಸಿಂಕ್/ಅವೇಟ್]
+      Error Catching [ದೋಷ ಹಿಡಿತ]
+      Non-blocking Code [ಅವಾಧಾನ 코드]
+    User Experience
+      Loading States [ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು]
+      Error Messages [ದೋಷ ಸಂದೇಶಗಳು]
+      Smooth Transitions [ನಿರ್ದೇಶ ಯಾವಾಗತಗಳು]
+      Data Validation [ದತ್ತಾಂಶ ಮಾನ್ಯತೆ]
+```
+✅ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಎಲ್ಲಿ ಇರಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ಅಗತ್ಯವಿರುವ ಫೈಲ್‌ಗಳಲ್ಲಿ ಸಂಖ್ಯಿತ ಸೆಗುಮೆಂಟ್‌ಗಳನ್ನು ಅನುಸರಿಸಿ
+
+## ವಿಸ್ತರಣೆಗಾಗಿ ನಿರ್ವಹಿಸಲು ಬೇಸರಾದ ಅಂಶಗಳನ್ನು ಸಿದ್ಧಪಡಿಸಿ
+
+ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಟರ್‌ಫೇಸ್ ಅನ್ನು ನಿರ್ವಹಿಸುವ ಮುನ್ನ, ಅದಕ್ಕೆ ನಿರ್ದಿಷ್ಟ HTML ಅಂಶಗಳಿಗೆ रेಫರೆನ್ಸ್ ಬೇಕಾಗುತ್ತದೆ. ಇದು ದೂರದರ್ಶನವನ್ನು ನಿರ್ದಿಷ್ಟ ನಕ್ಷತ್ರಗಳಿಗೆ ನಿದರ್ಶನ ಮಾಡುವ ಹಾಗೆ – ಗ್ಯಾಲಿಲಿಯೋ ಜುಪಿಟರ್ ನ ಚಂದ್ರಿಕೆಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡುವ ಮೊದಲು ಜುಪಿಟರ್‌ನ್ನು ಕಂಡುಹಿಡಿಯಬೇಕು ಮತ್ತು ಫೋಕಸ್ ಮಾಡಬೇಕು.
+
+ನಿಮ್ಮ `index.js` ಫೈಲ್‌ನಲ್ಲಿ, ನಾವು ಪ್ರತಿ ಪ್ರಮುಖ ಫಾರ್ಮ್ ಅಂಶದ रेಫರೆನ್ಸ್ ಹಿಡಿಯುವ `const` ಮರುವಾಯಿಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತೇವೆ. ಇದು ವಿಜ್ಞಾನಿಗಳು ತಮ್ಮ ಉಪಕರಣಗಳನ್ನು ಚಿಹ್ನೆಮಾಡಿಕೊಳ್ಳುವ ರೀತಿಯಷ್ಟೇ - ಪ್ರತಿಸಾರಿ ಸಂಪೂರ್ಣ ಪ್ರಯೋಗಾಲಯವನ್ನು ಹುಡುಕದೆ, ಬೇಕಾದುದನ್ನು ನೇರವಾಗಿ ಪ್ರವೇಶಿಸಲು.
+
+```mermaid
+flowchart LR
+    A[ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್] --> B[ಡಾಕ್ಯುಮೆಂಟ್.querySelector]
+    B --> C[ಸಿಎಸ್‌ಎಸ್ ಸೆಲೆಕ್ಟರ್‌ಗಳು]
+    C --> D[HTML ಅಂಶಗಳು]
+    
+    D --> E[".form-data"]
+    D --> F[".region-name"]
+    D --> G[".api-key"]
+    D --> H[".loading"]
+    D --> I[".errors"]
+    D --> J[".result-container"]
+    
+    E --> K[ಫಾರ್ಮ್ ಅಂಶ]
+    F --> L[ನಮೂದಿನ ಕ್ಷೇತ್ರ]
+    G --> M[ನಮೂದಿನ ಕ್ಷೇತ್ರ]
+    H --> N[UI ಅಂಶ]
+    I --> O[UI ಅಂಶ]
+    J --> P[UI ಅಂಶ]
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style K fill:#fff3e0
+    style L fill:#fff3e0
+    style M fill:#fff3e0
+```
+```javascript
+// ಫಾರ್ಮ್ ಕ್ಷೇತ್ರಗಳು
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// ಫಲಿತಾಂಶಗಳು
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+**ಈ ಕೋಡ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- `document.querySelector()` ಬಳಸಿ CSS ಕ್ಲಾಸ್ ಆಯ್ಕೆದಾರಗಳೊಂದಿಗೆ ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು ಹಿಡಿಯುತ್ತದೆ
+- ಪ್ರದೇಶದ ಹೆಸರು ಮತ್ತು API ಕೀ ಗಾಗಿ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳಿಗೆ रेಫರೆನ್ಸ್‌ಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ
+- ಕಾರ್ಬನ್ ಉಪಯೋಗ ಡೇಟಾ ಪ್ರದರ್ಶನಕ್ಕೆ نتيಜಾ ಅಂಶಗಳಿಗೆ ಸಂಪರ್ಕ ಒದಗಿಸುತ್ತದೆ
+- ಲೋಡಿಂಗ್ ಸೂಚಕಗಳು ಮತ್ತು ದೋಷ ಸಂದೇಶಗಳಂತಹ UI ಅಂಶಗಳಿಗೆ ಪ್ರವೇಶ ಹೊಂದಿಸುತ್ತದೆ
+- ಪ್ರತಿಯೊಂದು ಅಂಶದ रेಫರೆನ್ಸ್ ಅನ್ನು ಪೂರ್ತಿ ಕೋಡ್‌ನಲ್ಲಿ ಸುಲಭವಾಗಿ ಮರುಬಳಕೆ ಮಾಡಲು `const` ಮರುವಾಯಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸುತ್ತದೆ
+
+## ಇವೆಂಟ್ ಲಿಸ್ನರ್‌ಗಳನ್ನು ಸೇರಿಸಿ
+
+ಈಗ ನಿಮ್ಮ ವಿಸ್ತರಣೆ ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಮಾಡೋಣ. ಇವೆಂಟ್ ಲಿಸ್ನರ್‌ಗಳು ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ಬಳಕೆದಾರ ಸಂವಹನವನ್ನು ನಿಗದಿಪಡಿಸುವ ಮಾರ್ಗವಾಗಿದೆ. ಮೊದಲು ದೂರಬಂಧ ಸಂಪರ್ಕ ಕಾರ್ಯಾಲಯಗಳ ಕಾರ್ಯಕರ್ತರನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಿ - ಅವರು ಕಾಲ್‌ಗಳನ್ನು ಕೇಳಿಕೊಂಡು, ಸಂಪರ್ಕವನ್ನು ಜೋಡಿಸುವರು.
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Form
+    participant JavaScript
+    participant API
+    participant Storage
+    
+    User->>Form: ಪ್ರದೇಶ/API ಕೀ ಅನ್ನು ತುಂಬುತ್ತದೆ
+    User->>Form: ಸಲ್ಲಿಸಿ ಕ್ಲಿಕ್ ಮಾಡುತ್ತದೆ
+    Form->>JavaScript: ಸಲ್ಲಿಸುವ ಘಟನೆ ಪ್ರಚೋದಿಸುತ್ತದೆ
+    JavaScript->>JavaScript: handleSubmit(e)
+    JavaScript->>Storage: ಬಳಕೆದಾರ ಪ್ರಾಧಾನ್ಯತೆಗಳನ್ನು ಉಳಿಸಿ
+    JavaScript->>API: ಕಾರ್ಬನ್ ಡೇಟಾವನ್ನು ತೆಗೆಯಿರಿ
+    API->>JavaScript: ಡೇಟಾವನ್ನು 반환ಿಸುವುದು
+    JavaScript->>Form: ಫಲಿತಾಂಶಗಳೊಂದಿಗೆ UI ಅನ್ನು ನವೀಕರಿಸಿ
+    
+    User->>Form: ತೆರವುಮಾಡಿ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ
+    Form->>JavaScript: ಕ್ಲಿಕ್ ಘಟನೆ ಪ್ರಚೋದಿಸುತ್ತದೆ
+    JavaScript->>Storage: ಉಳಿಸಿದ ಡೇಟಾವನ್ನು ತೆರವುಮಾಡಿ
+    JavaScript->>Form: ಆರಂಭಿಕ ಸ್ಥಿತಿಗೆ ಮರುಹೊಂದಿಸಿ
+```
+```javascript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+**ಈ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರಿತುಕೊಳ್ಳಿ:**
+- ಬಳಕೆದಾರರು Enter ಒತ್ತಿದಾಗ ಅಥವಾ ಸೇರಿಸಿ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಟ್ರಿಗರ್ ಆಗುವ ಫಾರ್ಮ್‌ಗೆ ಸಬ್ಮಿಟ್ ಲಿಸ್ನರ್ ಅನ್ನು ಅಟ್ಯಾಚ್ ಮಾಡಿ
+- ಫಾರ್ಮ್ ಮರುಹೊಂದಿಸಲು ಕ್ಲಿಯರ್ ಬಟನ್‌ಗೆ ಕ್ಲಿಕ್ ಲಿಸ್ನರ್ ಸಂಪರ್ಕಿಸಿ
+- ಹ್ಯಾಂಡ್ಲರ್ ಫಂಕ್ಷನ್‌ಗಳಿಗೆ ಘಟನೆ (e) ವಸ್ತುವನ್ನು ಹಸ್ತಾಂತರಿಸಿ
+- ವಿಸ್ತರಣೆಯ ಪ್ರಾರಂಭಿಕ ಸ್ಥಿತಿಯನ್ನು ಹೊಂದಿಸಲು ತಕ್ಷಣ `init()` ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಸಿ
+
+✅ ಇಲ್ಲಿ ಬಳಕೆಯಾದ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಏರೋ ಫಂಕ್ಷನ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಗಮನಿಸಿ. ಈ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿಧಾನವು ಸಾಂಪ್ರದಾಯಿಕ ಫಂಕ್ಷನ್ ಅನಿವೇಶನ থেকೂ ಸ್ವಚ್ಛವಾಗಿದೆ, ಆದರೆ ಎರಡೂ ಸಮರ್ಪಕವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ!
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಅರಿವು**: ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ನೀವು:
+- ✅ `addEventListener` ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಂಕ್ಷನ್‌ಗಳಿಗೆ ಹೇಗೆ ಜೋಡಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸಬಹುದು
+- ✅ ಈವೆಂಟ್ ವಸ್ತುವ `(e)` ಅನ್ನು ಹ್ಯಾಂಡ್ಲರ್ ಫಂಕ್ಷನ್‌ಗಳಿಗೆ ಹಸ್ತಾಂತರಿಸುವ ಕಾರಣವನ್ನು ಮನಗಂಡಿರಬೇಕು
+- ✅ `submit` ಮತ್ತು `click` ಈವೆಂಟ್‌ಗಳ ವ್ಯತ್ಯಾಸವನ್ನು ತಿಳಿಯಿರಿ
+- ✅ `init()` ಫಂಕ್ಷನ್ ಯಾವಾಗ ಮತ್ತು ಏಕೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸಬಹುದು
+
+**ತ್ವರಿತ ಸ್ವಯಂ-ಪರಿಶೀಲನೆ**: ನೀವು ಫಾರ್ಮ್ ಸಬ್ಮಿಟ್‌ನಲ್ಲಿ `e.preventDefault()` ಮರೆತರೆ ಏನು ಸಂಭವಿಸುತ್ತದೆ?
+*ಉತ್ತರ: ಪುಟ ಮರುಭರ್ತಿಯಾಗುತ್ತದೆ, ಎಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸ್ಥಿತಿಯನ್ನು ಕಳೆದು ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ವ್ಯತ್ಯಯ ಉಂಟಾಗುತ್ತದೆ*
+
+## ಪ್ರಾರಂಭಿಕ ಮತ್ತು ಮರುಹೊಂದಿಸುವ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿ
+
+ನಿಮ್ಮ ವಿಸ್ತರಣೆಯ ಪ್ರಾರಂಭಿಕ ಲಾಜಿಕ್ ರಚಿಸೋಣ. `init()` ಫಂಕ್ಷನ್ ಒಂದು ಹಡಗಿನ ನ್ಯಾವಿಗೇಶನ್ ವ್ಯವಸ್ಥೆಯಂತೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ - ಅದರ ಉಪಕರಣಗಳನ್ನು ಪರಿಶೀಲಿಸಿ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ ಮತ್ತು ಇಂಟರ್‌ಫೇಸ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಇದು ನೀವು ಮೊದಲು ವಿಸ್ತರಣೆಯನ್ನು ಬಳಸಿದ್ದೀರಾ ಎಂಬುದನ್ನು ಪರೀಕ್ಷಿಸಿ ಹಳೆ ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ.
+
+`reset()` ಫಂಕ್ಷನ್ ಹೊಸದಾಗಿ ಆರಂಭಿಸುವಂತೆ ಬಳಕೆದಾರರಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ - ವಿಜ್ಞಾನಿಗಳು ಶುದ್ಧ ಡೇಟಾ ಪಡೆಯಲು ಪ್ರಯೋಗಗಳ ನಡುವೆ ತಮ್ಮ ಉಪಕರಣಗಳನ್ನು ಮರುಹೊಂದಿಸುವ ರೀತಿಯಾಗಿದೆ.
+
+```javascript
+function init() {
+	// ಬಳಕೆದಾರನು ಹಿಂದಿನದಾಗಿ API ಪ್ರಮಾಣಪತ್ರಗಳನ್ನು ಉಳಿಸಿದ್ದಾರೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	// ವಿಸ್ತರಣೆ ಐಕಾನ್ ಅನ್ನು ಸರಾಸರಿ ಹಸುರಾಗಿ ಹೊಂದಿಸಿ (ಆಗಣನೆಗೆ ಭವಿಷ್ಯ ಪಾಠಕ್ಕಾಗಿ ಸ್ಥಾನದರ್ಶಕ)
+	// ಮಾಡಲು: ಮುಂದಿನ ಪಾಠದಲ್ಲಿ ಐಕಾನ್ ಅಧ್ಗಮಿಸುವಿಕೆ ಕಾರ್ಯಗತಗೊಳಿಸಿ
+
+	if (storedApiKey === null || storedRegion === null) {
+		// ಮೊದಲು ಬಳಕೆದಾರ: ಸೆಟ್ ಅಪ್ ಫಾರ್ಮ್ ಅನ್ನು ತೋರಿಸಿ
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+		// ಮರು ಬರುವ ಬಳಕೆದಾರ: ಅವರ ಉಳಿಸಿದ ಮಾಹಿತಿಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೋಡ್ ಮಾಡಿ
+		displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+}
+
+function reset(e) {
+	e.preventDefault();
+	// ಬಳಕೆದಾರಿಗೆ ಹೊಸ ಸ್ಥಳವನ್ನು ಆಯ್ಕೆಮಾಡಲು ಸંગ્રಹಿಸಲಾದ ಪ್ರಾಂತ್ಯವನ್ನು ತೆರವುಗೊಳಿಸಿ
+	localStorage.removeItem('regionName');
+	// ಪ್ರಾರಂಭಿಕ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಮರುಪ್ರಾರಂಭಿಸಿ
+	init();
+}
+```
+
+**ಇಲ್ಲಿ ಏನಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ವಿಂಗಡಿಸಿ:**
+- ಬ್ರೌಸರ್‌ನ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಿಂದ ಸಂಗ್ರಹಿಸಿದ API ಕೀ ಮತ್ತು ಪ್ರದೇಶವನ್ನು ಪಡೆಯುತ್ತದೆ
+- ಇದು ಮೊದಲು ಬಳಕೆದಾರನಾ (ಯಾವುದೇ ಸಂಗ್ರಹಣೆಯನ್ನು ಹೊಂದಿಲ್ಲದೇ) ಅಥವಾ ಮರುಬರುತ್ತಿರುವ ಬಳಕೆದಾರನಾ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಹೊಸ ಬಳಕೆದಾರರಿಗೆ ಸೆಟಪ್ ಫಾರ್ಮ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ ಮತ್ತು ಇತರ ಇಂಟರ್‌ಫೇಸ್ ಅಂಶಗಳನ್ನು ಮರೆಮಾಚುತ್ತದೆ
+- ಮರುಬರುತ್ತಿರುವ ಬಳಕೆದಾರರಿಗಾಗಿ ಉಳಿಸಿದ ಡೇಟಾವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೋಡ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಮರುಹೊಂದಿಸುವ ಆಯ್ಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ
+- ಲಭ್ಯವಿರುವ ಡೇಟಾನुसार ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ
+
+**ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯ ಕುರಿತು ಮುಖ್ಯ ಕಲ್ಪನೆಗಳು:**
+- ಬ್ರೌಸರ್ ಸೆಷನ್‌ಗಳ ನಡುವೆ ಡೇಟಾವನ್ನು ಸ್ಥಿರವಾಗಿ ಉಳಿಸುತ್ತದೆ (ಸೆಷನ್ ಸ್ಟೋರೇಜ್ ಗಿಂತ ಭಿನ್ನ)
+- `getItem()` ಮತ್ತು `setItem()` ಬಳಸಿ ಕೀ-ಮೂಲ್ಯ ಜೋಡಿಗಳಾಗಿ ಡೇಟಾ ಸಂಗ್ರಹಿಸುತ್ತದೆ
+- ಸೂಚಿಸಿದ ಕೀಗೆ ಯಾವುದೇ ಡೇಟಾ ಇಲ್ಲದಿದ್ದರೆ `null` ಉಲ್ಲೇಖಿಸುತ್ತದೆ
+- ಬಳಕೆದಾರ ಪ್ರಾಧಾನ್ಯಗಳು ಮತ್ತು ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ನೆನಪಿಡಲು ಸರಳ ವಿಧಾನ ಒದಗಿಸುತ್ತದೆ
+
+> 💡 **ಬ್ರೌಸರ್ ಸಂಗ್ರಹಣೆಯ ಅರಿವು**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ನಿಮ್ಮ ವಿಸ್ತರಣೆಗೆ ಸ್ಥಿರ ಮೆಮೊರಿ ನೀಡಿದಂತೆ. ಪ್ರಾಚೀನ ಅಲೆಕ್ಸಾಂಡ್ರಿಯಾ ಗ್ರಂಥಾಲಯವು ಮರುಭಾಷೆ ಕಟ್ಟಿದಂತೆ – ಉಪನ್ಯಾಸಕರು ಹೋಗಿ ಬಂದರೂ ಮಾಹಿತಿ ಲಭ್ಯವಿರುತ್ತದೆ.
+> 
+> **ಪ್ರಮುಖ ಲಕ್ಷಣಗಳು:**
+> - ಬ್ರೌಸರ್ ಮುಚ್ಚಿದ ನಂತರವೂ ಡೇಟಾವನ್ನು ಉಳಿಸಿಕೊಂಡಿರುತ್ತದೆ
+> - ಕಂಪ್ಯೂಟರ್ ಪುನರ್‌ಪ್ರಾರಂಭಗಳು ಮತ್ತು ಬ್ರೌಸರ್ ಕ್ರ್ಯಾಷ್‌ಗಳನ್ನು ಸಹ ಬದುಕಿ ಉಳಿಯುತ್ತದೆ
+> - ಬಳಕೆದಾರ ಪ್ರಾಧಾನ್ಯಗಳಿಗಾಗಿ ಸಾಕಷ್ಟು ಸಂಗ್ರಹಣಾ ಜಾಗವನ್ನು ಒದಗಿಸುತ್ತದೆ
+> - ನೆಟ್‌ವರ್ಕ್ ವಿಳಂಬವಿಲ್ಲದೆ ಕ್ಷಣಾರ್ಧ ಪ್ರವೇಸವನ್ನು ಒದಗಿಸುತ್ತದೆ
+
+> **ಮಹತ್ವದ ಗೋಷ್ಠಿ**: ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗೆ ಅದರದೇ ಪ್ರತ್ಯೇಕ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಇದೆ, ಇದು ಸಾಮಾನ್ಯ ವೆಬ್ ಪುಟಗಳಿಂದ ಭಿನ್ನವಾಗಿದೆ. ಇದು ಭದ್ರತೆ ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ಇತರ ವೆಬ್ಸೈಟ್‌ಗಳೊಂದಿಗೆ ಸಂಘರ್ಷ ತಪ್ಪಿಸುತ್ತದೆ.
+
+ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳನ್ನು (F12) ತೆರೆಯಿರಿ, **Application** ಟ್ಯಾಬಿಗೆ ಹೋಗಿ, ಮತ್ತು **Local Storage** ವಿಭಾಗವನ್ನು ವಿಸ್ತರಿಸಿ ನಿಮ್ಮ ಸಂಗ್ರಹಿತ ಡೇಟಾವನ್ನು ನೋಡಿ.
+
+```mermaid
+stateDiagram-v2
+    [*] --> CheckStorage: ವಿಸ್ತರಣೆ ಪ್ರಾರಂಭಿಸುತ್ತದೆ
+    CheckStorage --> FirstTime: ಸಂಗ್ರಹಿಸಿರುವ ಡೇಟಾ ಇಲ್ಲ
+    CheckStorage --> Returning: ಡೇಟಾ ಕಂಡುಬಂದಿತು
+    
+    FirstTime --> ShowForm: ಸೆಟ್ ಅಪ್ ರೂಪವನ್ನು ತೋರಿಸಿ
+    ShowForm --> UserInput: ಬಳಕೆದಾರ ಡೇಟಾ ನಮೂದಿಸುತ್ತಾನೆ
+    UserInput --> SaveData: localStorage ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ
+    SaveData --> FetchAPI: ಕಾರ್ಬನ್ ಡೇಟಾ ಪಡೆಯಿರಿ
+    
+    Returning --> LoadData: localStorage ನಿಂದ ಓದಿ
+    LoadData --> FetchAPI: ಕಾರ್ಬನ್ ಡೇಟಾ ಪಡೆಯಿರಿ
+    
+    FetchAPI --> ShowResults: ಡೇಟಾವನ್ನು ತೋರಿಸಿ
+    ShowResults --> UserAction: ಬಳಕೆದಾರ ಕ್ರಿಯಾಶೀಲ
+    
+    UserAction --> Reset: ಕ್ಲಿಯರ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಲಾಗಿದೆ
+    UserAction --> ShowResults: ಡೇಟಾ ವೀಕ್ಷಿಸಿ
+    
+    Reset --> ClearStorage: ಸಂಗ್ರಹಿಸಿರುವ ಡೇಟಾ ತೆರವುಗೊಳಿಸಿ
+    ClearStorage --> FirstTime: ಸೆಟ್ ಅಪ್ ಗೆ ಹಿಂತಿರುಗಿ
+```
+![ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಫಲಕ](../../../../translated_images/localstorage.472f8147b6a3f8d1.kn.png)
+
+> ⚠️ **ಭದ್ರತಾ ಪರಿಗಣನೆ**: ಉತ್ಪಾದನಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, API ಕೀಗಳನ್ನು LocalStorage ನಲ್ಲಿ ಸಂಗ್ರಹಿಸುವುದು ಭದ್ರತಾ ಅಪಾಯವನ್ನು ಉಂಟುಮಾಡಬಹುದು ಏಕೆಂದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗೆ ಈ ಡೇಟಾ ಪ್ರಾಪ್ತಿಯಿದೆ. ಕಲಿಕೆಯ ಉದ್ದೇಶಗಳಿಗೆ, ಈ ವಿಧಾನ ಸರಿಯಾಗಿದೆ, ಆದರೆ ನಿಜವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸಂವೇದನಾಶೀಲ ಪ್ರಮಾಣಪತ್ರಗಳಿಗಾಗಿ ಭದ್ರ ಸರ್ವರ್-ಬದಿಗೆ ಸಂಗ್ರಹಣೆಯನ್ನು ಬಳಸಬೇಕು.
+
+## ಫಾರ್ಮ್ ಸಬ್ಮಿಷನ್ ಅನ್ನು ನಿರ್ವಹಿಸಿ
+
+ಈಗ ನಮಗೆ ಯಾರಾದರೂ ಫಾರ್ಮ್ ಸಬ್ಮಿಟ್ ಮಾಡಿದಾಗ ಏನು ನಡೆಯುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ವಹಿಸೋಣ. ಎಂದಿನಂತೆ, ಬ್ರೌಸರ್‌ಗಳು ಫಾರ್ಮ್ ಸಬ್ಮಿಷನ್‌ನಲ್ಲಿ ಪುಟವನ್ನು ಮರುಭರ್ತಿ ಮಾಡುತ್ತದೆ, ಆದರೆ ನಾವು ಈ ವರ್ತನೆಯನ್ನು ತಡೆದ ಸಂಯೋಜನೆ ಮಾಡೋಣ.
+
+ಈ ವಿಧಾನವು ಮಿಷನ್ ನಿಯಂತ್ರಣವು ಬಾಹ್ಯಾಕಾಶ ಬಾಹಕ ಸಂವಹನಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದನ್ನು ಪ್ರತಿಫಲಿಸುತ್ತದೆ - ಪ್ರತಿ ಪ್ರಸರಣಕ್ಕಾಗಿ ಸಂಪೂರ್ಣ ವ್ಯವಸ್ಥೆಯನ್ನು ಮರುಹೊಂದಿಸುವ ಬದಲು, ಅವರು ನಿರಂತರ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಇಟ್ಟುಕೊಂಡು ಹೊಸ ಮಾಹಿತಿಯನ್ನು ಪ್ರಕ್ರಿಯೆ ಮಾಡುತ್ತಾರೆ.
+
+ಫಾರ್ಮ್ ಸಬ್ಮಿಷನ್ ಈವೆಂಟ್ ಅನ್ನು ಹಿಡಿದು ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ಹೊರತೆಗೆಯುವ ಫಂಕ್ಷನ್ ರಚಿಸಿ:
+
+```javascript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+**ಮೇಲಿನ ಕೋಡ್ ನಾವು:**
+- ಪುಟವನ್ನು ಮರುಭರ್ತಿ ಮಾಡದಂತೆ ಫಾರ್ಮ್ ನ ಡಿಫಾಲ್ಟ್ ಸಬ್ಮಿಷನ್ ಕಾರ್ಯತತ್ತ್ವವನ್ನು ತಡೆದಿದ್ದೇವೆ
+- API ಕೀ ಮತ್ತು ಪ್ರದೇಶ ಫೀಲ್ಡ್‌ಗಳಿಂದ ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್ ಮೌಲ್ಯಗಳನ್ನು ಹೊರತೆಗೆಯಲಾಗಿದೆ
+- `setUpUser()` ಫಂಕ್ಷನ್‌ಗೆ ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ಹಸ್ತಾಂತರಿಸಲಾಗಿದೆ
+- ಪುಟ ಮರುಭರ್ತಿಯನ್ನು ತಡೆಯುವ ಮೂಲಕ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ವರ್ತನೆ ನಿಯಂತ್ರಿಸಲಾಗಿದೆ
+
+✅ ನಿಮ್ಮ HTML ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳು `required` ಗುಣಲಕ್ಷಣ ಹೊಂದಿವೆ, ಈ ಕಾರಣದಿಂದ ಬ್ರೌಸರ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಎರಡೂ API ಕೀ ಮತ್ತು ಪ್ರದೇಶವನ್ನು ನೀಡಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ.
+
+## ಬಳಕೆದಾರ ಪ್ರాధಾನ್ಯಗಳನ್ನು ಹೊಂದಿಸಿ
+
+`setUpUser` ಫಂಕ್ಷನ್ ಬಳಕೆದಾರರ ಪ್ರಮಾಣಪತ್ರಗಳನ್ನು ಉಳಿಸುವುದಕ್ಕೆ ಜವಾಬ್ದಾರಿಯುಳ್ಳದು ಮತ್ತು ಮೊದಲ API ಕರೆ ಆರಂಭಿಸುವುದು. ಇದು ಕಾರ್ಯಾಚರಣೆ setup ರಿಂದ ಫಲಿತಾಂಶ ಪ್ರದರ್ಶನಕ್ಕೆ ಸೌಮ್ಯವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ.
+
+```javascript
+function setUpUser(apiKey, regionName) {
+	// ಭವಿಷ್ಯದ ಸೆಷನ್‌ಗಳಿಗೆ ಬಳಕೆದಾರರ ಪ್ರಮಾಣಪತ್ರಗಳನ್ನು ಉಳಿಸಿ
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	
+	// ಲೋಡ್ ಆಗುತ್ತಿರುವ ಅವಸ್ಥೆಯನ್ನು ತೋರಿಸಲು UI ಅನ್ನು ನವೀಕರಿಸಿ
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	
+	// ಬಳಕೆದಾರರ ಪ್ರಮಾಣಪತ್ರಗಳೊಂದಿಗೆ ಕಾರ್ಬನ್ ಬಳಕೆ ಡೇಟಾವನ್ನು ಪಡೆಯಿರಿ
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+
+**ಹಂತ ಹಂತವಾಗಿ ಏನಾಗುತ್ತಿದೆ:**
+- API ಕೀ ಮತ್ತು ಪ್ರದೇಶದ ನಾಮವನ್ನು ಮುಂದಿನ ಬಳಕೆಗೆ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣದಲ್ಲಿ ಉಳಿಸುತ್ತದೆ
+- ಡೇಟಾವನ್ನು ಪಡೆಯಲಾಗುತ್ತಿದೆಯೆ ಎಂದು ಸೂಚಿಸಲು ಲೋಡಿಂಗ್ ಸೂಚಕವನ್ನು ತೋರಿಸುತ್ತದೆ
+- ಹಳೆ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಕ್ಲಿಯರ್ ಮಾಡುತ್ತದೆ
+- ಬಳಕೆದಾರರು ಸೆಟ್ಟಿಂಗ್ಸ್ ಮರುಹೊಂದಿಸಬೇಕಾದರೆ ಕ್ಲಿಯರ್ ಬಟನ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ
+- ನಿಜವಾದ ಕಾರ್ಬನ್ ಬಳಕಾ ಡೇಟಾ ಪಡೆಯಲು API ಕರೆ ಪ್ರಾರಂಭಿಸುತ್ತದೆ
+
+ಈ ಫಂಕ್ಷನ್ ಡೇಟಾ ಸ್ಥಿರತೆ ಮತ್ತು ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್ ನವೀಕರಣವನ್ನು ಒಂದೇ ಸಮಯದಲ್ಲಿ ನಿರ್ವಹಿಸುವ ಮೂಲಕ ಸೌಮ್ಯ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
+
+## ಕಾರ್ಬನ್ ಉಪಯೋಗ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸಿ
+
+ಈಗ ನೀವು ವಿಸ್ತರಣೆಯನ್ನು APIs ಮೂಲಕ ಬಾಹ್ಯ ಡೇಟಾ ಮೂಲಗಳಿಗೆ ಸಂಪರ್ಕಿಸೋಣ. ಇದು ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು ಸ್ವತಂತ್ರ ಸಾಧನದಿಂದ ಇಂಟರ್ನೆಟ್‌ನಿಂದ ನಿಜ ಸಮಯ ಮಾಹಿತಿಯನ್ನು ಪಡೆಯುವ ಸಾಧನವಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.
+
+**APIs ತಿಳಿದುಕೊಳ್ಳುವುದು**
+
+[APIs](https://www.webopedia.com/TERM/A/API.html) ವಿಭಿನ್ನ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಪರಸ್ಪರ ಸಂವಹನ ಮಾಡುವುದು ಹೇಗೆ ಎಂಬುದಾಗಿವೆ. 19ನೇ ಶತಮಾನದಲ್ಲಿ ದೂರಸಂವಹನ ವ್ಯವಸ್ಥೆಯನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಿ - ಅವರು ದೂರದಿಂದ ಬಂದ ಸ್ಟೇಷನ್ಗೆ ವಿನಂತಿಗಳನ್ನು ಕಳುಹಿಸಿ, ನಿರೀಕ್ಷಿತ ಮಾಹಿತಿಯನ್ನು ಪೆÇಸುತಿದ್ದರು. ನೀವು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮವನ್ನು ಪರಿಶೀಲಿಸುವಾಗ, ವಾಯ್ಸ್ ಸಹಾಯಕನಿಗೆ ಪ್ರಶ್ನೆ ಕೇಳುವಾಗ, ಅಥವಾ ವಿತರಣೆ ಅಪ್ಲಿಕೇಶನ್ ಬಳಸುವಾಗ, APIs ಈ ಡೇಟಾ ವಿನಿಮಯಗಳನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತವೆ.
+
+```mermaid
+flowchart TD
+    A[ನಿಮ್ಮ ವಿಸ್ತರಣೆ] --> B[HTTP ವಿನಂತಿ]
+    B --> C[CO2 ಸಿಗ್ನಲ್ API]
+    C --> D{ಮಾನ್ಯ ವಿನಂತಿ?}
+    D -->|ಹೌದು| E[ಡೇಟಾಬೇಸ್ ಅನ್ನು ಪ್ರಶ್ನಿಸಿ]
+    D -->|ಲಾರ| F[ದೋಷವನ್ನು ಹಿಂತಿರುಗಿಸಿ]
+    E --> G[ಕಾರ್ಬನ್ ಡೇಟಾ]
+    G --> H[JSON ಪ್ರತಿಕ್ರಿಯೆ]
+    H --> I[ನಿಮ್ಮ ವಿಸ್ತರಣೆ]
+    F --> I
+    I --> J[UI ನವೀಕರಿಸಿ]
+    
+    subgraph "API Request"
+        K[ಶೀರ್ಷಿಕೆಗಳು: auth-token]
+        L[ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು: countryCode]
+        M[ವಿಧಾನ: GET]
+    end
+    
+    subgraph "API Response"
+        N[ಕಾರ್ಬನ್ ತೀವ್ರತೆ]
+        O[ಜೈವ ಇಂಧನ %]
+        P[ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್]
+    end
+    
+    style C fill:#e8f5e8
+    style G fill:#fff3e0
+    style I fill:#e1f5fe
+```
+**REST APIಗಳ ಪ್ರಮುಖ ಕಲ್ಪನೆಗಳು:**
+- REST ಎಂದರೆ ‘Representational State Transfer’
+- ಡೇಟಾದೊಂದಿಗೆ ಸಂವಹಿಸಲು ಸಾಂಪ್ರದಾಯಿಕ HTTP ವಿಧಾನಗಳನ್ನು (GET, POST, PUT, DELETE) ಬಳಸುತ್ತದೆ
+- ಸಾಮಾನ್ಯವಾಗಿ JSON ಫಾರ್ಮಾಟ್‌ನಲ್ಲಿ ನಿರೀಕ್ಷಿತ ಡೇಟಾ ವಾಪಸ್ಸು ನೀಡುತ್ತದೆ
+- ವಿವಿಧ ವಿನಂತಿಗಳಿಗಾಗಿ ನಿಯಮಿತ, URL-ಆಧಾರಿತ ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ
+
+✅ ನಾವು ಬಳಸುವ [CO2 Signal API](https://www.co2signal.com/) ವಿಶ್ವದ ವಿದ್ಯುತ್ ಜಾಲಗಳ ಕಾರ್ಬನ್ ತೀವ್ರತೆಯ ನಿಜ ಕಾಲ ಡೇಟಾವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರಿಗೆ ಅವರ ವಿದ್ಯುತ್ ಬಳಕೆಯ ಪರಿಸರ ಪ್ರಭಾವವನ್ನು ತಿಳಿಯಲು ಸಹಾಯಮಾಡುತ್ತದೆ!
+
+> 💡 **ಅಸಿಂಕ್ರೋನಸ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅರಿವು**: [`async` ಕೀವರ್ಡ್](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) ನಿಮ್ಮ ಕೋಡ್ಗೆ ಬಹು ಕಾರ್ಯಗಳನ್ನು ಒಂದೇ ಸಮಯದಲ್ಲಿ ನಿರ್ವಹಿಸಲು ಸಹಾಯಮಾಡುತ್ತದೆ. ನೀವು ಸರ್ವರ್‌ನಿಂದ ಡೇಟಾ ಕೇಳುವಾಗ, ಸಂಪೂರ್ಣ ವಿಸ್ತರಣೆ ಫ್ರೀಜ್ ಆಗಬಾರದು - ಇದು ಏರ್ ಟ್ರಾಫಿಕ್ ಕಂಟ್ರೋಲ್ ಒಂದು ವಿಮಾನ ಎದುರು ಸೇರಲು ಕಾಯುತ್ತಿರುವಂತಾಗಿರುತ್ತದೆ.
+> 
+> **ಪ್ರಮುಖ ಲಾಭಗಳು:**
+> - ಡೇಟಾ ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ವಿಸ್ತರಣೆ ಪ್ರತಿಕ್ರೀಯಾಶೀಲತೆಯನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತದೆ
+> - ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳ ಸಮಯದಲ್ಲಿ ಇತರೆ ಕೋಡ್ ನಿರಂತರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
+> - ಪರಂಪರಾ ಕಾಲ್‌ಬ್ಯಾಕ್ ನಿಯಮಗಳಿಗೆ ಹೋಲಿಸಿದಾಗ ಕೋಡ್ ಓದಲು ಸುಲಭ
+> - ನೆಟ್‌ವರ್ಕ್ ಸಮಸ್ಯೆಗಳಿಗೆ ಸೂಕ್ತವಾದ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಮಾಡುತ್ತದೆ
+
+`async` ಕುರಿತ ಒಂದು ವೇಗದ ವೀಡಿಯೊ:
+
+[![ಪ್ರತಿಜ್ಞೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು Async ಮತ್ತು Await](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "ಪ್ರತಿಜ್ಞೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು Async ಮತ್ತು Await")
+
+> 🎥 async/await ಕುರಿತು ವೀಡಿಯೊಗಾಗಿ ಮೇಲಿನ ಚಿತ್ರವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಅಸಿಂಕ್ರೋನಸ್ ಪ್ರોગ್ರಾಮಿಂಗ್ ಅರಿವು**: API ಫಂಕ್ಷನ್‌ಗೆ ಮುನುಗ್ಗುವ ಮೊದಲು, ನಿಮ್ಮು ತಿಳಿದುಕೊಳ್ಳಿ:
+- ✅ ಯಾಕೆ ನಾವು ಸಂಪೂರ್ಣ ವಿಸ್ತರಣೆ ತಡೆಹಿಡಿಯದೆ `async/await` ಬಳಸುತ್ತೇವೆ
+- ✅ `try/catch` ಬ್ಲಾಕ್‌ಗಳು ನೆಟ್‌ವರ್ಕ್ ದೋಷಗಳನ್ನು ಸೂಕ್ತವಾಗಿ ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ
+- ✅ ಸಿಂಕ್ರೋನಸ್ ಮತ್ತು ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸ
+- ✅ API ಕರೆಗಳು ವಿಫಲವಾಗಬಹುದು ಮತ್ತು ಅವುಗಳ ನಿರ್ವಹಣೆ ಹೇಗೆ ಮಾಡಬೇಕೆಂಬುದು
+
+**ವಾಸ್ತವ ಜಗತ್ತಿನ ಸಂಬಂಧ:** ಈ ಸಾಮಾನ್ಯ ಅಸಿಂಕ್ರೋನಸ್ ಉದಾಹರಣೆಗಳನ್ನು ಪರಿಗಣಿಸಿ:
+- **ಮಾದ್ಯಮಗಳು ಆದೇಶಿಸುವುದು**: ನೀವು ಕಿಚನ್ ಮುಂದೆ ಕಾಯೋದಿಲ್ಲ - ರಸೀದಿ ಪಡೆದು ಹಗಲು ಇತರ ಕೆಲಸ ಮಾಡುತ್ತೀರಿ
+- **ಇಮೇಲ್ ಕಳುಹಿಸುವುದು**: ನಿಮ್ಮ ಇಮೇಲ್ ಅಪ್ಲಿಕೇಶನ್ ಕಳುಹಿಸುವಾಗ ಫ್ರೀಜ್ ಆಗುತ್ತಿಲ್ಲ - ಮತ್ತಷ್ಟು ಇಮೇಲ್ ರಚಿಸಬಹುದು
+- **ವೆಬ್ ಪುಟಗಳನ್ನು ಲೋಡ್ ಮಾಡುವುದು**: ಚಿತ್ರಗಳು ಕ್ರಮೇಣ ಲೋಡ್ ಆಗುತ್ತವೆ, ನೀವು ಈಗಾಗಲೇ ಪಠ್ಯ ಓದಲು ಆರಂಭಿಸಿದ್ದೀರಾ
+
+**API ಪ್ರವೇಶದ ಜಾರು ಹಾದಿ**:
+```mermaid
+sequenceDiagram
+    participant Ext as ವಿಸ್ತರಣೆ
+    participant API as CO2 ಸಿಗ್ನಲ್ API
+    participant DB as ಡೇಟಾಬೇಸ್
+    
+    Ext->>API: ಪ್ರಾಮಾಣೀಕೃತ ಟೋಕನ್‌ನೊಂದಿಗೆ ವಿನಂತಿ
+    API->>API: ಟೋಕನ್ ಪರಿಶೀಲಿಸಿ
+    API->>DB: ಕಾರ್ಬನ್ ಡೇಟಾ ವಿಚಾರಣೆ ಮಾಡಿ
+    DB->>API: ಡೇಟಾ ಹಿಂತಿರುಗಿಸಿ
+    API->>Ext: JSON ಪ್ರತಿಕ್ರಿಯೆ
+    Ext->>Ext: UI ನವೀಕರಿಸಿ
+```
+ಕಾರ್ಬನ್ ಉಪಯೋಗ ಡೇಟಾ ಸೇರಿಸಲು ಮತ್ತು ಪ್ರದರ್ಶಿಸಲು ಫಂಕ್ಷನ್ ರಚಿಸಿ:
+
+```javascript
+// ಆಧುನಿಕ ಫೆಚ್ API ವಿಧಾನ (ಬಾಹ್ಯ ಅವಲಂಬನಗಳು ಅಗತ್ಯವಿಲ್ಲ)
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		// CO2 Signal API ನಿಂದ ಕಾರ್ಬನ್ ಸಂವೇದನಾಶೀಲತೆ ಡೇಟಾವನ್ನು ಫೆಚ್ ಮಾಡಿ
+		const response = await fetch('https://api.co2signal.com/v1/latest', {
+			method: 'GET',
+			headers: {
+				'auth-token': apiKey,
+				'Content-Type': 'application/json'
+			},
+			// ನಿರ್ದಿಷ್ಟ ಪ್ರದೇಶಕ್ಕಾಗಿ ಪ್ರಶ್ನಾ ಪರಾಮರ್ಶಿಗಳನ್ನು ಸೇರಿಸಿ
+			...new URLSearchParams({ countryCode: region }) && {
+				url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
+			}
+		});
+
+		// API ವಿನಂತಿ ಯಶಸ್ವಿಯಾಗಿ ನಡೆದಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
+		if (!response.ok) {
+			throw new Error(`API request failed: ${response.status}`);
+		}
+
+		const data = await response.json();
+		const carbonData = data.data;
+
+		// ಕಾರ್ಬನ್ ಸಂವೇದನಾಶೀಲತೆಗೆ-rounded ಮೌಲ್ಯವನ್ನು ಲೆಕ್ಕಿಸಿ
+		const carbonIntensity = Math.round(carbonData.carbonIntensity);
+
+		// ಫೆಚ್ ಮಾಡಿದ ಡೇಟಾ ಮೂಲಕ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ನವೀಕರಿಸಿ
+		loading.style.display = 'none';
+		form.style.display = 'none';
+		myregion.textContent = region.toUpperCase();
+		usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`;
+		fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`;
+		results.style.display = 'block';
+
+		// TODO: calculateColor(carbonIntensity) - ಮುಂದಿನ ಪಾಠದಲ್ಲಿ ಜಾರಿಗೆ ತರುತ್ತದೆ
+
+	} catch (error) {
+		console.error('Error fetching carbon data:', error);
+		
+		// ಬಳಕೆದಾರ ಸ್ನೇಹಿ ದೋಷ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.';
+	}
+}
+```
+
+**ಇಲ್ಲಿ ಏನಾಗುತ್ತದೆ:**
+- ಔಟ್‌ಸೈಡ್ ಲೈಬ್ರರಿ, Axios ಮುಂತಾದವುಗಳ ಬದಲು ಆಧುನಿಕ `fetch()` API ಅನ್ನು ಬಳಸುತ್ತದೆ ಏಕೆಂದರೆ ಇದು ಸ್ವಚ್ಛವೂ, ಯಾವುದೇ ಅವಲಂಬನೆ ಇಲ್ಲದೆ
+- API ವಿಫಲತೆಯನ್ನು ತಡೆಗಟ್ಟಲು `response.ok` ಜೊತೆ ಸರಿಯಾದ ದೋಷ ಪರಿಶೀಲನೆ ಮಾಡುತ್ತದೆ
+- ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಗಳನ್ನು ಓದಲು ಸುಲಭವಾಗಿ ಮಾಡಲು `async/await` ಅನ್ನು ಬಳಸುತ್ತದೆ
+- CO2 Signal API ರೊಂದಿಗೆ `auth-token` ಹೆಡರ್ ಬಳಸಿ ಪ್ರಮಾನೀಕರಣ ಮಾಡುತ್ತದೆ
+- JSON ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪಾರ್ಸ್ ಮಾಡಿ ಮತ್ತು ಕಾರ್ಬನ್ ತೀವ್ರತೆಯ ಮಾಹಿತಿಯನ್ನು ಹೊರತಂದುಕೊಳ್ಳುತ್ತದೆ
+- ಅನೇಕ UI ಅಂಶಗಳನ್ನು ಸ್ವರೂಪಿತ ಪರಿಸರ ಡೇಟಾ ಸಹಿತ ನವೀಕರಿಸುತ್ತದೆ
+- API ಕರೆಗಳು ವಿಫಲವಾದಾಗ ಬಳಕೆದಾರ ಸ್ನೇಹಿ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ
+
+**ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಕಲ್ಪನೆಗಳು:**
+- ಸ್ವಚ್ಛ ಸ್ಟ್ರಿಂಗ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಗಾಗಿ `${}` ಸಿಂಟ್ಯಾಕ್ಸ್ ನೊಂದಿಗೆ ಟೆಂಪ್ಲೆಟ್ ಲಿಟರಲ್‌ಗಳು
+- ದೋಷ ನಿರ್ವಹಣೆಗೆ try/catch ಬ್ಲಾಕ್ಗಳ ಬಳಕೆ
+- ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳನ್ನು ಸುಗಮವಾಗಿ ನಿರ್ವಹಿಸಲು async/await ಮಾದರಿ
+- API ಪ್ರತಿಕ್ರಿಯೆಯಿಂದ ನಿರ್ದಿಷ್ಟ ಡೇಟాను ತೆಗೆಯಲು ಆಬ್ಜೆಕ್ಟ್ ಡಿಸ್ಟ್ರಕ್ಚರಿಂಗ್
+- ಬಹು DOM ಕ್ರಿಯೆಗಳಿಗಾಗಿ ಮೆತೋಡ್ ಚೇನಿಂಗ್
+
+✅ ಈ ಫಂಕ್ಷನ್ ಬಾಹ್ಯ ಸರ್ವರ್‌ಗಳೊಂದಿಗೆ ಸಂವಹಿಸುವುದು, ಪ್ರಮಾನೀಕರಣ ನಿರ್ವಹಣೆ, ಡೇಟಾ ಪ್ರಕ್ರಿಯೆ, ಇಂಟರ್‌ಫೇಸ್ ನವೀಕರಣ, ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ತೋರಿಸುವ ಮೂಲಕ ಹಲವು ವೆಬ್ ಡೆವೆಲಪ್‌ಮೆಂಟ್ ಕೌಶಲ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಇದು ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿಪಡಿಸುವವರ ಉಪಯೋಗಿಸುವ ಮುಖ್ಯ ಕೌಶಲ್ಯಗಳಾಗಿದೆ.
+
+```mermaid
+flowchart TD
+    A[API ಕರೆ ಪ್ರಾರಂಭಿಸಿ] --> B[ ವಿನಂತಿಯನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ]
+    B --> C{ನೆಟ್‌ವರ್ಕ್ ಯಶಸ್ವಿ?}
+    C -->|ಇಲ್ಲ| D[ನೆಟ್‌ವರ್ಕ್ ದೋಷ]
+    C -->|ಹೌದು| E{ಪ್ರತಿಕ್ರಿಯೆ ಒಳ್ಳೆಯದೇ?}
+    E -->|ಇಲ್ಲ| F[API ದೋಷ]
+    E -->|ಹೌದು| G[JSON ಅನ್ನು ವರ್ಗಾಯಿಸಿ]
+    G --> H{ಮಾನ್ಯವಾದ ಡೇಟಾ?}
+    H -->|ಇಲ್ಲ| I[ಡೇಟಾ ದೋಷ]
+    H -->|ಹೌದು| J[UI ಅನ್ನು ನವೀಕರಿಸಿ]
+    
+    D --> K[ದೋಷ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ]
+    F --> K
+    I --> K
+    J --> L[ಲೋಡಿಂಗ್ ಅನ್ನು ಮುಚ್ಚಿ]
+    K --> L
+    
+    style A fill:#e1f5fe
+    style J fill:#e8f5e8
+    style K fill:#ffebee
+    style L fill:#f3e5f5
+```
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಪೂರ್ಣ ವ್ಯವಸ್ಥೆ ಅರಿವು**: ಸಂಪೂರ್ಣ ಕಾರ್ಯಚಟುವಟಿಕೆಯ ಮೇಲೆ ನಿಮ್ಮ ಪರಿಣತಿಯನ್ನು ಪರಿಶೀಲಿಸಿ:
+- ✅ JavaScript ಗೆ ಇಂಟರ್‌ಫೇಸನ್ನು ನಿಯಂತ್ರಿಸಲು DOM रेಫರೆನ್ಸ್‌ಗಳು ಹೇಗೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ
+- ✅ ಬ್ರೌಸರ್ ಸೆಷನ್‌ಗಳ ನಡುವೆ ಸ್ಥಿರತೆ ಮಾಡಲು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಯಾಕೆ ಮುಖ್ಯ
+- ✅ ಅಸಿಂಕ್ರೋನಸ್/ಅವೇಟ್ ಉಪಯೋಗಿಸಿ API ಕಾಲ್ ಮಾಡಿದಾಗ ವಿಸ್ತರಣೆ ಫ್ರೀಜ್ ಆಗುವುದಿಲ್ಲ
+- ✅ API ಕರೆಗಳು ವಿಫಲವಾದಾಗ ಏನಾಗುತ್ತದೆ ಮತ್ತು ದೋಷಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ
+- ✅ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ದೋಷ ಸಂದೇಶಗಳೊಂದಿಗೆ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಕಲ್ಪಿಸುವುದು ಯಾಕೆ ಮುಖ್ಯ
+
+🎉 **ನೀವು ಸಾಧಿಸಿದ್ದೀರಿ:** 
+ನೀವು ಒಂದು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ರಚಿಸಿದ್ದೀರಿ, ಅದು:
+- ಇಂಟರ್ನೆಟ್‌ಗೂ ಸಂಪರ್ಕಿಸಿ ನಿಜವಾದ ಪರಿಸರ ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತದೆ
+- ಸೆಷನ್‌ಗಳ ನಡುವೆಯೂ ಬಳಕೆದಾರ ಸೆಟ್ಟಿಂಗ್ಸ್ ಅನ್ನು ಸ್ಥಿರವಾಗಿ ಉಳಿಸುತ್ತದೆ
+- ದೋಷಗಳನ್ನು ಶಾಂತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ
+- ಸ್ಮೂತ್, ವೃತ್ತಿಪರ ಬಳಕೆದಾರ ಅನುಭವ ಒದಗಿಸುತ್ತದೆ
+
+ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಪರೀಕ್ಷಿಸಲು `npm run build` ಅನ್ನು ರನ್ ಮಾಡಿ ಮತ್ತು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ವಿಸ್ತರಣೆಯನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ. ಈಗ ನಿಮ್ಮ ಬಳಿ ಕಾರ್ಯನಿರ್ವಹಣೆಯಲ್ಲದ ಕಾರ್ಬನ್ ಪಾದಚಿಹ್ನೆ ಟ್ರ್ಯಾಕರ್ ಇದೆ. ಮುಂದಿನ ಪಾಠವು ವಿಸ್ತರಣೆ ಪೂರ್ಣಗೊಳಿಸಲು ಡೈನಾಮಿಕ್ ಐಕಾನ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸೇರಿಸುತ್ತದೆ.
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಈ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಅನ್ನು ಬಳಸಿರಿ:
+
+
+**ವಿವರಣೆ:** ತ್ರುಟಿಇನಿಗೆ ಪರಿಹಾರ ಹೆಚ್ಚಿಸುವಿಕೆ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ಸುಧಾರಿಸಿ. ಈ ಸವಾಲು ನಿಮಗೆ ಆಪಿಐಗಳು, ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಮತ್ತು ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಡಿಓಎಂ ವ್ಯವಹಾರದಲ್ಲಿ ಅಭ್ಯಾಸ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಕೆಳಗಿನವುಗಳನ್ನು ಒಳಗೊಂಡಿರುವ displayCarbonUsage ಫಂಕ್ಷನ್‌ನ ಸುಧಾರಿತ ಆವೃತ್ತಿಯನ್ನು ರಚಿಸಿ: 1) ವೈಫಲ್ಯವಾದ API ಕರೆಗಳಿಗಾಗಿ ವಿಸ್ತರಿಸಿದ ಬ್ಯಾಕ್‌ಆಫ್ ಸಹಿತ ಪುನಃಪ್ರಯತ್ನ ಯಂತ್ರವಿದ್ಯೆ, 2) API ಕರೆ ಮಾಡಲು മുമ്പೆ ಪ್ರದೇಶ ಕೋಡ್ ಇನ್‌ಪುಟ್ ಪರಿಶೀಲನೆ, 3) ಪ್ರಗತಿ ಸೂಚಕಗಳೊಂದಿಗೆ ಲೋಡಿಂಗ್ ಅನಿಮೆಶನ್, 4) ಎಲ್ಲಾ API ಪ್ರತಿಕ್ರಿಯೆಗಳ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಅವಧಿಯ ಟೈಮ್ಸ್ಟ್ಯಾಂಪ್ಗಳೊಂದಿಗೆ (30 ನಿಮಿಷಗಳ ಕಾಲ ಕ್ಯಾಶ್ ಮಾಡುವುದು), ಮತ್ತು 5) ಹಿಂದಿನ API ಕರೆಗಳಿಂದ ಇತಿಹಾಸಾತ್ಮಕ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸುವ ವೈಶಿಷ್ಟ್ಯ. ಎಲ್ಲಾ ಕಾರ್ಯ ವೈಶಿಷ್ಟ್ಯಗಳಿಗಾಗಿ ಸೂಕ್ತ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಶೈಲಿಯ JSDoc ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರ್ಪಡೆ ಮಾಡಿರಿ.
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಯನ್ನು ಇಲ್ಲಿ ಕಂಡುಹಿಡಿಯಿರಿ.
+
+## 🚀 ಸವಾಲು
+
+ಜೋಡಿ ಲಭ್ಯವಿರುವ ಬ್ರೌಸರ್ ಆಧಾರಿತ API ಗಳ ಸಂಪತ್ತು ಅನ್ವೇಷಿಸುವ ಮೂಲಕ ನಿಮ್ಮ APIಗಳ ಅರಿವು ವಿಸ್ತರಿಸಿ. ಈ ಬ್ರೌಸರ್ API ಗಳಲ್ಲಿ ಒಂದನ್ನು ಆಯ್ದುಕೊಂಡು ಸಣ್ಣ ಅಭ್ಯಾಸ ರೂಪುರೇಖೆಯನ್ನು ರಚಿಸಿ:
+
+- [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - ಬಳಕೆದಾರದ ಪ್ರಸ್ತುತ ಸ್ಥಳವನ್ನು ಪಡೆಯಿರಿ
+- [Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - ಡೆಸ್ಕ್‌ಟಾಪ್ ಸೂಚನೆಗಳನ್ನು ಕಳುಹಿಸಿ
+- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - ಪರಸ್ಪರ ಕ್ರಿಯಾತ್ಮಕ ಡ್ರ್ಯಾಗ್ ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ರಚಿಸಿ
+- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - ಅತ್ಯಾಧುನಿಕ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣಾ ತಂತ್ರಗಳು
+- [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - XMLHttpRequestಗೆ ಆಧುನಿಕ ಪರ್ಯಾಯ
+
+**ವರದಿ ಪ್ರಶ್ನೆಗಳು ಪರಿಗಣಿಸಲು:**
+- ಈ API ನೇರವಾಗಿ ಯಾವ ಯಾವುದೇ ನಿಜ ಜೀವನದ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತದೆ?
+- API ಎಲ್ಲಿ ತಪ್ಪುಗಳು ಮತ್ತು ಅಂಚು ಪ್ರಕರಣಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ?
+- ಈ API ಬಳಕೆಮಾಡುವಾಗ ಯಾವ ಸುರಕ್ಷತಾ ಪರಿಗಣನೆಗಳಿವೆ?
+- ಈ API ವಿಸ್ತಾರವಾಗಿ ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಎಷ್ಟಾಗ_SUPPORTED_ ಆಗಿದೆ?
+
+ನಿಮ್ಮ ಅಧ್ಯಯನದ ನಂತರ, ಯಾವ ಲಕ್ಷಣಗಳು API ಅಭಿವೃದ್ಧಿಪಡಿಸುವವರಿಗೆ ಅನುಕೂಲಕರ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹ ಇನ್ನವುಗಳು ಎಂದು ಗುರುತಿಸಿ.
+
+## ಉಪನ್ಯಾಸೋತ್ತರ ಕ್ವಿಸ್
+
+[ಉಪನ್ಯಾಸೋತ್ತರ ಕ್ವಿಸ್](https://ff-quizzes.netlify.app/web/quiz/26)
+
+## ವಿಮರ್ಶೆ & ಸ್ವಾಧ್ಯಯನ
+
+ನೀವು ಈ ಪಾಠದಲ್ಲಿ LocalStorage ಮತ್ತು APIs ಬಗ್ಗೆ ಕಲಿತುಕೊಂಡಿದ್ದೀರಿ, ಜೊತೆಗೆ ಇದು ಹಿರಿಯ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗಾರರಿಗೆ ಅತ್ಯಂತ ಉಪಯುಕ್ತ. ಈ ಎರಡೂ ಎಲಿಮೆಂಟ್‌ಗಳು ಒಟ್ಟಾಗಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ನೀವು ಯೋಚಿಸಬಹುದೇ? API ಉಪಯೋಗಿಸುವ ವೆಬ್ ಸೈಟ್ ನಿರ್ಮಿಸುವಲ್ಲಿ ನೀವು ಹೇಗೆ ವಿನ್ಯಾಸ ಮಾಡಬಹುದು ಎಂದು ನಿಶ್ಚಯಿಸಿ.
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು**
+- [ ] DevTools Application ಟ್ಯಾಬ್ ತೆರೆಯಿರಿ ಮತ್ತು ಯಾವುದೇ ವೆಬ್‌ಸೈಟ್‌ನ localStorage ಅನುಸರಿಸಿ
+- [ ] ಸರಳ HTML ಫಾರ್ಮ್ ರಚಿಸಿ ಮತ್ತು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಫಾರ್ಮ್ ಮಾನ್ಯತೆ ಪರೀಕ್ಷಿಸಿ
+- [ ] localStorage ಬಳಸಿ ಡೇಟಾ ಸಂಗ್ರಹಣೆ ಮತ್ತು ಪ್ರಾಪ್ತಿಯನ್ನು ಬ್ರೌಸರ್ ಕನ್‌ಸೋಲ್‌ನಲ್ಲಿ ಪ್ರಯತ್ನಿಸಿ
+- [ ] ನೆಟ್‌ವರ್ಕ್ ಟ್ಯಾಬ್ ಬಳಸಿ ಸಲ್ಲಿಸಲಾದ ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ಪರಿಶೀಲಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದು**
+- [ ] ಉಪನ್ಯಾಸೋತ್ತರ ಕ್ವಿಸ್ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಫಾರ್ಮ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ಬಳಕೆದಾರ ಇಚ್ಛೆಗಳ ಸಂಗ್ರಹಣೆಯೊಂದಿಗೆ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಫಾರ್ಮ್ ನಿರ್ಮಿಸಿ
+- [ ] ಸಹಾಯಕ ದೋಷ ಸಂದೇಶಗಳೊಂದಿಗೆ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಫಾರ್ಮ್ ಮಾನ್ಯತೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ವಿಸ್ತರಣೆ ಡೇಟಾ ಸ್ಥಿರತೆಗಾಗಿ chrome.storage API ಉಪಯೋಗವನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] ಉಳಿಸಿದ ಬಳಕೆದಾರ ಸೆಟ್ಟಿಂಗ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ರಚಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ವಿಸ್ತರಣೆ ನಿರ್ಮಾಣ**
+- [ ] ಪೂರ್ಣ ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಲಾದ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ಕಾರ್ಯಗೊಳಿಸಿ
+- [ ] ವಿವಿಧ ಸಂಗ್ರಹಣಾ ಆಯ್ಕೆಗಳ ಕೈಪಿಡಿ: ಸ್ಥಳೀಯ, ಸಮನ್ವಯ ಮತ್ತು ಸೆಶನ್ ಸಂಗ್ರಹಣೆ
+- [ ] ಸ್ವಯಂ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಯ ಹಾಗು ಮಾನ್ಯತೆ ಇರುವ ಉನ್ನತ ಫಾರ್ಮ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ಬಳಕೆದಾರ ಡೇಟಾ ಆಮದು/ರಫ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸೇರಿಸಿ
+- [ ] ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು ಪೂರ್ವಪರೀಕ್ಷೆ ಮಾಡಿ
+- [ ] ನಿಮ್ಮ ವಿಸ್ತರಣೆಯ ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಮೆರೆಸಿರಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ವೆಬ್ API ಪರಿಣತಿ**
+- [ ] ವಿವಿಧ ಬ್ರೌಸರ್ ಸಂಗ್ರಹಣಾ API ಗಳ ಅಡಿಯಲ್ಲಿ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ರಚಿಸಿ
+- [ ] ಆಫ್‌ಲೈನ್-ಮೊದಲ ಅಭಿವೃದ್ಧಿ ಮಾದರಿಗಳನ್ನು ಕಲಿತುಕೊಳ್ಳಿ
+- [ ] ಡೇಟಾ ಸ್ಥಿರತೆಯ ಸಂಬಂಧಿತ ಓಪನ್ ಸೋರ್ಸ್ ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ
+- [ ] ಗೌಪ್ಯತೆ ಕೇಂದ್ರಿತ ಅಭಿವೃದ್ಧಿ ಮತ್ತು GDPR ಅನುಕೂಲತೆಗಳಲ್ಲಿ ಪರಿಣತಿ ಪಡೆದು ಕೊಳ್ಳಿ
+- [ ] ಫಾರ್ಮ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಡೇಟಾ ನಿರ್ವಹಣೆಗೆ ಪುನಃಬಳಕೆ ಮಾಡುವ ಗ್ರಂಥಾಲಯಗಳನ್ನು ರಚಿಸಿ
+- [ ] ವೆಬ್ API ಮತ್ತು ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿ ಬಗ್ಗೆ ತಿಳುವಳಿಕೆ ಹಂಚಿಕೊಳ್ಳಿ
+
+## 🎯 ನಿಮ್ಮ ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿ ಪರಿಣತಿ ವೇಳಾಪಟ್ಟಿ
+
+```mermaid
+timeline
+    title API ಸಂಯೋಜನೆ ಮತ್ತು ಸಂಗ್ರಹಣಾ ಅಧ್ಯಯನ ಸ್ಫೂರ್ತಿ
+    
+    section DOM ಮೂಲಭೂತಗಳು (15 ನಿಮಿಷ)
+        ಅಂಶ ನಿರ್ದೇಶನೆಗಳು: querySelector ನಿಪುಣತೆ
+                          : ಈವೆಂಟ್ ಶ್ರೋತೃ ವ್ಯವಸ್ಥೆ
+                          : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆಯ ಅಡಿಗಳು
+        
+    section ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣಾ (20 ನಿಮಿಷ)
+        ದತ್ತಾಂಶ ಸ್ಥಿತಿಸ್ಥಾಪನೆ: ಕೀ-ಮೌಲ್ಯ ಸಂಗ್ರಹಣಾ
+                        : ಸೆಷನ್ ನಿರ್ವಹಣೆ
+                        : ಬಳಕೆದಾರ ಇಚ್ಛಾಪತ್ರ ನಿರ್ವಹಣೆ
+                        : ಸಂಗ್ರಹಣಾ ಪರಿಶೀಲನಾ ಉಪಕರಣಗಳು
+        
+    section ಫಾರ್ಮ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ (25 ನಿಮಿಷ)
+        ಬಳಕೆದಾರ ಇನ್ಪುಟ್: ಫಾರ್ಮ್ ಮಾನ್ಯತೆ
+                  : ಈವೆಂಟ್ ತಡೆಯುವಿಕೆ
+                  : ದತ್ತಾಂಶಾಂಶ ಸಂಗ್ರಹಣೆ
+                  : UI ಸ್ಥಿತಿ ಬದಲಿ
+        
+    section API ಸಂಯೋಜನೆ (35 ನಿಮಿಷ)
+        ಹೊರಗಿನ ಸಂವಹನ: HTTP ವಿನಂತಿಗಳು
+                              : ಪ್ರಮಾಣೀಕರಣ ಮಾದರಿಗಳು
+                              : JSON ದತ್ತಾಂಶ ವಿಶ್ಲೇಷಣೆ
+                              : ಪ್ರತಿಕ್ರಿಯಾ ನಿರ್ವಹಣೆ
+        
+    section ಅಸಿಂಕ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ (40 ನಿಮಿಷ)
+        ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್: ಪ್ರಾಮಿಸ್ ನಿರ್ವಹಣೆ
+                         : ಅಸಿಂಕ್/ಅವೈಟ್ ಮಾದರಿಗಳು
+                         : ದೋಷ ನಿರ್ವಹಣೆ
+                         : ನಿರ್ಬಂಧರಹಿತ ಕಾರ್ಯಗಳು
+        
+    section ದೋಷ ನಿರ್ವಹಣೆ (30 ನಿಮಿಷ)
+        ಬಲಿಷ್ಠ ಅಪ್ಲಿಕೇಶನ್ಗಳು: ಪ್ರಯತ್ನ/ಹಿಡಿತ ಕಡತಗಳು
+                           : ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಸಂದೇಶಗಳು
+                           : ಶ್ರೇಯೋಭಿವೃದ್ಧಿ ಕ್ಷಯ
+                           : ಡಿಬಗಿಂಗ್ ತಂತ್ರಗಳು
+        
+    section ಸುಧಾರಿತ ಮಾದರಿಗಳು (1 ವಾರ)
+        ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ: ಕೇಶಿಂಗ್ ತಂತ್ರಗಳು
+                                : ದರ ನಿರ್ಬಂಧನೆ
+                                : ಮರುಪ್ರಯತ್ನ ಮೆಕಾನಿಸಂಗಳು
+                                : ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಷ್ಕರಣೆ
+        
+    section ಉತ್ಪಾದನಾ ಕುಶಲತೆಗಳು (1 ತಿಂಗಳು)
+        ಎಂಟರ್ಪ್ರೈಸ್ ವೈಶಿಷ್ಟ್ಯಗಳು: ಭದ್ರತೆ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
+                           : API ಆವೃತ್ತಿ ನಿರ್ವಹಣೆ
+                           : ಸಮಯಮಾಪನ ಮತ್ತು ಲಾಗಿಂಗ್
+                           : ಸ್ಥೂಲಗೊಳಿಸುವ ಶಿಲ್ಪಶಾಸ್ತ್ರ
+```
+### 🛠️ ನಿಮ್ಮ ಫುಲ್-ಸ್ಟ್ಯಾಕ್ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣ ಪಟ್ಟಿ ಸಂಕ್ಷೇಪ
+
+ಈ ಪಾಠವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನಿಮಗೆ ಈಗಿದೆ:
+- **ಡಿಓಎಂ ಪರಿಣತಿ**: ನಿಖರವಾದ ಅಂಶ ಲಕ್ಷಣ ಮತ್ತು ವ್ಯವಹಾರ
+- **ಸಂಗ್ರಹಣೆ ಪರಿಣತಿ**: localStorageೊಂದಿಗೆ ಸ್ಥಾಯಿ ಡೇಟಾ ನಿರ್ವಹಣೆ
+- **API ಏಕೀಕರಣ**: ನೈಜ-ಕಾಲ ಡೇಟಾ ತರುವಿಕೆ ಮತ್ತು ಪ್ರಮಾಣೀಕರಣ
+- **ಅಸಿಂಕ್ರೋನ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಅಡ್ಡಬಾಧೆ ರಹಿತ ಕಾರ್ಯಗಳು
+- **ದೋಷ ನಿರ್ವಹಣೆ**: ವೈಫಲ್ಯಗಳನ್ನು ದಯೆಯಿಂದ ನಿರ್ವಹಿಸುವ ದುರ್ಬಲ ಅನ್ವಯಿಕೆಗಳು
+- **ಬಳಕೆದಾರ ಅನುಭವ**: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು, ಪರಿಶೀಲನೆ ಮತ್ತು ಮೃದು ಸಂವಹನ
+- **ಆಧುನಿಕ ಮಾದರಿಗಳು**: fetch API, async/await, ಮತ್ತು ES6+ ಲಕ್ಷಣಗಳು
+
+**ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು ಪಡೆದಿರಿ**: ನೀವು ಅನುಷ್ಠಾನಗೊಳಿಸಿದ್ದ ಮಾದರಿಗಳು ಬಳಕೆಯಾಗಿವೆ:
+- **ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಸ್**: ಹೊರಗಿನ ಡೇಟಾ ಮೂಲಗಳೊಂದಿಗೆ ಸಿಂಗಲ್-ಪೇಜ್ ಆ್ಯಪ್ಸ್
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ಆಫ್‌ಲೈನ್ ಸಾಮರ್ಥ್ಯಗಳೊಂದಿಗೆ API ಚಾಲಿತ ಆ್ಯಪ್ಸ್
+- **ಡೆಸ್ಕ್‌ಟಾಪ್ ಸಾಫ್ಟ್‌ವೇರ್**: ಸ್ಥಾಯಿ ಸಂಗ್ರಹಣೆಯೊಂದಿಗೆ Electron ಆ್ಯಪ್ಸ್
+- **ಎಂಟರ್‌ಪ್ರೈಸು ಸಿಸ್ಟಮ್ಸ್**: ಪ್ರಮಾಣೀಕರಣ, ಕ್ಯಾಶಿಂಗ್ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆ
+- **ಆಧುನಿಕ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು**: React/Vue/Angular ಡೇಟಾ ನಿರ್ವಹಣಾ ಮಾದರಿಗಳು
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು ಕ್ಯಾಶಿಂಗ್ ತಂತ್ರಗಳು, ನೈಜ-ಕಾಲ ವೆಬ್‌ಸಾಕೆಟ್ ಸಂಪರ್ಕಗಳು, ಅಥವಾ ಸಂಕೀರ್ಣ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ ಇತ್ಯಾದಿ ಮುಂಭಾಗದ ವಿಷಯಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಸಿದ್ಧರಾಗಿದ್ದೀರಿ!
+
+## Assameseಂಟ್‌ಮೇಂಟ್
+
+[API ಅನ್ನು ಸ್ವೀಕರಿಸಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿರಾಕರಣೆ**:
+ಈ ದಸ್ತಾವೇಜುವನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯನ್ನು ಭರವಸೆ ನೀಡಲು ಪ್ರಯತ್ನಿಸುವುದಾಗಿ ತಿಳಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಚಾಲಿತ ಅನುವಾದದಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸಿದಾಗ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪುಮಾಡಿಕೆಗಳು ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/2-forms-browsers-local-storage/assignment.md

@@ -0,0 +1,109 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "25b8d28b8531352d4eb67291fd7824c4",
+  "translation_date": "2026-01-08T15:19:14+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "kn"
+}
+-->
+# API ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ
+
+## ಅವಲೋಕನ
+
+APIಗಳು ಸೃಜನಶೀಲ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗಾಗಿ ಅನಂತ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತವೆ! ಈ ಏússೈನ್ಮೆಂಟ್‌ನಲ್ಲಿ, ನೀವು ಬಾಹ್ಯ API ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿ, ಬಳಕೆದಾರರಿಗೆ ನೈಜ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುವ ಅಥವಾ ಮೌಲ್ಯಯುತ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಒದಗಿಸುವ ಬ್ರೌಸರ್ ವಿಸ್ತಾರವನ್ನು ರಚಿಸುವಿರಿ.
+
+## ನಿರ್ದೇಶನಗಳು
+
+### ಹಂತ 1: ನಿಮ್ಮ API ಆಯ್ಕೆಮಾಡಿ
+ಈ ಸಂಗ್ರಹಿತ [ಉಚಿತ ಸಾರ್ವಜನಿಕ APIಗಳ ಪಟ್ಟಿಯಿಂದ](https://github.com/public-apis/public-apis) ಒಂದು API ಅನ್ನು ಆಯ್ಕೆಮಾಡಿ. ಈ ವರ್ಗಗಳನ್ನು ಪರಿಗಣಿಸಿ:
+
+**ಆರಂಭಿಕರಿಗಾಗಿ ಜನಪ್ರಿಯ ಆಯ್ಕೆಗಳು:**
+- **ಮನರಂಜನೆ**: ಯಾದೃಚ್ಛಿಕ ನಾಯಿಗಳ ಚಿತ್ರಗಳಿಗಾಗಿ [Dog CEO API](https://dog.ceo/dog-api/)
+- **ಹವಾಮಾನ**: ಪ್ರಸ್ತುತ ಹವಾಮಾನ ಡೇಟಾದಕ್ಕಾಗಿ [OpenWeatherMap](https://openweathermap.org/api)
+- **ಉಕ್ತಿಗಳು**: ಪ್ರೇರಣಾದಾಯಕ ಉಕ್ತಿಗಳಿಗಾಗಿ [Quotable API](https://quotable.io/)
+- **ಸುದ್ದಿ**: ಪ್ರಸ್ತುತ ಶೀರ್ಷಿಕೆಗಳಿಗಾಗಿ [NewsAPI](https://newsapi.org/)
+- **ರಮಣೀಯ ಮಾಹಿತಿ**: ಆಸಕ್ತಿದಾಯಕ ಸಂಖ್ಯೆFACTಗಳಿಗಾಗಿ [Numbers API](http://numbersapi.com/)
+
+### ಹಂತ 2: ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ಯೋಜಿಸಿ
+ಕೋಡಿಂಗ್ ಮೊದಲು, ಈ ಯೋಜನಾ ಪ್ರಶ್ನೆಗಳನ್ನು ಉತ್ತರಿಸಿ:
+- ನಿಮ್ಮ ವಿಸ್ತಾರ ಯಾವ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ?
+- ನಿಮ್ಮ ಗುರಿ ಬಳಕೆದಾರ ಯಾರು?
+- ನೀವು ಯಾವ ಡೇಟಾವನ್ನು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಸಂಗ್ರಹಿಸುವಿರಿ?
+- API ವೈಫಲ್ಯಗಳು ಅಥವಾ ದರ ಮಿತಿಗಳನ್ನು ನೀವು ಹೇಗೆ ನಿರ್ವಹಿಸುವಿರಿ?
+
+### ಹಂತ 3: ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ನಿರ್ಮಿಸಿ
+ನಿಮ್ಮ ವಿಸ್ತಾರದಲ್ಲಿ ಈ ಕೆಳಗಿನವುಗಳು ಇರಬೇಕು:
+
+**ಅಗತ್ಯ ವೈಶಿಷ್ಟ್ಯಗಳು:**
+- ಯಾವುದೇ ಅಗತ್ಯ API ಪರಿಮಾಣಗಳಿಗೆ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್‌ಗಳು
+- ಸರಿಯಾದ ದೋಷ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ API ಏಕೀಕರಣ
+- ಬಳಕೆದಾರ ಆಯ್ಕೆಗಳು ಅಥವಾ API ಕೀಲಿಗಳಿಗೆ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ
+- ಶುದ್ಧ, ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್
+- ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ
+
+**ಕೋಡ್ ಅಗತ್ಯತೆಗಳು:**
+- ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (ES6+) ಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ
+- API ಕರೆಗಳಿಗೆ async/await ಅನ್ನು ಜಾರಿಗೆ ಮಾಡಿ
+- try/catch ಬ್ಲಾಕ್‌ಗಳೊಂದಿಗೆ ಸರಿಯಾದ ದೋಷ ನಿರ್ವಹಣೆ ಸೇರಿಸಿ
+- ನಿಮ್ಮ ಕೋಡ್ ವಿವರಿಸುವ ಅರ್ಥಪೂರ್ಣ ಕಾಮೆಂಟುಗಳನ್ನು ಸೇರಿಸಿ
+- ಸुसಂರಚಿತ ಕೋಡ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನುಸರಿಸಿ
+
+### ಹಂತ 4: ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಸುಧಾರಿಸಿ
+- ವಿವಿಧ ಇನ್‌ಪುಟ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ಪರೀಕ್ಷಿಸಿ
+- ಅಂಚು ಪ್ರಕರಣಗಳನ್ನು ನಿರ್ವಹಿಸಿ (ಇಂಟರ್‌ನೆಟ್ ಇಲ್ಲ, ಅಮಾನ್ಯ API ಪ್ರತಿಕ್ರಿಯೆಗಳು)
+- ಬ್ರೌಸರ್ ಪುನಃಪ್ರಾರಂಭದ ನಂತರವೂ ನಿಮ್ಮ ವಿಸ್ತಾರ ಕೆಲಸ ಮಾಡುವುದನ್ನು ಖಚಿತಪಡಿಸಿ
+- ಬಳಕೆದಾರ ಸ್ನೇಹಿ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಸೇರಿಸಿ
+
+## ಉತ್ಪ್ರೇರ್ ಸವಾಲುಗಳು
+
+ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಮಾಡಿಕೊಳ್ಳಿ:
+-ಸಮೃದ್ಧ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಬಹು API ಎಂಡ್ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ
+-API ಕರೆಯುವುದನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಡೇಟಾ ಕ್ಯಾಶಿಂಗ್ ಜಾರಿಗೆ ಮಾಡಿ
+-ಸಾಮಾನ್ಯ ಕ್ರಿಯೆಗಳಿಗೆ ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್‌ಕಟ್‌ಗಳ ರಚಿಸಿ
+-ಡೇಟಾ ರಫ್ತು/ಆಮದು ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಿ
+-ಬಳಕೆದಾರ ಕಸ್ಟಮೈಸೇಶನ್ ಆಯ್ಕೆಗಳು ಜಾರಿಗೆ ಮಾಡಿ
+
+## ಸಲ್ಲಿಕೆ ಅಗತ್ಯತೆಗಳು
+
+1. ನಿಮ್ಮ ಆಯ್ಕೆಮಾಡಿದ API ಜೊತೆಗೆ ಯಶಸ್ವಿಯಾಗಿ ಏಕೀಕೃತ ಕಾರ್ಯನಿರ್ವಹಿಸುವ **ಕಾರ್ಯನಿರತ ಬ್ರೌಸರ್ ವಿಸ್ತಾರ**
+2. **README ಕಡತ** ಇದು ವಿವರಿಸುತ್ತದೆ:
+   - ನೀವು ಯಾವ API ಅನ್ನು ಮತ್ತು ಯಾಕೆ ಆಯ್ಕೆಮಾಡಿದಿರಿ
+   - ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ಹೇಗೆ ಇನ್‌ಸ್ಟಾಲ್ ಮತ್ತು ಬಳಸುವುದು
+   - ಯಾವುದೇ API ಕೀಗಳು ಅಥವಾ ಸೆಟ್‌ಅಪ್ ಅಗತ್ಯವಿದೆ
+   - ನಿಮ್ಮ ವಿಸ್ತಾರದ ಚಟುವಟಿಕೆಯಲ್ಲಿ ತೋರಿಸುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು
+3. ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ **ಶುದ್ಧ, ಕಾಮೆಂಟ್ ಮಾಡಲಾದ ಕೋಡ್**
+
+## ಮೌಲ್ಯಮಾಪನ
+
+| ಮಾನದಂಡಗಳು | ಅತ್ಯುತ್ತಮ (90-100%) | ಪ್ರೌಢಿಮಯ (80-89%) | ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತಿರುವ (70-79%) | ಪ್ರಾರಂಭಿಕ (60-69%) |
+|-------------|---------------------|---------------------|---------------------|--------------------|
+| **API ಏಕೀಕರಣ** | ಸಮಗ್ರ ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಅಂಚು ಪ್ರಕರಣ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ನಿರ್ದೋಷ API ಏಕೀಕರಣ | ಮೂಲಭೂತ ದೋಷ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಯಶಸ್ವಿ API ಏಕೀಕರಣ | API ಕಾರ್ಯಕ್ಕೆ ಮುಂದುವರೆದಿಲ್ಲದ ದೋಷ ನಿರ್ವಹಣೆ | API ಏಕೀಕರಣದಲ್ಲಿ ಪ್ರಮುಖ ಸಮಸ್ಯೆಗಳು |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಉತ್ತಮ ಕೋಡ್ ರಚನೆ ಮತ್ತು ಉತ್ತಮ ಕಾಮೆಂಟುಗಳೊಂದಿಗೆ ಸಮರ್ಥ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ | ಯೋಗ್ಯ ಕಾಮೆಂಟುಗಳೊಂದಿಗೆ ಉತ್ತಮ ಕೋಡ್ ರಚನೆ | ಕೋಡ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಆದರೆ ಉತ್ತಮ ಸಂಘಟನೆಗೆ ಅಗತ್ಯವಿದೆ | ಕನಿಷ್ಠ ಕಾಮೆಂಟ್ ಗಳುಳ್ಳ ದುರನ್ವಯ ಕೋಡ್ ಗುಣಮಟ್ಟ |
+| **ಬಳಕೆದಾರ ಅನುಭವ** | ಉತ್ತಮ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ಪದಗುಳಿದ ಇಂಟರ್ಫೇಸ್ | ಮೂಲಭೂತ ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ಒಳ್ಳೆಯ ಇಂಟರ್ಫೇಸ್ | ಸಮರ್ಪಕವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಮೂಲಭೂತ ಇಂಟರ್ಫೇಸ್ | ಅಸ್ಪಷ್ಟ ಇಂಟರ್ಫೇಸ್ ಜೊತೆಗೆ ದುರ್ಬಲ ಬಳಕೆದಾರ ಅನುಭವ |
+| **ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ** | ಡೇಟಾ ಪರಿಶೀಲನೆ ಮತ್ತು ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಸುಧಾರಿತ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಬಳಕೆ | ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಸರಿಯಾದ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಜಾರಿಗೆ | ಮೂಲಭೂತ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಜಾರಿ | ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಬಳಕೆ ಕನಿಷ್ಠ ಅಥವಾ ತಪ್ಪು |
+| **ದಸ್ತಾವೇಜು** | ಸೆಟ್‌ಅಪ್ ಸೂಚನೆಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳೊಂದಿಗೆ ಸಮಗ್ರ README | ಹೆಚ್ಚಿನ ಅಗತ್ಯಗಳನ್ನು ಒಳಗೊಂಡ ಉತ್ತಮ ದಸ್ತಾವೇಜು | ಕೆಲವು ವಿವರಗಳಿಲ್ಲದ ಮೂಲಭೂತ ದಸ್ತಾವೇಜು | ದುರಂತ ಅಥವಾ ಇಲ್ಲದ ದಸ್ತಾವೇಜು |
+
+## ಪ್ರಾರಂಭಿಕ ಸಲಹೆಗಳು
+
+1. **ಸರಳವಾಗಿ ಪ್ರಾರಂಭಿಸಿ**: ಸಂಕೀರ್ಣ ಪ್ರಾಮಾಣೀಕರಣವನ್ನು ಅಗತ್ಯವಿಲ್ಲದ API ಆಯ್ಕೆಮಾಡಿ
+2. **ಡಾಕ್ಯುಮೆಂಟ್‎ಗಳನ್ನು ಓದಿ**: ನಿಮ್ಮ ಆಯ್ಕೆಮಾಡಿದ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಗಳು ಎಷ್ಟು ತಿಳಿದಿಡಿ
+3. **ನಿಮ್ಮ UIಯನ್ನು ಯೋಜಿಸಿ**: ಕೋಡಿಂಗ್‌ಗೂ ಮುಪ್ಪುದು ನಿಮ್ಮ ವಿಸ್ತಾರ ಇಂಟರ್ಫೇಸ್‌ನ ಕುರಿತು ರೇಖಾಚಿತ್ರ ಕೆಳಗೊಳ್ಳಿ
+4. **ಸತತವಾಗಿ ಪರೀಕ್ಷಿಸಿ**: ಹಂತ ಹಂತವಾಗಿ ನಿರ್ಮಿಸಿ ಮತ್ತು ಪ್ರತಿಯೊಂದು ವೈಶಿಷ್ಟ್ಯವನ್ನು ಸೇರಿಸುವಾಗ ಪರೀಕ್ಷಿಸಿ
+5. **ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸಿ**: API ಕರೆಗಳು ವೈಫಲ್ಯ ಆಗಬಹುದು ಎಂದು ಸದಾ ಊಹಿಸಿ ಮತ್ತು ಆನೌನ್ಸ್ ಮಾಡಿ
+
+## ಸಂಸಾಧನಗಳು
+
+- [ಬ್ರೌಸರ್ ವಿಸ್ತಾರ ಡಾಕ್ಯುಮೆಂಟ್](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions)
+- [ಫೆಚ್ API ಮಾರ್ಗದರ್ಶಕ](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch)
+- [ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಪಾಠ](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+- [JSON ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ನಿರ್ವಹಣೆ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)
+
+ಉಪಯುಕ್ತ ಮತ್ತು ಸೃಜನಶೀಲವಾದ ಏದನ್ನಾದರೂ ನಿರ್ಮಿಸುವಾಗ ಆನಂದಿಸಿ! 🚀
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಬಾಹ್ಯೋಪಶಮನೆ**:  
+ಈ ದಸ್ತಾವೇಜು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯ ಮೇಲೆ ಹೆಚ್ಚು ಶ್ರಮಿಸುವುದಾದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ದಸ್ತಾವೇಜಿನಲ್ಲಿ ಅದರ ಸ್ಥಳೀಯ ಭಾಷೆ ಅತ್ಯಂತ ನಂಬಿಕದಾಯಕ ಮೂಲವಾಗಿರುತ್ತದೆ. ಗಂಭೀರ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ತಿಳುವಳಿಕೆ ಅಥವಾ ಅರ್ಥದ ದೋಷಕ್ಕೆ ನಾವು ಬಾಧ್ಯರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/3-background-tasks-and-performance/README.md

@@ -0,0 +1,597 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b275fed2c6fc90d2b9b6661a3225faa2",
+  "translation_date": "2026-01-08T15:27:43+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಯೋಜನೆ ಭಾಗ 3: ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಟಾಸ್ಕ್‌ಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಬಗ್ಗೆ ಮಾಹಿತಿ ಪಡೆದಿರಿ
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣಾ ಯಾತ್ರೆ
+    section ಆಧಾರ
+      ಬ್ರೌಸರ್ ಸಾಧನಗಳನ್ನು ಕಲಿಕಾ: 3: Student
+      ಪ್ರೊಫೈಲಿಂಗ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 4: Student
+      ರಕ್ತಸ್ರಾವಗಳನ್ನು ಗುರುತಿಸಿ: 4: Student
+    section ವಿಸ್ತರಣೆ ವೈಶಿಷ್ಟ್ಯಗಳು
+      ಬಣ್ಣ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿ: 4: Student
+      ಹಿನ್ನೆಲೆಯ ಕೆಲಸಗಳನ್ನು ಸೃಷ್ಟಿಸಿ: 5: Student
+      ಐಕಾನ್ಗಳನ್ನು динамиಕಾಗಿ ನವೀಕರಿಸಿ: 5: Student
+    section ಸುಧಾರಣೆ
+      ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿರೀಕ್ಷಿಸಿ: 5: Student
+      ಸಮಸ್ಯೆಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಿ: 4: Student
+      ಅನುಭವವನ್ನು ಸೂಕ್ಷ್ಮಗೊಳಿಸಿ: 5: Student
+```
+ಕೆಲವು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳು ಏಕೆ ತ್ವರಿತ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲವಾಗಿದೆಯೆಂದು ಆಶ್ಚರ್ಯವಾಗಿದೆಯೇ, ಬೇರೆವುಗಳು ನಿಧಾನವಾಗಿ ಅನಿಸುತ್ತದೆ? ರಹಸ್ಯವು ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್‌ನಲ್ಲಿ ನಡೆಯುತ್ತಿರುವುದರಲ್ಲಿ ಇದೆ. ಬಳಕೆದಾರರು ನಿಮ್ಮ ವಿಸ್ತರಣೆಯ ಇಂಟರ್ಫೇಸನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವಾಗ, ಡೇಟಾ ಪಡೆಯುವಿಕೆ, ಐಕಾನ್ ಅಪ್‌ಡೇಟ್‌ಗಳು ಮತ್ತು ಸಿಸ್ಟಮ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಮೌನವಾಗಿ ನಿರ್ವಹಿಸುವ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಪ್ರಕ್ರಿಯೆಗಳ ಒಂದು ಸಂಪೂರ್ಣ ಜಗತ್ತು ಇದೆ.
+
+ಇದು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಸರಣಿಯ ಕೊನೆಯ ಪಾಠ, ಮತ್ತು ನಾವು ನಿಮ್ಮ ಕಾರ್ಬನ್ ಫುಟ್‌ಪ್ರಿಂಟ್ ಟ್ರ್ಯಾಕರ್ ಅನ್ನು ನಯವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವಂತೆ ಮಾಡಲಿದ್ದೇವೆ. ನೀವು ಡೈನಾಮಿಕ್ ಐಕಾನ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ, ಸಮಸ್ಯೆಗಳಾಗದ ಮೊದಲು ಕಾರ್ಯಕ್ಷಮತೆ ಸಮಸ್ಯೆಗಳನ್ನು ಹೇಗೆ ಕಂಡುಹಿಡಿಯಬೇಕೆಂದು ಕಲಿತೀರಿ. ಇದು ರೇಸ್ ಕಾರನ್ನು ಸರಿಪಡಿಸುವಂತಿದೆ - ಸಣ್ಣ ಪರಿಷ್ಕಾರಗಳು ಎಲ್ಲವೂ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರಲ್ಲಿ ದೊಡ್ಡ ವ್ಯತ್ಯಾಸ ತರುತ್ತವೆ.
+
+ನಾವು ಕೊನೆಗೊಳ್ಳುವ ವೇಳೆಗೆ, ನಿಮ್ಮ ವಿಸ್ತರಣೆ ಹೊಳೆಯುವಂತೆ ಆಗಿದ್ದು, ಉತ್ತಮ ವೆಬ್ ಆ್ಯಪ್‌ಗಳು ಹಾಗೂ ಅತ್ಯುತ್ತಮ ಆ್ಯಪ್‌ಗಳು ವಿಭಿನ್ನವಾಗುವ ಕಾರ್ಯಕ್ಷಮತೆ ತತ್ವಗಳನ್ನು ನೀವು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ. ಬನ್ನಿ, ಬ್ರೌಸರ್ ಅನುವತನದ ನಾಡಿಗೆ ನುಗ್ಗೋಣ.
+
+## ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/27)
+
+### ಪರಿಚಯ
+
+ನೇವಿ ಹಿಂದಿನ ಪಾಠಗಳಲ್ಲಿ ನೀವು ಒಂದು ಫಾರ್ಮ್ ನಿರ್ಮಿಸಿಕೊಂಡಿದ್ದೀರಿ, ಅದನ್ನು API ಗೆ ಸಂಪರ್ಕಿಸಿದೆ, ಮತ್ತು ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಪಡೆಯುವಿಕೆಯನ್ನು ನಡೆಸಿದ್ದೀರಿ. ನಿಮ್ಮ ವಿಸ್ತರಣೆ ಚೆನ್ನಾಗಿ ರೂಪುಗೊಳ್ಳುತ್ತಿದೆ.
+
+ಈಗ ನಾವು ಅಂತಿಮ ಸ್ಪರ್ಶಗಳನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ - ಕಾರ್ಬನ್ ಡೇಟಾದ ಆಧಾರದ ಮೇಲೆ ಆ ವಿಸ್ತರಣೆ ಐಕಾನ್ ಬಣ್ಣ ಬದಲಾವಣೆಯಾಗುವಂತೆ ಮಾಡುವುದು. ಇದು NASA ಹಾದಿ ಪಾಲೋ ಸ್ಪೇಸ್‌ಕ್ರಾಫ್ಟ್‌ನ ಪ್ರತಿಯೊಂದು ವ್ಯವಸ್ಥೆಯನ್ನು ಹೇಗೆ ಪರಿಷ್ಕರಿಸಬೇಕಾಯಿತು ಎಂದು ನೆನಪಿಗೆ ತರುತ್ತದೆ. ಅವರು ಯಾವುದೇ ವ್ಯರ್ಥವಾದ ಸೈಕಲ್ ಅಥವಾ ಮೆಮೊರಿ ವರ್ಧನೆಯ ಪ್ರಪಂಚದಲ್ಲಿರಲಿಲ್ಲ ಏಕೆಂದರೆ ಜೀವಗಳು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದ್ದವು. ನಮ್ಮ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಅಷ್ಟರ ಮಟ್ಟಿಗೆ ಗಂಭೀರವಾದ್ದಿಲ್ಲವಾದರೂ, ಅದೇ ತತ್ವಗಳು ಅನ್ವಯಿಸುತ್ತವೆ - ಪರಿಣಾಮಕಾರಿ ಕೋಡ್ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
+
+```mermaid
+mindmap
+  root((ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಹಿನ್ನೆಲೆ ಕಾರ್ಯಗಳು))
+    Browser Performance
+      Rendering Pipeline
+      Asset Optimization
+      DOM Manipulation
+      JavaScript Execution
+    Profiling Tools
+      Developer Tools
+      Performance Tab
+      Timeline Analysis
+      Bottleneck Detection
+    Extension Architecture
+      Background Scripts
+      Content Scripts
+      Message Passing
+      Icon Management
+    Optimization Strategies
+      Code Splitting
+      Lazy Loading
+      Caching
+      Resource Compression
+    Visual Feedback
+      Dynamic Icons
+      Color Coding
+      Real-time Updates
+      User Experience
+```
+## ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮೂಲಭೂತಗಳು
+
+ನಿಮ್ಮ ಕೋಡ್ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಚಲಿಸಿದಾಗ, ಜನರು ವ್ಯತ್ಯಾಸವನ್ನು ನಿಜವಾಗಿಯೂ *ಅನುಭವಿಸಬಹುದು*. ಪೇಜ್ ತಕ್ಷಣಭಾಗಿ ಲೋಡ್ ಆಗುವುದನ್ನು ಅಥವಾ ಅನಿಮೇಷನ್ ಸವರಿಸಿಕೊಂಡು ಹೋಗುವುದನ್ನು ನೀವು ತಿಳಿದಿರುತ್ತೀರಿ? ಅದು ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮ.
+
+ಕಾರ್ಯಕ್ಷಮತೆ ಮಾತ್ರವೇ ವೇಗವಲ್ಲ - ಅದು ಪ್ರಕೃತಿ ನಡವಳಿಕೆಯಂತೆ ಅನುಭವಿಸುವ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸುವುದೇ. ಕಂಪ್ಯೂಟಿಂಗ್ ಮೊದಲ ಕಾಲಗಳಲ್ಲಿ, ಗ್ರೇಸ್ ಹಾಪರ್ ತನ್ನ ಡೆಸ್ಕ್ ನಲ್ಲಿ ನಿನೊಸೆಕೆಂಡ್ (ಒಂದು ಕಾಲು ಉದ್ದದ ತಂತಿ) ಇಡುತ್ತಾಳೆ, ಇದರಿಂದ ಒಂದು ಬಿಲಿಯನ್ ಭಾಗದ ಸೆಕೆಂಡ್‌ನಲ್ಲಿ ಬೆಳಕು ಎಷ್ಟು ದೂರ ಸಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ತೋರಿಸಲು. ಪ್ರತೀ ಮೈಸೆಕೆಂಡ್ ಕಂಪ್ಯೂಟಿಂಗ್‌ನಲ್ಲಿ ಎಷ್ಟೊಂದು ಮಹತ್ವವುಳ್ಳಿದೆ ಎಂದು ಅದೃಷ್ಟಪೂರ್ಣವಾಗಿ ವಿವರಿಸುವ ಮೂಲಕ ಅದು ಮಾಡಲಾಯಿತು. ನಾವೀಗ ಇದೇ ಮಾಹಿತಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುವ ಡಿಟೆಕ್ಟಿವ್ ಸಾಧನಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.
+
+> "ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆ ಎರಡು ವಿಷಯಗಳ ಬಗ್ಗೆ ಯಾವಾಗಲು ಇರುತ್ತದೆ: ಪುಟ ಎಷ್ಟು ಬೇಗ ಲೋಡ್ ಆಗುತ್ತದೆ ಮತ್ತು ಅದರಲ್ಲಿ ಇರುವ ಕೋಡ್ ಎಷ್ಟು ಬೇಗ ಚಲಿಸುತ್ತದೆ." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿಯೂ, ಎಲ್ಲಾ ರೀತಿ ಬಳಕೆದಾರರಿಗಾಗಿ, ಎಲ್ಲ ರೀತಿ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿಯೂ ಬ್ಲೈಸಿಂಗ್ ಸ್ಪೀಡ್ ಮಾಡುವುದು ಎಂದಾದರು ವಿಶಾಲ ವಿಷಯ. ನೀವು ಸ್ಟ್ಯಾಂಡರ್ಡ್ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್ ಅಥವಾ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ನಿರ್ಮಿಸುವಾಗ ನಮೂದಿಸುವ ಕೆಲವು ಅಂಶಗಳನ್ನು ಇಲ್ಲಿ ಗಮನಿಸಿರಿ.
+
+ನಿಮ್ಮ ಸೈಟ್‌ನೊಂದಿಗೆ ಅತ್ಯುತ್ತಮ ಅನುವತನ ಮಾಡಲು ಮೊದಲ ಹಂತವು ಅಂಡರ್ ದಿ ಹೂಡ್ ಏನಾಗುತ್ತಿದೆಯೋ ತಿಳಿದುಕೊಳ್ಳುವುದು. ಘನತೆಯಿಂದ, ನಿಮ್ಮ ಬ್ರೌಸರ್ ಒಂದು ಶಕ್ತಿ ಶುಕ್ಷುಮಕೃಪಯುಕ್ತ ಡಿಟೆಕ್ಟಿವ್ ಸಾಧನಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
+
+```mermaid
+flowchart LR
+    A[HTML] --> B[ಪುಟ解析]
+    B --> C[ಡಿಓಎಂ ಮರ]
+    D[CSS] --> E[解析]
+    E --> F[CSSOM]
+    G[JavaScript] --> H[ನಿರ್ವಹಿಸಿ]
+    
+    C --> I[ರೆಂಡರ್ ಮರ]
+    F --> I
+    H --> I
+    
+    I --> J[ಲೇಔಟ್]
+    J --> K[ಚಿತ್ರವರ್ಣನ]
+    K --> L[ಸಂಯೋಜನೆ]
+    L --> M[ಪ್ರದರ್ಶನ]
+    
+    subgraph "ಗಂಭೀರ ರೆಂಡರಿಂಗ್ ಮಾರ್ಗ"
+        N["1. HTML解析"]
+        O["2. CSS解析"]
+        P["3. JS ನಡಿಸಿ"]
+        Q["4. ರೆಂಡರ್ ಮರ ನಿರ್ಮಿಸಿ"]
+        R["5. ಅಂಶಗಳ ವಿನ್ಯಾಸ"]
+        S["6. ಪಿಕ್ಸೆಲ್ಗಳ ಚಿತ್ರಣ"]
+        T["7. ಪದರ ಸಂಯೋಜನೆ"]
+    end
+    
+    style M fill:#e8f5e8
+    style I fill:#fff3e0
+    style H fill:#ffebee
+```
+ಎಡ್ಜ್‌ನಲ್ಲಿ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳನ್ನು ತೆರೆಯಲು, ಮೇಲೆ ಬಲಪ್ರದೇಶದಲ್ಲಿರುವ ಮೂವರು ಬಿಂದುಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ, ನಂತರ More Tools > Developer Tools ಗೆ ಹೋಗಿ. ಅಥವಾ ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್‌ಕಟ್ ಅನ್ನು ಬಳಸಿ: ವಿಂಡೋಸ್‌ನಲ್ಲಿ `Ctrl` + `Shift` + `I` ಅಥವಾ ಮ್ಯಾಕ್‌ನಲ್ಲಿ `Option` + `Command` + `I`. ಅಲ್ಲಿ ತಲುಪಿದ ಮೇಲಾಗ, Performance ಟ್ಯಾಬ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ - ಇಲ್ಲಿ ನೀವು ನಿಮ್ಮ ತನಿಖೆಯನ್ನು ಮಾಡುತ್ತೀರಿ.
+
+**ನಿಮ್ಮ ಕಾರ್ಯಕ್ಷಮತೆ ಡಿಟೆಕ್ಟಿವ್ ಉಪಕರಣಗಳು ಇಲ್ಲಿವೆ:**
+- **ತೆರೆಯಿರಿ** ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳು (ನೀವು ಡೆವಲಪರ್ ಆಗಿ ಹದಿನೈದು ಬಾರಿ ಬಳಸುವಿರಿ!)
+- **ಹೊಕ್ಕಿರಿ** Performance ಟ್ಯಾಬ್ - ಇದನ್ನು ನಿಮ್ಮ ವೆಬ್ ಆಪ್ ಫಿಟ್ನೆಸ್ ಟ್ರ್ಯಾಕರ್ ಎಂದು ಪರಿಗಣಿಸಿ
+- **ಒತ್ತಿರಿ** Record ಬಟನ್ ಮತ್ತು ನಿಮ್ಮ ಪುಟದ ಕ್ರಿಮ್ಮಣವನ್ನು ಗಮನಿಸಿ
+- **ಅಧ್ಯಯನ ಮಾಡಿ** ಫಲಿತಾಂಶವನ್ನು, ಏನು ನಿಧಾನಗೊಳ್ಳುತ್ತಿದೆ ನೋಡಿ 
+
+ಈದು ಪ್ರಯತ್ನಿಸೋಣ. ಒಂದು ವೆಬ್‌ಸೈಟ್ ತೆರೆಯಿರಿ (Microsoft.com ಚೆನ್ನಾಗಿದೆ) ಮತ್ತು 'Record' ಬಟನ್ ಒತ್ತಿ. ಈಗ ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ ಮತ್ತು ಪ್ರೊಫೈಲರ್ ಕ್ರಿಯೆಯನ್ನು ಸೆರೆಹಿಡಿಯುವುದನ್ನು ನೋಡಿ. ನೀವು ರೆಕಾರ್ಡ್ ನಿಲ್ಲಿಸಿದಾಗ, ಬ್ರೌಸರ್ 'ಸ್ಕ್ರಿಪ್ಟ್', 'ರೆಂಡರ್', ಮತ್ತು 'ಪೇಂಟ್' ಆಗುವ ವೈಯಕ್ತಿಕ ವಿವರವನ್ನು ನೋಡುತ್ತೀರಿ. ಇದು ರಾಕೆಟ್ ಲಾಂಚ್ ಸಮಯದ ಮಿಷನ್ ಕಂಟ್ರೋಲ್ ನಲ್ಲಿ ಪ್ರತಿ ವ್ಯವಸ್ಥೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವ ರೀತಿಯಾಗಿದೆ - ನೀವು ನಿಜ ಸಮಯದಲ್ಲಿ ಏನು ಮತ್ತು ಯಾವಾಗ ನಡೆಯುತ್ತಿದೆ ಎಂಬ ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತೀರಿ.
+
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.kn.png)
+
+✅ [Microsoft ಡಾಕ್ಯುಮೆಂಟೇಷನ್](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ನಲ್ಲಿ ಹೆಚ್ಚು ವಿವರಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಬಹುದು
+
+> ಪ್ರೋ ಟಿಪ್: ಪರೀಕ್ಷಿಸುವ ಮೊದಲು ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕ್ಯಾಶೆ ತೆರವುಗೊಳಿಸಿ, ಇದು ಮೊದಲ ಬಾರಿಗೆ ಭೇಟಿನಿಡುವವರಿಗೆ ನಿಮ್ಮ ಸೈಟ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳಲು ಸಹಾಯಕ - ಇದು ಪುನಃ ಭೇಟಿಗೆ ಭಿನ್ನವಾಗಿರಬಹುದು!
+
+ಪ್ರೊಫೈಲ್ ಟೈಮ್‌ಲೈನ್‌ನ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿ ನಿಮ್ಮ ಪುಟ ಲೋಡ್ ಆಗುವ ಸಂದರ್ಭಗಳಲ್ಲಿ ನಡೆದ ಘಟನೆಗಳನ್ನು ಸಮೀಪದಿಂದ ನೋಡಿ.
+
+ಪ್ರೊಫೈಲ್ ಟೈಮ್‌ಲೈನ್‌ನ ಭಾಗ ಆಯ್ಕೆ ಮಾಡಿ ಸಾರಾಂಶ ಪೇನ್ ನಲ್ಲಿ ನಿಮ್ಮ ಪುಟದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸ್ನಾಪ್‌ಶಾಟ್ ಪಡೆಯಿರಿ:
+
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.kn.png)
+
+ಈವೆಂಟ್ ಲಾಗ್ ಪೇನ್ (Event Log pane) ತಪಾಸಿಸಿ ಯಾವುದೇ ಈವೆಂಟ್ 15 ಮಿಲಿಸೆಕೆಂಡ್ ಗಿಂತ ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಂಡಿದೆಯೇ ಎಂಬುದನ್ನು ನೋಡಿ:
+
+![Edge event log](../../../../translated_images/log.804026979f3707e0.kn.png)
+
+✅ ನಿಮ್ಮ ಪ್ರೊಫೈಲರ್ ಪರಿಚಯಿಸಿದರು! ಈ ಸೈಟ್‌ನಲ್ಲಿ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳನ್ನು ತೆರೆಯಿರಿ, ಯಾವುದಾದರೂ ಸಮಸ್ಯೆಗಳಿವೆ ಎಂಬುದನ್ನು ನೋಡಿ. ಏನು ಅತ್ಯಂತ ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುತ್ತದೆ? ಏನು ಅತ್ಯಂತ ವೇಗವಾಗಿ?
+
+```mermaid
+flowchart TD
+    A[ಡೆವ್ ಟೂಲ್ಸ್ ತೆರೆಯಿರಿ] --> B[ಕಾರ್ಯಕ್ಷಮತಾ ತುಣುಕುಗೆ ನಾವಿಗೇಟ್ ಮಾಡಿ]
+    B --> C[ರಿಕಾರ್ಡ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ]
+    C --> D[ಕ್ರಿಯೆಗಳು ಮಾಡಿ]
+    D --> E[ರಿಕಾರ್ಡಿಂಗ್ ನಿಲ್ಲಿಸಿ]
+    E --> F{ಫಲಿತಾಂಶವನ್ನ ವಿಶ್ಲೇಷಿಸಿ}
+    
+    F --> G[ಟೈಮ್ ಲೈನ್ ಪರಿಶೀಲಿಸಿ]
+    F --> H[ನೆಟ್‌ವರ್ಕ್ ವಿಮರ್ಶಿಸಿ]
+    F --> I[ಸ್ಕ್ರಿಪ್ಟ್ಸ್ ಪರಿಶೀಲಿಸಿ]
+    F --> J[ಪೇಂಟ್ ಘಟನಗಳನ್ನು ಗುರುತಿಸಿ]
+    
+    G --> K{ದೀರ್ಘ ಕಾರ್ಯಗಳು?}
+    H --> L{ದೊಡ್ಡ ಆಸ್ತಿಗಳು?}
+    I --> M{ರೆಂಡರ್ ಬ್ಲಾಕಿಂಗ್?}
+    J --> N{ಖರ್ಚು ಹೆಚ್ಚು ಪೇಂಟುಗಳು?}
+    
+    K -->|ಹೌದು| O[ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿ]
+    L -->|ಹೌದು| P[ಆಸ್ತಿಗಳನ್ನು ಸಂಕುಚಿತಗೊಳಿಸಿ]
+    M -->|ಹೌದು| Q[ಅಸಿಂಕ್/ಡೆಫರ್ ಸೇರಿಸಿ]
+    N -->|ಹೌದು| R[ಶೈಲಿಗಳನ್ನು ಸರಳಗೊಳಿಸಿ]
+    
+    O --> S[ಮರು ಪರೀಕ್ಷೆ ಮಾಡಿ]
+    P --> S
+    Q --> S
+    R --> S
+    
+    style A fill:#e1f5fe
+    style F fill:#fff3e0
+    style S fill:#e8f5e8
+```
+## ಪ್ರೊಫೈಲ್ ಮಾರ್ಗದಲ್ಲಿ ಯಾವುವುದನ್ನು ನೋಡಬೇಕು
+
+ಪ್ರೊಫೈಲರ್ ಓಡಿಸುವುದು ಪ್ರಾರಂಭ ಮಾತ್ರ - ನಿಜವಾದ ಕೌಶಲ್ಯ ಅಂದರೆ ಆ ಬಣ್ಣೀಕಾರಿಯಾದ ಚಾರ್ಟುಗಳು ನಿಮ್ಮಿಗೆ ಏನನ್ನು ಹೇಳುತ್ತಿವೆ ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು. ಚಿಂತೆ ಬೇಡ, ನೀವು ಓದುತ್ತanonದೆ ಅಭ್ಯಾಸ ಮಾಡುತ್ತೀರಿ. ಅನುಭವಸಂಪನ್ನ ಡೆವಲಪರ್‌ಗಳು ಪೂರ್ಣ ಸಮಸ್ಯೆಗಳು ಆಗಲು ಮುಂಚೆ ಮುಂಜಾಗ್ರತೆಯ ಸೂಚಕಗಳನ್ನು ಗುರುತಿಸಬಲ್ಲರು.
+
+ನಮ್ಮ ಸಾಮಾನ್ಯ ಆರೋಪಿಗಳನ್ನು ಚರ್ಚಿಸೋಣ - ಕಾರ್ಯಕ್ಷಮತೆಯಲ್ಲಿ ತೊಂದರೆ ಉಂಟುಮಾಡುವ ಇವು ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗೆ ಶೀಘ್ರವಾಗಿ ಲ್ಮುಗ್ಗಿ ಬರುವವು. ಮರೀ ಕುರಿ ತನ್ನ ಪ್ರಯೋಗಾಲಯದಲ್ಲಿ ಕಿರಣಮಾನದ ಮಟ್ಟಗಳನ್ನು ಜಾಗರೂಕರಾಗಿ ನೋಡಿಕೊಂಡಂತೆ, ನಾವು ಕೂಡ ಇದನ್ನು ಗಮನಿಸಬೇಕು. ಮುಂಚೆಯೇ ಹಿಡಿದರೆ ನಿಮಗೂ (ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ) ಹೆಚ್ಚಿನ ದುರಂತ ತಪ್ಪುತ್ತದೆ.
+
+**ಆಸೆಟ್ ಅಳತೆಗಳು**: ವೆಬ್‌ಸೈಟ್‌ಗಳು ವರ್ಷಗಳಿಂದ 'ಭಾರಿ' ಆಗುತ್ತಿವೆ, ಮತ್ತು ಆ ಭಾರದ ಬಹುಭಾಗವು ಚಿತ್ರಗಳಿಂದ ಬರುತ್ತದೆ. ನಾವು ನಮ್ಮ ಡಿಜಿಟಲ್ ಸ್ಯುಟ್ಕೇಸ್‌ನಲ್ಲಿ ಹೆಚ್ಚಾಗಿ ತುಂಬುತ್ತಿರುವಂತೆ.
+
+✅ [Internet Archive](https://httparchive.org/reports/page-weight) ನೋಡಿ ಪುಟದ ಅಳತೆ ಹೇಗೆ ಬೆಳವಣಿಗೆ ಕಂಡಿದೆ - ಬಹಳ ತಿಳಿವಳಿಕೆಯಿದೆ.
+
+**ನಿಮ್ಮ ಆಸ್ತಿಗಳನ್ನು ತಗ್ಗಿಸಲು ವಿಧಾನಗಳು:**
+- **ಕಾಂಪ್ರೆಸೆಸ್** ಮಾಡಿ ಚಿತ್ರಗಳನ್ನು! WebP ಮುಂತಾದ ಆಧುನಿಕ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳು ಕಡಿಮೆ ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ನೀಡುತ್ತವೆ
+- **ಸರಿಯಾದ ಚಿತ್ರ ಗಾತ್ರ** ಪ್ರತಿಯೊಂದು ಸಾಧನಕ್ಕೆ ಸೇವ್ ಮಾಡಿ - ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್ ಚಿತ್ರಗಳನ್ನು ಫೋನ್‌ಗಳಿಗೆ ಕಳುಹಿಸಬೇಡಿ
+- **ಮಿನಿಫೈ** ಮಾಡಿ ನಿಮ್ಮ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ - ಪ್ರತೀ ಬೈಟ್ ಮುಖ್ಯ
+- **ಲೇಜಿ ಲೋಡಿಂಗ್** ಬಳಸಿ, ಚಿತ್ರಗಳನ್ನು ಬಳಕೆದಾರರು ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಡೌನ್‌ಲೋಡ್ ಆಗುವಂತೆ ಮಾಡಿ
+
+**DOM ಸಂಚಾರಗಳು**: ಬ್ರೌಸರ್ ನಿಮ್ಮ ಬರೆದ ಕೋಡಿಗನುಸಾರವಾಗಿ ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾದರಿಯನ್ನು ಕಟ್ಟಬೇಕು, ಆದ್ದರಿಂದ ಉತ್ತಮ ಪುಟ ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ನಿದರ್ಶನವಾಗಿ ನಿಮ್ಮ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಕನಿಷ್ಟವಾಗಿಡಿ, ಪುಟಕ್ಕೆ ಅಗತ್ಯವಿರುವ ಮತ್ತು ಅದನ್ನು ಶೈಲಿಸುವುದರಲ್ಲಿ ಮಾತ್ರ ಉಪಯೋಗಿಸಿ. ಈ ದೃಷ್ಟಿಯಿಂದ, ಪುಟಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಹೆಚ್ಚುವರಿ CSS ಅನ್ನು ಪರಿಷ್ಕರಿಸಬಹುದು; ಬರವಣಿಗೆಗೆ ಅಗತ್ಯವಿರುವ ಶೈಲಿಗಳು ಒಂದು ಪುಟದಲ್ಲಿ ಮಾತ್ರ ಬಳಕೆ ಮಾಡಬೇಕಾದರೆ ಮುಖ್ಯ ಶೈಲಿ ಪಟ್ಟಿಯಲ್ಲಿ ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.
+
+**DOM ಪರಿಷ್ಕರಣೆಯ ಮುಖ್ಯ ತಂತ್ರಗಳು:**
+- **HTML ಮೂಲಭೂತ ಅಂಶಗಳು ಮತ್ತು ನೆಸ್ಟಿಂಗ್ ಮಟ್ಟಗಳನ್ನು ಕನಿಷ್ಟಗೊಳಿಸುತ್ತದೆ**
+- **ಬಳಸದ CSS ನಿಯಮಗಳನ್ನು ತೆಗೆಯುತ್ತದೆ ಹಾಗೂ ಶೈಲಿ ಪತ್ರಿಕೆಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ಏಕೀಕರಿಸುತ್ತದೆ**
+- **ಪ್ರತಿ ಪುಟಕ್ಕೆ ಅಗತ್ಯವಿರುವುದನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡಲು CSS ಅನ್ನು ವ್ಯವಸ್ಥಿತಗೊಳಿಸುತ್ತದೆ**
+- **ಉತ್ತಮ ಬ್ರೌಸರ್ ಪಾರ್ಸಿಂಗ್ ನimalಿ HTML ಅನ್ನು ಸ್ತრუქტುರಿಂಗ್ ಮಾಡುತ್ತದೆ**
+
+**JavaScript**: ಪ್ರತಿಯೊಬ್ಬ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೆವಲಪರ್ 'ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್' ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಗಮನಿಸಬೇಕು, ಅವು DOM ಅನ್ನು ಪಾರದರ್ಶಕವಾಗಿ ಪರಿಶೀಲಿಸುವ ಮತ್ತು ಬ್ರೌಸರಿನಲ್ಲಿ ಚಿತ್ರಿಸುವ ಮೊದಲು ಲೋಡ್ ಆಗಬೇಕು. ನಿಮ್ಮ INLINE ಸ್ಕ್ರಿಪ್ಟ್ಗಳಿಗೆ `defer` ಬಳಸುವ ಬಗ್ಗೆ ಯೋಚಿಸಿ (Terrarium ಮ友情链接ೊದೆ ಮಾಡಿರುವಂತೆ).
+
+**ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಷ್ಕರಣಾ ತಂತ್ರಗಳು:**
+- **DOM ಪಾರ್ಸಿಂಗ್ ನಂತರ ಸ್ಕ್ರಿಪ್ಟ್ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು `defer` ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುತ್ತದೆ**
+- **ಕೋಡ್ ವಿಭಜನೆಯನ್ನು ಅಳವಡಿಸಿಕೊಡುತ್ತದೆ, ಕೇವಲ ಅಗತ್ಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ**
+- **ಮಹತ್ವಪೂರ್ಣವಲ್ಲದ ಕಾರ್ಯಾಚರಣೆಗಳಿಗೆ ಲೇಸಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ**
+- **ಭಾರದ್ ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳನ್ನು ತಗ್ಗಿಸುತ್ತದೆ ಸಾಧ್ಯವಾದರೆ**
+
+✅ ಸಾಮಾನ್ಯವಾಗಿ ಇರುವ ಪರಿಶೀಲನೆಗಳ ಬಗ್ಗೆ ತಿಳಿಯಲು ಕೆಲವು ಸೈಟ್ ಗಳನ್ನು [Site Speed Test website](https://www.webpagetest.org/) ನಲ್ಲಿ ಪ್ರಯತ್ನಿಸಿ
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಕಾರ್ಯಕ್ಷಮತೆ ಅರಿವು**: ವಿಸ್ತರಣೆ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನಿರ್ಮಿಸುವ ಮೊದಲು ಖಾತ್ರಿ ಪಡಿಸಿಕೊಳ್ಳಿ ನೀವು:
+- ✅ HTML ರಿಂದ ಪಿಕ್ಸೆಲ್ಗೆ ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾಥ್ ವಿವರಿಸಬಲ್ಲಿರಿ
+- ✅ ವೆಬ್ ಆ್ಯಮ್‌ಗಳನ್ನು ಸಾಮಾನ್ಯ ಕಾರ್ಯಕ್ಷಮತೆ ತೊಂದರೆಗಳು ಗುರುತಿಸಬಲ್ಲಿರಿ
+- ✅ ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪೇಜ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಬಲ್ಲಿರಿ
+- ✅ ಆಸ್ತಿ ಗಾತ್ರ ಹಾಗೂ DOM ಸಂಕೀರ್ಣತೆ ವೇಗದ ಮೇಲೆ ಹೇಗೆ ಪ್ರಭಾವ ಬೀರುತ್ತವೆ ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳಿರಿ
+
+**ತ್ವರಿತ ಸ್ವಯಂ-ಪರೀಕ್ಷೆ**: ನೀವು ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹೊಂದಿದ್ದರೆ ಏನು ಸಂಭವಿಸುತ್ತದೆ?
+*ಉತ್ತರ: ಬ್ರೌಸರ್ HTML ಅನ್ನು ಮುಂದುವರೆಸಲು ಮತ್ತು ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಮುಂಚಿತವಾಗಿ ಆ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕು*
+
+**ವಾಸ್ತವ ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರಭಾವ:**
+- **100ms ವಿಳಂಬ**: ಬಳಕೆದಾರರು ನಿಧಾನತೆಯನ್ನು ಗಮನಿಸುತ್ತಾರೆ
+- **1 ಸೆಕೆಂದಿನ ವಿಳಂಬ**: ಬಳಕೆದಾರರು ತಮ್ಮ ಗಮನ ಕಳೆದುಕೊಳ್ಳುತ್ತಾರೆ
+- **3+ ಸೆಕೆಂಡ್‌ಗಳು**: 40% ಬಳಕೆದಾರರು ಪುಟವನ್ನು ತೊರೆದಿಟ್ಟುಹೋಗುತ್ತಾರೆ
+- **ಮೊಬೈಲ್ ನೆಟ್‌ವರ್ಕ್‌ಗಳು**: ಕಾರ್ಯಕ್ಷಮತೆ ಇನ್ನಷ್ಟು ಮುಖ್ಯ
+
+ನೀವು ಬ್ರೌಸರ್‌ಗೆ ಕಳುಹಿಸುವ ಆಸ್ತಿಗಳನ್ನು ಹೇಗೆ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ ಎಂಬ ತಿಳಿವಳಿಕೆ ಹೊಂದಿದ್ದೀರಿ, ಈಗ ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಅಗತ್ಯವಿರುವ ಕೊನೆಯ ಕೆಲವು ವಿಷಯಗಳನ್ನು ನೋಡೋಣ:
+
+### ಬಣ್ಣವನ್ನು ಗಣನೆ ಮಾಡುವ ಫಂಕ್ಷನ್ ರಚಿಸಿ
+
+ಈಗ ನಾವು ಸಂಖ್ಯಾತ್ಮಕ ಡೇಟಾವನ್ನು ಅರ್ಥಪೂರ್ಣ ಬಣ್ಣಗಳಲ್ಲಿ ಪರಿವರ್ತಿಸುವ ಫಂಕ್ಷನ್ ರಚಿಸೋಣ. ಇದನ್ನು ಟ್ರಾಫಿಕ್ ಲೈಟ್ ವ್ಯವಸ್ಥೆಯಂತೆ ಪರಿಗಣಿಸಿ - ಸ್ವಚ್ಛ ವಿದ್ಯುತ್‌ಗೆ ಹಸು ಬಣ್ಣ, ಹೆಚ್ಚು ಕಾರ್ಬನ್ ತೀವ್ರತೆಗಾಗಿ ಕೆಂಪು ಬಣ್ಣ.
+
+ಈ ಫಂಕ್ಷನ್ ನಮ್ಮ API ನಿಂದ CO2 ಡೇಟಾವನ್ನು ತೆಗೆದುಕೊಂಡು ಪರಿಸರ ಪರಿಣಾಮವನ್ನು ಅತ್ಯುತ್ತಮವಾಗಿ ಸೂಚಿಸುವ ಬಣ್ಣವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ವಿಜ್ಞಾನಿಗಳು ಕಂಠದಂತ ಶಕ್ತಿಶಾಲಿಯ ಡೇಟಾ ಮಾದರಿಗಳನ್ನು ವರ್ತಿಸಲು ಬಣ್ಣ-ಕೋಡಿಂಗ್ ಬಳಸುವ ರೀತಿಯಾಗಿ - ಸಮುದ್ರ ತಾಪಮಾನಗಳಿಂದ ನಕ್ಷತ್ರಗಳ ರಚನೆಗೆ. ಇದನ್ನು `/src/index.js` ಯಲ್ಲಿ ಈಗಾಗಲೇ ನಾವು ರಚಿಸಿದ `const` ಚರಗಳ ನಂತರ ಸೇರಿಸೋಣ:
+
+```mermaid
+flowchart LR
+    A[CO2 ಮೌಲ್ಯ] --> B[ಅಂತಿಮ ಪ್ರಮಾಣ ಬಿಂದುವನ್ನು ಹುಡುಕಿ]
+    B --> C[ಪ್ರಮಾಣ ಸೂಚ್ಯಂಕ ಪಡೆಯಿರಿ]
+    C --> D[ಬಣ್ಣಕ್ಕೆ ನಕ್ಷೆ ಮಾಡು]
+    D --> E[ಹಿಂದಿನ ಭಾಗಕ್ಕೆ ಕಳುಹಿಸಿ]
+    
+    subgraph "ಬಣ್ಣ ಪ್ರಮಾಣ"
+        F["0-150: ಹಸಿರು (ಶುದ್ಧ)"]
+        G["150-600: ಹಳದಿ (ಮಧ್ಯಮ)"]
+        H["600-750: ಕಿತ್ತಳೆ (ಅತ್ಯಧಿಕ)"]
+        I["750+: ಬೂದು (ಅತ್ಯಂತ ಹೆಚ್ಚುವರಿ)"]
+    end
+    
+    subgraph "ಸಂದೇಶ ಕಳುಹಿಸುವಿಕೆ"
+        J[ವಿಷಯ ಸ್ಕ್ರಿಪ್ಟ್]
+        K[chrome.runtime.sendMessage]
+        L[ಹಿಂದಿನ ಭಾಗದ ಸ್ಕ್ರಿಪ್ಟ್]
+        M[ಐಕಾನ್ ನವೀಕರಣ]
+    end
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style E fill:#fff3e0
+```
+```javascript
+function calculateColor(value) {
+	// CO2 ತೀವ್ರತೆ ಪ್ರಮಾಣವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ (ಗ್ರಾಂಗಳ ಪ್ರತಿ ಕಿಲೋವಾಟ್‌ಘಂಟೆ)
+	const co2Scale = [0, 150, 600, 750, 800];
+	// ಹಸಿವು (ಶುದ್ಧ) ರಿಂದ ಕಂದು ಕAnonymous (ಅಧಿಕ ಕಾರ್ಬನ್) ಗೆ ಹೊಂದಾಣಿಕೆಯ ಬಣ್ಣಗಳು
+	const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	// ನಮ್ಮ ಇನ್‌ಪುಟ್‌ಗೆ ಅತ್ಯಂತ ಸನ್ನಿಹಿತ ಪ್ರಮಾಣ ಮೌಲ್ಯವನ್ನು ಕಂಡುಹಿಡಿ
+	const closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	
+	console.log(`${value} is closest to ${closestNum}`);
+	
+	// ಬಣ್ಣ ನಕ್ಷೆಗಾಗಿ ಸೂಚಿಗಾಗಿ ಕಂಡುಹಿಡು
+	const num = (element) => element > closestNum;
+	const scaleIndex = co2Scale.findIndex(num);
+
+	const closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	// ಹಿನ್ನಲೆಯಲ್ಲಿ ಕಾರ್ಯಚಟುವಟಿಕೆಗೆ ಬಣ್ಣ ನವೀಕರಣ ಸಂದೇಶವನ್ನು ಕಳುಹಿಸಿ
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+**ಈ ಛಟಾಕ್ಷಮ ಫಂಕ್ಷನ್ ವ್ಯಾಖ್ಯಾನದಾಂಶ:**
+- **ಎರಡು ಅನುರೂಪಿತ ಸರಣಿಗಳನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ** - ಒಬ್ಬರಿಗಾಗಿ CO2 ಮಟ್ಟಗಳು, ಮತ್ತೊಬ್ಬರಿಗಾಗಿ ಬಣ್ಣಗಳು (ಹಸಿರು = ಸ್ವಚ್ಛ, ಬೂದು = ಮಲಿನ!)
+- **ನಿಜವಾದ CO2 ಮೌಲ್ಯದ ಹತ್ತಿರದ ಹೊಂದಾಣಿಕೆಯನ್ನು ಹುಡುಕುತ್ತದೆ** ಕೆಲವು ಚುರುಕಾದ ಸರಣಿ ವಿಂಗಡಣೆಯನ್ನು ಬಳಸಿ
+- **findIndex() ವಿಧಾನ ಬಳಸಿ ಹೊಂದಾಣಿಕೆ ಬಣ್ಣವನ್ನು ಹಿಡಿಯುತ್ತದೆ**
+- **ನಮ್ಮ ಆಯ್ದ ಬಣ್ಣವೊಂದಿಗೆ ನಿರ್ಮಿತ Chrome ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಸಂದೇಶ ಕಳುಹಿಸುತ್ತದೆ**
+- **ಡಿಯುಟಿಫುಲ್ ಸ್ಟ್ರಿಂಗ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ಕ್ಕೆ ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್ (backticks) ಬಳಕೆಯಾಗಿದೆ**
+- **const ಘೋಷಣೆಗಳೊಂದಿಗೆ ಎಲ್ಲವನ್ನೂ ವ್ಯವಸ್ಥಿತಗೊಳಿಸುತ್ತದೆ**
+
+`chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) ನಿಮ್ಮ ವಿಸ್ತರಣೆಯ ನರ್ವಸ್ ಸಿಸ್ಟಮ್‌ನಂತೆ - ಇದು ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಸಂವಹನ ಮತ್ತು ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ:
+
+> "ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಪುಟವನ್ನು ಪಡೆಯಲು, ಮ್ಯಾನಿಫೆಸ್ಟ್ ವಿವರಗಳನ್ನು ಹಿಂತಿರುಗಿಸಲು, ಹಾಗೂ ಆಪ್ ಅಥವಾ ವಿಸ್ತರಣೆ ಜೀವನಚಕ್ರದಲ್ಲಿನ ಘಟನೆಗಳಿಗಾಗಿ ಕೇಳಲು ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಿಸಲು chrome.runtime API ಅನ್ನು ಬಳಸಿ. ನೀವು URL ಗಳುನ್ಪೂರ್ಣಯೋಜಿತ URLs ಗೆ ಪರಿವರ್ತಿಸಲು ಈ API ಕೂಡ ಬಳಸಬಹುದು."
+
+**ಕ್ರೋಮ್ ರನ್‌ಟೈಮ್ API उपयोगದ ಮುಖ್ಯ ಕಾರಣಗಳು:**
+- **ನಿಮ್ಮ ವಿಸ್ತರಣೆಯ ವಿಭಿನ್ನ ಭಾಗಗಳ ನಡುವೆ ಸಂವಹನ ಮುಕ್ತವಾಗಿ ಮಾಡಲು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತದೆ**
+- **ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸನ್ನು ಜಮಲಾಗದಂತೆ ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಕೆಲಸಗಳು ನಿರ್ವಹಿಸುತ್ತದೆ**
+- **ನಿಮ್ಮ ವಿಸ್ತರಣೆಯ ಜೀವನಚಕ್ರದ ಘಟನೆಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ**
+- **ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳ ನಡುವೆ ಸಂದೇಶ ವಿನಿಮಯ ಸುಲಭಗೊಳಿಸುತ್ತದೆ**
+
+✅ ನೀವು Edge ಗಾಗಿ ಈ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತಿದ್ದರೆ, ನೀವು ಕ್ರೋಮ್ API ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೀರಂತೆ ಆಶ್ಚರ್ಯವಾಗಬಹುದು. ಹೊಸ Edge ಬ್ರೌಸರ್ ಸಂಸ್ಕರಣೆಗಳು ಕ್ರೋಮಿಯಂ ಎಂಜಿನ್ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಆದ್ದರಿಂದ ನೀವು ಈ ಸಾಧನಗಳನ್ನು ಬಳಕೆ ಮಾಡಬಹುದು.
+
+```mermaid
+architecture-beta
+    group browser(logos:chrome)[ಬ್ರೌಸರ್]
+    
+    service popup(logos:html5)[ಪಾಪ್ಅಪ್ UI] in browser
+    service content(logos:javascript)[ಸಾಮಗ್ರಿ ಸ್ಕ್ರಿಪ್ಟ್] in browser
+    service background(database)[ಹಿನ್ನಲೆ ಸ್ಕ್ರಿಪ್ಟ್] in browser
+    service api(logos:api)[ಬಾಹ್ಯ API] in browser
+    
+    popup:R -- L:content
+    content:R -- L:background
+    background:T -- B:api
+    content:T -- B:api
+    
+    junction junctionCenter in browser
+    popup:R -- L:junctionCenter
+    junctionCenter:R -- L:background
+```
+> **ಪ್ರೋ ಟಿಪ್**: ನೀವು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯ ಪ್ರೊಫೈಲಿಂಗ್‌ಗಾಗಿ ಬಯಸಿದರೆ, ವಿಸ್ತರಣೆ ಒಳಗಿನ ಡೆವ್ ಟೂಲ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸಿ, ಏಕೆಂದರೆ ಅದು ಸ್ವಂತ ಬ್ರೌಸರ್ ಘಟಕವಾಗಿದೆ. ಇದು ವಿಸ್ತರಣೆ-ನಿರ್ದಿಷ್ಟ ಕಾರ್ಯಕ್ಷಮತೆ ಮೀಟ್ರಿಕ್ಸ್‌ಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ.
+
+### ಡೀಫಾಲ್ಟ್ ಐಕಾನ್ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಿ
+
+ನಿಜವಾದ ಡೇಟಾವನ್ನು ಪಡೆಯುವುದಕ್ಕೆ ಮುಂಚೆ, ನಾವು ವಿಸ್ತರಣೆಗೆ ಪ್ರಾರಂಭಿಕ ಸ್ಥಿತಿ ಒದಗಿಸೋಣ. ಯಾರಿಗೂ ಖಾಲಿ ಅಥವಾ ಮುರಿದಂತೆ ಕಾಣುವ ಐಕಾನ್ ಇಷ್ಟವಿಲ್ಲ. ನಾವು ಹಸಿರು ಬಣ್ಣದಿಂದ ಪ್ರಾರಂಭಿಸೋಣ, ಇದರಿಂದ ಬಳಕೆದಾರರು ವಿಸ್ತರಣೆ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿದ ಕ್ಷಣದಿಂದಲೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ ಎಂದು ತಿಳಿಯುತ್ತಾರಂತೆ.
+
+ನಿಮ್ಮ `init()` ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಆ ಡೀಫಾಲ್ಟ್ ಹಸಿರು ಐಕಾನ್ ಹೊಂದಿಸಿ:
+
+```javascript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+	value: {
+		color: 'green',
+	},
+});
+```
+
+**ಈ ಆರಂಭಿಕರಣದಿಂದ ಎನು ಸಾಧಿಯಾಗುತ್ತದೆ:**
+- **ನಿರಪೇಕ್ಷ ಹಸಿರು ಬಣ್ಣವನ್ನು ಡೀಫಾಲ್ಟ್ ಸ್ಥಿತಿಯಾಗಿ ಹೊಂದಿಸುತ್ತದೆ**
+- **ವಿಸ್ತರಣೆ ಲೋಡ್ ಆಗುವಾಗ ತಕ್ಷಣಿಕ ದೃಷ್ಟಿಗೋಚರ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ**
+- **ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳೊಂದಿಗೆ ಸಂವಹನ ಮಾದರಿಯನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ**
+- **ಡೇಟಾ ಲೋಡ್ ಆಗುವ ಮೊದಲು ಬಳಕೆದಾರರು ಕಾರ್ಯಾನುಷ್ಠಾನ ವಿಸ್ತರಣೆಯನ್ನು ನೋಡುತ್ತಾರೆ**
+
+### ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆದಿರಿ, ಕರೆ ಕಾರ್ಯಗತಗೊಳಿಸಿ
+
+ಈಗ ನಾವು ಎಲ್ಲವನ್ನು ಸಂಪರ್ಕಿಸೋಣ, ಆದ್ದರಿಂದ ಹೊಸ CO2 ಡೇಟಾ ಬಂದಿದೆ, ನಿಮ್ಮ ಐಕಾನ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಯಾದ ಬಣ್ಣದಿಂದ ಅಪ್ಡೇಟ್ ಆಗುತ್ತದೆ. ಇದು ವಿದ್ಯುತ್ ಸಾಧನದ ಕೊನೆಯ ಸರ್ಕ್ಯೂಟ್ ಸಂಪರ್ಕಿಸುವಂತಹದ್ದು - ಎಲ್ಲ ವಿಭಿನ್ನ ಅಂಗಾಂಶಗಳು ಒಂದೇ ವ್ಯವಸ್ಥೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಶುರುವಾಗುತ್ತದೆ.
+
+API ನಿಂದ CO2 ಡೇಟಾ ಪಡೆದ ಮನೆಯಲ್ಲಿ ಈ ಸಾಲನ್ನು ಸೇರಿಸಿ:
+
+```javascript
+// API ನಿಂದ CO2 ಮಾಹಿತಿಯನ್ನು ಪಡೆದುಕೊಳ್ಳುವುದರ ನಂತರ
+// let CO2 = data.data[0].intensity.actual;
+calculateColor(CO2);
+```
+
+**ಈ ಏಕೀಕರಣವು ಸಾಧಿಸುವುದು:**
+- **API ಡೇಟಾ ಹರಿವನ್ನು ದೃಶ್ಯ ಸೂಚಕ ವ್ಯವಸ್ಥೆಗೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ**
+- **ಹೊಸ ಡೇಟಾ ಬಂದಾಗ ಐಕಾನ್ ಅಪ್ಡೇಟ್ ಆಗಲು ಪ್ರೇರೇಪಿಸುತ್ತದೆ**
+- **ಪ್ರಸ್ತುತ ಕಾರ್ಬನ್ ತೀವ್ರತೆಯ ಆಧಾರದ ಮೇಲೆ ನಿಜ ಕಾಲದ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಖಾತ್ರಿ ಪಡಿಸುತ್ತದೆ**
+- **ಡೇಟಾ ಪಡೆಯುವಿಕೆ ಮತ್ತು ಪ್ರದರ್ಶನ ತಂತ್ರಾಂಶಗಳ ಮಧ್ಯೆ ಪ್ರತ್ಯೇಕತೆ ಉಳಿಸುತ್ತದೆ**
+
+ಕೊನೆಗೆ, `/dist/background.js` ನಲ್ಲಿ ಈ ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಕ್ರಿಯೆಗಳ ಕರೆಗಳಿಗೆ ಶ್ರೋತೃನ್ ಸೇರಿಸಿ:
+
+```javascript
+// ವಿಷಯ ಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ಸಂದേശಗಳನ್ನು ಕೇಳಿ
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.action.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+
+// ಕ್ಯಾನ್ವಾಸ್ API ಬಳಸಿ động ಐಕಾನ್ ಅನ್ನು ಬಿಡಿಸಿ
+// energy lollipop ವಿಸ್ತರಣೆನಿಂದ ಸಾಲಾಗಿ - ಚೆನ್ನಾದ ವೈಶಿಷ್ಟ್ಯ!
+function drawIcon(value) {
+	// ಉತ್ತಮ ಪ್ರದರ್ಶನಕ್ಕಾಗಿ ಒಂದು ಆಫ್‌ಸ್ಕ್ರೀನ್ ಕ್ಯಾನ್ವಾಸ್ ತಯಾರಿಸಿ
+	const canvas = new OffscreenCanvas(200, 200);
+	const context = canvas.getContext('2d');
+
+	// ಕಾರ್ಬನ್ ತೀವ್ರತೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಬಣ್ಣದ ವೃತ್ತವನ್ನು ಬಿಡಿಸಿ
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	// ಬ್ರೌಸರ್ ಐಕಾನ್ ಗಾಗಿ ಚಿತ್ರ ಡೇಟಾವನ್ನು ಹಿಂತಿರುಗಿಸಿ
+	return context.getImageData(50, 50, 100, 100);
+}
+```
+
+**ಈ ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- **ನಿಮ್ಮ ಮುಖ್ಯ ಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ಸಂದೇಶಗಳನ್ನು ಕೇಳುತ್ತದೆ (ರಿಸೆಪ್ಷನಿಸ್ಟ್ ಫೋನ್ಗಳು ಸ್ವೀಕರಿಸುವಂತಿದೆ)**
+- **'updateIcon' ವಿನಂತಿಗಳನ್ನು ಪ್ರಕ್ರಿಯೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಟೂಲ್‌ಬಾರ್ ಐಕಾನ್ ಬದಲಾಯಿಸುತ್ತದೆ**
+- **Canvas API ಬಳಸಿ ಹೊಸ ಐಕಾನ್ಗಳನ್ನು ರಚಿಸುತ್ತದೆ**
+- **ಸರಳ ಬಣ್ಣದ ವೃತ್ತವನ್ನು ಬಿಡಿಸುತ್ತದೆ ಇದು ಪ್ರಸ್ತುತ ಕಾರ್ಬನ್ ತೀವ್ರತೆಯನ್ನು ತೋರಿಸುತ್ತದೆ**
+- **ನಿಮ್ಮ ಬ್ರೌಸರ್ ಟೂಲ್‌ಬಾರ್ ಅನ್ನು ಹೊಸ ಐಕಾನ್‌తో ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ**
+- **UI ಬ್ಲಾಕಿಂಗ್ ಇಲ್ಲದೆ ಹೃದಯಸ್ಪಂದನ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ OffscreenCanvas ಬಳಕೆ ಮಾಡುತ್ತದೆ**
+
+✅ ನೀವು Canvas API ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳಲು [Space Game ಪಾಠಗಳು](../../6-space-game/2-drawing-to-canvas/README.md) ನೋಡಿ.
+
+```mermaid
+sequenceDiagram
+    participant CS as ವಿಷಯ ಸ್ಕ್ರಿಪ್ಟ್
+    participant BG as ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್
+    participant Canvas as ಆಫ್‌ಸ್ಕ್ರೀನ್ ಕ್ಯಾನ್ವಾಸ್
+    participant Browser as ಬ್ರೌಸರ್ ಐಕಾನ್
+    
+    CS->>BG: sendMessage({action: 'updateIcon', color})
+    BG->>Canvas: new OffscreenCanvas(200, 200)
+    Canvas->>Canvas: getContext('2d')
+    Canvas->>Canvas: beginPath() + fillStyle + arc()
+    Canvas->>Canvas: fill() + getImageData()
+    Canvas->>BG: Return image data
+    BG->>Browser: chrome.action.setIcon(imageData)
+    Browser->>Browser: ಟೂಲ್‌ಬಾರ್ ಐಕಾನ್ ನವೀಕರಿಸಿ
+```
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಪೂರ್ಣ ವಿಸ್ತರಣೆ ಅರಿವು**: ಸಂಪೂರ್ಣ ವ್ಯವಸ್ಥೆಯ ಮೇಲೆ ನಿಮ್ಮ ನಿಪುಣತೆ ಪರಿಶೀಲಿಸಿ:
+- ✅ ವಿಭಿನ್ನ ವಿಸ್ತರಣೆ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳ ನಡುವೆ ಸಂದೇಶ ವಿನಿಮಯ ಹೇಗೆ ನಡೆಯುತ್ತದೆ?
+- ✅ ಕಾರ್ಯಕ್ಷಮತೆಗೆ OffscreenCanvas ಯಾಕೆ ಸಾಮಾನ್ಯ Canvas ಬದಲು ಬಳಸಲಾಗುತ್ತದೆ?
+- ✅ ಕ್ರೋಮ್ ರಂಟೈಮ್ API ವಿಸ್ತರಣೆ ಸ್ಥಾಪನೆಯಲ್ಲಿ ಯಾವ ಭಾಗವಹnahme ಮಾಡುತ್ತದೆ?
+- ✅ ಬಣ್ಣ ಲೆಕ್ಕ ಹಾಕುವ ఆల್ಗೋರಿದಮ್ ಡೇಟಾವನ್ನು ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಗೆ ಹೇಗೆ ನಕ್ಷೆಗೊಳಿಸುತ್ತದೆ?
+
+**ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಗಣನೆಗಳು**: ನಿಮ್ಮ ವಿಸ್ತರಣೆ ಈಗ ತೋರಿಸುತ್ತದೆ:
+- **ಕಾರ್ಯಕ್ಷಮ ಸಂದೇಶ ವಿನಿಮಯ**: ಸ್ಕ್ರಿಪ್ಟ್ ಸಂದರ್ಭಗಳ ನಡುವೆ ಸ್ವಚ್ಛ ಸಂವಹನ
+- **ಆಪ್ಟಿಮೈಸ್ ರೆಂಡರಿಂಗ್**: OffscreenCanvas UI ತಡೆಕಟ್ಟುವಿಕೆಯನ್ನು ತಡೆಯುತ್ತದೆ
+- **ರಿಯಲ್ ಟೈಮ್ ಅಪ್ಡೇಟ್ಸ್**: ಜೀವಂತ ಡೇಟಾದ ಆಧಾರದ ಮೇಲೆ ಐಕಾನ್ ಬದಲಾವಣೆಗಳು
+- **ಸ್ಮೃತಿ ನಿರ್ವಹಣೆ**: ಸರಿಯಾದ ಕ್ಲೀನಪ್ ಮತ್ತು ಸಂಪನ್ಮೂಲ ಹ್ಯಾಂಡ್ಲಿಂಗ್
+
+**ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು ಪರೀಕ್ಷಿಸುವ ಸಮಯ:**
+- **ಎಲ್ಲವನ್ನೂ ನಿರ್ಮಿಸಿ** `npm run build`ಯೊಂದಿಗೆ
+- ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು **ಪುನರಾರಂಭಿಸಿ** (ಈ ಹಂತವನ್ನು ಮರೆಯಬೆಡಿ)
+- ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು **ತರೆದುಕೊಳ್ಳಿ** ಮತ್ತು ಆ ಐಕಾನ್ ಬಣ್ಣ ಬದಲಾವಣೆಯನ್ನು ನೋಡಿ
+- ಜಾಗತಿಕ ಮೂಲದಿಂದ ನಿಜವಾದ ಕಾರ್ಬನ್ ಡೇಟಾಕೆ ಇದು ಹೇಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ ಎಂದು **ಪರಿಶೀಲಿಸಿ**
+
+ಈಗ ನೀವು ಎಷ್ಟು ಲಾಂಡ್ರಿ ಮಾಡುವುದಕ್ಕೆ ಸರಿಯಾದ ಸಮಯವೋ ಅಥವಾ ಶುದ್ಧ ಮತ್ತು ಶಕ್ತಿ ಬಾಳಿಕೆಗಾಗಿ ನಿರೀಕ್ಷಿಸಬೇಕೋ ಒಂದೇ ನೋಟದಲ್ಲಿ ತಿಳಿದುಕೊಳ್ಳಬಹುದು. ನೀವು ನಿಜವಾದ ಉಪಯುಕ್ತ ವಸ್ತುವನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಿ ಮತ್ತು ಬ್ರೌಸರ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ತಿಳಿದುಕೊಂಡಿದ್ದೀರಿ.
+
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ಕೆಳಗಿನ ಚಾಲೆಂಜ್ ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿರಿ:
+
+**ವಿವರಣೆ:** ವಿಸ್ತರಣೆ ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರಿಂಗ್ ಸಾಮರ್ಥ್ಯವನ್ನು ಸುಧಾರಿಸುವಂತೆ ವಿಶೇಷತೆ ಸೇರಿಸಿ, ಇದು ವಿಸ್ತರಣೆ ವಿವಿಧ ಘಟಕಗಳ ಲೋಡ್ ಸಮಯಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ತೋರಿಸುತ್ತದೆ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗೆ ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರಿಂಗ್ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿ, ಇದು API ನಿಂದ CO2 ಡೇಟಾವನ್ನು ಪಡೆಯಲು, ಬಣ್ಣಗಳನ್ನು ಲೆಕ್ಕ ಹಾಕಲು ಮತ್ತು ಐಕಾನ್ ನವೀಕರಿಸಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಮર્યಾದಿಸುತ್ತದೆ ಮತ್ತು ದಾಖಲಿಸುತ್ತದೆ. `performanceTracker` ಎಂಬ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಿ, ಇದು Performance API ಬಳಸಿ ಈ ಕಾರ್ಯಗಳನ್ನು ಅಳೆಯುತ್ತದೆ ಮತ್ತು ಬ್ರೌಸರ್ ಕಂಸೋಲ್‌ನಲ್ಲಿ ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್‌ಗಳ ಜತೆಗೆ ಅವಧಿ ಮಾನದಂಡಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
+
+[ಎಜೆಂಟ್ ಮೋಡ್ ಕುರಿತು ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳಿ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಇಲ್ಲಿ.
+
+## 🚀 ಚಾಲೆಂಜ್
+
+ಇದು ಒಂದು ರೋಚಕ ತನಿಖಾ ಕಾರ್ಯ: ವರ್ಷಗಳಿಂದ ಇರುತ್ತಾ ಇದ್ದ ಕೆಲವು open source ವೆಬ್ ಸೈಟ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿ (ವಿಕಿಪೀಡಿಯಾ, ಗಿಟ್‌ಹಬ್, ಸ್ಟಾಕ್ ಓವರ್‌ಫ್ಲೋ ಇತ್ಯಾದಿ) ಮತ್ತು ಅವರ ಕಾಮಿಟ್ ಇತಿಹಾಸವನ್ನು ವಿಶ್ಲೇಷಿಸಿ. ಅವರು ಕಾರ್ಯಕ್ಷಮತೆಯಲ್ಲಿ ಯಾವಾಗ ಎಲ್ಲಿ ಸುಧಾರಣೆಗಳನ್ನು ಮಾಡಿಕೊಂಡಿದ್ದಾರೆ ಎಂದು ನಿಮ್ಮಿಗೆ ಕಂಡುಬರುತ್ತದೆಯೇ? ಯಾವ ಸಮಸ್ಯೆಗಳು ಅವತಲ-ಹೊರತಾಗುತ್ತಿವೆ?
+
+**ನಿಮ್ಮ ತನಿಖಾ ವಿಧಾನ:**
+- ಕಾಮಿಟ್ ಸಂದೇಶಗಳಲ್ಲಿ "optimize", "performance", ಅಥವಾ "faster" ಎಂಬ ಪದಗಳನ್ನು **ಹುಡುಕು**
+- ಮಾದರಿಗಳನ್ನು ಹುಡುಕಿ - ಅವರು ಅದೇ ರೀತಿಯ ಸಮಸ್ಯೆಗಳನ್ನು ನಿರಂತರವಾಗಿ ಸರಿಪಡಿಸುತ್ತಿರಬಹುದಾ?
+- ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿಧಾನಗೊಳಿಸುವ ಸಾಮಾನ್ಯ ಕಾರಣಗಳನ್ನು **ಗುರುತಿಸಿ**
+- ನೀವು ಕಂಡುಕೊಂಡದ್ದನ್ನು ಹಂಚಿಕೊಳ್ಳಿ - ಇತರ ಡೆವಲಪರ್ಗಳು ನೈಜ-ಲೋಕ ಉದಾಹರಣೆಗಳಿಂದ ಕಲಿಯುತ್ತಾರೆ
+
+## ಉಪನ್ಯಾಸಶೇಷ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಉಪನ್ಯಾಸಶೇಷ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/28)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಾಭಿಮಾನ ಅಧ್ಯಯನ
+
+[ಕಾರ್ಯಕ್ಷಮತೆ ನ್ಯೂಸ್‌ಲೆಟ್ಟರ್‌ಗೆ ಸೈನ್ ಅಪ್ ಮಾಡಿ](https://perf.email/)
+
+ತೆರೆದ ಬ್ರೌಸರ್ ಪರೀಕ್ಷಾ ಉಪಕರಣಗಳ ಕಾರ್ಯಕ್ಷಮತೆ ಟ್ಯಾಬ್ಗಳ ಮೂಲಕ ಬ್ರೌಸರ್‌ಗಳು ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೇಗೆ ಅಳೆಯುತ್ತವೆ ಎಂಬುದನ್ನು ನೋಡಿ. ನಿಮಗೆ ಯಾವುದೇ ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸಗಳು ಕಂಡುಬಂದವೆಯೇ?
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು**
+- [ ] ಬ್ರೌಸರ್ ಟಾಸ್ಕ್ ಮ್ಯಾನೇಜರ್ (ಶಿಫ್ಟ್+ಎಸ್ಕೇ ಕ್ರೋಮ್‌ನಲ್ಲಿ) ತೆರೆಯಿರಿ ವಿಸ್ತರಣೆಯ ಸಂಪನ್ಮೂಲ ಬಳಕೆಯನ್ನು ನೋಡಲು
+- [ ] ಡೆವ್‌ಟೂಲ್ಸ್ ಕಾರ್ಯಕ್ಷಮತೆ ಟ್ಯಾಬ್ ಬಳಸಿ ವೆಬ್‌ಪೇಜ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ದಾಖಲೆ ಮತ್ತು ವಿಶ್ಲೇಷಿಸಿ
+- [ ] ಬ್ರೌಸರ್‌ನ ವಿಸ್ತರಣೆ ಪುಟವನ್ನು ಪರಿಶೀಲಿಸಿ ಯಾವ ವಿಸ್ತರಣೆಗಳು ಸ್ಟಾರ್ಟ್ ಅಪ್ ಸಮಯವನ್ನು ಪ್ರಭಾವಿಸುತ್ತಿವೆ ಎಂದು
+- [ ] ಕಾರ್ಯಕ್ಷಮತೆ ವ್ಯತ್ಯಾಸಗಳನ್ನು ನೋಡಲು ತಾತ್ಕಾಲಿಕವಾಗಿ ವಿಸ್ತರಣೆಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವ ಪ್ರಯತ್ನ ಮಾಡಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದು**
+- [ ] ಉಪನ್ಯಾಸ ನಂತರದ ಕುಯಿಜ್ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಸಿದ್ಧಾಂತಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗೆ ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್ ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ಕಾರ್ಯಕ್ಷಮ ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಕಾರ್ಯಗಳಿಗೆ browser.alarms ಬಳಸಲು ಕಲಿಯಿರಿ
+- [ ] ಕಾಂಟೆಂಟ್ ಸ್ಕ್ರಿಪ್ಟುಗಳು ಮತ್ತು ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳ ನಡುವೆ ಸಂದೇಶ ವಿನಿಮಯ ಅಭ್ಯಾಸ ಮಾಡಿ
+- [ ] ನಿಮ್ಮ ವಿಸ್ತರಣೆಯ ಸಂಪನ್ಮೂಲ ಬಳಕೆಯನ್ನು ಅಳೆಯಿರಿ ಮತ್ತು ಸುಧಾರಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರನಾಟಕ ಕಾರ್ಯಕ್ಷಮತೆ ಯಾತ್ರೆ**
+- [ ] ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಕಾರ್ಯಕ್ಷಮತೆ ಹೊಂದಿರುವ ಉನ್ನತ-ಕಾರ್ಯಕ್ಷಮ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಸರ್ವಿಸ್ ವರ್ಕರ್‌ಗಳು ಮತ್ತು ಆಧುನಿಕ ವಿಸ್ತರಣೆ ಸ್ಥಾಪನೆ ಹೇಗೆ ಇರುತ್ತದೆ ಕಲಿಯಿರಿ
+- [ ] ದತ್ತಾಂಶ ಸಮನ್ವಯ ಮತ್ತು ಕ್ಯಾಷಿಂಗ್ ತಂತ್ರಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಜಾರಿಗೆ ತರಿರಿ
+- [ ] ವಿಸ್ತರಣೆ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸುಧಾರಣೆಗೆ ಜುದಾಯಿಸಿದ ಡಿಬಗ್ಗಿಂಗ್ ತಂತ್ರಗಳನ್ನು ಕಲಿಯಿರಿ
+- [ ] ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸಂಪನ್ಮೂಲ ಪರಿಣಾಮಕಾರಿತ್ವ ಎರಡಕ್ಕೂ ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿ
+- [ ] ವಿಸ್ತರಣೆ ಕಾರ್ಯಕ್ಷಮತೆ ದೃಶ್ಯಾಂಶಗಳಿಗಾಗಿ ವ್ಯಾಪಕ ಪರೀಕ್ಷೆಗಳನ್ನು ರಚಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ-ನಾಟಕ ಸುಧಾರಣೆ ಮೇಸ್ಟರಿ**
+- [ ] ಎಂಟರ್ಪ್ರೈಸು-ತಗ್ಗಿತ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳನ್ನು ಕಾರ್ಯಕ್ಷಮತೆಯೊಂದಿಗೆ ನಿರ್ಮಿಸಿ
+- [ ] ವೆಬ್ ವರ್ಕರ್‌ಗಳು, ಸರ್ವಿಸ್ ವರ್ಕರ್‌ಗಳು ಮತ್ತು ಆಧುನಿಕ ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಬಗ್ಗೆ ಕಲಿಯಿರಿ
+- [ ] ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆಯ ಮೇಲೆ ಕೇಂದ್ರೀಕೃತ open source ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿರಿ
+- [ ] ಬ್ರೌಸರ್ ಆಂತರಿಕ ಮತ್ತು ಉನ್ನತ ಡಿಬಗ್ಗಿಂಗ್ ತಂತ್ರಗಳುಮ್ಮೇಲ್ಮಟ್ಟ ಕಮಾಂಡು ಪಡೆದುಕೊಳ್ಳಿ
+- [ ] ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರಿಂಗ್ ಉಪಕರಣಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸ ಮಾರ್ಗದರ್ಶಿಗಳನ್ನು ರಚಿಸಿ
+- [ ] ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಸುಧಾರಿಸುವ ಪರಿಣತಿ ಹೊಂದಿರಿ
+
+## 🎯 ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಮೇಸ್ಟರಿ ಕಾಲರೇಖೆ
+
+```mermaid
+timeline
+    title ಸಂಪೂರ್ಣ ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿ ಪ್ರಗತಿ
+    
+    section ಕಾರ್ಯಕ್ಷಮತೆ ಮೂಲತತ್ತ್ವಗಳು (20 ನಿಮಿಷಗಳು)
+        ಬ್ರೌಸರ್ ಪ್ರೊಫೈಲಿಂಗ್: ಡೆವ್‌ಟೂಲ್‌ಗಳ ಪರಿಣತಿ
+                         : ವೇಳಾಸಾರಾಂಶ ವಿಶ್ಲೇಷಣೆ
+                         : ಬಾಟಲ್‌ನೆಕ್ ಗುರುತುಹಿಡಿಯುವುದು
+                         : ಗುರ್ತಿಸುವಿಕೆಯ ತೀವ್ರ ಮಾರ್ಗ
+        
+    section ಹಿನ್ನೆಲೆ ಕಾರ್ಯಗಳು (25 ನಿಮಿಷಗಳು)
+        ವಿಸ್ತರಣೆ ವಾಸ್ತುಶಿಲ್ಪ: ಸಂದೇಶ ಪ್ರಸರಣ
+                              : ಹಿನ್ನೆಲೆ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು
+                              : ರನ್‌ಟೈಮ್ API ಬಳಕೆ
+                              : ಅತಿಕ್ರಮ ಸಂವಹನ
+        
+    section ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯಾ (30 ನಿಮಿಷಗಳು)
+        ಡೈನಾಮಿಕ್ UI: رنگ ಲೆಕ್ಕಾಚಾರ ಅಲ್ಗಾರಿಥಂಗಳು
+                  : ಕ್ಯಾನ್ವಾಸ್ API ಏಕೀಕರಣ
+                  : ಐಕಾನ್ ತಯಾರಿ
+                  :实时 ನವೀಕರಣ
+        
+    section ಕಾರ್ಯಕ್ಷಮತೆ ಉತ್ತಮೀಕರಣ (35 ನಿಮಿಷಗಳು)
+        ಪರಿಣಾಮಕಾರಿ ಕೋಡ್: ಅಸಿಂಕ್ ಕಾರ್ಯಾಚರಣೆಗಳು
+                      : ಮೆಮೊರಿ ನಿರ್ವಹಣೆ
+                      : ಸಂಪನ್ಮೂಲ ಶಿಫಾರಸು
+                      : ಕಾರ್ಯಕ್ಷಮತೆ ನಿಗಾ
+        
+    section ಉತ್ಪಾದನೆ ಸಿದ್ಧ (45 ನಿಮಿಷಗಳು)
+        ಪೊಲಿಶ್ & ಪರೀಕ್ಷೆ: ಕ್ರಾಸ್-ಬ್ರೌಸರ ಜೊತೆಗೊಳ್ಳುವಿಕೆ
+                        : ದೋಷ ನಿರ್ವಹಣೆ
+                        : ಬಳಕೆದಾರಅನುಭವ
+                        : ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಶೀಲನೆ
+        
+    section ಅಗ್ರಗಣ್ಯ ವೈಶಿಷ್ಟ್ಯಗಳು (1 ವಾರ)
+        ವಿಸ್ತರಣೆ ಪರಿಸರ ವ್ಯವಸ್ಥೆ: ಕ್ರೋಮ್ ವೆಬ್ ಸ್ಟೋರ್
+                           : ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ
+                           : ವಿಶ್ಲೇಷಣೆ ಏಕೀಕರಣ
+                           : ನವೀಕರಣ ನಿರ್ವಹಣೆ
+        
+    section ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ (2 ವಾರಗಳು)
+        ಸಂಸ್ಥೆ ವಿಸ್ತರಣೆಗಳು: ತಂಡ ಸಹಕಾರ
+                             : ಕೋಡ್ ವಿಮರ್ಶೆಗಳು
+                             : CI/CD ಕಾರ್ಯಪಥಗಳು
+                             : ಭದ್ರತಾ ಪರಿಶೀಲನೆಗಳು
+        
+    section ತಜ್ಞ ನಿಪುಣತೆ (1 ತಿಂಗಳು)
+        ವೇದಿಕೆ ಪರಿಣತಿ: ಪ್ರಗತ ಕ್ರೋಮ್ APIಗಳು
+                          : ಕಾರ್ಯಕ್ಷಮತೆ ಉತ್ತಮೀಕರಣ
+                          : ವಾಸ್ತುಶಿಲ್ಪ ಮಾದರಿಗಳು
+                          : ಮುಕ್ತ ಮೂಲ ಕೊಡುಗೆ
+```
+### 🛠️ ನಿಮ್ಮ ಪೂರ್ಣ ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣ ಸಮಗ್ರ
+
+ಈ ತ್ರಿಲಾಜಿಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನೀವು ಈಗ ಸಂಪೂರ್ಣವಾಗಿ ನಿರ್ವಹಿಸಲು ಸಮರ್ಥರಾಗಿದ್ದೀರಿ:
+- **ಬ್ರೌಸರ್ ಸ್ಥಾಪನೆ**: ವಿಸ್ತರಣೆಗಳು ಬ್ರೌಸರ್ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಹೇಗೆ ಸಂಯೋಜಿತವಾಗುತ್ತವೆ ಎಂಬ ಆಳವಾದ ಅರ್ಥ
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರೊ파일ಿಂಗ್**: ಡೆವಲಪರ್ ಉಪಕರಣಗಳಿಂದ ಬಾಟಲ್‌ನೆಕ್‌ಗಳನ್ನು ಗುರುತಿಸಿ ಸರಿಪಡಿಸುವ ಸಾಮರ್ಥ್ಯ
+- **ಅಸಿಂಕ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಪ್ರತಿಕ್ರಿಯಾಶೀಲ, ತಡೆರಹಿತ ಕಾರ್ಯಗಳಿಗೆ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿಗಳು
+- **API ಸಂಯೋಜನೆ**: ಪ್ರಾಮಾಣೀಕರಣ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆ ಒಳಗೊಂಡ ಬಾಹ್ಯ ಡೇಟಾ ಪಡೆಯುವಿಕೆ
+- **ದೃಶ್ಯ ವಿನ್ಯಾಸ**: ಡೈನಾಮಿಕ್ UI ಅಪ್ಡೇಟ್ಗಳು ಮತ್ತು ಕ್ಯಾನ್ವಾಸ್ ಆಧಾರಿತ ಗ್ರಾಫಿಕ್ಸ್ ಜನರೇಷನ್
+- **ಸಂದೇಶ ವಿನಿಮಯ**: ವಿಸ್ತರಣೆ ಸ್ಥಾಪನೆಯಲ್ಲಿನ ಇಂಟರ್ಸ್‌ಕ್ರಿಪ್ಟ್ ಸಂವಹನ
+- **ಬಳಕೆದಾರ ಅನುಭವ**: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು, ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಬುದ್ಧಿಮತ್ತೆಯ ಇಂಟರಾಕ್ಷನ್‌ಗಳು
+- **ಉತ್ಪಾದನಾ ಕೌಶಲ್ಯಗಳು**: ನೈಜ-ಜಗತ್ತಿನ ನಿರ್ವಹಣೆಗೆ ಪರೀಕ್ಷೆ, ಡಿಬಗ್ಗಿಂಗ್ ಮತ್ತು ಆಪ್ಟಿಮೈಝೇಶನ್
+
+**ನೈಜ ಜಗತ್ತಿನ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ನಿಮ್ಮ ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ:
+- **ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಆ್ಯಪ್ಸ್**: ಸಮಾನ ಸ್ಥಾಪನೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮಾದರಿಗಳು
+- **ಇಲೆಕ್ಟ್ರಾನ್ ಡೆಸ್ಕ್‌ಟಾಪ್ ಆ್ಯಪ್ಸ್**: ವೆಬ್ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆಯಿಂದ ಕ್ರಾಸ್-ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು
+- **ಮೊಬೈಲ್ ಹೈಬ್ರಿಡ್ ಆ್ಯಪ್ಸ್**: ಕೋರ್ಟ್‍ವಾಡಾ/ಫೋನ್‌ಗ್ಯಾಪ್ ವೆಬ್ APIಗಳ ಬಳಕೆ
+- **ಎಂಟರ್ಪ್ರೈಸು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಜಟಿಲ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಮತ್ತು ಉತ್ಪಾದಕತೆ ಉಪಕರಣಗಳು
+- **ಕ್ರೋಮ್ ಡೆವ್‌ಟೂಲ್ಸ್ ವಿಸ್ತರಣೆಗಳು**: ಉನ್ನತ ಮಟ್ಟದ ಡೆವಲಪರ್ ಉಪಕರಣಗಳ ಜೊತೆ ಡಿಬಗ್ಗಿಂಗ್
+- **ವೆಬ್ API ಸಂಯೋಜನೆ**: ಬಾಹ್ಯ ಸೇವೆಗಳಿಗೆ ಸಂವಹನ ಮಾಡುವ ಯಾವುದೇ ಅಪ್ಲಿಕೇಶನ್
+
+**ವೃತ್ತಿಪರ ಪ್ರಭಾವ**: ನೀವು ಈಗ:
+- **ನಿರ್ಮಿಸಬಹುದು** ಪ್ರೊಡಕ್ಷನ್-ಸಿದ್ಧ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳನ್ನು ಕಲ್ಪನೆ ಇಂದ ಜಾರಿಗೆ
+- **ಆಪ್ಟಿಮೈಸ್ ಮಾಡಬಹುದು** ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ವಹಣೆಯನ್ನು ಉದ್ಯಮ-ಮಾನದಂಡ ಪ್ರೊಫೈಲಿಂಗ್ ಉಪಕರಣಗಳ ಬಳಕೆ ಮೂಲಕ
+- **ಸ್ಥಾಪಿಸಬಹುದು** ಮಾಪನ ವೃಂದಗಳೊಂದಿಗೆ ಮೀರಿ ಮಾದರಿತ ವ್ಯವಸ್ಥೆಗಳನ್ನು
+- **ಡಿಬಗ್ ಮಾಡಬಹುದು** ಜಟಿಲ ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳು ಮತ್ತು ಕ್ರಾಸ್-ಕಾಂಟೆಕ್ಸ್ಟ್ ಸಂವಹನ
+- **ಕೊಡುಗೆ ನೀಡಬಹುದು** open source ವಿಸ್ತರಣೆ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು ಮತ್ತು ಬ್ರೌಸರ್ ಮಾನದಂಡಗಳಿಗೆ
+
+**ಮುಂದಿನ ಹಂತದ ಅವಕಾಶಗಳು**:
+- **ಕ್ರೋಮ್ ವೆಬ್ ಸ್ಟೋರ್ ಡೆವಲಪರ್**: ಲಕ್ಷಾಂತರ ಬಳಕೆದಾರರಿಗೆ ವಿಸ್ತರಣೆಗಳು ಪ್ರಕಟಿಸಿ
+- **ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಎಂಜಿನಿಯರ್**: ಆಪ್ಟಿಮೈಜೆಶನ್ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವದಲ್ಲಿ ವಿಶೇಷಗೊಳ್ಳಿ
+- **ಬ್ರೌಸರ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಡೆವಲಪರ್**: ಬ್ರೌಸರ್ ಎಂಜಿನ್ ಅಭಿವೃದ್ಧಿಗೆ ಕೊಡುಗೆ ನೀಡಿರಿ
+- **ವಿಸ್ತರಣೆ ಫ್ರೇಮ್ವರ್ಕ್ ಸೃಷ್ಟಿಕರ್ತ**: ಇತರೆ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಸಹಾಯ ಮಾಡುವ ಉಪಕರಣಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- **ಡೆವಲಪರ್ ರಿಲೇಶನ್ಸ್**: ಬೋಧನೆ ಮತ್ತು ವಿಷಯ ರಚನೆಯ ಮೂಲಕ ಜ್ಞಾನ ಹಂಚಿಕೊಳ್ಳಿ
+
+🌟 **ಸಾಧನೆ ಅನ್ಲಾಕ್ ಆಗಿದೆ**: ನೀವು ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಆಧುನಿಕ ವೆಬ್ ಮಾನದಂಡಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಸಂಪೂರ್ಣ, ಕಾರ್ಯೋಚಿತ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ನಿರ್ಮಿಸಿದ್ದೀರಿ!
+
+## ನಿಯೋಜನೆ
+
+[ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಒಂದು ಸೈಟ್ ವಿಶ್ಲೇಷಿಸಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಾಜ್ಯವಾಣಿ**:  
+ಈ ದಾಖಲೆಯನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗುರುತುಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದ್ದೇ ಇದೆ ಎಂದು ಜ್ಞಾನದಲ್ಲಿರಲಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆ ಅಧಿಕಾರವಾದ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೆಗಳು ಅಥವಾ ಭ್ರಮೆಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/3-background-tasks-and-performance/assignment.md

@@ -0,0 +1,17 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
+  "translation_date": "2026-01-08T15:34:43+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "kn"
+}
+-->
+Translation for chunk 1 of 'assignment.md' skipped due to timeout.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಜ್ಞಾಪನೆ**:
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಾದಕ್ಕೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದೆಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ತೀವ್ರ ಮಾಹಿತಿಗೆ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ವಿವರಣೆಗಳು ಅಥವಾ ಭ್ರಾಂತಿಗಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/README.md

@@ -0,0 +1,43 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2026-01-08T11:27:57+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್‌ಶನ್ ನಿರ್ಮಾಣ
+
+ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್‌ಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಿಸುವ ಮನರಂಜನೆಯುತ ಮತ್ತು ಆಸಕ್ತಿದಾಯಕ ಮಾರ್ಗವಾಗಿದ್ದು ವಿಭಿನ್ನ ರೀತಿಯ ವೆಬ್ ಆಸ್ತಿ ನಿರ್ಮಾಣವಾಗುತ್ತದೆ. ಈ ಮ್ಯಾಡ್ಯೂಲ್‌ನಲ್ಲಿ ಬ್ರೌಸರ್‌ಗಳು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಮತ್ತು ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್‌ಶನ್ ಅನ್ನು ಹೇಗೆ ನಿಯೋಜಿಸಬೇಕು, ಫಾರ್ಮ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಬೇಕು, API ಅನ್ನು ಹೇಗೆ ಕರೆದಾಯ್ದು ಬಳಸಬೇಕು, ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ಹೇಗೆ ಬಳಸಬೇಕು ಹಾಗೂ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೇಗೆ ಅಳೆಯಬೇಕು ಮತ್ತು ಸುಧಾರಿಸಬೇಕು ಎಂಬ ಪಾಠಗಳು ಸೇರಿವೆ.
+
+ನೀವು Edge, Chrome, ಮತ್ತು Firefox-ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್‌ಶನ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ. ಈ ಎಕ್ಸ್ಟೆನ್‌ಶನ್ ಒಂದು ವಿಶೇಷ ಕಾರ್ಯಕ್ಕೆ ಅನುಗುಣವಾದ ಸಣ್ಣ ವೆಬ್ ಸೈಟ್ ಸಾಲದಂತೆ ಇರುತ್ತದೆ. ಇದು ನೀಡಲಾದ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆ ಮತ್ತು ಕಾರ್ಬನ್ ತೀವ್ರತೆಯನ್ನು ಪರಿಶೀಲಿಸಲು [C02 Signal API](https://www.co2signal.com) ಅನ್ನು ಕರೆದಾಡುತ್ತದೆ ಮತ್ತು ಆ ಪ್ರದೇಶದ ಕಾರ್ಬನ್ पदಚಿಹ್ನೆಯನ್ನು ಮೀರಿಸಲಾಗುತ್ತದೆ.
+
+ಈ ಎಕ್ಸ್ಟೆನ್‌ಶನ್ ಅನ್ನು ಬಳಕೆದಾರರು API ಕೀ ಮತ್ತು ಪ್ರದೇಶದ ಕೋಡ್ ಫಾರ್ಮ್‌ನಲ್ಲಿ ಹಾಕಿದ ನಂತರ ಅಗತ್ಯವಿರುವಾಗ ಕರೆಯಬಹುದು, ಇದರಿಂದ ಸ್ಥಳೀಯ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ನಿರ್ಣಯಿಸಿ ಬಳಕೆದಾರರ ವಿದ್ಯುತ್ ವ್ಯವಹಾರಗಳನ್ನು ಪ್ರಭಾವಿತಗೊಳಿಸಬಹುದಾದ ಡೇಟಾವನ್ನು ನೀಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಪ್ರದೇಶದಲ್ಲಿ ಹೆಚ್ಚಾದ ವಿದ್ಯುತ್ ಬಳಕೆ ಇದ್ದಾಗ ಕತ್ತರಿಸುವ ಯಂತ್ರ (ಕಾರ್ಬನ್ ತೀವ್ರವಾದ ಚಟುವಟಿಕೆ) ಹಗಲು ನಡೆಸಲು ವಿಳಂಬ ಮಾಡುವುದು ಮೇಲು.
+
+### ವಿಷಯಗಳು
+
+1. [ಬ್ರೌಸರ್ ಬಗ್ಗೆ](1-about-browsers/README.md)  
+2. [ಫಾರ್ಮ್ಗಳು ಮತ್ತು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ](2-forms-browsers-local-storage/README.md)  
+3. [ಪಿನ್ನಣಿಕೆ ಕೆಲಸಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ](3-background-tasks-and-performance/README.md)
+
+### ಕ್ರೆಡಿಟ್ಸ್
+
+![ಹಸಿರು ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್‌ಶನ್](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
+
+## ಕ್ರೆಡಿಟ್ಸ್
+
+ಈ ವೆಬ್ ಕಾರ್ಬನ್ ಟ್ರಿಗರ್ ಕಲ್ಪನೆಯನ್ನು ಗ್ರೀನ್ ಕ್ಲೌಡ್ אַד್ವೊಕಸಿ ತಂಡದ ನಾಯಕರಾದ ಅಸೀಮ್ ಹುಸೈನ್ ಅವರು ನೀಡಿದರು ಮತ್ತು ಅವರು [Green Principles](https://principles.green/) ರಚಿಸಿದ್ದಾರೆ. ಇದು ಮೂಲತಃ ಒಂದು [ವೆಬ್ ಸೈಟ್ ಪ್ರೋಜೆಕ್ಟ್](https://github.com/jlooper/green) ಆಗಿತ್ತು.
+
+ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್‌ಶನ್ ರಚನೆಯನ್ನು [ಅಡೆಬೋಲಾ ಅಡೆನಿರಾನ್ ಅವರ COVID ಎಕ್ಸ್ಟೆನ್‌ಶನ್](https://github.com/onedebos/covtension) ಪ್ರೇರೇಪಿಸಿದವು.
+
+'dot' ಐಕಾನ್ ವ್ಯವಸ್ಥೆಯ ಕನ್ಸೆಪ್ಟ್ ಕ್ಯಾಲಿಫೋರ್ನಿಯಾ ಉಳಿತಾಯಕ್ಕಾಗಿ [Energy Lollipop](https://energylollipop.com/) ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್‌ಶನ್‌ನ ಐಕಾನ್ ರಚನೆಯಿಂದ ಸೂಚಿಸಲ್ಪಟ್ಟಿತು.
+
+ಈ ಪಾಠಗಳನ್ನು ♥️ ಯಿಂದ [ಜೆನ್ ಲೂಪರ್](https://www.twitter.com/jenlooper) ಅವರು ಬರೆಯಲಾಗಿದೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅನುವಾದ ಸೂಚನೆ**:  
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಉಪಯೋಗಿಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನದಲ್ಲಿ ಇಡಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿನ ಮೂಲ ದಾಖಲೆವೇ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವಪೂರ್ಣ ಮಾಹಿತಿಗಳಿಗೆ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪುಬೋಧನೆಗಳಿಗೆ ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳಿಗಾಗಿಯೂ ನಾವು ಜವಾಬ್ದಾರಿಯಾಗಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/solution/README.md

@@ -0,0 +1,43 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2026-01-08T15:59:32+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "kn"
+}
+-->
+# ಕಾರ್ಬನ್ ಟ್ರಿಗರ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯು: ಪೂರ್ಣಗೊಂಡ ಕೋಡ್
+
+tmrow ರ C02 ಸಿಗ್ನಲ್ API ಯನ್ನು ಬಳಸಿಕೊಂಡು ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಹಿಂಬಾಲಿಸಲು, ನೀವು ನಿಮ್ಮ ಬ್ರೌಸರ್ ನಲ್ಲಿ ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆ ಎಷ್ಟು ಭಾರೀವಾಗಿದೆ ಎಂಬ ಕುರಿತು ನೆನೆಪೊಡಿಸುವ ವಿಸ್ತರಣೆ ರಚಿಸಿ. ಈ ವಿಸ್ತರಣೆಯನ್ನು ಅಕ್ರಮವಾಗಿ ಬಳಸುವುದು ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಬಗ್ಗೆ ಈ ಮಾಹಿತಿಯನ್ನು ಆಧರಿಸಿ ತೀರ್ಮಾನ ಕೈಗೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+![ವಿಸ್ತರಣೆ ಸ್ಕ್ರೀನ್ಶಾಟ್](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
+
+## ಪ್ರಾರಂಭಿಸುವುದು
+
+ನೀವು [npm](https://npmjs.com) ಅನ್ನು ಹೊಂದಿರಬೇಕು. ಈ ಕೋಡ್ ನ ಪ್ರತಿ ನಿಮ್ಮ ಕಂಪ್ಯೂಟರಿನ ಒಂದು ಫೋಲ್ಡರ್ ಗೆ ಡೌನ್ಲೋಡ್ ಮಾಡಿ.
+
+ಅವಶ್ಯಕ所有 ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ:
+
+```
+npm install
+```
+
+webpack ನಿಂದ ವಿಸ್ತರಣೆಯನ್ನು ನಿರ್ಮಿಸಿ
+
+```
+npm run build
+```
+
+Edge ನಲ್ಲಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು, ಬ್ರೌಸರ್‌ನ ಉದ್ದನೆಯ ಬಲ ಕೋನದಲ್ಲಿರುವ 'ಮೂರು ಬಿಂದುಗಳು' ಮೆನು ಬಳಸಿ ವಿಸ್ತರಣೆ ಪ್ಯಾನೆಲಿಗೆ ಹೋಗಿ. ಅಲ್ಲಿ 'Load Unpacked' ಅನ್ನು ಆಯ್ಕೆಮಾಡಿ ಹೊಸ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ. ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ 'dist' ಫೋಲ್ಡರ್ ತೆರೆಯಿರಿ, ವಿಸ್ತರಣೆ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಬಳಸಲು, CO2 Signal ರ API ಗೆ API ಕೀ ಬೇಕಾಗುತ್ತದೆ ([ಇದನ್ನು ಇಮೇಲ್ ಮೂಲಕ ಪಡೆಯಿರಿ](https://www.co2signal.com/) - ಈ ಪುಟದ ಬಾಕ್ಸ್ ನಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು ನಿಮ್ಮ [ವಿದ್ಯುತ್ ನಕ್ಷೆ](https://www.electricitymap.org/map) ಗೆ ತಕ್ಕಂತೆ ನಿಮ್ಮ ಭಾಗದ [ಕೋಡ್](http://api.electricitymap.org/v3/zones) ಬೇಕಾಗುತ್ತದೆ (ಉದಾಹರಣೆಗೆ ಬೋಸ್ಟನ್‌ನಲ್ಲಿ ನಾನು 'US-NEISO' ಉಪಯೋಗಿಸುತ್ತೇನೆ).
+
+![ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲಾಗುತ್ತಿದೆ](../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
+
+ಒಮ್ಮೆ API ಕೀ ಮತ್ತು ನಿಮ್ಮ ಭಾಗವನ್ನು ವಿಸ್ತರಣೆ ಇಂಟರ್ಫೇಸಿಗೆ ನಮೂದಿಸಿದ ಮೇಲೆ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಬಾರ್‌ನಲ್ಲಿ ಬಣ್ಣದ ಚುಕ್ಕೆ ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಮತ್ತು ಯಾವ ವಿಧಾನಗಳಲ್ಲಿಯೇ ಹೆಚ್ಚು ವಿದ್ಯುತ್ ಬಳಕೆಯಾಗುತ್ತದೆ ಎಂಬದನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಈ 'ಚುಕ್ಕೆ' ವ್ಯವಸ್ಥೆಯ ಹಿಂದಿನ ಕಲ್ಪನೆಯನ್ನು ನನ್ನಗೆ [Energy Lollipop ವಿಸ್ತರಣೆ](https://energylollipop.com/) ಕ್ಯಾಲಿಫೋರ್ನಿಯಾ ಉಸಿರಾಟಗಳಿಗಾಗಿ ನೀಡಿದೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಪ್ರತ್ಯಾಕ್ಷಿಕೆ**:  
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಪುಸ್ತಕವನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗೆ ಪ್ರಯತ್ನಿಸುತ್ತೇವೆ ಆದರೆ ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರುವ ಸಾಧ್ಯತೆ ಇದೆ ಎಂದು ದಯವಿಟ್ಟು ತಿಳಿದು ಕೊಳ್ಳಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗಬಹುದಾದ ಯಾವುದೇ ಹ misunderstandings ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಟ್ಟುವಿಕೆಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/solution/translation/README.es.md

@@ -0,0 +1,43 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2026-01-08T16:10:46+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "kn"
+}
+-->
+# Carbon Trigger ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ: مڪمل ಕೋಡ್
+
+tmrow ನ CO2 ಸಿಗ್ನಲ್ API ಬಳಸಿ ವಿದ್ಯುತ್ ಬಳಕೆ ಟ್ರ್ಯಾಕ್ ಮಾಡಲು, ನಿಮ್ಮ ವಲಯದ ವಿದ್ಯುತ್ ಬಳಕೆಯ ಬಗ್ಗೆ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ರಿಮೈಂಡರ್ ಇರಲು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ರಚಿಸಿ. ಈ ಅಡ್ಹಾಕ್ ವಿಸ್ತರಣೆ ಬಳಕೆ ಈ ಮಾಹಿತಿಯ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಕುರಿತು ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041.kn.png)
+
+## ಪ್ರಾರಂಭಿಸುವುದು
+
+ನೀವು [npm](https://npmjs.com) ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿರಬೇಕು. ಈ ಕೋಡ್ ನ ನಕಲನ್ನು ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನ ಫೋಲ್ಡರ್‌ಗೆ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ.
+
+ಬಳಸಬೇಕಾಗಿರುವ ಎಲ್ಲಾ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ:
+
+```
+npm install
+```
+
+webpack ನಿಂದ ವಿಸ್ತರಣೆಯನ್ನು ಶಿಲ್ಪಿ ಮಾಡಿ:
+
+```
+npm run build
+```
+
+Edge ನಲ್ಲಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು, ಬ್ರೌಸರ್‌ನ ಮೇಲ್ಭಾಗದ ಎಡಭಾಗದ 'ಮೂರು ಮಿಂಚು' ಮెన್ಯೂ ಬಳಸಿ ವಿಸ್ತರಣೆ ಪ್ಯಾನಲ್ ಹುಡುಕಿ. ಅದರಲ್ಲಿ 'ಅನ್‌ಪ್ಯಾಕ್ಡ್ ಲೋಡ್' ಆಯ್ಕೆಮಾಡಿ ಹೊಸ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ. ಕೇಳಿದಾಗ 'dist' ಫೋಲ್ಡರ್ ತೆರೆಯಿರಿ, ವಿಸ್ತರಣೆ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಬಳಸಿಸಲು, CO2 ಸಿಗ್ನಲ್ API ಕೀ ಅಗತ್ಯವಿದೆ ([ಇಮೇಲ್ ಮೂಲಕ ಇಲ್ಲಿ ಪಡೆಯಿರಿ](https://www.co2signal.com/) - ಈ ಪುಟದ ಪೆಟ್ಟಿಗೆಯಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [ವಿದ್ಯುತ್ ನಕ್ಷೆಗೆ](https://www.electricitymap.org/map) ಹೊಂದಿಕೊಳ್ಳುವ ನಿಮ್ಮ ವಲಯದ [ಕೋಡ್](http://api.electricitymap.org/v3/zones) (ಉದಾಹರಣೆಗೆ ಬಾಸ್ಟನಿಯಲ್ಲಿ 'US-NEISO' ನ್ನು ಬಳಸುತ್ತೇನೆ).
+
+![installing](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c.kn.png)
+
+API ಕೀ ಮತ್ತು ವಲಯವು ವಿಸ್ತರಣೆ ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ನಮೂದಿಸಿದ ನಂತರ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಬಾರ್‌ನ ಬಣ್ಣದ ಬಿಂದುವು ನಿಮ್ಮ ವಲಯದ انر╔ಳ ನಿದರ್ಶನ ನೀಡಲು ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚಿನ ವಿದ್ಯುತ್ ಬಳಕೆ ಚಟುವಟಿಕೆಗಳ ಬಗ್ಗೆ ಸೂಚನೆ ನೀಡುತ್ತದೆ. ಈ "ಬಿಂದುಗಳು" ವ್ಯವಸ್ಥೆಯ ಆಲೋಚನೆಯನ್ನು ನನಗೆ [Energy Lollipop ವಿಸ್ತರಣೆ](https://energylollipop.com/) ಕೊಟ್ಟಿತು, ಇದು ಕ್ಯಾಲಿಫೋರ್ಮಿಯಾದ ಕಾರ್ಬನ್ ಉಗ್ರಣೆಗಳಿಗಾಗಿ ಇದೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಡ್ಿಸ್ಕ್ಲೇಮರ್**:  
+ಈ ದಸ್ತಾವೇಜು ಹೃತ್ಪೂರ್ವಕ ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಯನ್ನು ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗೆ ಪ್ರಯತ್ನ ಮಾಡುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಪಡುವಿಕೆಗಳಿರಬಹುದು ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳಿರಿ. ಮೂಲ ದಸ್ತಾವೇಜಿನ ಸ್ಥಳೀಯ ಭಾಷೆ ಆದ್ಯತೆಯ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವೇ ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪರ್ಥ ಅಥವಾ ದುರ್ನಿರ್ದೇಶನಕ್ಕೆ ನಾವು ಹುದ್ದೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/solution/translation/README.fr.md

@@ -0,0 +1,43 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2026-01-08T16:12:49+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "kn"
+}
+-->
+# Carbon Trigger ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ: ಪೂರ್ಣಗೊಂಡ ಕೋಡ್
+
+tmrow ನ C02 ಸಿಗ್ನಲ್ API ಬಳಸಿ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ವೀಕ್ಷಿಸಲು, ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆಯ ಬಗ್ಗೆ ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ ನಲ್ಲಿ ಸೂಚನೆ ನೀಡುವ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ರಚಿಸಿ. ಈ ಅನೌಪಚಾರಿಕ ವಿಸ್ತರಣೆ ಬಳಕೆ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಮೇಲೆ ಈ ಮಾಹಿತಿಯ ಆಧಾರದ ಮೇಲೆ ತೀರ್ಮಾನ ತಗೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+![capture d'extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
+
+## ಪ್ರಾರಂಭಿಸುವುದು
+
+ನೀವು [npm](https://npmjs.com) ಸ್ಥಾಪಿಸಿರುವಿರಬೇಕು. ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನ ಫೋಲ್ಡರ್‌ಗಳಲ್ಲಿ ಈ ಕೋಡ್ ನ ನಕಲನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ.
+
+ಎಲ್ಲಾ ಅಗತ್ಯ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಸ್ಥಾಪಿಸಿ:
+
+```
+npm install
+```
+
+webpack ನಿಂದ ವಿಸ್ತರಣೆ ನಿರ್ಮಿಸಿ
+
+```
+npm run build
+```
+
+Edge ನಲ್ಲಿ ಸ್ಥಾಪಿಸಲು, ಬ್ರೌಸರ್ ನ ಮೇಲ್ಭಾಗದ ಬಲದ ಕಡೆ "ಮೂರು ಚಿಹ್ನೆಗಳು" ಮೆನು ಬಳಸಿ ಎಕ್ಸ್‌ಟೆನ್ಶನ್ ಪ್ಯಾನೆಲ್ ಹುಡುಕಿ. ಅಲ್ಲಿ, "ಅನ್ಜಿಪ್ ಮಾಡಲಾದ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ" ಆಯ್ಕೆಯನ್ನು ಆರಿಸಿ ಹೊಸ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ. ಆದೇಶದಲ್ಲಿ 'dist' ಫೋಲ್ಡರ್ ತೆರೆದು ವಿಸ್ತರಣೆ ಲೋಡ್ ಆಗುತ್ತದೆ. ಬಳಕೆ ಮಾಡಲು, ನೀವು CO2 ಸಿಗ್ನಲ್ API ಗಾಗಿ API ಕೀ ಬೇಕಾಗುತ್ತದೆ ([ಇಲ್ಲಿ ಇಮೇಲ್ ಮೂಲಕ ಪಡೆಯಿರಿ](https://www.co2signal.com/) - ಈ ಪುಟದಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [ವಿದ್ಯುತ್ ನಕ್ಷೆ](https://www.electricitymap.org/map) ಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ನಿಮ್ಮ ಪ್ರಾಂತ್ಯದ [ಕೋಡ್](http://api.electricitymap.org/v3/zones) (ಉದಾಹರಣೆಗೆ ಬೋಸ್ಟನ್ ನಲ್ಲಿ, 'US- NEISO' ಅನ್ನು ಬಳಸುತ್ತೇನೆ).
+
+![installation](../../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
+
+API ಕೀ ಮತ್ತು ಪ್ರಾಂತ್ಯವನ್ನು ವಿಸ್ತರಣೆ ಮುಖಪುಟದಲ್ಲಿ ನಮೂದಿಸಿದ ನಂತರ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಬಾರದ ಬಣ್ಣದ ಬಿಂಗು ನಿಮ್ಮ ಪ್ರಾಂತ್ಯದ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ತೋರ್ಪಡಿಸಿ, ನಿಮ್ಮ ಅಭ್ಯಾಸಗಳಿಗೆ ಸರಿ ಹೊಂದುವ ಶಕ್ತಿವಂತರ ಚಟುವಟಿಕೆಗಳ ಸೂಚಕವನ್ನು ನೀಡುತ್ತದೆ. ಈ "ಬಿಂಗು" ಸಮೀಕ್ಷೆಯ ಪರಿಕಲ್ಪನೆಯನ್ನು ಕ್ಯಾಲಿಫೋರ್ನಿಯಾದ ಉಳಿತಾಯಗಳಿಗಾಗಿ [Energy Lollipop ವಿಸ್ತರಣೆ](https://energylollipop.com/)ರಿಂದ ಪಡೆದಿದ್ದೇನೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಾಜ್ಯ ವಿವರಣೆ**:  
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದದಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದೆಂದು कृಪಯಾಗಿ ಗಮನಿಸಿರಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಾಖಲೆ ಆಧಿಕೃತ ಮೂಲವಾಗಿದ್ದು ಪರಿಗಣಿಸಬಹುದಾಗಿದೆ. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ ಅಥವಾ ವಿಚಲನೆಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲೇವು.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/solution/translation/README.hi.md

@@ -0,0 +1,43 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2026-01-08T16:08:31+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "kn"
+}
+-->
+# ಕಾರ್ಬನ್ ಟ್ರಿಗರ್ ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆಂಶನ್: ಪೂರ್ಣಗೊಂಡ ಕೋಡ್
+
+ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು tmrow ನ CO2 ಸಿಗ್ನಲ್ API ಅನ್ನು ಬಳಸುವುದು, ನಿಮ್ಮ ಬ್ರೌಸರ್ ನಲ್ಲಿ ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆ ಎಷ್ಟು ಗಂಭೀರವಾಗಿದೆ ಎಂಬುದರ ಬಗ್ಗೆ ನಿಮಗೆ ಸ್ಮರಣಿಕೆ ನೀಡುವಂತೆ ಒಂದು ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆಂಶನ್ ಅನ್ನು ರಚಿಸುವುದು. ಈ ತಾತ್ಕಾಲಿಕ ಎಕ್ಸ್ಟೆಂಶನ್‌ನ ಬಳಕೆಯಿಂದ ನೀವು ಈ ಮಾಹಿತಿಯ ಆಧಾರದಲ್ಲಿ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಬಗ್ಗೆ ತೀರ್ಮಾನ ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯವಾಗುತ್ತದೆ.
+
+![ಎಕ್ಸ್ಟೆಂಶನ್ ಸ್ಕ್ರೀನ್ಶಾಟ್ ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
+
+## ಪ್ರಾರಂಭಿಸುವುದು
+
+ನೀವು [npm](https://npmjs.com) ಅನ್ನು ಸ್ಥಾಪಿಸಬೇಕು. ನಿಮ್ಮ కంప್ಯೂಟರ್ ನಲ್ಲಿ ಒಂದು ಫೋಲ್ಡರ್ ನಲ್ಲಿ ಈ ಕೋಡ್ ನ ಪ್ರತಿಯನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ.
+
+ಇವತ್ತು ಬೇಕಾಗುವ ಎಲ್ಲಾ ಪ್ಯಾಕೇಜ್ ಗಳನ್ನು ಸ್ಥಾಪಿಸಿ:
+
+```
+npm install
+```
+
+ವೆಬ್‌ಪ್ಯಾಕ್ ಉಪಯೋಗಿಸಿ ಎಕ್ಸ್‌ಟೆಂಶನ್ ರಚಿಸಿ
+
+```
+npm run build
+```
+
+ಎಡ್ಜ್‌ನಲ್ಲಿ ಸ್ಥಾಪಿಸಲು, ನಿಮ್ಮ ಬ್ರೌಸರ್ ನ ಮೇಲೆ ಬಲ ದಿಕ್ಕಿನಲ್ಲಿ ಇರುವ 'ಮೂರು ಡಾಟ್' ಮೆನು ಬಳಸಿ ಎಕ್ಸ್‌ಟೆಂಶನ್ ಪ್ಯಾನಲ್ ಅನ್ನು ಹುಡುಕಿರಿ. ಅಲ್ಲಿ, ಹೊಸ ಎಕ್ಸ್ಟೆಂಶನ್ ಲೋಡ್ ಮಾಡಲು 'ಲೋಡ್ ಅನ್ಪ್ಯಾಕ್ಡ್' ಆಯ್ಕೆಮಾಡಿ. ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ 'dist' ಫೋಲ್ಡರ್ ಅನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಎಕ್ಸ್ಟೆಂಶನ್ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಬಳಸಲು, ನಿಮಗೆ CO2 ಸಿಗ್ನಲ್ API ([ಇಮೇಲ್ ಮೂಲಕ ಇಲ್ಲಿ ಪಡೆಯಿರಿ](https://www.co2snal.com/) ಅಥವಾ ಈ ಪುಟದಲ್ಲಿ ಬಾಕ್ಸ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [ನಿಮ್ಮ ಪ್ರದೇಶಕ್ಕೆ ಕೋಡ್](http://api.electricitymap.org/v3/zones) [ಎಲೆಕ್ಟ್ರಿಸಿಟಿ ಮ್ಯಾಪ್](https://www.electricitymap.org/map) (ಉದಾಹರಣೆಗೆ, ಬೋಸ್ಟನ್‌ನಲ್ಲಿ ನಾನು 'US-NEISO' ಉಪಯೋಗಿಸುತ್ತೇನೆ) ಅಗತ್ಯವಿದೆ.
+
+![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
+
+ಒಮ್ಮೆ API ಕೀ ಮತ್ತು ಪ್ರದೇಶದ ಎಕ್ಸ್‌ಟೆಂಶನ್ ಇಂಟರ್ಫೇಸ್‌ಗೆ ಇನ್ಪುಟ್ ಆದ ಮೇಲೆ, ಬ್ರೌಸರ್ ಎಕ್ಸ್‌ಟೆಂಶನ್ ಬಾರ್‌ನಲ್ಲಿ ಬಣ್ಣದ ಹಣ್ಣು ನಿಮ್ಮ ಪ್ರದೇಶದ انرಜಿಯ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವಂತೆ ಬದಲಾಯಿಸಬೇಕು ಮತ್ತು ನಿಮಗೆ ಸೂಚಕವನ್ನು ನೀಡಬೇಕು ಇಂದ್ರಿಯ ಭಾರವಾದ ಚಟುವಟಿಕೆಗಳು ನಿಮ್ಮ ಪ್ರದರ್ಶನಕ್ಕೆ ಏನು ಸೂಕ್ತವಾಗಿವೆ ಎಂಬುದರ. ಈ 'ಹಣ್ಣು' ವ್ಯವಸ್ಥೆಯ ಹಿಂದಿನ ಆಲೋಚನೆಯನ್ನು ನನಗೆ ಕ್ಯಾಲಿಫೋರ್ನಿಯಾ ಉತ್ಸರ್ಜನೆಗಾಗಿ [ಎನರ್ಜಿ ಲಾಲಿಪೋಪ್ ಎಕ್ಸ್ಟೆಂಶನ್](https://energylollipop.com/) ನೀಡಿತ್ತು.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತೆರವು**:  
+ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಭಾಷಾಂತರ ಸೇವೆಯನ್ನು ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಮಗೆ ಶುದ್ಧತೆಯ ಪ್ರಯತ್ನವಿದ್ದು, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳಿರಬಹುದು ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆ ಆಧಿಕಾರಿಕ ಮೂಲವಾಗಿರುತ್ತದೆ. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರ ಸೇವೆಯನ್ನು ಬಳಸುವುದೇ ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಸ್ಕರಣೆಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/solution/translation/README.it.md

@@ -0,0 +1,43 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2026-01-08T16:18:20+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "kn"
+}
+-->
+# ಕಾರ್ಬನ್ ಟ್ರಿಗರ್ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ: ಪ್ರಾರಂಭಿಸಲು ಕೋಡ್
+
+ತಮ್ಮ ಪ್ರದೇಶದಲ್ಲಿ ವಿದ್ಯುತ್ ಬಳಕೆಯ ತೂಕ ಎಷ್ಟು ಇದೆ ಎಂಬುದರ ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸ್ಮರಣಿಕೆ ಹೊಂದಿಕೊಳ್ಳಲು ಬ್ರೌಸರಿಗಾಗಿ ವಿಸ್ತರಣೆಯನ್ನು ರಚಿಸಲು tmrow ನ Signal C02 API ಅನ್ನು ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಗಮನಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಈ ವಿಶೇಷ ವಿಸ್ತರಣೆಯ ಬಳಕೆಯಿಂದ ಈ ಮಾಹಿತಿಗಳ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+![ವಿಸ್ತರಣೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
+
+## ಪ್ರಾರಂಭಿಸಲು
+
+[npm](https://npmjs.com) ಸಂಸ್ಥಾಪನೆ ಹೊಂದಿರಬೇಕಾಗಿದೆ. ಈ ಕೋಡ್ ನ ಪ್ರತಿಯನ್ನು ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನ ಒಂದು ಫೋಲ್ಡರ್‌ಗೆ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ.
+
+ಎಲ್ಲಾ ಅಗತ್ಯ ಪ್ಯಾಕೇಜುಗಳನ್ನು ಸ್ಥಾಪಿಸಿ:
+
+```
+npm install
+```
+
+webpack ನಿಂದ ವಿಸ್ತರಣೆಯನ್ನು ರಚಿಸಿ
+
+```
+npm run build
+```
+
+Edge ನಲ್ಲಿ ಸ್ಥಾಪಿಸಲು, ಬ್ರೌಸರ್‌ನ ಮೇಲ್ಭಾಗದ ಬಲಭಾಗದಲ್ಲಿರುವ "ಮೂರು ಅಂಕಿಗಳು" ಮೇಳುದಾಣವನ್ನು ಬಳಸಿ ವಿಸ್ತರಣೆಗಳನ್ನು ಹುಡುಕಿ. ಈಗಾಗಲೇ ಸಕ್ರಿಯವಾಗದಿದ್ದರೆ, ಕೆಳಭಾಗದ ಎಡಕ್ಕೆಿರುವ ಡೆವಲಪರ್ ಮೋಡ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ. ಹೊಸ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಲು "ಅನ್ಜಿಪ್ ಮಾಡಿದ ಲೋಡ್" ಆಯ್ಕೆಮಾಡಿ. "dist" ಫೋಲ್ಡರ್ ಅನ್ನು ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ ತೆರೆಯಿರಿ ಮತ್ತು ವಿಸ್ತರಣೆ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಬಳಸಲು, ನಿಮಗೆ CO2 Signal API ಗೆ ಒಂದು API ಕೀ ಬೇಕಾಗುತ್ತದೆ (ನೀವು [ಇಲ್ಲಿ ಇಮೇಲ್ ಮೂಲಕ ಪಡೆಯಬಹುದು](https://www.co2signal.com/) - ಈ ಪುಟದಲ್ಲಿರುವ ಪಟ್ಟಿಯನ್ನು ನಿಮ್ಮ ಇಮೇಲ್ ನೊಂದಿಗೆ ತುಂಬಿ) ಮತ್ತು [ವಿದ್ಯುತ್ ನಕ್ಷೆ](https://www.electricitymap.org/map) ಗೆ ಹೊಂದುವ [ನಿಮ್ಮ ಪ್ರादेशಿಕ ಕೋಡ್](http://api.electricitymap.org/v3/zones) ಅಗತ್ಯವಿದೆ (ಉದಾಹರಣೆಗೆ ಬೊಸ್ಟ್‌ನಲ್ಲಿ, "US-NEISO").
+
+![ಸ್ಥಾಪನೆ](../../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
+
+ಒಮ್ಮೆ API ಕೀ ಮತ್ತು ಪ್ರದೇಶ ವಿಸ್ತರಣೆಯ ಅಂತರ್ ಮುಖದಲ್ಲಿ ಸೇರಿಸಿದ ನಂತರ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯ ಬಾರ್ ನಲ್ಲಿ ಬಣ್ಣದ ಬಿಂದು ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲು ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚಿನ ವಿದ್ಯುತ್ ಉಪಯೋಗದ ಚಟುವಟಿಕೆಗಳನ್ನು ನಡಿಸುವುದು ಯೋಗ್ಯವೋ ಎಂಬುದರ ಸೂಚನೆ ನೀಡುತ್ತದೆ. ಈ "ಬಿಂದು" ಆಧಾರಿತ ವ್ಯವಸ್ಥೆಯ ಹಿನ್ನೆಲೆ ಸಂಯೋಜನೆಯು ಕ್ಯಾಲಿಫೋರ್ನಿಯಾದ ಉತ್ಸರ್ಗಗಳಿಗೆ арналған [ಎನೆರ್ಜೀ ಲಾಲಿಪಾಪ್ ವಿಸ್ತರಣೆ](https://energylollipop.com/) ನಿಂದ ಪಡೆದಿದೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಜಮೆ ಒಪ್ಪಂದ**:  
+ಈ ದಾಖಲೆ AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಉಪಯೋಗಿಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಮಗೆ ನಿಖರತೆಗಾಗಿ ಪ್ರಯತ್ನವಿದ್ದರೂ ಸಹ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಯಿರಬಹುದೆಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿನ ಮೂಲ ದಾಖಲೆ ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಭಾಷಾಂತ್ಯದಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ದೋಷಗಳ ಅಥವಾ ತಪ್ಪುಭ್ರಮೆಗಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/solution/translation/README.ja.md

@@ -0,0 +1,43 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2026-01-08T16:14:33+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "kn"
+}
+-->
+#ಕಾರ್ಬನ್ ಟ್ರಿಗರ್ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ: ಸಂಪೂರ್ಣ ಕೋಡ್
+
+tmrow ನ C02 ಸಿಗ್ನಲ್ API ಬಳಸಿಕೊ೦ಡಿ ವಿದ್ಯುತ್ ಬಳಕೆಯ ಪರಿಶೀಲನೆಗಾಗಿ, ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆ ಎಷ್ಟು ಹೆಚ್ಚು ಆಗಿದೆ ಎಂಬುದನ್ನು ಬ್ರೌಸರ್ ನಲ್ಲಿ ರೀಮೈಂಡರ್ ಆಗಿ ತೋರಿಸುವ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ನಿರ್ಮಿಸುವುದು. ಈ ವಿಸ್ತರಣೆ ಅನ್ನು ಅಡ್ಹಾಕ್ ಆಗಿ ಬಳಸಿಕೊ೦ಡಿ, ಈ ಮಾಹಿತಿಯ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳನ್ನು ನಿರ್ಧರಿಸಬಹುದು.
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
+
+##ಆರಂಭದಲ್ಲಿ
+
+[npm](https://npmjs.com) ಇನ್‌ಸ್ಟಾಲ್ ಆಗಿರಬೇಕು. ಈ ಕೋಡ್ ನ ಪ್ರತಿಯನ್ನು ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನ ಫೋಲ್ಡರ್‌ಗೆ ಡೌನ್ಲೋಡ್ ಮಾಡಿ.
+
+ಅವಶ್ಯಕ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಎಲ್ಲವನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ.
+
+```
+npm install
+```
+
+webpack ನಿಂದ ವಿಸ್ತರಣೆಯನ್ನು ಕಟ್ಟಿರಿ.
+
+```
+npm run build
+```
+
+Edge ಗೆ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು, ಬ್ರೌಸರ್‌ನ ಮೇಲ್ಭಾಗದ ಬಲಭಾಗದಲ್ಲಿರುವ "ಮೂರು ಬಿಂದು" ಮೆನುದಲ್ಲಿ "ವಿಸ್ತರಣೆಗಳು" ಪ್ಯಾನೆಲ್ ಅನ್ನು ಹುಡುಕಿ. ಅಲ್ಲಿ "Load Unpacked" ಆಯ್ಕೆಮಾಡಿ, ಹೊಸ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ. ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ "dist" ಫೋಲ್ಡರ್ ತೆರೆಯಿರಿ, ಹಾಗಾಗಿ ವಿಸ್ತರಣೆ ಲೋಡ್ ಆಗುತ್ತದೆ. ಬಳಸಲು, CO2 ಸಿಗ್ನಲ್ API ಯ API ಕೀ ([ಇಲ್ಲಿಂದ ಇಮೇಲ್ ಮೂಲಕ ಪಡೆಯಿರಿ](https://www.co2signal.com/) - ಈ ಪುಟದ ಬಾಕ್ಸಿನಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [Electricity Map](https://www.electricitymap.org/map) ನಡಿ ಹೊಂದಿಕೊಂಡಿರುವ [ನಿಮ್ಮ ಪ್ರದೇಶದ ಕೋಡ್](http://api.electricitymap.org/v3/zones) ಅಗತ್ಯವಿದೆ (ಉದಾಹರಣೆಗೆ ಬೋಸ್ಟನ್ ನಲ್ಲಿ ‘US-NEISO’ ಬಳಕೆ ಮಾಡಲಾಗುತ್ತದೆ).
+
+![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
+
+API ಕೀ ಮತ್ತು ಪ್ರದೇಶವನ್ನು ವಿಸ್ತರಣೆ ಇಂಟರ್‌ಫೇಸಿಗೆ ನಮೂದಿಸಿದಾಗ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಬಾರ್‌ನಲ್ಲಿ ಬಣ್ಣದ ಡಾಟ್ ಬದಲಾಗುತ್ತದೆ, ಇದು ನಿಮ್ಮ ಪ್ರದೇಶದ انر್ಜಿ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಮತ್ತು ಯಾವ ರೀತಿಯ انر್ಜಿ ಅವಶ್ಯಕತೆ ಇರುವ ಚಟುವಟಿಕೆಗಳನ್ನು ಮಾಡುವುದು ಸೂಕ್ತ ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ಈ "ಡಾಟ್" ವ್ಯವಸ್ಥೆ ಕಲಿಫೋರ್ಮಿಯಾ ರಾಜ್ಯದ ಉಳಿತಾಯದಿಗಾಗಿ ಇರುವ [Energy Lollipop extension](https://energylollipop.com/) ನಿಂದ ನನಗೆ ದೊರೆತ ಸಂಯೋಜನೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**免责声明**:
+ಈ ದಸ್ತಾವೇಜು [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಕ್ರಿಯ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನದಲ್ಲಿರಿಸಿ. ಮೂಲ ದಸ್ತಾವೇಜಿನ ಸ್ವದೇಶಿ ಭಾಷೆಯೇ ಅಧಿಕೃತ ಆಧಾರವಾಗಿರಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥ ಘರ್ಷಣೆಗಳು ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/solution/translation/README.ms.md

@@ -0,0 +1,43 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2026-01-08T16:16:18+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "kn"
+}
+-->
+# ಕಾರ್ಬನ್ ಟ್ರಿಗರ್ ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್ಷನ್: ಪೂರ್ಣ ಕೋಡ್
+
+CO2 ಸಿಗ್ನಲ್ tmrow API ಬಳಸಿ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಪತ್ತೆಹಚ್ಚಲು, ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆಯ ಗಂಭೀರತೆಯ ಬಗ್ಗೆ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಮಾಡಿದ್ದಾರೆಚ್ಚುವಿಕೆಗಳನ್ನು ಪಡೆಯಲು ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್ಷನ್ ನಿರ್ಮಿಸಿ. ಈ ಎಕ್ಸ್ಟೆನ್ಷನ್ ವಿಶೇಷವಾಗಿ ಬಳಸುವುದರಿಂದ ಈ ಮಾಹಿತಿಯನ್ನು ಆಧರಿಸಿ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಬಗ್ಗೆ ನೀವು ಸಂವೇದನೆ ಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯವಾಗುತ್ತದೆ.
+
+![ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್ಷನ್ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
+
+## ಇಲ್ಲಿ ಪ್ರಾರಂಭಿಸಿ
+
+ನೀವು [npm] (https://npmjs.com) ಅನ್ನು installieren ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಈ ಕೋಡ್‌ನ ನಕಲನ್ನು ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನ ಫೋಲ್ಡರ್‌ಗೆ ಡೌನ್ಲೋಡ್ ಮಾಡಿ.
+
+ಎಲ್ಲಾ ಅಗತ್ಯ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಸ್ಥಾಪಿಸಿ:
+
+```
+npm install
+```
+
+webpack ನಿಂದ ಎಕ್ಸ್ಟೆನ್ಷನ್ ನಿರ್ಮಿಸಿ
+
+```
+npm run build
+```
+
+Edge ನಲ್ಲಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು, ಬ್ರೌಸರ್‌ನ ಮೇಲ್ಮೈಯಲ್ಲಿನ 'ಮೂರು ತೆಳ್ಳುವ ಗುಂಡಿಗಳು' ಮೆನುವಿನಲ್ಲಿ Sambungan ಫಲಕವನ್ನು ಹುಡುಕಿ. ಅಲ್ಲಿ, ಹೊಸ ಎಕ್ಸ್ಟೆನ್ಷನ್ ಲೋಡ್ ಮಾಡಲು 'Load Unpacked' ಆಯ್ಕೆಮಾಡಿ. 'dist' ಫೋಲ್ಡರ್ ತೆರೆಯುವ ಮೂಲಕ ಎಕ್ಸ್ಟೆನ್ಷನ್ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಬಳಸಲು, CO2 Signal APIക് ([ಇಲ್ಲಿ ಇಮೇಲ್ ಮೂಲಕ ಪಡೆಯಿರಿ](https://www.co2signal.com/) - ಈ ಪುಟದಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [ನಿಮ್ಮ ಪ್ರದೇಶದ ಕೋಡ್](http://api.electricitymap.org/v3/zones) ಅನ್ನು ಪಡೆಯಬೇಕಾಗುತ್ತದೆ, ಇದು [ElectricityMap](https://www.electricitymap.org/map) ಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ (ಉದಾಹರಣೆಗೆ ಬೋಸ್ಟನ್‌ನಲ್ಲಿ, ನಾನು 'US-NEISO' ಬಳಸುತ್ತೇನೆ).
+
+![ಡೌನ್ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ](../../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
+
+API ಕೀ ಮತ್ತು ಪ್ರದೇಶವನ್ನು ಎಕ್ಸ್ಟೆನ್ಷನ್ ಇಂಟರ್ಫೇಸ್‌ಗೆ ನಮೂದಿಸಿದ ನಂತರ, ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್ಷನ್ ಬಾರ್‌ನ ಬಣ್ಣ verandert ಕೂಡ ಆತ್ಮೀಯ ತುಂಡು ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಮತ್ತು ನೀವು ತಗೊಂಡು ಮಾಡಿದ ಮೇಲೆ ತೂಕದ ಚಟುವಟಿಕೆಗಳಿಗೆ ಸೂಚನೆ ನೀಡುತ್ತದೆ. ಈ 'ಡಾಟ್' ವಿಧಾನದ ಆಶಯವನ್ನು [Lollipop Energy ಬೌಸರ್ ಎಕ್ಸ್ಟೆನ್ಷನ್](https://energylollipop.com/) ಕ್ಯಾಲಿಫೋರ್ನಿಯಾ ಎಮಿಷನ್‌ಗಳಿಗೆ ನೀಡಿ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿರಾಕರಣೆ**:
+ಈ ದಾಖಲೆ ಹ人工 ಬುದ್ದಿಮತ್ತೆ ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ನ ಮೂಲಕ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸಮರ್ಪಕತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಸ್ವದೇಶಿ ಭಾಷೆಯಲ್ಲಿ ಆದೇಶಾತ್ಮಕ ಮೂಲವನ್ನಾಗಿ ಪರಿಗಣಿಸಬೇಕಾಗಿದೆ. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದ ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಗ್ರಹಿಕೆಗಳು ಅಥವಾ ವೈಖರಿಗಳಿಗಾಗಿ ನಾವು ಜವಾಬ್ದಾರಿಯಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/5-browser-extension/start/README.md

@@ -0,0 +1,43 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2026-01-08T16:06:07+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "kn"
+}
+-->
+# ಕಾರ್ಬನ್ ಟ್ರಿಗರ್ ಬ್ರೌಸರ್ ವಿಸ್ತರಣಾ: ಸ್ಟಾರ್ಟರ್ ಕೋಡ್
+
+tmrowನ CO2 ಸಿಗ್ನಲ್ API ಬಳಸಿ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಟ್ರಾಕ್ ಮಾಡಲು, ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆ ಎಷ್ಟು ಭಾರವಾಗಿದೆ ಎಂಬ ಬಗ್ಗೆ ಮುನ್ಸೂಚನೆ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಇರುತ್ತಂತೆ ಗಣನೆ ಮಾಡಲು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ನಿರ್ಮಿಸಿ. ಈ ವಿಸ್ತರಣೆಯನ್ನು ಅದ್ಹಾಕ್ ಬಳಸು ನಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಮೇಲೆ ಈ ಮಾಹಿತಿಯನ್ನು ಆಧಾರಿಸಿ ತೀರ್ಮಾನ ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
+
+## ಪ್ರಾರಂಭಿಸುವುದು
+
+ನೀವು [npm](https://npmjs.com) ಅನ್ನು ಸ್ಥಾಪಿಸಿರಬೇಕು. ಈ ಕೋಡ್ ನಕಲನ್ನು ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನ ಫೋಲ್ಡರ್‌ಗೆ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ.
+
+ಆವಶ್ಯಕವಾದ ಎಲ್ಲಾ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಸ್ಥಾಪಿಸಿ:
+
+```
+npm install
+```
+
+webpackದಿಂದ ವಿಸ್ತರಣೆಯನ್ನು ನಿರ್ಮಿಸಿ
+
+```
+npm run build
+```
+
+Edgeನಲ್ಲಿ ಸ್ಥಾಪಿಸಲು, ಬ್ರೌಸರ್‌ನ ಎಡಮುಖ ಮುಂಭಾಗದ ಮೆನು (ಮೂರು ಹೊಂಡು ಬಿಂದುಗಳು) ಬಳಸಿ 'Extensions' ಪ್ಯಾನಲ್ ಕಂಡುಹಿಡಿಯಿರಿ. ಅಲ್ಲಿ 'Load Unpacked' ಆಯ್ಕೆ ಮಾಡಿ ಹೊಸ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ. ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ 'dist' ಫೋಲ್ಡರ್ ತೆರೆಯಿರಿ ಮತ್ತು ವಿಸ್ತರಣೆ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಬಳಸಲು, ನಿಮಗೆ CO2 ಸಿಗ್ನಲ್‌ ಅವರ API ಕೀ ಬೇಕು ([ಇಮೇಲ್ ಮೂಲಕ ಇಲ್ಲಿ ಪಡೆಯಿರಿ](https://www.co2signal.com/) - ಈ ಪುಟದಲ್ಲಿರುವ ಬಾಕ್ಸಿನಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [ಈ ಭಾಗಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಕೋಡ್](http://api.electricitymap.org/v3/zones) ಬೇಕಾಗುತ್ತದೆ, ಇದು [Electricity Map](https://www.electricitymap.org/map) ಗೆ ಸಮ್ಮೇಳನವಾಗಿರುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, ಬೋಸ್ತನ್‌ನಲ್ಲಿ ನಾನು 'US-NEISO' ಅನ್ನು ಬಳಸುತ್ತೇನೆ).
+
+![installing](../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
+
+ಒಮ್ಮೆ API ಕೀ ಮತ್ತು ಪ್ರದೇಶವನ್ನು ವಿಸ್ತರಣೆ ಪರಿಪಡಿಯಲ್ಲಿ ನಮೂದಿಸಿದಾಗ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಬಾರ್‌ನ ಬಣ್ಣದ ಚುಕ್ಕಿ ನಿಮ್ಮ ಪ್ರದೇಶದ ಇಂಧನ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವಂತೆ ಬದಲಾಗಬೇಕು ಮತ್ತು ನೀವು ಎಷ್ಟೊಂದು ಉರಿಯುವ ಚಟುವಟಿಕೆಗಳನ್ನು ಮಾಡಲು ಸೂಕ್ತವಾಗಿರುವುದನ್ನು ಸೂಚಿಸಬೇಕು. ಈ 'ಚುಕ್ಕಿ' ವ್ಯವಸ್ಥೆಯ ಆಲೋಚನೆಯನ್ನು ನನಗೆ [Energy Lollipop ವಿಸ್ತರಣೆ](https://energylollipop.com/) ದಿಂದ ನೀಡಲಾಗಿತ್ತು, ಇದು ಕ್ಯಾಲಿಫೋರ್ನಿಯಾ ಉತ್ಸರ್ಜನೆಗಳಿಗಾಗಿ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಡ್ಡಿಸ್ಕ್ಲೇಮರ್**:
+ಈ ದಾಖಲೆ [ಕೋ-ಆಪ್ ಟ್ರಾನ್ಸ್ಲೇಟರ್](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗೆ ಪ್ರಯತ್ನಿಸುವುದಾದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸಗೆತತೆಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ತಿಳಿಯಿರಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಾಖಲೆನ್ನು ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ чалавಿಯ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸದರಿಂದ ಉದ್ಭವಿಸುವ ಬದ್ಧತೆ ಅಥವಾ ಭ್ರಮನಿರ್ಮೂಲಕ್ಕೆ ನಾವು ಹೊಣೆಗಾರರಾಗಿರುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/1-introduction/README.md

@@ -0,0 +1,662 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a6332a7bb4d0be3bfd24199c83993777",
+  "translation_date": "2026-01-08T14:25:52+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "kn"
+}
+-->
+# ಸ್ಪೇಸ್ ಆಟ ನಿರ್ಮಾಣ ಭಾಗ 1: ಪರಿಚಯ
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಆಟ ಅಭಿವೃದ್ಧಿ ಪ್ರಯಾಣ
+    section ಆಧಾರ
+      ಆಟ ರೂಪರೇಖೆಯನ್ನು ಕಲಿಯಿರಿ: 3: Student
+      ವಂಶವಲಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 4: Student
+      ಸಂಯೋಜನೆಯನ್ನು ಅನ್ವೇಷಿಸಿ: 4: Student
+    section ಸಂವಹನ
+      ಪಬ್/ಸಬ್ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿ: 4: Student
+      ಘಟನೆ ಸಂಕಲನ ವಿನ್ಯಾಸಗೊಳಿಸಿ: 5: Student
+      ಘಟಕಗಳನ್ನು ಸಂಪರ್ಕಿಸಿ: 5: Student
+    section ಅಪ್ಲಿಕೇಶನ್
+      ಆಟ ಆಧಾರಿತ ವಸ್ತುಗಳನ್ನು ರಚಿಸಿ: 5: Student
+      ಮಾದರಿಗಳನ್ನು ಜಾರಿಗೆ ಇಡಿ: 5: Student
+      ಆಟದ ರಚನೆಯನ್ನು ಯೋಜಿಸಿ: 5: Student
+```
+![ಆಟದ ಗೇಮ್‌ಪ್ಲೇವನ್ನು ತೋರಿಸುವ ಸ್ಪೇಸ್ ಆಟ ಆನಿಮೇಷನ್](../../../../6-space-game/images/pewpew.gif)
+
+ನಾಸಾದ ಮಿಷನ್ ಕಂಟ್ರೋಲ್ ಸ್ಪೇಸ್ ಲಾಂಚ್ ವೇಳೆ ಹಲವಾರು ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸಂಯೋಜಿಸುವಂತೆ, ನಾವು ಪ್ರೋಗ್ರಾಂನ ವಿಭಿನ್ನ ಭಾಗಗಳು ಸಾಸ್ವತವಾಗಿ ಹೇಗೆ ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡಬಹುದು ಎಂಬುದನ್ನು ತೋರಿಸುವ ಸ್ಪೇಸ್ ಆಟವನ್ನು ನಿರ್ಮಿಸೋಣ. ನೀವು ವಾಸ್ತವವಾಗಿ ಆಡಬಹುದಾದ ಯಾವುದನ್ನಾದರೂ ರಚಿಸುವಾಗ, ಯಾವುದೇ ಸಾಫ್ಟ್‌ವೇರ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಅನ್ವಯಿಸುವ ಅವಶ್ಯಕ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತತ್ವಗಳನ್ನು ನೀವು ಕಲಿಯುತ್ತೀರಿ.
+
+ನಾವು ಕೋಡ್ ಸಂಘಟನೆಗೆ ಎರಡು ಮೂಲಭೂತ ವಿಧಾನಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ: ವರಸತು (inheritance) ಮತ್ತು ಸಂಕಲನ (composition). ಇವು ಕೇವಲ ಅಕಾಡೆಮಿಕ್ ತತ್ತ್ವಗಳಲ್ಲ - ಇವು ವಿಡಿಯೋ ಆಟಗಳ ಚಲನೆಯಿಂದ ಬ್ಯಾಂಕಿಂಗ್ ವ್ಯವಸ್ಥೆಗಳವರೆಗೆ ಎಲ್ಲವೂ ಚಾಲನೆ ಮಾಡುವ ಉದಾಹರಣೆಗಳೇ ಆಗಿವೆ. ನಾವು pub/sub ಎಂದು ಕರೆಯಲ್ಪಡುವ ಸಂವಹನ ವ್ಯವಸ್ಥೆಯನ್ನು ಕೂಡ ಜಾರಿಗೆ ತರುತ್ತೇವೆ, ಇದು ಬಾಹ್ಯಾಕಾಶ ಯಾನಗಳಲ್ಲಿ ಬಳಸುವ ಸಂವಹನ ಜಾಲಗಳಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ವಿಭಿನ್ನ ಘಟಕಗಳು ಪರಸ್ಪರ ಅವಲಂಬನೆಗಳನ್ನು ರಚಿಸುವದೆ ಇಲ್ಲದೆ ಮಾಹಿತಿ ಹಂಚಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+ಈ ಸರಣಿಯ ಕೊನೆಯಲ್ಲಿ, ನೀವು ಯಾವುದೇ ಗೇಮ್, ವೆಬ್ ಅನ್ವಯಿಕೆ ಅಥವಾ ಇನ್ನಾವುದೇ ಸಾಫ್ಟ್‌ವೇರ್ ವ್ಯವಸ್ಥೆಯ ನಿರ್ಮಾಣದಲ್ಲಿ ಹಿರಿದು ಬೆಳೆಯಬಲ್ಲ ಮತ್ತು ತಂತ್ರಗಳನ್ನು ಅರಿತುಕೊಳ್ಳುವಿರಿ.
+
+```mermaid
+mindmap
+  root((गेಮ್ आर्किटेक्चर))
+    Object Organization
+      ವಾರಸೆಗೊಳ್ಳುವಿಕೆ
+      ಸಂಯೋಜನೆ
+      ವರ್ಗ ಹೀಯರಾರ್ಕಿಗಳು
+      ವರ್ತನೆ ಮಿಶ್ರಣ
+    Communication Patterns
+      ಪ್ರಕಟಣೆ/ಚಂದಾದಾರಿಕೆ ಸುರಂಜಾಮಿ
+      ಘಟನೆ ಹೊರಹೊಮ್ಮಿಸುವವರು
+      ಸಂದೇಶ ಸಾಗಣೆ
+      ಸಡಿಲ ಸಂಯೋಜನೆ
+    Game Objects
+      ಗುಣಲಕ್ಷಣಗಳು (x, y)
+      ವರ್ತನೆಗಳು (ಚಲನೆ, ಘರ್ಷಣೆ)
+      ಜೀವನಚಕ್ರ ನಿರ್ವಹಣೆ
+      ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+    Design Patterns
+      ಕಾರ್ಖಾನೆ ಕಾರ್ಯಗಳು
+      ವೀಕ್ಷಕ ಮಾದರಿ
+      घटಕ ವ್ಯವಸ್ಥೆ
+      ಘಟನೆ ಚಾಲಿತ ಆರ್ಕಿಟೆಕ್ಚರ್
+    Scalability
+      ಘಟಕೀಕೃತ ವಿನ್ಯಾಸ
+      ನಿರ್ವಹಣೀಯ ಕೋಡ್
+      ಪರೀಕ್ಷಾ ತಂತ್ರಗಳು
+      ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೆಷನ್
+```
+## ಉಪನ್ಯಾಸಮುಂಭಾಗ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಉಪನ್ಯಾಸ ಮುಂಭಾಗ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/29)
+
+## ಆಟ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ورسತು ಮತ್ತು ಸಂಕಲನ
+
+ಪ್ರವೃತ್ತಿಗಳು ಸಂಕೀರ್ಣವಾಗುವಂತೆ, ಕೋಡ್ ಸಂಘಟನೆ ಅಗತ್ಯವಾಗುತ್ತದೆ. ಸರಳ ಸ್ಕ್ರಿಪ್ಟ್ ಆಗಿದ್ದೇ ಆರಂಭದಲ್ಲಿ ಸರಿಯಾದ ರಚನೆಯಿಲ್ಲದೆ ನಿರ್ವಹಣೆಯ ಕಷ್ಟ ಹೆಚ್ಚಾಗುತ್ತದೆ – ಆಪೋಲೊ ಮಿಷನ್‌ಗಳಿಗೆ ಸಾವಿರಾರು ಘಟಕಗಳ ನಿಖರ ಸಂಯೋಜನೆಯ ಅಗತ್ಯವಿದ್ದಂತೆ.
+
+ನಾವು ಕೋಡ್ ಸಂಘಟಿಸಲು ಎರಡು ಮೂಲಭೂತ ವಿಧಾನಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ: ورسತು (inheritance) ಮತ್ತು ಸಂಕಲನ (composition). ಪ್ರತಿಯೊಂದು ತನ್ನದೇ ಆದ ಲಾಭಗಳಿವೆ ಮತ್ತು ಎರಡನ್ನೂ ಅರಿತುಕೊಳ್ಳುವುದು ವಿಭಿನ್ನ ಪರಿಸ್ಥಿತಿಗಳಿಗೆ ಸರಿಯಾದ ವಿಧಾನ ಆಯ್ಕೆಮಾಡಲು ನೆರವಾಗುತ್ತದೆ. ನಾವು ಈ ತತ್ವಗಳನ್ನು ನಮ್ಮ ಸ್ಪೇಸ್ ಆಟ ಮೂಲಕ ತೋರಿಸುತ್ತೇವೆ, ಇಲ್ಲಿ ಹೀರೋಗಳು, ಶತ್ರುಗಳು, ಶಕ್ತಿ ವಿಸ್ತರಣೆಗಳು ಮತ್ತು ಇತರ ವಸ್ತುಗಳು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪರಸ್ಪರ ಕೆಲಸ ಮಾಡಬೇಕಾಗುತ್ತದೆ.
+
+✅ ಅತ್ಯಂತ ಪ್ರಸಿದ್ಧ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಪುಸ್ತಕಗಳಲ್ಲಿ ಒಂದಾದದ್ದು [ಡಿಸೈನ್ ಪ್ಯಾಟರ್ನ್‌ಗಳು](https://en.wikipedia.org/wiki/Design_Patterns) ಕುರಿತಾಗಿದೆ.
+
+ಯಾವುದೇ ಆಟದಲ್ಲಿ, ನಿಮಗೆ `ಆಟ ವಸ್ತುಗಳು` ಇವೆ – ನಿಮ್ಮ ಆಟದಲ್ಲಿ ಸಂವಹನ ಮಾಡುವ ಅಂಶಗಳು. ಹೀರೋಗಳು, ಶತ್ರುಗಳು, ಶಕ್ತಿ ವಿಸ್ತಾರಗಳು ಮತ್ತು ದೃಶ್ಯ ಪರಿಣಾಮಗಳು ಆಟ ವಸ್ತುಗಳಾಗಿವೆ. ಪ್ರತಿ ಒಂದು ನಿಶ್ಚಿತ ತೆರೆದ ಅಕ್ಷಾಂಶಗಳಲ್ಲಿವೆ `x` ಮತ್ತು `y` ಮೌಲ್ಯಗಳ ಮೂಲಕ, ಎಲೆಕ್ಟ್ರಿಕ್ ತಳಹದಿಯ ಮೇಲಿನ ಬಿಂದುಗಳನ್ನು ಚಿತ್ರಿಸುವಂತೆ.
+
+ದೃಶ್ಯಾತ್ಮಕ ವ್ಯತ್ಯಾಸಗಳಿದ್ದರೂ ಸಹ, ಈ ವಸ್ತುಗಳಿಗೆ ಸಾಮಾನ್ಯವಾಗಿ ಕಾಣುವ ಕೆಲವೆರು ನಡವಳಿಕೆಗಳು ಇವೆ:
+
+- **ಇವು ಎಲ್ಲಿಯಾದರೂ ಇರುವುದು** – ಪ್ರತಿ ವಸ್ತುವಿನ x ಮತ್ತು y ಅಕ್ಷಾಂಶಗಳು ಇವೆ ಆದ್ದರಿಂದ ಆಟ ಅಲ್ಲಿ ಚಿತ್ರಿಸುತ್ತದೆ
+- **ಬಹುತೇಕವು ಚಲಿಸಬಹುದು** – ಹೀರೋಗಳು ಓಡುತ್ತಾರೆ, ಶತ್ರುಗಳು ಹಿಂಬಾಲಿಸುತ್ತವೆ, ಗುಂಡುಗಳು ಪರಸ್ಪರ ಹಾರುತ್ತಿವೆ
+- **ಅವರ ಜೀವನಾವಧಿ ಇರುತ್ತದೆ** – ಕೆಲವು ಸದಾ ಇರುತ್ತವೆ, ಕೆಲವು (ಸ್ಫೋಟಗಳಂತೆ) ಕ್ಷಣಿಕವಾಗಿ ಕಾಣಿಸಿ ಮರುಳಾಗುತ್ತವೆ
+- **ಅವು ವಿವಿಧ ಪರಿಣಾಮಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ** – ವಸ್ತುಗಳ ನಡುವೆ ಮನೆಗಳು, ಶಕ್ತಿ ವಿಸ್ತಾರಗಳು ಸಂಗ್ರಹವಾಗುವುದು, ಆರೋಗ್ಯಪಟ್ಟಿ ಅಪ್ಡೇಟ್ ಆಗುವುದು
+
+✅ ಪ್ಯಾಕ್-ಮ್ಯಾನ್ ಆಟದ ಬಗ್ಗೆ ಯೋಚಿಸಿ. ಮೇಲಿನ ನಾಲ್ಕು ವಸ್ತು ಪ್ರಕಾರಗಳನ್ನು ನೀವು ಈ ಆಟದಲ್ಲಿ ಗುರುತಿಸಬಹುದಾದರೇ?
+
+```mermaid
+classDiagram
+    class GameObject {
+        +x: number
+        +y: number
+        +type: string
+        +exists_somewhere()
+    }
+    
+    class MovableObject {
+        +moveTo(x, y)
+        +can_move_around()
+    }
+    
+    class TemporaryObject {
+        +lifespan: number
+        +has_lifespan()
+    }
+    
+    class InteractiveObject {
+        +onCollision()
+        +reacts_to_stuff()
+    }
+    
+    GameObject <|-- MovableObject
+    GameObject <|-- TemporaryObject
+    GameObject <|-- InteractiveObject
+    
+    MovableObject <|-- Hero
+    MovableObject <|-- Enemy
+    MovableObject <|-- Bullet
+    
+    TemporaryObject <|-- PowerUp
+    TemporaryObject <|-- Explosion
+    
+    InteractiveObject <|-- Collectible
+    InteractiveObject <|-- Obstacle
+```
+### ನಡವಳಿಕೆಯನ್ನು ಕೋಡ್ ಮೂಲಕ ವ್ಯಕ್ತಪಡಿಸುವಿಕೆ
+
+ಗೇಮ್ ವಸ್ತುಗಳ ಸಾಮಾನ್ಯ ನಡವಳಿಕೆಗಳನ್ನು ನೀವು ಈಗ ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದಾರೆ, ಅವುಗಳನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಹೇಗೆ ಜಾರಿಗೊಳಿಸುವುದು ಎಂಬುದನ್ನು ನೋಡೋಣ. ವಸ್ತು ನಡವಳಿಕೆಯನ್ನು ಕ್ಲಾಸ್‌ಗಳಿಗೆ ಅಥವಾ ವೈಯಕ್ತಿಕ ವಸ್ತುಗಳಿಗೆ ಜೋಡಿಸಿದ ವಿಧಾನಗಳ ಮೂಲಕ ವ್ಯಕ್ತಪಡಿಸಬಹುದು ಮತ್ತು ಇದಕ್ಕೆ ಹಲವಾರು ವಿಧಾನಗಳಿವೆ.
+
+**ಕ್ಲಾಸ್ ಆಧಾರಿತ ವಿಧಾನ**
+
+ಕ್ಲಾಸ್‌ಗಳು ಮತ್ತು ورسತು ಗೇಮ್ ವಸ್ತುಗಳ ಸಂಘಟನೆಯಲ್ಲಿ ಸಂಯೋಜಿತ ವಿಧಾನ ತರುತ್ತವೆ. ಕಾರ್ಲ್ ಲಿನಿನಿಯಸ್ ನಿರ್ಮಿಸಿದ ವರ್ಗೀಕರಣ ವ್ಯವಸ್ಥೆಯಂತೆಯೇ, ನೀವು ಸಾಮಾನ್ಯ ಗುಣಗಳುಳ್ಳ ಮೂಲ ಕ್ಲಾಸ್‌ನಿಂದ ಪ್ರಾರಂಭಿಸಿ, ನಂತರ ವೈಶಿಷ್ಟ್ಯವಾರ್ಡ್ ಕಾರ್ಯಕ್ಷಮತೆ ಸೇರಿಸಿದ ವಿಶೇಷ ಕ್ಕ್ಲಾಸ್‌ಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತೀರಿ.
+
+✅ ورسತು ಒಂದು ಪ್ರಮುಖ ತತ್ವವಾಗಿದೆ. [MDN ನ ورسತು ಕುರಿತ ಲೇಖನ](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) ನಲ್ಲಿ ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಪಡೆಯಿರಿ.
+
+ನೀವು ಕ್ಲಾಸ್‌ಗಳು ಮತ್ತು ورسತು ಬಳಸಿ ಗೇಮ್ ವಸ್ತುಗಳನ್ನು ಹೇಗೆ ಜಾರಿಗೆ ತರುತ್ತೀರೆಯೋ ಹೀಗಿದೆ:
+
+```javascript
+// ಹಂತ 1: ಮೂಲ GameObject ವರ್ಗವನ್ನು ರಚಿಸಿ
+class GameObject {
+  constructor(x, y, type) {
+    this.x = x;
+    this.y = y;
+    this.type = type;
+  }
+}
+```
+
+**ಇದನ್ನು ಹಂತಹಂತವಾಗಿ ವಿವರಿಸೋಣ:**
+- ನಾವು ಪ್ರತಿಯೊಂದು ಗೇಮ್ ವಸ್ತುಗೂ ಬಳಸಬಹುದಾದ ಮೂಲ ಟೆಂಪ್ಲೇಟ್ ರಚಿಸುತ್ತಿದ್ದೇವೆ
+- ಕಾಂಸ್ಟ್ರಕ್ಟರ್ ವಸ್ತುವಿನ ಸ್ಥಾನ (`x`, `y`) ಮತ್ತು ಅದರ ಪ್ರಕಾರವನ್ನು ಉಳಿಸುತ್ತದೆ
+- ಇದು ಎಲ್ಲಾ ಗೇಮ್ ವಸ್ತುಗಳ ನಿರ್ಮಾಣದ ಆಧಾರ ಆಗುತ್ತದೆ
+
+```javascript
+// ಹಂತ 2: ವಂಶಪಾರಂಪರ್ಯದಿಂದ ಚಲನಾ ಸಾಮರ್ಥ್ಯವನ್ನು ಸೇರಿಸಿ
+class Movable extends GameObject {
+  constructor(x, y, type) {
+    super(x, y, type); // ಪೋಷಕ ಸಂರಚಕವನ್ನು ಕರೆಮಾಡಿ
+  }
+
+  // ಹೊಸ ಸ್ಥಾನಕ್ಕೆ ಚಲಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಸೇರಿಸಿ
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+```
+
+**ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ನಾವು:**
+- **GameObject ಕ್ಲಾಸ್** ಅನ್ನು ವಿಸ್ತರಿಸಿ ಚಲಿಸುವ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಿದ್ದೇವೆ
+- **ಪೋಷಕ ಕಾಂಸ್ಟ್ರಕ್ಟರ್** ಅನ್ನು `super()` ಮೂಲಕ ಕರೆಸಿ ورಸತು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಪ್ರಾರಂಭಿಸಿದ್ದೇವೆ
+- ವಸ್ತುವಿನ ಸ್ಥಾನವನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವ `moveTo()` ವಿಧಾನವನ್ನು ಸೇರಿಸಿದ್ದೇವೆ
+
+```javascript
+// ಹಂತ 3: ನಿರ್ದಿಷ್ಟ ಆಟ ವಸ್ತು ಪ್ರಕಾರಗಳನ್ನು ರಚಿಸಿ
+class Hero extends Movable {
+  constructor(x, y) {
+    super(x, y, 'Hero'); // ಪ್ರಕಾರವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಸಿ
+  }
+}
+
+class Tree extends GameObject {
+  constructor(x, y) {
+    super(x, y, 'Tree'); // ಮರಗಳು ಚಲನೆಯ ಅಗತ್ಯವಿಲ್ಲ
+  }
+}
+
+// ಹಂತ 4: ನಿಮ್ಮ ಆಟ ವಸ್ತುಗಳನ್ನು ಬಳಸಿ
+const hero = new Hero(0, 0);
+hero.moveTo(5, 5); // ವೀರ ರೈ ಚಲಿಸಬಹುದು!
+
+const tree = new Tree(10, 15);
+// tree.moveTo()ಗೆ ದೋಷವಾಗುತ್ತದೆ - ಮರಗಳು ಚಲಿಸಲು കഴിയುವುದಿಲ್ಲ
+```
+
+**ಈ ತತ್ತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ:**
+- ಸೂಕ್ತ ವ್ಯವಹಾರಗಳನ್ನು ورಸತು ಮಾಡುವ ವಿಶೇಷ ವಸ್ತು ತಯಾರಿಸುತ್ತದೆ
+- ورسತುವು ಆಯ್ಕೆಮಾಡಿದ ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ತೋರಿಸುತ್ತದೆ
+- ಹೀರೋಗಳು ಚಲಿಸಬಹುದು ಆದರೆ ಮರಗಳು ಅಚಲಿತವಾಗಿರುತ್ತವೆ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ
+- ವರ್ಗ ಕ್ರಮವು ಅಸಂಗತ ಕ್ರಿಯೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ
+
+✅ ಪ್ಯಾಕ್-ಮ್ಯಾನ್ ಹೀರೋ (ಉದಾಹರಣೆಗೆ ಇಂಕಿ, ಪಿಂಕಿ ಅಥವಾ ಬ್ಲಿಂಕಿ) ಅನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಹೇಗೆ ಬರೆಯಬಹುದು ಎಂದು ಕೆಲನಿಮೆ ನೋಟ ಮಾಡಿ.
+
+**ಸಂಕಲನ (Composition) ವಿಧಾನ**
+
+ಸಂಕಲನವು ಜಾಗತಿಕ ವಿನ್ಯಾಸ ತತ್ವವನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಬಾಹ್ಯಾಕಾಶ ನೌಕೆಯ ವಿಭಿನ್ನ ಭಾಗಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡುವ ಇಂಜಿನಿಯರ್‌ಗಳ ಶೈಲಿಯನ್ನು ಹೋಲುತ್ತದೆ. ಪೋಷಕ ಕ್ಲಾಸ್‌ನಿಂದ ورಸತು ಮಾಡುವ ಬದಲು, ಅಗತ್ಯವಿರುವ ನಡವಳಿಕೆಗಳನ್ನು ಸಂಯೋಜಿಸಿ ನಿಖರವಾಗಿ ಕೆಲವೊಂದು ಕಾರ್ಯಗಳನ್ನಿಟ್ಟುಕೊಂಡಿ ವಸ್ತುಗಳನ್ನು ರಚಿಸುತ್ತೇವೆ. ಈ ವಿಧಾನ ಅತಿಯಾದ hierarchical ನಿಯಮಗಳಿಲ್ಲದೆ ಬದಲಾಗುವಿಕೆಯನ್ನು ನೀಡುತ್ತದೆ.
+
+```javascript
+// ಹಂತ 1: ಮೂಲ ವರ್ತನೆ ವಸ್ತುಗಳನ್ನು ರಚಿಸಿ
+const gameObject = {
+  x: 0,
+  y: 0,
+  type: ''
+};
+
+const movable = {
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+};
+```
+
+**ಈ ಕೋಡ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- ಸ್ಥಾನ ಮತ್ತು ಪ್ರಕಾರ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಮೂಲ `gameObject` ರೂಪಿಸುತ್ತೆ
+- ಚಲಿಸುವ ಕಾರ್ಯ ಹೊಂದಿರುವ `movable` ಸಂವಹನ ವಸ್ತುವನ್ನು ಕಾಯ್ದಿರಿಸುತ್ತದೆ
+- ಸ್ಥಾನ ಮಾಹಿತಿ ಮತ್ತು ಚಲಿಸುವ ನಿಯಮ ಸ್ವತಂತ್ರವಾಗಿರುತ್ತವೆ
+
+```javascript
+// ಹಂತ 2: ನರ್ತನೆಗಳನ್ನು ಒಟ್ಟು ಸೇರಿಸುವ ಮೂಲಕ ವಸ್ತುಗಳನ್ನು ರಚಿಸಿ
+const movableObject = { ...gameObject, ...movable };
+
+// ಹಂತ 3: ವಿಭಿನ್ನ ವಸ್ತು ಪ್ರಕಾರಗಳಿಗಾಗಿ ಕಾರ್ಖಾನೆ ಕಾರ್ಯಗಳನ್ನು ಸೃಷ್ಟಿಸಿ
+function createHero(x, y) {
+  return {
+    ...movableObject,
+    x,
+    y,
+    type: 'Hero'
+  };
+}
+
+function createStatic(x, y, type) {
+  return {
+    ...gameObject,
+    x,
+    y,
+    type
+  };
+}
+```
+
+**ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ನಾವು:**
+- ಮೂಲ ವಸ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮತ್ತು ಚಲಿಸುವ ಕಾರ್ಯವನ್ನು spread syntax ಬಳಸಿ ಸಂಯೋಜಿಸಿದ್ದೇವೆ
+- ಕಸ್ಟಮ್ ವಸ್ತುಗಳನ್ನು ಹೊಂದುತ್ತಿರುವ ಫ್ಯಾಕ್ಟರಿ ಕಾರ್ಯಗಳನ್ನು ರಚಿಸಿದ್ದೇವೆ
+- ಕಠಿಣ ವರ್ಗ ಪಟ್ಟಿಗಳನ್ನು ಬಿಟ್ಟು, ಸ್ವತಂತ್ರ ವಸ್ತುಗಳ ಸೃಷ್ಟிಗೆ ಅನುಕೂಲವಿದೆ
+- ವಸ್ತುಗಳಿಗೆ ಅವಶ್ಯಕ ನಡವಳಿಕೆಗಳನ್ನಷ್ಟೇ ನೀಡಿ
+
+```javascript
+// ಹಂತ 4: ನಿಮ್ಮ ಸಂಯೋಜಿತ ವಸ್ತುಗಳನ್ನು ರಚಿಸಿ ಮತ್ತು ಬಳಸಿ
+const hero = createHero(10, 10);
+hero.moveTo(5, 5); // ಸಂಪೂರ್ಣವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ!
+
+const tree = createStatic(0, 0, 'Tree');
+// tree.moveTo() ವ್ಯಾಖ್ಯಾನಿತವಲ್ಲ - ಯಾವುದೇ ಚಲನೆಯ ವರ್ತನೆಯನ್ನು ಸಂಯೋಜಿಸಲಾಗಿಲ್ಲ
+```
+
+**ಪ್ರಧಾನ ಅಂಶಗಳು:**
+- ವಸ್ತುಗಳನ್ನು ورسತು ಮಾಡದೆ ನಡವಳಿಕೆಗಳನ್ನು ಮಿಶ್ರಣಗೊಳಿಸುತ್ತದೆ
+- ಕಠಿಣ ورسತು ಪಟ್ಟಿಗಳಿಗಿಂತ ಹೆಚ್ಚು ಸ್ವಾತಂತ್ರ್ಯ ಒದಗಿಸುತ್ತದೆ
+- ವಸ್ತುಗಳಿಗೆ ಅವಶ್ಯಕ ಲಕ್ಷಣಗಳನ್ನು ಮಾತ್ರ ನೀಡಬಹುದು
+- ಸ್ವಚ್ಛ ವಸ್ತು ಸಂಯೋಜನೆಗೆ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ spread ಪಂಕ್ತಿ ಉಪಯೋಗಿಸುತ್ತದೆ
+```
+
+**Which Pattern Should You Choose?**
+
+**Which Pattern Should You Choose?**
+
+```mermaid
+quadrantChart
+    title Code Organization Patterns
+    x-axis Simple --> Complex
+    y-axis Rigid --> Flexible
+    quadrant-1 Advanced Composition
+    quadrant-2 Hybrid Approaches
+    quadrant-3 Basic Inheritance
+    quadrant-4 Modern Composition
+    
+    Class Inheritance: [0.3, 0.2]
+    Interface Implementation: [0.6, 0.4]
+    Mixin Patterns: [0.7, 0.7]
+    Pure Composition: [0.8, 0.9]
+    Factory Functions: [0.5, 0.8]
+    Prototype Chain: [0.4, 0.3]
+```
+
+> 💡 **ಪರಿಷ್ಕೃತ ಸಲಹೆ**: ಇವು ಎರಡೂ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ತಮ್ಮ ಸ್ಥಾನ ಇವೆ. ವರ್ಗಗಳು ಸ್ಪಷ್ಟ ವರ್ಗೀಕರಣಗಳಿಗೆ మంచಿದಾಗ, ಸಂಕಲನ ಅತ್ಯಧಿಕ ಸ್ವಾತಂತ್ರ್ಯ ಬೇಕಾದಾಗ ಪ್ರಮುಖವಾಗುತ್ತದೆ.
+> 
+**ಏವತ್ತಿಗೆ ಯಾವ ವಿಧಾನ ಬಳಸುವುದು:**
+- ಸ್ಪಷ್ಟ "ಇದೆ-ಅದು" ಸಂಬಂಧಗಳಿದ್ದಾಗ ورسತು ಆಯ್ಕೆಮಾಡಿ (ಹೀರೋ *ಇದೆ-ಅದು* ಚಲಿಸುವ ವಸ್ತು)
+- "ಹೇಳಿಕೊಳ್ಳುವುದಿದೆ" ಸಂಬಂಧಗಳಿದ್ದಾಗ ಸಂಕಲನ ಆರಿಸಿ (ಹೀರೋಗೆ ಚಲಿಸುವ ಸಾಮರ್ಥ್ಯ ಇದೆ)
+- ನಿಮ್ಮ ತಂಡದ ಇಷ್ಟಗಳು ಮತ್ತು ಪ್ರಾಜೆಕ್ಟ್ ಅಗತ್ಯಗಳನ್ನು ಪರಿಗಣಿಸಿ
+- ಒಂದೇ ಅನ್ವಯಿಕೆಯಲ್ಲಿ ಎರಡನ್ನೂ ಮಿಶ್ರಣ ಮಾಡಬಹುದು ಎಂದು ನೆನಪಿಡಿ
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ವಸ್ತು ಸಂಘಟನೆ ಅರ್ಥ:** ಸಂವಹನ ಮಾದರಿಗಳಿಗೆ ಹೋಗುವ ಮೊದಲು ಪ್ರಮಾಣೀಕರಿಸಿ:
+- ✅ ورسತು ಮತ್ತು ಸಂಕಲನ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ವಿವರಿಸಬಹುದು
+- ✅ ಕ್ಲಾಸ್‌ಗಳು ಮತ್ತು ಫ್ಯಾಕ್ಟರಿ ಕಾರ್ಯಗಳು ಯಾವಾಗ ಬಳಸದಾಗ ತಿಳಿದುಕೊಳ್ಳಿ
+- ✅ ورسತುನಲ್ಲಿ `super()` ಕುರಿತು ಅರಿತುಕೊಳ್ಳಿ
+- ✅ ಗೇಮ್ ಅಭಿವೃದ್ಧಿಗೆ ಈ ಎರಡು ವಿಧಾನಗಳ ಪ್ರಯೋಜನಗಳನ್ನು ಗುರುತಿಸಿ
+
+**ತ್ವರಿತ ಸ್ವಯಂ ಪರೀಕ್ಷೆ**: ಚಲಿಸುವ ಮತ್ತು ಹಾರುವ ಶತ್ರುವನ್ನು ಹೇಗೆ ರಚಿಸುವಿರಿ?
+- ورسತು ವಿಧಾನ: `class FlyingEnemy extends Movable`
+- ಸಂಕಲನ ವಿಧಾನ: `{ ...movable, ...flyable, ...gameObject }`
+
+**ಯಥಾರ್ಥ ಸಂಪರ್ಕ**: ಈ ಮಾದರಿಗಳು ಎಲ್ಲೂ ಕಾಣುತ್ತವೆ:
+- **ರಿಯಾಕ್ಟ್ ಘಟಕಗಳು**: Props (ಸಂಕಲನ) ವಿರುದ್ಧ ವರ್ಗ ورسतु
+- **ಆಟ ಎಂಜಿನ್ಗಳು**: Entity-component ವ್ಯವಸ್ಥೆಗಳು ಸಂಕಲನ ಬಳಸುತ್ತವೆ
+- **ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: UI ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು ಹೆಚ್ಚಿನ ಬಾರಿ ورسತು ಪಟ್ಟಿ ಹೊಂದಿರುತ್ತವೆ
+
+## ಸಂವಹನ ಮಾದರಿಗಳು: ಪಬ್/ಸಬ್ ವ್ಯವಸ್ಥೆ
+
+ಆ್ಯಪ್ಲಿಕೇಶನ್ಗಳು ಸಂಕೀರ್ಣವಾಗುತ್ತಿದ್ದಂತೆ, ಭಾಗಗಳ ನಡುವೆ ಸಂವಹನ ನಿಯಂತ್ರಣ ಕಠಿಣವಾಗುತ್ತದೆ. ಪ್ರಕಟಣೆ-ಚಂದಾದಾರಿಕೆ ಮಾದರಿ (pub/sub) ರೇಡಿಯೋ ಪ್ರಸಾರದ ನಿಯಮಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ – ಒಂದು ಪ್ರಸಾರಕ ಅನೇಕ ಅಂಗೀಕರಿಸುವವರಿಗೂ ತಲುಪಬಹುದು ಆದರೆ ಯಾರು ಕೇಳುತ್ತಿದ್ದಾರೆ ಎಂಬುದನ್ನು ತಿಳಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.
+
+ಒಂದು ಹೀರೋಗೆ ಹಾನಿ ಆಗುವಾಗ ಏನು ಆಗుతೆಂದು ಗಮನಿಸಿ: ಆರೋಗ್ಯ ಪಟ್ಟಿಯು ಅಪ್ಡೇಟ್ ಆಗುತ್ತದೆ, ಧ್ವನಿ ಪರಿಣಾಮಗಳು ನುಡಿಯುತ್ತವೆ, ದೃಶ್ಯ ವೀಕ್ಷಣೆ ಸಿಗುತ್ತದೆ. ಹೀರೋ ವಸ್ತುವನ್ನು ಈ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ನೇರವಾಗಿ ಜೋಡಿಸುವ ಬದಲು pub/sub ಹೀರೋ "ಹಾನಿ ಆಗಿದೆ" ಸಂದೇಶವನ್ನು ಪ್ರಸಾರ ಮಾಡುತ್ತದೆ. ಪ್ರತಿಕ್ರಿಯಿಸುವ ಅಗತ್ಯವಿರುವ ವ್ಯವಸ್ಥೆಗಳು ಈ ಸಂದೇಶ ಪ್ರಕಾರಕ್ಕೆ ಚಂದಾಗಬಹುದು ಮತ್ತು ಸೂಕ್ತವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ.
+
+✅ **ಪಬ್/ಸಬ್** ಅಂದರೆ 'ಪ್ರಕಟಣೆ-ಚಂದಾದಾರಿಕೆ'
+
+```mermaid
+flowchart TD
+    A[ಹೀರೋಗೆ ಹಾನಿ ಆಗಿತು] --> B[ಪ್ರಕಾಶನ: HERO_DAMAGED]
+    B --> C[ಇವೆಂಟ್ ವ್ಯವಸ್ಥೆ]
+    
+    C --> D[ಆರೋಗ್ಯ ಬಾರ್ ಚಂದಾದಾರ]
+    C --> E[ಧ್ವನಿ ವ್ಯವಸ್ಥೆ ಚಂದಾದಾರ]
+    C --> F[ವಿಜುಯಲ್ ಪರಿಣಾಮಗಳ ಚಂದಾದಾರ]
+    C --> G[ಅರ್ಚಿವ್ ವ್ಯವಸ್ಥೆ ಚಂದಾದಾರ]
+    
+    D --> H[ಆರೋಗ್ಯ ತೋರಣವನ್ನು ನವೀಕರಿಸಿ]
+    E --> I[ಹಾನಿ ಧ್ವನಿಯನ್ನು ವಾದಿಸಿ]
+    F --> J[ಕೆಂಪು ಬೆಳಕನ್ನು ತೋರಿಸಿ]
+    G --> K[ಬಾಳು ಸಾಧನೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ]
+    
+    style A fill:#ffebee
+    style B fill:#e1f5fe
+    style C fill:#e8f5e8
+    style H fill:#fff3e0
+    style I fill:#fff3e0
+    style J fill:#fff3e0
+    style K fill:#fff3e0
+```
+### ಪಬ್/ಸಬ್ ವಾಸ್ತುಶಿಲ್ಪದ ಅರ್ಥ
+
+ಪಬ್/ಸಬ್ ಮಾದರಿ ನಿಮ್ಮ ಅನ್ವಯಿಕೆಯಲ್ಲಿ ವಿಭಿನ್ನ ಭಾಗಗಳನ್ನು ಸ್ವತಂತ್ರವಾಗಿರಲು ಸಹಾಯಕ, ಅಂದರೆ ಅವು ಒಂದರ ಮೇಲೊಂದರ ನೇರ ಅವಲಂಬನೆಯಲ್ಲಿ ಇಲ್ಲದೆ ಕೆಲಸ ಮಾಡಬಹುದು. ಈ ವಿಭಜನೆ ನಿಮ್ಮ ಕೋಡ್ ನಿರ್ವಹಣೀಯತೆ, ಪರೀಕ್ಷಾಧಿಕಾರ ಮತ್ತು ಬದಲಾವಣೆಗಳಿಗೆ ಸುಲಭವಾಗಿಸುತ್ತದೆ.
+
+**ಪಬ್/ಸಬ್‌ನ ಪ್ರಮುಖ ಪಾತ್ರಧಾರಕರು:**
+- **ಸಂದೇಶಗಳು** – `'PLAYER_SCORED'` ಹೀಗೆ ಸರಳ ಪಠ್ಯ ಲೇಬಲ್, ಏನಾಗಿದ್ದು ಎಂದು ವಿವರಿಸುವುದು (ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಕೂಡ ಇರಬಹುದು)
+- **ಪ್ರಕಟಕರು** – "ಏನಾದರು ನಡೆದಿದೆ!" ಎಂದು ಯಾರಿಗೂ ಕೇಳುವವರಿಗಾಗಿಯೂ ಘೋಷಿಸುವ ವಸ್ತುಗಳು
+- **ಚಂದಾದಾರರು** – "ನನಗೆ ಆ ಘಟನೆ ಮುಖ್ಯ" ಎಂದು ಹೇಳಿ ಆಗುವ ಸಮಯದಲ್ಲಿ ಪ್ರತಿಕ್ರಿಯಿಸುವ ವಸ್ತುಗಳು
+- **ಈವೆಂಟ್ ವ್ಯವಸ್ಥೆ** – ಸಂದೇಶಗಳು ಸರಿಯಾದ ಕೇಳುವವರಿಗೆ ತಲುಪಲು ಜಂಟಿಯರಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದು
+
+### ಈವೆಂಟ್ ವ್ಯವಸ್ಥೆ ನಿರ್ಮಾಣ
+
+ಈ ತತ್ತ್ವಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಸರಳವಾದ, ಆದರೆ ಶಕ್ತಿಶಾಲಿ ಈವೆಂಟ್ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸೋಣ:
+
+```javascript
+// ಹಂತ 1: ಇವೆಂಟ್ ಎಮಿಟರ್ ಕ್ಲಾಸ್ ಅನ್ನು ರಚಿಸಿ
+class EventEmitter {
+  constructor() {
+    this.listeners = {}; // ಎಲ್ಲಾ ಇವೆಂಟ್ ಶ್ರೋತೃಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ
+  }
+  
+  // ನಿರ್ದಿಷ್ಟ ಸಂದೇಶ ಪ್ರಕಾರಕ್ಕೆ ಶ್ರೋತೃನ್ನು ನೋಂದಣಿ ಮಾಡಿ
+  on(message, listener) {
+    if (!this.listeners[message]) {
+      this.listeners[message] = [];
+    }
+    this.listeners[message].push(listener);
+  }
+  
+  // ಎಲ್ಲಾ ನೋಂದಣಿ ಮಾಡಿದ ಶ್ರೋತೃಗಳಿಗೆ ಸಂದೇಶ ಕಳುಹಿಸಿ
+  emit(message, payload = null) {
+    if (this.listeners[message]) {
+      this.listeners[message].forEach(listener => {
+        listener(message, payload);
+      });
+    }
+  }
+}
+```
+
+**ಇಲ್ಲಿ ಆಗುವ ಕಾರ್ಯಗಳ ವಿವರಣೆ:**
+- ಸರಳ ಕ್ಲಾಸ್ ಬಳಸಿ ಕೇಂದ್ರದ ಈವೆಂಟ್ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆ ರಚನೆ
+- ಸಂದೇಶ ಪ್ರಕಾರದ ಪ್ರಕಾರ ಕೇಳುವವರನ್ನು ವಸ್ತುವಿನಲ್ಲಿ ಸಂಗ್ರಹಣೆ
+- `on()` ವಿಧಾನದಿಂದ ಹೊಸ ಕೇಳುವವರನ್ನು ದಾಖಲು
+- `emit()` ಬಳಸಿ ಎಲ್ಲ ಆಸಕ್ತ ಕೇಳುವವರಿಗೆ ಸಂದೇಶ ಪ್ರಸಾರ
+- ಸಂಬಂಧಿತ ಮಾಹಿತಿಯನ್ನು ಹಂಚಲು ಐಚ್ಛಿಕ ಡೇಟಾ ಪ್ಯಾಲೋಡ್‌ಗೆ ಬೆಂಬಲ
+
+### ಎಲ್ಲವನ್ನು ಒಟ್ಟಾಗಿ ಹಾಕಿ: ಪ್ರಯೋಗಾತ್ಮಕ ಉದಾಹರಣೆ
+
+ನೋಡಿ, pub/sub ಹೇಗೆ ಕ್ಲೀನ್ ಮತ್ತು ಸ್ವತಂತ್ರವಾಗಿರಬಹುದು ಎಂಬುದು ಈ ಸರಳ ಚಲನಾ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ:
+
+```javascript
+// ಹಂತ 1: ನಿಮ್ಮ ಸಂದೇಶ ಪ್ರಕಾರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ
+const Messages = {
+  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT',
+  HERO_MOVE_RIGHT: 'HERO_MOVE_RIGHT',
+  ENEMY_SPOTTED: 'ENEMY_SPOTTED'
+};
+
+// ಹಂತ 2: ನಿಮ್ಮ ಈವೆಂಟ್ ಸಿಸ್ಟಮ್ ಮತ್ತು ಗೇಮ್ ವಸ್ತುಗಳನ್ನು ರಚಿಸಿ
+const eventEmitter = new EventEmitter();
+const hero = createHero(0, 0);
+```
+
+**ಈ ಕೋಡ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- ಸಂದೇಶ ಹೆಸರಿನಲ್ಲಿ ಟೈಪೊ ತಪ್ಪುಗಳಿಲ್ಲದಂತೆ ಕಾನ್ಸ್‌ಟ್ಯಾಂಟ್ಸ್ ವಸ್ತುವನ್ನು నిర్వಚಿಸುತ್ತದೆ
+- ಎಲ್ಲಾ ಸಂವಹನಕ್ಕಾಗಿ ಈವೆಂಟ್ ಎಮಿಟರ್ ಘಟಕವನ್ನು ರಚಿಸುತ್ತದೆ
+- ಆರಂಭಿಕ ಸ್ಥಾನದಲ್ಲಿರುವ ಹೀರೋ ವಸ್ತುವನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ
+
+```javascript
+// ಹಂತ 3: ಘಟನೆಯ ಶ್ರೋತೃಗಳು (ವಂದಿಗಾರರು) ಸೆಟ್ ಅಪ್ ಮಾಡಿ
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.moveTo(hero.x - 5, hero.y);
+  console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
+});
+
+eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
+  hero.moveTo(hero.x + 5, hero.y);
+  console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
+});
+```
+
+**ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ನಾವು:**
+- ಚಲನಾ ಸಂದೇಶಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಈವೆಂಟ್ ಕೇಳುವವರನ್ನು ದಾಖಲೆ ಮಾಡಿದ್ದೇವೆ
+- ಚಲನಾ ದಿಕ್ಕು ಆಧಾರದ ಮೇಲೆ ಹೀರೋ ಸ್ಥಾನವನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಿದೆವು
+- ಹೀರೋ ಸ್ಥಾನ ಬದಲಾವಣೆಯ ಕನ್ಸೋಲ್ ಲಾಗ್‌ಗಳನ್ನು ಸೇರಿಸಿದೆವು
+- ಚಲನೆಯ ನಿಯಮವನ್ನು ಇನ್‌ಪುಟ್ ನಿರ್ವಹಣೆಯಿಂದ ವಿಭಜಿಸಿದೆವು
+
+```javascript
+// ದರ್ಜೆ 4: ಕೀಬೋರ್ಡ್ ಇನ್‌ಪುಟ್ ಅನ್ನು ಘಟನೆಗಳಿಗೆ (ಪ್ರಕಟಕರು) ಸಂಪರ್ಕಿಸಿ
+window.addEventListener('keydown', (event) => {
+  switch(event.key) {
+    case 'ArrowLeft':
+      eventEmitter.emit(Messages.HERO_MOVE_LEFT);
+      break;
+    case 'ArrowRight':
+      eventEmitter.emit(Messages.HERO_MOVE_RIGHT);
+      break;
+  }
+});
+```
+
+**ಈ ತತ್ತ್ವಗಳನ್ನು ಅರಿತುಕೊಳ್ಳಿ:**
+- ಕೀಬೋರ್ಡ್ ಇನ್‌ಪುಟ್ ಅನ್ನು ಗೇಮ್ ಘಟನೆಗಳಿಗೆ ನೇರ ಅವಲಂಬನೆ ಇಲ್ಲದೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ
+- ಇನ್‌ಪುಟ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಗೇಮ್ ವಸ್ತುಗಳಿಗೆ ಪರೋಕ್ಷವಾಗಿ ಸಂವಹನ ಮಾಡುವಂತೆ ಅನುಮತಿಸುತ್ತದೆ
+- ಒಂದೇ ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳಿಗೆ ಹಲವಾರು ವ್ಯವಸ್ಥೆಗಳು ಪ್ರತಿಕ್ರಿಯಿಸಬಹುದು
+- ಕೀ ಬಿಂಧನಗಳನ್ನು ಬದಲಾಯಿಸುವುದಕ್ಕೆ ಅಥವಾ ಹೊಸ ಇನ್‌ಪುಟ್ ವಿಧಾನಗಳನ್ನು ಸೇರಿಸುವುದಕ್ಕೆ ಸುಲಭವಾಗಿಸಿದುದು
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Keyboard
+    participant EventEmitter
+    participant Hero
+    participant SoundSystem
+    participant Camera
+    
+    User->>Keyboard: ಬಲಕ್ಕೆ ಬಣ್ಣ ತಳ್ಳಿ
+    Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
+    EventEmitter->>Hero: 5 ಪಿಕ್ಸೆಲ್‌ಗಳಷ್ಟು ಎಡಕ್ಕೆ ಸರಿಸಿ
+    EventEmitter->>SoundSystem: ಪಾದಚಾಪ ಧ್ವನಿ播放ಮಾಡಿ
+    EventEmitter->>Camera: ಹೀರೋವನ್ನು ಅನುಸರಿಸಿ
+    
+    Hero->>Hero: ಸ್ಥಾನವನ್ನು ನವೀಕರಿಸಿ
+    SoundSystem->>SoundSystem: ಧ್ವನಿ播放ಮಾಡಿ
+    Camera->>Camera: ವೀಕ್ಷಣಾ ವಿಂಡೋವನ್ನು ಹೊಂದಿಸಿ
+```
+> 💡 **ಪರಿಷ್ಕೃತ ಸಲಹೆ**: ಈ ಮಾದರಿಯ ಸೊಬಗು ಎಂದರೆ ತಲೆಕೆಡಿಸದ ಸ್ವಾತಂತ್ರ್ಯ! ನೀವು ಹೆಚ್ಚು ಈವೆಂಟ್ ಕೇಳುವವರನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಧ್ವನಿ ಪರಿಣಾಮಗಳು, ಪರದೆ ಕಂಗೊಳಿಸುವಿಕೆ ಅಥವಾ ಕಣ ಪರಿಣಾಮಗಳನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಬಹುದು – ಇತ್ತೀಚಿನ ಕೀಬೋರ್ಡ್ ಅಥವಾ ಚಲನೆಯ ಕೋಡ್ ಬದಲಾಯಿಸಬೇಕಾಗಿಲ್ಲ.
+> 
+**ಈ ವಿಧಾನ ನಿಮಗೆ ಇಷ್ಟವಾಗುವ ಕಾರಣ:**
+- ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸುವುದು ಅತ್ಯಂತ ಸುಲಭ – ನೀವು ಗಮನಿಸುವ ಘಟನೆಗಳನ್ನು ಮಾತ್ರ ಕೇಳಿರಿ
+- ಹಲವಾರು ಅಂಶಗಳು ಒಂದೇ ಘಟನೆಯ ಉತ್ತರವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸಬಹುದು ಆದರೆ ಪರಸ್ಪರ ಅಡ್ಡಿಪಡಿಸುವುದಿಲ್ಲ
+- ಪ್ರತಿ ಭಾಗವೂ ಸ್ವತಂತ್ರವಾಗಿ ಕೆಲಸ ಮಾಡುವುದರಿಂದ ಪರೀಕ್ಷೆ ಸರಳವಾಗುತ್ತದೆ
+- ಯಾವುದಾದರೂ ತಪ್ಪು ಬಂದರೆ, ನೀವು ಸೂಚಿಸಬೇಕಾದ ಸ್ಥಳವನ್ನು ಏನೂ ತಿಳಿದುಕೊಳ್ಳಬಹುದು
+
+### ಪಬ್/ಸಬ್ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಏಕೆ ಹೇರಳವಾಗುತ್ತದೆ
+
+ಅನ್ವಯಿಕೆಗಳಷ್ಟು ಸಂಕೀರ್ಣವಾಗುತ್ತಾ ಇದ್ದರೂ, ಪಬ್/ಸಬ್ ಮಾದರಿ ಸರಳತೆಯನ್ನು ಕಾಪಾಡುತ್ತದೆ. ದಶಕಗಳ ಶತ್ರುಗಳು, ಡೈನಾಮಿಕ್ UI ನವೀಕರಣಗಳು ಅಥವಾ ಧ್ವನಿ ವ್ಯವಸ್ಥೆಗಳ ನಿರ್ವಹಣೆಯನ್ನು ಕೂಡ ಗುಣಮಟ್ಟದ ಬದಲಾವಣೆ್ಮಾಡದೆ ಈ ಮಾದರಿ ಹೊತ್ತೊಯ್ಯುತ್ತದೆ. ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳು ಈಗಾಗಲೇ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಈವೆಂಟ್ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಲಯವಾಗಿ ಸೇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಸ್ಥಾಪಿತ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹಾನಿಮಾಡುವುದಿಲ್ಲ.
+
+> ⚠️ **ಸಾಮಾನ್ಯ ತಪ್ಪು**: ಮೊದಲೇ ಹೆಚ್ಚು ವಿಶೇಷ ಸಂದೇಶ ಪ್ರಕಾರಗಳನ್ನು ಸೃಷ್ಟಿಸಬೇಡಿ. ವಿಶಾಲ ವರ್ಗಗಳನ್ನು ಪ್ರಾರಂಭಿಸಿ, ನಿಮ್ಮ ಆಟದ ಅಗತ್ಯಗಳು ಸ್ಪಷ್ಟವಾಗಲಿವೆ ಎಂದು ಅವುಗಳನ್ನು ಸುಧಾರಿಸುತ್ತಿರಿ.
+> 
+**ಅನುಸರಿಸಬಹುದಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು:**
+- ಸಂಬಂಧಿಸಿದ ಸಂದೇಶಗಳನ್ನೊಳಗೊಂಡ ವರ್ಗಗಳನ್ನು ಗುಚ್ಛಗೊಳಿಸಿ
+- ಏನಾಗಿದೆಯೆಂದು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸುವ ವಿವರ ಹಿಡಿತ ಹೆಸರನ್ನು ಬಳಸಿ
+- ಸಂದೇಶ ಪ್ಯಾಲೋಡ್‌ಗಳನ್ನು ಸರಳವಾಗಿ ಮತ್ತು ಧ್ಯಾನದೊಂದಿಗೆ ಇಡಿ
+- ತಂಡದ ಸಹಕಾರಕ್ಕಾಗಿ ನಿಮ್ಮ ಸಂದೇಶ ಪ್ರಕಾರಗಳನ್ನು ದಾಖಲಿಸಿ
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಈವೆಂಟ್ ಆಧಾರಿತ ವಾಸ್ತುಶಿಲ್ಪ ಅರ್ಥ:** ಸಂಪೂರ್ಣ ವ್ಯವಸ್ಥೆಯ ಮೇಲೆ ನಿಮ್ಮ grasp ಪರಿಶೀಲಿಸಿ:
+- ✅ ಪಬ್/ಸಬ್ ಮಾದರಿ ಭಾಗಗಳ ನಡುವೆ ನೇರ ಅವಲಂಬನವನ್ನು ಹೇಗೆ ತಡೆಯುತ್ತದೆ?
+- ✅ ಈವೆಂಟ್-ಚಾಲಿತ ವಾಸ್ತುಶಿಲ್ಪದಲ್ಲಿ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸುವುದು ಸುಲಭವಾಗುವುದೇಕೆ?
+- ✅ ಸಂವಹನ ಪ್ರವಾಹದಲ್ಲಿ EventEmitter ಪಾತ್ರವೇನು?
+- ✅ ಸಂದೇಶ ಕಾನ್ಸ್‌ಟ್ಯಾನ್ಗಳು ಬಗ್ಗುಗಳು ತಪ್ಪುಗಳನ್ನು ತಡೆಯಲು ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸಲು ಹೇಗೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ?
+
+**ವಿನ್ಯಾಸ ಸವಾಲು**: ಈ ಗೇಮ್ ದೃಶ್ಯಗಳನ್ನು ಪಬ್/ಸಬ್ನಲ್ಲಿ ನೀವು ಹೇಗೆ ನಿರ್ವಹಿಸುವಿರಿ?
+1. **ಶತ್ರು ಮುಗಿದಾಗ**: ಸ್ಕೋರ್ ಅಪ್ಡೇಟ್ ಮಾಡಿ, ಧ್ವನಿ ಪೈಪ, ಶಕ್ತಿ ವಿಸ್ತರಣೆ ಹುಟ್ಟಿಸುವುದು, ಪರದೆ ರಿಂದ ತೆಗೆದುಹಾಕುವುದು
+2. **ಲೆವೆಲ್ ಪೂರ್ಣಗೊಂಡಾಗ**: ಸಂಗೀತ ನಿಲ್ಲಿಸಿ, UI ತೋರಿಸಿ, ಪ್ರಗತಿ ಉಳಿಸಿ, ಮುಂದಿನ ಲೆವೆಲ್ ಲೋಡ್ ಮಾಡಿ
+3. **ಶಕ್ತಿ ವಿಸ್ತರಣೆ ಸೃಷ್ಟಿಯಾದಾಗ**: ಸಾಮರ್ಥ್ಯ ಹೆಚ್ಚಿಸಿ, UI ನವೀಕರಿಸಿ, ಪರಿಣಾಮ ಪೈಪ ಮಾಡಿ, ಟೈಮರ್ ಪ್ರಾರಂಭಿಸಿ
+
+**ಪರಿಗಣನೆ ಸಂಪರ್ಕ**: ಈ ಮಾದರಿ ಎಲ್ಲದರಲ್ಲಿ ಕಂಡುಬರುತ್ತದೆ:
+- **ಮುಂಭಾಗ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು**: ರಿಯಾಕ್ಟ್/ವ್ಯೂ ಈವೆಂಟ್ ವ್ಯವಸ್ಥೆಗಳು
+- **ಹಿನ್ನೆಲೆ ಸೇವೆಗಳು**: ಮೈಕ್ರೋಸರ್ವೀಸ್ ಸಂವಹನ
+- **ಆಟ ಎಂಜಿನ್ಗಳು**: ಯುನಿಟ್ಟಿಯ ಈವೆಂಟ್ ವ್ಯವಸ್ಥೆಗಳು
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: iOS/Android ಸೂಚನಾ ವ್ಯವಸ್ಥೆಗಳು
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಈ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ورسತು ಮತ್ತು ಪಬ್/ಸಬ್ ಮಾದರಿಯನ್ನು ಬಳಸಿ ಸರಳ ಗೇಮ್ ವಸ್ತು ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿ. ವಿವಿಧ ವಸ್ತುಗಳು ಪರಸ್ಪರ ನೇರವಾಗಿ ತಿಳಿದುಕೊಳ್ಳದೆ ಘಟનાઓ ಮೂಲಕ ಸಂವಹನ ಮಾಡಲಿರುವ ಮೂಲಭೂತ ಆಟವನ್ನು ಜಾರಿಗೆ ತರುವಿರಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಈ ಕೆಳಗಿನ ಅಗತ್ಯತೆಯಿಂದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗೇಮ್ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿ: 1) x, y ಸಂಯೋಜಿತ ಮತ್ತು ಪ್ರಕಾರ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಮೂಲ GameObject ಕ್ಲಾಸ್ ರಚಿಸಿ. 2) GameObject ಅನ್ನು ವಿಸ್ತರಿಸುವ ಮತ್ತು ಚಲಿಸಬಹುದಾದ ಹೀರೋ ಕ್ಲಾಸ್ ರಚಿಸಿ. 3) ಹೀರೋವನ್ನು ಹಿಂಬಾಲಿಸಬಹುದಾದ ಶತ್ರು(GameObject ವಿಸ್ತಾರ) ಕ್ಲಾಸ್ ರಚಿಸಿ. 4) ಪಬ್/ಸಬ್ ಮಾದರಿಗಾಗಿ EventEmitter ಕ್ಲಾಸ್ ಜಾರಿಗೆ ತರುವುದು. 5) ಹೀರೋ ಚಲಿಸಿದಾಗ, ಸುತ್ತಲೂ ಇರುವ ಶತ್ರುಗಳಿಗೆ 'HERO_MOVED' ಘಟನೆ ಸೌಲಭ್ಯ ನೀಡಿ, ಅವರು ಹೀರೊ ಕಡೆ ಚಲಿಸಲು ತಮ್ಮ ಸ್ಥಾನವನ್ನು ನವೀಕರಿಸುವಂತೆ ಮಾಡಿ. ವಸ್ತುಗಳ ನಡುವೆ ಸಂವಹನವನ್ನು ತೋರಿಸಲು ಕನ್ಸೋಲ್ ಲಾಗ್ ಹೇಳಿಕೆಯನ್ನು ಸೇರಿಸಿ.
+
+ಇಲ್ಲಿ [ಏಜೆಂಟ್ ಮೋಡ್ ಬಗ್ಗೆ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿ ಪಡೆಯಿರಿ.
+
+## 🚀 ಸವಾಲು
+ಪಬ್-ಸಬ್ ಮಾದರಿಯು ಆಟದ ವಾಸ್ತುಶಿಲ್ಪವನ್ನು ಹೇಗೆ ಹೆಚ್ಚಿಸಬಹುದು ಎಂಬುದನ್ನು ಪರಿಗಣಿಸಿ. ಯಾವ ಭಾಗಗಳು ಘಟನೆಗಳನ್ನು ಕಾರಣವಾಗಿಸಬೇಕು ಮತ್ತು ಸಿಸ್ತಂ ಹೇಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕು ಎಂದು ಗುರುತಿಸಿ. ಒಂದು ಆಟದ ಸಂಗ್ರಹಣೆಯನ್ನು ವಿನ್ಯಾಸ ಮಾಡಿ ಮತ್ತು ಅದರ ಭಾಗಗಳ ನಡುವಿನ ಸಂವಹನ ಮಾದರಿಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಿ.
+
+## ಪಾಠಾಂತರ್ಗತ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪಾಠಾಂತರ್ಗತ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/30)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+ಪಬ್/ಸಬ್ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಲು [ಇದನ್ನು ಓದಿ](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದವುಗಳು**
+- [ ] ಯಾವುದೇ HTML5 ಆಟವನ್ನು ಆನ್ಲೈನ್‌ನಲ್ಲಿ ತೆರೆಯಿರಿ ಮತ್ತು ಅದರ ಕೋಡ್ ಅನ್ನು DevTools ಬಳಸಿ ನೋಡಿ
+- [ ] ಒಂದು ಸರಳ HTML5 ಕ್ಯಾನ್ವಾಸ್ ಘಟಕವನ್ನು ರಚಿಸಿ ಮತ್ತು ಮೂಲ ಆಕಾರವನ್ನು ವೀಕ್ಷಿಸಿ
+- [ ] ಸರಳ ಅನಿಮೇಷನ್ ಲೂಪ್‌ನುದಿಗೆ `setInterval` ಬಳಸಿ ಪ್ರಯತ್ನಿಸಿ
+- [ ] ಕ್ಯಾನ್ವಾಸ್ API ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಅನ್ವೇಷಿಸಿ ಮತ್ತು ಡ್ರಾಯಿಂಗ್ ವಿಧಾನ ಪ್ರಯತ್ನಿಸಿ
+
+### 🎯 **ಈ മണിക്കೂರಿನಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದವುಗಳು**
+- [ ] ಪಾಠಾಂತರ್ಗತ ಪ್ರಶ್ನೋತ್ತರವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಆಟ ಅಭಿವೃದ್ಧಿ ಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ನಿಮ್ಮ ಆಟದ ಪ್ರಾಜೆಕ್ಟ್ ಸಂರಚನೆಯನ್ನು HTML, CSS, ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಡತಗಳೊಂದಿಗೆ ಸಿದ್ಧಪಡಿಸಿ
+- [ ] ಒಂದು ಮೂಲಾತ್ಮಕ ಆಟ ಲೂಪನ್ನು ರಚಿಸಿ ಅದು ಸದಾ ಅಪ್‌ಡೇಟ್ ಮತ್ತು ರೆಂಡರ್ ಆಗುತ್ತದೆ
+- [ ] ನಿಮ್ಮ ಪ್ರಥಮ ಆಟ ಸ್ಪ್ರೈಟ್ಗಳನ್ನು ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಡ್ರಾ ಮಾಡಿ
+- [ ] ಚಿತ್ರಗಳು ಮತ್ತು ಶಬ್ದಗಳ ಮೂಲ ಸರಕಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ವರ್ಷದ ಆಟ ಸೃಷ್ಟಿ**
+- [ ] ಯೋಜನೆ ಮಾಡಲಾದ ಎಲ್ಲಾ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಪೂರ್ಣ ಸ್ಪೇಸ್ ಆಟವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಪೂರ್ಣಗೊಳ್ಳಿದ ಗ್ರಾಫಿಕ್ಸ್, ಶಬ್ದ ಪರಿಣಾಮಗಳು ಮತ್ತು ಸ್ಮೂತ್ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಆಟದ ಸ್ಥಿತಿಗಳನ್ನು (ಆರಂಭסק್ರೀನ್, ಆಟವಾಡುವಿಕೆ, ಆಟ ಮುಗಿದಿದೆ) ಅನುಷ್ಟಾನಗೊಳಿಸಿ
+- [ ] ಅಂಕೆಗಳು ಗಣಿಸಲು ವ್ಯವಸ್ಥೆಯನ್ನು ಮತ್ತು ಆಟಗಾರ ಪ್ರಗತಿ ಟ್ರ್ಯಾಕಿಂಗ್‌ನ್ನು ರಚಿಸಿ
+- [ ] ನಿಮ್ಮ ಆಟವನ್ನು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಮತ್ತು ಎಲ್ಲ ಸಾಧನಗಳಲ್ಲಿ ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡಿ
+- [ ] ನಿಮ್ಮ ಆಟವನ್ನು ಆನ್ಲೈನ್‌ನಲ್ಲಿ ಹಂಚಿಕೊಂಡು ಆಟಗಾರರಿಂದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸಂಗ್ರಹಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ವೇಳಾಪಟ್ಟಿಯ ಆಟ ಅಭಿವೃದ್ಧಿ**
+- [ ] ವಿಭಿನ್ನ ವಂಶಗಳ ಮತ್ತು ಯಂತ್ರಾಣಗಳೊಂದಿಗೆ ಹಲವಾರು ಆಟಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] Phaser ಅಥವಾ Three.js ನಂತಹ ಆಟ ಅಭಿವೃದ್ಧಿ ಫ್ರೇಮ್ವರ್ಕ್ ಕಲಿಯಿರಿ
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ ಆಟ ಅಭಿವೃದ್ಧಿ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಕೊಡುಗೆ ಸಲ್ಲಿಸಿ
+- [ ] ಮುಂದಿನ ಮಟ್ಟದ ಆಟ ಪ್ರದರ್ಶನ ವಿನ್ಯಾಸಗಳು ಮತ್ತು ಗಾತ್ರಮಾಪಕ ತಂತ್ರಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ
+- [ ] ನಿಮ್ಮ ಆಟ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ತೋರಿಸುವ ಪೋರ್ಫೋಲಿಯೊ ರಚಿಸಿ
+- [ ] ಆಟ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಇಂಟರೆಕ್ಟಿವ್ మీడియಾದಲ್ಲಿ ಆಸಕ್ತರಾದವರಿಗೆ ಗುರುತಿನಾಯಕನಾಗಿರಿ
+
+## 🎯 ನಿಮ್ಮ ಆಟ ಅಭಿವೃದ್ಧಿ ಪರಿಣತಿ ಸಮಯರೇಖೆ
+
+```mermaid
+timeline
+    title ಆಟದ ವಾಸ್ತುಶಿಲ್ಪ ಕಲಿಕೆ ಪ್ರಗತಿ
+    
+    section ವಸ್ತು ಮಾದರಿಗಳು (20 ನಿಮಿಷಗಳು)
+        ಕೋಡ್ ಸಂಘಟನೆ: ವರ್ಗ ಅನುವಂಶಿಕತೆ
+                         : կազմ ಪದ್ಧತಿಗಳು
+                         : ಫ್ಯಾಕ್ಟರಿ ಫಂಕ್ಷನ್ಸ್
+                         : ವರ್ತನೆ ಮಿಶ್ರಣ
+        
+    section ಸಂವಹನ ವ್ಯವಸ್ಥೆಗಳು (25 ನಿಮಿಷಗಳು)
+        ಘಟನೆ ವಾಸ್ತುಶಿಲ್ಪ: ಪಬ್/ಸಬ್ ಜಾರಿಗೆ
+                          : ಸಂದೇಶ ವಿನ್ಯಾಸ
+                          : ಘಟನೆ ರವಾನಿಸುವವರು
+                          : ಸಡಿಲ ಬಂಧನ
+        
+    section ಆಟ ವಸ್ತು ವಿನ್ಯಾಸ (30 ನಿಮಿಷಗಳು)
+        ಅಂಶ ವ್ಯವಸ್ಥೆಗಳು: ಗುಣಧರ್ಮ ನಿರ್ವಹಣೆ
+                      : ವರ್ತನೆ ಸಂಗಮನ
+                      : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+                      : ಜೀವನಚಕ್ರ ನಿರ್ವಹಣೆ
+        
+    section ವಾಸ್ತುಶಿಲ್ಪ ಮಾದರಿಗಳು (35 ನಿಮಿಷಗಳು)
+        ವ್ಯವಸ್ಥೆ ವಿನ್ಯಾಸ: ಘಟಕ ವ್ಯವಸ್ಥೆಗಳು
+                     : ವೀಕ್ಷಕ ಮಾದರಿ
+                     : ಕಮಾಂಡ್ ಮಾದರಿ
+                     : ಸ್ಥಿತಿ ಯಂತ್ರಗಳು
+        
+    section ಉನ್ನತ ಸಂಯೋಜನೆಗಳು (45 ನಿಮಿಷಗಳು)
+        ಪ್ರಮಾಣೀಕೃತ ವಾಸ್ತುಶಿಲ್ಪ: ಕಾರ್ಯ ಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್
+                             : ಸ್ಮೃತಿ ನಿರ್ವಹಣೆ
+                             : ಘಟಕ ವಿನ್ಯಾಸ
+                             : ಪರೀಕ್ಷಣಾ ತಂತ್ರಗಳು
+        
+    section ಆಟ ಎಂಜಿನ್ கருத்துக்கள் (1 ವಾರ)
+        ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ: ದೃಶ್ಯ ಗ್ರಾಫ್‌ಗಳು
+                                 : ಆಸ್ತಿ ನಿರ್ವಹಣೆ
+                                 : ರೆಂಡರಿಂಗ್ ಪೈಪ್ಲೈನ್‌ಗಳು
+                                 : ಭೌತಶಾಸ್ತ್ರ ಸಂಯೋಜನೆ
+        
+    section ಫ್ರೆ임್‌ವರ್ಕ್ ಮಾಸ್ಟರಿ (2 ವಾರಗಳು)
+        ಆಧುನಿಕ ಆಟ ಅಭಿವೃದ್ಧಿ: ರಿಯಾಕ್ಟ್ ಆಟ ಮಾದರಿಗಳು
+                               : ಕ್ಯಾನ್ವಾಸ್ ಆಪ್ಟಿಮೈಸೇಷನ್
+                               : ವೆಬ್‌ಜಿಎಲ್ ಮೂಲಭೂತಗಳು
+                               : ಪಿಡಬ್ಲ್ಯುಎ ಆಟಗಳು
+        
+    section ಉದ್ಯಮ ಅಭ್ಯಾಸಗಳು (1 ತಿಂಗಳು)
+        ವೃತ್ತಿಪರ ನೈಪುಣ್ಯತೆ: ತಂಡ ಸಹಕಾರ
+                           : ಕೋಡ್ ವಿಮರ್ಶೆಗಳು
+                           : ಆಟ ವಿನ್ಯಾಸ ಮಾದರಿಗಳು
+                           : ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರೊಫೈಲಿಂಗ್
+```
+### 🛠️ ನಿಮ್ಮ ಆಟ ವಾಸ್ತುಶಿಲ್ಪ ಸಾಧನ ಸಂಗ್ರಹಣೆಯ ಸಾರಾಂಶ
+
+ಈ ಪಾಠವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನೀವು ಈಗ:
+- ** ವಿನ್ಯಾಸ ಮಾದರಿ ಪರಿಣತಿ**: ಪರಂಪರೆ ವಿರುದ್ಧ ಸಮನ್ವಯತೆಗಳಿಗೆ ಅರ್ಥೈಸಿಕೆ
+- **เหตุการณ์-ಚಾಲಿತ ವಾಸ್ತುಶಿಲ್ಪ**: ವಿಸ್ತರಿಸಿದ ಸಂವಹನಕ್ಕಾಗಿ ಪಬ್/ಸಬ್ ಅನುಷ್ಠಾನ
+- **ವಸ್ತು-ಆಧಾರಿತ ವಿನ್ಯಾಸ**: ವರ್ಗ ಸರಣಿಗಳು ಮತ್ತು ವರ್ತನೆ ಸಂಯೋಜನೆ
+- **ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್**: ಫ್ಯಾಕ್ಟರಿ ಕಾರ್ಯಗಳು, ಸ್ಪ್ರೆಡ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ES6+ ಮಾದರಿಗಳು
+- **ವಿಸ್ತರಿಸಲು ಉಚಿತವಾದ ವಾಸ್ತುಶಿಲ್ಪ**: ಸಡಿಲ ಜೋಡಣೆ ಮತ್ತು ಅನ್ವಯ ಸಂಕಲನ ಸಿದ್ಧಾಂತಗಳು
+- **ಆಟ ಅಭಿವೃದ್ಧಿ ಬೆನಾತ**: ಅಂಶ ವ್ಯವಸ್ಥೆಗಳು ಮತ್ತು ಘಟಕ ಮಾದರಿಗಳು
+- **ವೃತ್ತಿಪರ ಮಾದರಿಗಳು**: ಕಡತ ಸಂಘಟನೆಗೆ ಕೈಗಾರಿಕಾ-ಸಾಮಾನ್ಯ ವಿಧಾನಗಳು
+
+**ವಾಸ್ತವಿಕ ಜಗತ್ತಿನ ಅನ್ವಯಿಕೆಗಳು**: ಈ ಮಾದರಿಗಳು ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ:
+- **ಫ್ರಂಟ್‌ಎಂಡ್ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು**: React/Vue ಘಟಕ ವಾಸ್ತುಶಿಲ್ಪ ಮತ್ತು ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+- **ಬ್ಯಾಕೆಂಡ್ ಸೇವೆಗಳು**: ಮೈಕ್ರೋಸರ್ವಿಸ್ ಸಂವಹನ ಮತ್ತುเหตุการณ์-ಚಾಲಿತ ವ್ಯವಸ್ಥೆಗಳು
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: iOS/Android ಅಪ್ಲಿಕೇಶನ್ ವಾಸ್ತುಶಿಲ್ಪ ಮತ್ತು ಅಧಿಸೂಚನೆ ವ್ಯವಸ್ಥೆಗಳು
+- **ಆಟ ಎಂಜಿನ್‌ಗಳು**: Unity, Unreal, ಮತ್ತು ವೆಬ್ ಆಧಾರಿತ ಆಟ ಅಭಿವೃದ್ಧಿ
+- **ಉದ्यम ಸಾಫ್ಟ್‌ವೇರ್**:เหตุการณ์ ಮೂಲ ಮತ್ತು ವಿತರಿತ ವ್ಯವಸ್ಥೆ ವಿನ್ಯಾಸ
+- **API ವಿನ್ಯಾಸ**: RESTful ಸೇವೆಗಳು ಮತ್ತು ರಿಯಲ್-ಟೈಮ್ ಸಂವಹನ
+
+**ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು ಪಡೆದವರು**: ನೀವು ಈಗ ಸಾಧ್ಯ:
+- **ವಿನ್ಯಾಸ** ಪ್ರಮಾಣೀಕೃತ ಮಾದರಿಗಳನ್ನು ಬಳಸಿ ವಿಸ್ತರಿಸುವ ಸಾಫ್ಟ್‌ವೇರ್ ವಾಸ್ತುಶಿಲ್ಪ ಸೃಷ್ಟಿಸುವುದು
+- **ಕಾರ್ಯಗತಗೊಳಿಸುವುದು** ಸವೆದುಹೋಗುವ ಬಗೆಯเหตุการณ์-ಚಾಲಿತ ವ್ಯವಸ್ಥೆಗಳು ಜಟಿಲ ಸಂವಹನಗಳನ್ನು ನಿಭಾಯಿಸುವಂತೆ
+- **ಐಚ್ಛಿಕ ಕೋಡ್ ಸಂಘಟನೆ ತಂತ್ರಗಳನ್ನು ಆಯ್ಕೆಮಾಡುವುದು** ವಿವಿಧ ಸಂದರ್ಭಗಳಿಗೆ
+- **ಡಿಬಗ್ ಮತ್ತು ನಿರ್ವಹಣೆ** ಸಡಿಲ ಜೋಡಣೆಯಿದೆದು ಯಂತ್ರಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ
+- **ಸಂವಹನ** ತಾಂತ್ರಿಕ ನಿರ್ಣಯಗಳನ್ನು ಕೈಗಾರಿಕಾ-ಮಾನದಂಡ ಪದಬಳಕೆ ಬಳಸಿ
+
+**ಮುಂದಿನ ದರ್ಜೆ**: ನೀವು ಈಗ ಸಿದ್ಧರಾಗಿದ್ದೀರಿ ಆಡುವಂತಹ ಈ ಮಾದರಿಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು, ಮುಂದೆ ಆಟ ಅಭಿವೃದ್ಧಿ ವಿಷಯಗಳನ್ನು ಅನ್ವೇಷಿಸಲು, ಅಥವಾ ಈ ವಾಸ್ತುಶಿಲ್ಪ ಸಂकल्पನೆಗಳನ್ನು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸಲು!
+
+🌟 **ಸಾಧನೆ ಸಾಧಿಸಲಾಗಿದೆ**: ನೀವು ಮೂಲಭೂತ ಸಾಫ್ಟ್‌ವೇರ್ ವಾಸ್ತುಶಿಲ್ಪ ಮಾದರಿಗಳನ್ನು ಮುಗಿಸಿದ್ದಾರೆ ಅವು ಸರಳ ಆಟಗಳಿಂದ ಸಂಕೀರ್ಣ ಉದ್ಯಮ ವ್ಯವಸ್ಥೆಗಳವರೆಗೆ ಶಕ್ತಿ ನೀಡುತ್ತವೆ!
+
+## ನೇಮಕಾತಿ
+
+[ಒಂದು ಆಟ ವಿನ್ಯಾಸ ಮಾಡಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಯಾತನೆ:**
+ಈ ದಸ್ತಾವೇಜು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯನ್ನು ಸಾಧಿಸಲು ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳಿರಬಹುದು ಎಂಬುದನ್ನು ಕೃಪಯಾ ಗಮನಿಸಿ. ಮೂಲ ದಸ್ತಾವೇಜು ಅದರ ಮೂಲಭಾಷೆಯಲ್ಲಿ ಪ್ರಾಮಾಣಿಕ ಮೂಲವಾಗಿರುತ್ತದೆ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಳಿಗೆ ಮಾಡಿಪ್ರೊಫೆಷನಲ್ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದದ ಬಳಕೆ ಕಾರಣವ сыҡುವ ಯಾವುದೇ ತಪ್ಪು ಅರಿವಿಗೆ ಅಥವಾ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮತ್ತಷ್ಟು ದೋಷಗಳಿಗೆ ನಾವು ಹೊಣೆ ಹೊಡೆಯದೇವೆ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/1-introduction/assignment.md

@@ -0,0 +1,102 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c8fc39a014d08247c082878122e2ba73",
+  "translation_date": "2026-01-08T14:35:34+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಹಾಸ್ಯ ಆಟವನ್ನು ರೂಪಿಸಿ: ವಿನ್ಯಾಸ ಮಾದರಿಗಳನ್ನು ಅನ್ವಯಿಸಿ
+
+## ನಿಯೋಜನೆ ಅವಲೋಕನ
+
+ಡಿಸೈನ್ ಪ್ಯಾಟರ್ನ್‌ಗಳ ನಿಮಿತ್ತ ಹೊಸ ಜ್ಞಾನವನ್ನು ಬಳಸುವ ಮೂಲಕ ಸರಳ ಆಟ ಪ್ರೋಟೋಟೈಪ್ ಅನ್ನು ರಚಿಸಿ! ಈ ನಿಯೋಜನೆ σας ಆರ್ಕಿಟೆಕ್ಚರಲ್ ಮಾದರಿಗಳು (ಇನ್ಹೆರಿಟೆನ್ಸ್ ಅಥವಾ ಸಂಯೋಜನೆ) ಮತ್ತು ಪಬ್/ಸಬ್ ಸಂವಹನ ವ್ಯವಸ್ಥೆಯನ್ನು ಅಭ್ಯಾಸ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ನೀವು ಪಾಠದಲ್ಲಿ ಕಲಿತದ್ದು.
+
+## ಸೂಚನೆಗಳು
+
+ಈ ಪಾಠದಿಂದ ಬಂದಿರುವ ವಿನ್ಯಾಸ ಮಾದರಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಸರಳ ಆಟ ಪ್ರತಿನಿಧಿಯನ್ನು ರಚಿಸಿ. ನಿಮ್ಮ ಆಟ ಕಾರ್ಯನಿರ್ವಹಿಸುವಂತಿರಬೇಕು ಆದರೆ ಸಂಕೀರ್ಣ ಗ್ರಾಫಿಕ್ಸ್ ಅಗತ್ಯವಿಲ್ಲ – ಆಧಾರಿತ ಆರ್ಕಿಟೆಕ್ಚರ್ ಮತ್ತು ಸಂವಹನ ಮಾದರಿಗಳ ಮೇಲೆ ಗಮನಕೊಡಿ.
+
+### ಅವಶ್ಯಕತೆಗಳು
+
+**ನಿಮ್ಮ ಆರ್ಕಿಟೆಕ್ಚರ್ ಮಾದರಿಯನ್ನು ಆರಿಸಿ:**
+- **ಆಯ್ಕೆ A**: ವರ್ಗ ಆಧಾರಿತ ಇನ್ಹೆರಿಟೆನ್ಸ್ ಬಳಸಿ (`GameObject` → `Movable` → `Hero` ಉದಾಹರಣೆಯಂತೆ)
+- **ಆಯ್ಕೆ B**: ಸಂಯೋಜನೆ ಬಳಸಿ (ಮಿಶ್ರಿತ ವರ್ತನೆಗಳೊಂದಿಗೆ.factory ಫಂಕ್ಷನ್ ಎಂಬ ರೀತಿಯಲ್ಲಿ)
+
+**ಸಂವಹನವನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ:**
+- ಪಬ್/ಸಬ್ ಸಂದೇಶಕ್ಕಾಗಿ `EventEmitter` ವರ್ಗವನ್ನು ಒಳಪಡಿಸಿ
+- ಕನಿಷ್ಠ 2-3 ವಿಭಿನ್ನ ಸಂದೇಶ ತರಗತಿಗಳನ್ನು ಸ್ಥಾಪಿಸಿ (`PLAYER_MOVE`, `ENEMY_SPAWN`, `SCORE_UPDATE` ಹೀಗಾಗಿ)
+- ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್ (ಕೀಬೋರ್ಡ್/ಮೌಸ್) ಅನ್ನು ಈವೆಂಟ್ ವ್ಯವಸ್ಥೆಯ ಮೂಲಕ ಆಟದ ಘಟನೆಗಳಿಗೆ ಸಂಪರ್ಕಗೊಳಿಸಿ
+
+**ಆಟ ಅಂಶಗಳನ್ನು ಸೇರಿಸಿ:**
+- ಕನಿಷ್ಠ ಒಂದು ಆಟಗಾರ ನಿಯಂತ್ರಣದ ಪಾತ್ರ
+- ಕನಿಷ್ಠ ಒಂದು ಇನ್ನೊಂದು ಆಟ ವಸ್ತುವು (ಶತ್ರು, ಸಂಗ್ರಹಿಸುವ物, ಅಥವ ಪರಿಸರ ದೃಶ್ಯ)
+- ವಸ್ತುಗಳ ನಡುವಿನ ಮೂಲಭೂತ ಪರಸ್ಪರ ಸಂಪರ್ಕ (ದುರ್ಘಟನೆ, ಸಂಗ್ರಹಣೆ, ಅಥವಾ ಸಂವಹನ)
+
+### ಸಲಹೆ ನೀಡಲಾದ ಆಟದ ಆಲೋಚನೆಗಳು
+
+**ವಿಚಾರಿಸಲು ಸರಳ ಆಟಗಳು:**
+- **ಸ್ನೇಕ್ ಆಟ** – ಸ್ನೇಕ್ ಅಂಗಗಳನ್ನು ತಲೆ ಹಿಂಬಾಲಿಸುತ್ತದೆ, ಆಹಾರ ಯಾದೃಚ್ಛಿಕವಾಗಿ ಉತ್ಪತ್ತಿಯಾಗುತ್ತದೆ
+- **ಪಾಂಗ್ ವಿಭಿನ್ನತೆ** – ಪ್ಯಾಡಲ್ ಇನ್‌ಪುಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ, ಬಾಲ್ ಗೋಡೆಗಳಿಂದ ಮರುನಡೆದಿದೆ
+- **ಸಂಗ್ರಹಿಸುವ ಆಟ** – ಆಟಗಾರವು ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ, ಅಡೆತಡೆಗಳನ್ನು ತಪ್ಪಿಸಿ ನಿರ್ವಹಿಸಬೇಕು
+- **ಟವರ್ ರಕ್ಷಣೆಯ ಮೂಲಗಳು** – ಟವರ್‌ಗಳು ಹಿಂಬಲುತ್ತಿರುವ ಶತ್ರುಗಳನ್ನು ಪತ್ತೆ ಹಚ್ಚಿ ಹಡೆದು ಇಳಿಸುತ್ತವೆ
+
+### ಕೋಡ್ ರಚನೆ ಮಾರ್ಗದರ್ಶಿಗಳು
+
+```javascript
+// ಉದಾಹರಣೆಯ ಪ್ರಾರಂಭಿಕ ರಚನೆ
+const Messages = {
+  // ನಿಮ್ಮ ಆಟದ ಸಂದೇಶಗಳನ್ನು ಇಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಿ
+};
+
+class EventEmitter {
+  // ನಿಮ್ಮ ಘಟನೆ ವ್ಯವಸ್ಥೆಯ ಅನುಷ್ಟಾನ
+}
+
+// ವರ್ಗ ಆಧಾರಿತ ಅಥವಾ ಸಂಯೋಜನಾ ವಿಧಾನ ಆಯ್ಕೆಮಾಡಿ
+// ವರ್ಗ ಆಧಾರಿತ ಉದಾಹರಣೆ:
+class GameObject { /* base properties */ }
+class Player extends GameObject { /* player-specific behavior */ }
+
+// ಅಥವಾ ಸಂಯೋಜನಾ ಉದಾಹರಣೆ:
+const gameObject = { /* base properties */ };
+const movable = { /* movement behavior */ };
+function createPlayer() { /* combine behaviors */ }
+```
+
+### ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಪರೀಕ್ಷಿಸುವುದು
+
+**ನಿಮ್ಮ ಕೋಡ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:**
+- ನಡೆಸಿದ ಘಟನೆಗಳಿಗೆ ವಸ್ತುಗಳು ಚಲಿಸುವುದನ್ನು ಅಥವಾ ಬದಲಾಗುವುದನ್ನು ಪರೀಕ್ಷಿಸಿ
+- ಬಹು ವಸ್ತುಗಳು ಒಂದೇ ಈವೆಂಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಬಹುದೇ ಎಂದು ದೃಢೀಕರಿಸಿ
+- ಈಗಾಗಲೇ ಇರುವ ಕೋಡ್ ಬದಲಾಯಿಸುವದೇ ಇಲ್ಲದೆ ಹೊಸ ವರ್ತನೆಗಳನ್ನು ಸೇರಿಸಬಹುದೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
+- ಕೀಬೋರ್ಡ್/ಮೌಸ್ ಇನ್‌ಪುಟ್ ಸರಿಯಾಗಿ ಆಟದ ಘಟನೆಗಳನ್ನು ಪ್ರೇರೇಪಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
+
+## ಸಲ್ಲಿಕೆ ಮಾರ್ಗಸೂಚಿಗಳು
+
+**ನಿಮ್ಮ ಸಲ್ಲಿಕೆಯಲ್ಲಿ ಈವುವು ಸೇರಿರಬೇಕು:**
+1. ನಿಮ್ಮ ಆಟದ ಅನುಷ್ಠಾನದ ಜೊತೆಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್(ಗಳು)
+2. ಆಟವನ್ನು ಚಾಲನೆ ಮತ್ತು ಪರೀಕ್ಷಿಸಲು HTML ಫೈಲ್ (ಸರಳವಾದದಾಗಬಹುದು)
+3. ನೀವು ಆಯ್ದ ಮಾದರಿಯೂ ಮತ್ತು ಕಾರಣವೇನೆಂದು ವಿವರಿಸುವ ಟಿಪ್ಪಣಿಗಳು
+4. ನಿಮ್ಮ ಸಂದೇಶ ತರಗತಿಗಳ ಚುಟ್‌ಪುಸ್ತಕ ಮತ್ತು ಅವುಗಳು ಏನು ಮಾಡುತ್ತವೆ ಎಂಬುದರ ಸಂಕ್ಷಿಪ್ತ ದಾಖಲೆ
+
+## ಮೌಲ್ಯಮಾಪನ ಮಾಪಕ
+
+| ಮಾನದಂಡಗಳು | ಅತ್ಯುತ್ತಮ (3 ಅಂಕಗಳು) | ಸಮರ್ಪಕ (2 ಅಂಕಗಳು) | ಸುಧಾರಣೆ ಬೇಕು (1 ಅಂಕ) |
+|----------|---------------------|---------------------|------------------------------|
+| **ಆರ್ಕಿಟೆಕ್ಚರ್ ಮಾದರಿ** | ಇನ್ಹೆರಿಟೆನ್ಸ್ ಅಥವಾ ಸಂಯೋಜನೆ ಸರಿಯಾಗಿ ಕ್ಲಾಸ/ಆಬ್ಜೆಕ್ಟ್ ಹಿರಾರ್ಕಿಯನ್ನು ಹೊಂದಿರುವಂತೆ ಅನುಷ್ಠಾನಗೊಳ್ಳುತ್ತದೆ | ಆಯ್ದ ಮಾದರಿಯನ್ನು ಕೆಲವು ಸಣ್ಣ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ಬಳಸುತ್ತದೆ | ಮಾದರಿಯನ್ನು ಪ್ರಯತ್ನಿಸುವುದರಲ್ಲಿ ಪ್ರಾಮುಖ್ಯತೆ ಸಮಸ್ಯೆಗಳಿವೆ |
+| **ಪಬ್/ಸಬ್ ಅನುಷ್ಠಾನ** | EventEmitter ನಿಭಾಯಿಸುವುದರಲ್ಲಿ ನಿಪುಣತೆ, ಹಲವು ಸಂದೇಶ ತರಗತಿಗಳೊಂದಿಗೆ ಹಾಗೂ ಸರಿಯಾದ ಈವೆಂಟ್ ಶೃಖಲೆಯೊಂದಿಗೆ | ಮೂಲಭೂತ ಪಬ್/ಸಬ್ ವ್ಯವಸ್ಥೆ ಇದರ ಕೆಲವು ಈವೆಂಟ್ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ | ಈವೆಂಟ್ ವ್ಯವಸ್ಥೆಯು ಇದ್ದರೂ ಅತಿ ವಿಶ್ವಾಸಾರ್ಹವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ |
+| **ಆಟ ಕಾರ್ಯಕ್ಷಮತೆ** | ಈವೆಂಟ್‌ಗಳ ಮೂಲಕ ಸಂವಹನ ಮಾಡುವ ಮೂರು ಅಥವಾ ಹೆಚ್ಚು ಸಂವಹನಮಯ ಅಂಶಗಳು | ಎರಡು ಸಂವಹನಮಯ ಅಂಶಗಳು ಮೂಲಭೂತ ಈವೆಂಟ್ ಸಂವಹನದೊಂದಿಗೆ | ಒಂದೇ ಅಂಶ ಈವೆಂಟ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ ಅಥವಾ ಮೂಲ ಪರಸ್ಪರ ಕ್ರಿಯೆ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಸ್ವಚ್ಛ, ಚೆನ್ನಾಗಿ ಟಿಪ್ಪಣಿಸಲಾದ ಕೋಡ್ ಸಮರ್ಥ ಗಣನೀಯ ವ್ಯವಸ್ಥೆ ಮತ್ತು ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗಳೊಂದಿಗೆ | ಸಾಮಾನ್ಯವಾಗಿ ಒಳ್ಳೆಯ ವ್ಯವಸ್ಥೆಯ ಕೋಡ್ ಮತ್ತು ಸಮರ್ಪಕವಾದ ಟಿಪ್ಪಣಿಗಳು | ಕೋಡ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಆದರೆ ಸಂಘಟನೆ ಅಥವಾ ಸ್ಪಷ್ಟ ಟಿಪ್ಪಣಿಗಳನ್ನು ಬಿಟ್ಟಿದೆ |
+
+**ಬೋನಸ್ ಅಂಕಗಳು:**
+- ಪ್ಯಾಟರ್ನ್‌ಗಳ ವಿಭಿನ್ನ ಉಪಯೋಗಗಳನ್ನು ತೋರಿಸುವ ಸೃಜನಾತ್ಮಕ ಆಟದ ಯಂತ್ರಗಳು
+- ಬಹು ಇನ್‌ಪುಟ್ ವಿಧಾನಗಳು (ಕೀಬೋರ್ಡ್ ಮತ್ತು ಮೌಸ್ ಈವೆಂಟ್‌ಗಳು)
+- ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸುಲಭವಾಗಿ ವಿಸ್ತರಿಸಬಹುದಾದ ಆರ್ಕಿಟೆಕ್ಚರ್
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ವಿವರಣೆ**:
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಿಖರತೆಗಾಗಿ ನಾವು ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದೆಂದು ಗಮನಿಸಿರಲಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿನ ಮೂಲ ದಾಖಲೆಯನ್ನು ಅಧಿಕಾರಿಯ ಆದಾರವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವನುಮಾನದ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರರಾಗ ਨਹੀਂ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/2-drawing-to-canvas/README.md

@@ -0,0 +1,624 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7994743c5b21fdcceb36307916ef249a",
+  "translation_date": "2026-01-08T13:44:05+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "kn"
+}
+-->
+# ಸ್ಪೇಸ್ ಗೇಮ್ ಭಾಗ 2: ಹೀರೋ ಮತ್ತುಮಾನ್ತ್ರಗಳನ್ನು ಕ್ಯಾನ್‌ವಾಸ್‌ಗೆ ಬಿಡಿಸಿ
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಕ್ಯಾಂವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಪ್ರಯಾಣ
+    section ನೆಲೆ
+      ಕ್ಯಾಂವಾಸ್ API ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 3: Student
+      ಸಂಯೋಜನಾ ವ್ಯವಸ್ಥೆಯನ್ನು ಕಲಿತುಕೊಳ್ಳಿ: 4: Student
+      ಮೂಲ ಆಕಾರಗಳನ್ನು ಚಿತ್ರಿಸಿ: 4: Student
+    section ಚಿತ್ರ കൈಗಾರಿಕೆ
+      ಆಟದ ಆಸ್ತಿಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ: 4: Student
+      ಅಸಿಂಕ್ರೋನಸ್ ಲೋಡಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸಿ: 5: Student
+      ಸ್ಪ್ರೈಟ್‌ಗಳನ್ನು ಅಸ್ಥಾನಗೊಳಿಸಿ: 5: Student
+    section ಆಟದ ರೆಂಡರಿಂಗ್
+      ಆಟದ ಪರದೆಯನ್ನು ರಚಿಸಿ: 5: Student
+      ರಚನೆಗಳನ್ನು ನಿರ್ಮಿಸಿ: 5: Student
+      ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉನ್ನತಗೊಳಿಸಿ: 4: Student
+```
+ಕ್ಯಾನ್‌ವಾಸ್ ಎಪಿಐ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಿರಂತರ, ಸಂವಾದಾತ್ಮಕ ಗ್ರಾಫಿಕ್ಸ್ ರಚಿಸಲು. ಈ ಪಾಠದಲ್ಲಿ, ನಾವು ಆ ಖಾಲಿ HTML `<canvas>` ಅಂಶವನ್ನು ಹೀರೋ ಮತ್ತು ಮಾನ್ತ್ರಗಳ ತುಂಬಿದ ಗೇಮ್ ವಿಶ್ವಕ್ಕೆ ಪರಿವರ್ತಿಸುತ್ತೇವೆ. ಕ್ಯಾನ್‌ವಾಸ್ ಅನ್ನು ನಿಮ್ಮ ಡಿಜಿಟಲ್ ಆರ್ಟ್ ಬೋರ್ಡ್ ಎಂದು ಪರಿಗಣಿಸಿ, ಅಲ್ಲಿ ಕೋಡ್ ದೃಶ್ಯವಾಗುತ್ತದೆ.
+
+ನೀವು ಮೊದಲು ಪಾಠದಲ್ಲಿ ಕಲಿತದಕ್ಕಾಗಿ ನಾವು ನಿರ್ಮಾಣ ಮಾಡುತ್ತಿದ್ದೇವೆ, ಮತ್ತು ಈಗ ನಾವು ದೃಶ್ಯಾತ್ಮಕ ಭಾಗಗಳಿಗೆ ತೊಡಗಿಯಿಡುತ್ತೇವೆ. ನೀವು ಹೇಗೆ ಗೇಮ್ ಸ್ಪ್ರೈಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ ಪ್ರದರ್ಶಿಸುತ್‌ತೀರಾ, ಅಂಶಗಳನ್ನು ನಿಖಚಿತವಾಗಿ ಸ್ಥಾಪಿಸುವುದು, ಮತ್ತು ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮ್‌ನ ದೃಶ್ಯಮೂಲವನ್ನು ಸೃಷ್ಟಿಸುವುದು ಕಲಿತೀರಿ. ಇದು ಸ್ಥಾಯಿ ವೆಬ್ ಪುಟಗಳು ಮತ್ತು ಚಟುವಟಿಕೆ, ಸಂವಾದಾತ್ಮಕ ಅನುಭವಗಳ ನಡುವೆ ಸೇತುವೆಯನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ.
+
+ಈ ಪಾಠದ ಕೊನೆಯಲ್ಲಿ, ನೀವು ನಿಮ್ಮ ಹೀರೋ ಹಡಗಿನ ಸರಿಯಾದ ಸ್ಥಾನದಲ್ಲಿ ಹೊಂದಿದ್ದ ಹಾಗೂ ಯುದ್ದಕ್ಕೆ ಸಜ್ಜಾಗಿರುವ ಶತ್ರು ರೂಪರೇಷೆಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಗೇಮ್ ದೃಶ್ಯವನ್ನು ಹೊಂದಿರುತ್ತೀರಿ. ನೀವು ಆಧುನಿಕ ಗೇಮ್‌ಗಳು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಗ್ರಾಫಿಕ್ಸ್ ಹೇಗೆ ರೆಂಡರ್ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ ಮತ್ತು ನಿಮ್ಮದೇ ಸಂವಾದಾತ್ಮಕ ದೃಶ್ಯಾನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುವ ಕೌಶಲಗಳನ್ನು ಪಡೆಯುತ್ತೀರಿ. ಕ್ಯಾನ್‌ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ವೇಷಿಸಿ, ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಂಗೆ ಜೀವ ನೀಡೋಣ!
+
+```mermaid
+mindmap
+  root((ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್))
+    Canvas Element
+      HTML5 ವೈಶಿಷ್ಟ್ಯ
+      2D ಪ್ರಕಟಣೆ
+      ಸಂಯೋಜನಾ ವ್ಯವಸ್ಥೆ
+      ಪಿಕ್ಸೆಲ್ ನಿಯಂತ್ರಣ
+    ಆಕರಣ ಕಾರ್ಯಾಚರಣೆಗಳು
+      ಮೂಲಾಕೃತಿ
+      ಪಠ್ಯ ಪ್ರദರ್ಶನ
+      ಚಿತ್ರ ಪ್ರದರ್ಶನ
+      ಮಾರ್ಗದ ಆಕರಣೆ
+    ಆಸ್ತಿ ನಿರ್ವಹಣೆ
+      ಚಿತ್ರ ಲೋಹಣ
+      ಅಸಿಂಕ್ರೋ ಕಾರ್ಯಾಚರಣೆಗಳು
+      ತಪ್ಪು ನಿರ್ವಹಣೆ
+      ಕಾರ್ಯಕ್ಷಮತೆ
+    ಆಟದ ಪ್ರದರ್ಶನ
+      ಸ್ಪ್ರೈಟ್ ಸ್ಥಾನಕ್ಕೆ
+      ರಚನೆ ವಿನ್ಯಾಸ
+      ದೃಶ್ಯ ಸಂಯೋಜನೆ
+     ಫ್ರೇಮ್ ನವೀಕರಣಗಳು
+    ದೃಶ್ಯ ಪರಿಣಾಮಗಳು
+      ಬಣ್ಣಗಳು ಮತ್ತು ಶೈಲಿಗಳು
+      ಪರಿವರ್ತನೆಗಳು
+      ಅನಿಮೇಷನ್‌ಗಳು
+      ನಲ್ಲಿ ಅಡ್ಡರೇಖೆ
+```
+## ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/31)
+
+## ಕ್ಯಾನ್‌ವಾಸ್
+
+ಈ `<canvas>` ಅಂಶವೆಂದರೆ ಏನು? ಇದು ವೆಬ್ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಗತಿಶೀಲ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಅನಿಮೆಶನ್‌ಗಳನ್ನು ಸೃಷ್ಟಿಸಲು HTML5 ನ ಪರಿಹಾರ. ಸಾಮಾನ್ಯ ಚಿತ್ರಗಳು ಅಥವಾ ವೀಡಿಯೊಗಳು ಸ್ಥಿರವಾದವುಗಳಲ್ಲ, ಕ್ಯಾನ್‌ವಾಸ್ ನೀವು ಪರದೆ ಮೇಲೆ ಪ್ರತಿ ಪಿಕ್ಸೆಲ್ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಗೇಮ್‌ಗಳು, ಡೇಟಾ ದೃಶ್ಯೀಕರಣ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಆರ್ಟ್‌ಗೆ ಅತ್ಯುತ್ತಮ. ಇದನ್ನು ಪ್ರೋಗ್ರಾಮೇಬಲ್ ಡ್ರಾಯಿಂಗ್ ಸರ್ಫೇಸ್ ಎಂದು ಪರಿಗಣಿಸಿ, ಅಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಮ್ಮ ಬಣ್ಣದ ಹೊಗಾರಣಿಯಾಗಿದೆ.
+
+ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಕ್ಯಾನ್‌ವಾಸ್ ಅಂಶವು ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ಖಾಲಿ, ಪಾರದರ್ಶಕ ಆಯತಾಕೃತಿಯಾಗಿರುತ್ತದೆ. ಆದರೆ ಅದರಲ್ಲಿ ಶಕ್ತಿ ಇದೆ! ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಆಕಾರಗಳನ್ನು ಬಿಡಿಸಿ, ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ, ಅನಿಮೆಶನ್‌ಗಳನ್ನು ರಚಿಸಿ ಮತ್ತು ಬಳಕೆದಾರ ಸಂವಾದಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದರಲ್ಲಿ ಅದರ ನಿಜವಾದ ಶಕ್ತಿ ಮೆರೆಯುತ್ತದೆ. ಇದು 1960 ರಲ್ಲಿ ಬೆಲ್ ಲ್ಯಾಬ್ಸ್‌ನ ಮೊದಲ ಡಿಜಿಟಲ್ ಅನಿಮೆಶನ್ ರಚನೆಗೊಂಡಾಗ ಪ್ರತಿ ಪಿಕ್ಸೆಲ್ ಪ್ರೋಗ್ರಾಮ್ ಮಾಡಬೇಕಾಗಿದ್ದಂತಹ ಪರಿಕಲ್ಪನೆಗೆ ಸಮಾನ.
+
+✅ MDN ನಲ್ಲಿ [ಕ್ಯಾನ್‌ವಾಸ್ ಎಪಿಐ ಬಗ್ಗೆ ಹೆಚ್ಚಿನುದನ್ನು ಓದಿ](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಹೇಗೆ ಘೋಷಿಸಲಾಗುತ್ತದೆ, ಪುಟದ ದೇಹ ಭಾಗವಾಗಿ:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+**ಈ ಕೋಡ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- **`id` ಗುಣಲಕ್ಷಣವನ್ನು** ಮಿಗಿಲಾಗಿ ಸೆಟ್ ಮಾಡಿ, ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಈ ನಿಖರ ಕ್ಯಾನ್‌ವಾಸ್ ಅಂಶವನ್ನು ಉಲ್ಲೇಖಿಸಬಹುದು
+- **`width` ಪಿಕ್ಸೆಲ್‌ನಲ್ಲಿ** ನಿರ್ದಿಷ್ಟಪಡಿಸಿ, ಕ್ಯಾನ್‌ವಾಸ್‌ನ ಅಡ್ಡಮಟ್ಟದ μεγ್ತಿಯನ್ನು ನಿಯಂತ್ರಿಸಲು
+- **`height` ಪಿಕ್ಸೆಲ್‌ನಲ್ಲಿ** ಸ್ಥಾಪಿಸಿ, ಕ್ಯಾನ್‌ವಾಸ್‌ನ ಲಂಬ хэмжೆಯನ್ನು ನಿರ್ಧರಿಸಲು
+
+## ಸರಳ ಜ್ಯಾಮಿತಿಯನ್ನು ಬಿಡಿಸುವುದು
+
+ಈಗ ನೀವು ಕ್ಯಾನ್‌ವಾಸ್ ಅಂಶವೇನು ಎಂದು ತಿಳಿದಿದ್ದೀರಿ, ಅದರಲ್ಲಿ ನಿಜವಾಗಿಯೂ ಬಿಡಿಸುವುದನ್ನು ಅನ್ವೇಷಿಸೋಣ! ಕ್ಯಾನ್‌ವಾಸ್ ಒಂದು ಸಂಕೇತ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುತ್ತದೆ, ಇದು ಗಣಿತ ತರಗತಿಯ ಸ್ಮೃತಿಗೆ ಸಾದೃಶ್ಯವೆತ್ತುಕೊಳ್ಳಬಹುದು, ಆದರೆ ಕಂಪ್ಯೂಟರ್ ಗ್ರಾಫಿಕ್ಸ್‌ಗೆ ವಿಶೇಷವಾದ ಒಂದು ಪ್ರಮುಖ ತಿರುವು ಇದೆ.
+
+ಕ್ಯಾನ್‌ವಾಸ್ ಕಾರ್ಟೀಷಿಯನ್ ಸಂಕೇತ ವ್ಯವಸ್ಥೆಯನ್ನು ಉಪಯೋಗಿಸುತ್ತದೆ, ಅಲ್ಲಿ x-ಅಕ್ಷ (ಆಡಂಬರ) ಮತ್ತು y-ಅಕ್ಷ (ಉರಿಗೆ) ಬಳಸಿಕೊಂಡು ನೀವು ಬಿಡಿಸುವ ಎಲ್ಲದಕ್ಕೂ ಸ್ಥಾನ ನೀಡುತ್ತದೆ. ಆದರೆ ಇಲ್ಲಿ ಪ್ರಮುಖವಾದ ವ್ಯತ್ಯಾಸವೇನೆಂದರೆ: ಗಣಿತ ತರಗತಿಯ ಸಂಕೇತ ವ್ಯವಸ್ಥೆಯೊಂದಿಗಿನ ಭೇದವಿದೆ, ಮೂಲ ಬಿಂದುವು `(0,0)` ಎಡ-ಮೇಲ್ಮುಖದ ಮೂಲೆಯಲ್ಲಿಯೇ ಇದೆ, x ಮೌಲ್ಯವು ಬಲಕ್ಕೆ ಸರಿದಂತೆ ಹೆಚ್ಚಾಗುತ್ತದೆ ಮತ್ತು y ಮೌಲ್ಯವು ಕೆಳಗಾಗುತ್ತಂತೆ ಹೆಚ್ಚಾಗುತ್ತದೆ. ಈ ವಿಧಾನವು ಆಸ್ಟ್ರೋಮಿಕ ಕಂಪ್ಯೂಟರ್ ಡಿಸ್ಪ್ಲೇಗಳ ಮುಂಬರುವ ಕಾಲದಿಂದ ಬಂದಿದೆ, ಅಲ್ಲಿ ಎಲೆಕ್ಟ್ರಾನ್ ಕಿರಣಗಳು ಮೇಲಿಂದ ಕೆಳಗಡೆ ಸ್ಕ್ಯಾನ್ ಮಾಡುತ್ತಿವೆ, ಆದ್ದರಿಂದ ಎಡ-ಮೇಲೆ ಆ ಆರಂಭಿಕ ಬಿಂದುವಾಗಿದೆ.
+
+```mermaid
+quadrantChart
+    title ಕ್ಯಾನ್ವಾಸ್ ಸಂಯೋಜಕ ವ್ಯವಸ್ಥೆ
+    x-axis ಎಡ --> ಬಲ
+    y-axis ಮೇಲ್ಭಾಗ --> ಕೆಳಭಾಗ
+    quadrant-1 ಪ್ರತ್ಯಯ 1
+    quadrant-2 ಪ್ರತ್ಯಯ 2  
+    quadrant-3 ಪ್ರತ್ಯಯ 3
+    quadrant-4 ಪ್ರತ್ಯಯ 4
+    
+    Origin Point: [0.1, 0.1]
+    Hero Center: [0.5, 0.8]
+    Enemy Formation: [0.3, 0.2]
+    Power-up: [0.7, 0.6]
+    UI Elements: [0.9, 0.1]
+```
+![ಕ್ಯಾನ್‌ವಾಸ್‌ನ ಗ್ರಿಡ್](../../../../translated_images/canvas_grid.5f209da785ded492.kn.png)
+> ಚಿತ್ರ: [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+ಕ್ಯಾನ್‌ವಾಸ್ ಅಂಶದಲ್ಲಿ ಬಿಡಿಸಲು, ನೀವು ಎಲ್ಲಾ ಕ್ಯಾನ್‌ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಭಿತ್ತಿಯನ್ನು ರೂಪಿಸುವ ಮೂರು-ಹಂತ ಪ್ರಕ್ರಿಯೆಯನ್ನನುಸರಿಸಬೇಕು. ನೀವು ಇದನ್ನು ಕೆಲವು ಬಾರಿ ಮಾಡಿದರೆ, ಅದು ಸಹಜವಾಗುತ್ತದೆ:
+
+```mermaid
+flowchart LR
+    A[HTML ಕ್ಯಾನ್ವಾಸ್ ಘಟಕ] --> B[ಕ್ಯಾನ್ವಾಸ್ ಸಂಬೋಧನೆಯನ್ನು ಪಡೆಯಿರಿ]
+    B --> C[2D ಸಂದರ್ಭ ಪಡೆಯಿರಿ]
+    C --> D[ಚಿತ್ರಣ ಕಾರ್ಯಗಳು]
+    
+    D --> E[ಆಕಾರಗಳನ್ನು ರೇಖಿಸಿ]
+    D --> F[ಪಠ್ಯವನ್ನು ರೇಖಿಸಿ]
+    D --> G[ಚಿತ್ರಗಳನ್ನು ರೇಖಿಸಿ]
+    D --> H[ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಿ]
+    
+    E --> I[ಸ್ಕ್ರೀನ್‌ಗೆ ಮರುಸೂಚಿಸಿ]
+    F --> I
+    G --> I
+    H --> I
+    
+    style A fill:#e1f5fe
+    style C fill:#e8f5e8
+    style I fill:#fff3e0
+```
+1. **ನಿಮ್ಮ DOM ನಿಂದ** ಕ್ಯಾನ್‌ವಾಸ್ ಅಂಶದ ಉಲ್ಲೇಖವನ್ನು ಪಡೆಯಿರಿ (ಯಾವುದೇ HTML ಅಂಶದಂತೆ)
+2. **2D ರೆಂಡರಿಂಗ್ ಕಂಟೆಕ್ಸ್ಟ್ ಅನ್ನು** ಪಡೆಯಿರಿ – ಇದು ಎಲ್ಲಾ ಬಿಡಿಸುವ ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ
+3. **ಬಿಡಿಸು ಪ್ರಾರಂಭಿಸಿ!** ಕಂಟೆಕ್ಸ್ಟ್‌ನ ನಿರ್ಮಿತ ವಿಧಾನಗಳನ್ನು ಬಳಸಿ ತಮ್ಮ ಗ್ರಾಫಿಕ್ಸ್ ರಚಿಸಿ
+
+ಕೋಡ್‌ನಲ್ಲಿ ಇದು ಹೇಗಿರುತ್ತದೆ:
+
+```javascript
+// ಹೆಜ್ಜೆ 1: ಕ್ಯಾನ್ವಾಸ್ ತತ್ವಾಂಶವನ್ನು ಪಡೆಯಿರಿ
+const canvas = document.getElementById("myCanvas");
+
+// ಹೆಜ್ಜೆ 2: 2D ರೆಂಡರಿಂಗ್ ವಿಷಯವನ್ನು ಪಡೆಯಿರಿ
+const ctx = canvas.getContext("2d");
+
+// ಹೆಜ್ಜೆ 3: ಭರ್ತಿಯ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಿ ಮತ್ತು ಒಂದು ಚದುರಿದರ್ಶಕವನ್ನು ಬಿಡಿಸಿ
+ctx.fillStyle = 'red';
+ctx.fillRect(0, 0, 200, 200); // x, y, ಅಗಲ, ಎತ್ತರ
+```
+
+**ನಾವು ಇದನ್ನು ಹಂತ ಹಂತವಾಗಿ ಬೇರ್ಪಡೋಣ:**
+- ನಾವು `id` ಬಳಸಿ ನಮ್ಮ ಕ್ಯಾನ್‌ವಾಸ್ ಅಂಶವನ್ನು ಹಿಡಿದು, ಪ್ರತ್ಯೇಕವಾಗಿಟ್ಟುಕೊಳ್ಳುತ್ತೇವೆ
+- ನಾವು 2D ರೆಂಡರಿಂಗ್ ಕಂಟೆಕ್ಸ್ಟ್ ಪಡೆಯುತ್ತೇವೆ – ಇದು ನಮ್ಮ ಬಿಡಿಸುವ ಸಲಕರಣೆಗಳ ಹಣೆಪಟ್ಟಿ
+- ನಾವು `fillStyle` ಗುಣಲಕ್ಷಣ ಬಳಸಿ ಕೆಂಪು ಬಣ್ಣ ಬಳಸಿ ಪೂರ್ಣಗೊಳಿಸಲು ಕ್ಯಾನ್‌ವಾಸ್‌ಗೆ ಹೇಳುತ್ತೇವೆ
+- ನಾವು ಎಡ-ಮೇಲ್ಮುಖ ಮೂಲ `(0,0)` ಇಂದ ಪ್ರಾರಂಭಿಸಿ, ಅಗಲ 200 ಪಿಕ್ಸೆಲ್ ಮತ್ತು ಎತ್ತರ 200 ಪಿಕ್ಸೆಲ್ ಇರುವ ಆಯತಾಕಾರ ಬಿಡಿಸುತ್ತೇವೆ
+
+✅ ಕ್ಯಾನ್‌ವಾಸ್ ಎಪಿಐ ಬಹುಪಾಲು 2D ಆಕಾರಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿದೆ, ಆದರೆ ವೆಬ್ ಸೈಟ್‌ಗೆ 3D ಅಂಶಗಳನ್ನೂ ಬಿಡಬಹುದು; ಇದರಿಗಾಗಿ ನೀವು [WebGL ಎಪಿಐ](https://developer.mozilla.org/docs/Web/API/WebGL_API) ಬಳಸಿ.
+
+ನೀವು ಕ್ಯಾನ್‌ವಾಸ್ ಎಪಿಐ ಬಳಸಿ ಎಲ್ಲಾ ವಿಧಗಳ ವಸ್ತುಗಳನ್ನು ಬಿಡಿಸಬಹುದು ಉದಾ:
+
+- **ಜ್ಯಾಮಿತಿಕ ಆಕಾರಗಳು**, ಈಗಾಗಲೇ ನಾವು ಆಯತಾಕಾರ ಬಿಡಿಸುವುದನ್ನು ತೋರಿಸಿದ್ದೇವೆ ಆದರೆ ಇನ್ನೂ ಹೆಚ್ಚು ಬಿಡಿಸಬಹುದು.
+- **ಪಠ್ಯ**, ನೀವು ಯಾವುದೇ ಫಾಂಟ್ ಮತ್ತು ಬಣ್ಣದಲ್ಲಿ ಪಠ್ಯ ಬಿಡಿಸಬಹುದು.
+- **ಚಿತ್ರಗಳು**, ನೀವು .jpg ಅಥವಾ .png ಮುಂತಾದ ಚಿತ್ರ ಆಸ್ತಿ ಆಧಾರಿತ ಚಿತ್ರಗಳನ್ನು ಬಿಡಿಸಬಹುದು.
+
+✅ ಪ್ರಯತ್ನಿಸಿ! ನೀವು ಆಯತಾಕಾರ ಬಿಡಿಸಲು ಅರಿತವರು, ನೀವು ಒಂದು ವೃತ್ತವನ್ನು ಪುಟಕ್ಕೆ ಬಿಡಿಸಬಹುದೇ? ಕೆಳಗಿನ CodePen ನಲ್ಲಿ ಕೆಲವು ಆಸಕ್ತಿದಾಯಕ ಕ್ಯಾನ್‌ವಾಸ್ ಚಿತ್ರಗಳನ್ನು ವೀಕ್ಷಿಸಿ. ಇಲ್ಲಿ ಒಂದು [ಖಾಸಗಿ ಉದಾಹರಣೆ](https://codepen.io/dissimulate/pen/KrAwx) ಇದೆ.
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಕ್ಯಾನ್‌ವಾಸ್ ಮೂಲಭೂತಗಳ ಅರ್ಥ**: ಚಿತ್ರ ಲೋಡಿಂಗ್‌ಗೆ ಹೋಗುವ ಮೊದಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಕ್ಯಾನ್‌ವಾಸ್ ಸಂಕೇತ ವ್ಯವಸ್ಥೆಯು ಗಣಿತ ಸಂಕೇತ ವ್ಯವಸ್ಥೆಯಿಂದ ಹೇಗೆ ಭಿನ್ನವಾಗುತ್ತದೆ ಎಂದು ವಿವರಿಸಿ
+- ✅ ಕ್ಯಾನ್‌ವಾಸ್ ಬಿಡಿಸುವ ಕಾರ್ಯಾಚರಣೆಗಳ ಮೂರು ಹಂತ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- ✅ 2D ರೆಂಡರಿಂಗ್ ಕಂಟೆಕ್ಸ್ಟ್ ಏನನ್ನು ಒದಗಿಸುತ್ತದೆ ಎಂದು ಗುರುತಿಸಿ
+- ✅ fillStyle ಮತ್ತು fillRect ಹೇಗೆ ಸಂಯೋಜಿತವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಎಂದು ವಿವರಿಸಿ
+
+**ತ್ವರಿತ ಸ್ವ-ಪರೀಕ್ಷೆ**: `(100, 50)` ಸ್ಥಾನದಲ್ಲಿರುವ 25 ವ್ಯಾಸದ ಬ್ಲೂ ಸುತ್ತೆಯನ್ನು ನೀವು ಹೇಗೆ ಬಿಡಿಸುತ್ತೀರಿ?
+```javascript
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.arc(100, 50, 25, 0, 2 * Math.PI);
+ctx.fill();
+```
+
+**ನೀವು ಈಗ ತಿಳಿದಿರುವ ಕ್ಯಾನ್‌ವಾಸ್ ಬಿಡಿಸುವ ವಿಧಾನಗಳು**:
+- **fillRect()**: ತುಂಬಿದ ಆಯತಾಕಾರಗಳನ್ನು ಬಿಡಿಸುತ್ತದೆ
+- **fillStyle**: ಬಣ್ಣಗಳು ಮತ್ತು నమೂನೆಗಳನ್ನು ಸೆಟ್ ಮಾಡುತ್ತದೆ
+- **beginPath()**: ಹೊಸ ಬಿಡಿಸುವ ಮಾರ್ಗಗಳನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ
+- **arc()**: ವೃತ್ತಗಳು ಮತ್ತು ವಿರಾಮಗಳು ರಚಿಸುತ್ತದೆ
+
+## ಚಿತ್ರ ಆಸ್ತಿ ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಬಿಡಿಸಿ
+
+ಮೂಲಭೂತ ಆಕಾರಗಳನ್ನು ಬಿಡಿಸುವುದು ಪ್ರಾರಂಭಿಸಲು ಉಪಯುಕ್ತ, ಆದರೆ ಬಹುತೇಕ ಗೇಮ್‌ಗಳಿಗೆ ನಿಜವಾದ ಚಿತ್ರಗಳು ಅಗತ್ಯವಿದೆ! ಸ್ಪ್ರೈಟ್‌ಗಳು, ಹಿನ್ನೆಲೆಗಳು, ಮತ್ತು ಟೆಕ್ಸ್ಚರ್‌ಗಳು ಗೇಮ್‌ಗಳಿಗೆ ದೃಶ್ಯ ಆಕರ್ಷಣೆಯನ್ನು ನೀಡುತ್ತವೆ. ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ ಕ್ಯಾನ್‌ವಾಸ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವುದು ಜ್ಯಾಮಿತಿಕ ಆಕಾರಗಳನ್ನು ಬಿಡಿಸುವುದರಂತೆ ಇಲ್ಲ, ಆದರೆ ಅದರ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಸರಳವಾಗಿದೆ.
+
+ನಾವು ಒಂದು `Image` ವಸ್ತು ರಚಿಸಬೇಕು, ನಮ್ಮ ಚಿತ್ರ ಫೈಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಬೇಕು (ಇದು ಅಸಿಂಕ್ರೊನಸ್ ಆಗಾಗಲಿದೆ, ಅಂದರೆ "ಹಿನ್ನೆಲೆ" ನಲ್ಲಿ ನಡೆಯುತ್ತದೆ), ನಂತರ ಅವು ಸಿದ್ಧವಾದ ಮೇಲೆ ಕ್ಯಾನ್‌ವಾಸ್‌ಗೆ ಬಿಡಿಸಬೇಕು. ಈ ವಿಧಾನವು ನಿಮ್ಮ ಚಿತ್ರಗಳು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸುವಂತೆ ನೋಡಿಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಲೋಡ್ ಆಗುವವರೆಗೂ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ತಡೆಗಟ್ಟುವುದಿಲ್ಲ.
+
+```mermaid
+sequenceDiagram
+    participant JS as ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
+    participant Img as ಚಿತ್ರ ವಸ್ತು
+    participant Server as ಕಡತ ಸರ್ವರ್
+    participant Canvas as ಕ್ಯಾನ್ವಾಸ್_Context
+    
+    JS->>Img: new Image()
+    JS->>Img: src ಗುಣಲಕ್ಷಣವನ್ನು ಸೆಟ್ ಮಾಡಿ
+    Img->>Server: ಚಿತ್ರ ಕಡತವನ್ನು ವಿನಂತಿಸಿ
+    Server->>Img: ಚಿತ್ರ ಡೇಟಾವನ್ನು ಹಿಂತಿರುಗಿಸಿ
+    Img->>JS: onload ಘಟನೆ ಪ್ರಚೋದಿಸಿ
+    JS->>Canvas: drawImage(img, x, y)
+    Canvas->>Canvas: ಪರದೆಗೆ ರೆಂಡರ್ ಮಾಡಿ
+    
+    Note over JS,Canvas: ಅಸಿಂಕ್ರೊನಸ್ ಲೋಡಿಂಗ್ UI ಅಡ್ಡಿಯಾಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ
+```
+### ಮೂಲಭೂತ ಚಿತ್ರ ಲೋಡ್‌ಗೊಂದು
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // ಚಿತ್ರವನ್ನು ಲೋಡ್ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಬಳಸಲು<s>ಿದ್ಧವಾಗಿದೆ
+  console.log('Image loaded successfully!');
+};
+```
+
+**ಈ ಕೋಡ್‌ನಲ್ಲಿ ಏನಾಗುತ್ತಿದೆ:**
+- ನಾವು ಹೊಸ `Image` ವಸ್ತವನ್ನು ರಚಿಸುತ್ತೇವೆ, ಇದರಲ್ಲಿ ನಮ್ಮ ಸ್ಪ್ರೈಟ್ ಅಥವಾ ಟೆಕ್ಸ್ಚರ್ಗಳು ಇರಲು ಸಾಧ್ಯ
+- ನಾವು ಮೂಲ ಮಾರ್ಗವನ್ನು ಸೆಟ್ ಮಾಡಿ ಯಾವ ಚಿತ್ರ ಫೈಲ್ ಲೋಡ್ ಮಾಡಬೇಕೆಂದು ತಿಳಿಸುತ್ತೇವೆ
+- ನಾವು `load` ಘಟನೆಯಿಗಾಗಿ ಕೇಳುತ್ತಿದ್ದೇವೆ ಅದರಿಂದ ಚಿತ್ರ ಸಿದ್ಧವಾಗಿದ್ದು ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳಲು
+
+### ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡುವ ಉತ್ತಮ ವಿಧಾನ
+
+ಚಿತ್ರ ಲೋಡ್ ಮಾಡುವ ಮತ್ತಷ್ಟು ಬಲವಾದ ವಿಧಾನವನ್ನು ಇಲ್ಲಿ ತೋರಲಾಗಿದೆ, ಇದನ್ನು ವೃತ್ತಿಪರ ಡೆವಲಪರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುತ್ತಾರೆ. ನಾವು Promise ಆಧಾರಿತ ಕಾರ್ಯತ್ವದಲ್ಲಿ ಚಿತ್ರ ಲೋಡ್ ಮಾಡುವುದನ್ನು ಸುತ್ತಿಬಿದ್ದೇವೆ – ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ES6 ನಲ್ಲಿ Promises ನಿಯಮಿತವಾಗಿದೆಯೆಂದು ಈ ವಿಧಾನ ಪ್ರಚಲಿತವಾಗಿದೆ, ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ವ್ಯವಸ್ಥಿತವಾಗಿಸುವುದಕ್ಕೂ ಹಾಗೂ ದೋಷಗಳ ನಿರ್ವಹಣೆಗೆ ಅನುಕೂಲವಾಗುತ್ತದೆ:
+
+```javascript
+function loadAsset(path) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = path;
+    img.onload = () => {
+      resolve(img);
+    };
+    img.onerror = () => {
+      reject(new Error(`Failed to load image: ${path}`));
+    };
+  });
+}
+
+// ಆಧುನಿಕ ಬಳಕೆ async/await ಜೊತೆಗೆ
+async function initializeGame() {
+  try {
+    const heroImg = await loadAsset('hero.png');
+    const monsterImg = await loadAsset('monster.png');
+    // ಚಿತ್ರಗಳು ಈಗ ಬಳಕೆಗಾಗಿ ಸಿದ್ಧವಾಗಿವೆ
+  } catch (error) {
+    console.error('Failed to load game assets:', error);
+  }
+}
+```
+
+**ನಾವು ಇಲ್ಲಿ ಮಾಡಿದೆವು:**
+- ಚಿತ್ರ ಲೋಡ್ ಮಾಡುವ ಎಲ್ಲಾ ಲಾಜಿಕ್ನು Promise ನಲ್ಲಿ ಸುತ್ತಿಬಿಟ್ಟಿದ್ದೇವೆ ಹೀಗಾಗಿ ಅದನ್ನು ಉತ್ತಮವಾಗಿ ನಿರ್ವಹಿಸಬಹುದು
+- ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಸೇರಿಸಿದ್ದೇವೆ, ಇದು ಏನಾದರೂ ತಪ್ಪಿದ್ದಾಗ ನಮಗೆ ತಿಳಿಸುತ್ತದೆ
+- ಆಧುನಿಕ async/await ವಾಕ್ಯರಚನೆಯನ್ನು ಬಳಸಿದೆವು ಏಕೆಂದರೆ ಇದು ಓದಲು ಬಹಳ ಸ್ವಚ್ಛವಾಗಿದೆ
+- try/catch ಬ್ಲಾಕ್‌ಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ ಯಾವುದೇ ಲೋಡ್ ಸಮಸ್ಯೆಗಳನ್ನು ಸವಿಯಾಗೀ ನಿರ್ವಹಿಸಲು
+
+ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡಿದ ನಂತರ, ಅವನ್ನು ಕ್ಯಾನ್‌ವಾಸ್‌ಗೆ ಬಿಡಿಸುವುದು ನಿಜವಾಗಿಯೂ ಸರಳವಾಗಿರುತ್ತದೆ:
+
+```javascript
+async function renderGameScreen() {
+  try {
+    // ಗೇಮ್ ಆಸ್ತಿ‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ
+    const heroImg = await loadAsset('hero.png');
+    const monsterImg = await loadAsset('monster.png');
+
+    // ಕ್ಯಾನ್ವಾಸ್ ಮತ್ತು ಸಂಧರ್ಭವನ್ನು ಪಡೆಯಿರಿ
+    const canvas = document.getElementById("myCanvas");
+    const ctx = canvas.getContext("2d");
+
+    // ಚಿತ್ರಗಳನ್ನು ನಿಶ್ಚಿತ ಸ್ಥಾನಗಳಿಗೆ desenhos ಮಾಡಿ
+    ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
+    ctx.drawImage(monsterImg, 0, 0);
+  } catch (error) {
+    console.error('Failed to render game screen:', error);
+  }
+}
+```
+
+**ಈ ಹಂತಗಳನ್ನು ಹೀಗೆ ಹಾದುಹೋಗೋಣ:**
+- ನಾವು ಹೆರೋ ಮತ್ತು ಮಾನ್ತ್ರ ಎರಡೂ ಚಿತ್ರಗಳನ್ನು ಹಿನ್ನೆಲೆಯಿಂದ await ಬಳಸಿ ಲೋಡ್ ಮಾಡುತ್ತೇವೆ
+- ನಾವು ನಮ್ಮ ಕ್ಯಾನ್‌ವಾಸ್ ಅನ್ನು ಹಿಡಿದು 2D ರೆಂಡರಿಂಗ್ ಕಂಟೆಕ್ಸ್ಟ್ ಪಡೆಯುತ್ತೇವೆ
+- ನಾವು ಕೆಲವು ಸರಳ ಸಂಕೇತ ಗಣಿತದಿಂದ ಹೀರೋ ಚಿತ್ರವನ್ನು ಮಧ್ಯಭಾಗದಲ್ಲಿ ನಿಖರವಾಗಿ ಸ್ಥಾಪಿಸುತ್ತೇವೆ
+- ಮಾನ್ತ್ರದ ಚಿತ್ರವನ್ನು ಎಡ-ಮೇಲೆ ಮೂಲೆಯಲ್ಲಿಡುತ್ತೇವೆ, ನಮ್ಮ ಶತ್ರು ರೂಪರೇಷೆ ಪ್ರಾರಂಭಿಸಲು
+- ಲೋಡ್ ಅಥವಾ ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸಬಹುದಾದ ದೋಷಗಳನ್ನು ನಾವು ಹಿಡಿದುಕೊಳ್ಳುತ್ತೇವೆ
+
+```mermaid
+flowchart TD
+    A[ಆಸ್ತಿ ಲೋಡ್ ಮಾಡಿ] --> B{ಎಲ್ಲಾ ಚಿತ್ರಗಳು ಲೋಡ್ ಆಗಿದೆಯೇ?}
+    B -->|ಇಲ್ಲ| C[ಲೋಡಿಂಗ್ ತೋರಿಸಿ]
+    B -->|ಹೌದು| D[ಕ್ಯಾಂವಾಸ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಪಡೆಯಿರಿ]
+    C --> B
+    D --> E[ಸ್ಕ್ರೀನ್ ತೆರವುಗೊಳಿಸಿ]
+    E --> F[ಹಿನ್ನೆಲೆ ರೇಖೆ]
+    F --> G[ಶತ್ರು ರಚನೆ ರೇಖೆ]
+    G --> H[ನಾಯಕ ಹಡಗು ರೇಖೆ]
+    H --> I[ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ಅನ್ವಯಿಸಿ]
+    I --> J[ಫ್ರೇಮ್ ರೆಂಡರ್ ಮಾಡಿ]
+    
+    subgraph "ರೆಂಡರಿಂಗ್ ಪೈಪ್ಲೈನ್"
+        K[ಆಸ್ತಿ ನಿರ್ವಹಣೆ]
+        L[ದೃಶ್ಯ ಸಂಯೋಜನೆ]
+        M[ರೂಪರೇಖಾ ಕಾರ್ಯಾಚರಣೆಗಳು]
+        N[ಫ್ರೇಮ್ ಔಟ್ಪುಟ್]
+    end
+    
+    style A fill:#e1f5fe
+    style J fill:#e8f5e8
+    style I fill:#fff3e0
+```
+## ಈಗ ನಿಮ್ಮ ಗೇಮ್ ನಿರ್ಮಿಸೋಣ
+
+ಈಗ ನಾವು ಎಲ್ಲವನ್ನೂ ಸೇರಿಸಿ ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮ್‌ನ ದೃಶ್ಯ ಮೂಲವನ್ನು ನಿರ್ಮಿಸುತ್ತೇವೆ. ನೀವು ಕ್ಯಾನ್‌ವಾಸ್ ಮೂಲಭೂತಗಳು ಮತ್ತು ಚಿತ್ರ ಲೋಡ್ ತಂತ್ರಗಳನ್ನು ಚೆನ್ನಾಗಿ ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದೀರಿ, ಈ ಕೈ ಜೋಡಿಸಿದ ವಿಭಾಗವು ಸುಸಜ್ಜಿತ ಸ್ಪ್ರೈಟ್‌ಗಳನ್ನು ಸರಿಯಾದ ಸ್ಥಾನದಲ್ಲಿ ನಿರ್ಮಿಸುವ ಸಂಪೂರ್ಣ ಗೇಮ್ ಪರದೆ ನಿರ್ಮಾಣಕ್ಕೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತದೆ.
+
+### ನಿಮಗೆ ನಿರ್ಮಿಸಬೇಕಾಗಿರುವುದು
+
+ನೀವು ಕ್ಯಾನ್‌ವಾಸ್ ಅಂಶವನ್ನು ಹೊಂದಿರುವ ವೆಬ್ ಪುಟವನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ, ಅದು ಕಪ್ಪು ಬೆಕೆಗ್ರೌಂಡ್‌ನ್ನು `1024*768` ನಲ್ಲಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ನಾವು ನಿಮಗೆ ಎರಡು ಚಿತ್ರಗಳನ್ನು ಒದಗಿಸಿದ್ದೇವೆ:
+
+- ಹೀರೋ ಹಡಗು
+
+   ![ಹೀರೋ ಹಡಗು](../../../../translated_images/player.dd24c1afa8c71e9b.kn.png)
+
+- 5*5 ಮಾನ್ತ್ರಗಳು
+
+   ![ಮಾನ್ತ್ರ ಹಡಗು](../../../../translated_images/enemyShip.5df2a822c16650c2.kn.png)
+
+### ಅಭಿವೃದ್ಧಿ ಪ್ರಾರಂಭಿಸಲು ಶಿಫಾರಸು ಮಾಡಿದ ಹಂತಗಳು
+
+ನೀವು `your-work` ಉಪ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಸೃಷ್ಟಿಸಿದ ಸ್ಟಾರ್ಟರ್ ಫೈಲ್‌ಗಳನ್ನು ಕಂಡುಹಿಡಿಯಿರಿ. ನಿಮ್ಮ ಯೋಜನಾ ರಚನೆ ಇವುಗಳನ್ನು ಒಳಗೊಂಡಿರಬೇಕು:
+
+```bash
+your-work/
+├── assets/
+│   ├── enemyShip.png
+│   └── player.png
+├── index.html
+├── app.js
+└── package.json
+```
+
+**ನೀವು ಇವುಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದೀರಿ:**
+- **ಗೇಮ್ ಸ್ಪ್ರೈಟ್‌ಗಳು** `assets/` ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಇರುತ್ತವೆ, ಆದ್ದರಿಂದ ಎಲ್ಲವು ವ್ಯವಸ್ಥಿತವಾಗಿರುತ್ತದೆ
+- **ನಿಮ್ಮ ಮುಖ್ಯ HTML ಫೈಲ್‌** ಕ್ಯಾನ್‌ವಾಸ್ ಅಂಶವನ್ನು ಸೆಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಎಲ್ಲವನ್ನೂ ಸಿದ್ಧಪಡಿಸುತ್ತದೆ
+- **ಒಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್** ಇಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಗೇಮ್ ರೆಂಡರ್ ಮ್ಯಾಜಿಕ್ ಬರೆಯುತ್ತೀರಿ
+- **ಒಂದು package.json** ಇದು ವರಡುಟ್ಟಾಗಿ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಅನ್ನು ಸೆಟ್ ಅಪ್ ಮಾಡುತ್ತದೆ, ನೀವು ಸ್ಥಳೀಯವಾಗಿ ಪರೀಕ್ಷಿಸಲು
+
+ಈ ಫೋಲ್ಡರ್ ಅನ್ನು Visual Studio Code ನಲ್ಲಿ ತೆರೆಯಿರಿ ಬೆಳವಣಿಗೆ ಪ್ರಾರಂಭಿಸಲು. ನೀವು ಸ್ಥಳೀಯ ಬೆಳವಣಿಗೆ ಪರಿಸರದಲ್ಲಿ Visual Studio Code, NPM, ಮತ್ತು Node.js ಹೊಂದಿರಬೇಕು. ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ `npm` ಸ್ಥಾಪಿತವಿಲ್ಲದಿದ್ದರೆ, [ಇದನ್ನು ಹೇಗೆ ಸ್ಥಾಪಿಸುವುದು](https://www.npmjs.com/get-npm) ನೋಡಿರಿ.
+
+ನೀವು `your-work` ಫೋಲ್ಡರ್‌ಗೆ ತೆರಳಿ ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಪ್ರಾರಂಭಿಸಿ:
+
+```bash
+cd your-work
+npm start
+```
+
+**ಈ ಆಜ್ಞೆ ಕೆಲವು ಬಹಳ ಚೆಲುವಾದ ಕಾರ್ಯಗಳನ್ನು ಮಾಡುತ್ತದೆ:**
+- **ಸ್ಥಳೀಯ ಸರ್ವರ್ ಪ್ರಾರಂಭಿಸುತ್ತದೆ** `http://localhost:5000` ನಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಗೇಮ್ ಪರೀಕ್ಷಿಸಬಹುದಾಗಿದೆ
+- **ನಿಮ್ಮ ಎಲ್ಲಾ ಫೈಲ್‌ಗಳ ಸರಿಯಾದ ಸೇವೆಯನ್ನು ನೀಡುತ್ತದೆ** ಅಂದರೆ ನೀವು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸರಿಯಾಗಿ ಲೋಡ್ ಮಾಡಬಹುದು
+- **ನಿಮ್ಮ ಫೈಲ್‌ಗಳಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ನೋಡಿಕೊಳ್ಳುತ್ತದೆ** ಆದ್ದರಿಂದ ನೀವು ಸುಗಮವಾಗಿ ಅಭಿವೃದ್ಧಿ ಮಾಡಬಹುದು
+- **ನಿಮಗೆ** ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ ಪರಿಸರವನ್ನು ನೀಡುತ್ತದೆ ಎಲ್ಲವನ್ನೂ ಪರೀಕ್ಷಿಸಲು
+
+> 💡 **ಟಿಪ್ಪಣಿ**: ಆರಂಭದಲ್ಲಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಖಾಲಿ ಪುಟವನ್ನು ತೋರಿಸುತ್ತದೆ – ಇದು ಅಪೇಕ್ಷಿತ. ನೀವು ಕೋಡ್ ಸೇರಿಸುವಂತೆ, ಬ್ರೌಸರ್ ಅನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ ಬದಲಾವಣೆಗಳನ್ನು ನೋಡಿ. ಈ ಪುನರಾವೃತ ಬೆಳವಣಿಗೆ ವಿಧಾನ NASA ಯವರು ಅಪೊಲೊ ಗೈಡನ್ಸ್ ಕಂಪ್ಯೂಟರ್ ನಿರ್ಮಿಸಲಾಗಿದಾಗ ಪ್ರತಿಯೊಂದು ಭಾಗದ ಪರೀಕ್ಷೆಯ ರೀತಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ – ಸಮಗ್ರ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಸೇರಿಸುವ ಮುನ್ನ.
+
+### ಕೋಡ್ ಸೇರಿಸಿ
+
+ಕೆಳಗಿನ ಕಾರ್ಯಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು `your-work/app.js` ನಲ್ಲಿ ಅಗತ್ಯವಿರುವ ಕೋಡ್ ಸೇರಿಸಿ:
+
+1. **ಕಪ್ಪು ಹಿನ್ನೆಲೆಯೊಂದಿಗೆ ಕ್ಯಾನ್‌ವಾಸ್ ಬಿಡಿಸಿ**
+   > 💡 **ಹೀಗೆ ಮಾಡಿ**: `/app.js` ನಲ್ಲಿ TODO ಅನ್ನು ಹುಡುಕಿ ಮತ್ತು ಕೇವಲ ಎರಡು ಸಾಲುಗಳನ್ನು ಸೇರಿಸಿ. `ctx.fillStyle` ಅನ್ನು ಕಪ್ಪು ಆಗಿ ಸೆಟ್ ಮಾಡಿ, ನಂತರ (0,0) ರಿಂದ ಪ್ರಾರಂಭಿಸಿ ನಿಮ್ಮ ಕ್ಯಾನ್‌ವಾಸ್ ಆಯಾಮಗಳೊಂದಿಗೆ `ctx.fillRect()` ಬಳಸಿ. ಸುಲಭ!
+
+2. **ಗೇಮ್ ಟೆಕ್ಸ್ಚರ್ಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ**
+   > 💡 **ಹೀಗೆ ಮಾಡಿ**: `await loadAsset()` ಬಳಸಿ ನಿಮ್ಮ ಪ್ಲೇಯರ್ ಮತ್ತು ಶತ್ರು ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ. ಅವುಗಳನ್ನು ಖಚಿತವಾಗಿ ನಂತರ ಬಳಸಲು ವೇರಿಯೇಬಲಿನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ. ನೆನಪಿಡಿ – ನೀವು ಅವುಗಳನ್ನು ಬಿಡಿಸುವವರೆಗೂ ಅವು ಕಾಣಿಸುವುದಿಲ್ಲ!
+
+3. **ಹೀರೋ ಹಡಗು ಕೇಂದ್ರದ ಕೆಳಭಾಗದಲ್ಲಿ ಬಿಡಿಸಿ**
+   > 💡 **ಹೀಗೆ ಮಾಡಿ**: `ctx.drawImage()` ಬಳಸಿ ನಿಮ್ಮ ಹೀರೋ ಹಡಗು ಸ್ಥಾನದೊಂದಿಗೆ ಬಿಡಿಸಿ. x-ಸ್ಥಾನದಿಗಾಗಿ, `canvas.width / 2 - 45` ಬಳಸಿ ಮಧ್ಯದಲ್ಲಿ ಇರಿಸಲು, ಮತ್ತು y-ಸ್ಥಾನದಿಗಾಗಿ `canvas.height - canvas.height / 4` ಬಳಸಿ ಕೆಳಭಾಗದಲ್ಲಿ ಇರಿಸಲು ಪ್ರಯತ್ನಿಸಿ.
+
+4. **5×5 ಶತ್ರು ಹಡಗಿನ ರೂಪರೇಷೆಯನ್ನು ಬಿಡಿಸಿ**
+   > 💡 **ಹೀಗೆ ಮಾಡಿ**: `createEnemies` ಫಂಕ್ಷನ್ನಿನಲ್ಲಿ ನಕಲಿ ಲೂಪ್ ಸ್ಥಾಪಿಸಿ. ಆತ್ಮೀಯರಿಗೆ ಅಂತರ ಮತ್ತು ಸ್ಥಾನಗಳನ್ನು ಗಣಿತ ಮಾಡಲು ನಿಮ್ಮನ್ನು ಅತ್ಯಂತ ಸಹಾಯಕವಾಗಿರಬೇಕು – ನಾನು ನಿಮಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಹೇಗೆ ಮಾಡೋದು ತೋರಿಸುತ್ತೇನೆ!
+
+ಮೊದಲು, ಸರಿಯಾದ ಶತ್ರು ರೂಪರೇಷೆ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಸ್ಥಿರಾಂಕಗಳನ್ನು ಸ್ಥಾಪಿಸಿ:
+
+```javascript
+const ENEMY_TOTAL = 5;
+const ENEMY_SPACING = 98;
+const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
+const START_X = (canvas.width - FORMATION_WIDTH) / 2;
+const STOP_X = START_X + FORMATION_WIDTH;
+```
+
+**ಈ ಸ್ಥಿರಾಂಕಗಳು ಏನು ಮಾಡುತ್ತವೆ:**
+- ನಾವು ಪ್ರತಿ ಸಾಲಿನಲ್ಲಿ ಮತ್ತು ಕಾಲಮ್‌ನಲ್ಲಿ 5 ಶತ್ರುಗಳನ್ನು (ಏಕ್ ಸುಂದರ 5×5 ಜಾಲ) ಸೆಟ್ ಮಾಡುತ್ತೇವೆ
+- ಶತ್ರುಗಳ ನಡುವೆ ಎಷ್ಟು ಕಲ್ಲು ಹಾಕಬೇಕು ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ ಆದ್ದರಿಂದ ಅವು ಅಲೆಮ notícia ne ಈಗಾ
+- ನಮ್ಮ ಸಂಪೂರ್ಣ ರೂಪರೇಷೆಯ ಅಗಲವನ್ನು ಲೆಕ್ಕಿಸುತ್ತೇವೆ
+- ರೂಪರೇಷೆ ಕೇಂದ್ರಿತವಾಗಿದ್ದು ಹೊರ ಅನ್ನುವ ಪ್ರಾರಂಭ ಮತ್ತು ಕೊನೆ ಸ್ಥಳವನ್ನು ನಾವು ಕಂಡುಹಿಡಿಯುತ್ತೇವೆ
+
+```mermaid
+flowchart LR
+    A["ಕ್ಯಾನ್ವಾಸ್ ಅಗಲ: 1024px"] --> B["ಫಾರ್ಮೇಷನ್ ಅಗಲ: 490px"]
+    B --> C["ಪ್ರಾರಂಭ X: 267px"]
+    C --> D["ಶತ್ರು ನಡುವಣ: 98px"]
+    
+    subgraph "5x5 ಶತ್ರು ಫಾರ್ಮೇಷನ್"
+        E["ಸಾಲು 1: Y=0"]
+        F["ಸಾಲು 2: Y=50"]
+        G["ಸಾಲು 3: Y=100"]
+        H["ಸಾಲು 4: Y=150"]
+        I["ಸಾಲು 5: Y=200"]
+    end
+    
+    subgraph "ಕಾಲಮ್ ಮಧ್ಯಂತರ"
+        J["ಕಾಲಮ್ 1: X=267"]
+        K["ಕಾಲಮ್ 2: X=365"]
+        L["ಕಾಲಮ್ 3: X=463"]
+        M["ಕಾಲಮ್ 4: X=561"]
+        N["ಕಾಲಮ್ 5: X=659"]
+    end
+    
+    style A fill:#e1f5fe
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+```
+ನಂತರ, ಶತ್ರು ರೂಪರೇಷೆಯನ್ನು ಬಿಡಿಸಲು ನಕಲಿ ಲೂಪ್‌ಗಳನ್ನು ರಚಿಸಿ:
+
+```javascript
+for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
+  for (let y = 0; y < 50 * 5; y += 50) {
+    ctx.drawImage(enemyImg, x, y);
+  }
+}
+```
+
+**ಈ ನಕಲಿ ಲೂಪ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- ಹೊರಗಿನ ಲೂಪ್ ನಮ್ಮ ರೂಪರೇಷೆಯಲ್ಲಿ ಎಡದಿಂದ ಬಲಕ್ಕೆ ಚಲಿಸುತ್ತದೆ
+- ಒಳಗಿನ ಲೂಪ್ ಮೇಲಿನಿಂದ ಕೆಳಗೆ ಹೋಗುತ್ತದೆ, ಸ್ವಚ್ಛವಾದ ಸಾಲುಗಳನ್ನು ರಚಿಸಲು
+- ನಾವು ಲೆಕ್ಕಹಾಕಿದ ನಿಖರ x,y ಸಂಯೋಜನೆಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಶತ್ರು ಸ್ಪ್ರೈಟ್ ಬಿಡಿಸುತ್ತೇವೆ
+- ಎಲ್ಲವನ್ನೂ ಸಮವೊಂದು ವೈಯಕ್ತಿಕವಾಗಿ ಇಡಲಾಗುತ್ತದೆ ಆಗ ಅದು ವೃತ್ತಿಪರ ಮತ್ತು ವ್ಯವಸ್ಥಿತವಾಗಿ ಕಾಣುತ್ತದೆ
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಗೇಮ್ ರೆಂಡರಿಂಗ್ ನಿಪುಣತೆ**: ಸಂಪೂರ್ಣ ರೆಂಡರಿಂಗ್ ವ್ಯವಸ್ಥೆಯ ಅರ್ಥವನ್ನು ಪರಿಶೀಲಿಸಿ:
+- ✅ ಗೇಮ್ ಪ್ರಾರುಂಭದಲ್ಲಿ ಅಸಿಂಕ್ರೊನಸ್ ಚಿತ್ರ ಲೋಡ್ ಮಾಡುವುದು UI ನಿರ್ಬಂಧವನ್ನು ಹೇಗೆ ತಡೆಗಟ್ಟುತ್ತದೆ?
+- ✅ ನಾವು ಕೇವಲ ನೇರಾಂಕಗಳನ್ನು ಬರೆದೆಲ್ಲದೇ ಸ್ಥಿರಾಂಕಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಶತ್ರು ರೂಪರೇಷೆಯ ಸ್ಥಾನಗಳನ್ನು ಲೆಕ್ಕಿಸುವುದು ಯಾಕೆ?
+- ✅ 2D ರೆಂಡರಿಂಗ್ ಕಂಟೆಕ್ಸ್ಟ್ ಬಿಡಿಸುವ ಕಾರ್ಯಗಳಲ್ಲಿನ ಪಾತ್ರವೇನು?
+- ✅ ನಕಲಿ ಲೂಪ್‌ಗಳು ಸಂಘಟಿತ ಸ್ಪ್ರೈಟ್ ರೂಪರೇಷೆಗಳನ್ನು ಹೇಗೆ ಸೃಷ್ಟಿಸುತ್ತವೆ?
+
+**ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಗಣನೆಗಳು**: ನಿಮ್ಮ ಗೇಮ್ ಈಗ ತೋರಿಸುತ್ತದೆ:
+- **ಕಾರ್ಯನಿರತ ಆಸ್ತಿ ಲೋಡಿಂಗ್**: Promise ಆಧಾರಿತ ಚಿತ್ರ ನಿರ್ವಹಣೆ
+- **ಸಂಘಟಿತ ರೆಂಡರಿಂಗ್**: ರಚಿತ ಬಿಡಿಸುವ ಕಾರ್ಯಗಳು
+- **ಗಣಿತೀಯ ಸ್ಥಾನ ನಿರ್ಧಾರ**: ಲೆಘಿಗೊಳಿಸಿದ ಸ್ಪ್ರೈಟ್ ಸ್ಥಳ
+- **ದೋಷ ನಿರ್ವಹಣೆ**: ಸುಗಮ ವಿಫಲ ನಿರ್ವಹಣೆ
+
+**ದೃಶ್ಯ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತತ್ವಗಳು**: ನೀವು ಕಲಿತಿದ್ದೀರಿ:
+- **ಸಂಯೋಜನೆ ವ್ಯವಸ್ಥೆಗಳು**: ಗಣಿತವನ್ನು ಪರದೆ上的 ದಿನಾಂಕಗಳಿಗೆ ಅನುವಾದಿಸುವುದು  
+- **ಸ್ಪ್ರೈಟ್ ವ್ಯವಸ್ಥಾಪನೆ**: ಆಟದ ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಲೋಡ್ ಮತ್ತು ಪ್ರದರ್ಶನ ಮಾಡುವುದು  
+- **ಘടನೆಯ ಆಲ್ಗೊರಿತಮ್ಗಳು**: ಸಂಘಟಿತ ವಿನ್ಯಾಸಗಳಿಗಾಗಿ ಗಣಿತೀಯ ಮಾದರಿಗಳು  
+- **ಏಸಿಂಕ್ ಕಾರ್ಯಾಚರಣೆಗಳು**: ಸಣ್ಣ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್  
+
+## ಫಲಿತಾಂಶ
+
+ಪೂರ್ಣವಾದ ಫಲಿತಾಂಶ ಹೀಗಿರಬೇಕು:
+
+![Black screen with a hero and 5*5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a.kn.png)
+
+## ಪರಿಹಾರ
+
+ದಯವಿಟ್ಟು ಮೊದಲು ನೀವು ತಾನೇ ಪ್ರಯತ್ನಿಸಿ, ಆದರೆ ನೀವು ಅटकಿಕೊಂಡರೆ [ಪರಿಹಾರ](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) ನೋಡಿರಿ
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸ್ಪರ್ಧೆ 🚀
+
+ಕೆಳಗಿನ ಸವಾಲನ್ನು ನಿಭಾಯಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ನೀವು ಕಲಿತ Canvas API ತಂತ್ರಗಳನ್ನು ಉಪಯೋಗಿಸಿಕೊಂಡು ನಿಮ್ಮ ಸ್ಪೇಸ್ ಆಟದ ಕ್ಯಾನ್ವಾಸ್‌ಗೆ ದೃಶ್ಯ ಪರಿಣಾಮಗಳು ಮತ್ತು ಸಂವಹನಾತ್ಮಕ ಅಂಶಗಳನ್ನು ಸೇರಿಸಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** `enhanced-canvas.html` ಎಂಬ ಹೊಸ ಕಡತವನ್ನು ಸೃಷ್ಟಿಸಿ, ಇದರಲ್ಲಿ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಅನಿಮೆಟ್ ಸ್ಟಾರ್ಗಳೊಂದಿಗೆ ಕ್ಯಾನ್ವಾಸ್ ಇದೆ, ಹೀರೋ ಶಿಪ್ ಗಾಗಿ ನಿಡುಗು health ಬಾರ್ ಆಗಿದ್ದು, ಮತ್ತು ಶತ್ರು ಶಿಪ್ ಗಳು ನಿಧಾನವಾಗಿ ಕೆಳಗೆ ಸರಿಯುತ್ತವೆ. ಅಂಧಕಾರಸ್ಥಳ ಹಾಗೂ ಆಕಾಶದ ಛಾಯಾಳಿಕೆಗಾಗಿ ಸಾಂಪ್ರದಾಯಿಕ ಸ್ಥಾನಗಳು ಮತ್ತು ಅಪಾರದೆ ನಿಯಂತ್ರಣ ಆಧಾರಿತ ಕಾಮಗಾರಿ ಮಾಡುತ್ತಿರುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಜೊತೆಗೆ ಅಂತಹ health ಬಾರ್ ಆರೋಗ್ಯ ಮಟ್ಟದ ಆಧಾರದ ಮೇಲೆ ಬಣ್ಣ (ಹಸಿರು > ಹಳದಿ > ಕೆಂಪು) ಬದಲಾಯಿಸುವುದು ಹಾಗೂ ವಿವಿಧ ವೇಗದಲ್ಲಿ ಶತ್ರು ಹಡಗನ್ನು ಕೆಳಗೆ ಚಲಿಸುವ ಅನಿಮೇಶನ್ ಮಾಡುವುದು ಸೇರಿಸಿ.
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಇನ್ನು ತಿಳಿಯಿರಿ.
+
+## 🚀 ಸವಾಲು
+
+ನೀವು 2D ಸ್ಪಷ್ಟ ಕ್ಯಾನ್ವಾಸ್ API ಬಳಸಿ ಚಿತ್ರಿಸುವಿಕೆ ಕಲಿದೀರಿ; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ನೋಡಿರಿ ಮತ್ತು 3D ವಸ್ತುವನ್ನು ಚಿತ್ರಿಸಲು ಪ್ರಯತ್ನಿಸಿ.
+
+## ಪಠ್ಯದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪಠ್ಯದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/32)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+Canvas API ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ [ಇದನ್ನು ಓದಿಕೊಳ್ಳಿ](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು**  
+- [ ] ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್ ತೆರೆಯಿರಿ ಮತ್ತು `document.createElement('canvas')` ಬಳಸಿ ಕ್ಯಾನ್ವಾಸ್ ಅಂಶವನ್ನು ಸೃಷ್ಟಿಸಿ  
+- [ ] `fillRect()` ಬಳಸಿ ಕ್ಯಾನ್ವಾಸ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಲ್ಲಿ ಒಂದು ಚತೆಗೆഴಿದಂತೆ ರಚಿಸಿ  
+- [ ] ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸಲು `fillStyle` ಗುಣಲಕ್ಷಣವನ್ನು ಪ್ರಯೋಗಿಸಿ  
+- [ ] `arc()` ವಿಧಾನದಿಂದ ಸರಳ ವೃತ್ತವನ್ನು ಚಿತ್ರಿಸಿ  
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದುದು**  
+- [ ] ಪಠ್ಯದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಕ್ಯಾನ್ವಾಸ್ ipilẹಭೂತಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ  
+- [ ] ವಿಭಿನ್ನ ಆಕಾರಗಳು ಮತ್ತು ಬಣ್ಣಗಳೊಂದಿಗೆ ಕ್ಯಾನ್ವಾಸ್ ಚಿತ್ರಿಕಾ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಿ  
+- [ ] ನಿಮ್ಮ ಆಟಕ್ಕಾಗಿ ಚಿತ್ರ ಲೋಡ್ ಮತ್ತು ಸ್ಪ್ರೈಟ್ ರೆಂಡರಿಂಗ್ ಅನುಷ್ಟಾನ ಮಾಡಿ  
+- [ ] ಸಾದಾರಣ ಅನಿಮೆಶನ್ ಸೃಷ್ಟಿಸಿ, ಬಸ್ತುಗಳನ್ನು ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಚಲಿಸುವಂತೆ ಮಾಡಿ  
+- [ ] ಮಾಪನ, ಸುತ್ತು, ಸ್ಥಳಾಂತರ ರೀತಿ ಕ್ಯಾನ್ವಾಸ್ ಪರಿವರ್ತನೆಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ  
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ಕ್ಯಾನ್ವಾಸ್ ಯಾತ್ರೆ**  
+- [ ] ಸಜ್ಜುಗೊಂಡ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಸ್ಪ್ರೈಟ್ ಅನಿಮೆಶನ್ಗಳೊಂದಿಗೆ ಸ್ಪೇಸ್ ಆಟದ ಪೂರ್ಣಗೊಳಿಸಿ  
+- [ ] ಗ್ರೇಡಿಯೆಂಟ್, ಮಾದರಿಗಳು ಮತ್ತು ಕಾಂಪೊಸಿಟಿಂಗ್ ಮುಂತಾದ ಉನ್ನತ ಮಟ್ಟದ ಕ್ಯಾನ್ವಾಸ್ ತಂತ್ರಗಳನ್ನು ಮಾಸ್ಟರ್ ಮಾಡಿ  
+- [ ] ಡೇಟಾ ಪ್ರದರ್ಶನಕ್ಕಾಗಿ ಇಂಟರಾಕ್ಟಿವ್ ವಿಸುಯಲೈಜೆಷನ್ ರಚಿಸಿ  
+- [ ] ಸ್ಮೂತ್ ಕಾರ್ಯಕ್ಷಮತೆಯಿಗಾಗಿ ಕ್ಯಾನ್ವಾಸ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ  
+- [ ] ವಿವಿಧ ಉಪಕರಣಗಳೊಂದಿಗೆ ಚಿತ್ರ ಮತ್ತು ಚಿತ್ರಣ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ನಿರ್ಮಿಸಿ  
+- [ ] ಸೃಜನಶೀಲ ಕೋಡಿಂಗ್ ಮಾದರಿಗಳು ಮತ್ತು ಜನರೇಟಿವ್ ಆರ್ಟ್ ಬಗ್ಗೆ ಅನ್ವೇಷಿಸಿ  
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ಗ್ರಾಫಿಕ್ಸ್ ಪರಿಣತಿ**  
+- [ ] Canvas 2D ಮತ್ತು WebGL ಬಳಸಿ ಸಂಕೀರ್ಣ ದೃಶ್ಯ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ನಿರ್ಮಿಸಿ  
+- [ ] ಗ್ರಾಫಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತತ್ವಗಳು ಮತ್ತು ಶೇಡರ್ ಮೂಲಭೂತಗಳನ್ನು ಕಲಿಯಿರಿ  
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಗ್ರಂಥಾಲಯಗಳು ಮತ್ತು ವಿಸುಯಲೈಜೇಶನ್ ಉಪಕರಣಗಳಲ್ಲಿ ಕೊಡುಗೆ ನೀಡಿರಿ  
+- [ ] ದೃಶ್ಯ ಗುಣಮಟ್ಟ ಹೆಚ್ಚಿಸಲು ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನಲ್ಲಿ ಪರಿಣತಿ ಪಡೆಯಿರಿ  
+- [ ] ಕ್ಯಾನ್ವಾಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಮತ್ತು ಕಂಪ್ಯೂಟರ್ ಗ್ರಾಫಿಕ್ಸ್ ಬಗ್ಗೆ ಶೈಕ್ಷಣಿಕ ವಿಷಯವನ್ನು ರಚಿಸಿ  
+- [ ] ದೃಶ್ಯ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುವಲ್ಲಿ ಸಹಾಯ ಮಾಡುವ ಗ್ರಾಫಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತಜ್ಞರಾಗಿ ಬೆಳೆಯಿರಿ  
+
+## 🎯 ನಿಮ್ಮ ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಪರಿಣತಿ ಟೈಮ್ಲೈನ್  
+
+```mermaid
+timeline
+    title ಕ್ಯಾನ್ವಾಸ್ API ಕಲ-learning ಪ್ರಗತಿ
+    
+    section ಕ್ಯಾನ್ವಾಸ್ ಮೂಲಭೂತಗಳು (15 ನಿಮಿಷಗಳು)
+        ಮೂಲಭೂತ ಕಾರ್ಯಾಚರಣೆಗಳು: ಪರಿಕರ ಉಲ್ಲೇಖ
+                        : 2D ಕಂಟೆಕ್ಸ್ಟ್ ಪ್ರವೇಶ
+                        : ಸಂಯೋಜನೆ ವ್ಯವಸ್ಥೆ
+                        : ಸರಳ ಆಕಾರ ರೇಖಾಚಿತ್ರ
+    
+    section ರೇಖಾಚಿತ್ರ ತಂತ್ರಗಳು (20 ನಿಮಿಷಗಳು)
+        ಗ್ರಾಫಿಕ್ಸ್ ಮೂಲಭೂತಗಳು: ಚೌಕಟ್ಟುಗಳು ಮತ್ತು ವೃತ್ತಗಳು
+                           : ಬಣ್ಣಗಳು ಮತ್ತು ಶೈಲಿಗಳು
+                           : ಪಠ್ಯದ ರೆಂಡರಿಂಗ್
+                           : ಮಾರ್ಗ ಕಾರ್ಯಾಚರಣೆಗಳು
+    
+    section ಚಿತ್ರ ನಿರ್ವಹಣೆ (25 ನಿಮಿಷಗಳು)
+        ಆಸ್ತಿ ನಿರ್ವಹಣೆ: ಚಿತ್ರ ವಸ್ತು ಸೃಷ್ಟಿ
+                        : ಅಸಿಂಕ್ರೋನಸ್ ಲೋಡಿಂಗ್ ಮಾದರಿಗಳು
+                        : ದೋಷ ನಿರ್ವಹಣೆ
+                        : ಪ್ರದರ್ಶನ оптимೈಜೇಶನ್
+    
+    section ಆಟದ ಗ್ರಾಫಿಕ್ಸ್ (30 ನಿಮಿಷಗಳು)
+        ಸ್ಪ್ರೈಟ್ ರೆಂಡರಿಂಗ್: ಸ್ಥಾನಸ್ಥಾಪನಾ ಅಲ್ಗೋರಿಧಮ್‌ಗಳು
+                        : ವಿನ್ಯಾಸ ಲೆಕ್ಕಾಚಾರಗಳು
+                        : ದೃಶ್ಯ ಸಂಯೋಜನೆ
+                        : ಫ್ರೇಮ್ ರೆಂಡರಿಂಗ್
+    
+    section ಉನ್ನತ ತಂತ್ರಗಳು (40 ನಿಮಿಷಗಳು)
+        ದೃಶ್ಯ ಪರಿಣಾಮಗಳು: ಪರಿವರ್ತನೆಗಳು
+                      : ಅನಿಮೇಷನ್ಗಳು
+                      : ಲೇಯರಿಂಗ್
+                      : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+    
+    section ಪ್ರದರ್ಶನ (35 ನಿಮಿಷಗಳು)
+        ಸ್ವೀಕೃತಿ: ಪರಿಣಾಮಕಾರಿ ರೇಖಾಚಿತ್ರ
+                    : ಮೆಮೊರಿ ನಿರ್ವಹಣೆ
+                    : ಫ್ರೇಮ್ ದರ ನಿಯಂತ್ರಣ
+                    : ಆಸ್ತಿ ಕ್ಯಾಶಿಂಗ್
+    
+    section ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು (1 ವಾರ)
+        ಉತ್ಪಾದನಾ ಗ್ರಾಫಿಕ್ಸ್: WebGL ಏಕೀಕರಣ
+                           : ಕ್ಯಾನ್ವಾಸ್ ಲೈಬ್ರರಿಗಳು
+                           : ಆಟ ಎಂಜಿನ್ಗಳು
+                           : ವೇದಿಕೆಗಳಾದ್ಯಾಂತ ಪರಿಗಣನೆಗಳು
+    
+    section ಉನ್ನತ ಗ್ರಾಫಿಕ್ಸ್ (1 ತಿಂಗಳು)
+        ವಿಶಿಷ್ಟ ಅನ್ವಯಿಕೆಗಳು: ಡೇಟಾ ದೃಶ್ಯೀಕರಣ
+                                : ಸಂವಹನ ಕಲೆಯು
+                                : ನಿಜ ಸಮಯ ಪರಿಣಾಮಗಳು
+                                : 3D ಗ್ರಾಫಿಕ್ಸ್
+```  
+### 🛠️ ನಿಮ್ಮ ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಟೂಲ್ಕಿಟ್ ಸಾರಾಂಶ
+
+ಈ ಪಾಠದ ನಂತರ, ನಿಮಗಿದ್ದು:  
+- **ಕ್ಯಾನ್ವಾಸ್ API ಪರಿಣತಿ**: 2D ಗ್ರಾಫಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಸಂಪೂರ್ಣ ಅರಿವು  
+- **ಸಂಯೋಜನೆ ಗಣಿತಶಾಸ್ತ್ರ**: ನಿಖರ ಸ್ಥಾನ ನಿರ್ಧಾರ ಮತ್ತು ವಿನ್ಯಾಸ ಆಲ್ಗೊರಿತಮ್ಗಳು  
+- **ಆಸ್ತಿ ನಿರ್ವಹಣೆ**: ವೃತ್ತಿಪರ ಚಿತ್ರ ಲೋಡಿಂಗ್ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆ  
+- **ರೆಂಡರಿಂಗ್ ಪೈಪ್ಲೈನ್**: ದೃಶ್ಯ ರಚನೆಯ ಸಿದ್ಧಾಂತಗೊಳಿಸಿದ ವಿಧಾನ  
+- **ಆಟ ಗ್ರಾಫಿಕ್ಸ್**: ಸ್ಪ್ರೈಟ್ ಸ್ಥಾನದ ನಿರ್ಧಾರ ಮತ್ತು ರೂಪ ರಚನೆ ಗಣನೆಗಳು  
+- **ಏಸಿಂಕ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಸ್ಮೂತ್ ಕಾರ್ಯಾಚರಣೆಯ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿಗಳು  
+- **ದೃಶ್ಯಾತ್ಮಕ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಗಣಿತ ತತ್ವಗಳನ್ನು ಪರದೆ上的 ಗ್ರಾಫಿಕ್ಸ್‌ಗೆ ಅನುವಾದಿಸುವುದು  
+
+**ವಾಸ್ತವಿಕ ಜಗತ್ತಿನ ಅನ್ವಯಿಕೆಗಳು:** ನಿಮ್ಮ ಕ್ಯಾನ್ವಾಸ್ ಹಲವಾರು ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ಉಪಯೋಗವಾಗುತ್ತದೆ:  
+- **ಡೇಟಾ ವಿಸುಯಲೈಜೇಶನ್**: ಚಾರ್ಟ್ ಗಳು, ಗ್ರಾಫ್ ಗಳು ಮತ್ತು ಸಂವಹನಾತ್ಮಕ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಗಳು  
+- **ಆಟ ಅಭಿವೃದ್ಧಿ**: 2D ಆಟಗಳು, ಸಿಮ್ಯುಲೇಶನ್ಗಳು ಮತ್ತು ಸಂವಹನಾತ್ಮಕ ಅನುಭವಗಳು  
+- **ಡಿಜಿಟಲ್ ಆರ್ಟ್**: ಸೃಜನಶೀಲ ಕೋಡಿಂಗ್ ಮತ್ತು ಜನರೇಟಿವ್ ಆರ್ಟ್ ಪರಿಯೋಜನೆಗಳು  
+- **UI/UX ವಿನ್ಯಾಸ**: ಕಸ್ಟಮ್ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಸಂವಹನಾತ್ಮಕ ಅಂಶಗಳು  
+- **ಶೈಕ್ಷಣಿಕ ಸಾಫ್ಟ್‌ವೇರ್**: ದೃಶ್ಯלמידನ ಉಪಕರಣಗಳು ಮತ್ತು ಸಿಮ್ಯುಲೇಶನ್ಗಳು  
+- **ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಗತಿಶೀಲ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ರಿಯಲ್ ಟೈಮ್ ವಿಸುಯಲೈಜೇಶನ್ ಗಳು  
+
+**ಪ್ರೊಫೆಷನಲ್ ಕೌಶಲ್ಯಗಳು**: ನೀವು ಈಗ ಮಾಡಬಹುದಾಗಿದೆ:  
+- **ನಿರ್ಮಿಸಿ** ಹೊರಗಿನ ಗ್ರಂಥಾಲಯಗಳಿಲ್ಲದೆ ಕಸ್ಟಮ್ ಗ್ರಾಫಿಕ್ಸ್ ಪರಿಹಾರಗಳನ್ನು  
+- ** ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿ** ಸ್ಮೂತ್ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯದಕ್ಷತೆಯನ್ನು  
+- **ಡಿಬಗ್ ಮಾಡಿ** ಸಂಕೀರ್ಣ ದೃಶ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಬಳಸಿ  
+- ** ವಿನ್ಯಾಸ ಮಾಡಿ** ಗಣಿತ ತತ್ವಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವಿಸ್ತರಿಸಬಹುದಾದ ಗ್ರಾಫಿಕ್ಸ್ ವ್ಯವಸ್ಥೆಗಳನ್ನು  
+- **ಸ್ಪರ್ಶಿಸಿ** ಸಾರಿಕೇತರ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಫ್ರೇಮ್‌ವರ್ಕ್ಗಳೊಡನೆ ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಸಂಯೋಜಿಸಿ  
+
+**ನೀವು ಮಾಸ್ಟರ್ ಮಾಡಿದ ಕ್ಯಾನ್ವಾಸ್ API ವಿಧಾನಗಳು:**  
+- **ಅಂಶ ನಿರ್ವಹಣೆ**: getElementById, getContext  
+- **ಚಿತ್ರಣ ಕಾರ್ಯಾಚರಣೆಗಳು**: fillRect, drawImage, fillStyle  
+- **ಆಸ್ತಿ ಲೋಡಿಂಗ್**: ಚಿತ್ರ ವಸ್ತುಗಳು, Promise ಮಾದರಿಗಳು  
+- **ಗಣಿತೀಯ ಸ್ಥಾನ ನಿರ್ಧಾರ**: ಸಂಯೋಜನೆ ಲೆಕ್ಕಾಚಾರಗಳು, ರೂಪ ರಚನೆ ಆಲ್ಗೊರಿಥಮ್‌ಗಳು  
+
+**ಮುಂದಿನ ಹಂತ:** ನೀವು ಅನಿಮೇಶನ್, ಬಳಕೆದಾರ ಸಂವೇದನೆ, ಘರ್ಷಣೆ ಪತ್ತೆಮಾಡುವಿಕೆ ಅಥವಾ 3D ಗ್ರಾಫಿಕ್ಸ್‌ಗಾಗಿ WebGL ಅನ್ನು ಅನ್ವೇಷಿಸಲು ಸಿದ್ದರಿದ್ದೀರಿ!
+
+🌟 **ಅರ್ಜಿತರ ಸಾಧನೆ:** ನೀವು ಮೂಲಭೂತ Canvas API ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಉಪಯೋಗಿಸಿ ಸಂಪೂರ್ಣ ಆಟ ರೆಂಡರಿಂಗ್ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಿ!
+
+## ನಿಯೋಜನೆ
+
+[Canvas API ilə ಆಟ ಆಡಿರಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅಸ್ವೀಕಾರ**:  
+ಈ ದಾಖಲೆ AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಉಪಯೋಗಿಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಿಖರತೆಯನ್ನು ನಾವು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರದಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಸ್ವದೇಶಿ ಭಾಶೆಯಲ್ಲಿ ಅಧಿಪ್ರಧಾನ ಮೂಲವಾಗಿರಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗೆ ಹೋರಸದ ಮಾನವನ ಭಾಷಾಂತರ ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರದಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥ ತಪ್ಪುಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತಗೊಳ್ಳುವುದಕ್ಕೆ ನಾವು ಜವಾಬ್ದಾರಿಗಳಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/2-drawing-to-canvas/assignment.md

@@ -0,0 +1,83 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
+  "translation_date": "2026-01-08T13:48:43+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ನಿಯೋಜನೆ: ಕ್ಯಾನ್ವಾಸ್ API ಅನ್ನು ಅನ್ವೇಷಿಸಿ
+
+## ಕಲಿಕೆಯ ಉದ್ದೇಶಗಳು
+
+ಈ ನಿಯೋಜನೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸುವ ಮೂಲಕ, ನೀವು ಕ್ಯಾನ್ವಾಸ್ API ಮೂಲತತ್ವಗಳನ್ನು ತಿಳಿದುಕೊಂಡಿರುವುದು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು HTML5 ಕ್ಯಾನ್ವಾಸ್ ಬಳಸಿ ದೃಶ್ಯಾತ್ಮಕ ಅಂಶಗಳನ್ನು ರಚಿಸಲು ಸೃಜನಶೀಲ ಸಮಸ್ಯೆ ಪರಿಹಾರವನ್ನು ಅನ್ವಯಿಸುವುದನ್ನು ಪ್ರದರ್ಶಿಸುವಿರಿ.
+
+## ಸೂಚನೆಗಳು
+
+ನಿಮಗೆ ಆಸಕ್ತಿ ಇರುವ ಕ್ಯಾನ್ವಾಸ್ API ಯ ಒಂದು ಅಂಶವನ್ನು ಆಯ್ಕೆಮಾಡಿ ಅದರ ಸುತ್ತಲೂ ಆಕರ್ಷಕ ದೃಶ್ಯ ಪ್ರಾಜೆಕ್ಟ್ ರಚಿಸಿ. ಈ ನಿಯೋಜನೆ ನೀವು ಕಲಿತಿದೆ ಬದಲಾಯಿಸುವ ಚಿತ್ರಕಲೆ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಪ್ರಯೋಗಿಸುವಂತೆ ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮದೇ ಪ್ರತ್ಯೇಕವಾದ ಯಾವುದಾದರೂ ನಿರ್ಮಿಸಲು ವಿನಂತಿಸುತ್ತದೆ.
+
+### ಪ್ರಾಜೆಕ್ಟ್ ಕಲ್ಪನೆಗಳು ನಿಮಗೆ ಪ್ರೇರಣೆ ನೀಡಲು
+
+**ಭೌಮಿತೀಯ ಮಾದರಿಗಳು:**
+- **ರಚಿಸಿ** ಯಾದೃಚ್ಛಿಕ ಸ್ಥಾನಗಳಿಸುವಿಕೆಯಿಂದ ಚಂದಿರದ ನಕ್ಷತ್ರಗಳ ಅನಿಮೇಟೆಡ್ ಟ್ವಿಂಕ್ಲಿಂಗ್ ಗ್ಯಾಲಕ್ಸಿ
+- **ಆಯೋಜಿಸಿ** ಪುನರಾವರ್ತಿತ ಭೌಮಿತೀಯ ಆಕಾರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಆಸಕ್ತಿಕರ ಬಣ್ಣಾರಿತ್ರ
+- **ಕಟ್ಟಿಸಿ** ಸುತ್ತುವ, ಬಣ್ಣದ ಮಾದರಿಗಳೊಂದಿಗೆ ಕಲೈಡೋಸ್ಕೋಪ್ ಪರಿಣಾಮ
+
+**ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಅಂಶಗಳು:**
+- **ವಿಕಸಿಸಿ** ಮೌಸ್ ಚಲನೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಚಿತ್ರಕಲೆ ಉಪಕರಣ
+- **ಅಳವಡಿಸಿ** ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಬಣ್ಣ ಬದಲಿಸುವ ಆಕಾರಗಳು
+- **ಆಯೋಜಿಸಿ** ಚಲಿಸುವ ಅಂಶಗಳೊಂದಿಗೆ ಸರಳ ಅನಿಮೇಷನ್ ಲೂಪ್
+
+**ಗೇಮ್-ಸಂಬಂಧಿತ ಗ್ರಾಫಿಕ್ಸ್:**
+- **ರಚಿಸಿ** ಸ್ಥಳ ಗೇಮ್‌ಗಾಗಿ ಸ್ಕ್ರოლಿಂಗ್ ಹಿನ್ನೆಲೆ
+- **ಕಟ್ಟಿಸಿ** ಸ್ಪೋಟಗಳು ಅಥವಾ ಜಾದೂ ಮಂತ್ರಗಳಂತಹ ಕಣ ಪರಿಣಾಮಗಳು
+- **ತಯಾರಿಸಿ** ಹಲವಾರು ಫ್ರೇಮ್‌ಗಳೊಂದಿಗೆ ಅನಿಮೇಟೆಡ್ ಸ್ಪ್ರಿಟ್‌ಗಳು
+
+### ಅಭಿವೃದ್ಧಿ ಮಾರ್ಗಸೂಚಿಗಳು
+
+**ಸಂದರ್ಬ ಮತ್ತು ಪ್ರೇರಣೆ:**
+- **ಬ್ರೌಸ್ ಮಾಡಿ** criatividade ಕಾನ್ವಾಸ್ ಉದಾಹರಣೆಗಳು (ಪ್ರೇರಣೆಗೆ, ನಕಲಿಗೆ ಅಲ್ಲ)
+- **ಅಧ್ಯಯನ ಮಾಡಿ** [ಕ್ಯಾನ್ವಾಸ್ API ಡಾಕ್ಯುಮೆಂಟೇಶನ್](https://developer.mozilla.org/docs/Web/API/Canvas_API) ಹೆಚ್ಚುವರಿ ವಿಧಾನಗಳಿಗಾಗಿ
+- **ಪ್ರಯೋಗಮಾಡಿ** ವಿಭಿನ್ನ ಚಿತ್ರಕಲೆ ಕಾರ್ಯಗಳು, ಬಣ್ಣಗಳು, ಆಗಮನ್‌ಗಳನ್ನು
+
+** ತಾಂತ್ರಿಕ ಅವಶ್ಯಕತೆಗಳು:**
+- **ಬಳಸಿ** ಸರಿಯಾದ ಕ್ಯಾನ್ವಾಸ್ ವ್ಯವಸ್ಥೆಯನ್ನು `getContext('2d')`ೊಂದಿಗೆ
+- **ಒಳಗೆ ಸೇರಿಸಿ** ನಿಮ್ಮ ಆದೇಶವನ್ನು ವಿವರಿಸುವ ಮಹತ್ವದ ಕಾಮೆಂಟ್‌ಗಳು
+- **ತಪಾಸಿಸಿ** ನಿಮ್ಮ ಸಂಹಿತೆಯನ್ನು ಪೂರ್ತಿ ಆಗುಹೋಗುವುದಿಲ್ಲ ಎಂದು ಖಾತ್ರಿ ಪಡಿಸಿ
+- **ಅನುಸರಿಸಿ** ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಿಂಟ್ಯಾಕ್ಸ್ (const/let, ಆಯರ್ ಫಂಕ್ಷನ್‌ಗಳು)
+
+**ಸೃಜನಶೀಲ ವ್ಯಕ್ತಪಡಿಸುವಿಕೆ:**
+- **ಕೇಂದ್ರೀಕರಿಸಿರಿ** ಒಬ್ಬ ಕ್ಯಾನ್ವಾಸ್ API ಫೀಚರ್ ಮೇಲೆ ಆದರೆ ಅದನ್ನು ಆಳವಾಗಿ ಅನ್ವೇಷಿಸಿ
+- **ನಿಮ್ಮದೇ ಸೃಜನಶೀಲ ತಿರುವನ್ನು ಸೇರಿಸಿರಿ** ಪ್ರಾಜೆಕ್ಟ್ ವೈಯಕ್ತಿಕವಾಗಿರಲು
+- **ಪರಿಗಣಿಸಿ** ನಿಮ್ಮ ರಚನೆ ಹೇಗೆ ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನಿನ ಭಾಗವಾಗಿರಬಹುದು
+
+### ಸಲ್ಲಿಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳು
+
+ನೀವು ಪೂರ್ಣಗೊಳಿಸಿದ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಒಂದೇ HTML ಫೈಲ್ ಆಗಿ ಬಳಕೆದಾರರೊಳಗಿನ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗಳೊಂದಿಗೆ ಸಲ್ಲಿಸಿ, ಅಥವಾ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಬೇರೆ ಬೇರೆ ಫೈಲ್‌ಗಳಾಗಿ. ನಿಮ್ಮ ಸೃಜನಶೀಲ ಆಯ್ಕೆಗಳು ಮತ್ತು ನೀವು ಅನ್ವೇಷಿಸಿದ ಕ್ಯಾನ್ವಾಸ್ API ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ವಿವರಿಸುವ ಸಂಕ್ಷಿಪ್ತ ಕಾಮೆಂಟ್ ಸೇರಿಸಿ.
+
+## ಮಾಪಕ ಶಿಬಿರ
+
+| ಮಾನದಂಡಗಳು | ಅತಿ ಶ್ರೇಷ್ಠ | ಸೂಕ್ತ | ಸುಧಾರಣೆ ಬೇಕು |
+|-------------|--------------|---------|--------------|
+| **ತಾಂತ್ರಿಕ ಅನುಷ್ಠಾನ** | ಹಲವಾರು ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸೃಜನಶೀಲವಾಗಿ ಕ್ಯಾನ್ವಾಸ್ API ಬಳಸಲಾಗಿದೆ, ಸಂಕೇತ ದೋಷರಹಿತವಾಗಿ ನಡೆಯುತ್ತಿದೆ, ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ವಯಿಸಿದೆ | ಸರಿಯಾಗಿ ಕ್ಯಾನ್ವಾಸ್ API ಬಳಸಲಾಗಿದೆ, ಸಂಕೇತವು ಸಣ್ಣ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ, ಮೂಲ ಅನುಷ್ಠಾನ | ಕ್ಯಾನ್ವಾಸ್ API ಪ್ರಯತ್ನಿಸಿದೆ ಆದರೆ ಸಂಕೇತದಲ್ಲಿ ದೋಷಗಳಿವೆ ಅಥವಾ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತಿಲ್ಲ |
+| **ಸೃಜನಶೀಲತೆ ಮತ್ತು ವಿನ್ಯಾಸ** | ಅತ್ಯಂತ ಮೂಲಭೂತ ಕಲ್ಪನೆ, ಪದಕ್ಷಿಣ ದೃಶ್ಯ ಆಕರ್ಷಣೆ, ಆಯ್ಕೆಮಾಡಿದ ಕ್ಯಾನ್ವಾಸ್ ಫೀಚರ್ ಆಳವಾದ ಅನ್ವೇಷಣೆಯನ್ನು ತೋರಿಸುತ್ತದೆ | ಕ್ಯಾನ್ವಾಸ್ ವೈಶಿಷ್ಟ್ಯಗಳ ಉತ್ತಮ ಬಳಕೆ ಕೆಲವು ಸೃಜನಶೀಲ ಅಂಶಗಳೊಂದಿಗೆ, ದೃಢ ದೃಶ್ಯ ಫಲಿತಾಂಶ | ಮೂಲ ಅನುಷ್ಠಾನ, ಅತ್ಯಲ್ಪ ಸೃಜನಶೀಲತೆ ಅಥವಾ ದೃಶ್ಯ ಆಕರ್ಷಣೆ |
+| **ಸಂಕೇತ ಗುಣಮಟ್ಟ** | ಉತ್ತಮ ಸಂಘಟಿತ, ಕಾಮೆಂಟ್ ಗಳೊಂದಿಗೆ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಸಂಕೇತ, ಪರಿಣಾಮಕಾರಿಯಾದ ಅಲ್ಗಾರಿಥಮ್‌ಗಳು | ಸ್ವಚ್ಛ ಸಂಕೇತ, ಕೆಲವು ಕಾಮೆಂಟ್‌ಗಳೊಂದಿಗೆ, ಮೂಲ ಕೋಡಿಂಗ್ ಮಾನದಂಡಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ | ಸಂಕೇತದ ಸಂಘಟನೆಯ ಕೊರತೆ, ಕನಿಷ್ಠ ಕಾಮೆಂಟ್‌ಗಳು, ಪರಿಣಾಮಕಾರಿವಲ್ಲದ ಅನುಷ್ಠಾನ |
+
+## ಪ್ರತಿಬಿಂಬ ಪ್ರಶ್ನೆಗಳು
+
+ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ಈ ಪ್ರಶ್ನೆಗಳನ್ನು ಪರಿಗಣಿಸಿ:
+
+1. **ನೀವು ಯಾವ ಕ್ಯಾನ್ವಾಸ್ API ವೈಶಿಷ್ಟ್ಯವನ್ನು ಆಯ್ಕೆ ಮಾಡಿಕೊಂಡಿರುತ್ತೀರಿ ಮತ್ತು ಏಕೆ?**
+2. **ಪ್ರಾಜೆಕ್ಟ್ ನಿರ್ಮಿಸುವಾಗ ನೀವು ಎದುರಿಸಿದ ಸವಾಲುಗಳು ಯಾವುವು?**
+3. **ಈ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್ ಅಥವಾ ಗೇಮ್ ಆಗಿ ಹೇಗೆ ವಿಸ್ತರಿಸಬಹುದು?**
+4. **ಮುಂದೆ ನೀವು ಯಾವ ಇನ್ನೂ ಕ್ಯಾನ್ವಾಸ್ API ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಇಚ್ಛಿಸುತ್ತೀರಿ?**
+
+> 💡 **ಪ್ರೋ ಟಿಪ್**: ಸರಳವಾದ ವಿಚಾರದಿಂದ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ಕ್ರಮೇಣ ಸಂಕೀರ್ಣತೆಗೆ ಹೋಗಿ. ಒಳ್ಳೆಯದಾಗಿ ನಿರ್ವಹಿಸಲಾದ ಸರಳ ಪ್ರಾಜೆಕ್ಟ್ ಸರಿಯಾಗಿಲ್ಲದ ತುಂಬಾ ಮಹತ್ವಾಕಾಂಕ್ಷಿ ಪ್ರಾಜೆಕ್ಟ್ కన్నೆ ಉತ್ತಮ!
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿರಾಕರಣೆ**:
+ಈ ದಾಖಲೆಯನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಾದಕ್ಕಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಾಖಲೆಯ ಸ್ಥಳೀಯ ಭಾಷೆಯ ಆವೃತ್ತಿಯೇ ಅಧಿಕೃತ ಮೂಲವಾಗಿರುತ್ತದೆ. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ ಅಥವಾ ತಪ್ಪು ಬಿರುಗಾಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/3-moving-elements-around/README.md

@@ -0,0 +1,900 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8c55a2bd4bc0ebe4c88198fd563a9e09",
+  "translation_date": "2026-01-08T14:45:12+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬಯಲು ಆಟವನ್ನು ರಚಿಸುವ ಭಾಗ 3: ಚಲನೆಯು ಸೇರಿಸುವುದು
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಆಟದ ಅನಿಮೆಷನ್ ಪ್ರಯಾಣ
+    section ಚಲನೆಯ ಮೂಲತತ್ವಗಳು
+      ಚಲನಾ ನಿಯಮಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 3: Student
+      ಸಂಕೇತ ಸಂಯೋಜನೆಗಳ ನವೀಕರಣವನ್ನು ಕಲಿಯಿರಿ: 4: Student
+      ಮೂಲ ಚಲನವಳಿಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ: 4: Student
+    section ಆಟಗಾರ ನಿಯಂತ್ರಣೆಗಳು
+      ಕೀಲಿಮಣೆ ಘಟನೆಗಳನ್ನು ಹ್ಯಾಂಡಲ್ ಮಾಡಿ: 4: Student
+      ಡೀಫಾಲ್ಟ್ ವರ್ತನೆಗಳ ತಡೆಗಟ್ಟುವುದು: 5: Student
+      ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನಿಯಂತ್ರಣಗಳನ್ನು ರಚಿಸಿ: 5: Student
+    section ಆಟದ ವ್ಯವಸ್ಥೆಗಳು
+      ಆಟ ಲೂಪನ್ನು ನಿರ್ಮಿಸಿ: 5: Student
+      ವಸ್ತು ಜೀವನಚಕ್ರ ನಿರ್ವಹಣೆ: 5: Student
+      pub/sub ಮಾದರಿಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ: 5: Student
+```
+ನಿಮ್ಮлюбимый ಆಟಗಳನ್ನು ಯೋಚಿಸಿ – ಅವುಗಳನ್ನು ಆಕರ್ಷಕವಾಗಿಸುವುದು ಕೇವಲ ಸುಂದರ ಗ್ರಾಫಿಕ್ಸ್ ಅಲ್ಲ, ಅದು ಎಲ್ಲವನ್ನೂ ಚಲಿಸುವ ರೀತಿಯಾಗಿದೆ ಮತ್ತು ನಿಮ್ಮ ಕ್ರಮಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದು. ಈಗಾಗಲೇ, ನಿಮ್ಮ ಬಯಲು ಆಟವು ಒಂದು ಸುಂದರ ಚಿತ್ರಕಾರ್ಯವಾಗಿದೆ, ಆದರೆ ನಾವು ಅದಕ್ಕೆ ಜೀವನವನ್ನು ತಂದ ಚಲನೆ ಸೇರಿಸಲು ಹೊರಟಿದ್ದೇವೆ.
+
+ನಾಸಾ ಇಂಜಿನಿಯರ್‌ಗಳು ಅಪೊලೋ ಮಿಷನ್‌ಗಳಿಗಾಗಿ ಮಾರ್ಗದರ್ಶಕ ಗಣಕಯಂತ್ರವನ್ನು ಪ್ರೋಗ್ರಾಮ್ ಮಾಡಿದಾಗ, ಅವರು ಸಮಾನ ಸವಾಲಿನ ಎದುರಿಸಲಾಗಿದೆ: ಪೈಲೆಟ್ ಇನ್‌ಪುಟ್‌ಗೆ ಬಯಲು ನೌಕೆಯನ್ನು ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಮಾಡಿ ಕ್ರಮ ತುಂಬಿ ದಾರಿದೀಪ ತಿದ್ದುವುದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕಾಪಾಡುವುದು ಹೇಗೆ? ನಾವು ಇಂದು ಕಲಿಯುವ ತತ್ವಗಳು ಆ mêmes concepts ಅನ್ನು ಪ್ರತಿಧ್ವನಿಸುತ್ತದೆ – ಆಟಗಾರ ನಿಯಂತ್ರಿತ ಚಲನವಲನ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ವ್ಯವಸ್ಥೆಯ ವರ್ತನೆಗಳ ನಿರ್ವಹಣೆ.
+
+ಈ ಪಾಠದಲ್ಲಿ, ನೀವು ಬಯಲು ನೌಕೆಯನ್ನು ಪರದೆಯಾದ ಮೇಲೆ ನೆರಳಿಸುವಂತೆ, ಆಟಗಾರನ ಆಜ್ಞೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಮತ್ತು ಮೃದುವಾದ ಚಲನಾ ಮಾದರಿಗಳನ್ನು ರಚಿಸುವುದನ್ನು ಕಲಿಯುತ್ತೀರಿ. ನಾವು ಎಲ್ಲವನ್ನೂ ಸಹಜವಾಗಿ ಪರಸ್ಪರ ಕಟ್ಟಿಕೊಂಡುಕೊಂಡ manageable ತತ್ವಗಳಾಗಿ ವಿಭಜಿಸುತ್ತೇವೆ.
+
+ಅಂತಿಮದಲ್ಲಿ, ನೀವು ನಿಮ್ಮ ನಾಯಕ ನೌಕೆಯನ್ನು ಪರದೆಬದಿಯಲ್ಲಿ ಹಾರಿಸುವಂತೆ ಮಾಡಿದ್ದೀರಾ ಮತ್ತು ಶತ್ರು ನೌಕೆಗಳು ಮೇಲ್ಮೆಯ ಮೇಲೆ ರಕ್ಷಕರಾಗಿ ನಿರ್ಣಯಿಸುತ್ತಿವೆ. ಹೆಚ್ಚು ಪ್ರಾಮುಖ್ಯವಾದುದು, ನೀವು ಆಟ ಚಲನ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಚಾಲನೆ ಮಾಡುವ ಮೂಲ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿರಿ.
+
+```mermaid
+mindmap
+  root((ಆಟ ಮೌಲ್ಯನಿರ್ಮಾಣ))
+    Movement Types
+      Player Controlled [ಆಟಗಾರ ನಿಯಂತ್ರಿತ]
+      Automatic Motion [ಸ್ವಯಂಚಾಲಿತ ಚಲನೆ]
+      Physics Based [ಭೌತಶಾಸ್ತ್ರ ಆಧಾರಿತ]
+      Scripted Paths [ಸ್ಕ್ರಿಪ್ಟ್ ಮಾರ್ಗಗಳು]
+    Event Handling [ಕಾರ್ಯಕ್ರಮ ನಿರ್ವಹಣೆ]
+      Keyboard Input [ಕೀಲಿಮಣೆ ಇನ್ಪುಟ್]
+      Mouse Events [ಮೌಸ್ ಘಟನೆಗಳು]
+      Touch Controls [ಟಚ್ ನಿಯಂತ್ರಣಗಳು]
+      Default Prevention [ಪೂರ್ವನಿಯೋಜಿತ ತಡೆ]
+    Game Loop [ಆಟ ಲೂಪ್]
+      Update Logic [ಅಪ್ಡೇಟ್ ಲಾಜಿಕ್]
+      Render Frame [ರೆಂಡರ್ ಫ್ರೇಮ್]
+      Clear Canvas [ಕ್ಯಾನ್‌ವಾಸ್ ಕ್ಲೀರ್]
+      Frame Rate Control [ಫ್ರೇಮ್ ದರ ನಿಯಂತ್ರಣ]
+    Object Management [ವಸ್ತು ನಿರ್ವಹಣೆ]
+      Position Updates [ಸ್ಥಾನ ಅಪ್ಡೇಟುಗಳು]
+      Collision Detection [Possion ಪತ್ತೆ]
+      Lifecycle Management [ಜೀವಚರ್ಯ ನಿರ್ವಹಣೆ]
+      State Tracking [ಸ್ಥಿತಿ ಹಾದುಹೋಗುವುದು]
+    Communication [ಸಂವಹನ]
+      Pub/Sub Pattern [ಪುಬ್/ಸಬ್ ಮಾದರಿ]
+      Event Emitters [ಕಾರ್ಯಕ್ರಮ ಹೊರಹೊಮ್ಮಿಸುವವರು]
+      Message Passing [ಸಂದೇಶ ಹಂಚಿಕೆ]
+      Loose Coupling [ಮುಕ್ತ ಜೋಡಣೆ]
+```
+## ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/33)
+
+## ಆಟ ಚಲನ ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳುವುದು
+
+ಆಟಗಳು ಸಜೀವರಾಗುತ್ತವೆ, ಎಲ್ಲವನ್ನೂ ಚಲಿಸುವಾಗ, ಮತ್ತು ಸರ್ವೋತ್ತರ ಎರಡು ರೀತಿಯಲ್ಲಿ ಇದು ಸಂಭವಿಸುತ್ತದೆ:
+
+- **ಆಟಗಾರ-ನಿಯಂತ್ರಿತ ಚಲನ**: ನೀವು ಕೀಲಿ ಒತ್ತಿದಾಗ ಅಥವಾ ಮೌಸ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಯಾವುದೋ ಒಂದು ಚಲಿಸುತ್ತದೆ. ಇದು ನಿಮಗೂ ನಿಮ್ಮ ಆಟ ಜಗತ್ತಿನ ನಡುವೆ ನೇರ ಸಂಪರ್ಕವಾಗಿದೆ.
+- **ಸ್ವಯಂಚಾಲಿತ ಚಲನ**: ಆಟವೇ ತನ್ನಿಂದೇ ಚಲಿಸುವುದನ್ನು ನಿರ್ಧರಿಸುವುದು – ಉದಾಹರಣೆಗೆ ಆ ಶತ್ರು ನೌಕೆಗಳು ಪರದೆಬದಿಯಲ್ಲಿ ಪ್ಯಾಟ್ರೋಲ್ ಮಾಡುತ್ತಿದ್ದಾರೆಯೋ ನಿಮ್ಮ ಏನೂ ಮಾಡದೇ ಇದ್ದರೂ.
+
+ಕಂಪ್ಯೂಟರ್ ಪರದೆ ಮೇಲೆ ವಸ್ತುಗಳನ್ನು ಚಲಿಸುವುದು ನೀವು ಊಹಿಸುವುದಕ್ಕಿಂತ ಸರಳ. ಗಣಿತ ತರಗತಿಯಲ್ಲಿ ಇದ್ದ x ಮತ್ತು y ನಿರ್ದಿಷ್ಟಾಂಕಗಳನ್ನು ನೆನಪಿಡಿ? ಅದೇನಾಗಿದೆ ಇಲ್ಲಿ ನಾವು ಕೆಲಸ ಮಾಡುತ್ತೇವೆ. 1610 ರಲ್ಲಿ ಗ್ಯಾಲಿಲಿಯೋ ಜುಪಿಟರ್ ಚಂದ್ರಿಕೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿದಾಗ, ಅವನು ಅದೇನೂ ಮಾಡುತ್ತಿದ್ದ - ಸಮಯದ ಮೇಲೆ ಸ್ಥಾನಗಳನ್ನು ಬಿಂದು ಹಾಕಿ ಚಲನ ಮಾದರಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು.
+
+ಪರದೆ ಮೇಲೆಯೇ ವಸ್ತುಗಳನ್ನು ಚಲಿಸುವುದು ಒಂದು ಫ್ಲಿಪ್ ಬುಕ್ ಅನಿಮೇಶನ್ ಸೃಷ್ಟಿಸುವಂತಿದೆ – ನೀವು ಈ ಮೂರು ಸರಳ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಬೇಕು:
+
+```mermaid
+flowchart LR
+    A["ಫ್ರೇಮ್ N"] --> B["ಸ್ಥಿತಿಗಳನ್ನು ನವೀಕರಿಸಿ"]
+    B --> C["ಕ್ಯಾನ್‌ವಾಸ್ ತೆರವುಗೊಳಿಸಿ"]
+    C --> D["ವಸ್ತುಗಳನ್ನು ರೇಖಾಚಿತ್ರಗೊಳಿಸಿ"]
+    D --> E["ಫ್ರೇಮ್ N+1"]
+    E --> F{ಮುಂದುವರೆಯಬೇಕೆ?}
+    F -->|ಹೌದು| B
+    F -->|ಇಲ್ಲ| G["ಗೇಮ್ ಮುಗಿದಿದೆ"]
+    
+    subgraph "ಅನಿಮೇಷನ್ ಚಕ್ರ"
+        H["1. ಹೊಸ ಸ್ಥಾನಗಳನ್ನು ಲೆಕ್ಕಹಾಕಿ"]
+        I["2. ಹಿಂದಿನ ಫ್ರೇಮನ್ನು ಅಳಿಸಿ"]
+        J["3. ಹೊಸ ಫ್ರೇಮನ್ನು ರೆಂಡರ್ ಮಾಡಿ"]
+    end
+    
+    style B fill:#e1f5fe
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+```
+1. ** ಸ್ಥಾನವನ್ನು ನವೀಕರಿಸು** – ನಿಮ್ಮ ವಸ್ತುವಿನ ಹೊಸ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸಿ (ಬಹುಶಃ 5 ಪಿಕ್ಸೆಲ್ಸ್ ಬಲಕ್ಕೆ ಸರಿಸಿ)
+2. ** ಹಳೆಯ ಫ್ರೇಮ್ ಅನ್ನು ಅಳಿಸಿ** – ಪರದೆಯನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ ಹಾಳಾದ ಹೊದಿಕೆಯ ರೇಖೆಗಳನ್ನು ಕಾಣಿಸುವುದನ್ನು ತಡೆಯಿರಿ
+3. **ಹೊಸ ಫ್ರೇಮ್ ಅನ್ನು ಬಿಡಿಸಿ** – ನಿಮ್ಮ ವಸ್ತುವನ್ನು ಅದರ ಹೊಸ ಸ್ಥಾನದಲ್ಲಿ ಚಿತ್ರಿಸಿ
+
+ಈ ಕಾರ್ಯವನ್ನು ಸಾಕಷ್ಟು ವೇಗವಾಗಿ ಮಾಡಿದರೆ, ಬೂಂ! ನೀವು ಮೃದುವಾದ, ಸ್ವಾಭಾವಿಕವಾಗಿ ತಾಳಮೇಳ ಹೊಂದಿದ ಚಲನವಳಿಯನ್ನು ಹೊಂದಿದ್ದೀರಾ.
+
+ಇದನ್ನು ಕೋಡ್ ನಲ್ಲಿ ಹೇಗೆ ಕಾಣಿಸಬಹುದು ಎಂಬುದೆ ಇಲ್ಲಿ:
+
+```javascript
+// ಹೀರೋನ ಸ್ಥಳವನ್ನು ಹೊಂದಿಸಿ
+hero.x += 5;
+// ಹೀರೋವನ್ನು ಹೊಂದಿರುವ ಆಯತವನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+// ಆಟದ ಹಿನ್ನೆಲೆ ಮತ್ತು ಹೀರೋವನ್ನು ಮರು ಬರೆಯಿರಿ
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ctx.fillStyle = "black";
+ctx.drawImage(heroImg, hero.x, hero.y);
+```
+
+**ಈ ಕೋಡ್ ಮಾಡುವುದು:**
+- ನಾಯಕನ x-ನಿರ್ದಿಷ್ಟಾಂಕವನ್ನು 5 ಪಿಕ್ಸೆಲ್ಸ್ ಬಲಕ್ಕೆ ನವೀಕರಿಸುತ್ತದೆ
+- ಹಿಂದಿನ ಫ್ರೇಮ್‌ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಸಂಪೂರ್ಣ ಕ್ಯಾನ್ವಾಸ್ ಪ್ರದೇಶವನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ
+- ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಕಪ್ಪು ಹಿನ್ನೆಲೆ ಬಣ್ಣದಿಂದ ಭರಿಸುತ್ತದೆ
+- ನಾಯಕನ ಚಿತ್ರವನ್ನು ಹೊಸ ಸ್ಥಾನದಲ್ಲಿ ಮರುಬಿಡಿಸುತ್ತದೆ
+
+✅ ನಿಮ್ಮ ನಾಯಕನ ಬಹು ಫ್ರೇಮ್‌ಗಳನ್ನು ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ಮರುಬಿಡಿಸುವುದರಿಂದ ಏನಾದರೂ ಕಾರ್ಯಕ್ಷಮತೆ ದೋಷಗಳು ಬರುತ್ತೇ ಎಂದೂ ನಿಮಗೆ ಯೋಚನೆ ಇದೆಯೇ? ಈ ಮಾದರಿಯ ಪರ್ಯಾಯಗಳ ಬಗ್ಗೆ ಓದಿ: [alternatives to this pattern](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳನ್ನು ನಿರ್ವಹಿಸು
+
+ಇದು ಆಟಗಾರನ ಇನ್‌ಪುಟ್ ಅನ್ನು ಆಟ ಕ್ರಿಯೆಗೆ ಸಂಪರ್ಕಿಸುವ ಸ್ಥಳ. ಯಾರಾದರೂ ಸ್ಪೇಸ್‌ಬಾರ್ ಒತ್ತಿ ಲೇಸರ್ ಫೈರ್ ಮಾಡುವಾಗ ಅಥವಾ ತಿರುಗುವ ತೀಪತ್ತಿಯನ್ನು ತಟ್ಟಿದಾಗ, ನಿಮ್ಮ ಆಟ ಆ ಇನ್‌ಪುಟ್ ಅನ್ನು ಗುರುತಿಸಿ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾಗುತ್ತದೆ.
+
+ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳು window ಮಟ್ಟದಲ್ಲಿ ನಡೆಯುತ್ತವೆ, ಅಂದರೆ ನಿಮ್ಮ ಪೂರ್ಣ ಬ್ರೌಸರ್ ವಿಂಡೋ ಅವುಗಳಿಗೋಸ್ಕರ ಜಾಗರೂಕವಾಗಿದೆ.	mouse ಕ್ಲಿಕ್ಸ್, ಇತರ ಬದಿಗೆ, ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳಿಗೆ ಕಟ್ಟಿ ಅತ್ಯಾಧಾರಿತವಾಗಬಹುದು (ಉದಾ: ಬಟನ್ ಕ್ಲಿಕ್). ನಮ್ಮ ಬಯಲು ಆಟದಲ್ಲಿ, ನಾವು ಕೀಬೋರ್ಡ್ ನಿಯಂತ್ರಣಗಳಿಗೆ ಗಮನ ನೀಡುತ್ತೇವೆ ಏಕೆಂದರೆ ಅದು ಆಟಗಾರರಿಗೆ ಆರ್ಕೇಡ್ ಭಾವನೆಯನ್ನು ನೀಡುತ್ತದೆ.
+
+ಈದು ನನಗೆ 1800ರ ದಶಕದ ಟೇಲಿಗ್ರಾಫ್ ಆಪರೇಟರ್‌ಗಳು ಮೊರ್ಸ್ ಕೋಡ್ ಇನ್‌ಪುಟ್ ಅನ್ನು ಅರ್ಥಪೂರ್ಣ ಸಂದೇಶಗಳಿಗೆ ಅನುವಾದಿಸುವಂತಿರುವುದು ನೆನಪಾಗುತ್ತದೆ – ನಾವು ಸಹ ಅದೇ ಕಾರ್ಯವನ್ನು ಮಾಡುತ್ತಿದ್ದೇವೆ, ಕೀಲಿಪತ್ತಿಗಳನ್ನು ಆಟ ಆದೇಶಗಳಿಗೆ ಅನುವಾದಿಸಿ.
+
+ಘಟನೆಯನ್ನು ನಿರ್ವಹಿಸಲು ನೀವು window ನ `addEventListener()` ವಿಧಾನವನ್ನು ಬಳಸಬೇಕು ಮತ್ತು ಅದಕ್ಕೆ ಎರಡು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ನೀಡಬೇಕು. ಮೊದಲ ಪ್ಯಾರಾಮೀಟರ್ ಘಟನೆ ಹೆಸರು, ಉದಾಹರಣೆಗೆ `keyup`. ಎರಡನೇ ಪ್ಯಾರಾಮೀಟರ್ ಘಟನೆ ಸಂಭವಿಸಿದಾಗ ಕರೆಮಾಡುವ ಫಂಕ್ಷನ್.
+
+ಇದೀಗ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // evt.key = ಕೀಲಿಯ ಸ್ಟ್ರಿಂಗ್ ಪ್ರತಿನಿಧಿ
+  if (evt.key === 'ArrowUp') {
+    // ಕೆಲವು ಕಾರ್ಯಗಳನ್ನು ಮಾಡಿ
+  }
+});
+```
+
+**ಇಲ್ಲಿ ಏನು ನಡೆಯುತ್ತಿದೆ:**
+- ಸಂಪೂರ್ಣ window ನಲ್ಲಿ ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳನ್ನು ಕೇಳುತ್ತಿದೆ
+- ಒತ್ತಿದ ಕೀ ಯಾವುದು ಎಂಬ ಮಾಹಿತಿಯೊಂದಿಗೆ ಘಟನೆ ವಸ್ತುವನ್ನು ಸೆರೆಹಿಡಿಯುತ್ತಿದೆ
+- ಒತ್ತಿದ ಕೀ ಒಂದು ನಿರ್ದಿಷ್ಟ ಕೈ(ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಮೇಲ್ವನದ ತೀಪತ್ತಿ) ಜೊತೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಶರತ್ತು ಪೂರೈಸಿದಾಗ ಕೋಡ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ
+
+ಕೀಘಟನೆಯಲ್ಲಿ ನೀವು `key` ಮತ್ತು `keyCode` ಎಂಬ ಎರಡು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಉಪಯೋಗಿಸಬಹುದು:
+
+- `key` - ಒತ್ತಿದ ಕೀಲಿಯ string ಪ್ರತಿನಿಧಾನ, ಉದಾ: `'ArrowUp'`
+- `keyCode` - ಸಂಖ್ಯೆ ಪ್ರತಿನಿಧಾನ, ಉದಾ: `37`, ಇದು `ArrowLeft` ಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ
+
+✅ ಕೀಘಟನೆಯ ನಿಯಂತ್ರಣ ಆಟ ಅಭಿವೃದ್ಧಿಯಿಂದ ಹೊರಗೂ ಉಪಯುಕ್ತ. ಈ ತಂತ್ರವನ್ನು ನೀವು ಇನ್ನೇನು ಬಗೆಯ ಉಪಯೋಗಿಸಬಹುದು ಎಂದು ಯೋಚಿಸಿ.
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant EventSystem
+    participant GameLogic
+    participant Hero
+    
+    User->>Browser: ಅರೋವ್ ಅಪ್ ಕೀಲಿಯನ್ನು ಒತ್ತುತ್ತದೆ
+    Browser->>EventSystem: ಕೀಲಿಯಡೊಳಗಿನ ಈವೆಂಟ್
+    EventSystem->>EventSystem: preventDefault()
+    EventSystem->>GameLogic: emit('KEY_EVENT_UP')
+    GameLogic->>Hero: hero.y -= 5
+    Hero->>Hero: ಸ್ಥಾನವನ್ನು ನವೀಕರಿಸಿ
+    
+    Note over Browser,GameLogic: ಈವೆಂಟ್ ಹರಿವು ಬ್ರೌಸರ್ ಪೂರ್ವನಿರ್ಧಾರಗಳನ್ನು ತಡೆಯುತ್ತದೆ
+    Note over GameLogic,Hero: ಪಬ್/ಸಬ್ ಮಾದರಿ ಸ್ವಚ್ಛ ಸಂವಹನಕ್ಕೆ ಅನುಮತಿಸುತ್ತದೆ
+```
+### ವಿಶೇಷ ಕೀಗಳು: heads up!
+
+ಕೆಲವು ಕೀಗಳಿಗೆ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಿರ್ಮಿತ ವರ್ತನೆಗಳಿವೆ, ಅವು ನಿಮ್ಮ ಆಟಕ್ಕೆ ಅಡ್ಡಿಪಡಿಸಬಹುದು. ತೀರಿಗಳ ಕೀಲಿಗಳು ಪುಟವನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡುತ್ತವೆ ಮತ್ತು ಸ್ಪೇಸ್‌ಬಾರ್ ಕೆಳಗೆ ಜಿಗಿತು – ನೌಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಪ್ರಯತ್ನಿಸುವಾಗ ನೀವು ಇದನ್ನು ಬಯಸುವುದಿಲ್ಲ.
+
+ನಾವು ಈ ಡಿಫಾಲ್ಟ್ ವರ್ತನೆಗಳನ್ನು ತಡೆಯಬಹುದು ಮತ್ತು ಬದಲಿಗೆ ನಮ್ಮ ಆಟ ಇನ್‌ಪುಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಆರಂಭದ ಕಂಪ್ಯೂಟರ್ ಪ್ರೋಗ್ರಾಮರ್‌ಗಳು ಸಿಸ್ಟಂ ಇಂಟರಪ್ಟ್‌ಗಳನ್ನು ಮೀರಿಸುವಂತೆ ಮಾಡುವುದಕ್ಕೆ ಸಮಾನ – ನಾವು ಬ್ರೌಸರ್ ಮಟ್ಟದಲ್ಲಿ ಅದೇನೂ ಮಾಡುತ್ತಿದ್ದೇವೆ. ಇಲ್ಲಿದೆ ಹೇಗೆ:
+
+```javascript
+const onKeyDown = function (e) {
+  console.log(e.keyCode);
+  switch (e.keyCode) {
+    case 37:
+    case 39:
+    case 38:
+    case 40: // ಅರುವ ಚಿಮ್ಮೆಗಳು
+    case 32:
+      e.preventDefault();
+      break; // ಖಾಲಿ ಜಾಗ
+    default:
+      break; // ಇತರ ಕೀಗಳನ್ನು ತಡೆಬಾರದು
+  }
+};
+
+window.addEventListener('keydown', onKeyDown);
+```
+
+**ಈ ತಡೆಯುವ ಕೋಡ್ ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳಿ:**
+- ಸಮಸ್ಯೆ ಉಂಟುಮಾಡಬಹುದಾದ ನಿರ್ದಿಷ್ಟ ಕೀ ಕೋಡ್‌ಗಳಿಗೆ ಪರಿಶೀಲನೆ ಮಾಡುತ್ತದೆ
+- ತೀರಿಗಳ ಕೀಲಿಗಳು ಮತ್ತು ಸ್ಪೇಸ್‌ಬಾರ್‌ಗಾಗಿ ಡಿಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ಕ್ರಿಯೆಯನ್ನು ತಡೆಯುತ್ತದೆ
+- ಇತರ ಕೀಲಿಗಳಿಗೆ ಸಾಮಾನ್ಯ ಕೆಲಸಕ್ಕೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ
+- `e.preventDefault()` ಉಪಯೋಗಿಸಿ ಬ್ರೌಸರ್ ಸಂರಚಿತ ವರ್ತನೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಘಟನಾ ನಿರ್ವಹಣೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು**: ಸ್ವಯಂಚಾಲಿತ ಚಲನಕ್ಕೆ ಮೊದಲು ಮಾಡಿ ನೋಡಬೇಕು:
+- ✅ `keydown` ಮತ್ತು `keyup` ಘಟನೆಯ ವ್ಯತ್ಯಾಸವನ್ನು ವಿವರಿಸಬಹುದು
+- ✅ ನಾವು ಡಿಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ವರ್ತನೆಗಳನ್ನು ಯಾಕೆ ತಡೆಯುತ್ತೇವೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಹುದು
+- ✅ ಘಟನೆ ಶ್ರೋತಿಗಳು ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್ ಅನ್ನು ಆಟ ಲಾಗಿಕ್ ಗೆ ಹೇಗೆ ಸಂಪರ್ಕಿಸುತ್ತವೆ ವಿವರಿಸಬಹುದು
+- ✅ ಯಾವ ಕೀಗಳು ಆಟ ನಿಯಂತ್ರಣಗಳಿಗೆ ಸೆರೆಯಾಗಬಹುದು ಗುರುತಿಸಬಹುದು
+
+**ಸ್ವಯಂ-ಪರೀಕ್ಷೆ**: ನೀವು ತೀರಿಗಳ ಕೀಲಿಗಳ ಡಿಫಾಲ್ಟ್ ವರ್ತನೆ ತಡೆಯದಿದ್ದರೆ ಏನಾಗುತ್ತದೆ?
+*ಉತ್ತರ: ಬ್ರೌಸರ್ ಪುಟವನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡುತ್ತದೆ, ಇದು ಆಟ ಚಲನದಲ್ಲಿ ಅಡ್ಡಿಪಡಿಸುತ್ತದೆ*
+
+**ಘಟನೆ ವ್ಯವಸ್ಥೆ ನಿರ್ಮಾಣ**: ನೀವು ಈಗ ಅರ್ಥ ಮಾಡಿಕೊಂಡಿದ್ದೀರಿ:
+- **window-ಮಟ್ಟದ ಕೇಳುವಿಕೆ**: ಬ್ರೌಸರ್ ಮಟ್ಟದಲ್ಲಿ ಘಟನೆಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವಿಕೆ
+- **ಘಟನಾ ವಸ್ತು ಗುಣಲಕ್ಷಣಗಳು**: `key` ಸ್ಟ್ರಿಂಗ್‌ಗಳು ಮತ್ತು `keyCode` ಸಂಖ್ಯೆಗಳು
+- **ಡಿಫಾಲ್ಟ್ ತಡೆ**: ಅಪ್ರಯೋಜಿತ ಬ್ರೌಸರ್ ವರ್ತನೆಗಳನ್ನು ನಿಲ್ಲಿಸುವಿಕೆ
+- **ಶರತ್ತುದಾರ ಫಲಿತಾಂಶ**: ನಿರ್ದಿಷ್ಟ ಕೀ ಸಂಯೋಜನೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವಿಕೆ
+
+## ಆಟದಿಂದ ಉಂಟಾಗುವ ಚಲನ
+
+ಹೀಗಾಗಿ ಆಟಗಾರನ ಇನ್‌ಪುಟ್ ಇಲ್ಲದೇ ಚಲಿಸುವ ವಸ್ತುಗಳನ್ನು ಕುರಿತು ಮಾತನಾಡೋಣ. ಶತ್ರು ನೌಕೆಗಳು ಪರದೆ ಮೇಲೆ ಸುತ್ತಾಡುತ್ತಿದ್ದಂತೆ, ಗುಂಡುಗಳು ನೇರ ರೇಖೆಗಳಲ್ಲಿ ಹಾರುತ್ತಿದ್ದಂತೆ, ಅಥವಾ ಮೋಡಗಳು ಹಿನ್ನೆಲೆಯಲ್ಲಿಯೇ ಒదಿದುಹೋಗುತ್ತಿರುವಂತೆ. ಈ ಸ್ವಯಂಚಾಲಿತ ಚಲನ ನಿಮ್ಮ ಆಟ ಜಗತ್ತನ್ನು ಜೀವಂತವಾಗಿಸುತ್ತದೆ ನಿಮ್ಮ ನಿಯಂತ್ರಣ ಸ್ಪರ್ಶವಿಲ್ಲದಿದ್ದರೂ ಸಹ.
+
+ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಬಿಲ್ಟ್-ಇನ್ ಟೈಮರ್‌ಗಳನ್ನು ನಿಯಮಿತ ಅಂತರಗಳಲ್ಲಿ ಸ್ಥಾನಗಳನ್ನು ನವೀಕರಿಸಲು ಬಳಸುತ್ತೇವೆ. ಈ ಕಲ್ಪನೆ ಪೆಂಡುಲಮ್ ಗಡಿಯಾರ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆಯೋ ಹಾಗೇ – ನಿಯಮಿತ, ಸಮಯಭದ್ಧ ಕ್ರಿಯೆಗಳನ್ನು ಪ್ರೇರೇಪಿಸುವ ವ್ಯವಸ್ಥೆ. ಇದು ಹೀಗಿದೆ:
+
+```javascript
+const id = setInterval(() => {
+  // ಶತ್ರುವನ್ನು y ಅಕ್ಷದಲ್ಲಿ ಚಲಾಯಿಸಿ
+  enemy.y += 10;
+}, 100);
+```
+
+**ಈ ಚಲನ ಕೋಡ್ ಮಾಡುವುದು:**
+- ಪ್ರತಿ 100 ಮಿಲಿಸೆಕೆಂಡಿಗೆ ಒಂದು ಟೈಮರ್ ರಚಿಸುತ್ತದೆ
+- ಪ್ರತಿ ಬಾರಿ ಶತ್ರುವಿನ y-ನಿರ್ದಿಷ್ಟಾಂಕವನ್ನು 10 ಪಿಕ್ಸೆಲ್ಸ್ ನವೀಕರಿಸುತ್ತದೆ
+- ನಂತರ ಅದನ್ನು ನಿಲ್ಲಿಸಲು Interval ID ಅನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ
+- ಶತ್ರುವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕೆಳಕ್ಕೆ ಪರದೆ ಮೇಲೆ ಚಲಿಸುತ್ತದೆ
+
+## ಆಟ ಲೂಪ್
+
+ಇದು ಎಲ್ಲವನ್ನೂ ಹೊಂದಿಸಿ ಬದ್ಧಗೊಳಿಸುವ ಕಲ್ಪನೆ – ಆಟ ಲೂಪ್. ನಿಮ್ಮ ಆಟ ಒಂದು ಚಲನಚಿತ್ರವಾದರೆ, ಆಟ ಲೂಪ್ ಚಿತ್ರತೊರೆ ಪ್ಯಾಜೆಕ್ಟರ್ ಆಗಿದ್ದು ಫ್ರೇಮ್‌ಗಳನ್ನೆಲಿಯ ತ್ವರಿತವಾಗಿ ತೋರಿಸಿ ಎಲ್ಲವನ್ನೂ ಸ್ಮೂತ್ ಆಗಿ ಚಲಿಸುವಂತೆ ತೋರ್ಪಡಿಸುತ್ತದೆ.
+
+ಪ್ರತಿ ಆಟದಲ್ಲೂ ಇಂತಹ ಲೂಪ್ ಪ್ರಗ್ರಾಮ್ ಹಿಂದೆ ನಡೆಯುತ್ತದೆ. ಇದು ಒಂದು ಫಂಕ್ಷನ್ ಆಗಿದ್ದು ಎಲ್ಲ ಆಟ ವಸ್ತುಗಳನ್ನು ನವೀಕರಿಸಿ, ಪರದೆ ಹೊಸದಾಗಿ ಬಿಡಿಸಿ, ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿರಂತರವಾಗಿಯೇ ಅನುಸರಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ನಾಯಕ, ಎಲ್ಲ ಶತ್ರುಗಳು, ಯಾವುದೇ ಲೇಸರ್ಗಳು – ಪೂರ್ಣ ಆಟ ಸ್ಥಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ.
+
+ಇದು ನಗೆ ಮೂವರು ಮುಂಚಿನ ಚಲನಚಿತ್ರ ಚಿತ್ರಕರಿಂದ್ರೆ, ವಾಲ್ಟ್ ಡಿಸ್ನಿ ಪಾತ್ರಗಳನ್ನು ಫ್ರೇಮ್ ಬಾಯ್ ಫ್ರೇಮ್ ಮರುಬಿಡಿಸುವ ಮೂಲಕ ಚಲನಭಾಸವನ್ನು ಸೃಷ್ಟಿಸುತ್ತಿದ್ದ ಪರಿಚಯವನ್ನು ನೆನಪಿಸುತ್ತದೆ. ನಾವು ಅದೇನೂ ಮಾಡುತ್ತಿರುವ ನೋಡು, ಕಾಗದದ ಬದಲು ಕೋಡ್ ಬಳಸಿ.
+
+ಒಂದು ಆಟ ಲೂಪ್ ಸಾಮಾನ್ಯವಾಗಿ ಕೋಡ್ ನಲ್ಲಿ ಹೇಗೆ ಕಾಣಬಹುದು ನೋಡೋಣ:
+
+```mermaid
+flowchart TD
+    A["ಆರಂಭಿಸಿ ಆಟದ ಲೂಪ್"] --> B["ಕ್ಯಾನ್ವಾಸ್‌ ಅನ್ನು ಶುದ್ಧಿಗೊಳಿಸಿ"]
+    B --> C["ಹೀಗೆಯೇ ಹಿನ್ನೆಲೆ ತುಂಬಿಸಿ"]
+    C --> D["ಆಟದ ವಸ್ತುಗಳನ್ನು ನವೀಕರಿಸಿ"]
+    D --> E["ನಾಯಕನೆಯನ್ನು ರೇಖಾಚಿತ್ರ ಕೊಡು"]
+    E --> F["ಶತ್ರುಗಳನ್ನು ರೇಖಾಚಿತ್ರ ಕೊಡು"]
+    F --> G["ಯುಐ ಅಂಶಗಳನ್ನು ರೇಖಾಚಿತ್ರ ಕೊಡು"]
+    G --> H["ಮುಂದಿನ ಫ್ರೇಮಿಗಾಗಿ ಕಾಯಿರಿ"]
+    H --> I{ಆಟ ನಡೆಯುತ್ತಿದೆಯೇ?}
+    I -->|ಹೌದು| B
+    I -->|ಇಲ್ಲ| J["ಆಟವನ್ನು ಮುಕ್ತಾಯ ಮಾಡಿ"]
+    
+    subgraph "ಫ್ರೇಮ್ ದರ ನಿಯಂತ್ರಣ"
+        K["60 FPS = 16.67ms"]
+        L["30 FPS = 33.33ms"]
+        M["10 FPS = 100ms"]
+    end
+    
+    style B fill:#ffebee
+    style D fill:#e1f5fe
+    style E fill:#e8f5e8
+    style F fill:#e8f5e8
+```
+```javascript
+const gameLoopId = setInterval(() => {
+  function gameLoop() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    drawHero();
+    drawEnemies();
+    drawStaticObjects();
+  }
+  gameLoop();
+}, 200);
+```
+
+**ಆಟ ಲೂಪ್ ರಚನೆಯ ಅರ್ಥ:**
+- ಹಿಂದಿನ ಫ್ರೇಮ್ನ್ನು ತೆಗೆದುಹಾಕಲು ಸಂಪೂರ್ಣ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ
+- ಹಿನ್ನೆಲೆಯನ್ನು ದ್ರವ್ಯಮಯ ಬಣ್ಣದಿಂದ ತುಂಬುತ್ತದೆ
+- ಎಲ್ಲ ಆಟ ವಸ್ತುಗಳನ್ನು ಅವರ ಸದ್ಯದ ಸ್ಥಾನಗಳಲ್ಲಿ ಬಿಡಿಸುತ್ತದೆ
+- ಮೃದುವಾದ ಅನಿಮೇಷನ್ ಸೃಷ್ಟಿಸಲು ಪ್ರತಿ 200 ಮಿಲಿಸೆಕೆಂಡಿಗೆ ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪುನರಾವರ್ತಿಸುತ್ತದೆ 
+- ಇಂಟರ್ವಲ್ ಸಮಯವನ್ನು ನಿಯಂತ್ರಿಸಿ ಫ್ರೇಮ್ ದರವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ
+
+## ಬಯಲು ಆಟವನ್ನು ಮುಂದುವರೆಸುವುದು
+
+ಈಗ ನಾವು ಪೂರ್ವದಲ್ಲಿ ನಿರ್ಮಿಸಿದ ಸ್ಥಿರ ದೃಶ್ಯಕ್ಕೆ ಚಲನ ಸೇರಿಸುತ್ತೇವೆ. ನಾವು ಇದನ್ನು ಸ್ಕ್ರೀನ್‌ಶಾಟ್ ನಿಂದ ಪಾರಸ್ಪರಿಕ ಅನುಭವಕ್ಕೆ ಪರಿವರ್ತಿಸುವೆವು. ಪ್ರತಿ ಹಂತವನ್ನು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಕಟ್ಟುವುದಾಗಿ ಕೆಲಸ ಮಾಡೋಣ.
+
+ನೀವು ಪೂರ್ವ ಪಾಠದಿಂದ ಬಿಟ್ಟಿದ್ದ ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ (ಅಥವಾ ಹೊಸ ಪ್ರಾರಂಭಕ್ಕಾಗಿ [ಭಾಗ II- ಪ್ರಾರಂಭಿಕ](../../../../6-space-game/3-moving-elements-around/your-work) ಫೋಲ್ಡರ್‌ನಲ್ಲಿನ ಕೋಡಿನಿಂದ ಪ್ರಾರಂಭಿಸಿ).
+
+**ಇಂದು ನಾವು ಏನನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ:**
+- **ನಾಯಕ ನಿಯಂತ್ರಣಗಳು**: ತೀರಿಗಳ ಕೀಲಿಗಳು ನೌಕೆಯನ್ನು ಪರದೆ ಸುತ್ತ ಹಾರಿಸುವಲ್ಲಿ ಸಕ್ರಿಯವಾಗಲಿ
+- **ಶತ್ರು ಚಲನೆ**: ಆ ಪರಗ್ರಹ ನೌಕೆಗಳು ತಮ್ಮ ಮುನ್ನಡೆ ಆರಂಭಿಸುತ್ತವೆ
+
+ನಾವು ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಜಾರಿಗೆ ತರುವುದನ್ನು ಪ್ರಾರಂಭಿಸೋಣ.
+
+## ಶಿಫಾರಸು ಮಾಡಿದ ಹಂತಗಳು
+
+ನಿಮಗೆ ಸೃಷ್ಟಿಸಿದ ಫೈಲ್‌ಗಳನ್ನು `your-work` ಅಡ್ಹೊಡೆ ಶಿಷ್ಯಲ್ಲಿ ಹುಡುಕಿ. ಅವು ಕೆಳಕಂಡಂತೆ ಇರಬೇಕು:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+ನೀವು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು `your-work` ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಈ ಕೆಳಗಿನ ರೀತಿಯಲ್ಲಿ ಪ್ರಾರಂಭಿಸುತ್ತೀರಿ:
+
+```bash
+cd your-work
+npm start
+```
+
+**ಈ ಆಜ್ಞೆ ಮಾಡುವುದು:**
+- ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಡೈರೆಕ್ಟರಿಗೆ ನಾವಿಗೇಟ್ ಆಗುತ್ತದೆ
+- ವಿಳಾಸದಲ್ಲಿ HTTP ಸರ್ವರ್ ಮರುಳಿಸುವೆ `http://localhost:5000`
+- ನಿಮಗೆ ಬೌರೋಸರ್‌ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಲು ನಿಮ್ಮ ಆಟ ಫೈಲ್‌ಗಳನ್ನು ಸರ್ವ್ ಮಾಡುತ್ತದೆ
+
+ಮೇಲಿನವು ವಿಳಾಸ `http://localhost:5000` ನಲ್ಲಿ HTTP ಸರ್ವರ್ ಪ್ರಾರಂಭ ಮಾಡುತ್ತದೆ. ಬ್ರೌಸರ್ ತಿರುಗಿಸಿ ಮತ್ತು ಆ ವಿಳಾಸವನ್ನು ಇನ್‌ಪುಟ್ ಮಾಡಿ, ಈಗ ನಾಯಕ ಮತ್ತು ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ಚಿತ್ರಿಸುತ್ತದೆ; ಯಾವುದೇ ಚಲನೆ ಇಲ್ಲ - ಇನ್ನೂ!
+
+### ಕೋಡ್ ಸೇರಿಸು
+
+1. `hero` ಮತ್ತು `enemy` ಮತ್ತು `game object` ಗಾಗಿ ನಿಗಧಿತ ವಸ್ತುಗಳನ್ನು ಸೇರಿಸಿ, ಅವುಗಳಲ್ಲಿ `x` ಮತ್ತು `y` ಗುಣಲಕ್ಷಣಗಳಿರಬೇಕು. ([@Inheritance or composition](../README.md) ಬಾಗವನ್ನು ನೆನಪಿಡಿ).
+
+   *ಸೂಚನೆ* `game object` ನಲ್ಲಿ `x` ಮತ್ತು `y` ಇರುತ್ತವೆ ಮತ್ತು ನಿಮ್ಮನ್ನು ಕ್ಯಾನ್ವಾಸ್‌ಗೆ ಚಿತ್ರಿಸುವ ಸಾಮರ್ಥ್ಯ ಇರಬೇಕು.
+
+   > **ಟಿಪ್**: ಹೊಸ `GameObject` ವರ್ಗವನ್ನು ಅದರ ಕಾಂಸ್ಟ್ರಕ್ಟರ್ ಅನ್ನು ಈ ಕೆಳಗಿನಂತೆ ರೂಪಿಸಿ ಮತ್ತು ನಂತರ ಅದನ್ನು ಕ್ಯಾನ್ವಾಸ್ ಗೆ ಬಿಡಿಸಿ:
+
+    ```javascript
+    class GameObject {
+      constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.dead = false;
+        this.type = "";
+        this.width = 0;
+        this.height = 0;
+        this.img = undefined;
+      }
+    
+      draw(ctx) {
+        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+      }
+    }
+    ```
+
+    **ಈ ಮೂಲ ವರ್ಗದ ಅರ್ಥ:**
+    - ಎಲ್ಲಾ ಆಟ ವಸ್ತುಗಳು ಹಂಚಿಕೊಳ್ಳುವ ಸಾಮಾನ್ಯ ಗುಣಲಕ್ಷಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ (ಸ್ಥಾನ, ಗಾತ್ರ, ಚಿತ್ರ)
+    - ವಸ್ತುವನ್ನು ಅಳಿಸಲು `dead` ಧ್ವಜವನ್ನು ಹೊಂದಿದೆ
+    - ವಸ್ತುವನ್ನು ಕ್ಯಾನ್ವಾಸ್ನಲ್ಲಿ ಬಿಡಿಸುವ `draw()` ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ
+    - ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಡಿಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿದ್ದು ಮಕ್ಕಳ ವರ್ಗಗಳು ಅವುಗಳನ್ನು ಮರಳಿಸಬಹುದು
+
+```mermaid
+classDiagram
+    class GameObject {
+        +x: number
+        +y: number
+        +dead: boolean
+        +type: string
+        +width: number
+        +height: number
+        +img: Image
+        +draw(ctx)
+    }
+    
+    class Hero {
+        +speed: number
+        +type: "ಹೀರೋ"
+        +width: 98
+        +height: 75
+    }
+    
+    class Enemy {
+        +type: "ಶತ್ರು"
+        +width: 98
+        +height: 50
+        +setInterval()
+    }
+    
+    GameObject <|-- Hero
+    GameObject <|-- Enemy
+    
+    class EventEmitter {
+        +listeners: object
+        +on(message, listener)
+        +emit(message, payload)
+    }
+```
+    ಈಗ, ಈ `GameObject` ಅನ್ನು ವಿಸ್ತರಿಸಿ `Hero` ಮತ್ತು `Enemy` ರಚಿಸಿ:
+    
+    ```javascript
+    class Hero extends GameObject {
+      constructor(x, y) {
+        super(x, y);
+        this.width = 98;
+        this.height = 75;
+        this.type = "Hero";
+        this.speed = 5;
+      }
+    }
+    ```
+
+    ```javascript
+    class Enemy extends GameObject {
+      constructor(x, y) {
+        super(x, y);
+        this.width = 98;
+        this.height = 50;
+        this.type = "Enemy";
+        const id = setInterval(() => {
+          if (this.y < canvas.height - this.height) {
+            this.y += 5;
+          } else {
+            console.log('Stopped at', this.y);
+            clearInterval(id);
+          }
+        }, 300);
+      }
+    }
+    ```
+
+    **ಈ ವರ್ಗಗಳಲ್ಲಿ ಪ್ರಮುಖ ತತ್ವಗಳು:**
+    - `GameObject` ಅನ್ನು `extends` ಕೀವರ್ಡ್ ಬಳಸಿ ವಂಶಾವಳಿಯಾಗಿ ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ
+    - ಪೋಷಕರ ಕಾಂಸ್ಟ್ರಕ್ಟರ್ ಅನ್ನು `super(x, y)` ಮೂಲಕ ಕರೆ ಮಲ್ಪು ಮಾಡುತ್ತದೆ
+    - ಪ್ರತಿ ವಸ್ತುವಿನ ಪ್ರಕಾರ ಸಂಪರ್ದಿತ ಗಾತ್ರ ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ
+    - `setInterval()` ಬಳಸಿ ಶತ್ರುಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತ ಚಲನ ಮಾಡಿಸುತ್ತದೆ
+
+2. ಕೀ-ಘಟನೆ ನಿರ್ವಾಹಕರನ್ನು ಸೇರಿಸಿ ಕೀ ನ್ಯಾವಿಗೇಶನ್ ನ್ನು ನಿರ್ವಹಿಸಿ (ನಾಯಕವನ್ನು ಮೇಲ್ಗೆ/ಕೆಳಗೆ/ಎಡಕ್ಕೆ/ಬಲಕ್ಕೆ ಚಲಿಸು)
+
+   *ನೆನಪಿಡಿ* ಇದು ಕಾರ್ಟೇಶಿಯನ್ ವ್ಯವಸ್ಥೆಯಾಗಿದೆ, ಮೇಲಾಗಿನ ಬಲದ ಮೂಲಾಂಕವು `0,0`. ಡಿಫಾಲ್ಟ್ ವರ್ತನೆ ನಿಲ್ಲಿಸುವ ಕೋಡ್ ಅನ್ನು ಸೇರಿಸಬೇಕು.
+
+   > **ಟಿಪ್**: ನಿಮ್ಮ `onKeyDown` ಫಂಕ್ಷನ್ ರಚಿಸಿ ಅದನ್ನು window ಗೆ ಅಂಟಿಸಿ:
+
+   ```javascript
+   const onKeyDown = function (e) {
+     console.log(e.keyCode);
+     // ಡಿಫಾಲ್ಟ್ ವರ್ತನೆ ನಿಲ್ಲಿಸಲು ಮೇಲಿನ ಪಾಠದ ಕೋಡ್ ಸೇರಿಸಿ
+     switch (e.keyCode) {
+       case 37:
+       case 39:
+       case 38:
+       case 40: // ಅಂಬುಳ ಕೀಲಿಗಳು
+       case 32:
+         e.preventDefault();
+         break; // ಖಾಲಿ ಸ್ಥಳ
+       default:
+         break; // ಇतर ಕೀಲಿಗಳನ್ನು ತಡೆಹಿಡಿಯಬೆಡಿ
+     }
+   };
+
+   window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   **ಈ ಘಟನೆ ನಿರ್ವಹಕ ಮಾಡುವುದು:**
+   - ಸಂಪೂರ್ಣ window ನಲ್ಲಿ ಕೀಪಡೌನ್ ಘಟನೆಗಳನ್ನು ಕೇಳುತ್ತದೆ
+   - ಒತ್ತಿದ ಕೀ ಕೋಡ್ ಅನ್ನು ಡಿಬಗ್ ಮಾಡಲು ಲಾಗ್ ಮಾಡುತ್ತದೆ
+   - ತೀರಿಗಳ ಕೀಲಿಗಳು ಮತ್ತು ಸ್ಪೇಸ್‌ಬಾರ್‌ಗಾಗಿ ಡಿಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ವರ್ತನೆಯನ್ನು ತಡೆಯುತ್ತದೆ
+   - ಇತರ ಕೀಲಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ
+   
+   ಈ ಸಮಯದಲ್ಲಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕಾನ್ಸೋಲ್ ನೋಡಿ ಮತ್ತು ಕೀಲಿಪತ್ತಿಯ ಲಾಗ್ ಆಗುತ್ತಿರುವುದು ಗಮನಿಸಿ.
+
+3. [Pub sub ಮಾದರಿಯನ್ನು](../README.md) ಜಾರಿಗೆ ತರುವುದು, ಇದು ಬಾಕಿ ಭಾಗಗಳನ್ನು ಅನುಸರಿಸುವಾಗ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛವಾಗಿರಿಸುತ್ತದೆ.
+
+   ಪಬ್ಲಿಷ್-ಸಬ್ ಸಿದ್ಧಾಂತವು ಘಟನಾ ಪತ್ತೆಯನ್ನು ಮತ್ತು ಘಟನಾ ನಿರ್ವಹಣೆಯನ್ನು ವಿಭಜಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸಂಘಟಿಸುತ್ತದೆ. ಇದರಿಂದ ನಿಮ್ಮ ಕೋಡ್ ಎಸ್‌ಮಾಡ್ಯೂಲರ್ ಆಗಿ ಮತ್ತು ನಿರ್ವಹಣೆಗೆ ಸುಲಭವಾಗುತ್ತದೆ.
+
+   ಈ ಕೊನೆಯ ಭಾಗವನ್ನು ಮಾಡಲು ನೀವು:
+
+   1. window ಮೇಲೆ ಒಂದು ಘಟನೆ ಕೇಳುವವಳನ್ನು ಸೇರಿಸಿಕೊಳ್ಳಿ:
+
+       ```javascript
+       window.addEventListener("keyup", (evt) => {
+         if (evt.key === "ArrowUp") {
+           eventEmitter.emit(Messages.KEY_EVENT_UP);
+         } else if (evt.key === "ArrowDown") {
+           eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+         } else if (evt.key === "ArrowLeft") {
+           eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+         } else if (evt.key === "ArrowRight") {
+           eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+         }
+       });
+       ```
+
+   **ಈ ಘಟನೆ ವ್ಯವಸ್ಥೆ ಮಾಡುವುದು:**
+   - ಕೀಬೋರ್ಡ್ ಇನ್‌ಪುಟ್ ಅನ್ನು ಪತ್ತೆಮಾಡಿ ಕಸ್ಟಮ್ ಆಟ ಸಂದೇಶಗಳಿಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ
+   - ಇನ್‌ಪುಟ್ ಪತ್ತೆ ಮತ್ತು ಆಟ ನಿಯಮಗಳು ಬೇರೆಯಾಗಿ ವಿಂಗಡಿಸಲಾಗುತ್ತದೆ
+   - ನಿಯಂತ್ರಣಗಳನ್ನು ಬದಲಾಯಿಸಲು ಸುಲಭಮಾಡುತ್ತದೆ, ಆಟ ಕೋಡ್ ಪ್ರಭಾವಿತವಾಗದೆ
+   - ಅನೇಕ ವ್ಯವಸ್ಥೆಗಳು ಒದתגೊಳಿಸಿದ ಇನ್‌ಪುಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಮಾಡುತ್ತದೆ
+
+```mermaid
+flowchart TD
+    A["ಕೀಬೋರ್ಡ್ ಇನ್‌ಪುಟ್"] --> B["ವಿಂಡೋ ಘಟನಾ ಶ್ರೋತೆ"]
+    B --> C["ಘಟನಾ ಬಿಡುಗಡೆ"]
+    C --> D["ಕೀ_ಘಟನೆ_ಮೇಲ್"]
+    C --> E["ಕೀ_ಘಟನೆ_ಕೆಳಕ್ಕೆ"]
+    C --> F["ಕೀ_ಘಟನೆ_ಎಡಕ್ಕೆ"]
+    C --> G["ಕೀ_ಘಟನೆ_ಬಲಕ್ಕೆ"]
+    
+    D --> H["ಹೀರೋ ಚಲನೆ"]
+    D --> I["ಶಬ್ದ ವ್ಯವಸ್ಥೆ"]
+    D --> J["ದೃಶ್ಯ ಪರಿಣಾಮಗಳು"]
+    
+    E --> H
+    F --> H
+    G --> H
+    
+    style A fill:#e1f5fe
+    style C fill:#e8f5e8
+    style H fill:#fff3e0
+```
+   2. ಸಂದೇಶಗಳನ್ನು ಪ್ರಕಟಿಸಲು ಮತ್ತು ಅನುಸರಿಸಲು EventEmitter ತರಗತಿಯನ್ನು ರಚಿಸಿ:
+
+       ```javascript
+       class EventEmitter {
+         constructor() {
+           this.listeners = {};
+         }
+       
+         on(message, listener) {
+           if (!this.listeners[message]) {
+             this.listeners[message] = [];
+           }
+           this.listeners[message].push(listener);
+         }
+       
+   3. ಸ್ಥಿರಾಂಕಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು EventEmitter ಅನ್ನು ಸೆಟ್ ಮಾಡಿ:
+
+       ```javascript
+       const Messages = {
+         KEY_EVENT_UP: "KEY_EVENT_UP",
+         KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
+         KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
+         KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
+       };
+       
+       let heroImg, 
+           enemyImg, 
+           laserImg,
+           canvas, ctx, 
+           gameObjects = [], 
+           hero, 
+           eventEmitter = new EventEmitter();
+       ```
+
+   **ಈ ಸೆಟ್‌ಅಪ್ ಅರ್ಥ:**
+   - ಟಿಪ್ಪಣಿಗಳನ್ನು ತಪ್ಪಿಸಲು ಹಾಗೂ ಪುನಃರೂಪಗೊಳಿಸಲು ಸುಲಭ ಮಾಡಲು ಸಂದೇಶ ಸ್ಥಿರಾಂಕಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ
+   - ಚಿತ್ರಗಳು, ಕ್ಯಾನ್ವಾಸ್ ಹಿನ್ನೆಲೆ ಮತ್ತು ಆಟ ಸ್ಥಿತಿಗಾಗಿ ಚರಗಳನ್ನು ಘೋಷಿಸುತ್ತದೆ
+   - ಪಬ್-ಸಬ್ ವ್ಯವಸ್ಥೆಗೆ ಗ್ಲೋಬಲ್ ಇವೆಂಟ್ ಎಮಿಟರ್ ರಚಿಸುತ್ತದೆ
+   - **ಎಲ್ಲಾ ಆಟದ ವಸ್ತುಗಳನ್ನು ಹಿಡಿಯಲು** ಒಂದು ಅರೆ ಬಿಡುತ್ತದೆ
+
+   4. **ಆಟವನ್ನು ಪ್ರಾರಂಭಿಸಿ**
+
+       ```javascript
+       function initGame() {
+         gameObjects = [];
+         createEnemies();
+         createHero();
+       
+         eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+           hero.y -= 5;
+         });
+       
+         eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+           hero.y += 5;
+         });
+       
+         eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+           hero.x -= 5;
+         });
+       
+4. **ಆಟ ಲೂಪ್ ಅನ್ನು ನಿಗದಿಪಡಿಸಿ**
+
+   `window.onload` ಫಂಕ್ಷನ್ ಅನ್ನು ಪುನರ್ ರಚಿಸಿ ಆಟವನ್ನು ಪ್ರಾರಂಭಿಸಲು ಮತ್ತು ಉತ್ತಮ ಮಧ್ಯಂತರದಲ್ಲಿ ಆಟ ಲೂಪ್ ಸ್ಥಾಪಿಸಲು. ನೀವು ಲೇಸರ್ ಕಿರಣವನ್ನು ಕೂಡ ಸೇರಿಸುತ್ತೀರಿ:
+
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      const gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100);
+    };
+    ```
+
+   **ಆಟದ ಸೆಟ್‌ಅಪ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+   - **ಪುಟವು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆಗುವುದನ್ನು ಕಾಯುತ್ತದೆ** ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು
+   - **ಕ್ಯಾನ್ವಾಸ್ ಅಂಕೆಯನ್ನು ಮತ್ತು ಅದರ 2D ರೆಂಡರಿಂಗ್ ಕಾನ್ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಪಡೆಯುತ್ತದೆ**
+   - **ಎಲ್ಲಾ ಚಿತ್ರ ಆಸ್ತಿ ಗಳನ್ನು ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ `await` ಬಳಸಿ ಲೋಡ್ ಮಾಡುತ್ತದೆ**
+   - **ಆಟ ಲೂಪ್ ಅನ್ನು 100ms ಮಧ್ಯಂತರದಲ್ಲಿ (10 FPS) ಪ್ರಾರಂಭಿಸುತ್ತದೆ**
+   - **ಪ್ರತಿ ಫ್ರೇಮಲ್ಲೂ ಸಂಪೂರ್ಣ ಪರದೆ ಅಳಿಸಿ ಮರುಚಿತ್ರಿಸುತ್ತದೆ**
+
+5. **ನಿರ್ದಿಷ್ಟ ಮಧ್ಯಂತರದಲ್ಲಿ ಶತ್ರುಗಳನ್ನು ಸರಿಸಲು** ಕೇಾಡ್ ಸೇರಿಸಿ
+
+    `createEnemies()` ಫಂಕ್ಷನ್ ಅನ್ನು ಪುನರ್ ರಚಿಸಿ ಶತ್ರುಗಳನ್ನು ರಚಿಸುವ ಹಾಗೆ ಮತ್ತು ಅವುಗಳನ್ನು ಹೊಸ gameObjects ವರ್ಗಕ್ಕೆ ಪುಷ್ ಮಾಡಿ:
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
+
+    **ಶತ್ರು ರಚನೆಯ ಏನಾಗುತ್ತದೆ:**
+    - **ಶತ್ರುಗಳನ್ನು ಪರದೆ ಮಧ್ಯಭಾಗದಲ್ಲಿ ನೆಲೆಯಲ್ಲಿ ಇರಿಸುವ ಸ್ಥಾನಗಳನ್ನು ಲೆಕ್ಕಹಾಕುತ್ತದೆ**
+    - **ನಷ್ಟವಾದ ಲೂಪ್ಗಳಲ್ಲಿ ವ್ಯಾಪಿಸಿದ ಶತ್ರುಗಳ ತಂತಿಗಳನ್ನು ರಚಿಸುತ್ತದೆ**
+    - **ಶತ್ರು ಚಿತ್ರವನ್ನು ಪ್ರತಿ ಶತ್ರು ವಸ್ತುವಿಗೆ ನೇಮಿಸುತ್ತದೆ**
+    - **ಪ್ರತಿ ಶತ್ರುವನ್ನು ಜಾಗತಿಕ ಆಟ ವಸ್ತುಗಳ ಅರೆಗೆಯಲ್ಲಿ ಸೇರಿಸುತ್ತದೆ**
+    
+    ಮತ್ತು `createHero()` ಫಂಕ್ಷನ್ ಅನ್ನು ಸೇರಿಸಿ ಹೀರೋಗೆ ಸಮಾನ ಪ್ರಕ್ರಿಯೆ ಮಾಡಲು.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    **ಹೀರೋ ರಚನೆಯ ಏನಾಗುತ್ತದೆ:**
+    - **ಹೀರೋವನ್ನು ಪರದೆ ಕೆಳಗಿನ ಮಧ್ಯಭಾಗದಲ್ಲಿ ನೆಲೆಸಿಸುತ್ತದೆ**
+    - **ಹೀರೋ ಚಿತ್ರವನ್ನು ಹೀರೋ ವಸ್ತುವಿಗೆ ನೇಮಿಸುತ್ತದೆ**
+    - **ಹೀರೋವನ್ನು ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಆಟ ವಸ್ತುಗಳ ಅರೆಗೆಯಲ್ಲಿ ಸೇರಿಸುತ್ತದೆ**
+
+    ಮತ್ತು ಕೊನೆಗೆ, ಚಿತ್ರಿಸಲು `drawGameObjects()` ಫಂಕ್ಷನ್ ಅನ್ನು ಸೇರಿಸಿ:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    **ಚಿತ್ರಿಸುವ ಫಂಕ್ಷನ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+    - **ಅರೆದಲ್ಲಿನ ಎಲ್ಲಾ ಆಟ ವಸ್ತುಗಳ ಮೂಲಕ ಗೊತ್ತುಮಾಡುತ್ತದೆ**
+    - **ಪ್ರತಿ ವಸ್ತುವಿನ `draw()` ಮೆಥಡ್ ಕರೆ ಮಾಡುತ್ತದೆ**
+    - **ಕ್ಯಾಂವಾಸ್ ಕಾನ್ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಪಾಸ್ ಮಾಡುತ್ತದೆ ಆದರಿಂದ ವಸ್ತುಗಳು ತಾವುನ್ನು ರೆಂಡರ್ ಮಾಡಬಹುದು**
+
+    ### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ತಪಾಸಣೆ**
+    **ಪೂರ್ಣ ಆಟ ವ್ಯವಸ್ಥೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳು**: ಸಂಪೂರ್ಣ ವಾಸ್ತುಶಿಲ್ಪದ ಮೇಲೆ ನಿಮ್ಮ ನೈಪುಣ್ಯವನ್ನು ಪರಿಶೀಲಿಸಿ:
+    - ✅ ಹೇಗೆವರು ಹೀರೋ ಮತ್ತು ಶತ್ರು ಸಾಮಾನ್ಯ GameObject ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತಾರೆ ತಿಳಿದುಕೊಳ್ಳಿ?
+    - ✅ ನಿಮ್ಮ ಕೋಡ್ ನಿರ್ವಹಣಾ ಮಾಡಲು pub/sub ಮಾದರಿ ಹೇಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ?
+    - ✅ ಆಟ ಲೂಪ್ ನೇರವಾಗಿ ಸೌಕರ্যমಯ ಅನಿಮೇಶನ್ ನಿರ್ಮಿಸಲು ಯಾವ ಪಾತ್ರವಹಿಸುತ್ತದೆ?
+    - ✅ ಪ್ರಕಟಕ ಕೇಳುವಿಕೆಗಳು ಬಳಕೆದಾರನ ಇನ್‌ಪುಟ್ ಅನ್ನು ಆಟ ವಸ್ತುಗಳ ವರ್ತನೆಗೆ ಹೇಗೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ?
+
+    **ವ್ಯವಸ್ಥೆಯ ಸಮಗ್ರತೆ**: ನಿಮ್ಮ ಆಟ ಈಗ ತೋರಿಸುತ್ತದೆ:
+    - **ವಸ್ತು-ಮುಖ ಡಿಸೈನ್**: ಆಧಾರ ವರ್ಗಗಳೊಂದಿಗೆ ವಿಶೇಷೀಕೃತ ಅನುಕ್ರಮಣೆ
+    - **ಘಟನೆ-ಚಾಲಿತ ವಾಸ್ತುಶಿಲ್ಪ**: pub/sub ಮಾದರಿ ನೇರ ಸಂಪರ್ಕ ಕಡಿಮೆ
+    - **ಅನಿಮೇಶನ್ ಫ್ರೇಮ್‌ವರ್ಕ್**: ಪಂದ್ಯ ಲೂಪ್ ಸತತ ಫ್ರೇಮ್ ನವೀಕರಣಗಳು
+    - **ಇನ್‌ಪುಟ್ Haಂಡ್ಲಿಂಗ್**: ವಿಡಗಳ ಕಾರ್ಯಕ್ರಮಗಳೊಂದಿಗೆ ಡೀಫಾಲ್ಟ್ ತಡೆಹಿಡಿತ
+    - **ಆಸ್ತಿ ನಿರ್ವಹಣೆ**: ಚಿತ್ರ ಲೋಡಿಂಗ್ ಮತ್ತು ಸ್ಪ್ರೈಟ್ ರೆಂಡರಿಂಗ್
+
+    **ವೃತ್ತಿಪರ ಮಾದರಿಗಳು**: ನೀವು ಅನುಷ್ಠಾನಗೊಳಿಸಿದ್ದೀರಿ:
+    - **ಹೊರ ಹಿತಾಸಕ್ತಿಗಳ ವಿಭಜನೆ**: ಇನ್‌ಪುಟ್, ತರ್ಕ ಮತ್ತು ರೆಂಡರಿಂಗ್ ವಿಭಜಿಸಲಾಗಿದೆ
+    - **ಬಹುರೂಪತೆಯತೆ**: ಎಲ್ಲಾ ಆಟ ವಸ್ತುಗಳು ಸಾಮಾನ್ಯ ಚಿತ್ರಣ ಇಂಟರ್ಫೇಸ್ ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ
+    - **ಸಂದೇಶ ಸಂವಹನ**: ಘಟಕಗಳ ಮಧ್ಯೆ ಸ್ವಚ್ಛ ಸಂವಹನ
+    - **ಸಂಪನ್ಮೂಲ ನಿರ್ವಹಣೆ**: ಪರಿಣಾಮಕಾರಿ ಸ್ಪ್ರೈಟ್ ಮತ್ತು ಅನಿಮೇಶನ್ ನಿರ್ವಹಣೆ
+
+    ನಿಮ್ಮ ಶತ್ರುಗಳು ನಿಮ್ಮ ಹೀರೋ ಬಾಹುಬಲ ನೌಕೆಯತ್ತ ಮುಂದುವರೆದಂತೆ ತೋರುತ್ತವೆ!
+
+      }
+    }
+    ```
+    
+    and add a `createHero()` function to do a similar process for the hero.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    ಮತ್ತು ಕೊನೆಗೆ, ಚಿತ್ರಿಸಲು `drawGameObjects()` ಫಂಕ್ಷನ್ ಅನ್ನು ಸೇರಿಸಿ:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    ನಿಮ್ಮ ಶತ್ರುಗಳು ನಿಮ್ಮ ಹೀರೋ ಬಾಹುಬಲ ನೌಕೆಯತ್ತ ಮುಂದುವರೆಯಲು ಪ್ರಾರಂಭಿಸಬೇಕು!
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ನಿಮ್ಮ ಆಟದ ಹೊಳಪನ್ನು ಹೆಚ್ಚಿಸುವ ಸವಾಲು ಇಲ್ಲಿ ಇದೆ: ಗಡಿಯಾರಗಳು ಮತ್ತು ಸುತ್ತುವರೆದ ನಿಯಂತ್ರಣಗಳನ್ನು ಸೇರಿಸುವುದು. ಪ್ರಸ್ತುತ, ನಿಮ್ಮ ಹೀರೋ ಪರದೆ ಬಿಟ್ಟು ಹೊರಗೆ ಹೋಗಬಹುದು, ಮತ್ತು ಚಲನೆಯು ಸಂಕುचितವಾದಂತೆ ಕಾಣಬಹುದು.
+
+**ನಿಮ್ಮ ಮಿಷನ್:** ನಿಮ್ಮ ಬಾಹುಬಲ ನೌಕೆಯನ್ನು ಬಲವಾದ ಪರದೆ ಗಡಿಗಳು ಮತ್ತು ಸುಗಮವಾದ ಚಲನೆಯೊಂದಿಗೆ ನೈಜತೆಯಂತೆ ಗೋಚರಿಸು. ಇದು NASA ನ ಫ್ಲೈಟ್ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆಗಳು ಬಾಹುಬಲ ಯಾನಗಳನ್ನು ಸುರಕ್ಷಿತ ಕಾರ್ಯಾಚರಣಾ ನಿಯಮಗಳನ್ನು ಮೀರುವುದರಿಂದ ತಡೆಹಿಡಿಯುವುದರಂತೆ.
+
+**ನೀವು ಬಲಾಯಿಸಬೇಕಾದುದು:** ನಿಮ್ಮ ಹೀರೋ ಬಾಹುಬಲ ನೌಕೆಯನ್ನು ಪರದೆ ಒಳಗಿರಿಸುವ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿ, ಮತ್ತು ನಿಯಂತ್ರಣಗಳು ಸುಗಮವಾಗಿರಲಿ. ಆಟಗಾರರು ತಿರುಗುಬಾಣ ಕುಂಜಿಯನ್ನು ಒತ್ತಿದಾಗ, ನೌಕೆ ನಿರಂತರವಾಗಿ ಸರಿಯಬೇಕು, ಅಸ್ಥಿರ ಹಾದಿಯಲ್ಲಿ ಅಲ್ಲ. ನೌಕೆಯು ಪರದೆ ಗಡಿಯಲ್ಲಿದಾಗ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸೇರಿಸುವುದಾಗಿ ಪರಿಗಣಿಸಿ – ಆಟ ವಲಯದ ಸಂಖ್ಯೆಯನ್ನು ಸೂಚಿಸುವ ಸೂಕ್ಷ್ಮ ಪರಿಣಾಮ.
+
+ಇಲ್ಲಿ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಕುರಿತು ತಿಳಿಯಿರಿ.
+
+## 🚀 ಸವಾಲು
+
+ಕೋಡ್ ಸಂಘಟನೆಯು ಯೋಜನೆಗಳು ವಿಸ್ತಾರಗೊಳ್ಳುವಂತೆ ಹೆಚ್ಚಾಗುತ್ತದೆ. ನೀವು ಗಮನಿಸಿದ್ದು ಬಾಷೆಯು ಕಾರ್ಯಗಳು, ವ್ಯತ್ಯಾಸಗಳು, ಮತ್ತು ವರ್ಗಗಳು ಎಲ್ಲವೂ ಒಟ್ಟಿಗೆ ಕೂಡಿವೆ. ಇದು ನನ್ನಿಗೆ Apollo ಮಿಷನ್ ಕೋಡ್ ಅನ್ನು ಸಂಘಟಿಸುವುದರಲ್ಲಿ ಎಂಜಿನಿಯರ್‌ಗಳು ಕ್ಲಿಯರ್, ನಿರ್ವಹಣೆಯ Iyತ ವ್ಯವಸ್ಥೆಗಳನ್ನು ರಚಿಸಲು ಹೇಗೆ ಹೆಮ್ಮೆಯ ಕೆಲಸ ಮಾಡಿದರು ಎಂಬುದನ್ನು ನೆನಪಿಸುತ್ತದೆ.
+
+**ನಿಮ್ಮ ಮಿಷನ್:**
+ಸಾಫ್ಟ್‌ವೇರ್ ವಾಸ್ತುಶಿಲ್ಪಿಯಂತೆ ಯೋಚಿಸಿ. ಆರು ತಿಂಗಳುಗಳ ನಂತರ ನೀವು ಅಥವಾ ತಂಡದಿಂದ ಯಾರಾದರೂ ಏನಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ಅರಿತುಕೊಳ್ಳಲು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಸಂಘಟಿಸುವಿರಿ? ಈಗಾಗಲೇ ಒಬ್ಬೇ ಫೈಲ್‌ನಲ್ಲಿ ಇರುತ್ತಿದ್ದರೂ ನೀವು ಉತ್ತಮ ಸಂಘಟನೆಯೊಂದಿಗೆ ಮಾಡಬಹುದು:
+
+- **ಸಂಬಂಧಿತ ಕಾರ್ಯಗಳನ್ನು** ಸ್ಪಷ್ಟ ಕಾಮೆಂಟ್ ತಲೆಬರಹಗಳೊಂದಿಗೆ ಗುಂಪು ಮಾಡುವುದು
+- **ಹಿತಾಸಕ್ತಿಗಳನ್ನು ವಿಭಜಿಸುವುದು** - ಆಟ ತರ್ಕವನ್ನು ರೆಂಡರಿಂಗ್ ರಿಂದ ವಿಭಜಿಸಲು
+- **ಸ್ಥಿರ ನಾಮಕರಣ ನಿಯಮಗಳನ್ನು** ವ್ಯತ್ಯಾಸಗಳು ಮತ್ತು ಕಾರ್ಯಗಳಿಗೆ ಉಪಯೋಗಿಸುವುದು
+- **ಮಾಡ್ಯೂಲುಗಳು** ಅಥವಾ ಹೆಸರು ಬದಿಹಿಡಿವಿಕೆಗಳನ್ನು ಬಳಸಿ ನಿಮ್ಮ ಆಟದ ವಿಭಿನ್ನ ಆಯಾಮಗಳನ್ನು ಸಂಘಟಿಸುವುದು
+- **ಪ್ರಮುಖ ಭಾಗಗಳ ಉದ್ದೇಶವನ್ನು ವಿವರಿಸುವ** ದಾಖಲೆಗಳನ್ನು ಸೇರಿಸುವುದು
+
+**ಪುನರ್ಮೂಲ್ಯನು ಮಾಡಿಕೊಳ್ಳುವ ಪ್ರಶ್ನೆಗಳು:**
+- ನೀವು ಹಿಂದಿರುಗಿ ನೋಡಿದಾಗ ನಿಮ್ಮ ಕೋಡ್‌ನ ಯಾವ ಭಾಗಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟ?
+- ನೀವು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಸಂಘಟಿಸಿದರೆ ಮತ್ತೊಬ್ಬರು ಸುಲಭವಾಗಿ ಸಹಕಾರ ನೀಡಬಹುದು?
+- ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಲು (ಪವರ್-ಅಪ್‌ಗಳು ಅಥವಾ ವಿಭಿನ್ನ ಶತ್ರು ಪ್ರಕಾರಗಳು) ನೀವು ಯೋಜಿಸಿದರೆ ಏನು ಆಗಬಹುದು?
+
+## ಪೋಷ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್
+
+[ಪೋಷ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/34)
+
+## ಪರಿಶೀಲನೆ ಮತ್ತು ಸ್ವತಃ ಅಧ್ಯಯನ
+
+ನಾವು ಎಲ್ಲವನ್ನೂ ನೂತನದಿಂದ ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ, ಇದು ಕಲಿಕೆಯು ಅದ್ಭುತವಾಗಿದೆ, ಆದರೆ ಇಲ್ಲಿ ಒಂದು ಸಣ್ಣ ರಹಸ್ಯ ಇದೆ – ಕೆಲವು ಅದ್ಭುತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಂವರ್ಕ್‌ಗಳಿವೆ, ಅವು ಬಹಳಷ್ಟು ಕಠಿಣ ಕೆಲಸಗಳನ್ನು ನಿಭಾಯಿಸಬಹುದು. ನೀವು ಮೂಲತತ್ವಗಳನ್ನು ಒಳ್ಳೆಯದಾಗಿ ಅರ್ಥಮಾಡಿಕೊಂಡಾಗ, ನೀವು [ಲಭ್ಯವಿರುವುದನ್ನು ಅನ್ವೇಷಿಸಬಹುದು](https://github.com/collections/javascript-game-engines).
+
+ಫ್ರೇಂವರ್ಕ್‌ಗಳನ್ನು ಕೈಯಲ್ಲಿ ಸಹಾಯಕರಾಗಿರುವ ಉತ್ತಮ ಸಲಕರಣೆಯ ಸಂಗ್ರಹದಂತೆ ಎಣಿಸಿ. ಅವು ನಮೂದಿಸಿದ ಕೋಡ್ ಸಂಘಟನೆ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಬಹುದು, ಜೊತೆಗೆ ನೀವು ಸ್ವತಃ ನಿರ್ಮಿಸಲು ವಾರಗಳು ಬೇಕಾಗುವ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡಬಹುದು.
+
+**ಅನ್ವೇಷಿಸಲು ಚೆನ್ನಾಗಿರುವ ವಿಷಯಗಳು:**
+- ಆಟ ಎಂಜಿನ್ಗಳು ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಸಂಘಟಿಸುತ್ತವೆ – ಅವರ ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಬಳಕೆಯಾಗುವ ಮಾದರಿಗಳನ್ನು ನೀವು ಆಶ್ಚర్యಪಡುತ್ತೀರಿ
+- ಕ್ಯಾನ್ವಾಸ್ ಆಟಗಳನ್ನು ಮೃದುವಾಗಿ ನಿರ್ವಹಿಸಲು ಪ್ರದರ್ಶನ ತಂತ್ರಗಳು  
+- ನಿಮ್ಮ ಕೋಡ್ ಕ್ಲೀನ್ ಮತ್ತು ನಿರ್ವಹಣೆಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನ ನವೀನ ವೈಶಿಷ್ಟ್ಯಗಳು
+- ಆಟ ವಸ್ತುಗಳನ್ನೂ ಅವುಗಳ ಸಂಬಂಧಗಳನ್ನೂ ನಿರ್ವಹಿಸುವ ವಿವಿಧ ವಿಧಾನಗಳು
+
+## 🎯 ನಿಮ್ಮ ಆಟ ಅನಿಮೇಶನ್ ನೈಪುಣ್ಯ ಸಮಯರೇಖೆ
+
+```mermaid
+timeline
+    title ಆಟದ ಅನಿಮೇಷನ್ ಮತ್ತು ಸಂವಹನ ಕಲಿಕೆ ಪ್ರಗತಿ
+    
+    section ಚಲನೆಯ ಮೂಲತತ್ತ್ವಗಳು (20 ನಿಮಿಷಗಳು)
+        ಅನಿಮೇಷನ್ ತತ್ವಗಳು: ಫ್ರೇಮ್ ಆಧಾರಿತ ಅನಿಮೇಷನ್
+                            : ಸ್ಥಾನ ಪರಿಶೋಧನೆಗಳು
+                            : ಸಹನೀಯ ವ್ಯವಸ್ಥೆಗಳು
+                            : ಮಧ್ಯಮ ಚಲನೆ
+        
+    section ಘಟನೆ ವ್ಯವಸ್ಥೆಗಳು (25 ನಿಮಿಷಗಳು)
+        ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್: ಕೀಪಾಡ್ ಘಟನೆ ನಿರ್ವಹಣೆ
+                  : ಡೀಫಾಲ್ಟ್ ವರ್ತನೆ ತಡೆವಿಕೆ
+                  : ಘಟನೆ ವಸ್ತು ಲಕ್ಷಣಗಳು
+                  : ವಿಂಡೋ ಮಟ್ಟದ ಕೆಳಕೈ
+        
+    section ಆಟದ ಆರ್ಕಿಟೆಕ್ಚರ್ (30 ನಿಮಿಷಗಳು)
+        ವಸ್ತು ಡಿಸೈನ್: ವಂಶಸ್ಥಾನದ ಮಾದರಿಗಳು
+                     : ಮೂಲ ವರ್ಗ ರಚನೆ
+                     : ವಿಶೇಷಿತ ಸ್ವಭಾವಗಳು
+                     : ಬಹುರೂಪ ಸ 인터ಫೇಸ್ಗಳು
+        
+    section ಸಂವಹನ ಮಾದರಿಗಳು (35 ನಿಮಿಷಗಳು)
+        ಪಬ್/ಸಬ್ ಅನುಷ್ಠಾನ: ಘಟನೆ ಹೊರಡುವಿಕೆ
+                              : ಸಂದೇಶ ನಿರಂತರತೆ
+                              : ನಿಜವಾದ ಸಂಯೋಗ
+                              : ವ್ಯವಸ್ಥೆ ಸಂಯೋಜನೆ
+        
+    section ಆಟದ ಲೂಪ್ ಪರಿಣಿತಿ (40 ನಿಮಿಷಗಳು)
+        ನಿಜ-ಸಮಯ ವ್ಯವಸ್ಥೆಗಳು: ಫ್ರೇಮ್ ದರ ನಿಯಂತ್ರಣ
+                         : ಅಪ್ಡೇಟ್/ರೆಂಡರ್ ಚಕ್ರ
+                         : ಸ್ಥಿತಿಯ ನಿರ್ವಹಣೆ
+                         : ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ
+        
+    section ಉನ್ನತ ತಂತ್ರಗಳು (45 ನಿಮಿಷಗಳು)
+        ವೃತ್ತಿಪರ ವೈಶಿಷ್ಟ್ಯಗಳು: ಘರ್ಷಣೆ ಪತ್ತೆ
+                             : ಭೌತಶಾಸ್ತ್ರೀಯ ನಕಲು
+                             : ಸ್ಥಿತಿ ಯಂತ್ರಗಳು
+                             : ಘಟಕ ವ್ಯವಸ್ಥೆಗಳು
+        
+    section ಆಟದ ಎಂಜಿನ್ ತತ್ವಗಳು (1 ವಾರ)
+        ಫ್ರೇಮ್ವರ್ಕ್ ಅರಿವು: ಘಟಕ-ಸಂರಚನಾ ವ್ಯವಸ್ಥೆಗಳು
+                               : ದೃಶ್ಯ ಬಾಲ್ಹಾರಿ
+                               : ಆಸ್ತಿಗತಿಯ पाइಪ್ಲೈನ್‌ಗಳು
+                               : ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರೊಫೈಲಿಂಗ್
+        
+    section ಉತ್ಪಾದನಾ ಕೌಶಲ್ಯಗಳು (1 ತಿಂಗಳು)
+        ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ: ಕೋಡ್ ಸಂರಚನೆ
+                                : ತಂಡ ಸಹಕಾರ
+                                : ಪರೀಕ್ಷಣಾ ತಂತ್ರಗಳು
+                                : ಹೊರತಾಗಿಸುವಿಕೆ ಸುಧಾರಣೆ
+```
+### 🛠️ ನಿಮ್ಮ ಆಟ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣ ಸಾರಾಂಶ
+
+ಈ ಪಾಠ ಮುಗಿಸಿದ ನಂತರ, ನೀವು ಈಗಿದ್ದರು:
+- **ಅನಿಮೇಶನ್ ತತ್ವಗಳು**: ಫ್ರೇಮ್ ಆಧಾರಿತ ಚಲನೆ ಮತ್ತು ಮೃದುವಾದ ಪರಿವರ್ತನೆಗಳು
+- **ಘಟನೆ-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಕೀಬೋರ್ಡ್ ಇನ್‌ಪುಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಜೊತೆ ಸರಿಯಾದ ಘಟನೆ ನಿರ್ವಹಣೆ
+- **ವಸ್ತು-ಮುಖ ವಿನ್ಯಾಸ**: ಅನುಕ್ರಮಣ ಶ್ರೇಣಿಗಳು ಮತ್ತು ಬಹುರೂಪಾತ್ಮಕ ಇಂಟರ್ಫೇಸ್‌ಗಳು
+- **ಸಂದೇಶ ವಿನ್ಯಾಸ**: pub/sub ವಾಸ್ತುಶಿಲ್ಪ ನಿರ್ವಹಣೆಗೆ ಅನುಕೂಲಕರ
+- **ಆಟ ಲೂಪ್ ವಾಸ್ತುಶಿಲ್ಪ**: ನೈತಿಕ ನವೀಕರಣ ಮತ್ತು ಚಿತ್ರಣ ಚಕ್ರಗಳು
+- **ಇನ್‌ಪುಟ್ ವ್ಯವಸ್ಥೆಗಳು**: ಬಳಕೆದಾರ ನಿಯಂತ್ರಣ ಮ್ಯಾಪ್ ಮಾಡುವುದಾದರೊಂದಿಗೆ ಮೂಲ ವರ್ತನೆ ತಡೆಬಂದಿದೆ
+- **ಆಸ್ತಿ ನಿರ್ವಹಣೆ**: ಸ್ಪ್ರೈಟ್ ಲೋಡಿಂಗ್ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಚಿತ್ರಣ ತಂತ್ರಗಳು
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು**
+- [ ] ಬ್ರೌಸರ್ ಕન્સೋಲ್ ತೆರೆಯಿರಿ ಮತ್ತು `addEventListener('keydown', console.log)` ಪ್ರಯತ್ನಿಸಿ ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳನ್ನು ನೋಡಿ
+- [ ] ಸರಳ ಡಿವ್ ಅಂಶವನ್ನು ರಚಿಸಿ ಮತ್ತು ತಿರುಗುಬಾಣಗಳೊಂದಿಗೆ ಅದರ ಚಲನೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ
+- [ ] ನಿರಂತರ ಚಲನೆ ನಿರ್ಮಿಸಲು `setInterval` ಅನ್ನು ಪ್ರಯತ್ನಿಸಿ
+- [ ] `event.preventDefault()` ಯನ್ನು ಪ್ರಯತ್ನಿಸಿ ಮೂಲ ವರ್ತನೆಯನ್ನು ತಡೆಯಲು
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಏನು ಸಾಧಿಸಬಹುದಾಗಿದೆ**
+- [ ] ಪಾಠೋತ್ತರ ಕ್ವಿಜ್ ಪೂರ್ಣಗೊಳ್ಳಿಸಿ ಮತ್ತು ಘಟನೆ-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ಸಂಪೂರ್ಣ ಕೀಬೋರ್ಡ್ ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಚಲಿಸುವ ಹೀರೋ ಬಾಹುಬಲ ನೌಕೆಯನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ಮೃದುವಾದ ಶತ್ರು ಚಲನಾಚಲನ ಮಾದರಿಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ಆಟ ವಸ್ತುಗಳು ಪರದೆ ಬಿಡದಂತೆ ಗಡಿಬಿಡಿಯನ್ನು ಸೇರಿಸಿ
+- [ ] ಆಟ ವಸ್ತುಗಳ ನಡುವೆ ಮೂಲಭೂತ ಸಂಘರ್ಷ ಗುರುತಿಸುವಿಕೆ ರಚಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ಅನಿಮೇಶನ್ ಪಯಣ**
+- [ ] ಸುವ್ಯವಸ್ಥಿತ ಚಲನೆ ಮತ್ತು ಸಂವಹನಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಉಡಾಣ ಆಟವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ವಕ್ರತೆಗಳು, ವೇಗವರ್ಧನೆ, ಮತ್ತು ಭೌತಶಾಸ್ತ್ರದಂತಹ ಪ್ರಗತ ಚಲನ ಮಾದರಿಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಮೃದುವಾದ ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಈಸಿಂಗ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ಕಣದ ಪರಿಣಾಮಗಳು ಮತ್ತು ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಮೃದು 60fps ಆಟಗತಿಯಕ್ಕಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಿಸಿ
+- [ ] ಮೊಬೈಲ್ ಟಚ್ ನಿಯಂತ್ರಣಗಳ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ ಸೇರಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ಇಂಟರೆಕ್ಟಿವ್ ಅಭಿವೃದ್ಧಿ**
+- [ ] ಪ್ರಗತ ಅನಿಮೇಶನ್ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಇಂಟರೆಕ್ಟಿವ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] GSAP ಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ಅನಿಮೇಶನ್ ಎಂಜಿನ್ ಅನ್ನು ಕಲಿಯಿರಿ
+- [ ] ಓಪನ್ ಸೋರಸ್ ಆಟ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಅನಿಮೇಶನ್ ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿರಿ
+- [ ] ಗ್ರಾಫಿಕ್ಸ್ ಘನಾಂಶಗಳಿಗೆ ಕಾರ್ಯಕ್ಷಣೆಯನ್ನು ಪರಿಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಆಟ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಅನಿಮೇಶನ್ ಕುರಿತು ಶಿಕ್ಷಣಾತ್ಮಕ ವಿಷಯಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಸಂವಹನ ಮತ್ತಂಜೂರ ಆದಾಯದ ಕಾರ್ಯಕ್ರಮ ಕಲೆಹಾಕಿ
+
+**ವಾಸ್ತವಿಕ ಆಪ್ಲಿಕೇಶನ್ಗಳು:** ನಿಮ್ಮ ಆಟ ಅನಿಮೇಶನ್ ನೈಪುಣ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ:
+- **ಇಂಟರೆಕ್ಟಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಡೈನಮಿಕ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಮತ್ತು ನೈತಿಕ ಇಂಟರ್ಫೇಸ್ಗಳು
+- **ಡೇಟಾ ದೃಶ್ಯೀಕರಣ**: ಅನಿಮೇಟೆಡ್ ಚಾರ್ಟ್‌ಗಳು ಮತ್ತು ಇಂಟರೆಕ್ಟಿವ್ ಗ್ರಾಫಿಕ್ಸ್
+- **ಶಿಕ್ಷಣಾತ್ಮಕ ಸಾಫ್ಟ್‌ವೇರ್**: ಇಂಟರೆಕ್ಟಿವ್ ಸಿಮ್ಯುಲೆಷನ್‌ಗಳು ಮತ್ತು ಕಲಿಕೆ ಸಲಕರಣೆಗಳು
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ಟಚ್ ಆಧಾರಿತ ಆಟಗಳು ಮತ್ತು ಜೆಸ್ಟೂರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್
+- **ಡೆಸ್ಕ್‌ಟಾಪ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಎಲೆಕ್ಟ್ರಾನ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಮೃದುವಾದ ಅನಿಮೇಶನ್‌ಗಳೊಂದಿಗೆ
+- **ವೆಬ್ ಅನಿಮೇಶನ್‌ಗಳು**: CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನಿಮೇಶನ್ ಲೈಬ್ರರಿಗಳು
+
+**ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು ನೀವು ಪಡೆದಿದ್ದು:**
+- **ಅನ್ವಯಿಸಲು** ಘಟನೆ-ಚಾಲಿತ ವ್ಯವಸ್ಥೆಗಳನ್ನು ವಿಸ್ತಾರಕ್ಕೆ ತಯಾರಾಗಿಸುವುದು
+- **ಅನುಷ್ಠಾನಗೊಳಿಸಲು** ಗಣಿತ ತತ್ವಗಳ ಮೂಲಕ ಸೌಕರ್ಯಮಯ ಅನಿಮೇಶನ್
+- **ಡಿಬಗ್** ಸಣ್ಣ ಸಣ್ಣ ಸಂಗತಿಗಳನ್ನು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳನ್ನು ಬಳಸಿ
+- **ಕಾರ್ಯಕ್ಷಮಗೊಳಿಸಲು** ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಆಟದ ಕಾರ್ಯಕ್ಷಮತೆ
+- ** ವಿನ್ಯಾಸ ಮಾಡಲು** ಸುಲಭ ನಿರ್ವಹಿಸುವ ಕೋಡ್ ರಚನೆಗಳು ಸಾಧಿತ ಮಾದರಿಗಳಲ್ಲಿ
+
+**ಆಟ ಅಭಿವೃದ್ಧಿ ತತ್ವಗಳ ನೈಪುಣ್ಯ:**
+- **ಫ್ರೇಮ್ ದರ ನಿರ್ವಹಣೆ**: FPS ಮತ್ತು ಸಮಯ ನಿಯಂತ್ರಣಗಳ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+- **ಇನ್‌ಪುಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್**: ಔಟ್‌ಪಟ್ ಮತ್ತು ಘಟನೆ ವ್ಯವಸ್ಥೆಗಳ ಕ್ರಾಸ್-ಪ್ಲಾಟ್‌ಫಾರ್ಮ್
+- **ವಸ್ತು ಜೀವನಚಕ್ರ**: ರಚನೆ, ನವೀಕರಣ, ಮತ್ತು ನಾಶ ಮಾದರಿಗಳು
+- **ಸ್ಥಿತಿ ಸಮನ್ವಯತೆ**: ಫ್ರೇಮ್‌ಗಳ ನಡುವಿನಲ್ಲಿ ಆಟ ಸ್ಥಿತಿಯನ್ನು ಸ್ಥಿರವಾಗಿಟ್ಟುಕೊಳ್ಳುವುದು
+- **ಘಟನೆ ವಾಸ್ತುಶಿಲ್ಪ**: ಆಟ ವ್ಯವಸ್ಥೆಗಳ ನಡುವೆ ಸ್ವತಂತ್ರ ಸಂವಹನ
+
+**ಮು೦ದಿನ ಹಂತ:** ನೀವು ಸಂಘರ್ಷ ಗುರುತಿಸುವಿಕೆ, ಅಂಕೆಗಳ ನಡವಳಿ ವ್ಯವಸ್ಥೆ, ಧ್ವನಿ ಪರಿಣಾಮಗಳು ಸೇರಿಸಬಹುದು ಅಥವಾ Phaser ಅಥವಾ Three.js ನಂತಹ ಆಧುನಿಕ ಆಟ ಫ್ರೇಂವರ್ಕ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸಬಹುದು!
+
+🌟 ** saavutettu saavutus**: ನೀವು ವೃತ್ತಿಪರ ವಾಸ್ತುಶಿಲ್ಪ ಮಾದರಿಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಇಂಟರೆಕ್ಟಿವ್ ಆಟ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಿ!
+
+## ನಿಯೋಜನೆ
+
+[ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ಕಾಮೆಂಟ್ ಮಾಡಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಸ್ಥಗಿತ ಪತ್ರಿಕೆ**:  
+ಈ ದಾಖಲೆ AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದ್ದು, ನಾವು ನಿಖರತೆಯನ್ನು ನಾನು ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿನ ಮೂಲ ದಾಖಲೆವೇ ಅಧಿಕೃತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪ ಧಾರಣೆಗಳಿಗೆ ಅಥವಾ ಅರ್ಥ ಭ್ರಾಂತಿಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/3-moving-elements-around/assignment.md

@@ -0,0 +1,38 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c162b3b3a1cafc1483c8015e9b266f0d",
+  "translation_date": "2026-01-08T14:54:21+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ನಿಮ್ಮ ಕೋಡ್‌에 ಕಾಮೆಂಟ್ ಮಾಡಿ
+
+## ಸೂಚನೆಗಳು
+
+ಶುದ್ಧ, ಚೆನ್ನಾಗಿ ದಾಖಲೆ ಮಾಡಲಾದ ಕೋಡ್ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಹಂಚಿಕೊಳ್ಳಲು ಅಗತ್ಯವಾಗಿದೆ. ಈ ಕಾರ್ಯದಲ್ಲಿ, ನೀವು ವೃತ್ತಿಪರ ಡೆವಲಪರ್‌ಗಳ ಅತ್ಯಂತ ಪ್ರಮುಖ ಅಭ್ಯಾಸಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡುತ್ತೀರಿ: ನಿಮ್ಮ ಕೋಡ್‌ನ ಉದ್ದೇಶ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ವಿವರಿಸುವ ಸ್ಪಷ್ಟ, ಸಹಾಯಕ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಬರೆಯುವುದು.
+
+ನಿಮ್ಮ ಗೇಮ್ ಫೋಲ್ಡರ್‌ನ `app.js` ಫೈಲ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಅದನ್ನು ಕಾಮೆಂಟ್‌ಮಾಡಿ ಹಾಗೂ ಶುದ್ಧಗೊಳಿಸುವ ರೀತಿಗಳಿಗೆ ಹುಡುಕಿ. ಕೋಡ್ ನಿಯಂತ್ರಣ ತಪ್ಪಿಸಿಕೊಳ್ಳುವುದು ತುಂಬಾ ಸುಲಭ, ಮತ್ತು ಈಗ ನೀವು ಓದಲು ಅನುಕೂಲಕರವಾಗಿರುವ ಕೋಡ್ ಹೊಂದಲು ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಲು ಉತ್ತಮ ಅವಕಾಶ.
+
+**ನಿಮ್ಮ ಕಾರ್ಯದಲ್ಲಿ شامل ಆಗಿರುವುದು:**
+- **ಪ್ರತಿ ಪ್ರಮುಖ ಕೋಡ್ ವಿಭಾಗ ಏನು ಮಾಡುತ್ತದೆ ಎಂದು** ವಿವರಿಸುವ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ
+- **ಕಾರ್ಯಗಳನ್ನು ದಾಖಲೆ ಮಾಡುವುದು** ಅವುಗಳ ಉದ್ದೇಶ ಮತ್ತು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳ ಸ್ಪಷ್ಟ ವಿವರಣೆಗಳೊಂದಿಗೆ
+- **ಲಾಜಿಕಲ್ ಬ್ಲಾಕ್‌ಗಳಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ವ್ಯವಸ್ಥಾಪಿಸಲು** ವಿಭಾಗ ಶೀರ್ಷಿಕೆಗಳನ್ನು ಬಳಸಿ
+- **ಬಳಸದ ಅಥವಾ ಅನಗತ್ಯವಾದ ಕೋಡ್ ಅನ್ನು** ತೆಗೆದುಹಾಕಿ
+- **ಚಿರಂತನ ಹೆಸರಿನ ನಿಯಮಗಳನ್ನು** ಬಳಸಿ ವ್ಯತ್ಯಾಸಗಳ ಮತ್ತು ಕಾರ್ಯಗಳಿಗಾಗಿ
+
+## ಮೌಲ್ಯಮಾಪನ ಮಾನದಂಡ
+
+| ಮಾನದಂಡ | ಉದಾಹರಣೆ | ಸಮರ್ಪಕ | ಸುಧಾರಣೆಗೆ ಅಗತ್ಯವಿದೆ |
+| -------- | --------- | -------- | ----------------- |
+| **ಕೋಡ್ ದಾಖಲೆ** | `app.js` ಕೋಡ್ ಪೂರ್ಣವಾಗಿ ಕಾಮೆಂಟ್ ಮಾಡಲಾಗಿದೆ ಎಲ್ಲಾ ಪ್ರಮುಖ ವಿಭಾಗಗಳು ಮತ್ತು ಕಾರ್ಯಗಳ ಸ್ಪಷ್ಟ, ಸಹಾಯಕ ವಿವರಣೆಗಳೊಂದಿಗೆ | `app.js` ಕೋಡ್ ಸಮರ್ಪಕವಾಗಿ ಕಾಮೆಂಟ್ ಮಾಡಲಾಗಿದೆ ಹೆಚ್ಚಿನ ವಿಭಾಗಗಳಿಗೆ ಮೂಲಭೂತ ವಿವರಣೆಗಳೊಂದಿಗೆ | `app.js` ಕೋಡ್ ಕನಿಷ್ಠ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿದೆ ಮತ್ತು ಸ್ಪಷ್ಟ ವಿವರಣೆ ಇಲ್ಲದಿರುವುದು |
+| **ಕೋಡ್ ವ್ಯವಸ್ಥಾಪನೆ** | ಕೋಡ್ ಲಾಜಿಕಲ್ ಬ್ಲಾಕ್‌ಗಳಾಗಿ ವಿಭಾಗ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ ಮತ್ತು ನಿಯಮಿತ ರಚನೆಯೊಂದಿಗೆ ವ್ಯವಸ್ಥಿತವಾಗಿದೆ | ಕೋಡ್ ಕೆಲವು ಸಂಘಟನೆಯೊಂದಿಗೆ ಸಂಬಂಧಿತ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೂಲಸ್ಥಾಗತಿಯನ್ನು ಹೊಂದಿದೆ | ಕೋಡ್ ಸ್ವಲ್ಪ ಅಸಂಯೋಜಿತವಾಗಿದೆ ಮತ್ತು ಅನುಸರಿಸಲು ಕಷ್ಟವಾಗಿದೆ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಎಲ್ಲಾ ವ್ಯತ್ಯಾಸಗಳು ಮತ್ತು ಕಾರ್ಯಗಳು ವಿವರಣಾತ್ಮಕ ಹೆಸರನ್ನು ಬಳಸುತ್ತವೆ, ಯಾವುದೇ ಬಳಸದ ಕೋಡ್ ಇಲ್ಲ, ನಿಯಮಿತ ಶೈಲಿ ಪಾಲನೆ | ಹೆಚ್ಚಿನ ಕೋಡ್ ಉತ್ತಮ ಹೆಸರಿನ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ ಕಡಿಮೆ ಬಳಸದ ಕೋಡ್ | ವ್ಯತ್ಯಾಸ ಹೆಸರಗಳು ಅಸ್ಪಷ್ಟವಾಗಿವೆ, ಬಳಸದ ಕೋಡ್ ಇದೆ, ಅಸಮರ್ಪಕ ಶೈಲಿ |
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅಸ್ವೀಕಾರಿಕೆ**:  
+ಈ ದಸ್ತಾವೇಜು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗೆ ಪ್ರಯತ್ನಿಸುವಾಗಲೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದೆಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿ ಇದ್ದ ಮೂಲ ದಸ್ತಾವೇಜು ಆದ್ಯಕ್ಷತೆಯ ಮೂಲವಾಗಿರಬೇಕೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಗಂಭೀರ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಭಾಷಾಂತರದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪುಗಳು, ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆಗಳ ಬಗ್ಗೆ ನಾವು ಜವಾಬ್ದಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/4-collision-detection/README.md

@@ -0,0 +1,776 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "039b4d8ce65f5edd82cf48d9c3e6728c",
+  "translation_date": "2026-01-08T13:32:58+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "kn"
+}
+-->
+# ಸ್ಪೇಸ್ ಗೇಮ್ ಭಾಗ 4: ಲೇಸರ್ ಸೇರಿಸುವುದು ಮತ್ತು ಘರ್ಷಣೆಗಳನ್ನು ಪತ್ತೆಮಾಡುವುದು
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಘರ್ಷಣೆ ಪತ್ತೆ journey
+    section ಭೌತಶಾಸ್ತ್ರ adhar
+      ವರ್ಗಚದರಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 3: Student
+      ಹಾದಿಮಾಡುವ ಗಣಿತವನ್ನು ಕಲಿಯಿರಿ: 4: Student
+      ಸಂಯೋಜನೆ ವ್ಯವಸ್ಥೆಗಳನ್ನಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 4: Student
+    section ಆಟ mecanics
+      ಲೇಸರ್ ಸಟಿಕೆ ನೆರವೇರಿಸಿ: 4: Student
+      ವಸ್ತು ಜೀವನಚಕ್ರ ಸೇರಿಸಿ: 5: Student
+      ಘರ್ಷಣೆ ನಿಯಮಗಳನ್ನು ರಚಿಸಿ: 5: Student
+    section ವ್ಯವಸ್ಥೆ ಏಕೀಕರಣ
+      ಘರ್ಷಣೆ ಪತ್ತೆಯನ್ನು ನಿರ್ಮಿಸಿ: 5: Student
+      ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅತ್ಯುತ್ತಮಗೊಳಿಸಿ: 5: Student
+      ಪರಸ್ಪರ ಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ: 5: Student
+```
+## ಪೂರ್ವ-ಲೇಕ್ಚರ್ ಕ್ವಿಜ್
+
+[ಪೂರ್ವ-ಲೇಕ್ಚರ್ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/35)
+
+ಸ್ಟಾರ್ ವಾರ್ಸ್‌ನಲ್ಲಿ ಲ್ಯೂಕ್ ನ ಪ್ರೋಟಾನ್ ಟಾರ್ಪಿಡೊಗಳು ಡೆತ್ ಸ್ಟಾರ್‌ನ ಎಕ್ಸಹಾಸ್ಟ್ ಪೋರ್ಟ್‌ಗೆ ಹೊಡೆದ ಕ್ಷಣವನ್ನು ಬಿಚ್ಚು. ಆ ನಿಖರ ಘರ್ಷಣೆ ಪತ್ತೆ ಗ್ಯಾಲಕ್ಸಿಯ ವಿಧಿಯನ್ನು ಬದಲಾಯಿಸಿತು! ಆಟಗಳಲ್ಲಿ, ಘರ್ಷಣೆ ಪತ್ತೆ ಕಾರ್ಯದರ್ಶಿಯಂತೆ - ಇದು ಒಬ್ಬ ಅಂಶಗಳು ಎప్పుడు ಪರಸ್ಪರ ಸಂವಹಿಸುತ್ತವೆ ಮತ್ತು ತಕ್ಷಣ ಏನಾಗುತ್ತದೆ ಎಂದು ನಿರ್ಧರಿಸುತ್ತದೆ.
+
+ಈ ಪಾಠದಲ್ಲಿ, ನೀವು ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮಿಗೆ ಲೇಸರ್ ಆಯುಧಗಳನ್ನು ಸೇರಿಸಿ ಘರ್ಷಣೆ ಪತ್ತೆಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವಿರಿ. ನಾಸಾದ ಮಿಷನ್ ಯೋಜಕರು ಹಾಳಿರುವ ಅವಶೇಷಗಳನ್ನು ತಪ್ಪಿಸಲು ಬಾಹ್ಯಾಕಾಶಯಾನಿಗಳ ಮಾರ್ಗ ಗಳನ್ನು ಲೆಕ್ಕಹಾಕುವ ಹಾಗೆಯೇ, ನೀವು ಆಟದ ಅಂಶಗಳು ಎప్పుడు ಪರಸ್ಪರ ಮುಟ್ಟುತ್ತವೆ ಎಂದು ಕಂಡುಹಿಡಿಯುವುದು ಕಲಿಯುತ್ತೀರಿ. ನಾವು ಇದನ್ನು ಇತರ ವಿಷಯಗಳ ಮೇಲೆ ಕെട്ടಿಕೊಂಡು ಸರಳ ಹಂತಗಳಲ್ಲಿ ವಿಭಾಗಿಸುವೆವು.
+
+ಕೊನೆಯಲ್ಲಿ, ನಿಮ್ಮ ಬಳಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಹೋರಾಟ ವ್ಯವಸ್ಥೆಯಿದ್ದು ಲೇಸರ್ ಗಳು ಶತ್ರುಗಳನ್ನು ನಾಶಮಾಡುತ್ತವೆ ಮತ್ತು ಘರ್ಷಣೆಗಳು ಆಟದ ಸಂದರ್ಭಗಳನ್ನು ಪ್ರೇರೇಪಿಸುತ್ತವೆ. ಇವು ಫಿಜಿಕ್ಸ್ ಸಿಮ್ಯುಲೇಷನಿನಿಂದ ಇಂಟೆರ್ಯಾಕ್ಟಿವ್ ವೆಬ್ ಇಂಟರ್ಫೇಸ್ಗಳವರೆಗೆ ಎಲ್ಲಲ್ಲಿ ಬಳಸಲ್ಪಡುವ ಸೂತ್ರಗಳಾಗಿವೆ.
+
+```mermaid
+mindmap
+  root((Collision Detection))
+    Physics Concepts
+      ಬಾಹ್ಯ ಕುರಿತಡೆಗಳು
+      ಸಂಪರ್ಕ ಪರೀಕ್ಷೆ
+      ನಿರ್ಧಾರ ವ್ಯವಸ್ಥೆಗಳು
+      ಬೇರ್ಪಡಿಸುವ ತರ್ಕ
+    Game Objects
+      ಲೇಸರ್ ಪ್ರಾಜೆಕ್ಟೈಲ್ಗಳು
+      ಶತ್ರು ಬೋಟುಗಳು
+      ನಾಯಕ ಪಾತ್ರ
+      ಸಂಧಾನ ವಲಯಗಳು
+    Lifecycle Management
+      ವಸ್ತು ರಚನೆ
+      ಚಲನೆಯ ನವೀಕರಣಗಳು
+      ನಾಶದ ಗುರುತಿಸುವಿಕೆ
+      ಮೆಮೊರಿ ಶುದ್ದಿ
+    Event Systems
+      ಕೀಬೋರ್ಡ್ ಇನ್ಪುಟ್
+      ಸಂಧಾನ ಘಟನೆಗಳು
+      ಆಟ ಸ್ಥಿತಿ ಬದಲಾವಣೆಗಳು
+      ಧ್ವನಿ/ದೃಶ್ಯ ಪರಿಣಾಮಗಳು
+    Performance
+      ಪರಿಣಾಮಕಾರಿ ಆಲ್ಗೋರಿದಮ್ ಗಳು
+      ಫ್ರೇಮ್ ದರ ಅನುಕೂಲತೆ
+      ಮೆಮೊರಿ ನಿರ್ವಹಣೆ
+      ಸ್ಥಳೀಯ ಭಾಗೀಕರಣ
+```
+✅ ಪ್ರಥಮವಾಗಿ ಬರೆಯಲಾದ ಕಂಪ್ಯೂಟರ್ ಆಟದ ಬಗ್ಗೆ ಸ್ವಲ್ಪ ಅಧ್ಯಯನ ಮಾಡಿ. ಅದರ ಕಾರ್ಯಕ್ಷಮತೆ ಏನು?
+
+## ಘರ್ಷಣೆ ಪತ್ತೆ
+
+ಘರ್ಷಣೆ ಪತ್ತೆ ಅಪೊಲೋ ಲೂನರ್ ಮೋಡ್ಯೂಲ್‌ನ ಸಮೀಪತಾ ಸೆನ್ಸಾರ್ಗಳಂತೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ - ಅದು მუდმಾಗಿ ದೂರಗಳನ್ನು ಪರಿಶೀಲಿಸಿ ಅಂಶಗಳು ತುಂಡುಗಳಾಗಿರುವಾಗ ಎಚ್ಚರಿಕೆ ನೀಡುತ್ತದೆ. ಆಟಗಳಲ್ಲಿ, ಈ ವ್ಯವಸ್ಥೆ ಅಂಶಗಳು ಪರಸ್ಪರ ಸಂವಹಿಸುವ ಸಮಯ ಮತ್ತು ನಂತರ ಏನಾಗಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.
+
+ನಾವು ಬಳಸುವ ವಿಧಾನವು ಪ್ರತಿಯೊಂದು ಆಟದ ಅಂಶವನ್ನುAy ಎರಡು ಹಕ್ಕಲುಗಳಾಗಿ ಪರಿಗಣಿಸುತ್ತದೆ, ವಿಮಾನ ಸಂಚಾರ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆಗಳು ವಿಮಾನಗಳನ್ನು ಅನುಸರಿಸಲು ಸರಳ ಜ್ಯಾಮಿತಿ ಆಕಾರಗಳನ್ನು ಬಳಸುವ ಹಾಗೆ. ಈ ಚೌಕ ಆಧಾರಿತ ವಿಧಾನ ಸರಳವಾಗಿದೆ ಅನ್ನಿಸಬಹುದು, ಆದರೆ ಇದು ಗಣನಾತ್ಮಕವಾಗಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ ಮತ್ತು ಹೆಚ್ಚಿನ ಆಟದ ಪರಿಸ್ಥಿತಿಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ.
+
+### ಚೌಕಾಕೃತಿಯ ಪ್ರತಿನಿಧಿತ್ವ
+
+ಪ್ರತೀ ಆಟದ ಅಂಶಕ್ಕೆ ನಿರ್ದಿಷ್ಟ ಅಂಚುಗಳ ಸಂಕೇತಗಳ ಅಗತ್ಯವಿದೆ, ಮಾರ್ಸ್ ಪಾತ್ಫೈನ್ಡರ್ ರೋವರ್ ತನ್ನ ನಕ್ಷೆ ಸಂಗ್ರಹಿಸುವ ಹಾದಿಯ ಹಾದಿಯನ್ನು ಹೇಗೆ ನಕ್ಷೆ ಹಾಕಿತು ಅಂತೆಯೇ. ಇಲ್ಲಿ ನಾವು ಈ ಅಂಚುಗಳ ಸಂಕೇತಗಳ ವಿವರ ನೀಡುತ್ತೇವೆ:
+
+```mermaid
+flowchart TD
+    A["🎯 ಆಟದ ವಸ್ತು"] --> B["📍 ಸ್ಥಿತಿ (x, y)"]
+    A --> C["📏 ಆಯಾಮಗಳು (ಅಗಲ, ಎತ್ತರ)"]
+    
+    B --> D["ಮೇಲೆ: y"]
+    B --> E["ಎಡ: x"]
+    
+    C --> F["ಕೆಳಗೆ: y + ಎತ್ತರ"]
+    C --> G["ಬಲಗೆ: x + ಅಗಲ"]
+    
+    D --> H["🔲 ಚದರ ಆಕರಗಳು"]
+    E --> H
+    F --> H
+    G --> H
+    
+    H --> I["ಸ೦ಘರ್ಷ ಪತ್ತೆಗಾಗಿ ಸಿದ್ಧ"]
+    
+    style A fill:#e3f2fd
+    style H fill:#e8f5e8
+    style I fill:#fff3e0
+```
+```javascript
+rectFromGameObject() {
+  return {
+    top: this.y,
+    left: this.x,
+    bottom: this.y + this.height,
+    right: this.x + this.width
+  }
+}
+```
+
+**ಇದನ್ನು ವಿವರಿಸುತ್ತೇವೆ:**
+- **ಮೇಲ್ಭಾಗದ ಅಂಚು**: ನೀವು ಅಂಶವನ್ನು ತಳ್ಳಿಸುವ ಸ್ಥಳ (ಅದರ y ಸ್ಥಾನ)
+- **ಎಡಭಾಗದ ಅಂಚು**: ಅದನ್ನು ಹೊಡಿದುಕೊಳ್ಳುವ ಸ್ಥಳ (ಅದರ x ಸ್ಥಾನ)
+- **ಕೆಳಭಾಗದ ಅಂಚು**: y ಸ್ಥಾನದ ಮೇಲೆ ಎತ್ತರವನ್ನು ಸೇರಿಸಿ - ಅದು ಎಲ್ಲಿಗೆ ಮುಕ್ತಾಯವಾಗುತ್ತದೆ ತಿಳಿದುಕೊಳ್ಳಿ!
+- **ಬಲಭಾಗದ ಅಂಚು**: x ಸ್ಥಾನದ ಮೇಲೆ ಅಗಲವನ್ನು ಸೇರಿಸಿ - ಸಂಪೂರ್ಣ ಅಂಚು ಸಿಗುತ್ತದೆ
+
+### ಮುಟ್ಟಿಕೆ ಪರೀಕ್ಷೆ ಅಲ್ಗೊರಿದಮ್
+
+ಚೌಕಗಳು ಪರಸ್ಪರ ಮುಟ್ಟಿದೆಯೇ ಎಂದು ಪತ್ತೆಮಾಡುವುದು ಹಬಲ್ ಸ್ಪೇಸ್ ಟೆಲಿಸ್ಕೋಪ್ ತನ್ನ ದೃಶ್ಯ ಕ್ಷೇತ್ರದಲ್ಲಿ ಖಗೋಳೀಯ ಅಂಶಗಳು ಮುಟ್ಟುತ್ತವೆಯೇ ಎಂದು ತಿಳಿದುಕೊಳ್ಳುವ ವಿಧಾನದಂತಹ ನಿಯಮವನ್ನು ಬಳಸುತ್ತದೆ. ಅಲ್ಗೊರಿದಮ್ ವಿಭಜನೆಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ:
+
+```mermaid
+flowchart LR
+    A["ಆಯತ 1"] --> B{"ವಿಭಾಗ ಪರೀಕ್ಷೆಗಳು"}
+    C["ಆಯತ 2"] --> B
+    
+    B --> D["R2 ಎಡ > R1 ಬಲವೇ?"]
+    B --> E["R2 ಬಲ < R1 ಎಡವೇ?"]
+    B --> F["R2 ಮೇಲ್ಭಾಗ > R1 ಕೆಳಭಾಗವೇ?"]
+    B --> G["R2 ಕೆಳಭಾಗ < R1 ಮೇಲ್ಭಾಗವೇ?"]
+    
+    D --> H{"ಯಾವುದೇ ಸತ್ಯವಿದೆಯೇ?"}
+    E --> H
+    F --> H
+    G --> H
+    
+    H -->|ಹೌದು| I["❌ ಗೆರಲಿಲ್ಲ"]
+    H -->|ಇಲ್ಲ| J["✅ ಗೆರ ಕಂಡುಬಂದಿದೆ"]
+    
+    style B fill:#e3f2fd
+    style I fill:#ffebee
+    style J fill:#e8f5e8
+```
+```javascript
+function intersectRect(r1, r2) {
+  return !(r2.left > r1.right ||
+    r2.right < r1.left ||
+    r2.top > r1.bottom ||
+    r2.bottom < r1.top);
+}
+```
+
+**ವಿಭಜನೆ ಪರೀಕ್ಷೆ ರಡಾರ್ ವ್ಯವಸ್ಥೆಗಳಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:**
+- ಚೌಕ 2 ಸಂಪೂರ್ಣವಾಗಿ ಚೌಕ 1 ಯ ದಕ್ಷಿಣಕ್ಕೆ ಇದೆಯೇ?
+- ಚೌಕ 2 ಸಂಪೂರ್ಣವಾಗಿ ಚೌಕ 1 ಯ ಬಲಕ್ಕೆ ಇದೆಯೇ?
+- ಚೌಕ 2 ಸಂಪೂರ್ಣವಾಗಿ ಚೌಕ 1 ಯ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಇದೆಯೇ?
+- ಚೌಕ 2 ಸಂಪೂರ್ಣವಾಗಿ ಚೌಕ 1 ಯ ಕೆಳಭಾಗದಲ್ಲಿ ಇದೆಯೇ?
+
+ಈ ಯಾವ ಶರತ್ತುಗಳೂ ಅಳ್ಳಿಸದಿದ್ದರೆ, ಚೌಕಗಳು ಒಟ್ಟಿಗೆ ಮುಟ್ಟಿರಬೇಕು ಎಂದು ಅರ್ಥ. ಈ ವಿಧಾನ ಎರಡು ವಿಮಾನಗಳು ಸುರಕ್ಷಿತ ದೂರದಲ್ಲಿರುವುದನ್ನು ರಡಾರ್ ನಿಯಂತ್ರಕರು ಹೇಗೆ ಅರಿಯುತ್ತಾರೆ ಅಂತಹಂತೆಯೇ.
+
+## ಅಂಶಗಳ ಜೀವಚಕ್ರ ನಿರ್ವಹಣೆ
+
+ಲೇಸರ್ ಶತ್ರುವನ್ನು ಹೊಡೆದಾಗ, ಎರಡು ಅಂಶಗಳನ್ನೂ ಆಟದಿಂದ ತೆಗೆದುಹಾಕಬೇಕಾಗುತ್ತದೆ. ಹೀಗಾಗಿಯೇ, ಮಧ್ಯ.loop(delete) ಮಾಡುವಾಗ ಆಪತ್ತು ಉಂಟಾಗಬಹುದು - ಇದನ್ನು ಅಪೊಲೋ ಗೈಡೆನ್ಸ್ ಕಂಪ್ಯೂಟರ್ ಮೊದಲಿನ ಗಣಕಗಳಲ್ಲಿ ಕಠಿಣ ಪಾಠವಾಗಿ ಕಲಿತವು. ಬದಲು, ನಾವು "ಅಳಿಸುವ ಗುರುತು" ವಿಧಾನವನ್ನು ಬಳಸುತ್ತೇವೆ, ಇದು ಫ್ರೇಮ್‌ಗಳ ನಡುವೆ ಸುರಕ್ಷಿತವಾಗಿ ಅಂಶಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.
+
+```mermaid
+stateDiagram-v2
+    [*] --> Active: ವಸ್ತು ರಚಿಸಲಾಗಿದೆ
+    Active --> Collided: ಸಂಘರ್ಷ ಕಂಡುಬಂದಿದೆ
+    Collided --> MarkedDead: ಮರಣ = ಸತ್ಯ ಎಂದು ಸೆಟ್ ಮಾಡಿ
+    MarkedDead --> Filtered: ಮುಂದಿನ ಚೌಕಟ್ಟು
+    Filtered --> [*]: ವಸ್ತು ತೆಗೆದುಹಾಕಲಾಗಿದೆ
+    
+    Active --> OutOfBounds: ಪರದೆ ಬಿಟ್ಟುಹೋಗಿದೆ
+    OutOfBounds --> MarkedDead
+    
+    note right of MarkedDead
+        ಮುಂದುವರಿಯಲು ಸುರಕ್ಷಿತ
+        ಪ್ರಸ್ತುತ ಚೌಕಟ್ಟು
+    end note
+    
+    note right of Filtered
+        ವಸ್ತುಗಳು ತೆಗೆದುಹಾಕಲಾಗಿದೆ
+        ಚೌಕಟ್ಟುಗಳ ನಡುವೆ
+    end note
+```
+ನಾವು ಅಳಿಸುವುದಕ್ಕೆ ಗುರುತಿಸುವ ವಿಧಾನ ಇಲ್ಲಿದೆ:
+
+```javascript
+// ಅಂಶವನ್ನು ತೆಗೆದುಹಾಕಲು ಸೂಚಿಸಿ
+enemy.dead = true;
+```
+
+**ಈ ವಿಧಾನ ಏಕೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:**
+- ನಾವು ಅಂಶವನ್ನು "ಸತ್ತುಹೋಯಿತು" ಎನ್ನುತ್ತೇವೆ ಆದರೆ ತಕ್ಷಣ ಅಳಿಸುವುದಿಲ್ಲ
+- ಇದರಿಂದ ಪ್ರಸ್ತುತ ಗೇಮ್ ಫ್ರೇಮ್‌ ಸುರಕ್ಷಿತವಾಗಿ ಮುಗಿಯುತ್ತದೆ
+- ಬಿಟ್ಟುಹೋಗಿದ್ದುದನ್ನು ಬಳಸಲು ಯತ್ನಿಸಿದಾಗ ಆಗುವ ಅಪಾಯಗಳು ಇಲ್ಲ!
+
+ನಂತರ ಮಾರ್ಕ್ ಮಾಡಲಾದ ಅಂಶಗಳನ್ನು ಮುಂದೆ ರೆಂಡರ್‍ಗೆ ಮುಂಚೆ ಫಿಲ್ಟರ್ ಮಾಡಲು:
+
+```javascript
+gameObjects = gameObjects.filter(go => !go.dead);
+```
+
+**ಈ ಫಿಲ್ಟರಿಂಗ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- "ಬಳಿ ಜೀವಂತ" ಅಂಶಗಳಲ್ಲಿ ಮಾತ್ರ ಹೊಸ ಪಟ್ಟಿ ರಚಿಸುತ್ತದೆ
+- ಸತ್ತ ಗುರುತಿಸಲಾದ ಅಂಶಗಳನ್ನು ಬ ಹೊರ ಹಾಕುತ್ತದೆ
+- ನಿಮ್ಮ ಆಟವನ್ನು ಹೊಂದಿಕೊಳ್ಳುವಂತೆಯೂ ಸೌಕರ್ಯವನ್ನೂ ಒದಗಿಸುತ್ತದೆ
+- ಪರಿಸ್ಥಿತಿಯಲ್ಲಿ ನಾಶವಾದ ಅಂಶಗಳ ಸಂಗ್ರಹದಿಂದ ಮೆಮೊರಿ ಬಿಲ್ಲು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ
+
+## ಲೇಸರ್ ಮೆಕ್ಯಾನಿಕ್ಸ್ ಅನುಷ್ಠಾನ
+
+ಲೇಸರ್ ಪ್ರೊಜೆಕ್ಟೈಲ್ ಗಳು ಆಟಗಳಲ್ಲಿ ಸ್ಟಾರ್ ಟ್ರೆಕ್‌ನ ಫೋಟಾನ್ ಟಾರ್ಪಿಡೊಗಳ ಹಾಗೆಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ - ಸ್ವತಂತ್ರ ವಸ್ತುಗಳು ನೇರ ಮಾರ್ಗದಲ್ಲಿ ಪ್ರಯಾಣ ಮಾಡಿ ಯಾವುದಾದರೂ ಹೊಡೆದಾಗ ನಿಗದಿತ ಪರಿಣಾಮ ಹೊಂದುತ್ತವೆ. ಪ್ರತಿ ಸ್ಪೇಸ್ ಬಾರ್ ಒತ್ತುವಿಕೆ ಹೊಸ ಲೇಸರ್ ವಸ್ತುವನ್ನು ಸೃಷ್ಟಿಸಿ ಪರದೆ ಮೇಲೆ ಸಾಗುತ್ತದೆ.
+
+ಈ ಕಾರ್ಯಕ್ಕೆ, ನಾವು ವಿವಿಧ ಭಾಗಗಳನ್ನು ಸಮನ್ವಯ ಮಾಡಬೇಕಾಗುತ್ತದೆ:
+
+**ಮುಖ್ಯ ಅಂಶಗಳು:**
+- **ಲೇಸರ್ ವಸ್ತುಗಳನ್ನು ಸೃಷ್ಟಿಸುವುದು** ಹೀರೋನ ಸ್ಥಾನದಿಂದ ಹೊರಹೊಮ್ಮುವಂತೆ
+- **ಕೀಬೋರ್ಡ್ ಇನ್‌ಪುಟ್ ನಿರ್ವಹಣೆ** ಲೇಸರ್ ಸೃಷ್ಟಿಗೆ
+- **ಲೇಸರ್ ಚಲನೆ ಮತ್ತು ಜೀವಚಕ್ರ ನಿರ್ವಹಣೆ**
+- **ಲೇಸರ್ ಪ್ರೊಜೆಕ್ಟೈಲುಗಳ ದೃಶ್ಯಾತ್ಮಕ ಪ್ರತಿನಿಧಾನ ಪೂರೈಸು**
+
+## ಫೈರಿಂಗ್ ದರ ನಿಯಂತ್ರಣ ಅನುಷ್ಠಾನ
+
+ಅನಿಯಂತ್ರಿತ ಸ್ಪಂದನಗಳೇ ಆಟದ ಎಂಜಿನ್ ಅನ್ನು ಹಾರಾಯಿಸಿಬಿಡುತ್ತಿತ್ತು ಮತ್ತು ಆಟ ಸುಲಭವಾಗುತ್ತಿದ್ದಿತ್ತು. ನಿಜವಾದ ಆಯುಧ ವ್ಯವಸ್ಥೆಗಳಿಗೂ ಹೋಲುವ ನಿಯಂತ್ರಣಗಳು ಇರುತ್ತವೆ - USS ಎಂಟರ್‌ಪ್ರೈಸ್ನ್ ಫೇಜರ್ಸ್‌ಗೂ ಬ್ಯಾಟ್ ರೀಚಾರ್ಜ್ ಸಮಯ ಬೇಕಾಗಿತ್ತು.
+
+ನಾವು ಪ್ರತ್ಯುತ್ತರದಾಗುವ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುತ್ತೇವೆ, ಇದು ವೇಗವಾಗಿ ಬಂಧಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ನಿಯಂತ್ರಣವನ್ನು ಪ್ರತಿಕ್ರಿಯಾಶೀಲವಾಗಿರಿಸುತ್ತದೆ:
+
+```mermaid
+sequenceDiagram
+    participant Player
+    participant Weapon
+    participant Cooldown
+    participant Game
+    
+    Player->>Weapon: ಸ್ಪೇಸ್‌ಬಾರ್ ಒತ್ತಿ
+    Weapon->>Cooldown: ತಂಪಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
+    
+    alt ಆಯುಧ ಸಿದ್ದವಾಗಿದೆ
+        Cooldown->>Weapon: ತಂಪು = ಸರಿ
+        Weapon->>Game: ಲೇಸರ್ ರಚಿಸಿ
+        Weapon->>Cooldown: ಹೊಸ ತಂಪಾಗುವ ಸಮಯ ಪ್ರಾರಂಭಿಸಿ
+        Cooldown->>Cooldown: ತಂಪು = ತಪ್ಪು
+        
+        Note over Cooldown: 500ms ಕಾಯಿರಿ
+        
+        Cooldown->>Cooldown: ತಂಪು = ಸರಿ
+    else ಆಯುಧ ತಂಪಾಗುತ್ತಿದೆ
+        Cooldown->>Weapon: ತಂಪು = ತಪ್ಪು
+        Weapon->>Player: ಯಾವುದೇ ಕ್ರಿಯೆ ಇಲ್ಲ
+    end
+```
+```javascript
+class Cooldown {
+  constructor(time) {
+    this.cool = false;
+    setTimeout(() => {
+      this.cool = true;
+    }, time);
+  }
+}
+
+class Weapon {
+  constructor() {
+    this.cooldown = null;
+  }
+  
+  fire() {
+    if (!this.cooldown || this.cooldown.cool) {
+      // ಲೇಸರ್ ಪ್ರಕ್ಷೇಪಣಿಕೆ ರಚಿಸಿ
+      this.cooldown = new Cooldown(500);
+    } else {
+      // ಶಸ್ತ್ರಾಸ್ತ್ರ ಇನ್ನೂ ಶೀತಲವಾಗುತ್ತಿದೆ
+    }
+  }
+}
+```
+
+**ಕೂಲ್ಡೌನ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:**
+- ಸೃಷ್ಟಿಸಿದಾಗ, ಆಯುಧ "ಹಾಟ್" ಆಗಿರುತ್ತದೆ (ಇನ್ನೂ ಬೆಂಕಿ ಹೊಡೆಯಲು ಸಾಧ್ಯವಿಲ್ಲ)
+- ಕಾಲಾವಧಿ ನಂತರ, ಇದು "ಕೂಲ್" ಆಗಿ ಫೈರ್ ಮಾಡಲು ಸಿದ್ಧವಾಗುತ್ತದೆ
+- ಫೈರ್ ಮಾಡುವ ಮೊದಲು, ನಾವು "ಆಯುಧ ಕೂಲ್ ಆಗಿದೆಯೇ?" ಎನ್ನುತ್ತೇವೆ
+- ಇದು ಸ್ಪ್ಯಾಮ್ ಕ್ಲಿಕ್ಕಿಂಗ್ ತಡೆಯುತ್ತದೆ ಮತ್ತು ನಿಯಂತ್ರಣವನ್ನು ಪ್ರತಿಕ್ರಿಯಾಶೀಲವಾಗಿರಿಸುತ್ತದೆ
+
+✅ ಸ್ಪೇಸ್ ಗೇಮ್ ಸರಣಿಯ ಪಾಠ 1ಕ್ಕೆ ಈ ಕುಲ್ಡ್‌ಆನ್‌ಗಳು ಕುರಿತು ನೆನಪಿಕೊಳ್ಳಿ.
+
+## ಘರ್ಷಣೆ ವ್ಯವಸ್ಥೆ ನಿರ್ಮಾಣ
+
+ನೀವು ಈಗಿರುವ ಸ್ಪೇಸ್ ಗೇಮ್ ಕೋಡ್ ಅನ್ನು ವಿಸ್ತರಿಸಿ ಘರ್ಷಣೆ ಪತ್ತೆ ವ್ಯವಸ್ಥೆಯನ್ನು ಸೃಷ್ಟಿಸುವಿರಿ. ಅಂತಾರಾಷ್ಟ್ರೀಯ ಬಾಹ್ಯಾಕಾಶ ಸ್ಟೇಷನ್‌ನ ಸ್ವಯಂಚಾಲಿತ ಘರ್ಷಣೆ ತಪ್ಪಿಸುವ ವ್ಯವಸ್ಥೆಯಂತೆ, ನಿಮ್ಮ ಆಟವು ನಿರಂತರವಾಗಿ ಅಂಶಗಳ ಸ್ಥಾನಗಳನ್ನು ವೀಕ್ಷಿಸಿ ಪರಸ್ಪರ ಮುಟ್ಟಿಸುವಾಗ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ.
+
+ಮತ್ತೆ ನಿಮ್ಮ ಹಿಂದೆ ಇರುವ ಪಾಠ ಕೋಡ್‌ರಿಂದ ಪ್ರಾರಂಭಿಸಿ, ನಿಗದಿತ ನಿಯಮಗಳೊಂದಿಗೆ ಘರ್ಷಣೆ ಪತ್ತೆಯನ್ನು ಸೇರಿಸುವಿರಿ.
+
+> 💡 **ಪ್ರೊ ಟಿಪ್**: ಲೇಸರ್ ಸ್ಪ್ರೈಟ್ ಈಗಾಗಲೇ ನಿಮ್ಮ ಆಸ್ತಿ ಸಂಪಂಬದಲ್ಲಿದ್ದು ನಿಮ್ಮ ಕೋಡಿನಲ್ಲಿ ಉಲ್ಲೇಖಿಸಲಾಗಿದೆ, ಅನುಷ್ಠಾನಕ್ಕೆ ಸಿದ್ಧವಾಗಿದೆ.
+
+### ಅನುಷ್ಠಾನಗೊಳಿಸಬೇಕಾದ ಘರ್ಷಣೆ ನಿಯಮಗಳು
+
+**ಆಟದ ಯಾಂತ್ರಿಕತೆಗಳು ಸೇರಿಸಲು:**
+1. **ಲೇಸರ್ ಶತ್ರुलाई ಹೊಡೆದು ಹಾಳುಮಾಡುವುದು**: ಲೇಸರ್ ಪ್ರಾಜೆಕ್ಟೈಲ್ ಹೊಡೆಯುವಾಗ ಶತ್ರು ವಸ್ತು ನಾಶವಾಗುತ್ತದೆ
+2. **ಲೇಸರ್ ಪರದೆ ಅಂಚಿಗೆ ತಲುಪಿದಾಗ**: ಲೇಸರ್ ಪರದೆ ಮೇಲ್ಭಾಗದ ಅಂಚು ತಲುಪಿದಾಗ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ
+3. **ಶತ್ರು ಮತ್ತು ಹೀರೋ ಘರ್ಷಣೆ**: ಶುಲ್ಕವಾಗಿ ಇಬ್ಬರೂ ವಸ್ತುಗಳು ನಾಶವಾಗುತ್ತವೆ
+4. **ಶತ್ರು ಕೆಳಭಾಗ ತಲುಪಿದಾಗ**: ಶತ್ರುಗಳು ಪರದೆ ಕೆಳಭಾಗ ತಲುಪಿದಾಗ ಆಟ ಮುಗಿಯುತ್ತದೆ
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಘರ್ಷಣೆ ಪತ್ತೆ ಆಧಾರ:** ಅನುಷ್ಠಾನ ಮಾಡುವ ಮೊದಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಚೌಕ ಅಂಚುಗಳು ಘರ್ಷಣೆ ಪ್ರಾಂತಗಳನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ
+- ✅ ವಿಭಜನೆ ಪರೀಕ್ಷೆ Intersection ಲೆಕ್ಕಾಚರಣೆಗಿಂತ ಏಕೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ
+- ✅ ಆಟದ ಲೂಪ್ನಲ್ಲಿ ಅಂಶಗಳ ಜೀವಚಕ್ರ ನಿರ್ವಹಣೆಯ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು
+- ✅ ಘಟನೆ ಚಾಲಿತ ವ್ಯವಸ್ಥೆಗಳು ಘರ್ಷಣೆ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸುತ್ತವೆ
+
+**ತ್ವರಿತ ಸ್ವ-ಪರೀಕ್ಷೆ:** ನೀವು ತಕ್ಷಣ ಅಂಶಗಳನ್ನು ಅಳಿಸಿದರೆ ಏನಾಗುತ್ತದೆ?
+*ಉತ್ತರ: ಮಧ್ಯದಲ್ಲಿ ಅಳಿಸುವುದರಿಂದ ಆಪತ್ತಾಗಬಹುದು ಅಥವಾ ಪುನರಾವರ್ತನೆ ಲೋಪವಾಗಬಹುದು*
+
+**ಭೌತಶಾಸ್ತ್ರ ಅರಿವು:** ನೀವು ಈಗ ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದು:
+- **ಕೋಆರ್ಡಿನೇಟ್ ವ್ಯವಸ್ಥೆಗಳು**: ಸ್ಥಾನ ಮತ್ತು ಆಯಾಮಗಳು ಅಂಚುಗಳನ್ನು ಸೃಷ್ಟಿಸುವುದು
+- **ಘರ್ಷಣೆ ಲಾಜಿಕ್**: ಘರ್ಷಣೆ ಪತ್ತೆ ಹಿಂಬಾಲಿಸುವ ಗಣಿತೀಯ ಸಿದ್ಧಾಂತಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಏರಿಸಲು**: ಸಮಯ ಪ್ರಾಯೋಗಿಕ ವ್ಯವಸ್ಥೆಗಳಲ್ಲಿ ಪರಿಣಾಮಕಾರಿ ಅಲ್ಗೊರಿದಮ್ಗಳು ಏಕೆ ಮುಖ್ಯ
+- **ಮೆಮೊರಿ ನಿರ್ವಹಣೆ**: ಸ್ಥಿರತೆಗಾಗಿ ಸುರಕ್ಷಿತ ಅಂಶದ ಜೀವಚಕ್ರ ಮಾದರಿಗಳು
+
+## ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಪರಿಸರವನ್ನು ಸ್ಥಾಪಿಸುವುದು
+
+ಸರಿಯಾದ ಸುದ್ದಿ - ನಾವು ಬಹುತೇಕ ನೆಲೆಗೊಳಿಸುವ ಅವಕಾಶಗಳನ್ನು ನಿಮಗಾಗಿ ಹಿಂದೆಯೇ ಮಾಡಿದ್ದೇವೆ! ನಿಮ್ಮ ಎಲ್ಲ ಆಟದ ಸಂಪದ್ರೆಗಗಳು ಮತ್ತು ಮೂಲ ರಚನೆ `your-work` ಉಪಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಇದೆ, ನೀವು ಆಢಂಬರಗಳ ಘರ್ಷಣೆ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಲು ಸಿದ್ದವಾಗಿದ್ದೀರಿ.
+
+### ಯೋಜನೆ ರಚನೆ
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+**ಫೈಲ್ ರಚನೆಯ ವಿವರ:**
+- **ಆಟದ ಎಲ್ಲಾ ಸ್ಪ್ರೈಟ್ ಚಿತ್ರಗಳನ್ನು ಹೊಂದಿದೆ**
+- **ಮುಖ್ಯ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಫೈಲ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ**
+- **ಸ್ಥಳಿತ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಅವರ ಪ್ಯಾಕೇಜ್ ಸಂರಚನೆ ನೀಡುತ್ತದೆ**
+
+### ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಆರಂಬಿಸುವುದು
+
+ನಿಮ್ಮ ಯೋಜನೆ ಫೋಲ್ಡರ್‌ಗೆ ಹೋಗಿ ಸ್ಥಳೀಯ ಸರ್ವರ್ ಆರಂಭಿಸಿ:
+
+```bash
+cd your-work
+npm start
+```
+
+**ಈ ಆಜ್ಞೆ ಸರಣಿ:**
+- **ನಿಮ್ಮ ಕಾರ್ಯಾಚರಣಾ ಯೋಜನೆ ಫೋಲ್ಡರ್‌ಗೆ ಡೈರೆಕ್ಟರಿ ಬದಲಾಯಿಸುತ್ತದೆ**
+- **`http://localhost:5000` ನಲ್ಲಿ ಸ್ಥಳೀಯ HTTP ಸರ್ವರ್ ಆರಂಭಿಸುತ್ತದೆ**
+- **ಪರೀಕ್ಷೆ ಮತ್ತು ಅಭಿವೃದ್ಧಿಗೆ ನಿಮ್ಮ ಆಟದ ಫೈಲ್‌ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ**
+- **ಸ್ವಯಂಚಾಲಿತ ಪುನಃಲೋಡ್ ಮೂಲಕ ಜೀವಂತ ಅಭಿವೃದ್ಧಿಗೆ ಅನುಮತಿಸುತ್ತದೆ**
+
+ನಿಮ್ಮ ಬ್ರೌಸರ್ ತೆರೆಯಿರಿ ಮತ್ತು `http://localhost:5000`ಗೆ ಹೋಗಿ ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಹೀರೋ ಮತ್ತು ಶತ್ರುಗಳೊಂದಿಗೆ ಪರದೆ ಮೇಲೆ ನೋಡಿ.
+
+### ಹಂತದ ಹಂತದ ಅನುಷ್ಠಾನ
+
+ನಾಸಾ ವಾಯೇಜರ್ ಬಾಹ್ಯಾಕಾಶಯಾನಿಯನ್ನು ಪ್ರೋಗ್ರಾಂ ಮಾಡಿದ್ದಂತೆ ಕ್ರಮಬದ್ಧವಾಗಿ ಘರ್ಷಣೆ ಪತ್ತೆ ಅನ್ನು ಅನುಷ್ಠಾನ ಮಾಡೋಣ.
+
+```mermaid
+flowchart TD
+    A["1. ಆಯತಿಕ ಬೌಂಡರಿಗಳು"] --> B["2. ಸಂಕ্ৰমಣ ಪತ್ತೆ"]
+    B --> C["3. ಲೇಸರ್ ವ್ಯವಸ್ಥೆ"]
+    C --> D["4. ಘಟನೆ ನಿರ್ವಹಣೆ"]
+    D --> E["5. ಘರ್ಷಣೆ ನಿಯಮಗಳು"]
+    E --> F["6. ಕೂಲ್ಡೌನ್ ವ್ಯವಸ್ಥೆ"]
+    
+    G["ವಸ್ತು ಬೌಂಡರಿಗಳು"] --> A
+    H["ಭೌತಶಾಸ್ತ್ರ ಆಲ್ಗೋರಿಥಮ್"] --> B
+    I["ಪ್ರಾಜೆಕ್ಟೈಲ್ ರಚನೆ"] --> C
+    J["ಕೀಬೋರ್ಡ್ ಇನ್ಪುಟ್"] --> D
+    K["ಗೇಮ್ ಲಾಜಿಕ್ಸ್"] --> E
+    L["ರೇಟು ಮಿತಿಮೀರುವುದು"] --> F
+    
+    F --> M["🎮 ಸಂಪೂರ್ಣ ಗೇಮ್"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
+#### 1. ಚೌಕದ ಘರ್ಷಣೆ ಅಂಚುಗಳನ್ನು ಸೇರಿಸಿ
+
+ಮೊದಲು, ನಿಮ್ಮ ಆಟದ ಅಂಶಗಳಿಗೆ ತಮ್ಮ ಅಂಚುಗಳನ್ನು ವರ್ಣಿಸುವ ವಿಧಾನ ಕಲಿಸೋಣ. ನಿಮ್ಮ `GameObject` ಕ್ಲಾಸ್‌ಗೆ ಈ ವಿಧಾನವನ್ನು ಸೇರಿಸಿ:
+
+```javascript
+rectFromGameObject() {
+    return {
+      top: this.y,
+      left: this.x,
+      bottom: this.y + this.height,
+      right: this.x + this.width,
+    };
+  }
+```
+
+**ಈ ವಿಧಾನ ಸಾಧಿಸುವುದು:**
+- **ನಿಖರ ಅಂಚು ಸಂಕೇತಗಳೊಂದಿಗೆ ಚೌಕಾಕೃತಿಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ**
+- **ಸ್ಥಾನ ಹಾಗೂ ಆಯಾಮಗಳನ್ನು ಬಳಸಿ ಕೆಳಭಾಗ ಮತ್ತು ಬಲಭಾಗಗಳನ್ನು ಲೆಕ್ಕಿಸುತ್ತದೆ**
+- **ಘರ್ಷಣೆ ಪತ್ತೆ ಅಲ್ಗೊರಿದಮ್ಗಳಿಗೆ ಸಿದ್ಧವಾದ ವಸ್ತುವನ್ನು ರಿಟರ್ನ್ ಮಾಡುತ್ತದೆ**
+- **ಎಲ್ಲಾ ಆಟದ ಅಂಶಗಳಿಗೆ ಸಾಂದರ್ಭಿಕ ಇಂಟರ್ಫೇಸ್ ಒದಗಿಸುತ್ತದೆ**
+
+#### 2. ಮುಟ್ಟಿಕೆ ಪತ್ತೆ ಅನುಷ್ಠಾನ ಮಾಡಿ
+
+ಈಗ, ನಾವು ಎರಡು ಚೌಕಗಳು ಮುಟ್ಟಿದೆಯೇ ಎಂದು ತಿಳಿಸುವ ಫಂಕ್ಷನ್ ಸೃಷ್ಟಿಸೋಣ:
+
+```javascript
+function intersectRect(r1, r2) {
+  return !(
+    r2.left > r1.right ||
+    r2.right < r1.left ||
+    r2.top > r1.bottom ||
+    r2.bottom < r1.top
+  );
+}
+```
+
+**ಈ ಅಲ್ಗೊರಿದಮ್ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದು:**
+- **ಚೌಕಗಳ ನಡುವೆ ನಾಲ್ಕು ವಿಭಜನೆ ಪರೀಕ್ಷೆಗಳನ್ನು ನಡೆಸುತ್ತದೆ**
+- **ಯಾವುದೇ ವಿಭಜನೆ ಹೌದಾದರೆ `false` ಅನ್ನು ನೀಡುತ್ತದೆ**
+- **ಯಾವುದೇ ವಿಭಜನೆ ಸತ್ಯವಲ್ಲದಿದ್ದರೆ ಘರ್ಷಣೆ ಇದ್ದಂತೆ ಸೂಚಿಸುತ್ತದೆ**
+- **ಜಂಟಿ ಪರೀಕ್ಷೆಗೆ ನೆಗೇಷನ್ ಲಾಜಿಕ್ ಬಳಸುತ್ತದೆ**
+
+#### 3. ಲೇಸರ್ ಫೈರಿಂಗ್ ವ್ಯವಸ್ಥೆ ಅನುಷ್ಠಾನ
+
+ಇಲ್ಲಿ ರೋಮಾಂಚಕಾರಿ ಭಾಗ ಇದೆ! ಲೇಸರ್ ಫೈರಿಂಗ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಸ್ಥಾಪಿಸೋಣ.
+
+##### ಸಂದೇಶ ಸ್ಥಿರಾಂಕಗಳು
+
+ಮೊದಲು, ನಮ್ಮ ಆಟದ ವಿಭಿನ್ನ ಭಾಗಗಳ ನಡುವೆ ಸಂವಹನ ಮಾಡಲು ಕೆಲವು ಸಂದೇಶ ಪ್ರಕಾರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸೋಣ:
+
+```javascript
+KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+```
+
+**ಈ ಸ್ಥಿರಾಂಕಗಳು ಒದಗಿಸುವುದು:**
+- **ನಿರಂತರ ಘಟನೆಗಳ ಹೆಸರನ್ನು ಸಾಮರಸ್ಯಗೊಳಿಸುತ್ತದೆ**
+- **ಆಟದ ವ್ಯವಸ್ಥೆಗಳ ನಡುವೆ ಸರಾಗ ಸಂವಹನವನ್ನು ಅನುಮತಿಸುತ್ತದೆ**
+- **ಘಟನೆಗಳ ನೋಂದಣಿಯಲ್ಲಿ ತಪ್ಪುಗಳನ್ನು ತಪ್ಪಿಸುತ್ತದೆ**
+
+##### ಕೀಬೋರ್ಡ್ ಇನ್‌ಪುಟ್ ನಿರ್ವಹಣೆ
+
+ನಿಮ್ಮ ಕೀ ಇವೆಂಟ್ ಲಿಸ್ನರ್‌ಗೆ ಸ್ಪೇಸ್ ಕೀ ಪತ್ತೆ ಸೇರಿಸಿ:
+
+```javascript
+} else if(evt.keyCode === 32) {
+  eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+}
+```
+
+**ಈ ಇನ್‌ಪುಟ್ ನಿರ್ವಹಣೆ:**
+- **ಕೀಕೋಡ್ 32 ಬಳಸಿ ಸ್ಪೇಸ್ ಕೀಲಿಯನ್ನು ತೋರಿಸುತ್ತದೆ**
+- **ಪ್ರಮಾಣೀಕೃತ ಘಟನೆ ಸಂದೇಶವನ್ನು ಉತ್ಸರ್ಜಿಸುತ್ತದೆ**
+- **ಡಿಕಪಲ್ ಫೈರಿಂಗ್ ಲಾಜಿಕ್‌ನ್ನು ಕಾರ್ಯಾನುಷ್ಠಾನಕ್ಕೆ ತರುವಂತೆ ಮಾಡುತ್ತದೆ**
+
+##### ಘಟನೆ ಲಿಸ್ನರ್ ನೋಂದಣಿ
+
+ನಿಮ್ಮ `initGame()` ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಫೈರಿಂಗ್ ವರ್ತನೆ ನೋಂದಣಿ ಮಾಡಿ:
+
+```javascript
+eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+ if (hero.canFire()) {
+   hero.fire();
+ }
+});
+```
+
+**ಈ ಘಟನೆ ಲಿಸ್ನರ್:**
+- **ಸ್ಪೇಸ್ ಕೀ ಘಟನೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ**
+- **ಫೈರಿಂಗ್ ಕೂಲ್ಡ್‌ಆನ್ ಸ್ಥಿತಿಯನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ**
+- **ಅನುಮತಿತಾಗುವಾಗ ಲೇಸರ್ ಸೃಷ್ಟಿಯನ್ನು ಪ್ರೇರೇಪಿಸುತ್ತದೆ**
+
+ಲೇಸರ್-ಶತ್ರು ಘರ್ಷಣೆ ನಿರ್ವಹಣೆಯನ್ನು ಸೇರಿಸಿ:
+
+```javascript
+eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+  first.dead = true;
+  second.dead = true;
+});
+```
+
+**ಈ ಘರ್ಷಣೆ ನಿಯಂತ್ರಕ:**
+- **ಎರಡು ಅಂಶಗಳ ಜೊತೆಗೆ ಘರ್ಷಣೆ ಘಟನೆ ಮಾಹಿತಿಯನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ**
+- **ಎರಡೂ ಅಂಶಗಳನ್ನು ಅಳಿಸಲು ಗುರುತಿಸುತ್ತದೆ**
+- **ಘರ್ಷಣೆ ನಂತರ ಸರಿಯಾದ ಶುದ್ಧೀಕರಣವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ**
+
+#### 4. ಲೇಸರ್ ಕ್ಲಾಸ್ ರಚಿಸಿ
+
+ಮೇಲಕ್ಕೆ ಚಲಿಸುವ ಮತ್ತು ತನ್ನ ಜೀವಚಕ್ರವನ್ನು ನಿರ್ವಹಿಸುವ ಲೇಸರ್ ಪ್ರೊಜೆಕ್ಟೈಲ್ ಅನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ:
+
+```javascript
+class Laser extends GameObject {
+  constructor(x, y) {
+    super(x, y);
+    this.width = 9;
+    this.height = 33;
+    this.type = 'Laser';
+    this.img = laserImg;
+    
+    let id = setInterval(() => {
+      if (this.y > 0) {
+        this.y -= 15;
+      } else {
+        this.dead = true;
+        clearInterval(id);
+      }
+    }, 100);
+  }
+}
+```
+
+**ಈ ಕ್ಲಾಸ್ ಅನುಷ್ಠಾನ:**
+- **GameObject ವ得ಯನ್ನು ವಿಸ್ತರಿಸಿ ಮೂಲ ಕಾರ್ಯವನ್ನು ಪಡೆದಿದೆ**
+- **ಲೇಸರ್ ಸ್ಪ್ರೈಟ್‌ಗಾಗಿ ಸೂಕ್ತ ಆಯಾಮಗಳನ್ನು ಹೊಂದಿದೆ**
+- **`setInterval()` ಬಳಸಿ ಸ್ವಯಂಚಾಲಿತ ಮೇಲ್ಗಡೆ ಚಲನೆ ಅನ್ವಯಿಸುತ್ತದೆ**
+- **ಪರದೆ ಮೇಲ್ಭಾಗ ತಲುಪಿದಾಗ ಸ್ವಯಂ-ಧ್ವಂಸಣೆ ನೇರವಾಗಿ ನಡೆಯುತ್ತದೆ**
+- **ಸ್ವಂತ ಅನಿಮೇಷನ್ ಸಮಯ ಮತ್ತು ಶುದ್ಧೀಕರಣ ನಿರ್ವಹಣೆ ಮಾಡಿದ್ದಾರೆ**
+
+#### 5. ಘರ್ಷಣೆ ಪತ್ತೆ ವ್ಯವಸ್ಥೆ ಅನುಷ್ಠಾನ
+
+ಸ್ವಯಂಚಾಲಿತ ಘರ್ಷಣೆ ಪತ್ತೆ ಕಾರ್ಯಾಚರಣೆ ರಚಿಸಿ:
+
+```javascript
+function updateGameObjects() {
+  const enemies = gameObjects.filter(go => go.type === 'Enemy');
+  const lasers = gameObjects.filter(go => go.type === "Laser");
+  
+  // ಲೇಸರ್-ಶತ್ರು ಸಂಘರ್ಷಗಳನ್ನು ಪರೀಕ್ಷಿಸು
+  lasers.forEach((laser) => {
+    enemies.forEach((enemy) => {
+      if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
+        eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+          first: laser,
+          second: enemy,
+        });
+      }
+    });
+  });
+
+  // ಹಾಳಾದ ವಸ್ತುಗಳನ್ನು ತೆಗೆದುಹಾಕು
+  gameObjects = gameObjects.filter(go => !go.dead);
+}
+```
+
+**ಈ ಘರ್ಷಣೆ ವ್ಯವಸ್ಥೆ:**
+- **ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಆಟದ ಅಂಶಗಳನ್ನು ಪ್ರಕಾರದ ಮೂಲಕ ಫಿಲ್ಟರ್ ಮಾಡುತ್ತದೆ**
+- **ಪ್ರತಿ ಲೇಸರ್ ಪ್ರತಿಯೊಂದು ಶತ್ರುಗಳ ವಿರುದ್ಧ ಮುಟ್ಟಿಕೆ ಪರಿಶೀಲನೆ ನಡೆಸುತ್ತದೆ**
+- **ಘರ್ಷಣೆ ಕಂಡುಬಂದಾಗ ಘಟನೆಗಳನ್ನು ಉತ್ಸರ್ಜಿಸುತ್ತದೆ**
+- **ಘರ್ಷಣೆಯ ಬಳಿಕ ಹಾಳಾಗಿದ ಅಂಶಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ**
+
+> ⚠️ **ಅತ್ಯಂತ ಮುಖ್ಯ**: ಘರ್ಷಣೆ ಪತ್ತೆ ಮಾಡಲು `updateGameObjects()` ಅನ್ನು ನಿಮ್ಮ ಮುಖ್ಯ ಗೇಮ್ ಲೂಪಿಗೆ `window.onload`ನಲ್ಲಿ ಸೇರಿಸಿ.
+
+#### 6. ಹೀರೋ ಕ್ಲಾಸ್‌ಗೆ ಕೂಲ್ಡ್‌ಆನ್ ವ್ಯವಸ್ಥೆ ಸೇರಿಸಿ
+
+ಹೀರೋ ಕ್ಲಾಸ್ ಅನ್ನು ಫೈರಿಂಗ್ ಮೆಕ್ಯಾನಿಕ್ಸ್ ಮತ್ತು ದರ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಅಭಿವೃದ್ಧಿಪಡಿಸಿ:
+
+```javascript
+class Hero extends GameObject {
+  constructor(x, y) {
+    super(x, y);
+    this.width = 99;
+    this.height = 75;
+    this.type = "Hero";
+    this.speed = { x: 0, y: 0 };
+    this.cooldown = 0;
+  }
+  
+  fire() {
+    gameObjects.push(new Laser(this.x + 45, this.y - 10));
+    this.cooldown = 500;
+
+    let id = setInterval(() => {
+      if (this.cooldown > 0) {
+        this.cooldown -= 100;
+      } else {
+        clearInterval(id);
+      }
+    }, 200);
+  }
+  
+  canFire() {
+    return this.cooldown === 0;
+  }
+}
+```
+
+**ಬೆಳೆಸಲಾದ ಹೀರೋ ಕ್ಲಾಸ್ ವಿವರ:**
+- **ಶೂನ್ಯದಿಂದ ಕೂಲ್ಡ್‌ಆನ್ ಟೈಮರ್ ಆರಂಭಿಸುತ್ತದೆ (ತಕ್ಷಣ ಫೈರ್ ಮಾಡಲು ಸಿದ್ಧ)**
+- **ಲೇಸರ್ ವಸ್ತುಗಳನ್ನು ಹೀರೋ ನೌಕೆಯ ಮೇಲೆ ಸೃಷ್ಟಿಸುತ್ತದೆ**
+- **ವೇಗವಾಗಿ ಫೈರ್ ಮಾಡುವುದನ್ನು ತಡೆಯಲು ಕೂಲ್ಡ್‌ಆನ್ ಅವಧಿ ನಿಗದಿಗೊಳಿಸಲಾಗಿದೆ**
+- **ಅಂತರಾಲ ಆಧಾರಿತ ಅಪ್‌ಡೇಟ್ಗಳ ಮೂಲಕ ಕೂಲ್ಡ್‌ಆನ್ ಟೈಮರ್ ಇಳಿಸಿಕೊಳ್ಳುತ್ತದೆ**
+- **`canFire()` ವಿಧಾನದಿಂದ ಫೈರಿಂಗ್ ಸ್ಥಿತಿ ಪರಿಶೀಲನೆ ಒದಗಿಸುತ್ತದೆ**
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಪೂರ್ಣ ವ್ಯವಸ್ಥೆ ಅರಿವು:** ಘರ್ಷಣೆ ವ್ಯವಸ್ಥೆ ಬಗ್ಗೆ ನಿಮ್ಮ ನಿಪುಣತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಚೌಕ ಅಂಚುಗಳು ಘರ್ಷಣೆ ಪತ್ತೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೇಗೆ ಮಾಡುತ್ತದೆ?
+- ✅ ಆಟದ ಸ್ಥಿರತೆಯಿಗಾಗಿ ಅಂಶಗಳ ಜೀವಚಕ್ರ ನಿರ್ವಹಣೆ ಬೇಕಾದ್ದೇಕೆ?
+- ✅ ಕೂಲ್ಡ್‌ಆನ್ ವ್ಯವಸ್ಥೆಯು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಹೇಗೆ ತಡೆಯುತ್ತದೆ?
+- ✅ ಘಟನಾಚಾಲಿತ ವ್ಯಾಸ್ಥೆಯು ಘರ್ಷಣೆ ನಿರ್ವಹಣೆಯಲ್ಲಿ ಯಾವ ಪಾತ್ರ ವಹಿಸುತ್ತದೆ?
+
+**ವ್ಯವಸ್ಥೆಯ ಸಂಯೋಜನೆ:** ನಿಮ್ಮ ಘರ್ಷಣೆ ಪತ್ತೆ ತೋರಿಸುತ್ತದೆ:
+- **ಗಣಿತ ನಿಖರತೆ**: ಚೌಕ ಮುಟ್ಟಿಕೆ ಆಲ್ಗೊರಿದಮ್‌ಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಏರಿಕೆ**: ಪರಿಣಾಮಕಾರಿ ಘರ್ಷಣೆ ಪರೀಕ್ಷಾ ಮಾದರಿಗಳು
+- **ಮೆಮೊರಿ ನಿರ್ವಹಣೆ**: ಸುರಕ್ಷಿತ ಅಂಶ ಸೃಷ್ಟಿ ಮತ್ತು ವಿನಾಶ
+- **ಘಟನೆ ಸಂಯೋಜನೆ**: ವಿಭಜಿತ ವ್ಯವಸ್ಥೆಯ ಸಂವಹನ
+- **ತಕ್ಷಣದ ಪ್ರಕ್ರಿಯೆ**: ಫ್ರೇಮ್ ಆಧಾರಿತ ಅಪ್ಡೆಟ್ ಸೈಕಲ್‌ಗಳು
+
+**ವೃತ್ತಿಪರ ಮಾದರಿಗಳು**: ನೀವು ಅನುಷ್ಠಾನ ಮಾಡಿರುವುದು:
+- **ಸ್ವತಂತ್ರ ಕರ್ತವ್ಯ ವಿಂಗಡಣೆ**: ಭೌತಶಾಸ್ತ್ರ, ರೆಂಡರಿಂಗ್ ಮತ್ತು ಇನ್‌ಪುಟ್ ವಿಭಜನೆ
+- **ಒಬ್ಜೆಕ್ಟ್ ಆರೆಂಟೆಡ್ ವಿನ್ಯಾಸ**: ಹೇರಿಕೆ ಮತ್ತು ಬಹುರೂಪತಾಂಶ
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಅಂಶಗಳ ಜೀವಚಕ್ರ ಮತ್ತು ಆಟದ ಸ್ಥಿತಿಯ ಟ್ರ್ಯಾಕಿಂಗ್
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಏರಿಕೆ**: ಸಮಯ ಪ್ರಾಯೋಗಿಕ ವ್ಯವಹಾರಗಳಿಗೆ ಪರಿಣಾಮಕಾರಿ ಅಲ್ಗೊರಿದಮ್
+
+### ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಪರೀಕ್ಷಿಸುವುದು
+
+ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮ್ ಈಗ ಸಂಪೂರ್ಣ ಘರ್ಷಣೆ ಪತ್ತೆ ಮತ್ತು ಹೋರಾಟ ಕ್ರಿಯೆಗಳನ್ನು ಹೊಂದಿದೆ. 🚀 ಈ ಹೊಸ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ:
+- **ಅರೋ ಹುರುಹು ಮೂರು ಬಾಣಗಳಲ್ಲಿ ಹಾರಾಡಿ** ಚಲನೆ ನಿಯಂತ್ರಣ ಪರಿಶೀಲಿಸಲು 
+- **ಸ್ಪೇಸ್ ಬಾರ್ ಬಳಸಿ ಲೇಸರ್ ಹೊಡೆದು** - ಕೂಲ್ಡ್‌ಆನ್ ಸ್ಪಾಮ್ ಕ್ಲಿಕ್ಕಿಂಗ್ ತಡೆಯುವುದನ್ನು ಗಮನಿಸಿ
+- **ಲೇಸರ್ ಗಳು ಶತ್ರುಗಳನ್ನು ಹೊಡೆದಾಗ ಘರ್ಷಣೆಗಳನ್ನು ಗಮನಿಸಿ, ನಾಶಗೊಂಡ ಅಂಶಗಳ ತೆಗೆಯಲಾಗುತ್ತದೆ**
+- **ನಾಶವಾದ ಅಂಶಗಳು ಆಟದಿಂದ ಅಳಿತವಾಗುವಂತೆ ಪರಿಶೀಲನೆ ಮಾಡಿ**
+
+ನೀವು ಸ್ಥಿತಿಸ್ಥಾಪಕ ನೌಕಾ ಸಂಚಾರ ಹಾಗೂ ರೋಬೋಟಿಕ್ಸ್ ಮಾರ್ಗದರ್ಶನ ಮಾಡುವ गणಿತಾ ಸಿದ್ಧಾಂತಗಳನ್ನೇ ಬಳಸಿ ಘರ್ಷಣೆ ಪತ್ತೆಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಅನುಷ್ಠಾನಗೊಳಿಸಿದ್ದೀರಿ.
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು**
+- [ ] ಬ್ರೌಸರ್ ಡೆವ್‌ಟೂಲ್‌ಗಳನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ಘರ್ಷಣೆ ಪತ್ತೆ ಕಾರ್ಯದಲ್ಲಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಸೆಟ್ ಮಾಡಿ
+- [ ] ಲೇಸರ್ ವೇಗ ಅಥವಾ ಶತ್ರು ಚಲನೆ ಬದಲಾಯಿಸಿ ಘರ್ಷಣೆ ಪರಿಣಾಮಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ
+- [ ] ವಿವಿಧ ಕೂಲ್ಡ್‌ಆನ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಪ್ರಾಯೋಗಿಕವಾಗಿ ಫೈರಿಂಗ್ ದರಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ
+- [ ] συγκεντρώστε `console.log` δηλώσεις για την παρακολούθηση συμβάντων σύγκρουσης σε πραγματικό χρόνο
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದವುಗಳು**
+- [ ] ಪಾಠದ ನಂತರದ ಕ್ವಿಜ್ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಘರ್ಷಣಾ ಪತ್ತಿಗೊಳಿಸುವ ಆಲ್ಗೋರಿದಮ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ಘರ್ಷಣೆಗಳು ಸಂಭವಿಸಿದಾಗ ಸ್ಫೋಟಗಳಂತಹ ವಿಸ್ವಲ್ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ವಿಭಿನ್ನ ಗುಣಗಳಿರುವ ವಿವಿಧ ಬాణಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ತಾತ್ಕಾಲಿಕವಾಗಿ ಆಟಗಾರನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಹೆಚ್ಚಿಸುವ ಫಲಿತಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಘರ್ಷಣೆಗಳು ಹೆಚ್ಚು ತೃಪ್ತಿದಾಯಕವಾಗಲು ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ದೀರ್ಘ physiccs ಪ್ರೋಗ್ರಾಮಿಂಗ್**
+- [ ] ಮೃದುವಾದ ಘರ್ಷಣೆ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಸ್ಪೇಸ್ ಗೇಮ್ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಆಯತಾಕಾರದ ಹೊರತಾಗಿ ಮುಕುಟ, ಬಹುಭುಜಾಕಾರಗಳಂತಹ ಉನ್ನತ ಘರ್ಷಣೆ ಆಕಾರಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ವಾಸ್ತವ ಸ್ಫೋಟ ಪರಿಣಾಮಗಳಿಗೆ ಕಣಗಳ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಘರ್ಷಣೆ ತಪ್ಪಿಸುವ ಸಂಕೀರ್ಣ ಶತ್ರು ವರ್ತನೆ ರಚಿಸಿ
+- [ ] ಅನೇಕ ವಸ್ತುಗಳೊಂದಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯನ್ನ ಅಧಿಕೃತಗೊಳಿಸಿ
+- [ ] ಭೌತಶಾಸ್ತ್ರದ ಅನುಕರಣೆಗಳನ್ನು ಸಂವೇಗ ಮತ್ತು ವಾಸ್ತವ ಚಲನವಲನದಂತೆ ಸೇರಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ದೀರ್ಘ ಆಟದ ಭೌತಶಾಸ್ತ್ರ ಮಾಸ್ಟರಿ**
+- [ ] ಉನ್ನತ ಭೌತಶಾಸ್ತ್ರ ಎಂಜಿನ್‌ಗಳು ಮತ್ತು ವಾಸ್ತವ ಅನುಕರಣೆಗಳೊಂದಿಗೆ ಆಟಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] 3D ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ ಮತ್ತು ಆಂತರಿಕ ಭಾಗ ವಿಂಗಡಣಾ ಆಲ್ಗೋರಿದಮ್‌ಗಳನ್ನು ಕಲಿಯಿರಿ
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ ಭೌತಶಾಸ್ತ್ರ ಗ್ರಂಥಾಲಯಗಳ ಮತ್ತು ಆಟದ ಎಂಜಿನ್‌ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿರಿ
+- [ ] ಗಷ್ಟಗ್ರಾಫಿಕ್ಸ್-ಸಂಬಂಧಿತ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆಗೆ ಮಾಸ್ಟರಿ
+- [ ] ಆಟದ ಭೌತಶಾಸ್ತ್ರ ಮತ್ತು ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯ ಕುರಿತಾಗಿ ಶೈಕ್ಷಣಿಕ ವಿಷಯವನ್ನು ರಚಿಸಿ
+- [ ] ಉನ್ನತ ಭೌತಶಾಸ್ತ್ರ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಕೌಶಲ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಪೋರ್ಟ್‌ಫೋಲಿಯೊ ನಿರ್ಮಿಸಿ
+
+## 🎯 ನಿಮ್ಮ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯ ಮಾಸ್ಟರಿ ಟೈಮ್‌ಲೈನ್
+
+```mermaid
+timeline
+    title ಸಂಘರ್ಷ ಪತ್ತೆ & ಆಟದ ಭೌತಶಾಸ್ತ್ರ ಕಲಿಕೆ ಪ್ರಗತಿ
+    
+    section alapbhoota (10 minutes)
+        ಆವತರಣಿಕೆ ಗಣಿತ: ಸಂಯೋಜನೆಯ ವ್ಯವಸ್ಥೆಗಳು
+                      : ಗಡಿ ಲೆಕ್ಕಾಚಾರಗಳು
+                      : ಸ್ಥಾನ ಟ್ರ್ಯಾಕಿಂಗ್
+                      : ಆಯಾಮ ನಿರ್ವಹಣೆ
+        
+    section ಅಲ್ಗೋರಿದಮ್ ವಿನ್ಯಾಸ (20 minutes)
+        ಅಂತರಂಗ ಲಾಜಿಕ: ವಿಭಜನೆ ಪರೀಕ್ಷೆ
+                          : ಮೇಲ್ದಡ ಪರಿಶೀಲನೆ
+                          : ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ
+                          : ಅರೆಗಿನ ಪ್ರಕರಣ ನಿರ್ವಹಣೆ
+        
+    section ಆಟದ ಅಳವಡಿಕೆ (30 minutes)
+        ವಸ್ತು ವ್ಯವಸ್ಥೆಗಳು: ಜೀವನಚರಿತ್ರೆ ನಿರ್ವಹಣೆ
+                      : ಘಟನೆ ಸಂಯೋಜನೆ
+                      : ಸ್ಥಿತಿ ಟ್ರ್ಯಾಕಿಂಗ್
+                      : ಮೆಮೊರಿ ಶೋಧನೆ
+        
+    section ಸಂವಹನಾತ್ಮಕ ವೈಶಿಷ್ಟ್ಯಗಳು (40 minutes)
+        ಯುದ್ಧ ರಚನೆಗಳು: ಪ್ರಕ್ಷೇಪಣೆ ವ್ಯವಸ್ಥೆಗಳು
+                        : ಆಯುಧ ತಂಪಾಗುವಿಕೆ
+                        : ಹಾನಿ ಲೆಕ್ಕಾಚಾರ
+                        : ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ
+        
+    section ಉನ್ನತ ಭೌತಶಾಸ್ತ್ರ (50 minutes)
+        ರಿಯಲ್-ಟೈಮ್ ವ್ಯವಸ್ಥೆಗಳು: ಫ್ರೇಮ್ ದರ ಸುಧಾರಣೆ
+                         : ಸ್ಥಳೀಯ ವಿಭಜನೆ
+                         : ಸಂಘರ್ಷ ಪ್ರತಿಕ್ರಿಯೆ
+                         : ಭೌತಶಾಸ್ತ್ರ ಅನುಕರಣೆ
+        
+    section ವೃತ್ತಿಪರ ತಂತ್ರಗಳು (1 week)
+        ಆಟದ ಎಂಜಿನ್ ಕಲ್ಪನೆಗಳು: ഘಟಕ ವ್ಯವಸ್ಥೆಗಳು
+                             : ಭೌತಶಾಸ್ತ್ರ ಪೈಪ್ಲೈನ್‌ಗಳು
+                             : ಕಾರ್ಯಕ್ಷಮತೆ ವಿಶ್ಲೇಷಣೆ
+                             : ಕ್ರಾಸ್-ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಸುಧಾರಣೆ
+        
+    section ಕೈಗಾರಿಕಾ ಅನ್ವಯಿಕೆಗಳು (1 month)
+        ಉತ್ಪಾದನಾ ಕೌಶಲ್ಯಗಳು: ದೊಡ್ಡ ಪ್ರಮಾಣದ ಸುಧಾರಣೆ
+                         : ತಂಡ ಸಹಕಾರ
+                         : ಎಂಜಿನ್ ಅಭಿವೃದ್ಧಿ
+                         : ವೇದಿಕೆ ನಿಯೋಜನೆ
+```
+### 🛠️ ನಿಮ್ಮ ಆಟದ ಭೌತಶಾಸ್ತ್ರ ಕಾರ್ಯಗಳ ಸಂಕ್ಷೇಪ
+
+ಈ ಪಾಠ ಪೂರ್ಣಗೊಳ್ಳಿದ ನಂತರ, ನೀವು ಈಗ ಆಯ್ನಿತಾದಂತಿದ್ದೀರಿ:
+- **ಘರ್ಷಣೆ ಗಣಿತ**: ಆಯತಗಳ ಆಂತರಿಕ್ಷ ಆಲ್ಗೋರಿದಮ್‌ಗಳು ಮತ್ತು ಸಂಯೋಜನಾ ವ್ಯವಸ್ಥೆಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ**: ನೈತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಪರಿಣಾಮಕಾರಿ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ
+- **ವಸ್ತುವಿನ ಜೀವನಚಕ್ರ ನಿರ್ವಹಣೆ**: ಸುರಕ್ಷಿತ ಸೃಷ್ಟಿ, ನವೀಕರಣೆ ಮತ್ತು ನಾಶಪಡಿಸುವ ಮಾದರಿಗಳು
+- **ಕಾರ್ಯಕ್ರಮ-ಚಾಲಿತ ವಾಸ್ತುಶಿಲ್ಪ**: ಘರ್ಷಣೆ ಪ್ರತಿಕ್ರಿಯೆಗಾಗಿ ವಿಭಜಿತ ವ್ಯವಸ್ಥೆಗಳು
+- **ಆಟದ ಲೂಪ್ ಸಮ್ಮಿಲನ**: ಫ್ರೇಮ್ ಆಧಾರಿತ ಭೌತಶಾಸ್ತ್ರ ನವೀಕರಣ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಸಂಯೋಜನೆ
+- **ಇನ್ಪುಟ್ ವ್ಯವಸ್ಥೆಗಳು**: ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನಿಯಂತ್ರಣಗಳು ದರ ಲಿಮಿಟಿಂಗ್ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ
+- **ಮೆಮೊರಿ ನಿರ್ವಹಣೆ**: ಸಮರ್ಥ ವಸ್ತು ಪೂಲಿಂಗ್ ಮತ್ತು ಶುಚಿಗೊಳಿಸುವ ತಂತ್ರಗಳು
+
+**ವಾಸ್ತವಿಕ ಅನ್ವಯಿಕೆಗಳು**: ನಿಮ್ಮ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ ಕೌಶಲ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯವಾಗುತ್ತವೆ:
+- **ಪರಸ್ಪರ ಸಂಘಟಿತ ಅನುಕರಣೆಗಳು**: ವೈಜ್ಞಾನಿಕ ಮಾದರೀಕರಣ ಮತ್ತು ಶೈಕ್ಷಣಿಕ ಸಾಧನಗಳು
+- **ಬಳಕೆದಾರ ಮುಖಪುಟ ವಿನ್ಯಾಸ**: ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರಾಪ್ ಸಂವಹನಗಳು ಮತ್ತು ಸ್ಪರ್ಶ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ
+- **ದತ್ತಾ ದೃಶ್ಯೀಕರಣ**: ಪರಸ್ಪರ ಸಂವಹನ ಚಾರ್ಟ್‌ಗಳು ಮತ್ತು ಕ್ಲಿಕ್ಕಬಹುದಾದ ಅಂಶಗಳು
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ಸ್ಪರ್ಶ ಭಾವ ಸಂವೇದನೆ ಮತ್ತು ಘರ್ಷಣೆ ಕುೖಶಲ್ಯ ನಿರ್ವಹಣೆ
+- **ರೋಬೋಟಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಮಾರ್ಗ ನಿರ್ವಹಣೆ ಮತ್ತು ಅಡೆತಡೆ ತಪ್ಪಿಸುವಿಕೆ
+- **ಕಂಪ್ಯೂಟರ್ ಗ್ರಾಫಿಕ್ಸ್**: ರೇ ಟ್ರೇಸಿಂಗ್ ಮತ್ತು ಸ್ಥಳ ಆಲ್ಗೋರಿದಮ್‌ಗಳು
+
+**ವ್ಯವಹಾರ ಕೌಶಲ್ಯಗಳು ಪಡೆದವು**: ನೀವು ಈಗ ಮಾಡಬಹುದು:
+- **ರಚಿಸಿ** ನೈತಿಕ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯ ಸಮರ್ಥ ಆಲ್ಗೋರಿದಮ್‌ಗಳು
+- **ಅನುಷ್ಠಾನಗೊಳಿಸಿ** ವಸ್ತು ಸಂಕೀರ್ಣತೆಗೂ ಹೊಂದಿಕೊಳ್ಳುವ ಭೌತಶಾಸ್ತ್ರ ವ್ಯವಸ್ಥೆಗಳು
+- **ದೋಷ ನಿವಾರಣಾ** ಗಣಿತೀಯ ತತ್ವಗಳನ್ನು ಬಳಸಿ ನಿಖರ ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ವ್ಯವಸ್ಥೆಗಳನ್ನು
+- **ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಿ** ವಿಭಿನ್ನ ಹಾರ್ಡ್ವೇರ್ ಮತ್ತು ಬ್ರೌಸರ್ ಸಾಮರ್ಥ್ಯಗಳಿಗೆ
+- **ವಾಸ್ತುಶಿಲ್ಪದ** ನಿರ್ವಹಿಸಬಹುದಾದ ಆಟದ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸಾಬೀತು ಮಾಡಿದ ವಿನ್ಯಾಸ ಮಾದರಿಗಳನ್ನು ಬಳಸಿ
+
+**ಆಟೆಯಲ್ಲಿ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಕಲ್ಪನೆಗಳು**:
+- **ಭೌತಶಾಸ್ತ್ರ ಅನುಕರಣೆ**: ನೈತಿಕ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆ
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಇಂಜೀನಿಯರಿಂಗ್**: ಪರಸ್ಪರ ಸಂವಹನ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ತ್ವರಿತ ಆಲ್ಗೋರಿದಮ್‌ಗಳು
+- **ಕಾರ್ಯಕ್ರಮ ವ್ಯವಸ್ಥೆಗಳು**: ಆಟದ ಘಟಕಗಳ ನಡುವಿನ ವಿಭಜಿತ ಸಂವಹನ
+- **ವಸ್ತು ನಿರ್ವಹಣೆ**: গতಿಶೀಲ ವಿಷಯಗಳ ಸಮರ್ಥ ಜೀವನಚಕ್ರ ಮಾದರಿಗಳು
+- **ಇನ್ಪುಟ್ ನಿರ್ವಹಣೆ**: ಸೂಕ್ತ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನಿಯಂತ್ರಣಗಳು
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು Matter.js ಮುಂತಾದ ಉನ್ನತ ಭೌತಶಾಸ್ತ್ರ ಎಂಜಿನ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸಲು, 3D ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ ಅಥವಾ ಸಂಕೀರ್ಣ ಕಣ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಿದ್ಧರಿದ್ದೀರಿ!
+
+🌟 **ಸಾಧನೆ ಪ್ರದರ್ಶಿಸಲಾಗಿದೆ**: ನೀವು ವೃತ್ತಿಪರ ಮಟ್ಟದ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯನ್ನು ಹೊಂದಿರುವ ಸಂಪೂರ್ಣ ಭೌತಶಾಸ್ತ್ರ ಆಧಾರದ ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿದ್ದೀರಿ!
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಈ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ಕೈಮುಗಿಯುವ ಹೀರೋ ಹಡಗಿನಿಂದ ಸಂಗ್ರಹಿಸಿದಾಗ ತಾತ್ಕಾಲಿಕ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಒದಗಿಸುವಂತೆ ಯಾದೃಚ್ಛಿಕವಾಗಿ ಹುಟ್ಟುವ ಫಲಿತಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವ ಮೂಲಕ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವ ವ್ಯವಸ್ಥೆಯನ್ನು ವೃದ್ಧಿಪಡಿಸಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** GameObject ಅನ್ನು ವಿಸ್ತರಿಸುವ PowerUp ವರ್ಗವನ್ನು ರಚಿಸಿ ಮತ್ತು ಹೀರೋ ಮತ್ತು ಫಲಿತಗಳ ನಡುವಿನ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ. ಕನಿಷ್ಠ ಎರಡು ವಿಧದ ಫಲಿತಗಳನ್ನು ಸೇರಿಸಿ: ಒಂದು ಫೈರ್ ರೇಟ್ (ಕೂಲ್ಡೌನ್ ಕಡಿಮೆಮಾಡುತ್ತದೆ) ಹೆಚ್ಚಿಸುವುದು, ಮತ್ತೊಂದು ತಾತ್ಕಾಲಿಕ ಷೀಲ್ಡ್ ರಚಿಸುವುದು. ಯಾದೃಚ್ಛಿಕ ಅಂತರ ಮತ್ತು ಸ್ಥಾನಗಳಲ್ಲಿ ಫಲಿತಗಳ ಉತ್ಪತ್ತಿ ತರ್ಕವನ್ನು ಸೇರಿಸಿ.
+
+---
+
+
+
+## 🚀 ಸವಾಲು
+
+ಸ್ಫೋಟವನ್ನು ಸೇರಿಸಿ! [Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt)ದಲ್ಲಿರುವ ಆಟದ ಅದೃಶ್ಯಗಳನ್ನು ನೋಡಿ ಮತ್ತು ಲೇಸರ್ ವಿದೇಶಿ ಮೇಲೆ ಹೊಡೆತ ಹೊಡೆಯಿದಾಗ ಸ್ಫೋಟವನ್ನು ಸೇರಿಸಲು ಪ್ರಯತ್ನಿಸಿ
+
+## ಪಾಠೋತ್ತರ ಕ್ವಿಜ್
+
+[ಪಾಠೋತ್ತರ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/36)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+ನೀವು ಈಗವರೆಗೆ ನಿಮ್ಮ ಆಟದಲ್ಲಿ ಅಂತರಗಳನ್ನು ಪ್ರಯೋಗ ಮಾಡಿ ನೋಡಿ. ಅವು ಬದಲಾಗಿಸಿದಾಗ ಏನಾಗುತ್ತದೆ? [ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಟೈಮಿಂಗ್ ಈವೆಂತ್‌ಗಳು](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) ಬಗ್ಗೆ ಹೆಚ್ಚಿನವರನ್ನು ಓದಿ.
+
+## ಕಾರ್ಯ
+
+[ಘರ್ಷಣೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿರಾಕರಣೆ**:
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ಖಚಿತತೆಯತ್ತ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ ಸಹ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರದಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯ ದಸ್ತಾವೇಜು ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರವನ್ನು ಬಳಸದಿಂದಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥವಿನ್ನೂ ಗಡಿಪಾರುತೆಯ ಕುರಿತಾದ ಜವಾಬ್ದಾರಿಯನ್ನು ನಾವು ಸ್ವೀಕರಿಸುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/4-collision-detection/assignment.md

@@ -0,0 +1,64 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "124efddbb65166cddb38075ad6dae324",
+  "translation_date": "2026-01-08T13:37:17+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಅಪಘಾತಗಳ ಅನ್ವೇಷಣೆ
+
+## ನಿರ್ದೇಶನಗಳು
+
+ವಿಭಿನ್ನ ರೀತಿಯ ವಸ್ತು ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕಸ್ಟಮ್ ಮಿನಿ-ಗೇಮ್ ರಚಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅಪಘಾತ ಪತ್ತೆಮಾಡುವ ಜ್ಞಾನವನ್ನು ಅನ್ವಯಿಸಿ. ಈ ಹುದ್ದೆ ರಚನಾತ್ಮಕ ಅನುಷ್ಠಾನ ಮತ್ತು ಪ್ರಯೋಗಾಮೃತಿಕೆಯಿಂದ ಅಪಘಾತ ಯಾಂತ್ರಿಕತೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+### ಯೋಜನೆ ಅವಶ್ಯಕತೆಗಳು
+
+**ಇವುಗಳನ್ನು ಹೊಂದಿರುವ ಸಣ್ಣ ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಆಟವನ್ನು ರಚಿಸಿ:**
+- **ಮಲ್ಟಿಪಲ್ ಚಲಿಸುವ ವಸ್ತುಗಳು** ಕೀಬೋರ್ಡ್ ಅಥವಾ ಮೌಸ್ ಇನ್ಪುಟ್ ಮೂಲಕ ನಿಯಂತ್ರಿಸಬಹುದಾಗಿರಬೇಕು
+- ಪಾಠದಿಂದ ಪಡೆದ ಛಲದ ಮಧ್ಯೆ ಹರಡುವದಾರಿತನ ನಿಯಮಗಳನ್ನು ಬಳಸಿ **ಅಪಘಾತ ಪತ್ತೆ ವ್ಯವಸ್ಥೆ**
+- ಅಪಘಾತಗಳು ಸಂಭವಿಸುವಾಗ ಗೋಚರಿಸುವ **ದೃಶ್ಯ ಸ್ಪಂದನೆ** (ವಸ್ತು ನಾಶ, ಬಣ್ಣ ಬದಲಾವಣೆ, ಪರಿಣಾಮಗಳು)
+- ಅಪಘಾತಗಳನ್ನು ಅರ್ಥಪೂರ್ಣ ಮತ್ತು ಮನರಂಜಕ ಮಾಡಿಸುವ **ಆಟ ನಿಯಮಗಳು**
+
+### ಸೃಜನಶೀಲ ಸಲಹೆಗಳು
+
+**ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ ಒಂದನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ:**
+- **ಅಸ್ಟೆರಾಯ್ಡ್ ಫೀಲ್ಡ್**: ಹಾನಿಕರ ಕಡೆಗಿಂತಲೂ ಬಿಗಿಯಾದ ಅಂತರಿಕ್ಷ ನಿರ್ವಹಿಸಲು ಹಡಗು ಸಾಗಿಸು
+- **ಬಂಪರ್ ಕಾರ್ಸ್**: ಭೌತಶಾಸ್ತ್ರ ಆಧಾರಿತ ಅಪಘಾತ ಇನ್ನಿತರರಂಗ ನಿರ್ಮಿಸು
+- **ಮೀಟಿಯೋರ್ ರಕ್ಷಣೆ**: ಭೂಮಿಯನ್ನು ಬರುವ ಅಂತರಿಕ್ಷ ಕಲ್ಲುಗಳಿಂದ ರಕ್ಷಿಸು
+- **ಸಂಗ್ರಹ ಆಟ**: ಅಡೆತಡೆಗಳನ್ನು ದೂರದಿಂದ ವಸ್ತುಗಳನ್ನು ಜನಿಸಿ
+- **ಪ್ರದೇಶ ನಿಯಂತ್ರಣ**: ಸ್ಥಳವನ್ನು ಸ್ವಾಧೀನ ಮಾಡಿಕೊಳ್ಳಲು ಸ್ಪರ್ಧಿಸುವ ವಸ್ತುಗಳು
+
+### ತಾಂತ್ರಿಕ ಅನುಷ್ಠಾನ
+
+**ನಿಮ್ಮ ಪರಿಹಾರವು ಪ್ರದರ್ಶಿಸಬೇಕು:**
+- ಸರಿಯಾದ ಅರ್ಧಶೀಲ ಆಧಾರಿತ ಅಪಘಾತ ಪತ್ತೆಮಾಡುವ ತಂತ್ರವನ್ನು ಬಳಸಿಕೊಳ್ಳುವಿಕೆ
+- ಬಳಕೆದಾರ ಇನ್ಪುಟ್‌ಗಾಗಿ ಘಟನೆ ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್
+- ವಸ್ತುಗಳ ಆಯುಷ್ಯಚಕ್ರ ನಿರ್ವಹಣೆ (ರಚನೆ ಮತ್ತು ನಾಶ)
+- ಸೂಕ್ತ ವರ್ಗ ರಚನೆಯೊಂದಿಗೆ ಶುದ್ಧ ಕೋಡ್ ಸಂಘಟನೆ
+
+### ಬೋನಸ್ ಸವಾಲುಗಳು
+
+**ಹೆಚ್ಚುವರಿ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಆಟವನ್ನು ಮಾದರಿ ಮಾಡಿರಿ:**
+- ಅಪಘಾತ ಸಂಭವಿಸಿದಾಗ **ಕಣಗಳ ಪರಿಣಾಮಗಳು**
+- ವಿಭಿನ್ನ ಅಪಘಾತ ಪ್ರಕಾರಗಳಿಗೆ **ಧ್ವನಿ ಪರಿಣಾಮಗಳು**
+- ಅಪಘಾತ ಫಲಿತಾಂಶಗಳ ಆಧಾರದಲ್ಲಿ **ಸ್ಕೋರ್ ವ್ಯವಸ್ಥೆ**
+- ವಿಭಿನ್ನ ವರ್ತನೆಗಳೊಂದಿಗೆ **ಬರಹದ ಅಪಘಾತ ಪ್ರಕಾರಗಳು**
+- ಸಮಯಕ್ಕೆ ತಕ್ಕಂತೆ ಹೆಚ್ಚುವ **ಪ್ರಗತಿಶೀಲ ಕಷ್ಟಮಾನಗಳು**
+
+## ಮೌಲ್ಯಮಾಪನ ಕಡತ
+
+| ಕ್ರಮಿಕ ಕಾರ್ಯ | ಮಾದರಿಯಾಗಿರುವುದು | ಸೂಕ್ತ | ಸುಧಾರಣೆ ಅಗತ್ಯವಿದೆ |
+|-------------|-----------------|--------|---------------------|
+| **ಅಪಘಾತ ಪತ್ತೆ** | ಮಲ್ಟಿಪಲ್ ವಸ್ತು ಪ್ರಕಾರಗಳು ಮತ್ತು ಸುಲಭ ಪರಸ್ಪರ ಕ್ರಿಯೆ ನಿಯಮಗಳೊಂದಿಗೆ ನಿಖರ ಅರ್ಧಶೀಲ ಆಧಾರಿತ ಅಪಘಾತ ಪತ್ತೆ | ಸರಳ ವಸ್ತು ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಮೂಲ ಅಪಘಾತ ಪತ್ತೆ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ | ಅಪಘಾತ ಪತ್ತೆ ಸಮಸ್ಯೆಗಳಿವೆ ಅಥವಾ ಸತತವಾಗಿ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಸರಿಯಾಗಿ ವರ್ಗ ರಚನೆಯೊಂದಿಗೆ ಶುದ್ಧ, ಸುಗಮವಾದ ಕೋಡ್, ಅರ್ಥಪೂರ್ಣ ಚರಗಳ ಹೆಸರುಗಳು ಮತ್ತು ಸೂಕ್ತ ಟಿಪ್ಪಣಿಗಳು | ಕೋಡ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಆದರೆ ಉತ್ತಮವಾಗಿ ಸಂಘಟಿಸಲ್ಪಡಬಹುದು ಅಥವಾ ದಾಖಲಾಗಬಹುದಾಗಿರುತ್ತದೆ | ಕೋಡ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟಕರ ಅಥವಾ ದುರ್ಬಳಕೆ ಹೊಂದಿದೆ |
+| **ಬಳಕೆದಾರ ಪರಸ್ಪರ ಕ್ರಿಯೆ** | ಸಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನಿಯಂತ್ರಣಗಳು, ಮೃದುವಾಗಿಯೂ ಗತಿಯಲ್ಲಿಯೂ ಆಟ, ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಸ್ಪಂದನೆ ಮತ್ತು ಮನರಂಜಕ ಯಂತ್ರಗಳು | ಮೂಲ ನಿಯಂತ್ರಣಗಳು ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ | ನಿಯಂತ್ರಣಗಳು ಪ್ರತಿಕ್ರಿಯಿಸದಿರುವುದು ಅಥವಾ ಗೊಂದಲ ಉಂಟುಮಾಡುವವು |
+| **ಸೃಜನಶೀಲತೆ** | ವಿಶೇಷ ವೈಶಿಷ್ಟ್ಯಗಳು, ದೃಶ್ಯ ಮಳೆ, ನವೀನ ಅಪಘಾತ ವರ್ತನೆಗಳೊಂದಿಗೆ ಮೂಲ ಕಲ್ಪನೆ | ಕೆಲವು ಸೃಜನಶೀಲ ಅಂಶಗಳೊಂದಿಗೆ ಸಾಮಾನ್ಯ ಅನುಷ್ಠಾನ | ಸೃಜನಶೀಲ ವೃದ್ಧಿಯಿಲ್ಲದ ಮೂಲ ಕಾರ್ಯಕ್ಷಮತೆ |
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಜ್ಯಕತೆ**:
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಾದಕ್ಕಾಗಿ ಪ್ರಯತ್ನಿಸುವುದಾದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದೆಂದು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯ ದಸ್ತಾವೇಜು ಮೂಲ ಮಾದರಿಯಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಲ್ಲಣಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳನ್ನು ನಾವು ಹೊಣೆ ಹೊರುವುದು ಇಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/4-collision-detection/solution/README.md

@@ -0,0 +1,17 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2026-01-08T15:00:19+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "kn"
+}
+-->
+ಇದು ಒಂದು_placeholder_, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ bırakılmıştır
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಬಹಿರಂಗೀಕರಣ**:
+ಈ ದಾಖಲೆಯನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯತ್ತ ಪ್ರಯತ್ನಿಸುವಾಗಲೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ದಸ್ತಾವೇಜು ಪ್ರಾಮಾಣಿಕ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಮುಖ್ಯ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉತ್ಪನ್ನವಾದ ಯಾವುದೇ ಗೊಂದಲಗಳು ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/4-collision-detection/your-work/README.md

@@ -0,0 +1,17 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2026-01-08T14:59:32+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "kn"
+}
+-->
+ಇದು ಒಂದು ಸ್ಥಳಾಪಕ, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ laissಲಾಗಿದೆ
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತಕ್ಷಣದ ಜಾಹೀರಾತು**:  
+ಈ ದಸ್ತಾವೇಜು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯ ಕಡೆ ಗಮನ ಹರಿಸುವಾಗಲೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಸಂಭವಿಸಬಹುದು ಎಂದು ಗಮನದಲ್ಲಿರಲಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅಧಿಕಾರದ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸುವುದರಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ అపಭ್ರಾಂಶಗಳು ಅಥವಾ ತಪ್ಪಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಕಾರಣಗಳಿಂದ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/5-keeping-score/README.md

@@ -0,0 +1,506 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2ed9145a16cf576faa2a973dff84d099",
+  "translation_date": "2026-01-08T14:12:08+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "kn"
+}
+-->
+# ಸ್ಪೇಸ್ ಗೇಮ್ ನಿರ್ಮಾಣ ಭಾಗ 5: ಅಂಕೆಗಳು ಮತ್ತು ಜೀವಗಳು
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಆಟ ವಿನ್ಯಾಸ ಪಯಣ
+    section ಆಟಗಾರ ಪ್ರತಿಕ್ರಿಯೆ
+      ಅಂಕ ಗಳಿಕೆ ಮನೋವಿಜ್ಞಾನವನ್ನು ಅರ್ಥಮಾಡು: 3: Student
+      ದೃಶ್ಯ ಸಂವಹನವನ್ನು ಕಲಿತುಕೊಳ್ಳಿ: 4: Student
+      ಬಹುಮಾನ ವ್ಯವಸ್ಥೆಯನ್ನು ವಿನ್ಯಾಸಮಾಡಿ: 4: Student
+    section ತಾಂತ್ರಿಕ ಜಾರಿಗೊಳಿಸುವಿಕೆ
+      ಕ್ಯಾನ್ವಾಸ್ ಪಠ್ಯದ ರೆಂಡರಿಂಗ್: 4: Student
+      ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ: 5: Student
+      ಘಟನಾ ಆಧರಿತ ಅಪ್ಡೇಟ್‌ಗಳು: 5: Student
+    section ಆಟದ ಸೌಲಭ್ಯ
+      ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ: 5: Student
+      ಸವಾಲು ಮತ್ತು ಬಹುಮಾನ ಸಮತೋಲನ: 5: Student
+      ಆಕರ್ಷಕ ಆಟದ ಗುಣಮಟ್ಟವನ್ನು ರಚಿಸಿ: 5: Student
+```
+## ಪೂರ್ವ ಉಪನ್ಯಾಸ ಕ್ವಿಜ್
+
+[ಪೂರ್ವ-ಉಪನ್ಯಾಸ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/37)
+
+ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮ್ನು ನಿಜವಾದ ಆಟದಂತೆ ಅನುಭವಿಸಲು ಸಿದ್ಧರಾ? ಅಂಕೆಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಜೀವಗಳನ್ನು ನಿರ್ವಹಿಸಿ - ಪ್ರಾರಂಭಿಕ ಆರ್ಕೇಡ್ ಗೇಮ್‌ಗಳಾದ ಸ್ಪೇಸ್ ಇನ್ವೇಡರ್ಸ್‌ಗಳನ್ನು ಸರಳ ಪ್ರಾತ್ಯಕ್ಷಿಕೆಗಳಿಂದ ಅಡಿಕ್ಟಿವ್ ಮನರಂಜನೆಯಾಗಿ ಪರಿವರ್ತಿಸಿದ ಮೂಲ ಯಂತ್ರಶಾಸ್ತ್ರ. ಇಲ್ಲಿದೆ ನಿಮ್ಮ ಆಟ ನಿಜವಾಗಿಯೂ ಆಡಬಹುದಾದದ್ದು ಆಗುವುದು.
+
+```mermaid
+mindmap
+  root((ಆಟ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳು))
+    Visual Communication
+      Text Rendering [ಪಠ್ಯ ಪ್ರದರ್ಶನ]
+      Icon Display [ಐಕಾನ್ ಪ್ರದರ್ಶನ]
+      Color Psychology [ಬಣ್ಣ ಮನೋವಿಜ್ಞಾನ]
+      Layout Design [ಆಕೃತಿ ವಿನ್ಯಾಸ]
+    Scoring Mechanics
+      Point Values [ಪಾಯಿಂಟ್ ಮೌಲ್ಯಗಳು]
+      Reward Timing [ಬಳವರಣೆ ಸಮಯ]
+      Progress Tracking [ಪ್ರಗತಿ ಹಾದಿ]
+      Achievement Systems [ಸಾಧನೆಯ ವ್ಯವಸ್ಥೆಗಳು]
+    Life Management
+      Risk vs Reward [ಸಂಕಟ ವಿರುದ್ದ ಬಹುಮಾನ]
+      Player Agency [ಕ್ರೀಡಾಪಟು ಪ್ರಾಧಿಕಾರ]
+      Difficulty Balance [ಕಷ್ಟತೆಯ ಸಮತೋಲನ]
+      Recovery Mechanics [ಪುನರ್‍ಪ್ರದಾನ ಯಂತ್ರಗಳು]
+    User Experience
+      Immediate Feedback [ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ]
+      Clear Information [ಸ್ಪಷ್ಟ ಮಾಹಿತಿ]
+      Emotional Response [ಭಾವನಾತ್ಮಕ ಪ್ರತಿಕ್ರಿಯೆ]
+      Engagement Loops [ನೇರಳಿಕೆ ಲೂಪ್ಗಳು]
+    Implementation
+      Canvas API
+      State Management [ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ]
+      Event Systems [ಈವಂಟ್ ವ್ಯವಸ್ಥೆಗಳು]
+      Performance [ಕಾರ್ಯಕ್ಷಮತೆ]
+```
+## ಪರದೆ ಮೇಲೆ ಪಠ್ಯ ಚಿತ್ರಣ - ನಿಮ್ಮ ಆಟದ ಧ್ವನಿ
+
+ನಿಮ್ಮ ಅಂಕೆಯನ್ನು ತೋರಿಸಲು, ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಪಠ್ಯವನ್ನು ಹೇಗೆ ಚಿತ್ರಿಸಲು ತಿಳಿಯಬೇಕಾಗಿದೆ. `fillText()` ವಿಧಾನ ನಿಮ್ಮ ಮುಖ್ಯ ಸಾಧನ - ಇದು ಕ್ಲಾಸಿಕ್ ಆರ್ಕೇಡ್ಗಳಲ್ಲಿ ಅಂಕೆಗಳು ಮತ್ತು ಸ್ಥಿತಿಗತಿಗಳನ್ನು ತೋರಿಸಲು ಬಳಸಿದ ತಂತ್ರ.
+
+```mermaid
+flowchart LR
+    A["📝 ಪಠ್ಯದ ವಿಷಯ"] --> B["🎨 ಶೈಲಿಶಾಸ್ತ್ರ"]
+    B --> C["📍 орналасಿಕೆ"]
+    C --> D["🖼️ ಕ್ಯಾನ್‌ವಾಸ್ ಪ್ರದರ್ಶನ"]
+    
+    E["ಫಾಂಟ್ ಕುಟುಂಬ"] --> B
+    F["ಫಾಂಟ್ ಗಾತ್ರ"] --> B
+    G["ನಲువు"] --> B
+    H["ಸರಿಹೊಂದಿಸುವಿಕೆ"] --> B
+    
+    I["X ಸಂಯೋಜನ"] --> C
+    J["Y ಸಂಯೋಜನ"] --> C
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
+ನೀವು ಪಠ್ಯದ ಕಾಣಿಕೆಯನ್ನು ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣಕ್ಕೆ ಹೊಂದಿದ್ದೀರಿ:
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ [ಕ್ಯಾನ್ವಾಸ್‌ಗೆ ಪಠ್ಯ ಸೇರಿಸುವುದು](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) ಕುರಿತು ಗಾಢವಾದ ಅಧ್ಯಯನ ಮಾಡಿ - ಫಾಂಟ್‌ಗಳು ಮತ್ತು ಶೈಲಿಯಲ್ಲಿ ನೀವು ಎಷ್ಟು ಸೃಜನಶೀಲರಾಗಬಹುದೆಂದುあなたはびっくりするかもしれません!
+
+## ಜೀವಗಳು - ಕೇವಲ ಸಂಖ್ಯೆಗಿಂತ കൂടുതಲೆ
+
+ಆಟ ವಿನ್ಯಾಸದಲ್ಲಿ, "ಜೀವ" ಅಂದರೆ ಆಟಗಾರನ ತಪ್ಪುಗಳಿಗೆ ಅವಕಾಶ. ಈ ಯೋಚನೆ ಪಿನ್‌ಬಾಲ್ ಯಂತ್ರಗಳಿಂದ ಬಂದಿದೆ, ಅಲ್ಲಲ್ಲಿ ನೀವು ಹಲವು ಬಾಲ್ಗಳನ್ನು ಬಳಸುವ ಅವಕಾಶ ಸಿಕ್ಕಿತ್ತು. ಆರಂಭಿಕ ವಿಡಿಯೋ ಆಟಗಳಾದ ಆಸ್ಟೆರಾಯ್ಡ್ಸ್‌ನಲ್ಲಿ, ಜೀವಗಳು ಆಟಗಾರರಿಗೆ ಅಪಾಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಮತ್ತು ತಪ್ಪುಗಳಿಂದ ಕಲಿಯಲು ಅವಕಾಶ ನೀಡುತ್ತಿತ್ತು.
+
+```mermaid
+flowchart TD
+    A["🎮 ಆಟಗಾರನ ಕ್ರಿಯೆ"] --> B{"ಪರಿಸ್ಥಿತಿಯ ಅಂದಾಜು"}
+    
+    B --> C["ಹೆಚ್ಚಿನ ಅಪಾಯ, ಹೆಚ್ಚಿನ ಬಹುಮಾನ"]
+    B --> D["ಸುರಕ್ಷಿತ ತಂತ್ರ"]
+    
+    C --> E{"ಫಲಿತಾಂಶ"}
+    D --> F["ಸ್ಥಿರ ಪ್ರಗತಿ"]
+    
+    E -->|ಯಶಸ್ಸು| G["🏆 ದೊಡ್ಡ ಅಂಕಿಗಳು"]
+    E -->|ವिफಲತೆ| H["💔 ಜೀವ ಕಳೆದುಕೊ"]
+    
+    H --> I{"ಜೀವಗಳು ಉಳಿದಿವೆಯೆ?"}
+    I -->|ಹೌದು| J["🔄 ಪುನಃ ಪ್ರಯತ್ನಿಸಿ"]
+    I -->|ಇಲ್ಲ| K["💀 ಆಟ ಮುಗಿಯಿತು"]
+    
+    J --> B
+    G --> B
+    F --> B
+    
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+    style G fill:#e3f2fd
+    style H fill:#fff3e0
+```
+ದೃಶ್ಯಾತ್ಮಕ ಪ್ರದರ್ಶನ ಬಹಳ ಪ್ರಮುಖ - ಕೇವಲ "Lives: 3" ಎಂದು ಹೇಳುವುದಕ್ಕಿಂತ ನೌಕಾ ಚಿಹ್ನೆಗಳನ್ನು ತೋರಿಸುವುದು ತಕ್ಷಣದ ದೃಶ್ಯ ಗುರುತಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ, ಮೊದಲಿನ ಆರ್ಕೇಡ್ ಕ್ಯಾಬಿನೆಟ್‌ಗಳು ಭಾಷಾ ಅಡ್ಡಿಗಳು ಮೀರಿ ಸಂವಹನ ಮಾಡಲು ಐಕಾನೋಗ್ರಫಿಯನ್ನು ಬಳಸಿದಂತೆ.
+
+## ನಿಮ್ಮ ಆಟದ ಬಹುಮಾನ ವ್ಯವಸ್ಥೆ ನಿರ್ಮಿಸುವುದು
+
+ಇಂದು ನಾವು ಮುಖ್ಯವಾದ ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಜಾರಿಗೆ ತರಲಿದ್ದೇವೆ, ಇದು ಆಟಗಾರರನ್ನು ತಾತ್ಕಾಲಿಕವಾಗಿ ತೊಡಗಿಸಿಕೊಂಡು ಇಡುವುದು:
+
+```mermaid
+sequenceDiagram
+    participant Player
+    participant GameEngine
+    participant ScoreSystem
+    participant LifeSystem
+    participant Display
+    
+    Player->>GameEngine: ಶೂಟ್ ಇಂಡ lebyi
+    GameEngine->>ScoreSystem: ಅಂಕಗಳನ್ನು ನೀಡಿ
+    ScoreSystem->>ScoreSystem: +100 ಅಂಕಗಳು
+    ScoreSystem->>Display: ಅಂಕಗಳನ್ನು ನವೀಕರಿಸಿ
+    
+    Player->>GameEngine: ಶತ್ರು ಜೊತೆ ಮುಖಾಮುಖಿ
+    GameEngine->>LifeSystem: ಜೀವನ ಕಳೆದುಕೊಳ್ಳಿ
+    LifeSystem->>LifeSystem: -1 ಜೀವನ
+    LifeSystem->>Display: ಜೀವನಗಳನ್ನು ನವೀಕರಿಸಿ
+    
+    alt ಜೀವನ > 0
+        LifeSystem->>Player: ಆಟ ಮುಂದುವರೆಸಿ
+    else ಜೀವನ = 0
+        LifeSystem->>GameEngine: ಆಟ ಮುಗಿದಿದೆ
+    end
+```
+- **ಅಂಕೆ ವ್ಯವಸ್ಥೆ**: ಪ್ರತಿ ನಷ್ಟಪಡಿಸಿದ ಶತ್ರು ನೌಕೆಗೆ 100 ಅಂಕೆಗಳು (ಮೂರು ಶಾಸಕರ ಸಂಖ್ಯೆಗಳನ್ನು ذهنದಲ್ಲಿಟ್ಟುಕೊಳ್ಳುವುದು ಸುಲಭ). ಅಂಕೆಯನ್ನು ಕೆಳಗಡೆಯ ಎಡಬದಿಯಲ್ಲಿ ತೋರಿಸಲಾಗುತ್ತದೆ.
+- **ಜೀವಗಳ ಗಣಕ**: ನಿಮ್ಮ ಹೀರೋ 3 ಜೀವಗಳಿಂದ ಆರಂಭವಾಗುತ್ತಾನೆ - ಪ್ರಾರಂಭಿಕ ಆರ್ಕೇಡ್ ಆಟಗಳಿಂದ ಸ್ಥಾಪಿತ ಮಾನದಂಡ, ಇದು ಸವಾಲು ಮತ್ತು ಆಡಲು ಅನುಕೂಲ ಎಂಬ ಸಮತೋಲನವನ್ನು ನೀಡುತ್ತದೆ. ಪ್ರತಿ ಶತ್ರು ಜೊತೆ ಸಂಭವಿಸುವ ಅಧಿಕಾರವು ಒಂದು ಜೀವವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಬಾಕಿ ಜೀವಗಳನ್ನು ನಾವು ಕೆಳಗಡೆಯ ಬಲಭಾಗದಲ್ಲಿ ನೌಕಾ ಐಕಾನ್‌ಗಳ ಮೂಲಕ ತೋರಿಸುತ್ತೇವೆ ![life image](../../../../translated_images/life.6fb9f50d53ee0413.kn.png).
+
+## ನೀವು ನಿರ್ಮಿಸುವುದು ಪ್ರಾರಂಭಿಸೋಣ!
+
+ಮೊದಲು, ನಿಮ್ಮ ವರ್ಕ್ ಸ್ಪೇಸ್ ಸಿದ್ಧಪಡಿಸಿ. ನಿಮ್ಮ `your-work` ಉಪಫೋಲ್ಡರ್‌ನಲ್ಲಿರುವ ಕಡತಗಳಿಗೆ ಹೋಗಿ. ನೀವು ಈ ಕಡತಗಳನ್ನು ನೋಡಬಹುದು:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+ನಿಮ್ಮ ಆಟವನ್ನು ಪರೀಕ್ಷಿಸಲು, `your_work` ಫೋಲ್ಡರ್‌ನಿಂದ ಡೆವಲಪ್‌ಮೆಂಟ್ ಸರ್ವರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿ:
+
+```bash
+cd your-work
+npm start
+```
+
+ಇದು `http://localhost:5000` ಎಡ್ರೆಸ್‌ನಲ್ಲಿ ಸ್ಥಳೀಯ ಸರ್ವರ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಈ ವಿಳಾಸವನ್ನು ತೆರೆದು ನಿಮ್ಮ ಆಟವನ್ನು ನೋಡಿ. ಅರೋ ಕೀಲಿಗಳನ್ನು ಬಳಸಿ ನಿಯಂತ್ರಣಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಶತ್ರುಗಳನ್ನು ಗುಂಡಿ ಮಾಡಿ ಎಲ್ಲವೂ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
+
+```mermaid
+flowchart TD
+    A["1. ಆಸ್ತಿ ಲೋಡಿಂಗ್"] --> B["2. ಆಟದ ಚರಗಳು"]
+    B --> C["3. ಮತ್ತು ತಗುಲಿಕೆ ಪತ್ತೆದಾರಿಕೆ"]
+    C --> D["4. ನಾಯಕ ಸುಧಾರಣೆ"]
+    D --> E["5. ಪ್ರದರ್ಶನ ಕಾರ್ಯಗಳು"]
+    E --> F["6. ಘಟನೆ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು"]
+    
+    G["ಜೀವನ ಚಿತ್ರ ಐಕಾನ್"] --> A
+    H["ಸ್ಕೋರ್ & ಜೀವನಗಳ ಟ್ರ್ಯಾಕಿಂಗ್"] --> B
+    I["ನಾಯಕ-ಶತ್ರು ಸಂಧಿಗಳು"] --> C
+    J["ಪಾಯಿಂಟ್‌ಗಳು & ಜೀವನ ವಿಧಾನಗಳು"] --> D
+    K["ಲೆಕ್ಕ & ಐಕಾನ್ ರೆಂಡರಿಂಗ್"] --> E
+    L["ಪ್ರಶಸ್ತಿ & ದಂಡ ನಿಯಮವಿಧಾನ"] --> F
+    
+    F --> M["🎮 ಪೂರ್ಣ ಆಟ"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
+### ಕೋಡ್ ಮಾಡಲು ಸಮಯ!
+
+1. **ನೀವು ಬೇಕಾಗಿರುವ ದೃಶ್ಯ ಆಸ್ತಿ ಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳಿ**. `solution/assets/` ಫೋಲ್ಡರ್‌ನಿಂದ `life.png` ಆಸ್ತಿಯನ್ನು ನಿಮ್ಮ `your-work` ಫೋಲ್ಡರ್‌ಗೆ ನಕಲಿ ಮಾಡಿ. ನಂತರ lifeImg ಅನ್ನು ನಿಮ್ಮ window.onload ಫಂಕ್ಷನ್‌ಗೆ ಸೇರಿಸಿ:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1.Assets ಪಟ್ಟಿ‌ಗೆ `lifeImg` ಅನ್ನು ಸೇರಿಸಲು ಮರೆಯಬೇಡಿ:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+
+2. **ನಿಮ್ಮ ಆಟದ ಚರಗಳನ್ನು ಸಜ್ಜುಗೊಳಿಸಿ**. ನಿಮ್ಮ ಒಟ್ಟು ಅಂಕೆ(0ರಿಂದ ಪ್ರಾರಂಭ) ಮತ್ತು ಉಳಿದ ಜೀವಗಳನ್ನು(3ರಿಂದ ಪ್ರಾರಂಭ) ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಕೆಲವು ಕೋಡ್ ಸೇರಿಸಿ. ನಾವು ಇದನ್ನು ಪರದೆ ಮೇಲೆ ತೋರಿಸುತ್ತೇವೆ, ಆದ್ದರಿಂದ ಆಟಗಾರರು ಯಾವ ಸ್ಥಿತಿಯಲ್ಲಿ ಇದ್ದಾರೆ ಚೆನ್ನಾಗಿ ಗೊತ್ತಾಗುತ್ತದೆ.
+
+3. **ಸಂಘರ್ಷ ಪತ್ತೆ ಮಾಡಲು ವಿಧಾನ ಜಾರಿಗೆ ತರಿರಿ**. ನಿಮ್ಮ `updateGameObjects()` ಫಂಕ್ಷನ್ ಅನ್ನು ಪರಿಷ್ಕರಿಸಿ, ಶತ್ರುಗಳು ನಿಮ್ಮ ಹೀರೋಗೆ ಡಿಕ್ಕಿ ಹೊಡೆತ ಮಾಡಿದಾಗ ಪತ್ತೆ ಮಾಡುತ್ತದೆ:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **ನಿಮ್ಮ ಹೀರೋಗೆ ಜೀವ ಮತ್ತು ಅಂಕೆ ಟ್ರ್ಯಾಕಿಂಗ್ ಸೇರಿಸಿ**.
+   1. **ಗಣಕಗಳನ್ನು ಪ್ರಾರಂಭಿಸಿ**. ನಿಮ್ಮ `Hero` ಕ್ಲಾಸಿನಲ್ಲಿನ `this.cooldown = 0` ಅಡಿಯಲ್ಲಿದೆ, ಇಲ್ಲಿ ಜೀವ ಮತ್ತು ಅಂಕೆಯನ್ನು ಸೆಟ್ ಮಾಡಿರಿ:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **ಈ ಮೌಲ್ಯಗಳನ್ನು ಆಟಗಾರರಿಗೆ ತೋರಿಸಿ**. ಈ ಮೌಲ್ಯಗಳನ್ನು ಪರದೆ ಮೇಲೆ ಚಿತ್ರಿಸುವ ಫಂಕ್ಷನ್ಗಳನ್ನು ರಚಿಸಿ:
+
+        ```javascript
+        function drawLife() {
+          // ಮಾಡಲು, 35, 27
+          const START_POS = canvas.width - 180;
+          for(let i=0; i < hero.life; i++ ) {
+            ctx.drawImage(
+              lifeImg, 
+              START_POS + (45 * (i+1) ), 
+              canvas.height - 37);
+          }
+        }
+        
+        function drawPoints() {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "red";
+          ctx.textAlign = "left";
+          drawText("Points: " + hero.points, 10, canvas.height-20);
+        }
+        
+        function drawText(message, x, y) {
+          ctx.fillText(message, x, y);
+        }
+
+        ```
+
+   1. **ಎಲ್ಲವೂ ನಿಮ್ಮ ಆಟದ ಲೂಪಿಗೆ ಹೂಕ ಮಾಡಿ**. ಈ ಫಂಕ್ಷನ್ಗಳನ್ನು window.onload ಫಂಕ್ಷನ್‌ನಲ್ಲಿ `updateGameObjects()` ನಂತರ ಸೇರಿಸಿ:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಆಟ ವಿನ್ಯಾಸ ತಿಳಿವು**: ಪರಿಣಾಮಗಳನ್ನು ಜಾರಿಗೆ ತರುವ ಮೊದಲು ನಿಮಗೆ ತಿಳಿದುಕೊಳ್ಳಬೇಕು:
+- ✅ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ಆಟಗಾರರಿಗೆ ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಹೇಗೆ ಸಂವಹನ ಮಾಡುತ್ತದೆ
+- ✅ ಯೂಐ ಅಂಶಗಳ ಸತತ ಸ್ಥಾನವನ್ನು ಏಕೆ ಸುಧಾರಿಸುತ್ತದೆ
+- ✅ ಅಂಕೆಗಳ ಮೌಲ್ಯ ಮತ್ತು ಜೀವ ನಿರ್ವಹಣೆ ರೂಢಿಯಾದ ಕಾರಣಗಳು
+- ✅ ಕ್ಯಾನ್ವಾಸ್ ಪಠ್ಯ ಚಿತ್ರಣ ಹೇಗೆ HTML ಪಠ್ಯದಿಂದ ಭಿನ್ನತೆ ಅನುಭವಿಸುತ್ತದೆ
+
+**ವೇಗವಾದ ಸ್ವಯಂ ಪರೀಕ್ಷೆ**: ಆರ್ಕೇಡ್ ಗೇಮ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಏಕೆ ಸುತ್ತಲಿನ ಸಂಖ್ಯೆಗಳ ಬಳಕೆಯನ್ನು ಅನುಸರಿಸುತ್ತವೆ?
+*ಉತ್ತರ: ಸುತ್ತಲಿನ ಸಂಖ್ಯೆಗಳನ್ನು ಆಟಗಾರರು ಮನಸ್ಸಿನಲ್ಲಿ ಸುಲಭವಾಗಿ ಲೆಕ್ಕ ಹಾಕಬಹುದು ಮತ್ತು ತೃಪ್ತಿ ನೀಡುವ ಮನೋವೈಜ್ಞಾನಿಕ ಬಹುಮಾನಗಳನ್ನು ಸೃಷ್ಟಿಸು*ತದೆ.
+
+**ಬಳಕೆದಾರ ಅನುಭವ ತತ್ವಗಳು**: ನೀವು ಈಗ ಅನ್ವಯಿಸುತ್ತಿದ್ದೀರಿ:
+- **ದೃಶ್ಯ ಕ್ರಮ**: ಪ್ರಮುಖ ಮಾಹಿತಿಯನ್ನು ಪ್ರಸಿದ್ಧ ಸ್ಥಾನಗಳಲ್ಲಿ ಇಡಲಾಗುತ್ತದೆ
+- **ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ**: ಆಟಗಾರ ಕ್ರಿಯೆಗಳ ತಕ್ಷಣದ ನವೀಕರಣಗಳು
+- **ಜ್ಞಾನ ಭಾರ**: ಸರಳ, ಸ್ಪಷ್ಟ ಮಾಹಿತಿ ಪ್ರಸ್ತುತಪಡಣೆ
+- **ಭಾವನಾತ್ಮಕ ವಿನ್ಯಾಸ**: ಐಕಾನ್ಸ್ ಮತ್ತು ಬಣ್ಣಗಳು ಆಟಗಾರರ ಸಂಪರ್ಕ ಸೃಷ್ಟಿಸುತ್ತದೆ
+
+1. **ಆಟದ ಪರಿಣಾಮಗಳು ಮತ್ತು ಬಹುಮಾನಗಳನ್ನು ಜಾರಿಗೆ ತರಿರಿ**. ಈಗ ನಾವು ಆಟಗಾರದ ಕ್ರಿಯೆಗಳಿಗೆ ಅರ್ಥಪೂರ್ಣತೆಯನ್ನು ನೀಡುವ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸೇರಿಸುತ್ತೇವೆ:
+
+   1. **ಡಿಕ್ಕಿಗಳು ಜೀವಗಳನ್ನು ಕುಂದುತ್ತವೆ**. ನಿಮ್ಮ ಹೀರೋ ಪ್ರತಿ ಶತ್ರುವಿನೊಂದಿಗೆ ಡಿಕ್ಕಿಯಾಗುವಾಗ ಒಂದು ಜೀವ ಕಳೆದುಕೊಳ್ಳಬೇಡಿ.
+   
+      ಈ ವಿಧಾನವನ್ನು ನಿಮ್ಮ `Hero` ಕ್ಲಾಸಿಗೆ ಸೇರಿಸಿ:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **ಶತ್ರುಗಳನ್ನು ಗುಂಡಿ ಮಾಡಿ ಅಂಕೆ ಗಳಿಸಿ**. ಪ್ರತಿ ಯಶಸ್ವಿ ಹಿಟ್ 100 ಅಂಕೆಯನ್ನು ಕೊಡುತ್ತದೆ, ಇದು ಸ್ಪಷ್ಟ ಪಾಸಿಟಿವ್ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ.
+
+      ಹೀರೋ ಕ್ಲಾಸಿಗೆ ಈ ಹೆಚ್ಚಿಸುವ ವಿಧಾನವನ್ನು ವಿಸ್ತರಿಸಿ:
+
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        ಈಗ ಈ ಫಂಕ್ಷನ್ಗಳನ್ನು ಡಿಕ್ಕಿ ಘಟನೆಗಳಿಗೆ ಸಂಪರ್ಕಿಸಿ:
+
+        ```javascript
+        eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+           first.dead = true;
+           second.dead = true;
+           hero.incrementPoints();
+        })
+
+        eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+           enemy.dead = true;
+           hero.decrementLife();
+        });
+        ```
+
+✅ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಕ್ಯಾನ್ವಾಸ್ ಬಳಸಿ ನಿರ್ಮಿಸಲ್ಪಟ್ಟ ಇತರ ಆಟಗಳ ಬಗ್ಗೆ ಆಸಕ್ತರಾ? ಕೈಗೊಂಡು ಹುಡುಕಿ - ನೀವು ಸಾಧ್ಯವಿರುವುದರಲ್ಲಿ ಆಶ್ಚರ್ಯ ಪಡಬಹುದು!
+
+ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಜಾರಿಗೆ ತಂದ ನಂತರ, ನಿಮ್ಮ ಆಟವನ್ನು ಪರೀಕ್ಷಿಸಿ. ಸಂಪೂರ್ಣ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಯನ್ನು ಕಳೆಯಿರಿ. ಬಲ ಕೆಳಭಾಗದಲ್ಲಿ ಜೀವ ಐಕಾನ್‌ಗಳು, ಎಡ ಕೆಳಭಾಗದಲ್ಲಿ ನಿಮ್ಮ ಅಂಕೆ ತೋರಣೆಯಾಗುತ್ತದೆ ಮತ್ತು ಡಿಕ್ಕಿಗಳು ಜೀವಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತವೆ ಆದರೆ ಯಶಸ್ವಿ ಗುಂಡಿಗಳು ನಿಮ್ಮ ಅಂಕೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ ಎಂದು ನೋಡಿ.
+
+ನಿಮ್ಮ ಆಟ ಈಗ ಹಿಂದಿನ ಆರ್ಕೇಡ್ ಆಟಗಳನ್ನು ಅತ್ಯಂತ ಆಕರ್ಷಕ બનાવવા ಕಾರಣವಾದ ಅಗತ್ಯಯುಕ್ತ ಯಂತ್ರಶಾಸ್ತ್ರಗಳನ್ನು ಹೊಂದಿದೆ - ಸ್ಪಷ್ಟ ಗುರಿಗಳು, ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ಆಟಗಾರಿಯ ಕ್ರಿಯೆಗಳಿಗೆ ಅರ್ಥಪೂರ್ಣ ಪರಿಣಾಮ.
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಪೂರ್ಣ ಆಟ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ**: ಆಟಗಾರ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳ ಮೇಲೆ ನಿಮ್ಮ ಪ್ರಾಧಾನ್ಯತೆ ಪರಿಶೀಲಿಸಿ:
+- ✅ ಅಂಕೆ ಯಂತ್ರಶಾಸ್ತ್ರವು ಆಟಗಾರರ ಪ್ರೋತ್ಸಾಹ ಮತ್ತು ತೊಡಗಿಸಿಕೊಳುವುದನ್ನು ಹೇಗೆ ಸೃಷ್ಟಿಸುತ್ತದೆ?
+- ✅ ಯೂಐ ವಿನ್ಯಾಸಕ್ಕೆ ದೃಶ್ಯ ಸತತತೆ ಏಕೆ ಮುಖ್ಯ?
+- ✅ ಜೀವ ವ್ಯವಸ್ಥೆ ಸವಾಲು ಮತ್ತು ಆಟಗಾರ ನಿರ್ವಹಣೆ ನಡುವಣ ಸಮತೋಲನವನ್ನು ಹೇಗೆ ನೀಡುತ್ತದೆ?
+- ✅ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯು ತೃಪ್ತಿಕರ ಆಟವನ್ನು ಸೃಷ್ಟಿಸುವಲ್ಲಿ ಯಾವ ಪಾತ್ರ ವಹಿಸುತ್ತದೆ?
+
+**ವ್ಯವಸ್ಥೆಯ ಏಕೀಕರಣ**: ನಿಮ್ಮ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆ ಈ ಮೂಲಕವನ್ನು ತೋರಿಸುತ್ತದೆ:
+- **ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ**: ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಸಂವಹನ ಮತ್ತು ಮಾಹಿತಿ ಕ್ರಮ
+- **ಘಟನೆ ಚಲಿತ ವಾಸ್ತುಶಿಲ್ಪ**: ಆಟಗಾರ ಕ್ರಿಯೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ನವೀಕರಣಗಳು
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಡೈನಾಮಿಕ್ ಆಟದ ಡೇಟಾ ಟ್ರ್ಯಾಕ್ ಮತ್ತು ಪ್ರದರ್ಶನ
+- **ಕ್ಯಾನ್ವಾಸ್ ಪರಿಣತಿ**: ಪಠ್ಯ ಚಿತ್ರಣ ಮತ್ತು ಸ್ಪ್ರೈಟ್ ಸ್ಥಾನವನ್ನು ನಿರ್ಧರಿಸುವುದು
+- **ಆಟ ಮನೋವಿಜ್ಞಾನ**: ಆಟಗಾರ ಪ್ರೋತ್ಸಾಹ ಮತ್ತು ತೊಡಗಿಸುವಿಕೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು
+
+**ತಜ್ಞ ಮಾದರಿಗಳು ಜಾರಿಗೆ ತಂದಿದ್ದೀರಿ**:
+- **MVC ವಾಸ್ತುಶಿಲ್ಪ**: ಆಟದ ಲಾಜಿಕ್, ಡೇಟಾ ಮತ್ತು ಪ್ರದರ್ಶನ ವಿಂಗಡಣೆ
+- **ತಪಾಸಕ ಮಾದರಿ**: ಆಟದ ಸ್ಥಿತಿ ಬದಲಾವಣೆಗಳಿಗೆ ಘಟನ್ಚಾಲಿತ ನವೀಕರಣಗಳು
+- **ಘಟಕ ವಿನ್ಯಾಸ**: ಪುನರುಪಯೋಗದ ಫಂಕ್ಷನ್ಗಳನ್ನು ರಚನೆ ಮತ್ತು ಲಾಜಿಕ್
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಷ್ಕರಣೆ**: ಆಟದ ಲೂಪ್ಗಳಲ್ಲಿ ಪರಿಣಾಮಕಾರಿ చిత్రಣ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದವುಗಳು**
+- [ ] ಅಂಕೆ ಪ್ರದರ್ಶನಕ್ಕಾಗಿ ವಿಭಿನ್ನ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ಬಣ್ಣಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ
+- [ ] ಅಂಕೆ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಿಸಿ ಮತ್ತು ಆಟದ ಪ್ರಭಾವವನ್ನು ನೋಡಿ
+- [ ] ಅಂಕೆಗಳು ಮತ್ತು ಜೀವಗಳ ಬದಲಾವಣೆಯನ್ನು console.log henkilಗಳು ಸೇರಿಸಿ
+- [ ] ಜೀವಗಳು ಕಡಿಮೆಯಾಗುವ ಅಥವಾ ಹೆಚ್ಚಿನ ಅಂಕೆಗಳು ಸಾಧಿಸುವ ಅತಿದೊಡ್ಡ ಪ್ರಕರಣಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ಸಾಧಿಸಬಹುದಾದವುಗಳು**
+- [ ] ಪಾಠ ಕೊನೆಯ ಕ್ವಿಜ್ ಪೂರ್ಣ ಮಾಡಿ ಮತ್ತು ಆಟ ವಿನ್ಯಾಸ ಮನೋವಿಜ್ಞಾನವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ಅಂಕೆ ಗಳಿಸುವ ಮತ್ತು ಜೀವ ಕಳೆದುಕೊಳ್ಳುವ ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] localStorage ಉಪಯೋಗಿಸಿ ಹೈ ಸ್ಕೋರ್ ವ್ಯವಸ್ಥೆ ಜಾರಿಗೆ ತರಿರಿ
+- [ ] ವಿಭಿನ್ನ ಶತ್ರು ಪ್ರಕಾರಗಳಿಗೆ ವಿಭಿನ್ನ ಪಾಯಿಂಟ್ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಜೀವ ಕಳೆದುಕೊಳ್ಳುವಾಗ ಪರದೆ ನಡುಗರಿಸುವ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ಆಟ ವಿನ್ಯಾಸ ಪ್ರಯಾಣ**
+- [ ] ಸಂಪೂರ್ಣ ಸ್ಪೇಸ್ ಗೇಮ್ ಅನ್ನು ಬಹುಮಾನ ವ್ಯವಸ್ಥೆಗಳಿಂದ ಸಂಪೂರ್ವವಾಗಿ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಕಂಪೋ ಮಲ್ಟಿಪ್ಲೈಯರ್ ಗಳು ಮತ್ತು ಇತರ ಆಧುನಿಕ ಅಂಕೆ ಯಂತ್ರಶಾಸ್ತ್ರಗಳನ್ನು ಜಾರಿಗೆ ತರ하세요
+- [ ] ಸಾಧನೆ ಮತ್ತು ಅನ್ಲಾಕ್ ಮಾಡಬಹುದಾದ ವಿಷಯಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಕಷ್ಟದ ಏರಿಕೆ ಮತ್ತು ಸಮತೋಲನ ವ್ಯವಸ್ಥೆಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಮೆನುಗಳು ಮತ್ತು ಆಟ ಮುಗಿದ ಪರದೆಗಳಂತೆ ಯೂಐ ವಿನ್ಯಾಸ ಮಾಡಿ
+- [ ] ಮತ್ತೊಂದು ಆಟಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಯ ಯಂತ್ರಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ಆಟ ಅಭಿವೃದ್ಧಿ ಪರಿಣತಿತ್ವ**
+- [ ] ಸೂಕ್ಷ್ಮ ಪ್ರಗತಿ ವ್ಯವಸ್ಥೆಳ್ಳದ ಸಂಪೂರ್ಣ ಆಟಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ಆಟ ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ಆಟಗಾರ ವರ್ತನೆ ಮಾಪನ ಕಲಿಯಿರಿ
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ ಆಟ ಅಭಿವೃದ್ಧಿ ಯೋಜನೆಗಳಿಗೆ ಸಹಕರಿಸಿ
+- [ ] ಸುಧಾರಿತ ಆಟ ವಿನ್ಯಾಸ ಮಾದರಿಗಳು ಮತ್ತು ಹಣಕಾಸು ಆಧಾರಿತದ ಬಗ್ಗೆ ಪರಿಣತಿ
+- [ ] ಆಟ ವಿನ್ಯಾಸ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವದ ವಿಷಯಗಳನ್ನು ಶೈಕ್ಷಣಿಕವಾಗಿ ರಚಿಸಿ
+- [ ] ಆಟ ವಿನ್ಯಾಸ ಮತ್ತು ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಪೋರ್ಟ್‌ಫೋಲಿಯೋ ನಿರ್ಮಿಸಿ
+
+## 🎯 ನಿಮ್ಮ ಆಟ ವಿನ್ಯಾಸ ಪರಿಣತಿ ಕಾಲವರಿ
+
+```mermaid
+timeline
+    title ಆಟ ವಿನ್ಯಾಸ ಮತ್ತು ಆಟಗಾರ ಅಭಿಪ್ರಾಯ ಕಲಿಕೆಯನ್ನು ಪ್ರಗತಿ
+    
+    section ಮೂಲ (10 ನಿಮಿಷಗಳು)
+        ದೃಶ್ಯ ಸಂವಹನ: ಪಠ್ಯ ಪ್ರದರ್ಶನ
+                           : ಐಕಾನ್ ವಿನ್ಯಾಸ
+                           : ವಿನ್ಯಾಸ ತತ್ತ್ವಗಳು
+                           : ಬಣ್ಣ ಮನೋವಿಜ್ಞಾನ
+        
+    section ಆಟಗಾರ ಮನಶ್ಶಾಸ್ತ್ರ (20 ನಿಮಿಷಗಳು)
+        ಪ್ರೇರಣೆ ವ್ಯವಸ್ಥೆಗಳು: ಅಂಕಿಸಂಖ್ಯೆಗಳು
+                          : ಅಪಾಯ ಮತ್ತು ಬಹುಮಾನ
+                          : ಪ್ರಗತಿ ಅಭಿಪ್ರಾಯ
+                          : ಸಾಧನೆ ವಿನ್ಯಾಸ
+        
+    section ತಾಂತ್ರಿಕ ಅನುಷ್ಠಾನ (30 ನಿಮಿಷಗಳು)
+        ಕ್ಯಾನ್ವಾಸ್ ಪರಿಣತಿ: ಪಠ್ಯ ಸ್ಥಾನಮಾನ
+                      : ಸ್ಪ್ರೈಟ್ ಪ್ರದರ್ಶನ
+                      : ರಾಜ್ಯ ನಿರ್ವಹಣೆ
+                      : ಕಾರ್ಯಕ್ಷಮತೆ ಗೋಚರಣೆ
+        
+    section ಆಟದ ಸಮತೋಲನ (40 ನಿಮಿಷಗಳು)
+        ಕಷ್ಟದ ವಿನ್ಯಾಸ: ಜೀವನ ನಿರ್ವಹಣೆ
+                         : ಅಂಕಗಳ ವಕ್ರತೆಗಳು
+                         : ಆಟಗಾರ ಹಿಮ್ಮುಖತೆ
+                         : ಪ್ರವೇಶಾರ್ಹತೆ
+        
+    section ಬಳಕೆದಾರ ಅನುಭವ (50 ನಿಮಿಷಗಳು)
+        ಮುಖಮುಖಿ ವಿನ್ಯಾಸ: ಮಾಹಿತಿ ಕ್ರಮಾವಳಿ
+                        : ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ಅಭಿಪ್ರಾಯ
+                        : ಭಾವನಾತ್ಮಕ ವಿನ್ಯಾಸ
+                        : ಉಪಯೋಗ ಪ್ರತ್ಯಯ ಒದಗಿಸುವಿಕೆ
+        
+    section ಉನ್ನತ ವ್ಯವಸ್ಥೆಗಳು (1 ವಾರ)
+        ಆಟ ಯಂತ್ರಗಳು: ಪ್ರಗತಿ ವ್ಯವಸ್ಥೆಗಳು
+                      : ವಿಶ್ಲೇಷಣಾ ಸಂಯೋಜನೆ
+                      : ಹಣಕಾಸು ವಿನ್ಯಾಸ
+                      : ಸಮುದಾಯ ಲಕ್ಷಣಗಳು
+        
+    section ಕೈಗಾರಿಕಾ ಕೌಶಲ್ಯಗಳು (1 ತಿಂಗಳು)
+        ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ: ತಂಡ ಸಹಕಾರ
+                                : ವಿನ್ಯಾಸ ದಾಖಲೆ ದಕ್ಷತೆ
+                                : ಆಟಗಾರ ಸಂಶೋಧನೆ
+                                : ವೇದಿಕೆ ಗೋಚರಣೆ
+```
+### 🛠️ ನಿಮ್ಮ ಆಟ ವಿನ್ಯಾಸ ಉಪಕರಣಗಳ ಸಾರಾಂಶ
+
+ಈ ಪಾಠವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನೀವು ಈಗ ನಿರ್ವಹಿಸಬಹುದು:
+- **ಆಟಗಾರ ಮನೋವಿಜ್ಞಾನ**: ಪ್ರೋತ್ಸಾಹ, ಅಪಾಯ/ಬಹುಮಾನ ಮತ್ತು ತೊಡಗಿಸುವಿಕೆ ಲೂಪುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+- **ದೃಶ್ಯ ಸಂವಹನ**: ಪಠ್ಯ, ಐಕಾನ್ ಮತ್ತು ವಿನ್ಯಾಸ ಬಳಸಿ ಪರಿಣಾಮಕಾರಿ ಯೂಐ ವಿನ್ಯಾಸ
+- **ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳು**: ಆಟಗಾರ ಕ್ರಿಯೆಗಳ ಮತ್ತು ಆಟದ ಘಟನೆಗಳಿಗೆ ನೇರಪ್ರತಿಕ್ರಿಯೆ
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಡೈನಾಮಿಕ್ ಡೇಟಾವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಟ್ರ್ಯಾಕ್ ಮತ್ತು ಪ್ರದರ್ಶಿಸುವುದು
+- **ಕ್ಯಾನ್ವಾಸ್ ಪಠ್ಯ ಚಿತ್ರಣ**: ಷೈಲಿ ಮತ್ತು ಸ್ಥಾನ ಗೊಳಿಸುವಿಕೆಯೊಂದಿಗೆ ವೃತ್ತಿಪರ ಪಠ್ಯ ಪ್ರದರ್ಶನ
+- **ಘಟನೆ ಏಕೀಕರಣ**: ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳಿಗೆ ಅರ್ಥಪೂರ್ಣ ಆಟ ಪರಿಣಾಮಗಳನ್ನು ಸಂಪರ್ಕಿಸುವುದು
+- **ಆಟ ಸಮತೋಲನ**: ಕಷ್ಟದ ಘಟ್ಟಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಿ ಆಟಗಾರ ಪ್ರಗತಿಗೆ ಸಮತೋಲನ ನೀಡುವುದು
+
+**ವಾಸ್ತವ ಲೋಕರ ಅನ್ವಯಿಕೆಗಳು**: ನಿಮ್ಮ ಆಟ ವಿನ್ಯಾಸ ನೈಪುಣ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ:
+- **ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸ**: ಆಕರ್ಷಕ ಮತ್ತು ಸ್ಪಷ್ಟವಾದ ಇಂಟರ್ಫೇಸ್ ರಚನೆ
+- **ಉತ್ಪನ್ನ ಅಭಿವೃದ್ಧಿ**: ಬಳಕೆದಾರ ಪ್ರೋತ್ಸಾಹ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆ ಲೂಪ್ಗಳ ಅರಿವು
+- **ಶೈಕ್ಷಣಿಕ ತಂತ್ರಜ್ಞಾನ**: ಗೇಮಿಫಿಕೇಶನ್ ಮತ್ತು ಕಲಿಕಾ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆ ವ್ಯವಸ್ಥೆಗಳು
+- **ಡೇಟಾ ದೃಶ್ಯೀಕರಣ**: ಸಂಕೀರ್ಣ ಮಾಹಿತಿಯನ್ನು ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ಆಕರ್ಷಕವಾಗಿ ಮಾಡುವುದು
+- **ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್ ಅಭಿವೃದ್ಧಿ**: ಹಿಡಿತ ತಂತ್ರಗಳು ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ
+- **ಮಾರ್ಕೆಟಿಂಗ್ ತಂತ್ರಜ್ಞಾನ**: ಬಳಕೆದಾರ ವರ್ತನೆ ಮತ್ತು ಪರಿವರ್ತನೆ ಸರ್ರೀಕಿ ಕಲಿತಿರಿ
+
+**ತಜ್ಞ ಕೌಶಲ್ಯಗಳು ಪಡೆದಿದ್ದೀರಿ**: ನೀವು ಈಗ:
+- **ವಿನ್ಯಾಸ** ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುವ ಮತ್ತು ತೊಡಗಿಸುವುದಕ್ಕಾಗಿ
+- **ಜಾರಿಗೆ ತರಿರಿ** ಬಳಕೆದಾರ ವರ್ತನೆಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮಾರ್ಗದರ್ಶನ ಮಾಡುವ ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು
+- **ಸಮತೋಲನ** ಸವಾಲು ಮತ್ತು ಪ್ರವೇಶಾರ್ಹತೆಯನ್ನು ಸಂಯೋಜಿಸಿ
+- **ರಚಿಸಿ** ವಿಭಿನ್ನ ಬಳಕೆದಾರ ಸಮುದಾಯಗಳ ಜೋತೆಗೆ ಕೆಲಸ ಮಾಡುವ ದೃಶ್ಯ ಸಂವಹನ
+- **ವಿಶ್ಲೇಷಣೆ** ಬಳಕೆದಾರ ವರ್ತನೆ ಮತ್ತು ವಿನ್ಯಾಸ ಸುಧಾರಣೆಗಳ ಮೇಲೆ ಪುನರಾವೃತ್ತಿ ಮಾಡಿ
+
+**ಆಟ ಅಭಿವೃದ್ಧಿ ಕಲ್ಪನೆಗಳಲ್ಲಿ ಪರಿಣತಿ**:
+- **ಆಟಗಾರ ಪ್ರೋತ್ಸಾಹ**: ತೊಡಗುಮಾಡುವಿಕೆ ಮತ್ತು ಹಿಡಿತಕ್ಕೆ ಚಾಲಕೇಯುವಿಕೆಗಳ ಅರಿವು
+- **ದೃಶ್ಯ ವಿನ್ಯಾಸ**: ಸ್ಪಷ್ಟ, ಆಕರ್ಷಕ ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಣೆಯ ಅರ್ಹತೆಗಳ ರಚನೆ
+- **ವ್ಯವಸ್ಥೆಯ ಏಕೀಕರಣ**: ಸಮಗ್ರ ಅನುಭವಕ್ಕೆ ಅನೇಕ ಆಟ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸಂಪರ್ಕಿಸುವುದು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಷ್ಕರಣೆ**: ಪರಿಣಾಮಕಾರಿ ಚಿತ್ರಣ ಮತ್ತು ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+- **ಪ್ರವೇಶಾರ್ಹತೆ**: ವಿಭಿನ್ನ ಕೌಶಲ್ಯ ಮಟ್ಟಗಳು ಮತ್ತು ಆಟಗಾರ ಅಗತ್ಯಗಳಿಗೆ ವಿನ್ಯಾಸ
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು ಈಗ ಸುಧಾರಿತ ಆಟ ವಿನ್ಯಾಸ ಮಾದರಿಗಳನ್ನು ಅನ್ವೇಷಿಸಲು, ವಿಶ್ಲೇಷಣೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಜಾರಿಗೆ ತರಲು ಅಥವಾ ಆಟ ಹಣಕಾಸು ಮತ್ತು ಆಟಗಾರ ಹಿಡಿತ ತಂತ್ರಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಲು ಸಿದ್ಧ!
+
+🌟 **ಸಾಧನೆ ಅನ್ಲಾಕ್ ಆಗಿದೆ**: ನೀವು ವೃತ್ತಿಪರ ಆಟ ವಿನ್ಯಾಸ ತತ್ವಗಳೊಂದಿಗೆ ಪೂರ್ಣ ಆಟಗಾರ ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಿ!
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಈ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ಸ್ಪೇಸ್ ಆಟದ ಅಂಕೆ ವ್ಯವಸ್ಥೆಯನ್ನು ಸುಧಾರಿಸಿ, ಲೊಕಲ್ ಸ್ಟೋರೇಜ್‌ನಲ್ಲಿ ಕಾಪಿ ಉಳಿಸುವ ಹೈ ಸ್ಕೋರ್ ಸಿಸ್ಟಮ್ ಮತ್ತು ಬೋನಸ್ ಅಂಕೆಗಳು (ಕಾಮ್ಬೋ ಸಿಸ್ಟಮ್) ಜಾರಿಗೆ ತರಲು ಮತ್ತು ಬೇರೆ ಬೇರೆ ಶತ್ರು ಪ್ರಕಾರಗಳಿಗೆ ವಿಭಿನ್ನ ಅಂಕೆ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಿ. ಆಟಗಾರನು ಹೊಸ ಹೈ ಸ್ಕೋರ್ ಸಾಧಿಸಿದಾಗ ದೃಶ್ಯ ಸೂಚಕವನ್ನು ಕೊಂಡೊಯ್ಯಿ ಮತ್ತು ಗೇಮ್ ಪರದೆ ಮೇಲೆ ಪ್ರಸ್ತುತ ಹೈ ಸ್ಕೋರ್ ಅನ್ನು ತೋರಿಸಿ.
+
+## 🚀 ಸವಾಲು
+
+ನಿಮ್ಮ ಬಳಿ ಈಗ ಅಂಕೆಗಳು ಮತ್ತು ಜೀವಗಳೊಂದಿಗೆ ಕಾರ್ಯಾತ್ಮಕ ಆಟವಿದೆ. ಆಟಗಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಮತ್ತಷ್ಟು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪರಿಗಣಿಸಿ.
+
+## ಉಪನ್ಯಾಸದ ನಂತರದ ಕ್ವಿಜ್
+
+[ಉಪನ್ಯಾಸದ ನಂತರದ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/38)
+
+## ಪರಿಶೀಲನೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯನ
+
+ಇನ್ನಷ್ಟು ಸಂಶೋಧಿಸಲು ಬಯಸುತ್ತೀರಾ? ತೊಲಗಿನಲ್ಲಿ ಆಟದ ಅಂಕೆ ಮತ್ತು ಜೀವ ವ್ಯವಸ್ಥೆಗಳ ವಿವಿಧ ವಿಧಾನಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ. ಅಲ್ಲಿ ಅಂಜನೇಯ ಆಟ ಎಂಜಿನ್‌ಗಳಿವೆ, ಉದಾಹರಣೆಗೆ [PlayFab](https://playfab.com) ಇದು ಅಂಕೆ, ಲೀಡರ್ಬೋರ್ಡ್‌ಗಳು ಮತ್ತು ಆಟಗಾರ ಪ್ರಗತಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದನ್ನು ಏಕೆ ನಿಮ್ಮ ಆಟವನ್ನು ಮುಂದಿನ ಹಂತಕ್ಕೆ ತೆಗೆದುಕೊಂಡು ಹೋಗಬಹುದು ಎಂದು ಯೋಚಿಸಿ?
+
+## ನಿಯೋಜನೆ
+
+[ಅಂಕೆ ಆಟವನ್ನು ನಿರ್ಮಿಸಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**_DISCLAIMER_**:
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಡಾಕ್ಯುಮೆಂಟ್ ಅದರ ಪರಿಸರ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿರುತ್ತದೆ ಎಂದು ಪರಿಗಣಿಸುವುದು ಉತ್ತಮ. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆ سبب ಆಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/5-keeping-score/assignment.md

@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2026-01-08T14:19:08+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಸ್ಕೋರಿಂಗ್ ಆಟವನ್ನು ರಚಿಸು
+
+## ಸೂಚನೆಗಳು
+
+ನೀವು ಜೀವ ಮತ್ತು ಅಂಕೆಗಳನ್ನ ರಚನಾತ್ಮಕ ರೀತಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವ ಆಟವನ್ನು ರಚಿಸು. ಜೀವನವನ್ನು ಹೃದಯಗಳಾಗಿ ಮತ್ತು ಅಂಕೆಗಳನ್ನ ಪರದೆತಳ ಮಧ್ಯಭಾಗದಲ್ಲಿ ದೊಡ್ಡ ಸಂಖ್ಯೆಯಾಗಿ ತೋರಿಸುವ ಸಲಹೆ ಇದೆ. ಇಲ್ಲಿ [ಉಚಿತ ಆಟ ಸಂಪನ್ಮೂಲಗಳು](https://www.kenney.nl/) ಅನ್ನು ನೋಡಿ
+
+# ಮೌಲ್ಯಮಾಪನ ಮಾನದಂಡ
+
+| ಮೌಲ್ಯಮಾಪನ ಕ್ರಮಗಳು | ಉತ್ಕೃಷ್ಟ | ತೃಪ್ತಿಕರ | ಸುಧಾರಣೆ ಅಗತ್ಯವಿದೆ |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | ಪೂರ್ಣ ಆಟವನ್ನು ನೀಡಲಾಗಿದೆ | ಆಟದ ಕೆಲವು ಭಾಗಗಳನ್ನು ತೋರಿಸಲಾಗಿದೆ | ಭಾಗಶಃ ಆಟದಲ್ಲಿ ದೋಷಗಳಿವೆ |
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅನುಧಾನ**:  
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸಮಗ್ರತೆಯನ್ನು ಸಾಧಿಸಲು ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನದಲ್ಲಿ ಇಡಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಾಖಲೆ ಅಧಿಕಾರಿಯ ಉಲ್ಲೇಖವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಸೂಕ್ಷ್ಮ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸುವುದು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆ ಸಹಿತ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೆ ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/5-keeping-score/solution/README.md

@@ -0,0 +1,17 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2026-01-08T15:03:28+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "kn"
+}
+-->
+ಇದು ಒಂದು ಸ್ಥಳಧಾರಕ, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಬಿಡಲಾಗಿದೆ
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತಪ್ಪು ಜಾಹೀರಾತು**:  
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶुद्धತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುವುದರೊಂದಿಗೆ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತಾಂಶಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆವೇ ಪ್ರಾಮಾಣಿಕ ಮೂಲವಾಗಿಯೇ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗೆ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದ ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಗಾಗಿ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥೈಸುವಿಕೆಗಳಿಗೋ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/5-keeping-score/your-work/README.md

@@ -0,0 +1,17 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2026-01-08T15:02:40+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "kn"
+}
+-->
+ಇದು ಒಂದು ಸ್ಥಳಾಧಿಕಾರಿ, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ bırakಲಾಗಿದೆ
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅತ್ಯಾವಣಿ**:  
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ಖಚಿತತೆಯನ್ನು ಒದಗಿಸಲು ಪ್ರಯತ್ನಿಸುವುದಾದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹದು ಎಂಬ ವಿಷಯದ ಜಾಗರೂಕತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ನಿರ್ದಿಷ್ಟ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅಂಧವಿಶ್ವಾಸಗಳು ಅಥವಾ ತಪ್ಪು ಪರಿಕಲ್ಪನೆಗಳಿಗಾಗಿ ನಾವು ಜವಾಬ್ದಾರಿತರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/6-end-condition/README.md

@@ -0,0 +1,685 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4b78043f4d64bf3ee24e0689b8b391d",
+  "translation_date": "2026-01-08T13:55:35+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "kn"
+}
+-->
+# ಸ್ಪೇಸ್ ಗೇಮ್ ಭಾಗ 6: ಅಂತ್ಯ ಮತ್ತು ಮರುಪ್ರಾರಂಭ
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಆಟ ಪೂರ್ಣಗೊಳ್ಳುವ ಯಾತ್ರೆ
+    section ಅಂತಿಮ ಪರಿಸ್ಥಿತಿಗಳು
+      ಜಯ/ಹೋಲುವ ಸ್ಥಿತಿಗಳನ್ನುนิ
+      ನಿರ್ವಹಿಸಿ: 3: Student
+      ನಿಯಮ ಪರಿಶೀಲನೆ ಜಾರಿಗೆ ತರಲು: 4: Student
+      ಸ್ಥಿತಿ ಪರಿವರ್ತನೆಗಳನ್ನು ನಿರ್ವಹಿಸಿ: 4: Student
+    section ಆಟಗಾರ ಅನುಭವ
+      ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡು: 4: Student
+      ಪುನರ್ ಪ್ರಾರಂಭ ಯಂತ್ರಗಳನ್ನು ರಚಿಸಿ: 5: Student
+      ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಮೆಕ್ಕೈ: 5: Student
+    section ವ್ಯವಸ್ಥೆ ಏಕೀಕರಣ
+      ಆಟ ಜೀವನಚಕ್ರವನ್ನು ನಿರ್ವಹಿಸಿ: 5: Student
+      ಮೆಮೊರಿ ಶುದ್ಧೀಕರಣ ನಿರ್ವಹಣೆ: 5: Student
+      ಸಂಪೂರ್ಣ ಅನುಭವವನ್ನು ರಚಿಸಿ: 5: Student
+```
+ಪ್ರತಿಯೊಂದು ಅದ್ಭುತ ಗೇಮ್‌ಗೆ ಸ್ಪಷ್ಟ ಅಂತ್ಯ ನಿಯಮಗಳು ಮತ್ತು ಸುಗಮ ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಯ ಅಗತ್ಯವಿದೆ. ನೀವು ಚಲನೆ, ಯುದ್ಧ ಮತ್ತು ಅಂಕೆಗಳೊಂದಿಗೆ ಒಬ್ಬ ಸುಂದರ ಸ್ಪೇಸ್ ಗೇಮ್ ಅನ್ನು ರಚಿಸಿದ್ದೀರಿ – ಈಗ ಅದು ಸಂಪೂರ್ಣತೆಯೂಂಟುಮಾಡುವ ಅಂತಿಮ ಭಾಗಗಳನ್ನು ಸೇರಿಸುವ ಸಮಯವಾಗಿದೆ.
+
+ನಿಮ್ಮ ಗೇಮ್ ಪ್ರಸ್ತುತ ಅಂತಹ Voyager probes ಮಾದರಿಯಂತೆ ನಿರಂತರವಾಗಿ ನಡೆಯುತ್ತಿದೆ – NASA 1977 ರಲ್ಲಿ ಬಿಡುಗಡೆ ಮಾಡಿದವು ಮತ್ತು ಅನೇಕ ದಶಕಗಳಿಂದ ಜಾಗತಿಕ ಸ್ಥಳಾಂತರವನ್ನು ಮುಂದುವರೆಸಿವೆ. ಇದುಬಾಗಿಲಿಗಾಗಿ ಸೂಕ್ತವಾಗಿದ್ದರೂ, ಗೇಮ್‌ಗಳು ತೃಪ್ತಿದಾಯಕ ಅನುಭವವನ್ನು ಉಂಟುಮಾಡಲು ನಿರ್ದಿಷ್ಟ ಅಂತ್ಯವರ್ತನೆಗಳನ್ನು ಬೇಕು.
+
+ಇಂದು ನಾವು ಸರಿಯಾದ ಜಯ/ಜೇತೆ ನಿಯಮಗಳು ಮತ್ತು ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಯನ್ನು ಇಂಪ್ಲಿಮೆಂಟ್ ಮಾಡಲಿದ್ದೇವೆ. ಈ ಪಾಠದ ಕೊನೆಗೂ, ನೀವು ಆಟಗಾರರು ಪೂರ್ಣಗೊಳಿಸಿ ಮರುಕಳಿಸಬಹುದಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿದ ಸೊಗಸಾದ ಗೇಮ್ ಅನ್ನು ಹೊಂದಿರುತ್ತೀರಿ, ಆದುದರಿಂದ ವರ್ಚುವಲ್ ಕ್ಲಾಸಿಕ್ ಆರ್ಕೆಡ್ ಗೇಮ್‌ಗಳಂತೆಯೇ ವಿಷಯ ನಿರ್ಧರಿಸುತ್ತದೆ.
+
+```mermaid
+mindmap
+  root((ಆಟ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆ))
+    End Conditions
+      Victory States
+      Defeat Conditions
+      Progress Tracking
+      State Validation
+    Player Feedback
+      Visual Messages
+      Color Psychology
+      Clear Communication
+      Emotional Response
+    State Management
+      Game Loop Control
+      Memory Cleanup
+      Object Lifecycle
+      Event Handling
+    Restart Systems
+      Input Handling
+      State Reset
+      Fresh Initialization
+      User Experience
+    Polish Elements
+      Message Display
+      Smooth Transitions
+      Error Prevention
+      Accessibility
+```
+## ಪಾಠ ಮುನ್ನ ಪರೀಕ್ಷೆ
+
+[ಪೂರ್ವ ಪಾಠ ಪರೀಕ್ಷೆ](https://ff-quizzes.netlify.app/web/quiz/39)
+
+## ಗೇಮ್ ಅಂತ್ಯ ದಿನಾಂಕಗಳ ತಿಳುವಳಿಕೆ
+
+ನಿಮ್ಮ ಗೇಮ್ ಯಾವಾಗ ಅಂತ್ಯಗೊಳ್ಳಬೇಕು? ಈ ಮೂಲಭೂತ ಪ್ರಶ್ನೆಯು ಆರಂಭಿಕ ಆರ್ಕೆಡ್ ಯುಗದಿಂದಲೂ ಗೇಮ್ ವಿನ್ಯಾಸಕ್ಕೆ ಪ್ರಭಾವ ಬೀರಿದೆ. ಪ್ಯಾಕ್-ಮ್ಯಾನ್ ಭಾವ ಸ್ವಲ್ಪ ಇಲ್ಲದ ಪುತ್ರವಿದ್ದರೆ ಅಥವಾ ಎಲ್ಲ ಡಾಟ್‌ಗಳನ್ನು ಮುಗಿಸಿದರೆ ಅಂತ್ಯವಾಗುತ್ತದೆ, ಆದರೆ ಸ್ಪೇಸ್ ಇನ್ವೇಡರ್ಸ್‍ನಲ್ಲಿಯೂ ವೈಜ್ಞಾನಿಕ ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ಕೊಲಿಸುವ ಅಥವಾ ಅಲಿಯನ್ಗಳು ಕೆಳಗೆ ತಲುಪಿಸುವಾಗ ಅಂತ್ಯಗೊಳ್ಳುತ್ತದೆ.
+
+ನೀವು ಗೇಮ್ ರಚಯಿತ, ಜಯ ಮತ್ತು ಸೋಲು ನಿಯಮಗಳನ್ನು ನಿರ್ಧರಿಸುತ್ತೀರಿ. ನಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮ್‌ಗೆ, ಇಲ್ಲಿ ಆಸಕ್ತಿಕರ ಆಟವನ್ನು ಸೃಷ್ಟಿಸುವ ಸಾಂಪ್ರದಾಯಿತ ವಿಧಾನಗಳಿವೆ:
+
+```mermaid
+flowchart TD
+    A["🎮 ಆಟ ಪ್ರಾರಂಭ"] --> B{"ಶರತ್ತು ಪರಿಶೀಲಿಸಿ"}
+    
+    B --> C["ಶತ್ರು ಸಂಖ್ಯೆ"]
+    B --> D["ನಾಯಕನ ಬಾಳುಗಳು"]
+    B --> E["ಸ್ಕೋರ್ ಗಡಿಬಿಡಿ"]
+    B --> F["ಮಟ್ಟ ಪ್ರಗತಿ"]
+    
+    C --> C1{"ಶತ್ರುಗಳು = 0?"}
+    D --> D1{"ಬಾಳುಗಳು = 0?"}
+    E --> E1{"ಸ್ಕೋರ್ ≥ ಗುರಿ?"}
+    F --> F1{"ಉದ್ದೇಶಗಳು ಪೂರ್ಣವಾದವೆಯೇ?"}
+    
+    C1 -->|ಹೌದು| G["🏆 ವಿಜയം"]
+    D1 -->|ಹೌದು| H["💀 ಸೋಲು"]
+    E1 -->|ಹೌದು| G
+    F1 -->|ಹೌದು| G
+    
+    C1 -->|ಇಲ್ಲ| B
+    D1 -->|ಇಲ್ಲ| B
+    E1 -->|ಇಲ್ಲ| B
+    F1 -->|ಇಲ್ಲ| B
+    
+    G --> I["🔄 ಪುನರ್ಾರಂಭ ಆಯ್ಕೆ"]
+    H --> I
+    
+    style G fill:#e8f5e8
+    style H fill:#ffebee
+    style I fill:#e3f2fd
+```
+- **`N` ಶತ್ರು ಹಡಗುಗಳನ್ನು ನಿರ್ಮುಳುಮಾಡಲಾಗಿದೆ**: ವಿವಿಧ ಹಂತಗಳಾಗಿ ಗೇಮ್ ಅನ್ನು ವಿಭಜಿಸಿದಾಗ, ಹಂತವನ್ನು ಮುಗಿಸಲು `N` ಶತ್ರು ಹಡಗುಗಳನ್ನು ಧ್ವಂಸ ಮಾಡಬೇಕಾಗುತ್ತದೆ, ಇದು ಸಾಮಾನ್ಯ.
+- **ನಿಮ್ಮ ಹಡಗು ನಿರ್ಮುಳುಗೊಂಡಿದೆ**: ಕೆಲ ಗೇಮ್‌ಗಳಲ್ಲಿ ಹಡಗು ಧ್ವಂಸವಾದರೆ ನೀವು ಗೇಮ್ ಸೋಲುತ್ತೀರಿ. ಇನ್ನೊಂದು ಸಾಮಾನ್ಯ ವಿಧಾನ ಗಾಳಿಯಲ್ಲಿ ಜೀವನ ಪ್ರಮಾಣಗಳ ಕಲ್ಪನೆ ಇದೆ. ಪ್ರತಿ ಬಾರಿ ಹಡಗು ಧ್ವಂಸವಾದಾಗ ಒಂದು ಜೀವ ಕಳೆದುಕೊಳ್ಳುತ್ತದೆ. ಎಲ್ಲಾ ಜೀವಗಳು ಹದಗೆಟ್ಟಾಗ ನೀವು ಗೇಮ್ ಸೋಲುತ್ತೀರಿ.
+- **ನೀವು `N` ಅಂಕೆಗಳನ್ನು ಸಂಗ್ರಹಿಸಿದ್ದೀರಿ**: ಮತ್ತೊಂದು ಸಾಮಾನ್ಯ ಅಂತ್ಯದ ಷರತ್ತು ಅಂಕೆಗಳನ್ನು ಸಂಗ್ರಹಿಸುವುದು. ನೀವು ಅಂಕೆಗಳನ್ನು ಪಡೆಯುವ ವಿಧಾನವು ನಿಮ್ಮ ಮೇರೆಗೆ ಆದರೆ ಸಾಮಾನ್ಯವಾಗಿ ಶತ್ರು ಹಡಗುಗಳನ್ನು ನಾಶ ಮಾಡುವುದನ್ನು ಅಥವಾ ಧ್ವಂಸವಾದಾಗ ಬಿಳಿಗ್ಗುವ ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸುವ ಮೂಲಕ ಅಂಕೆ ನೀಡಲಾಗುತ್ತದೆ.
+- **ಒಂದು ಹಂತ ಪೂರ್ಣಮಾಡುವುದು**: ಇದು ಹಲವು ಷರತ್ತುಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು ಏನೆಂದರೆ `X` ಶತ್ರು ಹಡಗುಗಳು ಧ್ವಂಸವಾಗಿರಬಹುದು, `Y` ಅಂಕೆಗಳ ಸಂಗ್ರಹವಿರಬಹುದು ಅಥವಾ ವಿಶೇಷ ವಸ್ತು ಸಂಗ್ರಹದ ಮೇಲಾಯಿತು.
+
+## ಗೇಮ್ ಮರುಪ್ರಾರಂಭ ಕಾರ್ಯಕ್ಷಮತೆ ಅನುಷ್ಠಾನ
+
+ಸರಿಯಾದ ಮರುಪ್ರಾರಂಭ ಯಂತ್ರವು ಗೇಮ್‌ಗಳನ್ನು ಮರುಕಳಿಸುವಿಕೆಗೆ ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ. ಆಟಗಾರರು ಗೇಮ್ ಪೂರ್ಣಮಾಡಿದಾಗ (ಅಥವಾ ಸೋಲಿದಾಗ) ಕೂಡ ತಕ್ಷಣ ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಲು ಇಚ್ಛಿಸುತ್ತಾರೆ - ಅಂಕೆಗಳನ್ನು ಮೀರಿಸಲು ಅಥವಾ ಪ್ರದರ್ಶನ ಸುಧಾರಿಸಲು.
+
+```mermaid
+stateDiagram-v2
+    [*] --> Playing: ಆಟ ಪ್ರಾರಂಭ
+    Playing --> Victory: ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ನಾಶಮಾಡಲಾಗಿದೆ
+    Playing --> Defeat: ಜೀವನಗಳು = 0
+    
+    Victory --> MessageDisplay: ಗೆಲುವಿನ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ
+    Defeat --> MessageDisplay: ಸೋಲಿನ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ
+    
+    MessageDisplay --> WaitingRestart: ಎಂಟರ್ ಒತ್ತಲು ಸೂಚನೆ
+    WaitingRestart --> Resetting: ಎಂಟರ್ ಕೀ ಒತ್ತಲಾಗಿದೆ
+    
+    Resetting --> CleanupMemory: ಇಂಟರ್ವಾಲ್ಗಳನ್ನು ಕ್ಲೀನ್ ಮಾಡು
+    CleanupMemory --> ClearEvents: ಶ್ರೋತಾಗಳನ್ನು ತೆಗೆದುಹಾಕು
+    ClearEvents --> InitializeGame: ನವೀನ ಪ್ರಾರಂಭ
+    InitializeGame --> Playing: ಹೊಸ ಆಟ ಆರಂಭ
+    
+    note right of MessageDisplay
+        ಬಣ್ಣ-кೋಡ್ ಮಾಡಿದ ಪ್ರತಿಕ್ರಿಯೆ:
+        ಹಸಿರು = ಜಯ
+        ಕೆಂಪು = ಸೋಲು
+    end note
+    
+    note right of Resetting
+        ಪೂರ್ಣ ಸ್ಥಿತಿ ಮರುಹೊಂದಿಕೆ
+        ಮೆಮೊರಿ ಲೀಕ್ಸ್ ತಪ್ಪಿಸುತ್ತದೆ
+    end note
+```
+ಟೇಟ್ರಿಸ್ ಇದು ಸ್ಪಷ್ಟವಾಗಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ: ನಿಮ್ಮ ಬ್ಲಾಕ್ ಗಳು ಟಾಪ್ ತಲುಪಿದಾಗ, ನೀವು ಕಠಿಣ ಮೆನುಗಳನ್ನು ನೆಡೆಸದೆ ತಕ್ಷಣ ಹೊಸ ಗೇಮ್ ಪ್ರಾರಂಭಿಸಬಹುದು. ನಾವು ಸರಿಯಾದ ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸುವೆವು, ಇದು ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಸ್ವಚ್ಚವಾಗಿ ಮರುಹೊಂದಿಸಿ ಆಟಗಾರರನ್ನು ತ್ವರಿತವಾಗಿ ಮತ್ತೆ ಆಡಲು ಒದಗಿಸುತ್ತದೆ.
+
+✅ **ಚಿಂತನೆ**: ನೀವು ಆಡಿದ ಗೇಮ್‌ಗಳ ಬಗ್ಗೆ ಯೋಚಿಸಿ. ಅವು ಯಾವ ಷರತ್ತುಗಳಲ್ಲಿ ಮುಕ್ತಾಯಗೊಳ್ಳುತ್ತವೆ ಮತ್ತು ಮರುಪ್ರಾರಂಭಕ್ಕೆ ನೀವು ಹೇಗೆ ಪ್ರೇರೇಪಿತರಾಗುತ್ತೀರಿ? ಮರುಪ್ರಾರಂಭ ಅನುಭವವನ್ನು ಸುಗಮವೆಂಬುದನ್ನು ಏನು ಮಾಡುತ್ತದೆ ಮತ್ತು ನೆರೆಹೊರೆಯಾಗಿ ಮಾಡಿ?
+
+## ನೀವು ಏನು ರಚಿಸುವಿರಿ
+
+ನೀವು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸಂಪೂರ್ಣ ಆಟ ಅನುಭವವಾಗುವಂತೆ ಪರಿವರ್ತಿಸುವ ಅಂತಿಮ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವಿರಿ. ಈ ಅಂಶಗಳು ಸೋಗಸಾದ ಆಟಗಳನ್ನು ಮೂಲ ಪ್ರೋಟೋಟೈಪ್ಗಳಿಂದ ವಿಭಿನ್ನಗೊಳಿಸುತ್ತವೆ.
+
+**ಇವೆ ಅಂತಿಮವಾಗಿ ನಾವು ಸೇರಿಸುವುದು:**
+
+1. **ಮರೆಯಲಾರದ ಜಯ ಷರತ್ತು**: ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ಸುಳಿವಿನ ಜೊತೆ ನಾಶ ಮಾಡಿ ಮತ್ತು ನಿಜವಾದ ಹಬ್ಬವನ್ನು ಅನುಭವಿಸಿ (ನೀವು ಬಯಸಿದಂತೆ!)
+2. **ಸೋಲಿನ ಷರತ್ತು**: ಜೀವನ ಕಡಿಮೆಯಾದ ಮೇಲೆ ಸೋಲುಗೊಳ್ಳುವ ಪರದೆ ನೋಡಿ
+3. **ಮರುಪ್ರಾರಂಭ ಯಂತ್ರ**: Enter ಒತ್ತಿ ತಕ್ಷಣ ಮತ್ತೆ ಪ್ರಾರಂಭಿಸಿ - ಏಕೆಂದರೆ ಒಂದೇ ಗೇಮ್ ಸಾಕಾಗದು
+4. **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಪ್ರತಿ ಬಾರಿ ಮುಕ್ತ ಮತ್ತು ಸ್ವಚ್ಚ ಸ್ಥಿತಿ - ಯಾವುದೇ ಉಳಿದ ಶತ್ರುಗಳು ಅಥವಾ ಕ್ರೇಜಿ ದೋಷಗಳಿಲ್ಲ
+
+## ಪ್ರಾರಂಭಿಸೋಣ
+
+ನಿಮ್ಮ ಡೆವಲಪ್ಮೆಂಟ್ ಪರಿಸರವನ್ನು ಸಿದ್ಧಪಡಿಸೋಣ. ನೀವು ಹಿಂದಿನ ಪಾಠಗಳಿಂದ ಎಲ್ಲಾ ಸ್ಪೇಸ್ ಗೇಮ್ ಫೈಲನ್ನು ಹೊಂದಿರಬೇಕು.
+
+**ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಹೀಗಿರಬೇಕು:**
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+**ನಿಮ್ಮ ಡೆವಲಪ್ಮೆಂಟ್ ಸರ್ವರ್ ಪ್ರಾರಂಭಿಸಿ:**
+
+```bash
+cd your-work
+npm start
+```
+
+**ಈ ಕಮಾಂಡ್:**
+- `http://localhost:5000` ನಲ್ಲಿ ಸ್ಥಳೀಯ ಸರ್ವರ್ ಓಡಿಸುತ್ತದೆ
+- ನಿಮ್ಮ ಫೈಲ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಸರ್ವ್ ಮಾಡುತ್ತದೆ
+- ನೀವು ಬದಲಾವಣೆ ಮಾಡಿದಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರિફ್ರೆಶ್ ಮಾಡುತ್ತದೆ
+
+ಬ್ರೌಸರ್‌ನಲ್ಲಿ `http://localhost:5000` ತೆರೆಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ಗೇಮ್ ಓಡಿುತಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನೀವು freeely ಚಲಿಸಲು, ಶೂಟ್ ಮಾಡಲು ಮತ್ತು ಶತ್ರುಗಳೊಂದಿಗೆ ಸಂವದಿಸಲು ಸಾಧ್ಯವಾಗಬೇಕು. ದೃಢಿ ಮಾಡಿದ ಬಳಿಕ, ನಾವು ಅನುಷ್ಠಾನಕ್ಕೆ ಮುಂದುವರೆಯಬಹುದು.
+
+> 💡 **ವೃತ್ತಿಪರ ಸಲಹೆ**: Visual Studio Code ನಲ್ಲಿ ಎಚ್ಚರಿಕೆ ತಪ್ಪಿಸಲು, `window.onload` ಫಂಕ್ಷನ್ನಿನೊಳಗೆ `gameLoopId` ಘೋಷಿಸುವ ಬದಲು ಫೈಲಿನ ಮೇಲೇ `let gameLoopId;` ಎಂದು ಘೋಷಿಸಿ. ಇದು ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಘೋಷಣೆಯ ಉತ್ತಮ ಅಭ್ಯಾಸ.
+
+```mermaid
+flowchart TD
+    A["1. ಸ್ಥಿತಿ ಹಾದುಹೋಗುವುದು"] --> B["2. ಘಟನೆ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು"]
+    B --> C["3. ಸಂದೇಶ ಸ್ಥಿರಾಂಕಗಳು"]
+    C --> D["4. ಮರುಪ್ರಾರಂಭ ನಿಯಂತ್ರಣಗಳು"]
+    D --> E["5. ಸಂದೇಶ ಪ್ರದರ್ಶನ"]
+    E --> F["6. ವ್ಯವಸ್ಥೆ ಮರುಹೊಂದಿಸುವುದು"]
+    
+    G["isHeroDead()\nisEnemiesDead()"] --> A
+    H["اصطಭಾದನೆಯ ಘಟನೆಗಳು\nಆಟ ಅಂತ್ಯ ಘಟನೆಗಳು"] --> B
+    I["GAME_END_WIN\nGAME_END_LOSS"] --> C
+    J["ಪ್ರವೇಶ ಕಡ್ತೆ\nಮರುಪ್ರಾರಂಭ ಟ್ರಿಗರ್"] --> D
+    K["ಜಯ/ಪರಾಜಯ\nಬಣ್ಣ-ಕೋಡಿತ ಪಠ್ಯ"] --> E
+    L["ಸ್ಥಿತಿ ಶುದ್ಧೀಕರಣ\nಹೊಸ ಪ್ರಾರಂಭ"] --> F
+    
+    F --> M["🎮 ಪೂರ್ಣ ಆಟ"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
+## ಅನುಷ್ಠಾನ ಹಂತಗಳು
+
+### ಹಂತ 1: ಅಂತ್ಯ ಷರತ್ತುಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಫಂಕ್ಷನ್‌ಗಳು ರಚನೆ
+
+ಗೇಮ್ ಯಾವಾಗ ಅಂತ್ಯವಾಗಬೇಕು ಎಂಬುದನ್ನು নজರಿಡಲು ಫಂಕ್ಷನ್ಗಳ ಅಗತ್ಯವಿದೆ. ಅಂತಾರಾಷ್ಟ್ರೀಯ ಸ್ಪೇಸ್ ಸ್ಟೇಷನ್‌ನ ಸենսಾರ್‌ಗಳು ಪ್ರಮುಖ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರಂತರವಾಗಿ ಪರಿಶೀಲಿಸುವಂತೆಯೇ, ಈ ಫಂಕ್ಷನ್‌ಗಳು ಗೇಮ್ ಸ್ಥಿತಿಯನ್ನು ನಿರಂತರವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತವೆ.
+
+```javascript
+function isHeroDead() {
+  return hero.life <= 0;
+}
+
+function isEnemiesDead() {
+  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+  return enemies.length === 0;
+}
+```
+
+**ಇವು ಪಶ್ಚಾತ್ತಲದಲ್ಲಿ ಏನಾಗುತ್ತಿದೆ:**
+- ನಮ್ಮ ಹೀರೋ ಜೀವಗಳಿಂದ ಬಿತ್ತಲಾಗಿದೆಯೇ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ (ಅಯ್ಯೋ!)
+- ಈಟು ಶತ್ರುಗಳು ಇನ್ನೂ ಎಷ್ಟು ಬಾಳಿರುತ್ತಿವೆ ಎಣಿಸುತ್ತದೆ
+- ಶತ್ರುಗಳ ಹರಿತ ಶೂನ್ಯವಾದಾಗ `true` ಮರುಳುಮಾಡುತ್ತದೆ
+- ಸರಳ ಸತ್ಯ/ಅಸತ್ಯ ಲಾಜಿಕ್ ಬಳಸಿ ಸರಳವಾಗಿರುತ್ತದೆ
+- ಎಲ್ಲಾ ಗೇಮ್ ವಸ್ತುಗಳನ್ನೊಳಗೊಂಡು ಬದುಕಿದ್ದವರನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುತ್ತದೆ
+
+### ಹಂತ 2: ಅಂತ್ಯ ಷರತ್ತುಗಳಿಗಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ನವೀಕರಿಸಿ
+
+ಈಗ ನಾವು ಈ ಷರತ್ತು ಪರಿಶೀಲನೆಗಳನ್ನು ಗೇಮ್ ಈವೆಂಟ್ ವ್ಯವಸ್ಥೆಗೆ ಸಂಪರ್ಕಿಸುವೆವು. ಪ್ರತೀ ಬಾರಿ ಸಂಕುಲನ ಸಂಭವಿಸಿದಾಗ ಗೇಮ್ ಅಂತ್ಯ ಷರತ್ತು ಸೃಷ್ಟವಾಗುತ್ತದೆಯೆ ಎಂದು ಮೌಲ್ಯಮಾಪನ ಮಾಡುತ್ತದೆ. ಇದರಿಂದ ಪ್ರಮುಖ ಗೇಮ್ ಈವೆಂಟ್‌ಗಳಿಗೆ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ ಸಿಗುತ್ತದೆ.
+
+```mermaid
+sequenceDiagram
+    participant Collision
+    participant GameLogic
+    participant Conditions
+    participant EventSystem
+    participant Display
+    
+    Collision->>GameLogic: ಲೇಸರ್ ಶತ್ರುವನ್ನು ಹೊಡೆತ ಮಾಡುತ್ತದೆ
+    GameLogic->>GameLogic: ವಸ್ತುಗಳನ್ನು ನಾಶಮಾಡಿ
+    GameLogic->>Conditions: isEnemiesDead() ಪರಿಶೀಲಿಸಿ
+    
+    alt ಎಲ್ಲಾ ಶತ್ರುಗಳು ಸೋಲಿಹೋಗಿವೆ
+        Conditions->>EventSystem: GAME_END_WIN ಅನ್ನು ಹೊರತುಮಾಡು
+        EventSystem->>Display: ಜಯದ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ
+    else ಶತ್ರುಗಳು ಉಳಿದಿವೆ
+        Conditions->>GameLogic: ಆಟ ಮುಂದುವರಿಸಿ
+    end
+    
+    Collision->>GameLogic: ಶತ್ರು ಹೀರೋವನ್ನು ಹೊಡೆತ ಮಾಡುತ್ತದೆ
+    GameLogic->>GameLogic: ಬದುಕುಗಳನ್ನು ಇಳಿಮೆ ಮಾಡು
+    GameLogic->>Conditions: isHeroDead() ಪರಿಶೀಲಿಸಿ
+    
+    alt ಜೀವಗಳು = 0
+        Conditions->>EventSystem: GAME_END_LOSS ಅನ್ನು ಹೊರತುಮಾಡು
+        EventSystem->>Display: ಸೋಲಿನ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ
+    else ಜೀವಗಳು ಉಳಿದಿವೆ
+        GameLogic->>Conditions: isEnemiesDead() ಪರಿಶೀಲಿಸಿ
+        alt ಎಲ್ಲಾ ಶತ್ರುಗಳು ಸೋಲಿಹೋಗಿವೆ
+            Conditions->>EventSystem: GAME_END_WIN ಅನ್ನು ಹೊರತುಮಾಡು
+        end
+    end
+```
+```javascript
+eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+    first.dead = true;
+    second.dead = true;
+    hero.incrementPoints();
+
+    if (isEnemiesDead()) {
+      eventEmitter.emit(Messages.GAME_END_WIN);
+    }
+});
+
+eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+    enemy.dead = true;
+    hero.decrementLife();
+    if (isHeroDead())  {
+      eventEmitter.emit(Messages.GAME_END_LOSS);
+      return; // ವಿಜಯದ ಹಿಂದಿನ ನಷ್ಟ
+    }
+    if (isEnemiesDead()) {
+      eventEmitter.emit(Messages.GAME_END_WIN);
+    }
+});
+
+eventEmitter.on(Messages.GAME_END_WIN, () => {
+    endGame(true);
+});
+  
+eventEmitter.on(Messages.GAME_END_LOSS, () => {
+  endGame(false);
+});
+```
+
+**ಇಲ್ಲಿ ಏನಾಗುತ್ತಿದೆ:**
+- **ಲೇಸರ್ ಶತ್ರುಗಳಿಗೆ ತಗ್ಗುತ್ತದೆ**: ಇಬ್ಬರೂ ಕಾಣೆಯಾಗುತ್ತಾರೆ, ನೀವು ಅಂಕೆಗಳನ್ನು ಪಡೆಯುತ್ತೀರಿ ಮತ್ತು ನೀವು ಗೆದ್ದಿದ್ದೀರಾ ಎಂದು ಪರಿಶೀಲನೆ ಮಾಡಲಾಗುತ್ತದೆ
+- **ಶತ್ರು ನಿಮಗೆ ತಗ್ಗುತ್ತದೆ**: ನೀವು ಒಂದು ಜೀವ ಕಳೆದುಕೊಳ್ಳುತ್ತೀರಿ ಮತ್ತು ನೀವು ಇನ್ನೂ ಶ್ವಾಸ ಇರುವಿರಾ ಎಂದು ಪರಿಶೀಲಿಸಲಾಗುತ್ತದೆ
+- **ಬುದ್ಧಿವಂತಿಕೆ ಕ్రమಬದ್ಧತೆ**: ಮೊದಲು ಸೋಲು ಪರಿಶೀಲಿಸುತ್ತೇವೆ (ಹಾಗಿಲ್ಲದೆ ನೀವು ಒತ್ತಡದಿಂದ ಗೆಲ್ಲಬೇಕೆಂಬುದು ಇಲ್ಲ!)
+- **ತಕ್ಷಣದ ಕ್ರಿಯೆಗಳು**: ಏನಾದರೂ ಪ್ರಮುಖ ಮೂರು ಸಮಯದಲ್ಲೇ ಗೇಮ್ ತಿಳಿದುಕೊಳ್ಳುತ್ತದೆ
+
+### ಹಂತ 3: ಹೊಸ ಸಂದೇಶ ಸ್ಥಿರಾಂಕಗಳನ್ನು ಸೇರಿಸಿ
+
+ನೀವು ನಿಮ್ಮ `Messages` ಸ್ಥಿರಾಂಕ ವಸ್ತುವಿನಲ್ಲಿ ಹೊಸ ಸಂದೇಶ ಪ್ರಕಾರಗಳನ್ನು ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ. ಈ ಸ್ಥಿರಾಂಕಗಳು ಸರಳತೆ ಮತ್ತು ತಪ್ಪುಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ.
+
+```javascript
+GAME_END_LOSS: "GAME_END_LOSS",
+GAME_END_WIN: "GAME_END_WIN",
+```
+
+**ಅಗಲಿನಲ್ಲಿ ನಾವು:**
+- ಗೇಮ್ ಅಂತ್ಯ ಈವೆಂಟ್‌ಗಾಗಿ ಸ್ಥಿರಾಂಕಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ
+- ಸ್ಪಷ್ಟವಾಗಿರುವ ಹೆಸರುಗಳನ್ನು ಬಳಸಿದ್ದೇವೆ, ಈವೆಂಟ್ ಉದ್ದೇಶವನ್ನು ಸಿಗಿಎಂ ಗೊಳಿಸುತ್ತದೆ
+- ಇಂದಿನ ಸಂದೇಶ ಪ್ರಕಾರದ ಹೆಸರು ನಾಮಕರಣದ ಹಾದಿಯನ್ನು ಪಾಲಿಸುತ್ತೇವೆ
+
+### ಹಂತ 4: ಮರುಪ್ರಾರಂಭ ನಿಯಂತ್ರಣಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+
+ಈಗ ನೀವು ಗೇಮ್ ಅನ್ನು ಮರುಪ್ರಾರಂಭಿಸಲು ಕೀಬೋರ್ಡ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಸೇರಿಸಲಿದ್ದೀರಿ. Enter ಕೀವು ಸಾಮಾನ್ಯವಾಗಿ ದೃಢಪಡಿಸಲು ಮತ್ತು ಹೊಸ ಗೇಮ್ ಪ್ರಾರಂಭಿಸಲು ಚಿಕಿತ್ಸೆ ಕಲ್ಪಿಸುವುದರಿಂದ ಪ್ರಾಕೃತಿಕ ಆಯ್ಕೆ.
+
+**ನಿಮ್ಮ ಇತ್ತೀಚಿನ keydown ಈವೆಂಟ್ ಶ್ರೋತಿಗೆ Enter ಕೀ ಗುರುತಿಸುವಿಕೆಯನ್ನು ಸೇರಿಸಿ:**
+
+```javascript
+else if(evt.key === "Enter") {
+   eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+}
+```
+
+**ಹೊಸ ಸಂದೇಶ ಸ್ಥಿರಾಂಕವನ್ನು ಸೇರಿಸಿ:**
+
+```javascript
+KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+```
+
+**ನಿಮಗೆ ತಿಳಿಯಬೇಕಾದುದು:**
+- ನಿಮ್ಮ ಇತ್ತೀಚಿನ ಕೀಬೋರ್ಡ್ ಈವೆಂಟ್ ಕೈಗಾರಿಕೆಯ ವ್ಯವಸ್ಥೆಯನ್ನು ವಿಸ್ತರಿಸುತ್ತದೆ
+- ಪ್ರವೇಶ ಕೀವನ್ನು ಮರುಪ್ರಾರಂಭ ಟ್ರಿಗರ್ ಆಗಿ ಬಳಕೆಗಾಗಿ
+- ನಿಮ್ಮ ಗೇಮ್‌ನ ಇತರ ಭಾಗಗಳು ಇದನ್ನು ಕೇಳಲು ಕಸ್ಟಮ್ ಈವೆಂಟ್ ಅನ್ನು ನೀಡುತ್ತದೆ
+- ನಿಮ್ಮ ಇತರ ಕೀಬೋರ್ಡ್ ನಿಯಂತ್ರಣಗಳಂತೆ ಇದೇ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ
+
+### ಹಂತ 5: ಸಂದೇಶ ಪ್ರದರ್ಶನ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿ
+
+ನಿಮ್ಮ ಗೇಮ್ ಫಲಿತಾಂಶಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಆಟಗಾರರಿಗೆ ತಲುಪಿಸಬೇಕಾಗುತ್ತದೆ. ನಾವು ಟರ್ಮಿನಲ್ ಇಂಟರ್ಫೇಸ್ ಮೂರ್ತಿಗಳಂತಹ ಹಸಿರು ಯಶಸ್ಸಿಗೆ ಮತ್ತು ಕೆಂಪು ದೋಷಗಳಿಗೆ ಸೂಚಿಸುವ ಬಣ್ಣದ ಮೂಲಕ ಜಯ ಮತ್ತು ಸೋಲು ಸ್ಥಿತಿಗಳನ್ನು ತೋರಿಸುವ ಸಂದೇಶ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸುವೆವು.
+
+**`displayMessage()` ಫಂಕ್ಷನ್ ರಚಿಸಿ:**
+
+```javascript
+function displayMessage(message, color = "red") {
+  ctx.font = "30px Arial";
+  ctx.fillStyle = color;
+  ctx.textAlign = "center";
+  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+}
+```
+
+**ಹಂತ ಹಂತವಾಗಿ ಏನಾಗುತ್ತಿದೆ:**
+- ಸ್ಪಷ್ಟ ಮತ್ತು ಓದಲು ಸುಲಭವಾಗಿರುವ ಟೆಕ್ಸ್ಟ್ ಗಾಗಿ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ಕುಟುಂಬವನ್ನು ಹೊಂದಿಸುತ್ತದೆ
+- ಎಚ್ಚರಿಕೆಗಾಗಿ ಡೀಫಾಲ್ಟ್ "ಕೆಂಪು" ಬಣ್ಣದ ಪರಿಮಾಣವನ್ನು ವಾಪಸ್ ನೀಡುತ್ತದೆ
+- ಟ್ಯಾಕ್ಟಿಲ್ಗಾಗಿ ಮತ್ತು ಲಂಪಟಕ್ಕಾಗಿ ಕ್ಯಾನ್ವಾಸ್ ಮದ್ಯದಲ್ಲಿ ಪಾಠವನ್ನು ಕೇಂದ್ರಗೊಳಿಸುತ್ತದೆ
+- ಬಣ್ಣ ಆಯ್ಕೆಗೆ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೀಫಾಲ್ಟ್ ಪರಿಮಾಣವನ್ನು ಬಳಸುತ್ತದೆ
+- ನೇರ ಪಠ್ಯ ರೆಂಡರಿಂಗ್ ಗಾಗಿ 2D ಕ್ಯಾನ್ವಾಸ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಬಳಸುತ್ತದೆ
+
+**`endGame()` ಫಂಕ್ಷನ್ ರಚಿಸಿ:**
+
+```javascript
+function endGame(win) {
+  clearInterval(gameLoopId);
+
+  // ಯಾವುದೇ ಬಾಕಿ ಇರುವ ರೆಂಡರ್‌ಗಳು ಪೂರ್ಣಗೊಳ್ಳುವಂತಹ ವಿಳಂಬವನ್ನು ಸೆಟ್ ಮಾಡಿ
+  setTimeout(() => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    if (win) {
+      displayMessage(
+        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+        "green"
+      );
+    } else {
+      displayMessage(
+        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+      );
+    }
+  }, 200)  
+}
+```
+
+**ಈ ಫಂಕ್ಷನ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- ಎಲ್ಲ ಹಡಗು ಮತ್ತು ಲೇಸರ್ ಚಲಿಸುವುದೇನೆಂದರೆ ಸ್ಥಗಿತಗೊಳಿಸುತ್ತದೆ
+- ಕೊನೆಯ ಫ್ರೇಮ್ ಚಿತ್ರಣದ ಅವಕಾಶಕ್ಕಾಗಿ 200ms ಕ್ಷಿಪ್ರ ವಿರಾಮವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ
+- ಪರದೆ ಸ್ಯಾಂಬಾಗಿ ಭೂತವಾದ ನಿಶಿವರ್ಣ ಬಣ್ಣದಲ್ಲಿ ಬಣ್ಣಿಸುತ್ತದೆ
+- ಗೆದ್ದವರ ಮತ್ತು ಸೋಲಿಗರಿಗಾಗಿ ವಿಭಿನ್ನ ಸಂದೇಶಗಳನ್ನು ತೋರಿಸುತ್ತದೆ
+- ಸುದ್ದಿಯನ್ನು ಬಣ್ಣ ಸಂಚಾರ ಮಾಡುತ್ತದೆ - ಹಸಿರು ಉತ್ತಮಕ್ಕೆ, ಕೆಂಪು ಅಲ್ಪಶಃ ಉತ್ತಮ ಅಲ್ಲ
+- ಆಟಗಾರರಿಗೆ ಮತ್ತೆ ಪ್ರವೇಶ ಮಾಡಲು ಸೂಚನೆ ನೀಡುತ್ತದೆ
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಗೇಮ್ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಮರುಹೊಂದಿಸುವ ಕಾರ್ಯವನ್ನು ಅನುಷ್ಠಾನ ಮಾಡುವ ಮೊದಲು ಈ ವಿಷಯಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ:
+- ✅ ಅಂತ್ಯ ಷರತ್ತುಗಳು ಸ್ಪಷ್ಟ ಆಟದ ಉದ್ದೇಶಗಳನ್ನು ಹೇಗೆ ಸೃಷ್ಟಿಸುತ್ತವೆ
+- ✅ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ಆಟಗಾರರ ಅರ್ಥಮಾಡಿಕೊಳ್ ತನ್ನ ಈತರದ್ದು
+- ✅ ಸರಿಯಾದ ಕ್ಲೀನ್‌ಅಪ್ ನ ಭೂಮಕೆಯು ಮೆಮೊರಿ ಲೀಕ್ ತಡೆಯಲು ಅಗತ್ಯವಿದೆ
+- ✅ ಘಟನೆ-ಆಧಾರಿತ ಆರ್ಕಿಟೆಕ್ಚರ್ ಸ್ವಚ್ಛ ಸ್ಥಿತಿ ಪರಿವರ್ತನೆಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ
+
+**ತ್ವರಿತ ಸ್ವ-ಪರೀಕ್ಷೆ**: ಮರುಹೊಂದಿಸುವಾಗ ಈವೆಂಟ್ ಶ್ರೋತಿಗಳನ್ನು ತೆರವುಗೊಳಿಸದಿದ್ದರೆ ಏನಾಗಬಹುದು?
+*ಉತ್ತರ: ಮೆಮೊರಿ ಲೀಕ್ ಮತ್ತು ಸಡಿಲ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳ ಕಾರಣದಿಂದ ಅನಿರೀಕ್ಷಿತ ವರ್ತನೆ*
+
+**ಗೇಮ್ ವಿನ್ಯಾಸ ತತ್ವಗಳು**: ನೀವು ಈಗ ಅನುಷ್ಠಾನಗೊಳಿಸುತ್ತಿರುವುದು:
+- **ಸ್ಪಷ್ಟ ಗುರಿಗಳು**: ಆಟಗಾರರಿಗೆ ಯಶಸ್ಸು ಮತ್ತು ವಿಫಲತಾ ವ್ಯಾಖ್ಯಾನ ಸ್ಪಷ್ಟವಾಗಿದೆ
+- **ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ**: ಗೇಮ್ ಸ್ಥಿತಿಯಲ್ಲಿ ಬದಲಾವಣೆಗಳು ತಕ್ಷಣ ಸಂವಹನಗೊಳ್ಳುತ್ತವೆ
+- **ಬಳಕೆದಾರ ನಿಯಂತ್ರಣ**: ಆಟಗಾರರು ಸಿದ್ಧರಾದಾಗ ಮರುಪ್ರಾರಂಭ ಮಾಡಬಹುದು
+- **ವ್ಯವಸ್ಥೆಯ ನಂಬಕತೆ**: ಸರಿಯಾದ ಸ್ವಚ್ಛತೆ ದೋಷ ಮತ್ತು ಪ್ರದರ್ಶನ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ
+
+### ಹಂತ 6: ಗೇಮ್ ಮರುಹೊಂದಿಸುವ ಕಾರ್ಯಕ್ಷಮತೆ ಅನುಷ್ಠಾನ
+
+ಮರುಹೊಂದಿಸುವ ವ್ಯವಸ್ಥೆ ಪ್ರಸ್ತುತ ಗೇಮ್ ಸ್ಥಿತಿಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕ್ಲೀನ್ ಮಾಡಬೇಕು ಮತ್ತು ಹೊಸ ಗೇಮ್ ಸೆಷನ್ ಅನ್ನು ಪ್ರಾರಂಭ ಮಾಡಬೇಕು. ಇದು ಆಟಗಾರರಿಗೆ ಹಿಂದಿನ ಗೇಮ್‌ನ任何 ಅಳವಡಿಕೆಯಿಂದ ಮುಕ್ತವಾಗಿ ಸ್ವಚ್ಛ ಪ್ರಾರಂಭವನ್ನು ಒದಗಿಸುತ್ತದೆ.
+
+**`resetGame()` ಫಂಕ್ಷನ್ ರಚಿಸಿ:**
+
+```javascript
+function resetGame() {
+  if (gameLoopId) {
+    clearInterval(gameLoopId);
+    eventEmitter.clear();
+    initGame();
+    gameLoopId = setInterval(() => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = "black";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      drawPoints();
+      drawLife();
+      updateGameObjects();
+      drawGameObjects(ctx);
+    }, 100);
+  }
+}
+```
+
+**ಪ್ರತಿ ಭಾಗವನ್ನು ತಿಳಿದುಕೊಳ್ಳೋಣ:**
+- ಮರುಸಂಸ್ಕರಣೆಗೆ ಪೂರ್ವದಲ್ಲಿ ಗೇಮ್ ಲೂಪ್ ಚಾಲಿತವಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಗೇಮ್ ಲೂಪ್ನ್ನು ಸ್ಥಗಿತಗೊಳಿಸಿ ಎಲ್ಲ ಪ್ರಸ್ತುತ ಕ್ರಿಯೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ
+- ಮೆಮೊರಿ ಲೀಕ್ ತಡೆಯಲು ಎಲ್ಲಾ ಈವೆಂಟ್ ಶ್ರೋತಿಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ
+- ಹೊಸ ವಸ್ತುಗಳು ಮತ್ತು ಭೇರಿಗಳು ಹೊಂದಿಕೊಂಡು ಗೇಮ್ ಸ್ಥಿತಿಯನ್ನು ಪುನರಾರಂಭಿಸುತ್ತದೆ
+- ಎಲ್ಲಾ ಪ್ರಮುಖ ಗೇಮ್ ಫಂಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ಹೊಸ ಗೇಮ್ ಲೂಪ್ನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ
+- ಸ್ಥಿರಗತಿಯ 100ms ಅಂತರವನ್ನು ಬಳಸುತ್ತದೆ
+
+**`initGame()` ಫಂಕ್ಷನಿನೊಳಗೆ Enter ಕೀ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಸೇರಿಸಿ:**
+
+```javascript
+eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+  resetGame();
+});
+```
+
+**EventEmitter ಕ್ಲಾಸಿನಲ್ಲಿ `clear()` ವಿಧಾನ ಸೇರಿಸಿ:**
+
+```javascript
+clear() {
+  this.listeners = {};
+}
+```
+
+**ಮುಖ್ಯ ಅಂಶಗಳು:**
+- Enter ಕೀ ಒತ್ತುವುದು ಮರುಹೊಂದಿಸುವ ಕಾರ್ಯಕ್ಕೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ
+- ಗೇಮ್ ಆರಂಭಿಸುವಾಗ ಈ ಈವೆಂಟ್ ಶ್ರೋತಿಯನ್ನು ನೋಂದಾಯಿಸುತ್ತದೆ
+- ಮರುಹೊಂದಿಸುವಾಗ ಎಲ್ಲಾ ಈವೆಂಟ್ ಶ್ರೋತಿಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಶುದ್ಧ ವಿಧಾನ ಒದಗಿಸುತ್ತದೆ
+- ಮೆಮೊರಿ ಲೀಕ್ ತಡೆಯಲು ಮಧ್ಯೆ ಶ್ರೋತಿಗಳನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ
+- ಹೊಸ ಆರಂಭಕ್ಕೆ ಪರಿಪೂರ್ಣ ಶ್ರೋತಿಗಳ ಆಕಾರವನ್ನು ಶೂನ್ಯಗೊಳಿಸುತ್ತದೆ
+
+## ಅಭಿನಂದನೆಗಳು! 🎉
+
+👽 💥 🚀 ನೀವು ಶೂನ್ಯದಿಂದ ಸಂಪೂರ್ಣ ಗೇಮ್ ಅನ್ನು ಯಶಸ್ವಿಯಾಗಿ ನಿರ್ಮಿಸಿದ್ದೀರಿ. 1970ರ ದಶಕದ ಪ್ರಥಮ ವೀಡಿಯೋ ಗೇಮ್‌ಗಳನ್ನು ರಚಿಸಿದ ಪ್ರೋಗ್ರಾಮರ್‌ಗಳಂತೆ, ನೀವು ಲೈನ್ಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್‌ನಿಂದ ಸಮರ್ಪಕ ಗೇಮ್ ಮೆಕಾನಿಕ್ಸ್ ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಪರಸ್ಪರ ಸಂವಾದಾತ್ಮಕ ಅನುಭವವನ್ನು ರೂಪಿಸಿದ್ದೀರಿ. 🚀 💥 👽
+
+**ನೀವು ಸಾಧಿಸಿದ್ದೀರಿ:**
+- ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ ಜೊತೆಗೆ ಸಂಪೂರ್ಣ ಗೆಲುವು ಮತ್ತು ಸೋಲು ಷರತ್ತುಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಲಾಗಿದೆ
+- ನಿರಂತರ ಆಟಕ್ಕೆ ಸೂಕ್ತ ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಲಾಗಿದೆ
+- ಗೇಮ್ ಸ್ಥಿತಿಗಳ ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಸಂವಹನವನ್ನು ವಿನ್ಯಾಸ ಮಾಡಲಾಗಿದೆ
+- ಸಂಕೀರ್ಣ ಗೇಮ್ ಸ್ಥಿತಿ ಪರಿವರ್ತನೆ ಮತ್ತು ಸ್ವಚ್ಛತೆ ನಿರ್ವಹಣೆ ಮಾಡಲಾಗಿದೆ
+- ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು ಒಂದು ಸಮಗ್ರ, ಆಡಬಹುದಾದ ಗೇಮ್ ಆಗಿ ಜೋಡಿಸಲಾಗಿದೆ
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಸಂಪೂರ್ಣ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ವ್ಯವಸ್ಥೆ**: ಸಂಪೂರ್ಣ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಚಕ್ರದ ನಿಮ್ಮ ಆಟವನ್ನು ಆಚರಿಸಿ:
+- ✅ ಅಂತ್ಯ ಷರತ್ತುಗಳು ఎలా ತೃಪ್ತಿದಾಯಕ ಆಟಗಾರ ಅನುಭವವನ್ನು ಹುಟ್ಟುಹಾಕುತ್ತವೆ?
+- ✅ ಗೇಮ್ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ ಗೇಮ್ ಸ್ಥಿರತೆಯಿಗಾಗಿ ಏಕೆ ಅವಶ್ಯಕ?
+- ✅ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ಆಟಗಾರ ಅರ್ಥಮಾಡಿಕೊಳ್ತಾಳೆಗೆ ಏನು ಒದಗಿಸುತ್ತದೆ?
+- ✅ ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಯ ಪಾತ್ರ ಆಟಗಾರರನ್ನು ಹೇಗೆ ಬಂಧಿಸುತ್ತದೆ?
+
+**ವ್ಯವಸ್ಥೆಯ ನಿಪುಣತೆ**: ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಗೇಮ್ ತೋರಿಸುತ್ತದೆ:
+- **ಫುಲ್-ಸ್ಟಾಕ್ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ**: ಗ್ರಾಫಿಕ್ಸ್, ಇನ್‌ಪುಟ್, ಮತ್ತು ಸ್ಥಿತಿ ನಿರ್ವಹಣೆಯಿಂದ
+- **ವೃತ್ತಿಪರ ಆರ್ಕಿಟೆಕ್ಚರ್**: ಸರಿಯಾದ ಸ್ವಚ್ಛತೆಯೊಂದಿಗೆ ಈವೆಂಟ್-ಚಾಲಿತ ವ್ಯವಸ್ಥೆಗಳು
+- **ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ**: ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ಸೂಕ್ತ ನಿಯಂತ್ರಣೆಗಳು
+- **ಪ್ರದರ್ಶನ ಅನೂಕೂಲನೆ**: ಪರಿಣಾಮಕಾರಿ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಮೆಮೊರಿ ನಿರ್ವಹಣೆ
+- **ಸೊಗಸು ಮತ್ತು ಸಂಪೂರ್ಣತೆ**: ಗೇಮ್ ಶೇಪಿಂಗ್‌ಗೆ ಬೇಕಾಗುವ ಎಲ್ಲಾ ಸಣ್ಣಾಂಶಗಳು
+
+**ಉದ್ಯಮ-ಸಿದ್ಧ ಕೌಶಲ್ಯಗಳು**: ನೀವು ಅನುಷ್ಠಾನಮಾಡಿದ್ದೀರಿ:
+- **ಗೇಮ್ ಲೂಪ್ ಆರ್ಕಿಟೆಕ್ಚರ್**: ಸತತ ಪ್ರದರ್ಶನ ಹೊಂದಿರುವ ರಿಯಲ್-ಟೈಮ್ ವ್ಯವಸ್ಥೆಗಳು
+- **ಈವೆಂಟ್-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ವಿಭಜಿತ ವ್ಯವಸ್ಥೆಗಳು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ವಿಸ್ತರಿಸಲಾಗುತ್ತದೆ
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಸಂಕೀರ್ಣ ಡೇಟಾ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಲೈಫ್ಸೈಕಲ್ ನಿರ್ವಹಣೆ
+- **ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸ**: ಸ್ಪಷ್ಟ ಸಂವಹನ ಮತ್ತು ತ್ವರಿತ ಪ್ರತಿಕ್ರಿಯೆಯ ನಿಯಂತ್ರಣೆಗಳು
+- **ಪರೀಕ್ಷೆ ಮತ್ತು ಡೀಬಗಿಂಗ್**: ಅನುವೃತ್ತಿ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಸಮಸ್ಯಾ ಪರಿಹಾರ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದೆಂದರೆ**
+- [ ] ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಗೇಮ್ ಆಡಿಕೊಂಡು ಎಲ್ಲಾ ಜಯ ಮತ್ತು ಸೋಲು ಷರತ್ತುಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ
+- [ ] ವಿವಿಧ ಅಂತ್ಯ ಷರತ್ತುಗಳ ಪರಿಮಾಣಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ
+- [ ] ಗೇಮ್ ಸ್ಥಿತಿ ಬದಲಾವಣೆಯ ಕಾರ್ಯವ್ಯೂಹಗಳನ್ನು console.log ಮೂಲಕ ಗಮನಿಸಿ
+- [ ] ನಿಮ್ಮ ಗೇಮ್ ಅನ್ನು ಸ್ನೇಹಿತರೊಂದಿಗೆ ಹಂಚಿಕೊಳ್ಳಿ ಮತ್ತು ಅಭಿಪ್ರಾಯ ಸಂಗ್ರಹಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದುದು**
+- [ ] ಪಾಠದ ನಂತರದ ಪರೀಕ್ಷೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಪ್ರಯಾಣವನ್ನು ಪರಿಗಣಿಸಿ
+- [ ] ಜಯ ಮತ್ತು ಸೋಲು ಸ್ಥಿತಿಗಳಿಗೆ ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಸಮಯ ಮಿತಿ ಅಥವಾ ಬೋನಸ್ ಗುರಿಗಳಂತಹ ಹೆಚ್ಚುವರಿ ಅಂತ್ಯ ಷರತ್ತುಗಳನ್ನು ಅನುಷ್ಠಾನ ಮಾಡಿ
+- [ ] ವಿಭಿನ್ನ ಶತ್ರು ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ವ್ಯತ್ಯಾಸ ದದ್ದತಿಯ ಹಂತಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಉತ್ತಮ ಫಾಂಟ್ ಮತ್ತು ಬಣ್ಣಗಳೊಂದಿಗೆ ದೃಶ್ಯ ಪ್ರದರ್ಶನವನ್ನು ಸೊಗಸಾಗಿ ಮಾಡಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರ-ದೀರ್ಘ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಪರಿಣತಿಮಾಡಿಕೊಳ್ಳುವುದು**
+- [ ] ಬಹು ಹಂತಗಳು ಮತ್ತು ಪ್ರಗತಿಯನ್ನು ಒಳಗೊಂಡ ಸುಧಾರಿತ ಸ್ಪೇಸ್ ಗೇಮ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಪವರ್-ಅಪ್‌ಗಳು, ವಿಭಿನ್ನ ಶತ್ರು ಪ್ರಕಾರಗಳು ಮತ್ತು ವಿಶೇಷ ಶಸ್ತ್ರಸಾಮಗ್ರಿಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಸ್ಥಿರ ಸಂಗ್ರಹಣೆ ಹೊಂದಿರುವ ಹೈ ಸ್ಕೋರ್ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿ
+- [ ] ಮೆನು, ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಮತ್ತು ಗೇಮ್ ಆಯ್ಕೆಗಳ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸ ಮಾಡಿ
+- [ ] ವಿಭಿನ್ನ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಿಗೋಸ್ಕರ ಪ್ರದರ್ಶನವನ್ನು ಅನುಕೂಲಗೊಳಿಸಿ
+- [ ] ನಿಮ್ಮ ಗೇಮ್ ಅನ್ನು ஆன್ಲೈನ್‌ನಲ್ಲಿ ಪ್ರಕಟಿಸಿ ಮತ್ತು ಸಮುದಾಯದೊಂದಿಗೆ ಹಂಚಿಕೊಳ್ಳಿ
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳಿಗೊಮ್ಮೆ ಗೇಮ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಕರಿಯರ್**
+- [ ] ವಿಭಿನ್ನ ಜಾನರ್‌ಗಳು ಮತ್ತು ಮೆಕ್ಯಾನಿಕ್ಸ್ ಅನ್ನು ಅನ್ವೇಷಿಸುತ್ತ ವಿವಿಧ ಪೂರ್ಣವಾದ ಗೇಮ್ಸ್ ನಿರ್ಮಿಸಿ
+- [ ] Phaser ಅಥವಾ Three.js ಮುಂತಾದ ತಾಂತ್ರಿಕ ಗೇಮ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು ಕಲಿಯಿರಿ
+- [ ] ತೆರೆಯಲಾದ ಮೂಲ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿರಿ
+- [ ] ಗೇಮ್ ವಿನ್ಯಾಸವಾದ ನೀತಿ ಮತ್ತು ಆಟಗಾರರ ಮನೋವಿಜ್ಞಾನವನ್ನು ಅಧ್ಯಯನಮಾಡಿ
+- [ ] ನಿಮ್ಮ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಪೋರ್ಟ್‌ಫೋಲಿಯೊ ಸೃಷ್ಟಿಸಿ
+- [ ] ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಸಮುದಾಯದೊಂದಿಗೆ ಸಂಪರ್ಕ ಬೆಳೆಸಿ ಮತ್ತು ಕಲಿಕೆಯನ್ನು ಮುಂದುವರೆಸಿ
+
+## 🎯 ನಿಮ್ಮ ಪೂರ್ಣ ಗೇಮ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಪ್ರಾವೀಣ್ಯ ಸಮಯರೇಖೆ
+
+```mermaid
+timeline
+    title ಸಂಪೂರ್ಣ ಆಟ ಅಭಿವೃದ್ಧಿ ಕಲಿಕೆಯ ಪ್ರಗತಿ
+    
+    section ಪೈಪೋಟಿ (ಪಾಠಗಳು 1-2)
+        ಆಟ ವಾಸ್ತುಶಿಲ್ಪ: ಯೋಜನೆ ರಚನೆ
+                         : ಆಸ್ತಿ ನಿರ್ವಹಣೆ
+                         : ಕැන್ವಾಸ್ ಮೂಲಭೂತಗಳು
+                         : ಘಟನೆ ವ್ಯವಸ್ಥೆಗಳು
+        
+    section ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳ ವ್ಯವಸ್ಥೆಗಳು (ಪಾಠಗಳು 3-4)
+        ಆಟಗಾರ ನಿಯಂತ್ರಣ: ಇನ್ಪುಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್
+                        : ಚಲನೆಯ ಯಂತ್ರ ವಿಧಾನಗಳು
+                        : ಘರ್ಷಣೆ ಪತ್ತೆ
+                        : ಭೌತಶಾಸ್ತ್ರ ಅನುಕರಣ
+        
+    section ಆಟ ಯಂತ್ರಗಳು (ಪಾಠ 5)
+        ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳು: ಅಂಕೆ ಮಂತ್ರಣೆ
+                            : ಜೀವನ ನಿರ್ವಹಣೆ
+                            : ದೃಶ್ಯ ಸಂವಹನ
+                            : ಆಟಗಾರ ಉತ್ತೇಜನ
+        
+    section ಆಟ ಪೂರ್ಣಗೊಂಡಿರುವುದು (ಪಾಠ 6)
+        ಪالش್ & ಫ್ಲೋ: ಅಂತ್ಯ ಪರಿಸ್ಥಿತಿಗಳು
+                     : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+                     : ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಗಳು
+                     : ಬಳಕೆದಾರ ಅನುಭವ
+        
+    section ಉನ್ನತ ವೈಶಿಷ್ಟ್ಯಗಳು (1 ವಾರ)
+        ಸುಧಾರಣೆ ಕೌಶಲ್ಯಗಳು: ಧ್ವನಿ ಸಂಯೋಜನೆ
+                            : ದೃಶ್ಯ ಪರಿಣಾಮಗಳು
+                            : ಮಟ್ಟ ಪ್ರಗತಿ
+                            : ಕಾರ್ಯಕ್ಷಮತೆ ಯುಕ್ತಿ
+        
+    section ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ (1 മാസം)
+        ಕೈಗಾರಿಕಾ ಸಿದ್ಧತೆ: ಫ್ರೇಮ್ವರ್ಕ್ ನಿಪುಣತೆ
+                              : ತಂಡ ಸಹಕಾರ
+                              : ಇಲ್ಲಿನ ವಿವರಣೆ ಸರಣಿ ಅಭಿವೃದ್ಧಿ
+                              : ಸಮುದಾಯ ತೊಡಗಣೆ
+        
+    section ವೃತ್ತಿ ಮುನ್ನಡೆಯ (3 ತಿಂಗಳು)
+        ವಿಶೇಷೀಕರಣ: ಅಗ್ರಗಣ್ಯ ಆಟ ಎಂಜಿನ್ಗಳು
+                      : ವೇದಿಕೆ ನಿಯೋಜನೆ
+                      : ಹಣಕಾಸು ತಂತ್ರಗಳು
+                      : ಕೈಗಾರಿಕಾ ನೆಟ್‌ವರ್ಕಿಂಗ್
+```
+### 🛠️ ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಗೇಮ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಟೂಲ್‌ಕಿಟ್ ಸಾರಾಂಶ
+
+ಈ ಸಂಪೂರ್ಣ ಸ್ಪೇಸ್ ಗೇಮ್ ಸರಣಿಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನೀವು ಇದೀಗ ಅಧೀನರಾಗಿದ್ದಾರೆ:
+- **ಗೇಮ್ ವರ್ಗೀಕರಣ**: ಘಟನೆ-ಚಾಲಿತ ಸಿಸ್ಟಮ್‌ಗಳು, ಗೇಮ್ ಲೂಪ್ಸ್ ಮತ್ತು ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಣೆ
+- **ಗ್ರಾಫಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಕ್ಯಾನ್ವಾಸ್ API, ಸ್ಪ್ರೈಟ್ ರೆಂಡರಿಂಗ್ ಮತ್ತು ದೃಶ್ಯ ಪರಿಣಾಮಗಳು
+- **ಇನ್ಪುಟ್ ಸಿಸ್ಟಮ್‌ಗಳು**: ಕೀಬೋರ್ಡ್ ನಿರ್ವಹಣೆ, ದಾಳಿ ಪತ್ತೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನಿಯಂತ್ರಣಗಳು
+- **ಗೇಮ್ ವಿನ್ಯಾಸ**: ಆಟಗಾರ ಪ್ರತಿಕ್ರಿಯೆ, ಪ್ರಗತಿ ವ್ಯವಸ್ಥೆಗಳು ಮತ್ತು ತೊಡಗು ತಂತ್ರಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಷ್ಕರಣೆ**: ಪರಿಣಾಮಕಾರಿ ರೆಂಡರಿಂಗ್, ಮೆಮರಿ ನಿರ್ವಹಣೆ ಮತ್ತು ಫ್ರೇಮ್ ದರ ನಿಯಂತ್ರಣ
+- **ಬಳಕೆದಾರ ಅನುಭವ**: ಸ್ಪಷ್ಟ ಸಂವಹನ, ಅನುಭಾವನೀಯ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಪುರಸ್ಕಾರ ವಿವರಗಳು
+- **ವೃತ್ತಿಪರ ಮಾದರಿಗಳು**: ಶುಭ್ರ ಕೋಡ್, ದೋಷ ನಿವಾರಣಾ ತಂತ್ರಗಳು ಮತ್ತು ಯೋಜನೆ ಸಂಘಟನೆ
+
+**ವಾಸ್ತವ ಜಗತ್ತಿನ ಅನ್ವಯಿಕೆಗಳು**: ನಿಮ್ಮ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯವಾಗುತ್ತವೆ:
+- **ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು**: গতಿಶೀಲ ಇಂಟರ್ಫೇಸ್ಗಳು ಮತ್ತು ರಿಯಲ್-ಟೈಮ್ ಸಿಸ್ಟಮ್‌ಗಳು
+- **ಡೇಟಾ ದೃಶ್ಯೀಕರಣ**: ಅನಿಮೇಟೆಡ್ ಚಾರ್ಟ್ಸ್ ಮತ್ತು ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಗ್ರಾಫಿಕ್ಸ್
+- **ಶಿಕ್ಷಣ ತಂತ್ರಜ್ಞಾನ**: ಗೇಮೀಕರಣ ಮತ್ತು ಆಕರ್ಷಕ ಕಲಿಕೆಯ ಅನುಭವಗಳು
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ಸ್ಪರ್ಶಾಧಾರಿತ ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಷ್ಕರಣೆ
+- **ಸಿಮ್ಯುಲೇಷನ್ ಸಾಫ್ಟ್‌ವೇರ್**: ಭೌತಶಾಸ್ತ್ರ ಎಂಜಿನ್‌ಗಳು ಮತ್ತು ರಿಯಲ್-ಟೈಮ್ ಮಾದರೀಕರಣ
+- **ಸ್ವರ್ಣೋದ್ಯಮಗಳು**: ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಕಲೆ, ಮನರಂಜನೆ ಮತ್ತು ಡಿಜಿಟಲ್ ಅನುಭವಗಳು
+
+**ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು ಪಡೆದಿವೆ**: ನೀವು ಈಗ:
+- **ಡಿಫಾಲ್ಟ್‌ನಿಂದ ಕಂಟಕಿತ ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಯೋಜಿಸಬಹುದು**
+- **ವ್ಯವಸ್ಥಿತ ವಿಧಾನಗಳಿಂದ ರಿಯಲ್-ಟೈಮ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ದೋಷಗಳನ್ನು ತಡೆಯಬಹುದು**
+- **ಸರಾಗ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಬಹುದು**
+- **ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸು ಹಾಗೂ ಪರಸ್ಪರ ಕ್ರಿಯೆ ಮಾದರಿಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಬಹುದು**
+- **ತಾಂತ್ರಿಕ ಯೋಜನೆಗಳಲ್ಲಿ ಸೂಕ್ತ ಕೋಡ್ ಸಂಘಟನೆಯೊಂದಿಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಸಹಕರಿಸಬಹುದು**
+
+**ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಧಾರಣೆಗಳಲ್ಲಿ ಪ್ರावीಣ್ಯತೆ**:
+- **ರಿಯಲ್-ಟೈಮ್ ಸಿಸ್ಟಮ್‌ಗಳು**: ಗೇಮ್ ಲೂಪ್ಗಳು, ಫ್ರೇಮ್ ದರ ನಿರ್ವಹಣೆ ಮತ್ತು ಪ್ರದರ್ಶನ
+- **ಘಟನಾ ಚಾಲಿತ ವರ್ಗೀಕರಣ**: ವಿಭಜಿತ ಸಿಸ್ಟಮ್‌ಗಳು ಮತ್ತು ಸಂದೇಶ ವಿನಿಮಯ
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಸಂಕೀರ್ಣ ದತ್ತಾಂಶ ನಿರ್ವಹಣೆ ಮತ್ತು ಜೀವನಚಕ್ರ ನಿರ್ವಹಣೆ
+- **ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ
+- **ಗೇಮ್ ವಿನ್ಯಾಸ ಸಿದ್ಧಾಂತ**: ಆಟಗಾರರ ಮನೋವಿಜ್ಞಾನ ಮತ್ತು ತೊಡಗು ತಂತ್ರಗಳು
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು ಈಗ ವಿಶೇಷ ಗೇಮ್ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು, 3D ಗ್ರಾಫಿಕ್ಸ್, ಬಹು ಆಟಗಾರ ವ್ಯವಸ್ಥೆಗಳು ಅಥವಾ ವೃತ್ತಿಪರ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಪಾತ್ರಗಳಿಗೆ ತೊಡಗಿಸಲು ಸಿದ್ದರಾಗಿದ್ದೀರಿ!
+
+🌟 **ಸಾಧನೆ ಸಾಧಿಸಿದರು**: ನೀವು ಸಂಪೂರ್ಣ ಗೇಮ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಪ್ರಯಾಣವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಪ್ರೊಫೆಶನಲ್-ಗುಣಮಟ್ಟದ ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಅನುಭವವನ್ನು ನಿರ್ಮಿಸಿದ್ದಾರೆ!
+
+**ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಸಮುದಾಯಕ್ಕೆ ಸ್ವಾಗತ!** 🎮✨
+
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ಕೆಳಕಂಡ ಚಾಲೆಂಜ್ ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ಸ್ಪೇಸ್ ಗೇಮ್‌ ಅನ್ನು ವರದ ಗುಂಪು ಪ್ರಗತಿಸು ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ಸುಧಾರಿಸಿ, ಪ್ರತಿಯೊಂದು ಹಂತದಲ್ಲೂ ಹೆಚ್ಚುವರಿ ಕಷ್ಟ ಮತ್ತು ಬೋನಸ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಹಲವು ಹಂತಗಳ	spce ಗೇಮ್ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿ, ಇಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಹಂತದಲ್ಲಿ ಹೆಚ್ಚು ಶತ್ರು ಹಡಗುಗಳು ಹೆಚ್ಚಿದ ವೇಗ ಮತ್ತು ಆರೋಗ್ಯ ಹೊಂದಿರಲಿ. ಪ್ರತಿ ಹಂತದೊಂದಿಗೆ ಹೆಚ್ಚುವರಿ ಸ್ಕೋರ್ ಗುಣಕರವನ್ನು ಸೇರಿಸಿ, ಮತ್ತು ಶತ್ರುಗಳನ್ನು ವಿನಾಶಗೊಳ್ಳುವಾಗ ರಡ್ಡಿ ಅಗ್ನಿ ಅಥವಾ ಶೀಲ್ಡ್ ಮುಂತಾದ ಪವರ್-ಅಪ್ಸ್ ಅನ್ನು ಯಾದೃಚ್ಛಿಕವಾಗಿ ಪಪ್ನ್ಬುಸ್ ಮಾಡಿ. ಹಂತ ಪೂರ್ಣಗೊಳಿಸಿದ ಬೋನಸ್ ಸೇರಿಸಿ ಹಾಗೂ ಪರ屏ೇಲ್ಲಿ ಇದೀಗ ಆಗುವ ಸ್ಕೋರ್, ಜೀವ, ಮತ್ತು ಹಂತವನ್ನು ತೋರಿಸಿ.
+
+ಇಲ್ಲಿ [ಏಜೆಂಟ್ ಮೋಡ್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿಯನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ.
+
+## 🚀 ಐಚ್ಛಿಕ ಸುಧಾರಣೆಯ ಚಾಲೆಂಜ್
+
+**ನಿಮ್ಮ ಗೇಮ್‌ಗೆ ಆಡಿಯೋ ಸೇರಿಸಿ**: ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಜೋಡಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಆಟದ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಿ! ಕಳ್ಕೊಂಡಿರುವುದು:
+
+- **ಪಟಾಕಿ ಕೈಗೊರೆವಾಗ** ಲೇಸರ್ ಶಾಟ್‌ಗಳು
+- **ಶತ್ರು ವಿನಾಶವಾಗುವಾಗ** ಧ್ವನಿಗಳು
+- **ಹೀರೋ ಗೆ ಹಾನಿಯಾಗುವಾಗ** ಧ್ವನಿಗಳು
+- **ಜಯವಂತವಾದಾಗ** ಸಂಗೀತ
+- **ತಗ್ಗಿದಾಗ** ಧ್ವನಿ
+
+**ಆಡಿಯೋ ಅನುಷ್ಠಾನ ಉದಾಹರಣೆ:**
+
+```javascript
+// ಧ್ವನಿ ವಸ್ತುಗಳನ್ನು ರಚಿಸಿ
+const laserSound = new Audio('assets/laser.wav');
+const explosionSound = new Audio('assets/explosion.wav');
+
+// ಆಟದ ಘಟನೆಗಳ ಸಂದರ್ಭದಲ್ಲಿ ಧ್ವನಿಗಳನ್ನು ವಾಜಿಸಿ
+function playLaserSound() {
+  laserSound.currentTime = 0; // ಆರಂಭಕ್ಕೆ ಮರುಹೊಂದಿಸಿ
+  laserSound.play();
+}
+```
+
+**ನೀವು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದದು:**
+- ವ್ಯಾಪಕ ಧ್ವನಿ ಪರಿಣಾಮಗಳಿಗೆ ಆಡಿಯೋ ವಸ್ತುಗಳನ್ನು ರಚಿಸುತ್ತದೆ
+- ‘currentTime’ ಅನ್ನು ಮರುಹೊಂದಿಸಲು ಅವಕಾಶಮಾಡುತ್ತದೆ, ವೇಗದ ಸಿಡಿಲು ಧ್ವನಿಕೆಯನ್ನು ಮಾಡುತ್ತದೆ
+- ಬ್ರೌಸರ್ ಸ್ವಯಂಪ್ರಾರಂಭ ನೀತಿಗಳನ್ನು ಬಳಕೆದಾರರ ಪರಸ್ಪರ ಕ್ರಿಯೆಯಿಂದ ಧ್ವನಿಗಳನ್ನು ಪ್ರಚೋದಿಸಿ ನಿಭಾಯಿಸುತ್ತದೆ
+- ಉತ್ತಮ ಗೇಮ್ ಅನುಭವಕ್ಕೆ ಧ್ವನಿ ವಾಲ್ಯೂಮ್ ಮತ್ತು ಸಮಯ ನಿರ್ವಹಿಸುತ್ತದೆ
+
+> 💡 **ಕಲಿಕೆ ಸಂಪನ್ಮೂಲ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗೇಮ್ಗಳಲ್ಲಿ ಆಡಿಯೋ ಜೋಡಿಸುವ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳಲು ಈ [ಆಡಿಯೋ ಸ್ಯಾಂಡ್‌ಬಾಕ್ಸ್](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) ಅನ್ನು ಪರಿಶೀಲಿಸಿ.
+
+## ಪಠ್ಯೋತ್ತರ ಕೂವಿಡ್
+
+[ಪಠ್ಯೋತ್ತರ ಕೂವಿಡ್](https://ff-quizzes.netlify.app/web/quiz/40)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವ-ಅಧ್ಯಯನ
+
+ನಿಮ್ಮ ಹಿನ್ನಡೆಗೆ ಹೊಸ ಮಾದರಿ ಗೇಮ್ ಸೃಷ್ಟಿಸುವುದು, ಅಗತ್ಯವಿರುವ ಕಂಡು ಹಿಡಿದ ನೀವು ಹೇಗೆ ಗೇಮ್ ನಿರ್ಮಿಸಬಹುದು ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸಿ ನೋಡಿ.
+
+## ನಿಯುಕ್ತಿ
+
+[ಮಾದರಿ ಗೇಮ್ ನಿರ್ಮಿಸಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿರಾಕರಣೆ**:  
+ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಭಾಷಾಂತರ ಸೇವೆಯನ್ನು ఉపయోగಿಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯ ಮೇಲೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ತ್ವರಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದಾಗಿದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಸ್ವದೇಶಿ ಭಾಷೆಯಲ್ಲಿ ಪ್ರಾಮಾಣಿಕ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಮುಖ್ಯ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಭ್ರಮೆ ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/6-end-condition/assignment.md

@@ -0,0 +1,174 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "232d592791465c1678cab3a2bb6cd3e8",
+  "translation_date": "2026-01-08T14:06:55+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಒಂದು ಮಾದರಿ ಆಟವನ್ನು ನಿರ್ಮಿಸಿ
+
+## ಹುದ್ದೆಯ ಅವಲೋಕನ
+
+ನೀವು ಈಗಾಗಲೇ ನಿಮ್ಮ ಅಂತರಿಕ್ಷ ಆಟದಲ್ಲಿ ಆಟದ ಅಂತ್ಯದ ಶರತ್ತುಗಳು ಮತ್ತು ಪುನರಾರಂಭ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದೀರ, ಈಗ ಈ ತತ್ವಗಳನ್ನು ಸಂಪೂರ್ಣ ಹೊಸ ಆಟದ ಅನುಭವಕ್ಕೆ ಅನ್ವಯಿಸಲು ಸಮಯವಾಗಿದೆ. ನೀವು ಬಗೆಬಗೆಯ ಅಂತ್ಯದ ಶರತ್ತು ಮಾದರಿಗಳು ಮತ್ತು ಪುನರಾರಂಭ ಯಂತ್ರಾಂಗಗಳನ್ನು ತೋರಿಸುವ ನಿಮ್ಮ ಸ್ವಂತ ಆಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ ನಿರ್ಮಿಸುತ್ತೀರಿ.
+
+ಈ ವ್ಯಾಯಾಮವು ನಿಮಗೆ ಆಟ ವಿನ್ಯಾಸದ ಬಗ್ಗೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಯೋಚಿಸಲು ಸವಾಲು ನೀಡುತ್ತದೆ, ಮತ್ತು ನೀವು ಕಲಿತ ತಾಂತ್ರಿಕ ನಿಪುಣತೆಯನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿಸುತ್ತದೆ. ನೀವು ಬಗೆಬಗೆಯ ಜಯ ಮತ್ತು ಸೋಲು ಘಟನಾವಳಿಗಳನ್ನು ಅನ್ವೇಷಿಸಿ, ಆಟಗಾರರ ಪ್ರಗತಿ ಕಾರ್ಯಗತಗೊಳಿಸಿ, ಮತ್ತು ಆಕರ್ಷಕ ಪುನರಾರಂಭ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತೀರಿ.
+
+## ಯೋಜನೆಯ ಅಗತ್ಯತೆಗಳು
+
+### ಮೂಲ ಆಟದ ವೈಶಿಷ್ಟ್ಯಗಳು
+
+ನಿಮ್ಮ ಆಟದಲ್ಲಿ ಕೆಳಕಂಡ ಅಗತ್ಯ ಅಂಶಗಳಿವೆ:
+
+**ಅಂತ್ಯದ ಶರತ್ತು ವೈವಿಧ್ಯತೆ**: ಆಟವು ನಿಂತಿರುವ ಕನಿಷ್ಠ ಎರಡು ವಿಧಾನಗಳನ್ನು ಜಾರಿಗೊಳಿಸಿ:
+- **ಗುಣಾಂಕ ಆಧಾರಿತ ಜಯ**: ಆಟಗಾರ ಗುರಿ ಸ್ಕೋರ್ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ
+- **ಜೀವ ಇಳಿಕೆ ಆಧಾರಿತ ಸೋಲು**: ಆಟಗಾರ ಎಲ್ಲಾ ಲಭ್ಯವಿರುವ ಜೀವಗಳು ಅಥವಾ ಆರೋಗ್ಯ ಬಿಂದುಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತಾನೆ
+- **ಉದ್ದೇಶ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆ**: ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ಸೋಲಿಸುವುದು, ನಿರ್ದಿಷ್ಟ ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸುವುದು ಅಥವಾ ಗುರಿಗಳನ್ನು ಸಾಧಿಸುವುದು
+- **ಕಾಲ ಆಧಾರಿತ**: ನಿಗದಿತ ಅವಧಿ ನಂತರ ಅಥವಾ ಕನಿಷ್ಠ ಸಮಯ ಮುಗಿದಾಗ ಆಟ ನಿಂತುಹೋಗುವುದು
+
+**ಪುನರಾರಂಭ ಕಾರ್ಯಕ್ಷಮತೆ**: 
+- **ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ**: ಹಳೆಯ ಎಲ್ಲಾ ಆಟ ವಸ್ತುಗಳನ್ನು ತೆಗೆದುಹಾಕಿ, ಚರಗಳು ಪುನಃನಿರ್ದೇಶಿಸಿ
+- **ವ್ಯವಸ್ಥೆಗಳ ಪುನರ್‌ಆರಂಭ**: ಹೊಸ ಆಟಗಾರ ಅಂಕೆಗಳು, ಶತ್ರುಗಳು, ಮತ್ತು ಗುರಿಗಳೊಂದಿಗೆ ಹೊಸದಾಗಿ ಪ್ರಾರಂಭಿಸಿ
+- **ಬಳಕೆದಾರ-ಸುಹೃತ್ ನಿಯಂತ್ರಣೆಗಳು**: ಆಟವನ್ನು ಪುನರ್‌ಆರಂಭಿಸುವ ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳನ್ನು ಒದಗಿಸಿ
+
+**ಆಟಗಾರ ಪ್ರತಿಕ್ರಿಯೆ**:
+- **ಜಯ ಸಂದೇಶಗಳು**: ಆಟಗಾರ ಸಾಧನೆಗಳನ್ನೆ ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯೆಯಿಂದ ಆಚರಿಸಿ
+- **ಸೋಲು ಸಂದೇಶಗಳು**: ಆಟ ಪುನಃಆಟ ಮಾಡಲು ಪ್ರೇರೇಪಿಸುವ ಪ್ರೋತ್ಸಾಹಕಾರಿಯಾದ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸಿ
+- **ಪ್ರಗತಿ ಸೂಚಕಗಳು**: ಪ್ರಸ್ತುತ ಸ್ಕೋರ್, ಜೀವಗಳು, ಅಥವಾ ಗುರಿ ಸ್ಥಿತಿಯನ್ನು ತೋರಿಸಿ
+
+### ಆಟದ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಪ್ರೇರಣೆ
+
+ಕೆಳಕಂಡ ಆಟ ಪರಿಕಲ್ಪನೆಗಳಿಂದ ಒಂದು ಆಯ್ದುಕೊಳ್ಳಿ ಅಥವಾ ನಿಮ್ಮದೇ ಆದ ಆಟವನ್ನು ರಚಿಸಿ:
+
+#### 1. ಕಾನ್ಸೋಲ್ ಸಾಹಸ ಆಟ
+ಯುದ್ಧ ತಂತ್ರಗಳೊಂದಿಗೆ ಪಠ್ಯ ಆಧಾರಿತ ಸಾಹಸವನ್ನು ರಚನೆ ಮಾಡಿ:
+
+```
+Hero> Strikes with broadsword - orc takes 3p damage
+Orc> Hits with club - hero takes 2p damage  
+Hero> Kicks - orc takes 1p damage
+Game> Orc is defeated - Hero collects 2 coins
+Game> ****No more monsters, you have conquered the evil fortress****
+```
+  
+**ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕಾದ ಪ್ರಮುಖ ಲಕ್ಷಣಗಳು:**  
+- **ತಿರುವು ಆಧಾರಿತ ಯುದ್ಧ** ವಿವಿಧ ದಾಳಿ ಆಯ್ಕೆಗಳು  
+- **ಆರೋಗ್ಯ ಬಿಂದುಗಳು** ಆಟಗಾರ ಹಾಗೂ ಶತ್ರುಗಳಿಗೆ  
+- **ಸಂಗ್ರಹಣ ಸಿಸ್ಟಮ್** ನಾಣ್ಯಗಳು ಅಥವಾ ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು  
+- **ಬೋರ್ಡ್ ಶತ್ರು ಪ್ರಕಾರಗಳು** ವಿವಿಧ ಕಠಿಣತೆ ಇರುವ  
+- **ಜಯ ಶರತ್ತು** ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ಸೋಲಿಸಿದಾಗ
+
+#### 2. ಸಂಗ್ರಹಣೆ ಆಟ
+- **ಉದ್ದೇಶ**: ಅಡ್ಡಿಪಡಿಸುವುವನ್ನು ಕರೆದೋಡದೆ ನಿರ್ದಿಷ್ಟ ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ  
+- **ಅಂತ್ಯದ ಶರತ್ತುಗಳು**: ಗುರಿ ಸಂಗ್ರಹಣೆಗೆ ತಲುಪುವುದು ಅಥವಾ ಎಲ್ಲಾ ಜೀವಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುವುದು  
+- **ಪ್ರಗತಿ**: ಆಟ ಮುಂದುವರಿದಂತೆ ವಸ್ತುಗಳ ತಲುಪಲು ಕಠಿಣತೆ ಹೆಚ್ಚಾಗುವುದು
+
+#### 3. ಹಳೆಯು ಆಟ
+- **ಉದ್ದೇಶ**: ಹಂದುರಿದಂತೆ ಕಷ್ಟಕರವಾಗುತ್ತಿರುವ ಹಳೆಯುಗಳನ್ನು ಬಗೆಹರಿಸುವುದು  
+- **ಅಂತ್ಯದ ಶರತ್ತುಗಳು**: ಎಲ್ಲಾ ಮಟ್ಟಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸುವುದು ಅಥವಾ ಎಲ್ಲಾ ಸಂಚಲನಗಳು/ಸಮಯ ಮುಗಿಯುವುದು  
+- **ಪುನರ್‌ಆರಂಭ**: ಮೊದಲ ಮಟ್ಟದಲ್ಲಿ ಪ್ರಗತಿಯಿಲ್ಲದೆ ಪುನಃ ಆರಂಭಿಸಿ
+
+#### 4. ರಕ್ಷಣಾ ಆಟ
+- **ಉದ್ದೇಶ**: ಶತ್ರುಗಳ ಸರಣಿಯಿಂದ ನಿಮ್ಮ ಕೇಂದ್ರವನ್ನು ರಕ್ಷಿಸುವುದು  
+- **ಅಂತ್ಯದ ಶರತ್ತುಗಳು**: ಎಲ್ಲಾ ಸರಣಿಗಳನ್ನು ತಲುಪಿದಾಗ (ಜಯ) ಅಥವಾ ಕೇಂದ್ರವು ನಾಶವಾದಾಗ (ಸೋಲು)  
+- **ಪ್ರಗತಿ**: ಶತ್ರು ಸರಣಿಗಳ ಕಠಿಣತೆ ಮತ್ತು ಸಂಖ್ಯೆ ಹೆಚ್ಚಾಗುತ್ತದೆ
+
+## ಜಾರಿಗೊಳ್ಳುವ ಮಾರ್ಗದರ್ಶಿಗಳು
+
+### ಪ್ರಾರಂಭಿಸುವುದು
+
+1. **ನಿಮ್ಮ ಆಟದ ವಿನ್ಯಾಸವನ್ನು ಯೋಜಿಸಿ**:  
+   - ಮೂಲ ಆಟದ ಲೂಪ್ ಅನ್ನು ರೇಖಾಚಿತ್ರಿಸಿ  
+   - ನಿಮ್ಮ ಅಂತ್ಯದ ಶರತ್ತುಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ನಿಶ್ಚಯಿಸಿ  
+   - ಪುನರಾರಂಭದಾಗ ಯಾವ ಡೇಟಾವನ್ನು ಮರುಹೊಂದಿಸುವುದು ಎಂದು ಗುರುತಿಸಿ  
+
+2. **ನಿಮ್ಮ ಯೋಜನೆಯ ರಚನೆಯನ್ನು ಸ್ಥಾಪಿಸಿ**:  
+   ```
+   my-game/
+   ├── index.html
+   ├── style.css
+   ├── game.js
+   └── README.md
+   ```
+  
+3. **ನಿಮ್ಮ ಮೂಲ ಆಟದ ಲೂಪ್ ರಚಿಸಿ**:  
+   - ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಪ್ರಾರಂಭಿಸಿ  
+   - ಬಳಕೆದಾರ ಇನ್‌ಪುಟ್ ಹ್ಯಾಂಡಲ್ ಮಾಡಿ  
+   - ಆಟದ ಲಾಜಿಕ್ ಅನ್ನು ನವೀಕರಿಸಿ  
+   - ಅಂತ್ಯದ ಶರತ್ತುಗಳನ್ನು ಪರಿಶೀಲಿಸಿ  
+   - ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯನ್ನು ಪ್ರದರ್ಶಿಸಿ  
+
+### ತಾಂತ್ರಿಕ ಅಗತ್ಯತೆಗಳು
+
+**ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ**:  
+- ಚರಗಳ ಘೋಷಣೆಗೆ `const` ಮತ್ತು `let` ಉಪಯೋಗಿಸಿ  
+- ಅನುವಾಗ್‌ಕಾರಕಗಳನ್ನು (arrow functions) ಅಗತ್ಯ ಇದ್ದಲ್ಲಿ ಉಪಯೋಗಿಸಿ  
+- ES6+ ವೈಶಿಷ್ಟ್ಯಗಳಾದ ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್ ಮತ್ತು ವಿನ್ಯಾಸ ವಿನ್ಯಾಸಕಗಳನ್ನು ಬಳಸಿ  
+
+**ಈವೆಂಟ್ ಚಾಲಿತ ವಿನ್ಯಾಸ**:  
+- ಬಳಕೆದಾರ ಸಂವಹನಕ್ಕಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ರಚಿಸಿ  
+- ಈವೆಂಟ್‌ಗಳ ಮೂಲಕ ಆಟದ ಸ್ಥಿತಿಯ ಬದಲಾವಣೆಗಳನ್ನು ಜಾರಿಗೊಳಿಸಿ  
+- ಪುನರ್‌ಆರಂಭ ಕಾರ್ಯಕ್ಕಾಗಿ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಬಳಸಿ  
+
+**ಸ್ವಚ್ಛ ಕೋಡ್ ಅಭ್ಯಾಸ**:  
+- ಏಕ ದಾಯಿತ್ವಗಳೊಂದಿಗೆ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬರೆಯಿರಿ  
+- ವರ್ಣನಾತ್ಮಕ ಚರ ಮತ್ತು ಫಂಕ್ಷನ್ ಹೆಸರುಗಳನ್ನು ಉಪಯೋಗಿಸಿ  
+- ಆಟದ ಲಾಜಿಕ್ ಮತ್ತು ನಿಯಮಗಳನ್ನು ವಿವರಿಸುವ ಟಿಪ್ಪಣಿಗಳನ್ನು ಸೇರಿಸಿ  
+- ಕೋಡ್ ಅನ್ನು ತರ್ಕಬದ್ಧ ವಿಭಾಗಗಳಾಗಿ ಏಕಕಾಲೀನಗೊಳಿಸಿ  
+
+## ಸಲ್ಲಿಸುವ ಅಗತ್ಯತೆಗಳು
+
+### ಹಸ್ತಾಂತರಗಳನ್ನು ನವೀನಗೊಳಿಸಿ
+
+1. **ಪೂರ್ಣ ಆಟದ ಫೈಲ್‌ಗಳು**: ನಿಮ್ಮ ಆಟವನ್ನು ನಡೆಯಿಸಲು ಅಗತ್ಯವಿರುವ ಎಲ್ಲಾ HTML, CSS ಮತ್ತು JavaScript ಫೈಲ್‌ಗಳು  
+2. **README.md**: ಕೆಳಗಿನ ವಿಷಯಗಳನ್ನು ವಿವರಿಸುವ ದಾಖಲಾತಿ:  
+   - ನಿಮ್ಮ ಆಟವನ್ನು ಹೇಗೆ ಆಡಬೇಕು  
+   - ನೀವು ಜಾರಿಗೊಳಿಸಿದ ಅಂತ್ಯದ ಶರತ್ತುಗಳು ಯಾವುವು  
+   - ಪುನರ್‌ಆರಂಭಕ್ಕಾಗಿ ಸೂಚನೆಗಳು  
+   - ಯಾವುದೇ ವಿಶೇಷ ಲಕ್ಷಣಗಳು ಅಥವಾ ಕಾರ್ಯವಿಧಾನಗಳು  
+3. **ಕೋಡ್ ಟಿಪ್ಪಣಿಗಳು**: ನಿಮ್ಮ ಆಟದ ಲಾಜಿಕ್ ಮತ್ತು ಸಂವೇದಿ ನ್ಯಾಯಾಂಶಗಳ ಸ್ಪಷ್ಟ ವಿವರಣೆ  
+
+### ಪರೀಕ್ಷಾ ಪರಿಶೀಲನೆ ಪಟ್ಟಿ
+
+ಸಲ್ಲಿಸಲು ಮೊದಲು, ನಿಮ್ಮ ಆಟವನ್ನು ಪರಿಶೀಲಿಸಿ:
+
+- [ ] **ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್‌ನಲ್ಲಿ ದೋಷರಹಿತವಾಗಿ ચાલುತ್ತದೆ**  
+- [ ] **ಬಹು ಅಂತ್ಯದ ಶರತ್ತುಗಳನ್ನು ಜಾರಿಗೊಳಿಸಿದೆ**  
+- [ ] **ಶುದ್ಧ ಸ್ಥಿತಿಯನ್ನು ಮರುಹೊಂದಿಸಿ ಪುನರ್‌ಆರಂಭ ಮಾಡುತ್ತದೆ**  
+- [ ] **ಆಟದ ಸ್ಥಿತಿಯ ಬಗ್ಗೆ ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ**  
+- [ ] **ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವ್ಯಾಕರಣ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಬಳಕೆ ಮಾಡಿದೆ**  
+- [ ] **README.md ನಲ್ಲಿ ಸಮಗ್ರ ದಾಖಲೆಗಳಿವೆ**  
+
+## ಬೆಲೆಮಾಪನ ಮಾನದಂಡ
+
+| ಮಾನದಂಡಗಳು | ಅತ್ಯುತ್ತಮ (4) | ಪ್ರೌಢ (3) | ಅಭಿವೃದ್ಧಿಗೊಳ್ಳುತ್ತಿರುವ (2) | ಪ್ರಾರಂಭಿಕ (1) |
+|----------|---------------|----------------|----------------|--------------|
+| **ಆಟ ಕಾರ್ಯಕ್ಷಮತೆ** | ಬಹು ಅಂತ್ಯದ ಶರತ್ತುಗಳೊಂದಿಗೆ ಪೂರ್ಣ ಆಟ, ಸುಗಮ ಪುನರ್‌ಆರಂಭ ಮತ್ತು ಹೊಳೆಯುತ್ತಿರುವ ಆಟದ ಅನಭವ | ಮೂಲ ಅಂತ್ಯದ ಶರತ್ತುಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಆಟ ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಪುನರ್‌ಆರಂಭ ಕ್ರಮ | ಕೆಲವು ಅಂತ್ಯದ ಶರತ್ತುಗಳ ಜಾರಿಗೊಳಿಸಿದ್ದು ಪೂರ್ತಿ ಅಲ್ಲದ ಆಟ, ಪುನರ್‌ಆರಂಭದಲ್ಲಿ ಸಣ್ಣ ಸಮಸ್ಯೆಗಳು ಇರಬಹುದು | ನಿರ್ದಿಷ್ಟ ಕಾರ್ಯಕ್ಷಮತೆ ಇಲ್ಲದ ಅಪೂರ್ಣ ಆಟ ಮತ್ತು ಪ್ರಮುಖ ದೋಷಗಳು ಬರುವುದಾಗಿದೆ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಸ್ವಚ್ಛ, ಚೆನ್ನಾಗಿ ಸಂಘಟಿತ ಕೋಡ್, ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಭ್ಯಾಸಗಳು, ಸಮಗ್ರ ಟಿಪ್ಪಣಿಗಳು ಮತ್ತು ಅತ್ಯುತ್ತಮ ರಚನೆ | ಉತ್ತಮ ಕೋಡ್ ಸಂಘಟನೆ, ಆಧುನಿಕ ವ್ಯಾಕರಣ, ಯುಕ್ತಿಯುತ ಟಿಪ್ಪಣಿಗಳು ಮತ್ತು ಸ್ಪಷ್ಟ ರಚನೆ | ಮೂಲಭೂತ ಕೋಡ್ ಸಂಘಟನೆ, ಕೆಲವು ಆಧುನಿಕ ಅಭ್ಯಾಸಗಳು, ಕಡಿಮೆ ಟಿಪ್ಪಣಿಗಳು | ಖರಾಬ್ ಕೋಡ್ ಸಂಘಟನೆ, ಹಳೆಯ ವ್ಯಾಕರಣ, ಟಿಪ್ಪಣಿಗಳ ಕೊರತೆ ಮತ್ತು ರಚನೆ ಇಲ್ಲದಂತೆ |
+| **ಬಳಕೆದಾರ ಅನುಭವ** | ಸರಳ ಆಟವಾಡು, ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳು, ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯೆಗಳು, ಮನರಂಜಕ ಅಂತ್ಯ/ಪುನರ್‌ಆರಂಭ ಅನುಭವ | ಉತ್ತಮ ಆಟವಾಡು, ಸಮರ್ಥ ಸೂಚನೆಗಳು ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಗಳು, ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಅಂತ್ಯ/ಪುನರ್‌ಆರಂಭ | ಮೂಲಭೂತ ಆಟವಾಡು, ಕಡಿಮೆ ಸೂಚನೆಗಳು, ಆಟದ ಸ್ಥಿತಿಯಲ್ಲಿ ಕನಿಷ್ಠ ಸ್ಪಷ್ಟತೆ | ಗೊಂದಲಕಾರಿಯಾದ ಆಟವಾಡು, ಸ್ಪಷ್ಟವಾಗದ ಸೂಚನೆಗಳು ಮತ್ತು ಕಡಿಮೆ ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಗಳು |
+| **ತಾಂತ್ರಿಕ ಜಾರಿಗೊಳಿಕೆ** | ಆಟ ಅಭಿವೃದ್ಧಿ ತತ್ವಗಳು, ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಸ್ಥಿತಿ ನಿರ್ವಹಣದಲ್ಲಿ ನಿಪುಣತೆ ತೋರಿಸುವುದು | ಆಟ ತತ್ವಗಳನ್ನು ಒಳ್ಳೆಯ ರೀತಿಯಲ್ಲಿ ಅರ್ಥ ಮಾಡಿಕೊಂಡು ಜಾರಿಗೊಳಿಸುವಿಕೆ | ಮೂಲಭೂತ ಅರ್ಥ ಮತ್ತು ಅಂದಾಜು ಜಾರಿಗೊಳಿಸುವಿಕೆ | ಕಡಿಮೆ ಅರ್ಥ ಮತ್ತು ಕಠಿಣ ಜಾರಿಗೊಳಿಕೆ |
+| **ದಾಖಲೆಗಳಲ್ಲಿ** | ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳುಳ್ಳ ಸಮಗ್ರ README, ಉತ್ತಮವಾಗಿ ದಾಖಲಾತಿಯುಳ್ಳ ಕೋಡ್ ಮತ್ತು ವಿಶದ ಪರೀಕ್ಷಾ ಪ್ರমাণಗಳು | ಉತ್ತಮ ದಾಖಲಾತಿ, ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳು ಮತ್ತು ಯೋಗ್ಯ ಟಿಪ್ಪಣಿಗಳು | ಮೂಲಬೂತ ದಾಖಲೆ ಮತ್ತು ಕಡಿಮೆ ಸೂಚನೆಗಳು | ದಾಖಲೆಗಳ ಕೊರತೆ ಅಥವಾ ಇಲ್ಲದಂತಹ ಸ್ಥಿತಿ |
+
+### ಮೌಲ್ಯಮಾಪನ ಮಾಪನ
+
+- **ಅತ್ಯುತ್ತಮ (16-20 ಅಂಕೆಗಳು)**: ಸೃಜನಶೀಲ ಲಕ್ಷಣಗಳು ಮತ್ತು ಹೊಳೆಯುವ ಜಾರಿಗೊಳಿಕೆಯೊಂದಿಗೆ ನಿರೀಕ್ಷೆಗಳನ್ನು ಮೀರಿದೆ  
+- **ಪ್ರೌಢ (12-15 ಅಂಕೆಗಳು)**: ಎಲ್ಲಾ ಅಗತ್ಯತೆಗಳನ್ನು ಪೂರೈಸಿ ಉತ್ತಮ ಜಾರಿಗೊಳಿಕೆ  
+- **ಅಭಿವೃದ್ಧಿ (8-11 ಅಂಕೆಗಳು)**: ಹೆಚ್ಚಿನ ಅಗತ್ಯತೆಗಳನ್ನು ಪೂರೈಸಿದೆಯಾದರೂ ಸಣ್ಣ ಸಮಸ್ಯೆಗಳಿರಬಹುದು  
+- **ಪ್ರಾರಂಭಿಕ (4-7 ಅಂಕೆಗಳು)**: ಕೆಲವು ಅಗತ್ಯತೆಗಳನ್ನು ಪೂರೈಸಿ, ಆದರೆ ಪ್ರಮುಖ ಸುಧಾರಣೆಗಳನ್ನು ಅಗತ್ಯವಿದೆ  
+
+## ಹೆಚ್ಚುವರಿ ಅಧ್ಯಯನ ಸಂಪನ್ಮೂಲಗಳು
+
+- [MDN ಆಟ ಅಭಿವೃದ್ಧಿ ಮಾರ್ಗದರ್ಶಿ](https://developer.mozilla.org/en-US/docs/Games)  
+- [ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಟ ಅಭಿವೃದ್ಧಿ ಪ್ರಾಥಮಿಕ ಪಾಠಗಳು](https://developer.mozilla.org/en-US/docs/Games/Tutorials)  
+- [ಕ್ಯಾನ್ವಾಸ್ API ದಸ್ತಾವೇಜು](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)  
+- [ಆಟ ವಿನ್ಯಾಸ ಸಿದ್ಧಾಂತಗಳು](https://www.gamasutra.com/blogs/)  
+
+> 💡 **ಪ್ರೋ ಟಿಪ್**: ಸರಳವಾಗಿ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ಹಂತ ಹಂತವಾಗಿ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಿ. ಒಳ್ಳೆಯ ಮುಚ್ಚಳೆಯಾದ ಸರಳ ಆಟವು ದೋಷಗಳಿದ್ದ ಸಂಕೀರ್ಣ ಆಟಕ್ಕಿಂತ ಉತ್ತಮ!
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅಸೀಮಾ**:  
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ಸತ್ಯತೆಯತ್ತ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅನಿಖಂಡತೆಯಿರಬಹುದು ಎಂಬುದನ್ನು ಗಮನದಲ್ಲಿಡಿ. ಮೂಲ ಭಾಷೆಯ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಪ್ರಾಧಿಕಾರಾತ್ಮಕ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಬಾಧೆ ಅಥವಾ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಲುವಿಕೆಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/6-end-condition/solution/README.md

@@ -0,0 +1,17 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2026-01-08T15:01:54+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "kn"
+}
+-->
+ಇದು ಒಂದು ಪ್ಲೇಸ್‌ಹೋಲ್ಡ್, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಇಡಲಾಗಿದೆ
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ವಿವರಣೆ**:  
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಾದಕ್ಕಾಗಿ ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದದಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇದ್ದಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಡಾಕ್ಯುಮೆಂಟ್ ಅದರ ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕಾರಪೂರ್ಣ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗಳು ಅಥವಾ ದೋಷಾಸ್‌ಪದ interpretations ಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/6-end-condition/your-work/README.md

@@ -0,0 +1,17 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2026-01-08T15:01:06+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "kn"
+}
+-->
+ಇದು ಒಂದು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಇರಿಸಲಾಗಿದೆ
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಜ್ಯಾಂಶ**:  
+ಈ ਦਸਤಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಿತ್ತಿಗಾಗಿ ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತಳಿವುಗಳಿರಬಹುದು. ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅದರ ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿಯೇ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಅಗತ್ಯ ಮಾಹಿತಿಗೆ ವ್ಯಕ್ತಿಗತ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದ ಸೇವೆಯನ್ನು ಪಡೆಯುವುದು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ದೋಷ ಅರ್ಥಗುಳುಮೆಯ ಅಥವಾ ದೋಷ ವಿವರಣೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/README.md

@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2026-01-08T11:10:48+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬಾವುಳುವಂತಹ ಒಂದು ಬಾಹ್ಯಾಕಾಶ ಆಟವನ್ನು ನಿರ್ಮಿಸಿ
+
+ಮೆಚ್ಚುಗೆಯಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಭೂತಗಳನ್ನು ಕಲಿಸಲು ಒಂದು ಬಾಹ್ಯಾಕಾಶ ಆಟ
+
+ಈ ಪಾಠದಲ್ಲಿ ನೀವು ನಿಮ್ಮದೇ ಬಾಹ್ಯಾಕಾಶ ಆಟವನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಿಕೊಳ್ಳಬೇಕೆಂದನ್ನು ಕಲಿಯಲಿದ್ದೀರಿ. ನೀವು "Space Invaders" ಎಂಬ ಆಟವನ್ನು ಎಂದಾದರೂ ಆಡಿದ್ದರೆ, ಈ ಆಟದಲ್ಲಿ ಅದೇ ಧಾರಣೆ ಇದೆ: ಒಂದು ಬಾಹ್ಯಾಕಾಶ ನಾವಿಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಿ ಮತ್ತು ಮೇಲಿನಿಂದ ಬರುವ ರಾಕ್ಷಸರ ಮೇಲೆ ಬೆಂಕಿ ಹಾಯಿಸುವುದು. ಅಂತಿಮ ಆಟ ಹೇಗಿರುತ್ತದೆ ನೋಡಿರಿ:
+
+![Finished game](../../../6-space-game/images/pewpew.gif)
+
+ಈ ಆರು ಪಾಠಗಳಲ್ಲಿ ನೀವು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಕಲಿಯಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ:
+
+- **ಇಂಟರಾಗ್** ಮಾಡುವುದು Canvas ಅಂಶದೊಂದಿಗೆ ಸ್ಕ್ರೀನಿನಲ್ಲಿ ಅಳೆಯಲು
+- **ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು** ಕಾರ್ಟಿಶಿಯನ್ ಸಂಯೋಜನೆ ವ್ಯವಸ್ಥೆಯನ್ನು 
+- **ಕಲಿಯುವುದು** Pub-Sub ಮಾದರಿಯನ್ನು ಧ್ವನಿಸಂಪನ್ಮೂಲ ಆಟಗಳಿಗೆ ಸರಳವಾಗಿ ನಿರ್ವಹಿಸಲು ಮತ್ತು ವಿಸ್ತರಿಸಲು
+- **ಉಪಯೋಗಿಸುವುದು** Async/Await ಮೂಲಕ ಆಟದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು
+- **ನಿಯಂತ್ರಿಸುವುದು** ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳು
+
+## ಅವಲೋಕನ
+
+- ಸಿದ್ಧಾಂತ
+   - [ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಆಟಗಳನ್ನು ನಿರ್ಮಿಸುವ ಪರಿಚಯ](1-introduction/README.md)
+- ಅಭ್ಯಾಸ
+   - [ಕ್ಯಾನ್ವಾಸ್‌ಗೆ ಚಿತ್ರಣ ಮಾಡಿ](2-drawing-to-canvas/README.md)
+   - [ಸ್ಕ್ರೀನಿನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಚಲಿಸುವುದು](3-moving-elements-around/README.md)
+   - [ಘರ್ಷಣೆ ಪರಿಶೀಲನೆ](4-collision-detection/README.md)
+   - [ಸ್ಕೋರ್ ನೊಳಗೆ ಇಡುವುದು](5-keeping-score/README.md)
+   - [ಆಟ ಮುಗಿಸುವುದು ಮತ್ತು ಪುನರಾರಂಭಿಸುವುದು](6-end-condition/README.md)
+
+## ಕೃಪೆಗಳು
+
+ಈ ಆಟದ ಪೈಕಿ ಉಪಯೋಗಿಸಿದ ಸಂಪನ್ಮೂಲಗಳು https://www.kenney.nl/ ನಿಂದ ಬರುತ್ತವೆ. 
+ನೀವು ಗೇಮ್ ನಿರ್ಮಾಣದಲ್ಲಿ ಆಸಕ್ತಿ ಇದ್ದರೆ, ಇವು ಕೆಲವು ಅತ್ಯುತ್ತಮ ಸಂಪನ್ಮೂಲಗಳು, ಬಹಳಷ್ಟು ಉಚಿತವಾಗಿವೆ ಮತ್ತು ಕೆಲವು ಪಾವತಿಸಲಾಗಿವೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿರಾಕರಣೆ**:  
+ಈ ದಸ್ತಾವೇಜು [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸತೀಕತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯಾಂಶಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದೆ ಎಂಬುದನ್ನು ಗಮನದಲ್ಲಿರಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ದಸ್ತಾವೇಜು authoritative ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಗಂಭೀರ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ಈ ಅನುವಾದದ ಉಪಯೋಗದಿಂದ ಆಗಬಹುದಾದ ಯಾವುದೇ ತಪ್ಪ فهمಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ ಲಿಕೆಗಾಗಿ ನಾವು ಜವಾಬ್ದಾರಿಯಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/6-space-game/solution/README.md

@@ -0,0 +1,17 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2026-01-08T14:36:49+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "kn"
+}
+-->
+ಇದು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಆಗಿದ್ದು, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಬಿಡಲಾಗಿದೆ
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಎಚ್ಚರಿಕೆ**:
+ಈ ದಾಖಲೆವು AI ಅನುವಾದ ಸೇವಾ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯನ್ನು ಗುರಿಯಾಗಿಟ್ಟಿದ್ದರೂ, ಸ್ವಯಂಕ್ರಮಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸಮಗ್ರತೆಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲಭಾಷೆಯಲ್ಲಿನ ಮೂಲದocuಮೆಂಟ್ ಅನ್ನು ಅಧಿಕೃತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವನ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸುವ ವೇಳೆ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಸಮಜಿಕೆಗಳು ಅಥವಾ ಅರ್ಥರೂಪಾಂತರಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರನಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/1-template-route/README.md

@@ -0,0 +1,832 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "351678bece18f07d9daa987a881fb062",
+  "translation_date": "2026-01-08T17:05:35+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬ್ಯಾಂಕಿಂಗ್ ಆ್ಯಪ್ ಭಾಗ 1: ವೆಬ್ ಆ್ಯಪ್‍ನಲ್ಲಿ HTML ಟೆಂಪ್ಲೇಟ್ಗಳು ಮತ್ತು ಮಾರ್ಗಗಳು
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಆಪ್ ಅಭಿವೃದ್ಧಿ ಯಾತ್ರೆ
+    section SPA ಮೂಲಭೂತಗಳು
+      ಒಪ್ಪಿಕೊಳ್ಳಿ ಸಿಂಗಲ್-ಪೇಜ್ ಆಪ್ಸ್: 3: Student
+      ಟೆಂಪ್ಲೇಟ್ ಸಂ概念 ಕಲಿಯಿರಿ: 4: Student
+      DOM манಿಪ್ಯುಲೇಶನ್ ಮಾ스터 ಮಾಡಿ: 4: Student
+    section ಮಾರ್ಗದರ್ಶನ ವ್ಯವಸ್ಥೆಗಳು
+      ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮಾರ್ಗದರ್ಶನ ಅನುಷ್ಠಾನಗೊಳಿಸಿ: 4: Student
+      ಬ್ರೌಸರ್ ಇತಿಹಾಸ ನಿರ್ವಹಿಸಿ: 5: Student
+      ನಳೆಯದ ಯಂತ್ರಗಳನ್ನು ಸೃಷ್ಟಿಸಿ: 5: Student
+    section ವೃತ್ತಿಪರ ಮಾದರಿಗಳು
+      ಮಡ್ಯುಲರ್ ವಿನ್ಯಾಸ ನಿರ್ಮಿಸಿ: 5: Student
+      ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನ್ವಯಿಸಿ: 5: Student
+      ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸಿ: 5: Student
+```
+1969 ರಲ್ಲಿ Apollo 11 ಗೈಡ್ ಕಂಪ್ಯೂಟರ್ ಚಂದ್ರನ ಕಡೆಗೆ ನವಿಗೇಟ್ ಆದಾಗ, ಸಂಪೂರ್ಣ ಸಿಸ್ಟಮ್ ಮರುಪ್ರಾರಂಭಿಸದೆ ವಿಭಿನ್ನ ಕಾರ್ಯಕ್ರಮಗಳ ಮಧ್ಯೆ ಸ್ವಿಚ್ ಮಾಡಬೇಕಾಯಿತು. ಆಧುನಿಕ ವೆಬ್ ಆ್ಯಪ್‍ಗಳು ಕೂಡ ಇದೇ ರೀತಿಯಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ – ಅವು ನಿಮ್ಮೇ ಕಾಣುವ ವಸ್ತುಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಮರುಲೋಡ್ ಮಾಡದೆ ಬದಲಿಸುತ್ತವೆ. ಇದು ಬಳಕೆದಾರರು ಇಂದಿನ ದಿನಗಳು ನಿರೀಕ್ಷಿಸುವ ಸ್ಮೂತ್, ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಅನುಭವವನ್ನು ರಚಿಸುತ್ತದೆ.
+
+ಪ್ರತಿ ಸಂವಹನಕ್ಕಾಗಿ ಸಂಪೂರ್ಣ ಪುಟಗಳನ್ನು ಮರುಲೋಡ್ ಮಾಡುವ ಪರಿಕಲ್ಪನೆ ಇರುವ ಸಾಂಪ್ರದಾಯಿಕ ವೆಬ್‌ಸೈಟ್ಗಳಿಗೆ ಬದಲಾಗಿ, ಆಧುನಿಕ ವೆಬ್ ಆ್ಯಪ್‍ಗಳು ಬದಲಾವಣೆಗೆ ಅಗತ್ಯವಿರುವ ಭಾಗಗಳನ್ನು ಮಾತ್ರ నవೀನೀಕರಿಸುತ್ತವೆ. ಇದು ಮಿಷನ್ ಕಮೊಂಟ್ರೋಲ್ ವಿಭಿನ್ನ ಪ್ರದರ್ಶನಗಳ ಮಧ್ಯೆ ಸ್ವಿಚ್ ಮಾಡಿಕೊಳ್ಳುವ ಹಾಗೆ, ನಿರಂತರ ಸಂವಹನವನ್ನು ಕಾಪಾಡಿಕೊಂಡು, ದ್ರವ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
+
+ಇದಲ್ಲದೆ ಈ ಅನ್ನುವುದು ಬಹಳ drಬ್ರವವಾಗಿ ಏಕೆ ಡ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿದೆ ಎಂಬುದನ್ನು ನೋಡೋಣ:
+
+| ಸಾಂಪ್ರದಾಯಿಕ ಬಹು ಪುಟ ಆ್ಯಪ್ಸ್ | ಆಧುನಿಕ ಏಕ ಪುಟ ಆ್ಯಪ್ಸ್ |
+|----------------------------|-------------------------|
+| **ನವಿಗೇಶನ್** | ಪ್ರತಿಯೊಂದು ಪರದೆಯೂ ಸಂಪೂರ್ಣ ಪುಟ ಮರುಲೋಡ್ | ಕ್ಷಣಿಕ ವಿಷಯ ಸ್ವಿಚ್ |
+| **ಕಾರ್ಯಕ್ಷಮತೆ** | ಸಂಪೂರ್ಣ HTML ಡೌನ್ಲೋಡ್‌ನಿಂದ ನಿಧಾನ | ಭಾಗಶಃ ನವೀಕರಣಗಳಿಂದ ವೇಗವಾಗಿ |
+| **ಬಳಕೆದಾರ ಅನುಭವ** | ಜಾರ్గಿಂಗ್ ಪುಟ ಗಾಳಿಸುವಿಕೆಗಳು | ನಿಘಂಟಾಗಿಯೂ ಆ್ಯಪ್ ಹೋಲಿದ ಟ್ರಾನ್ಸಿಷನ್ಗಳು |
+| **ಡೇಟಾ ಹಂಚಿಕೆ** | ಪುಟಗಳ ಮಧ್ಯೆ ಕಠಿಣ | ಸುಲಭ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ |
+| ** ಅಭಿವೃದ್ಧಿ ** | ಬಹು HTML ಕಡತೆಗಳನ್ನು ನಿರ್ವಹಣೆ | ಡೈನಾಮಿಕ್ ಟೆಂಪ್ಲೇಟ್ಗಳೊಂದಿಗೆ ಒಂಟಿ HTML |
+
+**ರೂಪಾಂತರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+- **ಸಾಂಪ್ರದಾಯಿಕ ಆ್ಯಪ್‌ಗಳು** ಪ್ರತಿಯೊಂದು ನವಿಗೇಶನ್ ಕ್ರಿಯೆಗೆ ಸರ್ವರ್ ವಿನಂತಿಗಳನ್ನು ಅಗತ್ಯವಿರುತ್ತವೆ
+- **ಆಧುನಿಕ SPAs** ಒಂದು ಬಾರಿ ಲೋಡ್ ಆಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ವಿಷಯವನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ನವೀಕರಿಸುತ್ತವೆ
+- **ಬಳಕೆದಾರರ ನಿರೀಕ್ಷೆಗಳು** ಈಗ ತಕ್ಷಣದ, ನಿರಂತರ ಸಂವಹನಗಳಿಗೆ ಮೆಚ್ಚುಗೆ ನೀಡುತ್ತವೆ
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರಯೋಜನಗಳು** ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಕಡಿತ ಹಾಗೂ ವೇಗದ ಪ್ರತಿಕ್ರಿಯೆಗಳು
+
+ಈ ಪಾಠದಲ್ಲಿ, ನಮ್ಮು ಬಹು ಪರದೆಗಳೊಂದಿಗೆ ಒಂದೇ ಕಾಂಟಿನ್ಯೂಸ್ ಫ್ಲೋ ಹೊಂದಿರುವ ಬ್ಯಾಂಕಿಂಗ್ ಆ್ಯಪ್ ಹತೋಟಿ ಮಾಡೋಣ. ವೈಜ್ಞಾನಿಕರು ವಿವಿಧ ಪ್ರಯೋಗಗಳಿಗೆ ಮರುರಚಿಸಲು ಸಾಧ್ಯವಾದ ಮಾಯಾ ಸಾಧನಗಳನ್ನು ಬಳಸುವ ಹಾಗೆ, ನಾವು HTML ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ನಿರ್ಬಂಧಿತ ಘಟಕಗಳಾಗಿ ಬಳಸಿಕೊಂಡು ಅವುಗಳನ್ನು ನಾವು ಬೇಕಾದಂತೆ ಪ್ರದರ್ಶಿಸೋಣ.
+
+ನೀವು HTML ಟೆಂಪ್ಲೇಟ್ಗಳೊಂದಿಗೆ (ಸೇರಿಸಬಹುದಾದ ಬ್ಲೂಪ್ರಿಂಟ್‍ಗಳು), ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾರ್ಗಸೂಚಿ (ಪರದೆಗಳ ನಡುವೆ ಸ್ವಿಚ್ ಮಾಡುವ ವ್ಯವಸ್ಥೆ), ಮತ್ತು ಬ್ರೌಸರ್ ಇತಿಹಾಸ API (ಹಿಂದಿನ ಬಟನ್ ಅಭಿವೃದ್ದಿಯಾಗುತ್ತದೆ) ಸಹಿತ ಕೆಲಸ ಮಾಡುತ್ತೀರಿ. ಇವು React, Vue, Angular ಮತ್ತಿತರ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿಯೇ ಬಳಸುವ ಮೂಲತತ್ವ ತಿಳಿಯುವ ವಿಧಾನಗಳಾಗಿವೆ.
+
+ಕೊನೆಯಿಗೆ, ನೀವು ವೃತ್ತಿಪರ ಏಕ ಪುಟ ಆ್ಯಪ್ ತತ್ವಗಳನ್ನು ತೋರಿಸುವ ಕಾರ್ಯನಿರತ ಬ್ಯಾಂಕಿಂಗ್ ಆ್ಯಪ್ ಹೊಂದಿರುತ್ತೀರಿ.
+
+```mermaid
+mindmap
+  root((Single-Page Applications))
+    Architecture
+      Template System
+      Client-side Routing
+      State Management
+      Event Handling
+    Templates
+      ಮರುಬಳಕೆಗೊಡಬಹುದಾದ ಘಟಕಗಳು
+      ಗತಿಶೀಲ ವಿಷಯ
+      DOM ಅನುಷ್ಠಾನ
+      ವಿಷಯ ಬದಲಾವಣೆ
+    Routing
+      URL ನಿರ್ವಹಣೆ
+      ಇತಿಹಾಸ API
+      ನ್ಯಾವಿಗೇಶನ್ ಲಾಜಿಕ್
+      ಬ್ರೌಸರ್ ಇಂಟಿಗ್ರೇಶನ್
+    User Experience
+      ವೇಗದ ನ್ಯಾವಿಗೇಶನ್
+      ಸೊಗಸಾದ ಪರಿವರ್ತನೆಗಳು
+      ಸಕಲ ಸ್ಥಿತಿ
+      ಆಧುನಿಕ ಸಂವಹನಗಳು
+    Performance
+      ಕಡಿತಗೊಂಡ ಸರ್ವರ್ ವಿನಂತಿಗಳು
+      ವೇಗವಾದ ಪುಟ ಪರಿವರ್ತನೆಗಳು
+      ಸಮರ್ಥ ಸಂಪನ್ಮೂಲ ಬಳಕೆ
+      ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆ
+```
+## ಮುಂಚಿನ ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಮುಂಚಿನ ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/41)
+
+### ನೀವು ಹೊಂದಬೇಕಾದವುಗಳೇನು
+
+ನಮಗೆ ನಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಆ್ಯಪ್ ಪರೀಕ್ಷಿಸಲು ಒಂದು ಸ್ಥಳೀಯ ವೆಬ್ ಸರ್ವರ್ ಬೇಕಾಗುತ್ತದೆ – ಬೆದರಿಸಿಕೊಳ್ಳಬೇಡಿ, ಇದು ಬಲ್ಲುದಕ್ಕಿಂತ ಸುಲಭ! ನೀವು ಇದನ್ನು ಹೊಂದಿರದಿದ್ದರೆ, [Node.js](https://nodejs.org) ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್‌ನಿಂದ `npx lite-server` ನಡಹಿಸಿ. ಈ ಸರಳ ಕಮಾಂಡ್ ಸ್ಥಳೀಯ ಸರ್ವರ್ ಸ್ಥಾಪಿಸಿ ನಿಮ್ಮ ಆ್ಯಪ್ ಅನ್ನು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ತೆರೆದಿಡುತ್ತದೆ.
+
+### ತಯಾರಿ
+
+ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ `bank` ಎಂಬ ಫೋಲ್ಡರ್ ಮತ್ತು ಅದರೊಳಗೆ `index.html` ಎಂಬ ಫೈಲ್ ರಚಿಸಿ. ನಾವು ಈ HTML [ಬಾಯ್ಲರ್‬ಪ್ಲೇಟ್](https://en.wikipedia.org/wiki/Boilerplate_code) ಇಂದ ಆರಂಭಿಸೋಣ:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bank App</title>
+  </head>
+  <body>
+    <!-- This is where you'll work -->
+  </body>
+</html>
+```
+
+**ಇದು ಬಾಯ್ಲರ್ ಪ್ಲೇಟ್ ಕೊಡುವದು:**
+- ಸೂಕ್ತ DOCTYPE ಸೂಚನೆಯೊಂದಿಗೆ HTML5 ಡಾಕ್ಯುಮೆಂಟ್ ರಚನೆ ಮಾಡುತ್ತದೆ
+- ಅಂತರರಾಷ್ಟ್ರೀಯ ಪಠ್ಯ ಬೆಂಬಲಕ್ಕಾಗಿ UTF-8 ಅಕ್ಷರ ಎನ್‌ಕೋಡಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ
+- ಮೊಬೈಲ್ ಹೊಂದಾಣಿಕೆಯViewport ಮेटಾ ಟ್ಯಾಗ್ ಬಳಸಿ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಡಿಸೈನ್ ಅನುಮತಿಸುತ್ತದೆ
+- ಬ್ರೌಸರ್ ಟ್ಯಾಬಿನಲ್ಲಿ ಕಾಣಿಸುವ ವಿವರಣಾತ್ಮಕ ಶೀರ್ಷಿಕೆ ಸೃಷ್ಟಿಸುತ್ತದೆ
+- ನಮ್ಮ ಆ್ಯಪ್ ನಿರ್ಮಿಸಲು ಸ್ವಚ್ಛವಾದ ಬಾಡಿ ವಿಭಾಗವನ್ನು ರಚಿಸುತ್ತದೆ
+
+> 📁 **ಪ್ರಾಜೆಕ್ಟ್ ಕ್ಕೆ ಕೆಳಗಿನ ಸಂರಚನೆ ಇದೆ preview**
+> 
+> **ಈ ಪಾಠದ ಕೊನೆಯಲ್ಲಿ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಒಳಗೊಂಡಿರಲಿದೆ:**
+> ```
+> bank/
+> ├── index.html      <!-- Main HTML with templates -->
+> ├── app.js          <!-- Routing and navigation logic -->
+> └── style.css       <!-- (Optional for future lessons) -->
+> ```
+> 
+> **ಫೈಲ್ ಜವಾಬ್ದಾರಿಗಳು:**
+> - **index.html**: ಎಲ್ಲಾ ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ಒಳಗೊಂಡಿದ್ದು ಆ್ಯಪ್ ರಚನೆ ನೀಡುತ್ತದೆ
+> - **app.js**: ಮಾರ್ಗಸೂಚಿ, ನವಿಗೇಶನ್, ಮತ್ತು ಟೆಂಪ್ಲೇಟು ನಿರ್ವಹಣೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ
+> - **ಟೆಂಪ್ಲೇಟ್ಗಳು**: ಲಾಗಿನ್, ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಮತ್ತು ಇತರೆ ಪರದೆಗಳಿಗೆ UI ವಿನ್ಯಾಸವನ್ನು ಸೂಚಿಸುತ್ತವೆ
+
+---
+
+## HTML ಟೆಂಪ್ಲೇಟ್ಗಳು
+
+ಟೆಂಪ್ಲೇಟ್ಗಳು ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಮೂಲಭೂತ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತವೆ. ಗುಟೆನ್‌ಬರ್ಗ್ 1440 ರಲ್ಲಿ ಚಲಿಸಲು ಸಾಧ್ಯವಾದ ಪ್ರಿಂಟಿಂಗ್ ಆವಿಷ್ಕರಿಸಿದ್ದಾಗ, ಸಂಪೂರ್ಣ ಪುಟಗಳನ್ನು ತೆಗೆಯುವ ಬದಲು ಮತ್ತೆಬಾರ್ನಾಗಿ ಬಳಸಬಹುದಾದ ಅಕ್ಷರ ಬ್ಲಾಕ್‌ಗಳನ್ನು ರಚಿಸಲು ಕಂಡುಹಿಡಿದು ಅದನ್ನು ಅಗತ್ಯವಾಗಿ ಅಳವಡಿಸತಕ್ಕಂತೆ ವ್ಯವಸ್ಥೆ ಮಾಡಿದರು. HTML ಟೆಂಪ್ಲೇಟ್ಗಳೂ ಇದೇ ತತ್ವದ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ – ಪ್ರತಿ ಪರದೆಗೆ পৃথक HTML ಫೈಲ್ ರಚಿಸುವ ಬದಲಾಗಿ, ಅವು ಬಳಸಲು ಆಗುವ ರಚನೆಗಳನ್ನು ಪರಿಗಣಿಸಿ ಬೇಕಾದಾಗ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
+
+```mermaid
+flowchart TD
+    A["📋 ಟೆಂಪ್ಲೇಟ್ ವ್ಯಾಖ್ಯಾನ"] --> B["💬 ಡಿಒಎಂನಲ್ಲಿ ಮರೆಮಚಿವೆ"]
+    B --> C["🔍 ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಟೆಂಪ್ಲೇಟ್ ಹುಡುಕುತ್ತದೆ"]
+    C --> D["📋 ಟೆಂಪ್ಲೇಟ್ ವಿಷಯವನ್ನು ನಕಲಿಸಿ"]
+    D --> E["🔗 ದೃಶ್ಯಮಾನದ ಡಿಒಎಂಗಳಿಗೆ ಜೋಡಿಸಿ"]
+    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) `<template>` ಅಂಶ ಬಳಸಿ ನಿರ್ಧರಿಸುವುದು. ಟೆಂಪ್ಲೇಟು ಎಂದರೆ ಬ್ರೌಸರ್ ತೋರಿಸುವುದಿಲ್ಲದ, ಆದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಸಮಯದಲ್ಲಿ ಜೀವಂತವಾಗಿ ತೋರಿಸಬಹುದಾದ ಪುನಃಬಳಕೆಗೊಳ್ಳಬಹುದಾದ HTML ಬ್ಲಾಕ್.
+
+### ಮಾಡೋಣ
+
+ನಾವು ಎರಡು ಪ್ರಮುಖ ಪರದೆಗಳೊಂದಿಗೆ ಬ್ಯಾಂಕ್ ಆ್ಯಪ್ ಹೆಟ್ಟು ಮಾಡೋಣ: ಲಾಗಿನ್ ಪುಟ ಮತ್ತು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್. ಮೊದಲಿಗೆ, ನಮ್ಮ HTML ಬಾಡಿಗೆ ಒಂದು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಅಂಶ ಸೇರಿಸೋಣ – ಇಲ್ಲಿ ನಮ್ಮ ಎಲ್ಲಾ ವಿಭಿನ್ನ ಪರದೆಗಳು ಪ್ರದರ್ಶಿಸಲ್ಪಡುವವು:
+
+```html
+<div id="app">Loading...</div>
+```
+
+**ಈ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳೋಣ:**
+- "app" ಎಂಬ ಐಡಿ ಸಹಿತ ಕನ್ಟೇನರ್ ರಚಿಸುತ್ತದೆ, ಎಲ್ಲ ಪರದೆಗಳು ಇಲ್ಲಿ ತೋರಿಸಲಾಗುತ್ತವೆ
+- ಮೊದಲ ಪರದೆ ಆರಂಭಿಸುವವರೆಗೆ ಲೋಡ್ ಆಗುತ್ತಿರುವ ಸಂದೇಶವನ್ನು ತೋರಿಸುತ್ತದೆ
+- ಡೈನಾಮಿಕ್ ವಿಷಯಕ್ಕಾಗಿ ಒಬ್ಬ mounting point ಒದಗಿಸುತ್ತದೆ
+- `document.getElementById()` ಬಳಸಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ತಲುಪಲು ಸುಲಭವಾದದ್ದು
+
+> 💡 **ಪರಿಪಾಕ ಸಲಹೆ**: ಈ ಅಂಶದ ವಿಷಯ ಬದಲಾಯಿಸಲಾಗುವ್ದರಿಂದ, ಆ್ಯಪ್ ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ತೋರಿಸಲು ಲೋಡ್ ಸಂದೇಶ ಅಥವಾ ಸೂಚಕ ಹಾಕಬಹುದು.
+
+ಬಂದ ಮೇಲೆ, ಅಥ್ವಾ ಲಾಗಿನ್ ಪುಟಕ್ಕೆ HTML ಟೆಂಪ್ಲೇಟನ್ನು ಕೆಳಗೆ ಸೇರಿಸೋಣ. ಪ್ರಸ್ತುತ, ನಮಗೆ ಅಲ್ಲಿ ಶೀರ್ಷಿಕೆ ಮತ್ತು ನವಿಗೇಶನ್ ಮಾಡಲು ಬಳಸುವ ಲಿಂಕ್ ಇರುವ ವಿಭಾಗ ಮಾತ್ರ ಇರಲಿದೆ:
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+**ಈ ಲಾಗಿನ್ ಟೆಂಪ್ಲೇಟು ವಿವರಣೆ:**
+- "login" ಎಂಬ ವಿಶಿಷ್ಟ ಗುರುತಿನೊಂದಿಗೆ ಟೆಂಪ್ಲೇಟು ವಿವರಣೆ ಮಾಡುತ್ತದೆ, ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗಾಗಿ ಟಾರ್ಗೆಟ್ ಆಗುತ್ತದೆ
+- ಆ್ಯಪ್‌ಬ್ರಾಂಡಿಂಗ್ ಸ್ಥಾಪಿಸುವ ಮುಖ್ಯ ಶೀರ್ಷಿಕೆಯೊಂದಿಗೆ ಒಳಗೊಂಡಿದೆ
+- ಸಂಬಂಧಿತ ವಿಷಯಗಳನ್ನು ಗುಂಪಾಗಿಡಲು ಅರ್ಥಪೂರ್ಣ `<section>` ಅಂಶ ಹೊಂದಿದೆ
+- ಬಳಕೆದಾರರನ್ನು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ಮಾರ್ಗದರ್ಶನ ಮಾಡುವ ನವಿಗೇಶನ್ ಲಿಂಕ್ ಒದಗಿಸುತ್ತದೆ
+
+ನಂತರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಪುಟಕ್ಕೆ ಇನ್ನೊಂದು HTML ಟೆಂಪ್ಲೇಟು ಸೇರಿಸಲಿದ್ದೇವೆ. ಈ ಪುಟದಲ್ಲಿ ವಿಭಿನ್ನ ವಿಭಾಗಗಳು ಇರುತ್ತವೆ:
+
+- ಶೀರ್ಷಿಕೆ, ಶೀರ್ಷಿಕೆ ಮತ್ತು ಲಾಗ್ಅೌಟ್ ಲಿಂಕ್ ನೊಂದಿಗೆ
+- ಬ್ಯಾಂಕ್ ಖಾತೆಯ ಪ್ರಸ್ತುತ ಬಾಕಿ
+- ವ್ಯವಹಾರಗಳ ಪಟ್ಟಿ, ಟೇಬಲ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶನಗೊಳ್ಳುತ್ತದೆ
+
+```html
+<template id="dashboard">
+  <header>
+    <h1>Bank App</h1>
+    <a href="/login">Logout</a>
+  </header>
+  <section>
+    Balance: 100$
+  </section>
+  <section>
+    <h2>Transactions</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Object</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</template>
+```
+
+**ಈ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನ ಪ್ರತಿ ಭಾಗದ ಅರ್ಥ:**
+- ನವಿಗೇಶನ್ ಒಳಗೊಂಡ ಅರ್ಥಪೂರ್ಣ `<header>` ಅಂಶದಿಂದ ಪುಟದ ರಚನೆ
+- ಬ್ರ್ಯಾಂಡಿಂಗ್ ಕಾಪಾಡಲು ಎಲ್ಲಾ ಪರದೆಗಳಲ್ಲಿ ಆ್ಯಪ್ ಶೀರ್ಷಿಕೆ ಪ್ರದರ್ಶನೆ
+- ಲಾಗ್ಅೌಟ್ ಲಿಂಕ್ ನೀಡುವುದರಿಂದ ಲಾಗಿನ್ ಪರದೆಗೆ ಮರಳುವ ಮಾರ್ಗವು ಇದೆ
+- ಬಾಕಿ ವಿಶೇಷ ಸೆಕ್ಷನ್‌ನಲ್ಲಿ ತೋರಿಸಲಾಗುತ್ತದೆ
+- ವ್ಯವಹಾರ ಡೇಟಾ ಸರಿಯಾದ HTML ಟೇಬಲ್ ಬಳಸಿ ಒಕೆಯಾಗಿದೆ
+- ಡೇಟು, ಆಬ್ಜೆಕ್ಟ್ ಮತ್ತು ಮೊತ್ತ ಕಾಲಮ್‌ಗಳಿಗಾಗಿ ಟೇಬಲ್ ಶಿರೋನಾಮೆಗಳು
+- ಡೈನಾಮಿಕ್ ವಿಷಯ ಸೇರಿಸುವುದಕ್ಕೆ ಟೇಬಲ್ ಬಾಡಿ ಖಾಲಿ ಇಟ್ಟುಕೊಳ್ಳಲಾಗಿದೆ
+
+> 💡 **ಪರಿಪಾಕ ಸಲಹೆ**: HTML ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ರಚಿಸುವಾಗ, ಅವು ಹೇಗಿರಬಹುದು ಎಂದು ನೋಡಲು, `<template>` ಮತ್ತು `</template>` ಸಾಲುಗಳನ್ನು `<!-- -->` ಒಳಗೊಂಡು ಕಾಮೆಂಟ್ ಮಾಡಬಹುದು.
+
+### 🔄 **Pedagogical Check-in**
+**ಟೆಂಪ್ಲೇಟು ವ್ಯವಸ್ಥೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ವಯಿಸುವ ಮೊದಲು ಈ ವಿಷಯಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ:
+- ✅ ಟೆಂಪ್ಲೇಟುಗಳು ಸಾಮಾನ್ಯ HTML ಅಂಶಗಳಿಂದ ಹೇಗೆ ಭಿನ್ನವಾಗಿವೆ
+- ✅ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಕ್ರಿಯಗೊಳಿಸುವ ತನಕ ಟೆಂಪ್ಲೇಟುಗಳು ದೃಶ್ಯಮಾನವಾಗದೆ ಇರುತ್ತವೆ
+- ✅ ಟೆಂಪ್ಲೇಟುಗಳಲ್ಲಿ ಅರ್ಥಪೂರ್ಣ HTML ರಚನೆಯ ಮಹತ್ವ
+- ✅ ಟೆಂಪ್ಲೇಟುಗಳು ಪುನಃಬಳಕೆಗೊಳ್ಳುವ UI ಘಟಕಗಳನ್ನು ಹೇಗೆ ಸಾಧ್ಯಮಾಡುತ್ತವೆ
+
+**ತಕ್ಷಣ ಸ್ವಯಂ ಪರೀಕ್ಷೆ**: ನಿಮ್ಮ HTMLನೊಳಗಿನ `<template>` ಟ್ಯಾಗ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಿದರೆ ಏನಾಗುತ್ತದೆ?
+*ಉತ್ತರ: ವಿಷಯ ಲಭ್ಯವಾಗುತ್ತದೆ ಮತ್ತು ಅದು ಟೆಂಪ್ಲೇಟು ಕಾರ್ಯಕ್ಷಮತೆ ಕಳೆದುಕೊಂಡು ಸಾದಾ HTML ಆಗುತ್ತದೆ*
+
+**ವಾಸ್ತುಶಿಲ್ಪ ಪ್ರಯೋಜನಗಳು**: ಟೆಂಪ್ಲೇಟುಗಳು ಒದಗಿಸುವುದು:
+- **ಪುನಃಬಳಕೆ**: ಒಬ್ಬ ವಿವರಣೆ, ಬಹಳ ಸರಬರಾಜುಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ**: ಅನವಶ್ಯಕ HTML ಪಾರ್ಸಿಂಗ್ ಇಲ್ಲ
+- **ನಿರ್ವಹಣೆ ಅನುಕೂಲತೆ**: ಕೇಂದ್ರಗೊಳ್ಳುವ UI ರಚನೆ
+- **ಲಚೀಲತೆ**: ಡೈನಾಮಿಕ್ ವಿಷಯ ಸ್ವಿಚ್
+
+✅ ನಾವು ಟೆಂಪ್ಲೇಟುಗಳಲ್ಲಿ `id` ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುವುದಕ್ಕೆ ಕಾರಣವೇನು? ನಾವು ಕ್ಲಾಸ್‌ಲೆಗಳಂತೆ ಇನ್ನೇನು ಬಳಸಬಹುದೇ?
+
+## ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಟೆಂಪ್ಲೇಟ್ಗಳಿಗೆ ಜೀವ ತುಂಬೋಣ
+
+ ಈಗ ನಮ್ಮ ಟೆಂಪ್ಲೇಟುಗಳನ್ನು ಕಾರ್ಯನಿರತಗೊಳಿಸಬೇಕು. 3D ಪ್ರಿಂಟರ್ ಡಿಜಿಟಲ್ ಬ್ಲೂಪ್ರಿಂಟ್ ತೆಗೆದುಕೊಂಡು ಭೌತಿಕ ವಸ್ತುವನ್ನಾಗಿ ಮಾಡೋಂತೆಯೇ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಮ್ಮ ಅಸ್ಪಷ್ಟ ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ಗಮನಿಸಬಹುದಾದ, ಕ್ರಿಯಾಶೀಲ ಅಂಶಗಳಾಗಿ ರೂಪಿಸಿಕೊಳ್ಳುತ್ತದೆ.
+
+ಈ ಪ್ರಕ್ರಿಯೆ ಮೂರನೇ ಹಂತಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಇದು ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಮೂಲ ತಳತಟ್ಟಿಗೆ ಸೇರಿದೆ. ನೀವು ಈ ಮಾದರಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡ ಮೇಲೆ, ನಿಮಗೆ ಹಲವು ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲೂ ಇದನ್ನು ಗುರುತಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.
+
+ನೀವು ನಿಮ್ಮ ಪ್ರಸ್ತುತ HTML ಫೈಲ್ ಅನ್ನು ಬ್ರೌಸರ್ ನಲ್ಲಿ ಪ್ರಯತ್ನಿಸಿದರೆ, ಅದು `Loading...` ಎಂದು ತೋರಿಸಿಕೊಂಡೇ ತಂಗಿರುತ್ತದೆ. ಇದಕ್ಕಿತ್ತೆ ಕಾರಣ, ಟೆಂಪ್ಲೇಟುಗಳನ್ನು ಸೃಷ್ಟಿಸಿ ಪ್ರದರ್ಶಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ.
+
+ಟೆಂಪ್ಲೇಟುinstantiate ಮಾಡುವುದು ಸಾಮಾನ್ಯವಾಗಿ 3 ಹಂತಗಳಲ್ಲಿ ಆಗುತ್ತದೆ:
+
+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[👁️ ಬಳಕೆದಾರನಿಗೆ 템್ಪ್ಲೇಟ್ ಗೋಚರಿಸುತ್ತದೆ]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style C fill:#e8f5e8
+    style D fill:#fff3e0
+```
+**ಪ್ರಕ್ರಿಯೆಯ ದೃಶ್ಯ ವಿವರ:**
+- **ಹಂತ 1** : DOM ರಚನೆ ಒಳಗಿನ ಅಸ್ಪಷ್ಟ ಟೆಂಪ್ಲೇಟು ಸ್ಥಳ ಪತ್ತೆಮಾಡುತ್ತದೆ
+- **ಹಂತ 2** : ಸುರಕ್ಷಿತವಾಗಿ ಬದಲಾಯಿಸಬಹುದಾದ ಕಾರ್ಯಾನ್ವಿತ ನಕಲನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ
+- **ಹಂತ 3** : ಪ್ರತಿಯನ್ನು ದೃಶ್ಯಮಾನ ಪುಟ ಪ್ರದೇಶಕ್ಕೆ ಸೇರಿಸುತ್ತದೆ
+- **ಫಲಿತಾಂಶ**: ಬಳಕೆದಾರರು ಸಂಪರ್ಕ ಮಾಡಬಹುದಾದ ಕಾರ್ಯನಿರತ ಸ್ಕ್ರೀನ್
+
+✅ ನಾವು ಟೆಂಪ್ಲೇಟು ನಕಲುಮಾಡಬೇಕಾಗಿರುವುದು ಯಾಕೆ? ಈ ಹಂತ ತಪ್ಪಿಸಿದರೆ ಏನಾಗಬಹುದು?
+
+### ಕಾರ್ಯ
+
+ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ `app.js` ಎಂಬ ಹೊಸ ಫೈಲ್ ರಚಿಸಿ ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ HTML `<head>` ವಿಭಾಗದಲ್ಲಿ ಆಮದುಮಾಡಿ:
+
+```html
+<script src="app.js" defer></script>
+```
+
+**ಈ ಸ್ಕ್ರಿಪ್ಟ್ ಇಂಪೋರ್ಟ್ ಅರ್ಥ:**
+- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಅನ್ನು ನಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಲಿಂಕ್ ಮಾಡುತ್ತದೆ
+- HTML ಪಾರ್ಸಿಂಗ್ ನಂತರ ಸ್ಕ್ರಿಪ್ಟ್ ನಡಿಸಲು `defer` ಗುಣಲಕ್ಷಣ ಬಳಸು ತಾನೆ
+- ಎಲ್ಲಾ 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 = '';` ಈ ಕೋಡ್‌ನ ಉದ್ದೇಶವೇನು? ಇದಿಲ್ಲದೆ ಏನಾಗಬಹುದು?
+
+## ಮಾರ್ಗಗಳು ರಚಿಸುವುದು
+
+ಮಾರ್ಗ ಹಾಗೂ URL ಗಳು ಸರಿಯಾದ ವಿಷಯಕ್ಕೆ ಸಂಪರ್ಕಿಸುವರೆಂದು ಅಂತರ್ಜಾಲ ಆ್ಯಪ್‌ನಲ್ಲಿ ಅತ್ಯವಶ್ಯ. ಪ್ರಾಚೀನ ದೂರವಾಣಿ ಆಪರೇಟರ್‌ಗಳು ಕಾಲ್‌ಗಳನ್ನು ಸರಿಯಾದ ಸ್ಥಳಕ್ಕೆ ಸಂಪರ್ಕಿಸುವಂತೆ, ಎಲ್ಲ ಈ URL ವಿನಂತಿಯನ್ನು ಸಂಬಂಧಿತ ಪರದೆಗೆ ತಲುಪಿಸುವುದು Routing.
+
+```mermaid
+flowchart LR
+    A["🌐 URL ಪಥ<br/>/dashboard"] --> B["🗺️ ಮಾರ್ಗಗಳು ವಸ್ತು<br/>ನೋಡಾಟ"]
+    B --> C["🎯 ಟೆಂಪ್ಲೇಟ್ ID<br/>'dashboard'"]
+    C --> D["📌 ಟೆಂಪ್ಲೇಟ್ ಕಂಡುಹಿಡಿಯಿರಿ<br/>getElementById"]
+    D --> E["👁️ ಪ್ರದರ್ಶಣ್ ಪರದೆ<br/>ನಕಲು ಮಾಡಿ & ಸೇರಿಸಿ"]
+    
+    F["📍 /login"] --> G["🎯 'login'"]
+    H["📍 /unknown"] --> I["❌ ಕಾಣಲಿಲ್ಲ"]
+    I --> J["🔄 /login ಗೆ ಮರುನಿರ್ದೇಶನ ಮಾಡಿ"]
+    
+    style B fill:#e3f2fd
+    style E fill:#e8f5e8
+    style I fill:#ffebee
+    style J fill:#fff3e0
+```
+ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ, ವೆಬ್ ಸರ್ವರ್‌ಗಳು ವಿಭಿನ್ನ URL ಗೆ ವಿಭಿನ್ನ HTML ಫೈಲ್ ಗಳನ್ನು ಸರ್ವ్ ಮಾಡುತ್ತಿದ್ದರು. ಏಕೆಂದರೆ ನಾವು ಏಕ ಪುಟ ಆ್ಯಪ್ ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ, ನಾವು ಈ Routing ಅನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ನಡಿಸಬೇಕು. ಇದರಿಂದ ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯಲ್ಲಿ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣ ಸಿಗುತ್ತದೆ.
+
+```mermaid
+flowchart LR
+    A["🌐 URL ಮಾರ್ಗ<br/>/dashboard"] --> B["🗺️ ಮಾರ್ಗಗಳು ವಸ್ತು<br/>ಹುಡುಕು"]
+    B --> C["🎯 ಟೆಂಪ್ಲೇಟಿನ ಐಡಿ<br/>'dashboard'"]
+    C --> D["📄 ಟೆಂಪ್ಲೇಟ್ ಹುಡುಕು<br/>getElementById"]
+    D --> E["👁️ ಪ್ರದರ್ಶನ ಪರದೆ<br/>ನಕಲು ಮಾಡಿ & ಸೇರಿಸಿ"]
+    
+    F["📍 /login"] --> G["🎯 'login'"]
+    H["📍 ಅಜ್ಞಾತ"] --> I["❌ ದೊರಕಲಿಲ್ಲ"]
+    I --> J["🔄 /login ಗೆ ಮళ్ళಿ ಕಳುಹಿಸಿ"]
+    
+    style B fill:#e3f2fd
+    style E fill:#e8f5e8
+    style I fill:#ffebee
+    style J fill:#fff3e0
+```
+**Routing ನ ಹರಿವು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ:**
+- URL ಬದಲಾವಣೆಗಳು ನಮ್ಮ ಮಾರ್ಗ ಸಂರಚನೆಯಲ್ಲಿ ಹುಡುಕಾಟ ಹುಟ್ಟಿಸುತ್ತವೆ
+- ಮಾನ್ಯ ಮಾರ್ಗಗಳು ನಿರ್ದಿಷ್ಟ ಟೆಂಪ್ಲೇಟು IDಗಳಿಗೆ ನಕ್ಷೆ ಹಾಕುತ್ತವೆ
+- ಅಮಾನ್ಯ ಮಾರ್ಗಗಳು ತಪ್ಪು ಸ್ಥಿತಿಗಳನ್ನು ತಡೆಯಲು ಬ್ಯಾಕಪ್ ಕೇವಲೆಯನ್ನು ಪ್ರಚೋದಿಸುತ್ತವೆ
+- ಟೆಂಪ್ಲೇಟು ರೆಂಡರಿಂಗ್ ಹಿಂದಿನ 3 ಹಂತ ಪ್ರಕ್ರಿಯೆ ಅನುಸರಿಸುತ್ತದೆ
+
+ವೆಬ್ ಆ್ಯಪ್ ಕುರಿತು ಮಾತನಾಡುವಾಗ, ನಾವು *Routing* ಅನ್ನು URL ಗಳು ನಿರ್ದಿಷ್ಟ ಪರದೆಗಳನ್ನು ತೋರಿಸಲು ನಕ್ಷೆಗಳನ್ನು ಹೊಂದುವುದು ಎಂದೂ ಕರೆಯುತ್ತೇವೆ. ಬಹು HTML ಫೈಲ್ ಇರುವ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಇದು ಸ್ವಯಂಚಾಲಿತವಾಗಿಯೇ ಆಗುತ್ತದೆ, ಫೈಲ್ ಮಾರ್ಗಗಳು URL ನಲ್ಲೇ ಪ್ರತಿಬಿಂಬಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಈ ಫೈಲ್ ಗಳು ಇದ್ದರೆ:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+ನೀವು `mywebsite` ಎಂಬ ರೂಟ್‌ನಲ್ಲಿ ವೆಬ್ ಸರ್ವರ್ ರಚಿಸಿದರೆ URL ನಕ್ಷೆ ಹೀಗಿರುತ್ತದೆ:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+ಆದರೆ ನಮ್ಮ ಏಕ HTML ಫೈಲ್ ಒಳಗೊಂಡ ಎಲ್ಲಾ ಪರದೆಗಳು ಇದ್ದ ಕಾರಣ, ಈ ಡೀಫಾಲ್ಟ್ ವರ್ತನೆ ನಮಗೆ ಸಹಾಯ ಮಾಡದು. ನಾವು ಈ ನಕ್ಷೆಯನ್ನು ಕೈಯಿಂದ ರಚಿಸಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಪ್ರದರ್ಶಿಸುವ ಟೆಂಪ್ಲೇಟು ನವೀಕರಿಸಬೇಕು.
+
+### ಕಾರ್ಯ
+
+ನಾವು ಸರಳ ಆಯ್ಕೆಗಳನ್ನು (object) ಬಳಸಿ URL ಮಾರ್ಗಗಳ ಹಾಗೂ ನಮ್ಮ ಟೆಂಪ್ಲೇಟುಗಳ ನಡುವೆ [ನಕ್ಷೆ](https://en.wikipedia.org/wiki/Associative_array) ಅನುಷ್ಠಾನಗೊಳಿಸೋಣ. ಈ ಆಯ್ಕೆಗಳನ್ನು ನಿಮ್ಮ `app.js` ಕಡತದ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಸೇರಿಸಿ.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+**ಈ ಮಾರ್ಗ ಸಂರಚನೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ:**
+- URL ಮಾರ್ಗಗಳು ಮತ್ತು ಟೆಂಪ್ಲೇಟು ಗುರುತಿನ ನಡುವೆ ನಕ್ಷೆಯನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ
+- ಕೀಗಳನ್ನು URL ಮಾರ್ಗ ಗಳಾಗಿ, ಮೌಲ್ಯಗಳನ್ನು ಟೆಂಪ್ಲೇಟು ಮಾಹಿತಿ ಆಗಿ ಬಳಸುತ್ತದೆ
+- ಯಾವ URL ಗೆ ಯಾವ ಟೆಂಪ್ಲೇಟು ತೋರಿಸಬೇಕೆಂದು ಸುಲಭವಾದ ಹುಡುಕಾಟವನ್ನು ಒದಗಿಸುತ್ತದೆ
+- ಭವಿಷ್ಯದಲ್ಲಿ ಹೊಸ ಮಾರ್ಗಗಳನ್ನು ಸೇರಿಸಲು ಸಕಾಲಿಕ ಹಾಗೂ ವ್ಯಾಪಕ ಸಂರಚನೆಯನ್ನು ನೀಡುತ್ತದೆ
+ಈಗ ನಾವೀಗ `updateRoute` ಫಂಕ್ಷನ್ ಅನ್ನು ಸ್ವಲ್ಪ ಪರಿಷ್ಕರಿಸೋಣ. `templateId` ಅನ್ನು ನೇರವಾಗಿ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಪಾಸ ಮಾಡುವ ಬದಲು, ನಾವು ಮೊದಲಿಗೆ ಪ್ರಸ್ತುತ URL ಅನ್ನು ಪಡೆದ್ರಾಗ, ನಂತರ ನಮ್ಮ ಮ್ಯಾಪ್ ಅನ್ನು ಉಪಯೋಗಿಸಿ ತಕ್ಕಟ್ಪಡುವ ಟೆಂಪ್ಲೇಟ್ ID ಮೌಲ್ಯವನ್ನು ಪಡೆಯಬೇಕಾಗುತ್ತದೆ. ನಾವು URL ನಿಂದ ಮಾರ್ಗ ಭಾಗವನ್ನು ಮಾತ್ರ ಪಡೆದುಕೊಳ್ಳಲು [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) ಅನ್ನು ಬಳಸಬಹುದು.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+**ಇಲ್ಲಿ ಏನು ನಡೆಯುತ್ತಿದೆ ಅಂದ್ರೆ:**
+- ಬ್ರೌಸರ್ URL ನಿಂದ ಪ್ರಸ್ತುತ ಮಾರ್ಗವನ್ನು `window.location.pathname` ಬಳಸಿ **ಎತ್ತುತ್ತದೆ**
+- ನಮ್ಮ ಮಾರ್ಗಗಳ ಆಬ್ಜೆಕ್ಟ್‌ನಲ್ಲಿ ತಕ್ಕ ಮಾರ್ಗ ಧೃವೀಕರಿಕೆಯನ್ನು **ತಪಾಸಣೆ ಮಾಡುತ್ತದೆ**
+- ಮಾರ್ಗ ಧೃವೀಕರಿಕೆಯಿಂದ ಟೆಂಪ್ಲೇಟ್ ID **ಪಡೆಯುತ್ತದೆ**
+- ಹಳೆಯದೆಯೇ ಹಾಗೆ ಟೆಂಪ್ಲೇಟ್ ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು **ಅನುಸರಿಸುತ್ತದೆ**
+- URL ಬದಲಾವಣೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಡೈನಾಮಿಕ್ ಸಿಸ್ಟಮ್ ಅನ್ನು **ರಚಿಸುತ್ತದೆ**
+
+ನಾವು ಘೋಷಿಸಿದ ಮಾರ್ಗಗಳನ್ನು ನಾವು ಸಂಬಂಧಪಟ್ಟ ಟೆಂಪ್ಲೇಟ್‌ಗಳಿಗೆ ನಕ್ಷೆ ಮಾಡಿದೆವು. ನೀವು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ URL ಅನ್ನು ಕೈಯಿಂದ ಬದಲಾಯಿಸಿ ಅದು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆಯೇ ಎಂದು ಪ್ರಯತ್ನಿಸಬಹುದು.
+
+✅ ನೀವು URL ನಲ್ಲಿ ತಿಳಿದಿಲ್ಲದ ಮಾರ್ಗವನ್ನು ನಮೂದಿಸಿದರೆ ಏನು ಆಗುತ್ತದೆ? ಇದನ್ನು ನಾವು ಹೇಗೆ ಪರಿಹರಿಸಬಹುದು?
+
+## ನ್ಯಾವಿಗೇಶನ್ ಸೇರ್ಪಡೆ
+
+ರೌಟಿಂಗ್ ಸ್ಥಾಪಿಸಿದಾಗ, ಬಳಕೆದಾರರು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ವಿಧಾನ ಬೇಕಾಗಿದೆ. ಪಾರಂಪರಿಕ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಲಿಂಕ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ರೀಲೋಡ್ ಮಾಡುತ್ತವೆಯಾದರೂ, ನಾವು ಪುಟವನ್ನು ರೀಫ್ರೆಶ್ ಮಾಡದೇ URL ಮತ್ತು ವಿಷಯವನ್ನು ಎರಡನ್ನೂ ನವೀಕರಿಸಲು ಬಯಸುತ್ತೇವೆ. ಇದರಿಂದ ಡೆಸ್ಕ್‌ಟಾಪ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ವಿವಿಧ ದೃಶ್ಯಗಳ ನಡುವೆ ಸ್ಲೈಡ್ ಆಗುವಂತಹ ಮೃದುವಾಗಿರುವ ಅನುಭವ ಸೃಷ್ಟಿಯಾಗುತ್ತದೆ.
+
+ನಾವು ಎರಡು ಅಂಶಗಳನ್ನು ಸಂಯೋಜಿಸಬೇಕಾಗಿದೆ: ಬಳಕೆದಾರರು ಪುಟಗಳನ್ನು ಬುಕ್‌ಮಾರ್ಕ್ ಮಾಡಲು ಮತ್ತು ಲಿಂಕ್‌ಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಬ್ರೌಸರ್ URL ನವೀಕರಿಸುವುದು ಮತ್ತು ಸೂಚಿತ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸುವುದು. ಸರಿಯಾಗಿ ಜಾರಿಗೆ ತರುವಾಗ, ಇದರಿಂದ ನವೀನ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬಳಕೆದಾರರು ನಿರೀಕ್ಷಿಸುವ ನಿರಂತರ ನ್ಯಾವಿಗೇಶನ್ ಸೃಷ್ಟಿಯಾಗುತ್ತದೆ.
+
+```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: ಲಾಗಿನ್ ಸ್ಕ್ರೀನ್ ಪ್ರದರ್ಶಿಸಿ
+```
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ವಾಸ್ತುಶಿಲ್ಪ**: ಸಂಪೂರ್ಣ ವ್ಯವಸ್ಥೆಯ ನಿಮ್ಮ ಅರ್ಥವನ್ನು ಪರಿಶೀಲಿಸಿ:
+- ✅ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೌಟಿಂಗ್ ಪಾರಂಪರಿಕ ಸರ್ವರ್-ಸೈಡ್ ರೌಟಿಂಗಿನಿಂದ ಹೇಗೆ ವಿಭಿನ್ನ?
+- ✅ ಸರಿಯಾದ SPA ನ್ಯಾವಿಗೇಶನ್ ಗಾಗಿ ಹಿಸ್ಟರಿ API ಯು ಯಾಕೆ ಅವಶ್ಯಕ?
+- ✅ ಟೆಂಪ್ಲೇಟ್‌ಗಳು ಪುಟ ರೀಲೋಡ್‌ಗಳಿಲ್ಲದೆ ಡೈನಾಮಿಕ್ ನವೀನ ವಿಷಯವನ್ನು ಹೇಗೆ ಸಾದ್ಯಮಾಡುತ್ತವೆ?
+- ✅ ನ್ಯಾವಿಗೇಶನ್ ತಡೆಗಟ್ಟುವಿಕೆಯಲ್ಲಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಪಾತ್ರ ಏನು?
+
+**ವ್ಯವಸ್ಥೆಯ ಸಂಯೋಜನೆ**: ನಿಮ್ಮ SPA ಈ ಕೆಳಗಿನವುಗಳನ್ನು ತೋರಿಸುತ್ತದೆ:
+- **ಟೆಂಪ್ಲೇಟ್ ನಿರ್ವಹಣಾ**: ಡೈನಾಮಿಕ್ ವಿಷಯ ಹೊಂದಿರುವ ಪುನಃಬಳಕೆ ಯೋಗ್ಯ UI ಘಟಕಗಳು
+- **ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೌಟಿಂಗ್**: ಸರ್ವರ್ ಕೇಳಿಕೆಯಿಂದ ವಿನಾಯಿತಿ URL ನಿರ್ವಹಣೆ
+- **ಈವೆಂಟ್ ಚಾಲಿತ ವಾಸ್ತುಶಿಲ್ಪ**: ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನ್ಯಾವಿಗೇಶನ್ ಮತ್ತು ಬಳಕೆದಾರ ಸಂವಹನ
+- **ಬ್ರೌಸರ್ ಸಂಯೋಜನೆ**: ಸರಿಯಾದ ಹಿಸ್ಟರಿ ಮತ್ತು ಬ್ಯೂಟ್/ಮುಂದಿನ ಬಟನ್ ಬೆಂಬಲ
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಮೇಸು**: ವೇಗದ ಬದಲಾವಣೆಗಳು ಮತ್ತು ಸರ್ವರ್ ಲೋಡ್ ಕಡಿತ
+
+** ವೃತ್ತಿ ಮಾದರಿಗಳು**: ನೀವು ಜಾರಿಗೆ ತಂದಿರುವವು:
+- **ಮಾದರಿ-ವೀಕ್ಷಣೆ ವಿಭಜನೆ**: ಅಪ್ಲಿಕೇಶನ್ ತಾರ್ಕಿಕತೆ ನಿಂದ ತೆಂಪ್ಲೇಟ್ ಬೇರ್ಪಡಿಸಿವೆ
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: URL ಸ್ಥಿತಿಯನ್ನು ಪ್ರದರ್ಶಿತ ವಿಷಯದೊಂದಿಗೆ ಸಿಂಕ್ರೊನ್ ಮಾಡಲಾಗಿದೆ
+- **ಪ್ರೋಗ್ರೆಸಿವ್ ಎನ್‌ಹಾನ್ಸ್‌ಮೆಂಟ್**: ಸರಳ HTML ಕಾರ್ಯಾದರ್ಶೆಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಭಾವಘಟಕ
+- **ಬಳಕೆದಾರ ಅನುಭವ**: ಪುಟ ರೀಫ್ರೆಶ್ ಇಲ್ಲದೆ ಸ್ಮೂತ್, ಅಪ್ಲಿಕೇಶನ್-ಮಾದರಿ ನ್ಯಾವಿಗೇಶನ್
+
+> <20> **ವಾಸ್ತುಶಿಲ್ಪ ಸಹಜತೆ**: ನ್ಯಾವಿಗೇಶನ್ ಸಿಸ್ಟಮ್ ಘಟಕಗಳು
+>
+> **ನೀವು ಏನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೀರಾ:**
+> - **🔄 URL ನಿರ್ವಹಣೆ**: ಪುಟ ರೀಲೋಡ್ ಇಲ್ಲದೆ ಬ್ರೌಸರ್ ವಿಳಾಸ ಬಾರ್ ನವೀಕರಿಸುತ್ತದೆ
+> - **📋 ಟೆಂಪ್ಲೇಟ್ ಸಿಸ್ಟಮ್**: ಪ್ರಸ್ತುತ ಮಾರ್ಗದ ಆಧಾರದಿಂದ ವಿಷಯವನ್ನು ಡೈನಾಮಿಕ್ ಬದಲಾಯಿಸುತ್ತದೆ  
+> - **📚 ಹಿಸ್ಟರಿ ಸಂಯೋಜನೆ**: ಬ್ರೌಸರ್ ಹಿಂದಿನ/ಮುಂದಿನ ಬಟನ್ ಕಾರ್ಯಕ್ಷಮತೆ ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ
+> - **🛡️ ದೋಷ ನಿರ್ವಹಣೆ**: ತಪ್ಪು ಅಥವಾ ಕಾಣೆಯಾಗಿರುವ ಮಾರ್ಗಗಳಿಗೆ ಸೂಕ್ತ ಪರಿಹಾರ
+>
+> **ಘಟಕಗಳು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ:**
+> - ನ್ಯಾವಿಗೇಶನ್ ಈವೆಂಟ್‌ಗಳಿಗೆ (ಕ್ಲಿಕ್, ಹಿಸ್ಟರಿ ಬದಲಾವಣೆ) **ಶ್ರವಣ**
+> - ಹಿಸ್ಟರಿ API ಬಳಸಿ URL ನವೀಕರಣ **ನಿರ್ವಹಣೆ**
+> - ಹೊಸ ಮಾರ್ಗಕ್ಕೆ ಸೂಕ್ತ ಟೆಂಪ್ಲೇಟ್ **ರೆಂಡರ್** ಮಾಡುವುದು
+> - ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನಿರಂತರ **ಕಾಪಾಡುವುದು**
+
+ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಮುಂದಿನ ಹಂತವೆಂದರೆ URL ನ್ನು ಕೈಯಿಂದ ಬದಲಾಗಿಸುವ ಅಗತ್ಯವಿಲ್ಲದೆ ಪುಟಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವ ಸಾಧ್ಯತೆಯನ್ನು ಸೇರಿಸುವುದು. ಇದಕ್ಕೆ ಎರಡು ಅಂಶಗಳು ಒಳಗೊಂಡಿವೆ:
+
+  1. ಪ್ರಸ್ತುತ URL ನ ನವೀಕರಣ  
+  2. ಹೊಸ URL ಆಧಾರಿತವಾಗಿ ಪ್ರದರ್ಶನವಾಗುವ ಟೆಂಪ್ಲೇಟ್ ನವೀಕರಣ
+
+ನಾವು ಈಗಾಗಲೇ `updateRoute` ಫಂಕ್ಷನ್‌ನಿಂದ ಎರಡನೇ ಭಾಗವನ್ನು ನೋಡಿಕೊಂಡಿದ್ದೇವೆ, ಆದ್ದರಿಂದ ಪ್ರಸ್ತುತ URL ಅನ್ನು ಹೇಗೆ ನವೀಕರಿಸಬೇಕೆಂಬುದನ್ನು ಕಂಡುಹಿಡಿಯಬೇಕು.
+
+ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ವಿಶೇಷವಾಗಿ [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) ಅನ್ನು ಬಳಸಬೇಕು, ಇದು HTML ರೀಲೋಡ್ ಮಾಡುವ ಬದಲು URL ನವೀಕರಿಸಿ ಬ್ರೌಸಿಂಗ್ ಇತಿಹಾಸದಲ್ಲಿ ಹೊಸ ಐಟಂ ಸೃಜಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+> ⚠️ **ಮುಖ್ಯ ಟಿಪ್ಪಣಿ**: HTML ಅಂಕರ್ ಅಂಶ [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) ಅನ್ನು ಸ್ವತಃ ಬಳಸಿಕೊಂಡು ವಿಭಿನ್ನ URL ಗಳಿಗೆ ಹೈಪರ್‌ಲಿಂಕ್‌ಗಳು ಸೃಷ್ಟಿಸಬಹುದು, ಆದರೆ ಇದು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಬ್ರೌಸರ್ HTML ಅನ್ನು ಮರುಲೋಡ್ ಮಾಡುತ್ತದೆ. ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ರೌಟಿಂಗ್ ನಡೆಸುವಾಗ, ಈ ವರ್ತನೆಯನ್ನು ತಡೆಗಟ್ಟಲು ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ನಲ್ಲಿ preventDefault() ಫಂಕ್ಷನ್ ಬಳಸುವುದು ಅಗತ್ಯ.
+
+### ಕಾರ್ಯ
+
+ನಾವು ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಬಳಸಬಹುದಾದ ಹೊಸ ಫಂಕ್ಷನ್ ರಚಿಸೋಣ:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+**ಈ ನ್ಯಾವಿಗೇಶನ್ ಫಂಕ್ಷನ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+- `history.pushState` ಬಳಸಿ ಬ್ರೌಸರ್ URL ನವೀಕರಿಸುತ್ತದೆ  
+- ತಕ್ಕ ಹಿಂದಿನ/ಮುಂದಿನ ಬಟನ್ ಬೆಂಬಲಕ್ಕೂ ಬ್ರೌಸರ್ ಇತಿಹಾಸ ಸ್ಟ್ಯಾಕ್‌ಗೆ ಹೊಸ ಐಟಂ ಸೇರಿಸುತ್ತದೆ  
+- `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 ಗಳಿದ್ದರೂ ಮಾನ್ಯ ಸ್ಕ್ರೀನ್ **ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ**
+
+ಮಾರ್ಗ ಕಂಡುಬಂದಿಲ್ಲದಿದ್ದರೆ ಈಗ ಇತ್ತೀಚೆಗೆ `login` ಪುಟಕ್ಕೆ ತಿರುಗಿಸುತ್ತೇವೆ.
+
+ಇಗೋ ಲಿಂಕ್ ಕ್ಲಿಕ್ ಆಗುವಾಗ URL ಅನ್ನು ಪಡೆಯುವ ಹಾಗೂ ಬ್ರೌಸರ್ ನ ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ವರ್ತನೆಯನ್ನು ತಡೆಗಿಡುವ ಫಂಕ್ಷನ್ ರಚಿಸೋಣ:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+**ಈ ಕ್ಲಿಕ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ವಿವರಿಸುವುದು:**
+- ಬ್ರೌಸರ್ ನ ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ವರ್ತನೆಯನ್ನು `preventDefault()` ಬಳಸಿ **ತಡೆದುಕೊಳ್ಳುತ್ತದೆ**
+- ಕ್ಲಿಕ್ ಮಾಡಿದ ಲಿಂಕ್ ಅಂಶದಿಂದ ಗಮ್ಯಸ್ಥಾನ URL ಅನ್ನು **ಎತ್ತುತ್ತದೆ**
+- ಪುಟ ತೆರೆಯದೆ ನಮ್ಮ ಕಸ್ಟಮ್ ನ್ಯಾವಿಗೇಟು ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯುತ್ತದೆ  
+- ಮೃದುವಾದ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ಅನುಭವವನ್ನು **ಉಳಿಸುತ್ತದೆ**
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+**ಈ `onclick` ಬಿಗಿತ ಏನು ಸಾಧಿಸುತ್ತದೆ:**
+- ಪ್ರತಿಯೊಂದು ಲಿಂಕ್ ಅನ್ನು ನಮ್ಮ ಕಸ್ಟಮ್ ನ್ಯಾವಿಗೇಶನ್ ವ್ಯವಸ್ಥೆಗೆ **ಸಂಬಂಧಿಸುತ್ತದೆ**
+- ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೆ `onLinkClick` ಫಂಕ್ಷನ್‌ಗೆ **ಹಸ್ತಾಂತರಿಸುತ್ತದೆ**
+- ಪುಟ ರೀಲೋಡ್ ಇಲ್ಲದೆ ಸ್ಮೂತ್ ನ್ಯಾವಿಗೇಶನ್ **ಸೌಲಭ್ಯ ಒದಗಿಸುತ್ತದೆ**
+- ಬಳಕೆದಾರರು ಬುಕ್‌ಮಾರ್ಕ್ ಅಥವಾ ಹಂಚಿಕೊಳ್ಳಬಹುದಾದ ಸರಿಯಾದ URL ರಚನೆಯನ್ನು **ಕಾಪಾಡುತ್ತದೆ**
+
+[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ಗುಣಲಕ್ಷಣವು ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಅನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್‌ಗೆ ಬಿಗಿತ ಮಾಡುತ್ತದೆ, ಇಲ್ಲಿ `navigate()` ಫಂಕ್ಷನ್ ಕರೆ.
+
+ಈ ಲಿಂಕ್‌ಗಳ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ, ಈಗ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿವಿಧ ಸ್ಕ್ರೀನ್‌ಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದು.
+
+✅ `history.pushState` ವಿಧಾನವು HTML5 ನಿಯಮಾವಳಿಯಲ್ಲಿ ಭಾಗವಾಗಿದೆ ಮತ್ತು [ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ](https://caniuse.com/?search=pushState) ಜಾರಿಗೊಳಿಸಲಾಗಿದೆ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ಈ API ನ ಬದಲು ಒಂದು ತಂತ್ರವನ್ನು ಉಪಯೋಗಿಸಬಹುದು: ಮಾರ್ಗದ ಮುನ್ನ [ಹ್ಯಾಶ್ (`#`)](https://en.wikipedia.org/wiki/URI_fragment) ಬಳಸಿ ಸಾಮಾನ್ಯ ಅಂಕರ್ ನ್ಯಾವಿಗೇಶನ್‌ಗಾಗಿ ರೌಟಿಂಗ್ ಜಾರಿಗೊಳಿಸಬಹುದು ಮತ್ತು ಪುಟ ರೀಲೋಡ್ ಆಗುವುದಿಲ್ಲ.
+
+## ಹಿಂಬದಿಗೆ ಮತ್ತು ಮುಂದಕ್ಕೆ ಬಟನ್‌ಗಳ ಕಾರ್ಯಕ್ಷಮತೆ
+
+ಹಿಂಬದಿ ಮತ್ತು ಮುಂದಿನ ಬಟನ್‌ಗಳು ವೆಬ್ ಬ್ರೌಸಿಂಗ್‌ಗೆ ಅತಿ ಮುಖ್ಯ, ಹಾಗಾಗಿ NASA ಮಿಷನ್ ನಿಯಂತ್ರಕರಂತೆ ಬಳಕೆದಾರರು ಹಿಂದಿನ ವ್ಯವಸ್ಥೆ ಸ್ಥಿತಿಗಳನ್ನು ಪರಿಶೀಲಿಸಬಹುದು. ಬಳಕೆದಾರರು ಈ ಬಟನ್‌ಗಳು ಕೆಲಸ ಮಾಡಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸುವರು, ಆದರೆ ಈ ಬಟನ್‌ಗಳು ಕೆಲಸ ಮಾಡದಿದ್ದರೆ, ನಿರೀಕ್ಷಿತ ಬ್ರೌಸಿಂಗ್ ಅನುಭವ ಮುರಿಯುತ್ತದೆ.
+
+ನಮ್ಮ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಇದರ ಬೆಂಬಲಕ್ಕಾಗಿ ಹೆಚ್ಚುವರಿ ವ್ಯವಸ್ಥೆ ಬೇಕಾಗಿದೆ. ಬ್ರೌಸರ್ ಒಂದು ಇತಿಹಾಸ ಸ್ಟ್ಯಾಕ್ (ನಾವು `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: ಲಾಗಿನ್ ಪರದೆಯನ್ನು ತೋರಿಸಿ
+```
+**ಪ್ರಮುಖ ಸಂವಹನ ಬಿಂದುಗಳು:**
+- ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳು (ಕ್ಲಿಕ್‌ಗಳು, ಬ್ರೌಸರ್ ಬಟನ್‌ಗಳು) ನ್ಯಾವಿಗೇಶನ್ ಪ್ರಚೋದಿಸುತ್ತವೆ  
+- ಅಪ್ಲಿಕೇಶನ್ ಪುಟ ಮರುಲೋಡ್ ತಡೆಗಟ್ಟಲು ಲಿಂಕ್ ಕ್ಲಿಕ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ  
+- ಹಿಸ್ಟರಿ API URL ಬದಲಾವಣೆಯನ್ನು ಮತ್ತು ಬ್ರೌಸರ್ ಇತಿಹಾಸ ಸ್ಟ್ಯಾಕ್ ನಿರ್ವಹಿಸುತ್ತದೆ  
+- ಟೆಂಪ್ಲೇಟ್‌ಗಳು ಪ್ರತಿಯೊಂದು ಸ್ಕ್ರೀನ್‌ಗೆ ವಿಷಯ ರಚನೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ  
+- ಈವೆಂಟ್ ಶ್ರವಣಕರ್ತರು ಎಲ್ಲಾ ನ್ಯಾವಿಗೇಶನ್ ವಿಧಗಳಿಗೆ ಅಪ್ಲಿಕೇಶನ್ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ನೋಡಿಕೊಳ್ಳುತ್ತಾರೆ  
+
+`history.pushState` ಬಳಕೆ ಬ್ರೌಸರ್ ನ ನ್ಯಾವಿಗೇಶನ್ ಇತಿಹಾಸದಲ್ಲಿ ಹೊಸ ದಾಖಲೆಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ನೀವು ಇದನ್ನು ಪರೀಕ್ಷಿಸಲು ಬ್ರೌಸರ್‌ನ ಹಿಂಬದಿ ಬಟನ್ ಒತ್ತಿ ಹಿಡಿದುಕೊಳ್ಳಬಹುದು, ಇದರಲ್ಲಿ ಹೀಗೆ ಕಾಣಬಹುದು:
+
+![Screenshot of navigation history](../../../../translated_images/history.7fdabbafa521e064.kn.png)
+
+ಹಿಂಬದಿ ಬಟನ್ ಮೇಲೆ ಕೆಲವೊಮ್ಮೆ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ, ಪ್ರಸ್ತುತ 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` ಈವೆಂಟ್‌ಗಳಿಗೆ **ಶ್ರವಣ** ಮಾಡುತ್ತದೆ  
+- ಸಣ್ಣದಾಗಿರುವ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್文ಕ್ಕೆ ಆರ್ೋ ಫಂಕ್ಷನ್ ಉಪಯೋಗಿಸಿದೆ  
+- ಇತಿಹಾಸ ಸ್ಥಿತಿ ಬದಲಾಗಿದಾಗ `updateRoute()` ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕರೆಯಲ್ಪಡುತ್ತದೆ  
+- ಪುಟ ಮೊದಲ ಬಾರಿಗೆ ಲೋಡ್ ಆದಾಗ ಅಪ್ಲಿಕೇಶನ್ ಪ್ರಾರಂಭಿಸಲು `updateRoute()` ಕರೆಯುತ್ತದೆ  
+- ಬಳಕೆದಾರರು ಹೇಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದ್ರೂ ಸರಿಯಾದ ಟೆಂಪ್ಲೇಟ್ ಪ್ರದರ್ಶನ **ಖಾತ್ರಿ ಮಾಡುತ್ತದೆ**
+
+> 💡 **ಪ್ರೊ ಟಿಪ್**: conciseness ಗಾಗಿ ನಾವು ಇಲ್ಲಿ [ಆರ್ೋ ಫಂಕ್ಷನ್](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ಬಳಸಿದ್ದೇವೆ, ಆದರೆ ಸಾಮಾನ್ಯ ಫಂಕ್ಷನ್ ಸಹ ಅದೇ ರೀತಿಯಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
+
+ಇಲ್ಲಿ ಆರ್ೋ ಫಂಕ್ಷನ್ ಗಾಗಿ ಪುನರಾವೃತ್ತಿ ವಿಡಿಯೋ ಇದೆ:
+
+[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
+
+> 🎥 ಆರ್ೋ ಫಂಕ್ಷನ್‌ಗಳ ಕುರಿತ ವಿಡಿಯೋಕ್ಕಾಗಿ ಮೇಲಿನ ಚಿತ್ರ ಒತ್ತಿ.
+
+ನೀವು ಈಗ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಹಿಂಬದಿ ಮತ್ತು ಮುಂದಿನ ಬಟನ್‌ಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ, ಈ ಬಾರಿ ಪ್ರದರ್ಶಿತ ಮಾರ್ಗ ಸರಿಯಾಗಿ ನವೀಕರಿಸಲಾಗುತ್ತಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ಏನು ಮಾಡಬಹುದು**
+- [ ] ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಬ್ರೌಸರ್ ಹಿಂಬದಿ/ಮುಂದಿನ ಬಟನ್‌ಗಳಿಂದ ಪರೀಕ್ಷಿಸಿ  
+- [ ] ವಿಳಾಸ ಬಾರ್‌ನಲ್ಲಿ ವಿಭಿನ್ನ URL ಗಳನ್ನು ಕೈಯಿಂದ ಟೈಪ್ ಮಾಡಿ ರೌಟಿಂಗ್ ತಪಾಸಿಸಿ  
+- [ ] ಬ್ರೌಸರ್ ಡೆವ್ ಟೂಲ್‌ಗಳನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಟೆಂಪ್ಲೇಟ್‌ಗಳು ಹೇಗೆ DOM ನಲ್ಲಿ ಕ್ಲೋನ್ ಆಗುತ್ತವೆ ನೋಡಿ  
+- [ ] ರೌಟಿಂಗ್ ಪ್ರವಾಹವನ್ನು ಗಮನಿಸಲು console.log ಹೇಳಿಕೆ ಸೇರಿಸುವ ಪ್ರಯೋಗ ಮಾಡಿ  
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ಸಾಧಿಸಬಹುದಾದವು**
+- [ ] ಪಾಠದ ಬಳಿಕದ ಕ್ವಿಜ್ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು SPA ವಾಸ್ತುಶಿಲ್ಪ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ  
+- [ ] ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಟೆಂಪ್ಲೇಟ್‌ಗಳಿಗೆ CSS ಶೈಲಿ ಸೇರಿಸಿ ತಾನು ವೃತ್ತಿ ದೃಷ್ಟಿಯಿಂದ ಗೋಚರಿಸಲು  
+- [ ] ಸರಿಯಾದ ದೋಷ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ 404 ದೋಷ ಪುಟ ಸವಾಲು ಜಾರಿಗೆ ತರಿರಿ  
+- [ ] ಹೆಚ್ಚುವರಿ ರೌಟಿಂಗ್ ಕಾರ್ಯಾಚರಣೆಯೊಡನೆ ಕ್ರೆಡಿಟ್ ಪುಟ ಸವಾಲು ರಚಿಸಿ  
+- [ ] ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಟೆಂಪ್ಲೇಟ್ ಬದಲಾವಣೆಗಳ ನಡುವೆ ಬದಲಾವಣೆಗಳನ್ನು ಸೇರಿಸಿ  
+
+### 📅 **ನಿಮ್ಮ ವಾರಪೂರ್ತಿ SPA ಅಭಿವೃದ್ಧಿ ಪ್ರವಾಸ**
+- [ ] ಫಾರ್ಮ್‌ಗಳು, ಡೇಟಾ ನಿರ್ವಹಣೆ ಮತ್ತು ನಿರಂತರತೆ ಇರುವ ಸಂಪೂರ್ಣ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ ಪೂರ್ಣಗೊಳಿಸಿ  
+- [ ] ಮಾರ್ಗ ಪರಿಮಾಣಗಳು ಮತ್ತು ನೆಸ್ಟೆಡ್ ಮಾರ್ಗಗಳು ಸೇರಿದಂತೆ ಉನ್ನತ ರೌಟಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಿ  
+- [ ] ನ್ಯಾವಿಗೇಶನ್ ಗಾರ್ಡ್ಸ್ ಮತ್ತು ಪ್ರಮಾಣೀಕರಣ ಆಧಾರಿತ ರೌಟಿಂಗ್ ಜಾರಿಗೆ ತರಿರಿ  
+- [ ] ಪುನಃಬಳಕೆ ಆಗಬಹುದಾದ ಟೆಂಪ್ಲೇಟ್ ಘಟಕಗಳು ಮತ್ತು ಘಟಕ ಗ್ರಂಥಾಲಯ ರಚಿಸಿ  
+- [ ] ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಆನಿಮೇಶನ್ ಮತ್ತು ಟ್ರಾಂಸಿಶನ್‌ಗಳನ್ನು ಸೇರಿಸಿ  
+- [ ] ನಿಮ್ಮ SPA ಅನ್ನು ಹೋಸ್ಟಿಂಗ್ ವೇದಿಕೆಗಳಿಗೆ ನಿಯೋಜಿಸಿ ಮತ್ತು ರೌಟಿಂಗ್ ಸರಿಯಾಗಿ ಸಂರಚಿಸಿ  
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳೋತ್ತರ ಫ್ರಂಟ್‌ಎಂಡ್ ವಾಸ್ತುಶಿಲ್ಪ ತಜ್ಞತೆ**
+- [ ] React, Vue ಅಥವಾ Angular ಮಾದರಿಗಳ ಆಧುನಿಕ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳ ಬಳಕೆದೊಂದಿಗೆ ಸಂಕೀರ್ಣ SPA ಗಳನ್ನು ನಿರ್ಮಿಸಿ  
+- [ ] ಉನ್ನತ ಸ್ಥಿತಿ ನಿರ್ವಹಣಾ ಮಾದರಿಗಳು ಮತ್ತು ಗ್ರಂಥಾಲಯಗಳನ್ನು ಕಲಿಯಿರಿ  
+- [ ] SPA ಅಭಿವೃದ್ಧಿಗಾಗಿ ಬಿಲ್ಡ್ ಉಪಕರಣಗಳು ಮತ್ತು ಡೆವಲಪ್ಮೆಂಟ್ ಕಾರ್ಯಪ್ರವಾಹ mastered ಮಾಡಿ  
+- [ ] ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಆಫ್‌ಲೈನ್ ಕಾರ್ಯಸಾಧ್ಯತೆ ಜಾರಿಗೆ ತರಿರಿ  
+- [ ] ಸಹಜವಾದ SPA ಗಳಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣಾ ತಂತ್ರಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ  
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ SPA ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ ಮತ್ತು ನಿಮ್ಮ ಜ್ಞಾನವನ್ನು ಹಂಚಿಕೊಳ್ಳಿ  
+
+## 🎯 ನಿಮ್ಮ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ಪರಿಣತಿ ಟೈಮ್‌ಲೈನ್
+
+```mermaid
+timeline
+    title SPA ಅಭಿವೃದ್ಧಿ & ಆಧುನಿಕ ವೆಬ್ ವಾಸ್ತುಶಿಲ್ಪ ಕಲಿಕೆ ಪ್ರಗತಿ
+    
+    section ಬೆಂಬಲ (20 ನಿಮಿಷಗಳು)
+        ಟೆಂಪ್ಲೇಟ್ ವ್ಯವಸ್ಥೆಗಳು: HTML ಟೆಂಪ್ಲೇಟ್ ಅಂಶಗಳು
+                            : DOM ವಿನ್ಯಾಸ
+                            : ವಿಷಯ ನಕಲುಮಾಡುವುದು
+                            : ಡೈನಾಮಿಕ್ ರೆಂಡರಿಂಗ್
+        
+    section ರೌಟಿಂಗ್ ಮೂಲಭೂತಗಳು (30 ನಿಮಿಷಗಳು)
+        ಕ್ಲೈಂಟ್-ಸೈಡ್ ನಾವಿಗೇಶನ್: URL ನಿರ್ವಹಣೆ
+                                    : ಇತಿಹಾಸ API
+                                    : ಮಾರ್ಗ ನಕ್ಷೆ
+                                    : ಇವೆಂಟ್ ನಿರ್ವಹಣೆ
+        
+    section ಬಳಕೆದಾರ ಅನುಭವ (40 ನಿಮಿಷಗಳು)
+        ನಾವಿಗೇಶನ್ ತಿದ್ದೆ: ಬ್ರೌಸರ್ ಸಂಯೋಜನೆ
+                        : ಹಿಂದೆ ಬಟನ್ ಬೆಂಬಲ
+                        : ದೋಷ ನಿರ್ವಹಣೆ
+                        : ಸಿಲುಕಿದ ವರ್ಗಾವಣೆಗಳು
+        
+    section ವಾಸ್ತುಶಿಲ್ಪ ಮಾದರಿಗಳು (50 ನಿಮಿಷಗಳು)
+        ವೃತ್ತಿಪರ SPA ಗಳು: ಘಟಕ ವ್ಯವಸ್ಥೆಗಳು
+                        : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+                        : ಕಾರ್ಯಕ್ಷಮತೆಯ_OPT_
+                        : ದೋಷ ಗಡிகள்
+        
+    section ನಿರ್ಧಿಷ್ಟ ತಂತ್ರಗಳು (1 ವಾರ)
+        ಫ್ರೇಮ್‌ವರ್ಕ್ ಸಂಯೋಜನೆ: ರಿಯಾಕ್ಟ್ ರೌಟರ್
+                             : ವ್ಯೂ ರೌಟರ್
+                             : ಆಂಗುಲರ್ ರೌಟರ್
+                             : ಸ್ಥಿತಿ ಗ್ರಂಥಾಲಯಗಳು
+        
+    section ಉತ್ಪಾದನೆ ಕೌಶಲ್ಯಗಳು (1 ತಿಂಗಳು)
+        ಉದ್ಯಮ ಅಭಿವೃದ್ಧಿ: ಬಿಲ್ಟ್ ವ್ಯವಸ್ಥೆಗಳು
+                         : ಪರೀಕ್ಷೆ ತಂತ್ರಗಳು
+                         : ವಿನ್ಯಾಸದ ಕಛೇರಿ
+                         : ಕಾರ್ಯಕ್ಷಮತೆ ನಿಗಾ
+```
+### 🛠️ ನಿಮ್ಮ SPA ಅಭಿವೃದ್ಧಿ ಉಪಕರಣ ಸಂಗ್ರಹ
+
+ಈ ಪಾಠವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ಬಳಿಕ, ನೀವು ಈಗ ಪರಿಣತಿಗೊಂಡಿದ್ದು:
+- **ಟೆಂಪ್ಲೇಟ್ ವಾಸ್ತುಶಿಲ್ಪ**: ಡೈನಾಮಿಕ್ ವಿಷಯ ಹೊಂದಿರುವ ಪುನಃಬಳಕೆ ಆರ್ಹ HTML ಘಟಕಗಳು  
+- **ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೌಟಿಂಗ್**: ಪುಟ ರೀಲೋಡ್ ಇಲ್ಲದೆ URL ನಿರ್ವಹಣೆ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್  
+- **ಬ್ರೌಸರ್ ಸಂಯೋಜನೆ**: ಹಿಸ್ಟರಿ API ಬಳಕೆ ಮತ್ತು ಹಿಂಬದಿ/ಮುಂದಿನ ಬಟನ್ ಬೆಂಬಲ  
+- **ಈವೆಂಟ್ ಚಾಲಿತ ವ್ಯವಸ್ಥೆಗಳು**: ನ್ಯಾವಿಗೇಶನ್ ಮತ್ತು ಬಳಕೆದಾರ ಸಂವಹನ ನಿರ್ವಹಣೆ  
+- **DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್**: ಟೆಂಪ್ಲೇಟ್ ಕ್ಲೋನಿಂಗ್, ವಿಷಯ ಬದಲಾವಣೆ ಮತ್ತು ಅಂಶ ನಿರ್ವಹಣೆ  
+- **ದೋಷ ನಿರ್ವಹಣೆ**: ತಪ್ಪು ಮಾರ್ಗಗಳ ಹಾಗೂ ಕಾಣೆಯಾದ ವಿಷಯಗಳಿಗೆ ಒಳ್ಳೆಯ ಪರಿಹಾರ  
+- **ಕಾರ್ಯಕ್ಷಮತಾ ಮಾದರಿಗಳು**: ದ್ರುತ ವಿಷಯ ಲೋಡ್ ಮತ್ತು ರೆಂಡರಿಂಗ್ ತಂತ್ರಗಳು  
+
+**ನೈಜ ಜಗತ್ತಿನ ಅನ್ವಯಗಳು**: ನಿಮ್ಮ SPA ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳ ನೇರ ಅನ್ವಯ:
+- **ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು**: React, Vue, Angular ಮತ್ತು ಇತರ ಫ್ರೇಮ್ವರ್ಕ್ ಅಭಿವೃದ್ಧಿ  
+- **ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು**: ಆಫ್‌ಲೈನ್ ಸಾಮರ್ಥ್ಯವುಳ್ಳ ಆಪ್-ಮಾದರಿ ಅನುಭವಗಳು  
+- **ಎಂಟರ್ಪ್ರೈಸ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳು**: ವಿವಿಧ ದೃಶ್ಯಗಳಂತಹ ಸಂಕೀರ್ಣ ವ್ಯವಹಾರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು  
+- **ಇ-ಕಾಮರ್ಸ್ ವೇದಿಕೆಗಳು**: ಉತ್ಪನ್ನ ಕ್ಯಾಟಲಾಗ್‌ಗಳು, ಶಾಪಿಂಗ್ ಕಾರ್ಟ್‌ಗಳು ಮತ್ತು ಚೆಕ್ಔಟ್ ಪ್ರಕ್ರಿಯೆಗಳು  
+- **ವಿಷಯ ನಿರ್ವಹಣೆ**: ಡೈನಾಮಿಕ್ ವಿಷಯ ಸೃಷ್ಟಿ ಮತ್ತು ಸಂಪಾದನೆ ಇಂಟರ್‌ಫೇಸ್‌ಗಳು  
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ವೆಬ್ ತಂತ್ರಜ್ಞಾನದೊಂದಿಗೆ ಹೈಬ್ರಿಡ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು  
+
+**ನೀವು ಪಡೆಯುತ್ತಿರುವ ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು**: ನೀವು ಸಾಧ್ಯಮಾಡಬಹುದು:
+- **ವಾಸ್ತುಶಿಲ್ಪ** ತಟಸ್ಥತೆಗಳನ್ನು ಸರಿಯಾಗಿ ವಿಭಜಿಸುವ ಮೂಲಕ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ರೂಪಿಸು
+- **ಅಮಲ್ಗೊಳಿಸಿ** ಅಪ್ಲಿಕೇಶನ್ ಸಂಕೀರ್ಣತೆಯೊಂದಿಗೆ ವಿಸ್ತರಿಸಬಹುದಾದ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟಿಂಗ್ ವ್ಯವಸ್ಥೆಗಳನ್ನು
+- **ದೊರೆತಿಹಾಕು** ಬ್ರೌಸರಿನ ಡೆವಲಪರ್ ಸಾಧನಗಳ ಬಳಕೆ ಮೂಲಕ ಸಂಕೀರ್ಣ ನ್ಯಾವಿಗೇಶನ್ ಪ್ರಕ್ರಿಯೆಗಳ ದೋಷಗಳನ್ನು
+- **ಕಾರ್ಯಕ್ಷಮಗೊಳಿಸು** ಪರಿಣಾಮಕಾರಿ ಟೆಂಪ್ಲೇಟ್ ನಿರ್ವಹಣೆಯ ಮೂಲಕ ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು
+- **ನಿರ್ಮಿಸಿ** ಸ್ಥಳೀಯ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಅನುಭವವðsೊಳ್ಳುವ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು
+
+**ಮುಖ್ಯ ಮುಂಭಾಗ ಅಭಿವೃದ್ಧಿ ಕಲಿತ ಸಂकल्पನೆಗಳು**:
+- **ಘಟಕ ವಾಸ್ತುಶಿಲ್ಪ**: ಪುನಃಬಳಕೆ ಮಾಡಬಹುದಾದ UI ಮಾದರಿಗಳು ಮತ್ತು ಟೆಂಪ್ಲೇಟ್ ವ್ಯವಸ್ಥೆಗಳು
+- **ಸ್ಥಿತಿ ಸಂ ಸಮನ್ವಯ**: URL ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ ಮತ್ತು ಬ್ರೌಸರ್ ಇತಿಹಾಸ
+- **ಕಾರ್ಯಾಚರಣೆ ಪ್ರೇರಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಬಳಕೆದಾರ ಸಂವಹನ ನಿರ್ವಹಣೆ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್**: ಪರಿಣಾಮಕಾರಿ DOM ಪರಿಷ್ಕರಣೆ ಮತ್ತು ವಿಷಯ ಲೋಡಿಂಗ್
+- **ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ**: ಸ್ಮೂತ್ ಬದಲಾವಣೆಗಳು ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್ ಸೌಂದರ್ಯ
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವೇ ಸಿದ್ಧರಾಗಿದ್ದೀರಿ ಆಧುನಿಕ ಮುಂಭಾಗ ಫ್ರೆ임್‌ವರ್ಕ್‌ಗಳ ಅವಲೋಕನ ಮಾಡಲು, ಸುಧಾರಿತ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ ಅಥವಾ ಸಂಕೀರ್ಣ ಎಂಟರ್ಪ್ರೈಸ್ ಅಪ್ಲಿಕೇಶನ್ಗಳ ನಿರ್ಮಾಣಕ್ಕೆ!
+
+🌟 **ಸಾಧನೆ ಅನ್ಲಾಕ್**: ನೀವು ಆಧುನಿಕ ವೆಬ್ ವಾಸ್ತುಶಿಲ್ಪ ಮಾದರಿಗಳೊಂದಿಗೆ ವೃತ್ತಿಪರ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ಮೂಲವನ್ನು ನಿರ್ಮಿಸಿಕೊಂಡಿದ್ದೀರಿ!
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ನಿಮ್ಮ ಕ್ಯಾರೆಕ್ಟರ್ ಓಪನ್ ಮೂಲಕ ಈ ಚಾಲೆಂಜ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:
+
+**ವಿವರಣೆ:** ನಿಷಿದ್ಧ ಮಾರ್ಗಗಳಿಗೆ ಹಾದುಹೋಗುವಾಗ ಬಳಕೆದಾರ ಹಿತಕರ 404 ದೋಷ ಪುಟ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆ ಅನುಷ್ಠಾನಗೊಳಿಸುವ ಮೂಲಕ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನನ್ನು ಸುಧಾರಣೆ ಮಾಡು.
+
+**ಪ್ರಾಂಪ್ಟ್:** "not-found" ಎಂಬ ಗುರುತುಳ್ಳ ಹೂಟು HTML ಟೆಂಪ್ಲೇಟ್ ಸೃಷ್ಟಿಸಿ, ಇದು ಬಳಕೆದಾರ ಸ್ನೇಹಿ 404 ದೋಷ ಪುಟವನ್ನು ಶೈಲಿಬದ್ಧವಾಗಿಸಿರುತ್ತದೆಯೆಂದು ತೋರಿಸಲಿ. ನಂತರ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ರೂಟಿಂಗ್ ತರ್ಕವನ್ನು ಬದಲಿಸಿ, ಬಳಕೆದಾರರು ಅನುಚಿತ URLಗಳಿಗೆ ಹೋದಾಗ ಈ ಟೆಂಪ್ಲೇಟ್ ಪ್ರದರ್ಶಿಸಲಾಗುವಂತೆ ಮಾಡು, ಜೊತೆಗೆ "Go Home" ಬಟನ್ ಸೇರಿಸಿ ಅದು ಲಾಗಿನ್ ಪುಟಕ್ಕೆ ಮರಳುವಂತೆ ಮಾಡಲಿ.
+
+ಇಲ್ಲಿ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಪಡೆದುಕೊಳ್ಳಿ.
+
+## 🚀 ಚಾಲೆಂಜ್
+
+ಈ ಅಪ್ಲಿಕೇಶನ್ಗಾಗಿ ಕ್ರೆಡಿಟ್ಸ್ ತೋರಿಸುವ ಮೂರನೇ ಪುಟವನ್ನೋಳ್ಳ ಟೆಂಪ್ಲೇಟ್ ಹಾಗೂ ರೂಟ್ ಅನ್ನು ಸೇರಿಸಿ.
+
+**ಚಾಲೆಂಜ್ ಗುರಿಗಳು:**
+- **ಸೃಷ್ಟಿಸಿ** ಸೂಕ್ತ ವಿಷಯ ರಚನೆಯೊಂದಿಗೆ ಹೊಸ HTML ಟೆಂಪ್ಲೇಟ್
+- **ಸೆೇರಿಸಿ** ನಿಮ್ಮ ರೂಟ್ ಸಂರಚನಾ ವಸ್ತುವಿಗೆ ಹೊಸ ರೂಟ್
+- **ಸೇರಿಸಿ** ಕ್ರೆಡಿಟ್ಸ್ ಪುಟಕ್ಕೆ ಮತ್ತು ಅದರ ತಿರುಗು ನ್ಯಾವಿಗೇಶನ್ ಲಿಂಕ್‌ಗಳು
+- **ಪರೀಕ್ಷಿಸಿ** ಎಲ್ಲ ನ್ಯಾವಿಗೇಶನ್ ಬ್ರೌಸರ್ ಇತಿಹಾಸದೊಂದಿಗೆ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ ಎಂದು
+
+## ಉಪನ್ಯಾಸ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಉಪನ್ಯಾಸ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/42)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂಅಧ್ಯಯನ
+
+ರೂಟಿಂಗ್ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯೊಂದಿಗಿನ ಅಚ್ಚರಿಕಾರಿ ಜಟಿಲ ಭಾಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ವೆಬ್ ಪುಟ ರಿಫ್ರೆಶ್‌ಗಳಿಂದ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ಪುಟ ರಿಫ್ರೆಶ್‌ಗೆ ಬದಲಾವಣೆಯಾಗಿ. [Azure Static Web App ಸೇವೆ](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) ರೂಟಿಂಗ್ ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಸ್ವಲ್ಪ ಓದಿ. ಆ ದಾಖಲೆಯಲ್ಲಿ ವಿವರಣೆಗೊಳ್ಳಲಾದ ಕೆಲವು ನಿರ್ಧಾರಗಳು ಏಕೆ ಅವಶ್ಯಕವೆಂದು ನೀವು ವಿವರಿಸಬಹುದೇ?
+
+**ಹೆಚ್ಚಿನ ಕಲಿಕೆಯ ಸಂಪನ್ಮೂಲಗಳು:**
+- **ಅನ್ವೇಷಿಸಿ** React Router ಮತ್ತು Vue Router ಮುಂತಾದ ಜನಪ್ರಿಯ ಫ್ರೆ임್‌ವರ್ಕ್‌ಗಳು ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟಿಂಗ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತವೆ
+- **ಶೋಧಿಸಿ** ಹ್ಯಾಷ್ ಆಧಾರಿತ ರೂಟಿಂಗ್ ಮತ್ತು ಇತಿಹಾಸ API ರೂಟಿಂಗ್ ನಡುವಿನ ವ್ಯತ್ಯಾಸಗಳು
+- **ಶಿಕ್ಷಣ** ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಮತ್ತು ಅದು ರೂಟಿಂಗ್ ತಂತ್ರಗಳಿಗೆ ಹೇಗೆ ಪ್ರಭಾವಿಸುತ್ತದೆ
+- **ವಿಚಾರಿಸಿ** ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು (PWAs) ಹೇಗೆ ರೂಟಿಂಗ್ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್ ನಿರ್ವಹಿಸುತ್ತವೆ
+
+## ಅಸೈನ್ಮೆಂಟ್
+
+[ರೂಟಿಂಗ್ উন্নতಮಾಡಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ವಿಜ್ಞಾನ ಸೂಚನೆ**:  
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಯಿಂದ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯ ಮೇಲ್ಭಾಗದಲ್ಲಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪು ಸೇರಿದಂತೆ ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನದಲ್ಲಿ ಇಡಿ. ಮೂಲ ಡಾಕ್ಯುಮೆಂಟ್ ಅದರ ಸ್ವದೇಶಿ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿರುತ್ತದೆ. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ತಿಳಿವಳಿಕೆಗಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗಿರುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/1-template-route/assignment.md

@@ -0,0 +1,60 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "df0dcecddcd28ea8cbf6ede0ad57d673",
+  "translation_date": "2026-01-08T17:11:41+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಮಾರ್ಗದರ್ಶನವನ್ನು ಸುಧಾರಿಸಿ
+
+## ನಿರ್ದೇಶನಗಳು
+
+ನೀವು ಪ್ರಾಥಮಿಕ ಮಾರ್ಗದರ್ಶನ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿರುವ ಈಗಾಗ, ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುವ ಮತ್ತು ಉತ್ತಮ ಡೆವಲಪರ್ ಉಪಕರಣಗಳನ್ನು ಒದಗಿಸುವ ವೃತ್ತಿಪರ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಅದನ್ನು ಹೆಚ್ಚಿಸಲು ಸಮಯವಾಗಿದೆ. ವಾಸ್ತವ ಜಗತ್ತಿನ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಕೇವಲ ಟೆಂಪ್ಲೇಟ್ ಸ್ವಿಚಿಂಗ್ ಅಲ್ಲದೆ ಹೆಚ್ಚು ಬೇಕಾಗುತ್ತದೆ – ಅವುಗಳಿಗೆ ಗತಿಶೀಲ ಪುಟ ಶೀರ್ಷಿಕೆಗಳು, ಜೀವನಚಕ್ರ ಹೂಕ್‌ಗಳು ಮತ್ತು ವಿಸ್ತಾರಗೊಳ್ಳಬಹುದಾದ ವಾಸ್ತುಶಿಲ್ಪಗಳನ್ನು ಬೇಕಾಗುತ್ತದೆ.
+
+ಈ ಅಭ್ಯಾಸದಲ್ಲಿ, ನೀವು ಉತ್ಪಾದನಾ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಕಂಡುಬರುವ ಎರಡು ಅನಿವಾರ್ಯ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಮಾರ್ಗದರ್ಶನ ಜಾರಿಗೆಕೊಳ್ಳುವಿಕೆ ಅನ್ನು ವಿಸ್ತರಿಸುವಿರಿ. ಈ ಸುಧಾರಣೆಗಳು ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ ಅನ್ನು ಇನ್ನಷ್ಟು ಸುತ್ತುವರಿದಂತೆ ಮಾಡುತ್ತವೆ ಮತ್ತು ಭವಿಷ್ಯದ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಮೂಲಭೂತವನ್ನು ಒದಗಿಸುತ್ತವೆ.
+
+ಮಾರ್ಗಗಳು ಘೋಷಣೆ ಪ್ರಸ್ತುತ ಬಳಸಬೇಕಾದ ಟೆಂಪ್ಲೇಟ್ ID ಮಾತ್ರವನ್ನು ಒಳಗೊಂಡಿದೆ. ಆದರೆ ಹೊಸ ಪುಟವನ್ನು ಪ್ರದರ್ಶಿಸುವಾಗ, ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಅಗತ್ಯವಿರುತ್ತದೆ. ನಮ್ಮ ಮಾರ್ಗದರ್ಶನ ಜಾರಿಗೆಕೊಳ್ಳುವಿಕೆಯನ್ನು ಎರಡು ಹೆಚ್ಚುವರಿ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳೊಂದಿಗೆ ಸುಧಾರಿಸೋಣ:
+
+### ವೈಶಿಷ್ಟ್ಯ 1: ಗತಿಶೀಲ ಪುಟ ಶೀರ್ಷಿಕೆಗಳು
+**ಉದ್ದೇಶ:** ಪ್ರತಿ ಟೆಂಪ್ಲೇಟ್‌ಗೆ ಶೀರ್ಷಿಕೆಗಳನ್ನು ನೀಡುವುದು ಮತ್ತು ಟೆಂಪ್ಲೇಟ್ ಬದಲಾಗುವಾಗ ವಿಂಡೋ ಶೀರ್ಷಿಕೆಯನ್ನು ಈ ಹೊಸ ಶೀರ್ಷಿಕೆಗೆ ತ್ವರಿತಗೊಳಿಸುವುದು.
+
+**ಈದಕ್ಕಾಗಿ ಮುಖ್ಯಾಂಶಗಳು:**
+- ವಿವರಣೆ ಹೊಂದಿದ ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ ಶೀರ್ಷಿಕೆಗಳನ್ನು ತೋರಿಸುವ ಮೂಲಕ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ  
+- ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಪ್ರವೇಶಾರ್ಹತೆಯನ್ನು ಬಲಪಡಿಸುತ್ತದೆ  
+- ಉತ್ತಮ ಬುಕ್ರಾಮಿಂಗ್ ಮತ್ತು ಬ್ರೌಸರ್ ಇತಿಹಾಸ ಹಿನ್ನೆಲೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ  
+- ವೃತ್ತಿಪರ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ
+
+**ಕ್ರಿಯಾನ್ವಯ್ ವಿಧಾನ:**
+- ಪ್ರತಿ ಮಾರ್ಗಕ್ಕೆ ಶೀರ್ಷಿಕೆ ಮಾಹಿತಿ ಸೇರಿಸಲು `routes` ವಸ್ತುವನ್ನು ವಿಸ್ತರಿಸಿ  
+- `updateRoute()` ಫಂಕ್ಷನ್ ಅನ್ನು ತಿದ್ದುಪಡಿ ಮಾಡಿ `document.title` ಅನ್ನು ಗತಿಶೀಲವಾಗಿ ನವೀಕರಿಸಿ  
+- ಪರದೆಗಳ ನಡುವೆ ಸಾಗಿಸುತ್ತಾ ಶೀರ್ಷಿಕೆಗಳು ಸರಿಯಾಗಿ ಬದಲಾಗುತ್ತಿರುವುದನ್ನು ಪರೀಕ್ಷಿಸಿ  
+
+### ವೈಶಿಷ್ಟ್ಯ 2: ಮಾರ್ಗ ಜೀವನಚಕ್ರ ಹೂಕ್‌ಗಳು  
+**ಉದ್ದೇಶ:** ಟೆಂಪ್ಲೇಟ್ ಬದಲಾಗಿರುವ ನಂತರ ಕೆಲವು ಕೋಡ್ ಅನ್ನು ಕಾರ್ಯರೂಪ给ಬಗೆಹರಿಸುವ ಆಯ್ಕೆಯನ್ನು ಸೇರಿಸುವುದು. ಪ್ರತಿಬಾರಿಗೆ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಪುಟ ಪ್ರದರ್ಶಿಸುವಾಗ `'Dashboard is shown'` ಎಂಬ ಸಂದೇಶವನ್ನು ಡೆವಲಪರ್ ಕಾನ್ಸೋಲ್‌ನಲ್ಲಿ ಮುದ್ರಿಸಬೇಕಾಗಿದೆ.
+
+**ಈದಕ್ಕಾಗಿ ಮುಖ್ಯಾಂಶಗಳು:**
+- ನಿರ್ದಿಷ್ಟ ಮಾರ್ಗಗಳು ಲೋಡ್ ಆದಾಗ ಕಸ್ಟಮ್ ಲಾಜಿಕ್ ನಿರ್ವಹಣೆಯನ್ನು ಸಾದ್ಯಮಾಡುತ್ತದೆ  
+- ವಿಶ್ಲೇಷಣೆ, ನೋಂದಣಿ ಅಥವಾ ಆರ್‌ಭಿಕರಣ ಕೋಡ್‌ಗಾಗಿ ಹೂಕ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ  
+- ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮಾರ್ಗ ವರ್ತನೆಗಳಿಗಾಗಿ ಪರಿಕಲ್ಪನೆಯ ಅಡಿಪಾಯವನ್ನು ರಚಿಸುತ್ತದೆ  
+- ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಆಬ್ಜರ್ವರ್ ಆಲೋಚನೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ
+
+**ಕ್ರಿಯಾನ್ವಯ್ ವಿಧಾನ:**
+- ಮಾರ್ಗ ಸಂರಚನೆಗಳಿಗೆ ಆಯ್ಕೆಮಾಡಬಹುದಾದ ಬ್ಯಾಕ್ಅಪ್ ಫಂಕ್ಷನ್ ಗುಣಮಟ್ಟವನ್ನು ಸೇರಿಸಿ  
+- ಟೆಂಪ್ಲೇಟ್ ರೆಂಡರಿಂಗ್ ಪೂರ್ಣವಾದ ನಂತರ ಬ್ಯಾಕ್ಅಪ್ ಫಂಕ್ಷನ್ ಅನ್ನು (ಇದೆ ಇದ್ದಲ್ಲಿ) ಕಾರ್ಯಗತಗೊಳಿಸಿ  
+- ಯಾವುದೇ ಮಾರ್ಗದ ಈಗDefined ಬ್ಯಾಕ್ಅಪ್ ಮೂಲಕ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಖಾತ್ರಿಪಡಿಸಿ  
+- ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಗೆ ಭೇಟಿ ನೀಡುವಾಗ ಕಾನ್ಸೋಲ್ ಸಂದೇಶವು ಕಾಣಿಸುತ್ತದೆ ಎಂದು ಪರೀಕ್ಷಿಸಿ  
+
+## ಮೌಲ್ಯಮಾಪನ ಮ್ಯಾಗಣಿ
+
+| ಮಾನದಂಡ | ಉದಾತ್ತ                                                                                                                              | ತಕ್ಕಮಟ್ಟಿಗೆ                                                                                                                                                                               | ಸುಧಾರಣೆಯ ಅಗತ್ಯವೇ                                        |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+|          | ಎರಡು ವೈಶಿಷ್ಟ್ಯಗಳೂ ಜಾರಿಗೆ ಬಂದಿದೆ ಮತ್ತು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆ. ಶೀರ್ಷಿಕೆ ಮತ್ತು ಕೋಡ್ ಸೇರಿಸುವುದು `routes` ಘೋಷಣೆಯಲ್ಲಿ ಹೊಸ ಮಾರ್ಗ ಸೇರಿಸಿದಾಗಲೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.                     | ಎರಡು ವೈಶಿಷ್ಟ್ಯಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಆದರೆ ಆಚಾರವಿಧಾನ ಕಠಿಣಗೊಳಿಸಲ್ಪಟ್ಟಿದೆ ಮತ್ತು `routes` ಘೋಷಣೆಯಿಂದ ಸಂರಚಿಸಲಾಗುವುದಿಲ್ಲ. ಶೀರ್ಷಿಕೆ ಮತ್ತು ಕೋಡ್ ಸೇರಿಸುವ ಮೂರನೇ ಮಾರ್ಗ ಸೇರಿಸುವುದು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ ಅಥವಾ ಭಾಗಶಃ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. | ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಒಂದೋ ಕಾಣಿಸುವುದಿಲ್ಲ ಅಥವಾ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿಲ್ಲ.  |
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಬೆಳಗ್ಗೆ ಮಾಹಿತಿ**:  
+ಈ ದಾಖಲೆಯನ್ನು ಏಐ ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯನ್ನು ಹೊಲಪಡಲು ಪ್ರಯತ್ನಿಸುತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಾಖಲೆ ಅನ್ನು ಅಧಿಕೃತ ಹಾಗೂ ನಿಖರ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕಾಗುತ್ತದೆ. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅಸಮಜ್ಜಿನತೆಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳನ್ನು ನಾವು ಹೊಣೆಗಾರರಾಗಿರುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/2-forms/README.md

@@ -0,0 +1,965 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7cbdbd132d39a2bb493e85bc2a9387cc",
+  "translation_date": "2026-01-08T16:30:55+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಾಣ ಭಾಗ 2: ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ಫಾರಂ ನಿರ್ಮಿಸಿ
+
+```mermaid
+journey
+    title ನಿಮ್ಮ ಫಾರ್ಮ್ ಅಭಿವೃದ್ಧಿ ಪ್ರಯಾಣ
+    section HTML ಮೂಲಭೂತ
+      ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 3: Student
+      ಇನ್‌ಪುಟ್ ಪ್ರಕಾರಗಳನ್ನು ಕಲಿಯಿರಿ: 4: Student
+      ಪ್ರವೇಶುತರತೆಯನ್ನು ಪರಿಣತಿ ಮಾಡಿ: 4: Student
+    section ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಂಯೋಜನೆ
+      ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯನ್ನು.Handle: 4: Student
+      AJAX ಸಂವಹನವನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ: 5: Student
+      ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಪ್ರಕ್ರಿಯೆ ಮಾಡಿ: 5: Student
+    section ಪರಿಶೀಲನೆ ವ್ಯವಸ್ಥೆಗಳು
+      ಬಹು-ಮಟ್ಟದ ಪರಿಶೀಲನೆ ರಚನೆ ಮಾಡಿ: 5: Student
+      ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಿ: 5: Student
+      ಡೇಟಾ ಅಖಂಡತೆಯನ್ನು ಖಚಿತಪಡಿಸಿ: 5: Student
+```
+## ಪೂರ್ವ-ವಕ್ತृत्व ಕ್ವಿಜ್
+
+[ಪೂರ್ವ-ವಕ್ತृत्व ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/43)
+
+ನೀವು ಅಾನ್ಲೈನ್‌లో ಫಾರಂ ಪೂರೈಸಿರುವಾಗ ನಿಮ್ಮ ಇಮೇಲ್ ಸ್ವರೂಪ ತಳ್ಳಿಹೋಗಿದೆಯಾ? ಅಥವಾ ಸಬ್ಮಿಟ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ನಿಮ್ಮ ಎಲ್ಲಾ ಮಾಹಿತಿಯನ್ನು ಕಳೆದುಕೊಂಡಿದ್ದೀರಾ? ಇಂತಹ ತೊಂದರೆಕಾರಿ ಅನುಭವಗಳನ್ನು ನಾವು ಎಲ್ಲರೂ ಎದುರಿಸಿದ್ದೇವೆ.
+
+ಫಾರಂಗಳು ನಿಮ್ಮ ಬಳಕೆದಾರರು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆಗಳ ನಡುವೆ ಸೇತುವೆಯಾಗಿವೆ. ವಿಮಾನಗಳ ಸುರಕ್ಷಿತ ಗಮ್ಯಸ್ಥಾನಕ್ಕೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುವ ವಿಮಾನ ಸಂಚಾರ ನಿಯಂತ್ರಕರ ಸರಳ ನಿಯಮಗಳಂತೆ, ಚೆನ್ನಾಗಿ ವಿನ್ಯಾಸಗೊಳ್ಳದ ಫಾರಂಗಳು ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುತ್ತದೆ ಮತ್ತು ದುಬಾರಿಯಾದ ದೋಷಗಳನ್ನು ತಡೆಯುತ್ತವೆ. ಕೀಳಾದ ಫಾರಂಗಳು, ಮತ್ತೊಂದೆಡೆ, ಬಳಕೆದಾರರನ್ನು ತುಂಬಾ ವೇಗವಾಗಿ ದೂರ ಮಾಡಬಹುದು, ಹೊರಗಡೆ ಗೊಂದಲಗಳಿಗೆ ಕಾರಣವಾಗುವ ವಿಮಾನ ನಿಲ್ದಾಣದ ಅನುಮಾನಗಳಂತೆ.
+
+ಈ ಪಾಠದಲ್ಲಿ, ನಿಮ್ಮ ಸ್ಥಿರ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬಲವಾದ ಇಂಟರಾಕ್ಟಿವ್ ಅಪ್ಲಿಕೇಶನ್ನಾಗಿ ಪರಿವರ್ತಿಸುವುದನ್ನು ಕಲಿಯೋಣ. ನೀವು ಬಳಕೆದಾರರ ಒಳಪಡಿಸುವ ಮಾಹಿತಿಯನ್ನು ಪರಿಶೀಲಿಸುವ, ಸರ್ವರ್‌ಗಳ ಜೊತೆ ಸಂವಹನ ಮಾಡುವ, ಮತ್ತು ಉಪಕಾರೀಯ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುವ ಫಾರಂಗಳನ್ನು ನಿರ್ಮಿಸುವುದನ್ನು ಕಲಿಯುತ್ತೀರಿ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸ್ಥಿರವಾಗಿ ಕಡೆಗಣಿಸದೆ ಬಳಕೆದಾರರು ನಿರ್ವಹಿಸಲು ಅವಕಾಶ ನೀಡುವ ನಿಯಂತ್ರಣ ಮುಖಪಟವನ್ನು ನಿರ್ಮಿಸುವಂತೆ.
+
+ಅಂತ್ಯದಲ್ಲಿ, ನೀವೇ ಸಂಪೂರ್ಣ ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ವ್ಯವಸ್ಥೆಯನ್ನು ಹೊಂದಿರುವಿರಿ, ಇದು ಬಳಕೆದಾರರನ್ನು ನಿರಾಶೆಯಿಂದ ಬಿಟ್ಟು ಯಶಸ್ಸಿನತ್ತ ದಾರಿತೋರುತ್ತದೆ.
+
+```mermaid
+mindmap
+  root((Form Development))
+    HTML Foundation
+      Semantic Elements
+      Input Types
+      Accessibility
+      Label Association
+    User Experience
+      ಮಾನ್ಯತಾ ಪ್ರತಿಕ್ರಿಯೆ
+      ದೋಷ ತಡೆ
+      ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು
+      ಯಶಸ್ಸಿನ ಸಂದೇಶ
+    JavaScript Integration
+      ಘಟನೆ ನಿರ್ವಹಣೆ
+      AJAX ಸಂವಹನ
+      ಡೇಟಾ ಸಂಸ್ಕರಣೆ
+      ದೋಷ ನಿರ್ವಹಣೆ
+    Validation Layers
+      HTML5 ಮಾನ್ಯತೆ
+      ಕ್ಲೈಂಟ್-ಪಾರ್ಶ್ವ ಲಾಜಿಕ್ಸ್
+      ಸರ್ವರ್-ಪಾರ್ಶ್ವ ಭದ್ರತೆ
+      ಪ್ರಗತಿಶೀಲ ಸುಧಾರಣೆ
+    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
+<!-- Basic form structure -->
+<form id="userForm" method="POST">
+  <label for="username">Username</label>
+  <input id="username" name="username" type="text" required>
+  
+  <button type="submit">Submit</button>
+</form>
+```
+
+**ಈ ಕೋಡ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- **ಫಾರಂ ಕಾಂಟೈನರ್** ಅನ್ನು ವಿಶೇಷ ಗುರುತಿಸುವ ಗುರುತಿನೊಂದಿಗೆ ರಚಿಸುತ್ತದೆ
+- **ಡೇಟಾ ಸಬ್ಮಿಷನ್‌ಗಾಗಿ** HTTP ವಿಧಾನವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ
+- **ಪ್ರವೇಶಾರ್ಹತೆಗಾಗಿ** ಲೆಬಲ್ಗಳನ್ನು ಇನ್‌ಪುಟ್‌ಗಳ ಜೊತೆ ಜೋಡಿಸುತ್ತದೆ
+- **ಫಾರಂ ಪ್ರಕ್ರಿಯೆಗಾಗಿ** ಸಬ್ಮಿಟ್ ಬಟನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ
+
+### ಆಧುನಿಕ ಇನ್‌ಪುಟ್ ಪ್ರಕಾರಗಳು ಮತ್ತು ಲಕ್ಷಣಗಳು
+
+| ಇನ್‌ಪುಟ್ ಪ್ರಕಾರ | ಉದ್ದೇಶ | ಉದಾಹರಣಾ ಬಳಕೆ |
+|------------|---------|---------------|
+| `text` | ಸಾಮಾನ್ಯ ಪಠ್ಯ ಇನ್‌ಪುಟ್ | `<input type="text" name="username">` |
+| `email` | ಇಮೇಲ್ ಪರಿಶೀಲನೆ | `<input type="email" name="email">` |
+| `password` | ಇನ್ಪುಟ್ ಮರೆಯಿರಿ | `<input type="password" name="password">` |
+| `number` | ಸಂಖ್ಯಾತ್ಮಕ ಇನ್‌ಪುಟ್ | `<input type="number" name="balance" min="0">` |
+| `tel` | ದೂರವಾಣಿ ಸಂಖ್ಯೆ | `<input type="tel" name="phone">` |
+
+> 💡 **ಆಧುನಿಕ HTML5 ಲಾಭ**: ವಿಶೇಷ ಇನ್‌ಪುಟ್ ಪ್ರಕಾರಗಳನ್ನು ಬಳಸುವುದರಿಂದ ಸ್ವಯಂಚಾಲಿತ ಪರಿಶೀಲನೆ, ಸೂಕ್ತ ಮೊಬೈಲ್ ಕೀಬೋರ್ಡ್‌ಗಳು, ಮತ್ತು ಉತ್ತಮ ಪ್ರವೇಶಾರ್ಹತೆ ಬೆಂಬಲ ಇರುತ್ತದೆ, ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ!
+
+### ಬಟನ್ ಬೇರೆ ಬೇರೆ ಪ್ರಕಾರಗಳು ಮತ್ತು ವ್ಯವಹಾರ
+
+```html
+<!-- Different button behaviors -->
+<button type="submit">Save Data</button>     <!-- Submits the form -->
+<button type="reset">Clear Form</button>    <!-- Resets all fields -->
+<button type="button">Custom Action</button> <!-- No default behavior -->
+```
+
+**ಪ್ರತಿ ಬಟನ್ ಪ್ರಕಾರವು ಎಷ್ಟು ಕಾರ್ಯವೈಖರಿ:**
+- **ಸಬ್ಮಿಟ್ ಬಟನ್ಗಳು**: ಫಾರಂ ಸಲ್ಲಿಸುವುದನ್ನು ಪ್ರೇರೇಪಿಸಿ ಡೇಟಾವನ್ನು ನಿಗದಿತ ಅಂತಿಮ ಬಿಂದುವಿಗೆ ಕಳುಹಿಸುತ್ತವೆ
+- **ರಿಸೆಟ್ ಬಟನ್ಗಳು**: ಎಲ್ಲಾ ಫಾರಂ ಕ್ಷೇತ್ರಗಳನ್ನು ಆರಂಭಿಕ ಸ್ಥಿತಿಗೆ ಹಿಂಪಡುವಿಕೆ ಮಾಡುತ್ತವೆ
+- **ನಿಯಮಿತ ಬಟನ್ಗಳು**: ಯಾವುದೇ ಡೀಫಾಲ್ಟ್ ವ್ಯವಹಾರ ಇಲ್ಲ, ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯ
+
+> ⚠️ **ಪ್ರಮುಖ ಟಿಪ್ಪಣಿ**: `<input>` ಅಂಶವು ಸ್ವಯಂ ಸಂಪೂರ್ಣವಾಗಿದ್ದು ಮುಚ್ಚುವ ಟ್ಯಾಗ್ ಅಗತ್ಯವಿಲ್ಲ. ಆಧುನಿಕ ಸರ್ವೋತ್ತಮ ಕ್ರಮವು slash ಇಲ್ಲದೆ `<input>` ಬರೆಯುವುದು.
+
+### ನಿಮ್ಮ ಲಾಗಿನ್ ಫಾರಂ ಅನ್ನು ನಿರ್ಮಿಸುವುದು
+
+ಈಗ ನಾವು ಆಧುನಿಕ HTML ಫಾರಂ ಅಭ್ಯಾಸಗಳನ್ನು ತೋರಿಸುವ ಪ್ರಾಯೋಗಿಕ ಲಾಗಿನ್ ಫಾರಂ ನಿರ್ಮಿಸೋಣ. ನಾವು ಸರಳ ರಚನೆಯಿಂದ ಪ್ರಾರಂಭಿಸಿ ಹಂತ ಹಂತವಾಗಿ ಪ್ರವೇಶಾರ್ಹತೆ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಪರಿಶೀಲನೆ ಸೇರಿಸುವೆವು.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <h2>Login</h2>
+    <form id="loginForm" novalidate>
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input id="username" name="user" type="text" required 
+               autocomplete="username" placeholder="Enter your username">
+      </div>
+      <button type="submit">Login</button>
+    </form>
+  </section>
+</template>
+```
+
+**ಇಲ್ಲಿ ಆಗುವ ಪ್ರಮುಖ ಸಂಗತಿಗಳು:**
+- **ಫಾರಂವನ್ನು ಸಾಂಕೇತಿಕ HTML5 ಅಂಶಗಳೊಂದಿಗೆ ರಚಿಸುತ್ತದೆ**
+- **ಸಂಬಂಧಿತ ಅಂಶಗಳನ್ನು ಅರ್ಥಪೂರ್ಣ ವರ್ಗಗಳುಳ್ಳ `div` ಕಾಂಟೈನರ್‌ಗಳ ಮೂಲಕ ಗುಂಪು ಮಾಡುತ್ತದೆ**
+- **`for` ಮತ್ತು `id` ಗುಣಲಕ್ಷಣಗಳಿಂದ ಲೇಬಲ್ಸ್ ಮತ್ತು ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಜೋಡಿಸುತ್ತದೆ**
+- **ಉತ್ತಮ ಉಪಯೋಗದ ಅನುಭವಕ್ಕೆ `autocomplete` ಮತ್ತು `placeholder` ಸಾಮ್ರಾಜ್ಯಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ**
+- **ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಬದಲಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಪರಿಶೀಲನೆ ನಡೆಸಲು `novalidate` ಅನ್ನು ಸೇರಿಸುತ್ತದೆ**
+
+### ಸೂಕ್ತ ಲೇಬಲ್ಸ್ ಶಕ್ತಿಯು
+
+**ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಲೇಬಲ್ಸ್ ಮುಂಬರುವ ಕಾರಣಗಳು:**
+
+```mermaid
+graph TD
+    A[ಲೇಬಲ್ ಘಟಕ] --> B[ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬೆಂಬಲ]
+    A --> C[ಕ್ಲಿಕ್ ಗುರಿ ವಿಸ್ತರಣೆ]
+    A --> D[ಫಾರ್ಮ್ ಮಾನ್ಯತೆ]
+    A --> E[ಎಸ್‌ಇಒ ಲಾಭಗಳು]
+    
+    B --> F[ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಲು ಸಾಧ್ಯ]
+    C --> G[ಮೆಚ್ಚಿನ ಮೊಬೈಲ್ ಅನುಭವ]
+    D --> H[ಸ್ಪಷ್ಟ ದೋಷ ಸಂದೇಶ]
+    E --> I[ಮೆಚ್ಚಿನ ಹುಡುಕಾಟ ಶ್ರೇಣಿ]
+```
+**ಸೂಕ್ತ ಲೇಬಲ್ಗಳು ನೀಡುವ ಚಟುವಟಿಕೆಗಳು:**
+- **ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಸ್ಪಷ್ಟವಾಗಿ ಫಾರಂ ಕ್ಷೇತ್ರಗಳನ್ನು ಘೋಷಿಸುವಂತೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ**
+- **ಕ್ಲಿಕ್ ಮಾಡುವ ವಿಸ್ತೀರ್ಣವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ (ಲೇಬಲ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ ಇನ್‌ಪುಟ್‌ಗೆ ಫೋಕಸ್ ಆಗುತ್ತದೆ)**
+- **ಮೋಬೈಲ್ ಬಳಕೆಗೆ ದೊಡ್ಡ ಟಚ್ ಗುರಿಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ**
+- **ಭರತನಿರ್ವಾಹಕ ದೋಷ ಸಂದೇಶಗಳೊಂದಿಗೆ ಫಾರಂ ಪರಿಶೀಲನೆಯನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ**
+- **ಫಾರಂ ಅಂಶಗಳಿಗೆ ಅರ್ಥಮಯ ಅರ್ಥವನ್ನು ಕೊಡುತ್ತಿರುವುದರಿಂದ SEO ಉತ್ತಮವಾಗುತ್ತದೆ**
+
+> 🎯 **ಪ್ರವೇಶಾರ್ಹತೆ ಗುರಿ**: ಪ್ರತಿಯೊಬ್ಬ ಫಾರಂ ಇನ್‌ಪುಟ್‌ಗೆ ಸಂಬಂಧಪಟ್ಟ ಲೇಬಲ್ ಇರಬೇಕು. ಈ ಸರಳ ಅಭ್ಯಾಸವು ನಿಮ್ಮ ಫಾರಂಗಳನ್ನು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೂ ಉಪಯುಕ್ತವಾಗಿಸುತ್ತದೆ, ಅಂಗವಿಕಲರು ಸೇರಿದಂತೆ, ಮತ್ತು ಎಲ್ಲಾ ಬಳಕೆದಾರರ ಅನುಭವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
+
+### ನೋಂದಣಿ ಫಾರಂ ನಿರ್ಮಾಣ
+
+ನೋಂದಣಿ ಫಾರಂ ಸಂಪೂರ್ಣ ಬಳಕೆದಾರ ಖಾತೆಯನ್ನು ರಚಿಸಲು ಹೆಚ್ಚಿನ ವಿವರಗಳನ್ನು ಬಯಸುತ್ತದೆ. ಅದನ್ನು ಆಧುನಿಕ HTML5 ಮತ್ತು ಉತ್ತಮ ಪ್ರವೇಶಾರ್ಹತೆಯೊಂದಿಗೆ ನಿರ್ಮಿಸೋಣ.
+
+```html
+<hr/>
+<h2>Register</h2>
+<form id="registerForm" novalidate>
+  <div class="form-group">
+    <label for="user">Username</label>
+    <input id="user" name="user" type="text" required 
+           autocomplete="username" placeholder="Choose a username">
+  </div>
+  
+  <div class="form-group">
+    <label for="currency">Currency</label>
+    <input id="currency" name="currency" type="text" value="$" 
+           required maxlength="3" placeholder="USD, EUR, etc.">
+  </div>
+  
+  <div class="form-group">
+    <label for="description">Account Description</label>
+    <input id="description" name="description" type="text" 
+           maxlength="100" placeholder="Personal savings, checking, etc.">
+  </div>
+  
+  <div class="form-group">
+    <label for="balance">Starting Balance</label>
+    <input id="balance" name="balance" type="number" value="0" 
+           min="0" step="0.01" placeholder="0.00">
+  </div>
+  
+  <button type="submit">Create Account</button>
+</form>
+```
+
+**ಮೇಲಿನಲ್ಲಿದ್ದವು:**
+- **ಪ್ರತಿ ಕ್ಷೇತ್ರವನ್ನು ಉತ್ತಮ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಕಂಟೈನರ್ ಡಿವ್‌ಗಳಲ್ಲಿ ಸಂಘಟಿಸಿದ್ದು**
+- **ಬ್ರೌಸರ್ ಆಫ್ಟೊಫಿಲ್ ಬೆಂಬಲಕ್ಕಾಗಿ ಸೂಕ್ತ `autocomplete` ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸೇರಿಸಿದ್ದು**
+- **ಬಳಕೆದಾರರ ಒಳಪಡಿಸುವಿಕೆಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುವ ಸಹಾಯಕ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವನ್ನು ಸೇರಿಸಿದ್ದು**
+- **`value` ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಸೂಕ್ತ ಡೀಫಾಲ್ಟ್ ಮೂಲ್ಯಗಳನ್ನು ಹೊಂದಿಸಿದ್ದು**
+- **`required`, `maxlength`, ಮತ್ತು `min`ಂತಹ ಪರಿಶೀಲನಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಉಪಯೋಗಿಸಿದ್ದು**
+- **ಬ್ಯಾಲೆನ್ಸ್ ಕ್ಷೇತ್ರಕ್ಕೆ ದಶಮಲವ ಸಹಿತ `type="number"` ಬಳಕೆ ಮಾಡಲಾಗಿದೆ**
+
+### ಇನ್‌ಪುಟ್ ಪ್ರಕಾರಗಳು ಮತ್ತು ಚಟುವಟಿಕೆಗಳ ಪರಿಗಣನೆ
+
+**ಆಧುನಿಕ ಇನ್‌ಪುಟ್ ಪ್ರಕಾರಗಳು ಹೆಚ್ಚಿದ ಕಾರ್ಯಕ್ಷಮತೆ ನೀಡುತ್ತವೆ:**
+
+| ವೈಶಿಷ್ಟ್ಯ | ಲಾಭ | ಉದಾಹರಣೆ |
+|---------|---------|----------|
+| `type="number"` | ಮೊಬೈಲ್‌ನಲ್ಲಿ ಸಂಖ್ಯಾತ್ಮಕ ಕೀಪ್ಯಾಡ್ | ಸುಲಭ ಬ್ಯಾಲೆನ್ಸ್ ನಮೂದಿಕೆ |
+| `step="0.01"` | ದಶಮಲವ ನಿಖರ ನಿಯಂತ್ರಣ | ಕರೆನ್ಸಿಯಲ್ಲಿ ಸೆಂಸೆಗಳ ಅನುಮತಿ |
+| `autocomplete` | ಬ್ರೌಸರ್ ಆಫ್ಟೊಫಿಲ್ | ಫಾರಂ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಯ ವೇಗ |
+| `placeholder` | ಸಂಬಂಧಿತ ಸೂಚನೆಗಳು | ಬಳಕೆದಾರ ನಿರೀಕ್ಷೆಯನ್ನು ಮಾರ್ಗದರ್ಶನ |
+
+> 🎯 **ಪ್ರವೇಶಾರ್ಹತೆ ಸವಾಲು**: ನಿಮ್ಮ ಕೀಬೋರ್ಡ್ ಅನ್ನು ಮಾತ್ರ ಬಳಸಿಕೊಂಡು ಫಾರಂಗಳನ್ನು ನಾವಿಗೇಟ್ ಮಾಡುವ ಪ್ರಯತ್ನ ಮಾಡಿ! ಕ್ಷೇತ್ರಗಳ ನಡುವೆ ಸರಕುವಕ್ಕಾಗಿ `Tab`, ಬಾಕ್ಸ್ ಅನ್ನು ತಪಾಸಣೆಗೆ `Space`, ಮತ್ತು ಸಲ್ಲಿಸಲು `Enter` ಬಳಸಿ. ಈ ಅನುಭವವು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಕೆದಾರರು ನಿಮ್ಮ ಫಾರಂಗಳೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ಮಾಡುತ್ತಾರೆ ಎಂಬುದನ್ನು ನಿಮಗೆ ಹೇಳುತ್ತದೆ.
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಫಾರಂ ಭಿತ್ತಿಯ ಗ್ರಹಿಕೆ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಜೋಡಿಸುವ ಮೊದಲು, ನಿಮಗೆ ತಿಳಿದಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಹೇಗೆ ಸಾಂಕೇತಿಕ HTML ಪ್ರವೇಶಾರ್ಹ ಫಾರಂ ರಚನೆಗಳನ್ನು ಸೃಷ್ಠಿಸುತ್ತದೆ
+- ✅ ಮೊಬೈಲ್ ಕೀಬೋರ್ಡ್ಗಳಿಗೆ ಮತ್ತು ಪರಿಶೀಲನೆಗೆ ಇನ್‌ಪುಟ್ ಪ್ರಕಾರಗಳು ಏಕೆ ಮುಖ್ಯ
+- ✅ ಲೇಬಲ್ಸ್ ಮತ್ತು ಫಾರಂ ನಿಯಂತ್ರಣಗಳ ಸಂಬಂಧವೇನು
+- ✅ ಫಾರಂ ಗುಣಲಕ್ಷಣಗಳು ಬ್ರೌಸರ್ ನ ಡೀಫಾಲ್ಟ್ ವರಹಹೋಗುವಿಕೆಗಳಿಗೆ ಹೇಗೆ ಪ್ರಭಾವ ಬೀರುತ್ತವೆ
+
+**ತ್ವರಿತ ಸ್ವಯಂ ಪರೀಕ್ಷೆ**: ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿರ್ವಹಣೆ ಇಲ್ಲದೆ ಫಾರಂ ಸಲ್ಲಿಸಿದರೆ ಏನಾಗುತ್ತದೆ?
+*ಉತ್ತರ: ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಸಲ್ಲಿಕೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ, ಸಾಮಾನ್ಯವಾಗಿ ಆಕ್ಷನ್ URL ಗೆ ಪುನರ್‌ನಿರ್ದೇಶನ ಮಾಡುತ್ತದೆ*
+
+**HTML5 ಫಾರಂಗಳ ಲಾಭಗಳು**: ಆಧುನಿಕ ಫಾರಂಗಳು ನೀಡುತ್ತವೆ:
+- **ನಿರ್ಮಿತ ಪರಿಶೀಲನೆ**: ಸ್ವಯಂಚಾಲಿತ ಇಮೇಲ್ ಮತ್ತು ಸಂಖ್ಯೆ ಸ್ವರೂಪ ಪರಿಶೀಲನೆ
+- **ಮೊಬೈಲ್ ಪರಿಪೂರ್ಣತೆ**: ವಿಭಿನ್ನ ಇನ್‌ಪುಟ್ ಪ್ರಕಾರಗಳಿಗೆ ಸೂಕ್ತ ಕೀಬೋರ್ಡ್ಗಳು
+- **ಪ್ರವೇಶಾರ್ಹತೆ**: ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬೆಂಬಲ ಮತ್ತು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಶನ್
+- **ಪ್ರಗತಿಶೀಲ ಸುಧಾರಣೆ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯ ಇದ್ದಾಗಲೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
+
+## ಫಾರಂ ಸಲ್ಲಿಸುವ ವಿಧಾನಗಳ ಅರ್ಥ
+
+ಯಾರೋ ಒಂದು ಫಾರಂ ತುಂಬಿ ಸಲ್ಲಿಸಿದಾಗ, ಆ ಡೇಟಾ ಯಾವುದೋ ಜಾಗಕ್ಕೆ ಹೋಗಬೇಕು – ಸಾಮಾನ್ಯವಾಗಿ ಅದನ್ನು ಉಳಿಸುವ ಸರ್ವರ್‌ಗೆ. ಇದಕ್ಕೆ ಕೆಲವು ವಿವಿಧ ವಿಧಾನಗಳಿರುತ್ತವೆ, ಮತ್ತು ಯಾವದನ್ನು ಬಳಸಬೇಕೆಂದು ತಿಳಿದಿರುವುದು ನಂತರ ನಿಮ್ಮ ತಲೆನೋವನ್ನು ಉಳಿಸುತ್ತದೆ.
+
+ಸಬ್ಮಿಟ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವಾಗ ಏನಾಗುತ್ತದೆ ನೋಡೋಣ.
+
+### ಡೀಫಾಲ್ಟ್ ಫಾರಂ ವರಹಹೋಗುವಿಕೆ
+
+ಮೊದಲಿಗೆ, ಸರಳ ಫಾರಂ ಸಲ್ಲಿಸುವಿಕೆಯೊಂದಿಗೆ ಏನಾಗುತ್ತದೆ ಎನ್ನುವುದನ್ನು ಗಮನಿಸೋಣ:
+
+**ನೀವೆಲ್ಲಾ ಫಾರಂಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+1. ನಿಮ್ಮ ಫಾರಂನಲ್ಲಿ *ನೋಂದಣಿ* ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ
+2. ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಳಾಸ ಪಟ್ಟಿಯಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಗಮನಿಸಿ
+3. ಪುಟ ಮರುಭರ್ತಿ ಆಗುವುದು ಮತ್ತು URL ನಲ್ಲಿ ಡೇಟಾ ಕಾಣಿಸುವುದು ಗಮನಿಸಿ
+
+![ ನೊಂದಣಿ ಬಟನ್ ಕ್ಲಿಕ್ ನಂತರ ಬ್ರೌಸರ್ URL ಬದಲಾವಣೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/click-register.e89a30bf0d4bc9ca.kn.png)
+
+### 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` ಬಳಸಿ.
+
+### ಫಾರಂ ಸಲ್ಲಿಸುವಿಕೆಯನ್ನು ಸಂರಚಿಸುವುದು
+
+ನಿಮ್ಮ ನೋಂದಣಿ ಫಾರಂ ಅನ್ನು ಬ್ಯಾಕೆಂಡ್ API ಜೊತೆ ಸರಿಯಾಗಿ ಸಂವಹನ ಮಾಡಲು POST ವಿಧಾನ ಬಳಸಿ ಸಂರಚಿಸೋಣ:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" 
+      method="POST" novalidate>
+```
+
+**ಈ ಸಂರಚನೆ ಏನು ಮಾಡುತ್ತದೆ:**
+- **ನಿಮ್ಮ API ಅಂತಿಮ ಬಿಂದುವಿಗೆ ಫಾರಂ ಸಲ್ಲಿಸಲು ಮಾರ್ಗದರ್ಶನ**
+- **ಭದ್ರತೆಯೊಂದಿಗೆ ಡೇಟಾ ಕಳುಹಿಸುವಿಕೆಗೆ POST ವಿಧಾನ ಬಳಸುವುದು**
+- **ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಜೊತೆಗೆ ಪರಿಶೀಲನೆಗಾಗಿ `novalidate` ಗುಣಲಕ್ಷಣ ಸೇರಿಸುವುದು**
+
+### ಫಾರಂ ಸಲ್ಲಿಸುವಿಕೆಯನ್ನು ಪರೀಕ್ಷಿಸುವುದು
+
+**ನಿಮ್ಮ ಫಾರಂ ಪರೀಕ್ಷಿಸಲು ಈ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ:**
+1. **ನೋಂದಣಿ ಫಾರಂ ಪೂರೈಸಿ**ನು ನಿಮ್ಮ ಮಾಹಿತಿಯಿಂದ
+2. **"ಖಾತೆ ರಚಿಸಿ" ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ**
+3. **ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಗಮನಿಸಿ**
+
+![लोकलहोಸ್ಟ್:5000/api/accounts ವಿಳಾಸದಲ್ಲಿರುವ ಬ್ರೌಸರ್ ವಿಂಡೋ, ಬಳಕೆದಾರ ಡೇಟಾ ಹೊಂದಿರುವ JSON ಸರಣಿ ತೋರಿಸುತ್ತಿದೆ](../../../../translated_images/form-post.61de4ca1b964d91a.kn.png)
+
+**ನೀವು ಕಂಡುಕೊಳ್ಳಬೇಕಾದುದು:**
+- **ಬ್ರೌಸರ್ API ಅಂತಿಮ ಬಿಂದುವಿಗೆ पुनರ್ನಿರ್ದೇಶನ ಮಾಡುತ್ತದೆ**
+- **ನಿಮ್ಮ ಹೊಸ ಖಾತೆ ವಿವರಗಳನ್ನು ಹೊಂದಿರುವ JSON ಪ್ರತಿಕ್ರಿಯೆ**
+- **ಸರ್ವರ್ ಖಾತೆಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ರಚಿಸಿರುವ ಪ್ರಮಾಣೀಕರಣ**
+
+> 🧪 **ಪ್ರयोग ಕಾಲ**: ಅದೇ ಬಳಕೆದಾರನಾಮದೊಂದಿಗೆ ಮತ್ತೆ ನೋಂದಣಿ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿ. ನೀವು ಯಾವ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪಡೆಯುತ್ತೀರಿ? ಇದು ಸರ್ವರ್ ನಕಲಿ ಡೇಟಾ ಮತ್ತು ದೋಷ ಸ್ಥಿತಿಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಮಗೆ ತಿಳಿಸುತ್ತದೆ.
+
+### JSON ಪ್ರತಿಕ್ರಿಯೆಗಳ ಅರ್ಥ
+
+**ಸರ್ವರ್ ನಿಮ್ಮ ಫಾರಂ ಯಶಸ್ವಿಯಾಗಿ ಪ್ರಕ್ರಿಯೆ ಮಾಡಿದಾಗ:**
+```json
+{
+  "user": "john_doe",
+  "currency": "$",
+  "description": "Personal savings",
+  "balance": 100,
+  "id": "unique_account_id"
+}
+```
+
+**ಈ ಪ್ರತಿಕ್ರಿಯೆಯು ದೃಢಪಟ್ಟಿದ್ದು:**
+- **ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ಹೊಂದಿರುವ ಹೊಸ ಖಾತೆಯನ್ನು ರಚಿಸಿದೆ**
+- **ಭವಿಷ್ಯದಲ್ಲಿ ಉಪಯೋಗಿಸಲು ವಿಶಿಷ್ಟ ಗುರುತಿನ ಸಂನ್ಯಾಸ ನೀಡಿದೆ**
+- **ತಪಾಸಣೆಗೆ ಎಲ್ಲಾ ಖಾತೆ ವಿವರಗಳನ್ನು ಹಿಂತಿರುಗಿಸಿದೆ**
+- **ಡೇಟಾಬೇಸ್‌ನಲ್ಲಿ ಯಶಸ್ವಿಯಾಗಿ ಸಂಗ್ರಹಿಸಿದೆ ಎಂಬುದನ್ನು ಸೂಚಿಸುತ್ತದೆ**
+
+## ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಆಧುನಿಕ ಫಾರಂ ನಿರ್ವಹಣೆ
+
+ಪಾರಂಪರಿಕ ಫಾರಂ ಸಲ್ಲಿಸುವಿಕೆ ಸಂಪೂರ್ಣ ಪುಟ ಮರುಭರ್ತಿ ಮಾಡುತ್ತದೆ, ಇದು ಪ್ರಾರಂಭಿಕ ಜಾಹಗಣಿಕೆ ಯಂತ್ರಗಳು ನಿಭಾಯಿಸಿದಂತೆ ಪೂರ್ಣ ವ್ಯವಸ್ಥೆ ಪುನಃಪ್ರಾರಂಭವನ್ನು ಅಗತ್ಯವಂತೆ ಮಾಡುತ್ತದೆ. ಈ ಕ್ರಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ವ್ಯಾಜ್ಯಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿಯನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತದೆ.
+
+ಜಾಗೃತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಾರಂ ನಿರ್ವಹಣೆ ಆಧುನಿಕ ಅನ್ವೇಷಣೆಯ ಖಗೋಳಯಾನಗಳಂತೆ ನಿರಂತರ ಮಾರ್ಗದರ್ಶನ ವ್ಯವಸ್ಥೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ – ನಾವಿಗೇಶನ್ ಪ್ರಸುತನೆಯನ್ನು ಕಳೆದುಹೋಗದೆ ತಕ್ಷಣದ ಹೊಂದಾಣಿಕೆಯನ್ನು ಮಾಡುತ್ತದೆ. ನಾವು ಫಾರಂ ಸಲ್ಲಿಸುವಿಕೆಯನ್ನು ಅಡಕ ಮಾಡಬಹುದು, ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸಬಹುದು, ದೋಷಗಳನ್ನು ಸೌಜನ್ಯವಾಗಿ ನಿರ್ವಹಿಸಬಹುದು, ಮತ್ತು ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಗಳ ಆಧಾರದ ಮೇಲೆ ಇಂಟರ್ಫೇಸ್ ನವೀಕರಿಸಬಹುದು, ಬಳಕೆದಾರನ ಸ್ಥಿತಿಯನ್ನು ಕಾಪಾಡುತ್ತಾ.
+
+### ಪುಟ ಮರುಭರ್ತಿ ತಪ್ಪಿಸಿಕೊಳ್ಳಬೇಕಾಗಿರುವ ಕಾರಣಗಳು
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant SPA
+    participant Server
+    
+    User->>SPA: ಫಾರ್ಮ್ ಸಲ್ಲಿಸುತ್ತದೆ
+    SPA->>Server: AJAX ವಿನಂತಿ
+    Server-->>SPA: JSON ಪ್ರತಿಕ್ರಿಯೆ
+    SPA->>User: ಇಂಟರ್ಫೇಸ್ ನವೀಕರಿಸುತ್ತದೆ
+    
+    Note over User,SPA: ಪುಟ ಪುನಃ ಲೋಡ್ ಆಗುವುದಿಲ್ಲ!
+```
+**ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಾರಂ ನಿರ್ವಹಣೆಯ ಒದಗಿಸುವ ಪ್ರಯೋಜನಗಳು:**
+- **ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿ ಮತ್ತು ಬಳಕೆದಾರ ಸಂಪರ್ಕವನ್ನು ಉಳಿಸುತ್ತದೆ**
+- **ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ಲೋಡೆಂಗ್ ಸೂಚನೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ**
+- **ಗತಿಯ ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಪರಿಶೀಲನೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ**
+- **ಮುರಗಾದ, ಆ್ಯಪ್-ಹಾಗೂ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ**
+- **ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಗಳ ಆಧಾರಿತ ಶರತ್ತು ಲಾಜಿಕ್ಗಳನ್ನು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತದೆ**
+
+### ಪಾರಂಪರಿಕ ಫಾರಂಗಳಿಂದ ಆಧುನಿಕ ಫಾರಂಗಳಿಗೆ ಪರಿವರ್ತನೆ
+
+**ಪಾರಂಪರಿಕ ಮಾರ್ಗದ ಸಮಸ್ಯೆಗಳು:**
+- ಬಳಕೆದಾರರನ್ನು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನಿಂದ ಬಿರುಗಾಳಿ ಆಗುತ್ತದೆ
+- ಪ್ರಸ್ತುತ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿ ಮತ್ತು ಪ್ರಾಸಂಗಿಕತೆ ಹೆಚ್ಚುತ್ತದಿಲ್ಲ
+- ಸರಳ ಕಾರ್ಯಗಳಿಗಾಗಿಯೂ ಸಂಪೂರ್ಣ ಪುಟ ಮರುಭರ್ತಿ ಬೇಕಾಗುತ್ತದೆ
+- ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ ಮೇಲೆ ನಿಯಂತ್ರಣ ಕಡಿಮೆ
+
+**ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾರ್ಗದ ಪ್ರಯೋಜನಗಳು:**
+- ಬಳಕೆದಾರರನ್ನು ಅಪ್ಲಿಕೇಶನ್ ಒಳಗೆ ಇರಿಸುತ್ತದೆ
+- ಎಲ್ಲಾ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿ ಮತ್ತು ಡೇಟಾ ಉಳಿಸುತ್ತದೆ
+- ನೈಜ ಸಮಯ ಪರಿಶೀಲನೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆ ನಿರ್ವಹಣೆ ಸಾಧ್ಯ
+- ಪ್ರಗತಿಶೀಲ ಸುಧಾರಣೆ ಮತ್ತು ಪ್ರವೇಶಾರ್ಹತೆಯನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ
+
+### ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಾರಂ ನಿರ್ವಹಣೆ ಅನುಷ್ಠಾನ
+
+ಪಾರಂಪರಿಕ ಫಾರಂ ಸಲ್ಲಿಸುವಿಕೆಯನ್ನು ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇವೆಂಟ್ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಬದಲಾಯಿಸೋಣ:
+
+```html
+<!-- Remove the action attribute and add event handling -->
+<form id="registerForm" method="POST" novalidate>
+```
+
+**ನಿಮ್ಮ `app.js` ಫೈಲಿಗೆ ನೋಂದಣಿ ಲಾಜಿಕ್ ಸೇರಿಸಿ:**
+
+```javascript
+// ಆಧುನಿಕ ಘಟನಾ ಚಾಲಿತ ಫಾರ್ಮ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+  
+  console.log('Form data prepared:', data);
+}
+
+// ಪುಟ ಲೋಡ್ ಆಗುವಾಗ ಘಟನಾ ಶ್ರೋತವನ್ನು ಲಗತ್ತಿಸಿ
+document.addEventListener('DOMContentLoaded', () => {
+  const registerForm = document.getElementById('registerForm');
+  registerForm.addEventListener('submit', (event) => {
+    event.preventDefault(); // ಡಿಫಾಲ್ಟ್ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯನ್ನು ತಡೆಯಿರಿ
+    register();
+  });
+});
+```
+
+**ಈ ಕೋಡ್‌ನಲ್ಲಿ ಆಗುತ್ತಿರುವುದನ್ನು ವಿಭಜಿಸುವುದು:**
+- `event.preventDefault()` ಬಳಸಿ ಡೀಫಾಲ್ಟ್ ಫಾರಂ ಸಲ್ಲಿಸುವಿಕೆಯನ್ನು ತಡೆಯುವುದು
+- ಆಧುನಿಕ DOM ಆಯ್ಕೆಯಿಂದ ಫಾರಂ ಅಂಶವನ್ನು ಪಡೆದುಕೊಳ್ಳುವುದು
+- ಬಲವಾದ `FormData` API ಬಳಸಿಕೊಂಡು ಫಾರಂ ಡೇಟಾವನ್ನು ಪಡೆಯುವುದು
+- `Object.fromEntries()`ದಿಂದ FormData ಅನ್ನು ಸರಳ ವಸ್ತುವಾಗಿ ಪರಿವರ್ತಿಸುವುದು
+- ಸರ್ವರ್ ಸಂವಹನಕ್ಕಾಗಿ ಡೇಟಾವನ್ನು JSON ಸ್ವರೂಪಕ್ಕೆ ಸರಣಿಧಾರಿಸುವುದು
+- ಡೀಬಗ್ಗಿಂಗ್ ಮತ್ತು ಪರಿಶೀಲನೆಗಾಗಿ ಸಂಸ್ಕೃತ ಡೇಟಾವನ್ನು ಲಾಗ್ ಮಾಡುವುದು
+
+### FormData API ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+
+**FormData API ಬಲವಾದ ಫಾರಂ ನಿರ್ವಹಣೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ:**
+```javascript
+// FormData ಏನನ್ನು ದಾಖಲಿಸುತ್ತದೆ ಎಂಬ ಉದಾಹರಣೆ
+const formData = new FormData(registerForm);
+
+// FormData ಸ್ವಯಂಚಾಲಿತವಾಗಿ ದಾಖಲಿಸುತ್ತದೆ:
+// {
+//   "user": "john_doe",
+//   "currency": "$",
+//   "description": "ವೈಯಕ್ತಿಕ ಖಾತೆ",
+//   "balance": "100"
+// }
+```
+
+**FormData API ಪ್ರಯೋಜನಗಳು:**
+- **ಸಂಪೂರ್ಣ ಸಂಗ್ರಹಣೆ**: ಪಠ್ಯ, ಕಡತಗಳು ಮತ್ತು ಸಂಕೀರ್ಣ ಇನ್ಪುಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡು ಎಲ್ಲಾ ಫಾರ್ಮ್ घटಕಗಳನ್ನು ಹಿಡಿಯುತ್ತದೆ
+- **ಪ್ರಕಾರ ಅರಿವು**: ವೈಯಕ್ತಿಕ ಕೋಡಿಂಗ್ ಅಗತ್ಯವಿಲ್ಲದೆ ವಿವಿಧ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ
+- **ಯೋಜಕತೆ**: ಒಂದು API ಕರೆಗೆಗಳೊಂದಿಗೆ ಕೈಯಿಂದ ಕ್ಷೇತ್ರ ಸಂಗ್ರಹಣೆಯನ್ನು ದೂರ ಮಾಡಿ
+- **ಅನುಕೂಲತೆ**: ಫಾರ್ಮ್ ರಚನೆ ಬದಲಾಯಿಸಿದಂತೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತದೆ
+
+### ಸರ್ವರ್ ಸಂವಹನ ಫಂಕ್ಷನ್ ರಚನೆ
+
+ಇದೀಗ ನವೀನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿಗಳನ್ನು ಬಳಸಿ ನಿಮ್ಮ API ಸರ್ವರ್ ಜೊತೆ ನಾನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಸಂವಹನ ಮಾಡಬಲ್ಲ ಫಂಕ್ಷನ್ ನಿರ್ಮಿಸೋಣ:
+
+```javascript
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: account
+    });
+    
+    // ಪ್ರತಿಕ್ರಿಯೆ ಯಶಸ್ವಿಯಾದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    return await response.json();
+  } catch (error) {
+    console.error('Account creation failed:', error);
+    return { error: error.message || 'Network error occurred' };
+  }
+}
+```
+
+**ಅಸಿಂಕ್ರೋನಸ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+
+```mermaid
+sequenceDiagram
+    participant JS as ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
+    participant Fetch as ಫೆಚ್ API
+    participant Server as ಬ್ಯಾಕೆಂಟ್ ಸರ್ವರ್
+    
+    JS->>Fetch: fetch() ವಿನಂತಿ
+    Fetch->>Server: HTTP POST
+    Server-->>Fetch: JSON ಪ್ರತಿಕ್ರಿಯೆ
+    Fetch-->>JS: ನಿರೀಕ್ಷಿಸಿ ಪ್ರತಿಕ್ರಿಯೆ
+    JS->>JS: ಡೇಟಾವನ್ನು ಪ್ರಕ್ರಿಯೆ ಮಾಡಿ
+```
+**ಈ ನವೀನ ಅನುಷ್ಠಾನ ಸಾಧಿಸುವುದು:**
+- **`async/await` ಬಳಸಿ** ಓದಲು ಸುಲಭವಾದ ಅಸಿಂಕ್ರೋನಸ್ ಕೋಡ್
+- **try/catch ಬ್ಲಾಕ್‌ಗಳಿಗೆ ಸಹಿತ** ಸರಿಯಾದ ದೋಷ ನಿರ್ವಹಣೆ
+- **ಡೇಟಾವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವ ಮುನ್ನ** ಪ್ರತಿಕ್ರಿಯೆಯ ಸ್ಥಿತಿಯನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- **JSON ಸಂವಹನಕ್ಕಾಗಿ** ಹೊಂದಿಕೆಗಾಗಿ ಸರಿಯಾದ ಹೆಡರ್‌ಗಳನ್ನು ಸೆಟ್ ಮಾಡುತ್ತದೆ
+- **ದೋಷ ನಿದರ್ಶನಕ್ಕಾಗಿ** ವಿವರವಾದ ಎರೆರರು ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ
+- **ಯಶಸ್ಸು ಮತ್ತು ದೋಷ ಸಂದರ್ಭಗಳಿಗೆ** ಸತತವಾದ ಡೇಟಾ ರಚನೆಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ
+
+### ನವೀನ Fetch API ಶಕ್ತಿ
+
+**ಹಳೆ ವಿಧಾನಗಳ ಮೇಲೆ Fetch API ಪ್ರಯೋಜನಗಳು:**
+
+| ವೈಶಿಷ್ಟ್ಯ | ಲಾಭ | ಅನುಷ್ಠಾನ |
+|---------|---------|----------------|
+| ಪ್ರಾಮಿಸ್ ಆಧಾರಿತ | ಸ್ವಚ್ಛ async ಕೋಡ್ | `await fetch()` |
+| ವಿನಂತಿ ಕಸ್ಟಮೈಜೇಶನ್ | ಸಂಪೂರ್ಣ HTTP ನಿಯಂತ್ರಣ | ಹೆಡರ್‌ಗಳು, ವಿಧಾನಗಳು, ದೇಹ |
+| ಪ್ರತಿಕ್ರಿಯೆ ನಿರ್ವಹಣೆ | ಬದಲಾಯಿಸಬಹುದಾದ ಡೇಟಾ ವಿಶ್ಲೇಷಣೆಯ | `.json()`, `.text()`, `.blob()` |
+| ದೋಷ ನಿರ್ವಹಣೆ | ಸಮಗ್ರ ದೋಷ ಹಿಡಿತ | Try/catch ಬ್ಲಾಕ್‌ಗಳು |
+
+> 🎥 **ಹೆಚ್ಚು ತಿಳಿದುಕೊಳ್ಳಿ**: [Async/Await Tutorial](https://youtube.com/watch?v=YwmlRkrxvkk) - ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗಾಗಿ ಅಸಿಂಕ್ರೋನಸ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ.
+
+**ಸರ್ವರ್ ಸಂವಹನದ ಪ್ರಮುಖ ಕಲ್ಪನೆಗಳು:**
+- **Async ಕ್ರಿಯೆಗಳು** ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಗಾಗಿ ನಿರ್ವಹಣಾಪರಾಗ ಒಂದರ ನಿರೀಕ್ಷೆ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ
+- **Await ಕೀವರ್ಡ್** ಅಸಿಂಕ್ರೋನಸ್ ಕೋಡ್ ಅನ್ನು ಸಿಂಕ್ರೋನಸ್ ಕೋಡ್‌ನಂತೆ ಓದಲು ಸಾಧ್ಯ ಮಾಡುತ್ತದೆ
+- **Fetch API** ನವೀನ, ಪ್ರಾಮಿಸ್ ಆಧಾರಿತ HTTP ವಿನಂತಿಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ
+- **ದೋಷ ನಿರ್ವಹಣೆ** ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ನೆಟ್‌ವರ್ಕ್ ಸಮಸ್ಯೆಗಳಿಗೆ ಸಾಸ್ವಗತವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ
+
+### ನೋಂದಣಿ ಫಂಕ್ಷನ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸುವುದು
+
+ಎಲ್ಲವೂ ಒಟ್ಟಿಗೆ ಸೇರಿಸಿ, ಉತ್ಪಾದನಾ-ಸಿದ್ಧ ನೋಂದಣಿ ಫಂಕ್ಷನ್ ರಚಿಸೋಣ:
+
+```javascript
+async function register() {
+  const registerForm = document.getElementById('registerForm');
+  const submitButton = registerForm.querySelector('button[type="submit"]');
+  
+  try {
+    // ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ತೋರಿಸಿ
+    submitButton.disabled = true;
+    submitButton.textContent = 'Creating Account...';
+    
+    // ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ಪ್ರಕ್ರಿಯೆ ಮಾಡಿ
+    const formData = new FormData(registerForm);
+    const jsonData = JSON.stringify(Object.fromEntries(formData));
+    
+    // ಸರ್ವರ್‌ಗೆ ಕಳುಹಿಸಿ
+    const result = await createAccount(jsonData);
+    
+    if (result.error) {
+      console.error('Registration failed:', result.error);
+      alert(`Registration failed: ${result.error}`);
+      return;
+    }
+    
+    console.log('Account created successfully!', result);
+    alert(`Welcome, ${result.user}! Your account has been created.`);
+    
+    // ಯಶಸ್ವಿ ನೋಂದಣಿಯ ನಂತರ ಫಾರ್ಮ್‌ನ್ನು ಮರುಹೊಂದಿಸಿ
+    registerForm.reset();
+    
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    alert('An unexpected error occurred. Please try again.');
+  } finally {
+    // ಬಟನ್ ಸ್ಥಿತಿಯನ್ನು ಮರುಸ್ಥಾಪಿಸಿ
+    submitButton.disabled = false;
+    submitButton.textContent = 'Create Account';
+  }
+}
+```
+
+**ಈ ಸುಧಾರಿತ ಅನುಷ್ಠಾನವು ಒಳಗೊಂಡಿದೆ:**
+- **ಫಾರ್ಮ್ ಸಲ್ಲಿಸುವಾಗ** ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ
+- **ನಕಲಿ ಸಲ್ಲಿಕೆಗಳನ್ನು ತಡೆಯಲು** ಸಲ್ಲಿಸುವ ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ
+- **ನಿರೀಕ್ಷಿತ ಹಾಗೂ ಅಪೇಕ್ಷಿಸದ ದೋಷಗಳನ್ನು** ಸುಗಮವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ
+- **ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಯಶಸ್ಸು ಮತ್ತು ದೋಷ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ**
+- **ಯಶಸ್ವಿ ನೋಂದಣಿಯ ನಂತರ** ಫಾರ್ಮ್ ಅನ್ನು ಮರುಹೊಂದಿಸುತ್ತದೆ
+- **ಫಲಿತಾಂಶದಿಂದ ಯಾವುದೇ ಹೊರತಾಗಿ** UI ಸ್ಥಿತಿಯನ್ನು ಮರುಸ್ಥಾಪಿಸುತ್ತದೆ
+
+### ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಪರೀಕ್ಷಿಸುವುದು
+
+**ನಿಮ್ಮ ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಉಪಕರಣಗಳನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ನೋಂದಣಿಯನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+
+1. **ಬ್ರೌಸರ್ ಕನ್‍ಸೋಲ್ ಅನ್ನು ತೆರೆಯಿರಿ (F12 → Console ಟ್ಯಾಬ್)**
+2. **ನೋಂದಣಿ ಫಾರ್ಮ್ ಅನ್ನು ಭರ್ತಿ ಮಾಡಿ**
+3. **"ಖಾತೆ ರಚಿಸಿ" ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ**
+4. **ಕನ್‍ಸೋಲ್ ಸಂದೇಶಗಳು ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಗಮನಿಸಿ**
+
+![ಬ್ರೌಸರ್ ಕನ್‍ಸೋಲ್‌ನಲ್ಲಿ ಲಾಗ್ ಸಂದೇಶವನ್ನು ತೋರಿಸುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/browser-console.efaf0b51aaaf6778.kn.png)
+
+**ನೀವು ಕಾಣಬೇಕಾದದ್ದು:**
+- **ಸಲ್ಲಿಸುವ ಬಟನ್ ಮೇಲೆ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಕಾಣಬಹುದು**
+- **ಕನ್‍ಸೋಲ್ ಲಾಗ್‌ಗಳು ಪ್ರಕ್ರಿಯೆಯ ವಿವರಗಳನ್ನು ತೋರಿಸುತ್ತವೆ**
+- **ಖಾತೆ ರಚನೆ ಯಶಸ್ವಿಯಾದಾಗ ಯಶಸ್ಸಿನ ಸಂದೇಶ ಕಾಣಿಸುತ್ತದೆ**
+- **ಯಶಸ್ವಿ ಸಲ್ಲಿಕೆಯ ನಂತರ ಫಾರ್ಮ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರುಹೊಂದಿಸುತ್ತದೆ**
+
+> 🔒 **ಸುರಕ್ಷತಾ ಪರಿಗಣನೆ**: ಪ್ರಸ್ತುತ ಡೇಟಾ HTTP ಮೂಲಕ ಸಂಚರಿಸುತ್ತಿದೆ, ಇದು ಉತ್ಪಾದನೆಗೆ ಸುರಕ್ಷಿತವಲ್ಲ. ನಿಜವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ಡೇಟಾ ಪ್ರಸರಣ ಕಾಪಾಡಲು ಪ್ರತಿಷ್ಠಿತ HTTPSನ್ನು ಯಾವಾಗಲೂ ಬಳಸಬೇಕು. [HTTPS ಸುರಕ್ಷತೆ](https://en.wikipedia.org/wiki/HTTPS) ಮತ್ತು ಅದು ಬಳಕೆದಾರ ಡೇಟಾ ರಕ್ಷಣೆಗೆ ڇو ಅಗತ್ಯ ಎನ್ನುವ ಮಾಹಿತಿಯನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ.
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಏಕೀಕರಣ**: ಅಸಿಂಕ್ರೋನಸ್ ಫಾರ್ಮ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್‌ಗಾಗಿ ನಿಮ್ಮ ಅರ್ಥಮಾಡಿಕೊಳ್ತಿದ್ದೀರಾ ಎಂದು ಪರಿಶೀಲಿಸಿ:
+- ✅ `event.preventDefault()` ಡೀಫಾಲ್ಟ್ ಫಾರ್ಮ್ ವರ್ತನೆಯನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುತ್ತದೆ?
+- ✅ FormData API ಕೈಯಿಂದ ಕ್ಷೇತ್ರ ಸಂಗ್ರಹಣೆಯಿಗಿಂತ ಮುಂತಾದ ರೀತಿಯಲ್ಲಿ ಯಾಕೆ ಹೆಚ್ಚು ಕಾರ್ಯक्षम?
+- ✅ async/await ಮಾದರಿಗಳು ಕೋಡ್ ಓದಲು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತದೆ?
+- ✅ ಬಳಕೆದಾರ ಅನುಭವದಲ್ಲಿ ದೋಷ ನಿರ್ವಹಣೆಯ ಪಾತ್ರವೇನು?
+
+**ಸಿಸ್ಟಮ್ ವಾಸ್ತುಶಿಲ್ಪ**: ನಿಮ್ಮ ಫಾರ್ಮ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಪ್ರದರ್ಶಿಸುವುದು:
+- **ಈವೆಂಟ್ ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳಿಗೆ ಪುಟ ರಿಲೋಡ್ ಇಲ್ಲದೆ ಸ್ಪಂದನೆ
+- **ಅಸಿಂಕ್ರೋನಸ್ ಸಂವಹನ**: ಸರ್ವರ್ ಕೇಳಿಕೆಗಳು ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಅಡೆತಡೆ ಮಾಡದು
+- **ದೋಷ ನಿರ್ವಹಣೆ**: ನೆಟ್‌ವರ್ಕ್ ವಿಫಲತೆಗಳಿಗೆ ಸಾಸ್ವಗತವಾಗಿ ಕಾಂಡುವುದು
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಸೂಕ್ತವಾಗಿ UI ನಲ್ಲಿ ಪ್ರತಿಬಿಂಬಿಸುವುದು
+- **ಗ್ರಹಣೀಯ ಸುಧಾರಣೆ**: ಮೂಲ ಕಾರ್ಯಕ್ಷಮತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಲಪಡಿಸುವುದು
+
+**ವೃತ್ತಿಪರ ಮಾದರಿ**: ನೀವು ಅನುಷ್ಠಾನಗೊಳಿಸಿದ್ದೀರಿ:
+- **ಏಕ ಜವಾಬ್ದಾರಿ**: ಫಂಕ್ಷನ್‌ಗಳು ಸ್ಪಷ್ಟ, ಗಮನಕೊಟ್ಟ ಉದ್ದೇಶವನ್ನು ಒದಗಿಸುತ್ತವೆ
+- **ದೋಷ ಗಡಿಪಥಗಳು**: Try/catch ಬ್ಲಾಕ್‌ಗಳು ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್‌ಗಳನ್ನು ತಡೆಯುತ್ತವೆ
+- **ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ**: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಯಶಸ್ಸು/ದೋಷ ಸಂದೇಶಗಳು
+- **ಡೇಟಾ ಪರಿವರ್ತನೆ**: FormData ನಿಂದ JSONಗೆ ಸರ್ವರ್ ಸಂವಹನಕ್ಕಾಗಿ
+
+## ವ್ಯಾಪಕ ಫಾರ್ಮ್ ಮಾನ್ಯತೆ
+
+ಫಾರ್ಮ್ ಮಾನ್ಯತೆ ಸಲ್ಲಿಕೆಯ ನಂತರ ದೋಷಗಳನ್ನು ಕಂಡುಹಿಡಿಯುವ ಅಸಹ್ಯ ಅನುಭವವನ್ನು ತಡೆಹಿಡಿಯುತ್ತದೆ. ಅಂತರರಾಷ್ಟ್ರೀಯ ಸ್ಪೇಸ್ ಸ್ಟೇಷನ್ ಮೇಲೆ ಇರುವ ಅನೇಕ ಬ್ಯಾಕಪ್ ವ್ಯವಸ್ಥೆಗಳು ಹಾಗೆಯೇ, ಪರಿಣಾಮಕಾರಿ ಮಾನ್ಯತೆಯು ಅನೇಕ ಸುರಕ್ಷತಾ ಪರಿಶೀಲನೆ ಪದರಗಳನ್ನು ಬಳಸುತ್ತದೆ.
+
+ಉತ್ತಮ ವಿಧಾನವು ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಗಾಗಿ ಬ್ರೌಸರ್ ಮಟ್ಟದ ಮಾನ್ಯತೆಯನ್ನು, ಸುಧಾರಿತ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾನ್ಯತೆಯನ್ನು, ಮತ್ತು ಭದ್ರತೆ ಮತ್ತು ಡೇಟಾ ಸಮಗ್ರತೆಗಾಗಿ ಸರ್ವರ್-ಮಟ್ಟದ ಮಾನ್ಯತೆಯನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ. ಈ ಬ್ಯಾಕಪ್ ಬಳಕೆದಾರ ತೃಪ್ತಿಯನ್ನೂ ಮತ್ತು ವ್ಯವಸ್ಥೆಯ ರಕ್ಷಣೆಯನ್ನೂ ಖಾತ್ರಿ ಮಾಡುತ್ತದೆ.
+
+### ಮಾನ್ಯತಾ ಪದರಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+
+```mermaid
+graph TD
+    A[ಬಳಕೆದಾರ ಇನ್ಪುಟ್] --> B[HTML5 ಪರಿಶೀಲನೆ]
+    B --> C[ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಶೀಲನೆ]
+    C --> D[ಗ್ರಾಹಕ-ಐದು ಪೂರ್ಣ]
+    D --> E[ಸೆರ್ವರ್-ಸಭೆ ಪರಿಶೀಲನೆ]
+    E --> F[ಡೇಟಾ ಸಂಗ್ರಹಣೆ]
+    
+    B -->|ಅಮಾನ್ಯ| G[ಬ್ರೌಸರ್ ದೋಷ ಸಂದೇಶ]
+    C -->|ಅಮಾನ್ಯ| H[ಕಸ್ಟಮ್ ದೋಷ ಪ್ರದರ್ಶನ]
+    E -->|ಅಮಾನ್ಯ| I[ಸೆರ್ವರ್ ದೋಷ ಪ್ರತಿಕ್ರಿಯೆ]
+```
+**ಬಹುನಿರ್ವಾಹಕ ಮಾನ್ಯತಾ ತಂತ್ರ:**
+- **HTML5 ಮಾನ್ಯತೆ**: ತ್ವರಿತ ಬ್ರೌಸರ್ ಆಧಾರಿತ ಪರಿಶೀಲನೆಗಳು
+- **ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾನ್ಯತೆ**: ಸ್ವಂತ ತರ್ಕ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವ
+- **ಸರ್ವರ್-ಮಟ್ಟದ ಮಾನ್ಯತೆ**: ಅಂತಿಮ ಭದ್ರತೆ ಮತ್ತು ಡೇಟಾ ಸಮಗ್ರತೆ ಪರಿಶೀಲನೆಗಳು
+- **ಗ್ರಹಣೀಯ ಸುಧಾರಣೆ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯಗೊಂಡರೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
+
+### HTML5 ಮಾನ್ಯತಾ ಗುಣಲಕ್ಷಣೆಗಳು
+
+**ನಿಮ್ಮ ಬಳಕೆಗೆ ನವೀನ ಮಾನ್ಯತಾ ಸಾಧನಗಳು:**
+
+| ಗುಣಲಕ್ಷಣೆ | ಉದ್ದೇಶ | ಉದಾಹರಣೆಯ ಬಳಕೆ | ಬ್ರೌಸರ್ ವರ್ತನೆ |
+|-----------|---------|---------------|------------------|
+| `required` | ಅಗತ್ಯ ಕ್ಷೇತ್ರಗಳು | `<input required>` | ಖಾಲಿ ಸಲ್ಲಿಕೆಯನ್ನು ತಡೆಹಿಡಿಯುತ್ತದೆ |
+| `minlength`/`maxlength` | ಪಠ್ಯದ ಉದ್ದ ಮಿತಿಗಳು | `<input maxlength="20">` | ಅಕ್ಷರ ಮಿತಿಗಳನ್ನು ಜಾರಿಗೆ ಸೇರಿಸುತ್ತದೆ |
+| `min`/`max` | ಸಂಖ್ಯಾ ಶ್ರೇಣಿಗಳು | `<input min="0" max="1000">` | ಸಂಖ್ಯೆಯ ಮಿತಿಗಳನ್ನು ಮಾನ್ಯಗೊಳಿಸುತ್ತದೆ |
+| `pattern` | ಕಸ್ಟಮ್ regex ನಿಯಮಗಳು | `<input pattern="[A-Za-z]+">` | ವಿಶೇಷವಾದ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ |
+| `type` | ಡೇಟಾ ಪ್ರಕಾರ ಮಾನ್ಯತೆ | `<input type="email">` | ಫಾರ್ಮ್ಯಾಟ್-ವಿಶಿಷ್ಟ ಮಾನ್ಯತೆ |
+
+### CSS ಮಾನ್ಯತಾ ಶೈಲಿ
+
+**ಮಾನ್ಯತಾ ಸ್ಥಿತಿಗಳ ಮನೋರಂಜಕ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನಿರ್ಮಿಸಿ:**
+
+```css
+/* Valid input styling */
+input:valid {
+  border-color: #28a745;
+  background-color: #f8fff9;
+}
+
+/* Invalid input styling */
+input:invalid {
+  border-color: #dc3545;
+  background-color: #fff5f5;
+}
+
+/* Focus states for better accessibility */
+input:focus:valid {
+  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+}
+
+input:focus:invalid {
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+```
+
+**ಈ ದೃಶ್ಯ ಸೂಚನೆಗಳ ಸಾಧನೆ:**
+- **ಹಸಿರು ಗಡಿ**: ಯಶಸ್ವಿ ಮಾನ್ಯತೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ, ಮಿಷನ್ ಕಂಟ್ರೋಲಿನ ಹಸಿರು ಬೆಳಕುಗಳಂತೆ
+- **ಕೆಂಪು ಗಡಿ**: ಗಮನಕೊಡುವಂತಹ ಮಾನ್ಯತಾ ದೋಷಗಳನ್ನು ಸೂಚಿಸುತ್ತದೆ
+- **ಫೋಕ್ಸು ಹೈಲೈಟ್‌ಗಳು**: ಪ್ರಸ್ತುತ ಇನ್ಪುಟ್ ಸ್ಥಳಕ್ಕೆ ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಸಂಧರ್ಭ ನೀಡುತ್ತವೆ
+- **ಸ್ಥಿರವಾಗಿರುವ ಶೈಲಿ**: ಬಳಕೆದಾರರು ಕಲಿಯಬಲ್ಲ ನಿರೀಕ್ಷಿತ ಇಂಟರ್ಫೇಸ್ ಮಾದರಿಗಳನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ
+
+> 💡 **ಪ್ರೊ ಟಿಪ್**: ಬಳಕೆದಾರರು ಟೈಪ್ ಮಾಡುತ್ತಿರುವಾಗ ತಕ್ಷಣದ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡಲು `:valid` ಮತ್ತು `:invalid` CSS ಪುಸಿಯೋ-ವರ್ಗಗಳನ್ನು ಬಳಸಿ ಸ್ಪಂದನಶೀಲ ಮತ್ತು ಸಹಾಯಕ ಇಂಟರ್ಫೇಸ್ ರಚಿಸಿ.
+
+### ವ್ಯಾಪಕ ಮಾನ್ಯತೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವುದು
+
+ನಿಮ್ಮ ನೋಂದಣಿ ಫಾರ್ಮ್ ಅನ್ನು ಬಲವಾದ ಮಾನ್ಯತೆಯೊಂದಿಗೆ ಸುಧಾರಿಸಿ, ಅದರಿಂದ ಉತ್ಕೃಷ್ಟ ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ಡೇಟಾ ಗುಣಮಟ್ಟ ನೀಡುತ್ತದೆ:
+
+```html
+<form id="registerForm" method="POST" novalidate>
+  <div class="form-group">
+    <label for="user">Username <span class="required">*</span></label>
+    <input id="user" name="user" type="text" required 
+           minlength="3" maxlength="20" 
+           pattern="[a-zA-Z0-9_]+" 
+           autocomplete="username"
+           title="Username must be 3-20 characters, letters, numbers, and underscores only">
+    <small class="form-text">Choose a unique username (3-20 characters)</small>
+  </div>
+  
+  <div class="form-group">
+    <label for="currency">Currency <span class="required">*</span></label>
+    <input id="currency" name="currency" type="text" required 
+           value="$" maxlength="3" 
+           pattern="[A-Z$€£¥₹]+" 
+           title="Enter a valid currency symbol or code">
+    <small class="form-text">Currency symbol (e.g., $, €, £)</small>
+  </div>
+  
+  <div class="form-group">
+    <label for="description">Account Description</label>
+    <input id="description" name="description" type="text" 
+           maxlength="100" 
+           placeholder="Personal savings, checking, etc.">
+    <small class="form-text">Optional description (up to 100 characters)</small>
+  </div>
+  
+  <div class="form-group">
+    <label for="balance">Starting Balance</label>
+    <input id="balance" name="balance" type="number" 
+           value="0" min="0" step="0.01" 
+           title="Enter a positive number for your starting balance">
+    <small class="form-text">Initial account balance (minimum $0.00)</small>
+  </div>
+  
+  <button type="submit">Create Account</button>
+</form>
+```
+
+**ಸುಧಾರಿತ ಮಾನ್ಯತೆಯ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿಕೆ:**
+- **ಅಗತ್ಯ ಕ್ಷೇತ್ರ ಸೂಚನೆಗಳನ್ನು** ಸಹಿತವಾಗಿ ಸಂಯೋಜಿಸುತ್ತದೆ
+- **ಫಾರ್ಮ್ಯಾಟ್ ಮಾನ್ಯತೆಗಾಗಿ** `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. **ಋಣಾತ್ಮಕ ಬ್ಯಾಲೆನ್ಸ್ ಮೊತ್ತ ನಮೂದಿಸಿ**
+
+![ಫಾರ್ಮ್ ಸಲ್ಲಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಏರುವ ಮಾನ್ಯತಾ ದೋಷವನ್ನು ತೋರಿಸುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/validation-error.8bd23e98d416c22f.kn.png)
+
+**ನೀವು ಗಮನಿಸುವುದು:**
+- **ಬ್ರೌಸರ್ ಮೂಲ ಮಾನ್ಯತಾ ಸಂದೇಶಗಳನ್ನು ತೋರಿಸುತ್ತದೆ**
+- **`:valid` ಮತ್ತು `:invalid` ಸ್ಥಿತಿಗಳಿಗನುಗುಣವಾಗಿ ಶೈಲಿ ಬದಲಾಗುತ್ತದೆ**
+- **ಎಲ್ಲಾ ಮಾನ್ಯತೆಗಳು ಪಾಸ್ ಆಗುವವರೆಗೆ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ತಡೆಯಲಾಗುತ್ತದೆ**
+- **ಮೊದಲ ದೋಷಗೊಳಗೊಂಡ ಕ್ಷೇತ್ರಕ್ಕೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಫೋಕ್ಸು ಮರುಹೊಂದುತ್ತದೆ**
+
+### ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮತ್ತು ಸರ್ವರ್-ಸೈಡ್ ಮಾನ್ಯತೆ
+
+```mermaid
+graph LR
+    A[ಕ್ಲೈಂಟ್-ಪಕ್ಷದ ಮಾನ್ಯತೆ] --> B[ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ]
+    A --> C[ಮೆಚ್ಚುಗೆಯ ಉತ್ಫಲನುಭವ]
+    A --> D[ಸರ್ವರ್ ಭಾರವನ್ನು ಕಡಿಮೆಮಾಡಿದೆ]
+    
+    E[ಸರ್ವರ್-ಪಕ್ಷದ ಮಾನ್ಯತೆ] --> F[ಭದ್ರತೆ]
+    E --> G[ಡೇಟಾ ಒಪ್ಪಂದತೆ]
+    E --> H[ವ್ಯಾಪಾರ ನಿಯಮಗಳು]
+    
+    A -.-> I[ಎರಡೂ ಅಗತ್ಯವಿದೆ]
+    E -.-> I
+```
+**ನೀವು ಎರಡೂ ಪದರಗಳನ್ನು ಏಕೆ ಬೇಕು:**
+- **ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮಾನ್ಯತೆ**: ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸಿ ಬಳಕೆದಾರ ಅನುಭವ ಸುಧಾರಣೆಯು
+- **ಸರ್ವರ್-ಸೈಡ್ ಮಾನ್ಯತೆ**: ಭದ್ರತೆ ಖಚಿತಪಡಿಸಿ ಮತ್ತು ಸಂಕೀರ್ಣ ವ್ಯವಹಾರ ನಿಯಮಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ
+- **ಸಂಯೋಜಿತ ವಿಧಾನ**: ಬಲವಾದ, ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಮತ್ತು ಭದ್ರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ
+- **ಗ್ರಹಣೀಯ ಸುಧಾರಣೆ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯ ಆಗಿರುವಾಗಲೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
+
+> 🛡️ **ಭದ್ರತಾ ನೆನಪಿನಂತೆ**: ಮಾತ್ರ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮಾನ್ಯತೆಯನ್ನು ನಂಬಬೇಡಿ! ದುರ್ಬಲ ಬಳಕೆದಾರರು ಕ್ಲೈಂಟ್-ಪರಿಶೀಲನೆಗಳನ್ನು ತಪ್ಪಿಸುವ ಸಾಧ್ಯತೆ ಇರುತ್ತದೆ, ಹಾಗಾಗಿ ಭದ್ರತೆ ಮತ್ತು ಡೇಟಾ ಸಮಗ್ರತೆಗೆ ಸರ್ವರ್-ಪರಿಶೀಲನೆ ಅಗತ್ಯ.
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು**
+- [ ] ವಾಲಿಡೇಶನ್ ಸಂದೇಶಗಳನ್ನು ನೋಡಲು ಅಮಾನ್ಯ ಡೇಟಾ ಬಳಸಿ ನಿಮ್ಮ ಫಾರ್ಮ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಿ
+- [ ] ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ ಫಾರ್ಮ್ ಸಲ್ಲಿಸುವುದನ್ನು ಪ್ರಯತ್ನಿಸಿ ಮತ್ತು HTML5 ಮಾನ್ಯತೆಯನ್ನು ನೋಡಿ
+- [ ] ಬ್ರೌಸರ್ ಡೆವ್‌ಟೂಲ್ಗಳನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಸರ್ವರ್‌ಗೆ ಕಳುಹಿಸಲಾಗುತ್ತಿರುವ ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ಪರಿಶೀಲಿಸಿ
+- [ ] ವಿಭಿನ್ನ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳನ್ನು ಪ್ರಯೋಗಿಸಿ ಮೊಬೈಲ್ ಕೀಬೋರ್ಡ್ ಬದಲೆಗಳನ್ನು ಗಮನಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ಸಾಧಿಸಬಹುದಾದುದು**
+- [ ] ಪಾಠೋತ್ತರ ಕ್ವಿಜ್ ಮುಗಿಸಿ ಮತ್ತು ಫಾರ್ಮ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ನೈಜ-ಸಮಯ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ವ್ಯಾಪಕ ಮಾನ್ಯತಾ ಸವಾಲು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ವೃತ್ತಿಪರ ನೋಟದ ಫಾರ್ಮ್ಗಳಿಗೆ CSS ಶೈಲಿಯನ್ನು ಸೇರಿಸಿ
+- [ ] ಪ್ರತಿಯೊಬ್ಬ ಬಳಕೆದಾರನಾಮಕ್ಕಾಗಿಯೂ ದ್ವಿಪರ್ಯಾಯ ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಸರ್ವರ್ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ರಚಿಸಿ
+- [ ] ಪಾಸ್‌ವರ್ಡ್ ದೃಢೀಕರಣ ಕ್ಷೇತ್ರಗಳನ್ನು ಹೊಂದಿಸಿ ಮತ್ತು ಹೊಂದಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರ ಮಟ್ಟದ ಫಾರ್ಮ್ ಪರಿಣತಿ ಪ್ರಯಾಣ**
+- [ ] ಸುಧಾರಿತ ಫಾರ್ಮ್ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಪ್ರೊಫೈಲ್ ಚಿತ್ರಗಳು ಅಥವಾ ದಾಖಲೆಗಳಿಗಾಗಿ ಫೈಲ್ ಅಪ್‌ಲೋಡ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಪ್ರಗತಿಯ ಸೂಚಕಗಳು ಮತ್ತು ಸ್ಥಿತಿ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಬಹು ಹಂತದ ಫಾರ್ಮ್‌ಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಬಳಕೆದಾರ ಆಯ್ಕೆಯ ಆಧಾರಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಬಲ್ಲ ಡೈನಾಮಿಕ್ ಫಾರ್ಮ್‌ಗಳನ್ನು ಸೃಷ್ಟಿಸಿ
+- [ ] ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಫಾರ್ಮ್ ಆಟೋಸೇವ್ ಮತ್ತು ಪುನರುಜ್ಜೀವನವನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ಇಮೇಲ್ ಪರಿಶೀಲನೆ ಮತ್ತು ಫೋನ್ ನಂಬರಿನ ಮಾದರೀಕರಣದಂತಹ ಸುಧಾರಿತ ಮಾನ್ಯತೆಯನ್ನು ಸೇರಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ಮಟ್ಟದ ಫ್ರಂಟ್‌ಎಂಡ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಪರಿಣತಿ**
+- [ ] ಶರ್ತಾತ್ಮಕ ತರ್ಕ ಮತ್ತು ಕಾರ್ಯಪಟುಗಳೊಂದಿಗೆ ಐತಿಹಾಸಿಕ ಫಾರ್ಮ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ವೇಗದ ಅಭಿವೃದ್ಧಿಗಾಗಿ ಫಾರ್ಮ್ ಗ್ರಂಥಾಲಯಗಳು ಮತ್ತು ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳನ್ನು ಕಲಿಯಿರಿ
+- [ ] ಪ್ರವೇಶಕ್ಷಮತೆ ಮಾರ್ಗಸೂಚಿಗಳು ಮತ್ತು ಸಮಾವೇಶಾತ್ಮಕ ವಿನ್ಯಾಸ ತತ್ವಗಳನ್ನು ನಿಭಾಯಿಸಿ
+- [ ] ಜಾಗತಿಕ ಫಾರ್ಮ್‌ಗಳಿಗಾಗಿ ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣ ಮತ್ತು ಲೋಕಲೀಕರಣವನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ಮರುಬಳಕೆಗೆ ಸಾಧ್ಯವಾದ ಫಾರ್ಮ್ ಘಟಕ ಗ್ರಂಥಾಲಯಗಳು ಮತ್ತು ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಫಾರ್ಮ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಿ
+
+## 🎯 ನಿಮ್ಮ ಫಾರ್ಮ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಪರಿಣತಿ ಟೈಮ್‌ಲೈನ್
+
+```mermaid
+timeline
+    title ಫಾರ್ಮ್ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವ ಕಲಿಕೆ ಪ್ರಗತಿ
+    
+    section HTML ಆಧಾರ (15 ನಿಮಿಷಗಳು)
+        ಅರ್ಥಪೂರ್ಣ ಫಾರ್ಮ್ಗಳು: ಫಾರ್ಮ್ ಅಂಶಗಳು
+                      : ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳು
+                      : ಲೇಬಲ್ಗಳು ಮತ್ತು ಪ್ರವೇಶযোগ্যತೆ
+                      : ಪ್ರಗತಿಶೀಲ ಸುಧಾರಣೆ
+        
+    section ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಏಕರೂಪತೆ (25 ನಿಮಿಷಗಳು)
+        ಘಟನೆ ನಿರ್ವಹಣೆ: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ
+                      : ಡೇಟಾ ಸಂಗ್ರಹಣೆ
+                      : AJAX ಸಂವಹನ
+                      : ಅಸಿಂಕ್/ಅವೈಟ್ ಮಾದರಿಗಳು
+        
+    section ಮಾನ್ಯತೆ ವ್ಯವಸ್ಥೆಗಳು (35 ನಿಮಿಷಗಳು)
+        ಬಹು-ಪಟ್ಟಣದ ಭದ್ರತೆ: HTML5 ಮಾನ್ಯತೆ
+                            : ಕ್ಲೈಂಟ್-ಸೈಡ್ ಲಾಜಿಕ್
+                            : ಸರ್ವರ್-ಸೈಡ್ ಪರಿಶೀಲನೆ
+                            : ದೋಷ ನಿರ್ವಹಣೆ
+        
+    section ಬಳಕೆದಾರ ಅನುಭವ (45 ನಿಮಿಷಗಳು)
+        ಇಂಟರ್ಫೇಸ್ ಹ್ಯಾಯಗೆ: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು
+                        : ಯಶಸ್ಸಿನ ಸಂದೇಶಗಳು
+                        : ದೋಷ ಮರುಪಡೆಯುವಿಕೆ
+                        : ಪ್ರವೇಶಗೊಳಿಸುವಿಕೆ ವೈಶಿಷ್ಟ್ಯಗಳು
+        
+    section ಸುಧರಿಸಿದ ಮಾದರಿಗಳು (1 ವಾರ)
+        ವೃತ್ತಿಪರ ಫಾರ್ಮ್ಗಳು: ಡೈನಾಮಿಕ್ ಮಾನ್ಯತೆ
+                          : ಬಹು-ಹಂತ ಕಾರ್ಯವಿಹಿತಿಗಳು
+                          : ಫೈಲ್ ಅಪ್‌ಲೋಡ್ಗಳು
+                          : ನೈಜ-ಸಮಯ ಪ್ರತಿಕ್ರಿಯೆ
+        
+    section ಎಂಟರ್ಪ್ರೈಸ್ ಕೌಶಲ್ಯಗಳು (1 ತಿಂಗಳು)
+        ಉತ್ಪಾದನಾ ಅನ್ವಯಿಕೆಗಳು: ಫಾರ್ಮ್ ಗ್ರಂಥಾಲಯಗಳು
+                               : ಪರೀಕ್ಷಾ ತಂತ್ರಗಳು
+                               : ಕಾರ್ಯಕ್ಷಮತೆ ಸೂಕ್ತೀಕರಣ
+                               : ಭದ್ರತಾ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
+```
+### 🛠️ ನಿಮ್ಮ ಫಾರ್ಮ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಟೂಲ್‌ಕಿಟ್ ಸಾರಾಂಶ
+
+ಈ ಪಾಠವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ ನೀವು ಈಗ ಎರಡನ್ನು ನಿಭಾಯಿಸುತ್ತೀರಿ:
+- **HTML5 ಫಾರ್ಮ್‌ಗಳು**: ಸೆಮ್ಯಾಂಟಿಕ್ ರಚನೆ, ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳು ಮತ್ತು ಪ್ರವೇಶಕ್ಷಮತೆ ವೈಶಿಷ್ಟ್ಯಗಳು
+- **ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಾರ್ಮ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್**: ಈವೆಂಟ್ ನಿರ್ವಹಣೆ, ಡೇಟಾ ಸಂಗ್ರಹಣೆ ಮತ್ತು AJAX ಸಂವಹನ
+- **ಮಾನ್ಯತಾ ವಾಸ್ತುಶಿಲ್ಪ**: ಭದ್ರತೆ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಬಹುನಿರ್ವಾಹಕ ಮಾನ್ಯತೆ
+- **ಅಸಿಂಕ್ರೋನಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ನವೀನ fetch API ಮತ್ತು async/await ಪ್ಯಾಟರ್ನ್‌ಗಳು
+- **ದೋಷ ನಿರ್ವಹಣೆ**: ಸಮಗ್ರ ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳು
+- **ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ**: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು, ಯಶಸ್ಸು ಸಂದೇಶಗಳು ಮತ್ತು ದೋಷ ಪುನರುಜ್ಜೀವನ
+- **ಗ್ರಹಣೀಯ ಸುಧಾರಣೆ**: ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಮರ್ಥ್ಯಗಳಲ್ಲಿ ಕೆಲಸಮಾಡುವ ಫಾರ್ಮ್‌ಗಳು
+
+**ವಾಸ್ತವಿಕ ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು**: ನಿಮ್ಮ ಫಾರ್ಮ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಕೌಶಲ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ:
+- **ಇ-ಕಾಮರ್ಸ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು**: ಚೆಕ್ಔಟ್ ಪ್ರಕ್ರಿಯೆಗಳು, ಖಾತೆ ನೋಂದಣಿ ಮತ್ತು ಪಾವತಿ ಫಾರ್ಮ್‌ಗಳು
+- **ಉದ್ಯಮ ಸ್ಟೊರ್‌ಗಳು**: ಡೇಟಾ ಎನ್ಟ್ರಿ ವ್ಯವಸ್ಥೆಗಳು, ವರದಿ ಇಂಟರ್ಫೇಸ್‌ಗಳು ಮತ್ತು ಕಾರ್ಯಪ್ರವಾಹ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು
+- **ವಿಷಯ ನಿರ್ವಹಣೆ**: ಪ್ರಕಟಣೆ ವೇದಿಕೆಗಳು, ಬಳಕೆದಾರ ರಚಿಸಿದ ವಿಷಯ ಮತ್ತು ಆಡಳಿತಾತ್ಮಕ ಇಂಟರ್ಫೇಸ್‌ಗಳು
+- **ಆರ್ಥಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು**: ಬ್ಯಾಂಕಿಂಗ್ ಇಂಟರ್ಫೇಸ್‌ಗಳು, ಹೂಡಿಕೆ ವೇದಿಕೆಗಳು ಮತ್ತು ವಹಿವಾಟು ವ್ಯವಸ್ಥೆಗಳು
+- **ಆರೋಗ್ಯ ಸೇவை ವ್ಯವಸ್ಥೆಗಳು**: ರೋಗಿ ಪೋರ್ಟಲ್‌ಗಳು, ನಿಯೋಜನೆ ಶೆಡ್ಯೂಲಿಂಗ್ ಮತ್ತು ವೈದ್ಯಕೀಯ ದಾಖಲೆ ಫಾರ್ಮ್‌ಗಳು
+- **ಶೈಕ್ಷಣಿಕ ವೇದಿಕೆಗಳು**: ಕೋರ್ಸ್ ನೋಂದಣಿ, ಮೌಲ್ಯಮಾಪನ ಸಾಧನಗಳು ಮತ್ತು ಕಲಿಕಾ ನಿರ್ವಹಣೆ
+
+**ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು ಪಡೆದೀರಿ**: ನೀವು ಈಗ:
+- **ಪ್ರವೇಶಿಸಬಹುದಾದ** ಫಾರ್ಮ್‌ಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಬಹುದು, ವಿಶೇಷ ಅಗತ್ಯಗಳ ಬಳಕೆದಾರರಿಗೂ ಅನ್ವಯಿಸುತ್ತದೆ
+- **ಭದ್ರತೆ ಮತ್ತು ಡೇಟಾ ಧ್ವಂಶ ರಹಿತವಾಗಿ ತಡೆಯುವ** ಭದ್ರ ಫಾರ್ಮ್ ಮಾನ್ಯತೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಬಹುದು
+- **ದೃಷ್ಟಾಂತ ಫೀಡ್‌ಬ್ಯಾಕ್ ಮತ್ತು ಮಾರ್ಗದರ್ಶನ ನೀಡುವ ಸ್ಪಂದನಶೀಲ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್** ರಚಿಸಬಹುದು
+- **ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಉಪಕರಣಗಳು ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ವಿಶ್ಲೇಷಣೆ ಬಳಸಿಕೋ ಫಾರ್ಮ್ ಸಂವಹನ ಸಮಸ್ಯೆಗಳನ್ನು ಡಿಬಗ್ ಮಾಡಬಹುದು
+- **ದಕ್ಷ ಡೇಟಾ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಮಾನ್ಯತಾ ತಂತ್ರಗಳ ಮೂಲಕ ಫಾರ್ಮ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು
+
+**ಫ್ರಂಟ್‌ಎಂಡ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಕಲ್ಪನೆಗಳು ನಿಭಾಯಿಸಲಾಗಿದೆ**:
+- **ಈವೆಂಟ್ ಚಾಲಿತ ವಾಸ್ತುಶಿಲ್ಪ**: ಬಳಕೆದಾರ ಕ್ರಿಯೆ ನಿರ್ವಹಣೆ ಮತ್ತು ಸ್ಪಂದನೆ ವ್ಯವಸ್ಥೆಗಳು
+- **ಅಸಿಂಕ್ರೋನಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಅಡೆತಡೆ ಇಲ್ಲದ ಸರ್ವರ್ ಸಂವಹನ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆ
+- **ಡೇಟಾ ಮಾನ್ಯತೆ**: ಕ್ಲೈಂಟ್ ಮತ್ತು ಸರ್ವರ್-ಮಟ್ಟದ ಭದ್ರತೆ ಮತ್ತು ಸಮಗ್ರತೆ ಪರಿಶೀಲನೆ
+- **ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ**: ಬಳಕೆದಾರರನ್ನು ಯಶಸ್ಸಿನತ್ತ ಮುನ್ನಡೆಯುವ ಬೌದ್ಧಿಕ ಇಂಟರ್ಫೇಸ್
+- **ಪ್ರವೇಶಕ್ಷಮತೆ ಎಂಜಿನಿಯರಿಂಗ್**: ವಿಭಿನ್ನ ಬಳಕೆದಾರ ಅಗತ್ಯಗಳಿಗೆ ಹೊಂದುವ ಸಮಾವೇಶಾತ್ಮಕ ವಿನ್ಯಾಸ
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು ಆಧುನಿಕ ಫಾರ್ಮ್ ಗ್ರಂಥಾಲಯಗಳನ್ನು ಅನ್ವೇಷಿಸಬಹುದು, ಸಂಕೀರ್ಣ ಮಾನ್ಯತಾ ನಿಯಮಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಬಹುದು, ಅಥವಾ ಉದ್ಯಮಮಟ್ಟದ ಡೇಟಾ ಸಂಗ್ರಹಣಾ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು!
+
+🌟 **ಸಾಧನೆಯ ಸ್ವೀಕೃತಿ**: ನೀವು ವೃತ್ತಿಪರ ಮಾನ್ಯತೆ, ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವ ಮಾದರಿಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಫಾರ್ಮ್ ಹೊಂದಾಣಿಕೆ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಿ!
+
+---
+
+
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಈಗ ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:
+
+**ವಿವರಣೆ:** ವ್ಯಾಪಕ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮಾನ್ಯತೆ ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ನೋಂದಣಿ ಫಾರ್ಮ್ ಅನ್ನು ಸುಧಾರಿಸಿ. ಈ ಸವಾಲು ಫಾರ್ಮ್ ಮಾನ್ಯತೆ, ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಇಂಟೆರಾಕ್ಟಿವ್ ಪ್ರತಿಕ್ರಿಯೆಯಲ್ಲಿ ಉತ್ತಮತೆ ತರಲಿದ್ದಾರೆ.
+**ಪ್ರಾಂಪ್ಟ್:** ನೋಂದಣಿ ಫಾರ್ಮ್‌ಗೆ ಪೂರ್ಣ ಫಲಿತಾಂಶದ ವ್ಯಾಲಿಡೇಶನ್ ಸಿಸ್ಟಮ್ ರಚಿಸಿ, ಇದರಲ್ಲಿ ಮುಂದೆ ಕರಾವಳಿ ಪಾಕ್ಷಿಕ ವ್ಯಾಲಿಡೇಶನ್ ಪ್ರತಿಕ್ರಿಯೆ ಪ್ರತಿಯೊಂದು ಕ್ಷೇತ್ರಕ್ಕಾಗಿ ಯುಸರ್ ಟೈಪ್ ಮಾಡುವಾಗ, 2) ಕಸ್ಟಮ್ ವ್ಯಾಲಿಡೇಶನ್ ಸಂದೇಶಗಳು ಪ್ರತಿಯೊಂದು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಕೆಳಗೆ ತೋರಿಸಲಾಗುತ್ತದೆ, 3) ಪಾಸ್ವರ್ಡ್ ದೃಢೀಕರಣ ಕ್ಷೇತ್ರವು ಹೊಂದಾಣಿಕೆಯ ವ್ಯಾಲಿಡೇಶನ್ಗೆ, 4) ದೃಶ್ಯ ಸೂಚಕಗಳು (ಹಸಿರು ಚೆಕ್ಮಾರ್ಕ್ಗಳು ಮಾನ್ಯ ಕ್ಷೇತ್ರಗಳಿಗೆ ಮತ್ತು ಕೆಂಪು ಎಚ್ಚರಿಕೆಗಳು ಅಮಾನ್ಯಗಳಿಗೆ), 5) ಎಲ್ಲಾ ವ್ಯಾಲಿಡೇಶನ್ಗಳು ಉತ್ತೀರ್ಣರಾದಾಗ ಮಾತ್ರ ಸಬ್ಮಿಟ್ ಬಟನ್ ಸಕ್ರಿಯವಾಗುತ್ತದೆ. HTML5 ವ್ಯಾಲಿಡೇಶನ್ ಗುಣೆಗಳನ್ನು, CSS ಅನ್ನು ವ್ಯಾಲಿಡೇಶನ್ ಸ್ಥಿತಿಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು, ಮತ್ತು ಇಂಟರಾಕ್ಟಿವ್ ವರ್ತನೆ ಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.
+
+[ಎಜೆಂಟ್ ಮೋಡ್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚುಗೂ ತಿಳಿದುಕೊಳ್ಳಿ.
+
+## 🚀 ಚಾಲೆಂಜ್
+
+ಯುಸರ್ ಈಗಾಗಲೇ ಇದ್ದರೆ HTML ನಲ್ಲಿ ದೋಷ ಸಂದೇಶ ತೋರಿಸಿ.
+
+ಕೊನೆಗಿನ ಲಾಗಿನ್ ಪುಟವು ಕೆಲವು ಸ್ಟೈಲಿಂಗ್ ನಂತರ ಹೇಗಿರಬಹುದು ಎಂಬ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
+
+![CSS ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಿದ ನಂತರ ಲಾಗಿನ್ ಪುಟದ ಸ್ಕ್ರೀನ್ ಶಾಟ್](../../../../translated_images/result.96ef01f607bf856a.kn.png)
+
+## ಪೋಷ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್
+
+[ಪೋಸ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/44)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+ಡೆವಲಪರ್ಸ್ ತಮ್ಮ ಫಾರ್ಮ್ ನಿರ್ಮಾಣ ಪ್ರಯತ್ನಗಳಲ್ಲಿ ಬಹಳ ಸೃಜನಶೀಲರಾಗಿದ್ದಾರೆ, ವಿಶೇಷವಾಗಿ ವ್ಯಾಲಿಡೇಶನ್ ತಂತ್ರಗಳಲ್ಲಿ. ವಿಭಿನ್ನ ಫಾರ್ಮ್ ಪ್ರಕ್ರಿಯೆಗಳ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳಲು [CodePen](https://codepen.com) ಅನ್ನು ಪರಿಶೀಲಿಸಿ; ನೀವು ಕೆಲವು ಆಸಕ್ತಿದಾಯಕ ಮತ್ತು ಪ್ರೇರಣೆಯ ಫಾರ್ಮ್‌ಗಳನ್ನು ಕಂಡುಹಿಡಿಯಿಸಬಹುದೇ?
+
+## ಅದೇಶ
+
+[ನಿಮ್ಮ ಬ್ಯಾಂಕ್ ಆಪ್ ಸ್ಟೈಲ್ ಮಾಡಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತ್ಯಾಗಪತ್ರ**:
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಎಐ ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ತನಿಖೆಗೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುತೆಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಅಧಿಕೃತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪುಮತಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗರ್ಭಪಟ್ಟಿಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/2-forms/assignment.md

@@ -0,0 +1,166 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
+  "translation_date": "2026-01-08T16:38:09+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ನಿಮ್ಮ ಬ್ಯಾಂಕ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಆಧುನಿಕ CSS ನೊಂದಿಗೆ ಶೈಲಿ ಮಾಡಿರಿ
+
+## ಪ್ರಾಜೆಕ್ಟ್ ಅವಲೋಕನ
+
+ನಿಮ್ಮ ಕಾರ್ಯಾತ್ಮಕ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವ್ಯಕ್ತಿಗತವಾಗಿ ಆಕರ್ಷಕ, ವೃತ್ತಿಪರವಾದ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ನಾಗಿ ಪರಿವರ್ತಿಸಿ ಆಧುನಿಕ CSS ತಂತ್ರಗಳನ್ನು ಬಳಸಿ. ನೀವು ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಉತ್ತಮಗೊಳಿಸುವ ಸಮನ್ವಿತ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಯತ್ನಿಸುವಿರಿ ಅದರ ಜೊತೆಗೆ ಸುದೃಢ ಪ್ರವೇಶಯೋಗ್ಯತೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ ತತ್ವಗಳನ್ನು ಕಾಪಾಡುತ್ತಿರುತ್ತೀರಿ.
+
+ಈ ನಿಯೋಜನೆ ನವೀನ ವೆಬ್ ವಿನ್ಯಾಸ ಮಾದರಿಗಳನ್ನು ಅನ್ವಯಿಸಲು, ಸಂಯಮಿತ ದೃಶ್ಯ ಗುರುತುಗಳನ್ನು ಜವಾಬ್ದಾರಿಯಾಗಿ ಅನುಷ್ಠಾನಗೊಳಿಸಲು ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಸುಲಭವಾಗಿ ಸಂಚರಿಸಲು ಸಾಧ್ಯವಿರುವ ಅಂತರ್ಗತವನ್ನು ಸೃಷ್ಟಿಸಲು ಸವಾಲು ಹಾಕುತ್ತದೆ.
+
+## ಸೂಚನೆಗಳು
+
+### ಹಂತ 1: ನಿಮ್ಮ ಶೈಲಿಪುಸ್ತಕವನ್ನು ಸಿದ್ಧಗೊಳಿಸಿರಿ
+
+**ನಿಮ್ಮ CSS ಆಧಾರವನ್ನು ರಚಿಸಿ:**
+
+1. **ಸೃಷ್ಟಿಸಿ** ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ರೂಟ್‌ನಲ್ಲಿ `styles.css` ಎಂಬ ಹೊಸ ಫೈಲ್
+2. **ಲಿಂಕ್ ಮಾಡಿ** ಸ್ಟೈಲಿಶೀಟ್ ಅನ್ನು ನಿಮ್ಮ `index.html` ಫೈಲಿನಲ್ಲಿ:
+   ```html
+   <link rel="stylesheet" href="styles.css">
+   ```
+3. **ಆರಂಭಿಸಿ** CSS ರಿಸೆಟ್ ಮತ್ತು ಆಧುನಿಕ ಡಿಫಾಲ್ಟ್ಗಳಿಂದ:
+   ```css
+   /* Modern CSS reset and base styles */
+   * {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+   }
+   
+   body {
+     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+     line-height: 1.6;
+     color: #333;
+   }
+   ```
+
+### ಹಂತ 2: ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಅವಶ್ಯಕತೆಗಳು
+
+**ಈ ಅತ್ಯಾವಶ್ಯಕ ವಿನ್ಯಾಸ ಅಂಶಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ:**
+
+#### ಬಣ್ಣಗಳ ಪ್ಯಾಲೆಟ್
+- **ಪ್ರಾಥಮಿಕ ಬಣ್ಣ**: ಬಟನ್‌ಗಳು ಮತ್ತು ಹೈಲೈಟ್‌ಗಳಿಗೆ ವೃತ್ತಿಪರ ಬಣ್ಣವನ್ನು ಆಯ್ಕೆಮಾಡಿ
+- **ಪೂರ್ವಬದ್ಧ ಬಣ್ಣ**: ಆಕ್ಸೆಂಟ್ಗಳು ಮತ್ತು ದ್ವಿತೀಯ ಕ್ರಿಯೆಗಳಿಗೆ ಪೂರಕ ಬಣ್ಣ
+- **ನ್ಯೂಟ್ರಲ್ ಬಣ್ಣಗಳು**: ಪಠ್ಯ, ಬಾರ್ಡರ್ಸ್ ಮತ್ತು ಹಿನ್ನೆಲೆಗೆ ಬೂದು ಬಣ್ಣಗಳು
+- **ಯಶಸ್ವಿ/ದೋಷ ಬಣ್ಣಗಳು**: ಯಶಸ್ಸು ಸ್ಥಿತಿಗಳಿಗೆ ಹಸಿರು, ದೋಷಗಳಿಗೆ ಕೆಂಪು
+
+#### ಟೈಪೋಗ್ರಫಿ
+- **ಬಳಕೆಯ ಹೈರಾರ್ಕಿ**: H1, H2, ಮತ್ತು H3 ಅಂಶಗಳ ನಡುವೆ ಸ್ಪಷ್ಟ ಭೇದ
+- **ದೇಹ ಪಠ್ಯ**: ಓದಲು ಸುಲಭವಾದ ಫಾಂಟ್ ಗಾತ್ರ (ಕನಿಷ್ಠ 16px) ಮತ್ತು ಸೂಕ್ತ ಸಾಲು ಎತ್ತರ
+- **ಫಾರ್ಮ್ ಲೇಬಲ್ಗಳು**: ಸ್ಪಷ್ಟ, ಪ್ರವೇಶಾರ್ಹ ಪಠ್ಯದ ಶೈಲಿ
+
+#### ವಿನ್ಯಾಸ ಮತ್ತು ಜಾಗ
+- **ಸಮಾನ ಸಮೀಪಿಕೆ**: ಸಮೀಪಿಕೆ ಮಾಪಕವನ್ನು ಬಳಸಿ (8px, 16px, 24px, 32px)
+- **ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆ**: ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು ವಿಷಯ ವಿಭಾಗಗಳಿಗೆ ಸಂಗ್ರಹಿತ ವಿನ್ಯಾಸ
+- **ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ**: ಮೊಬೈಲ್-ಮೊದಲು ವಿಧಾನ ಮತ್ತು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು
+
+### ಹಂತ 3: ಘಟಕ ಶೈಲಿ
+
+**ಈ ನಿರ್ದಿಷ್ಟ ಘಟಕಗಳನ್ನು ಶೈಲುಗೊಳಿಸಿ:**
+
+#### ಫಾರ್ಮ್‌ಗಳು
+- **ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳು**: ವೃತ್ತಿಪರ ಬಾರ್ಡರ್ಸ್, ಫೋಕಸ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಮಾನ್ಯತೆ ಶೈಲಿ
+- **ಬಟನ್‌ಗಳು**: ಹೋವರ್ ಪರಿಣಾಮಗಳು, ನಿಷ್ಕ್ರಿಯ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಲೋಡಿಂಗ್ ಸೂಚಕಗಳು
+- **ಲೇಬಲ್ಗಳು**: ಸ್ಪಷ್ಟ ಸ್ಥಾನಗಳಿರುತ್ತವೆ ಮತ್ತು ಅವಶ್ಯಕ ಕ್ಷೇತ್ರ ಸೂಚಕಗಳು
+- **ದೋಷ ಸಂದೇಶಗಳು**: ದೃಶ್ಯಮಾನ ದೋಷ ಶೈಲಿ ಮತ್ತು ಸಹಾಯಕ ಸಂದೇಶಗಳು
+
+#### ನ್ಯಾವಿಗೇಶನ್
+- **ಹೆಡರ್**: ಸ್ವಚ್ಛ, ಬ್ರಾಂಡಡ್ ನ್ಯಾವಿಗೇಶನ್ ಪ್ರದೇಶ
+- **ಲಿಂಕ್‌ಗಳು**: ದಪ್ಪ ಹೋವರ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಸಕ್ರಿಯ ಸೂಚಕಗಳು
+- **ಲೋಗೋ/ಶೀರ್ಷಿಕೆ**: ವಿಶಿಷ್ಟ ಬ್ರಾಂಡಿಂಗ್ ಅಂಶ
+
+#### ವಿಷಯ ಪ್ರದೇಶಗಳು
+- **ವಿಭಾಗಗಳು**: ವಿವಿಧ ಪ್ರದೇಶಗಳ ನಡುವೆ ಸ್ಪಷ್ಟ ದೃಶ್ಯ ವಿಭಜನೆ
+- **ಕಾರ್ಡ್‌ಗಳು**: ಕಾರ್ಡ್ ಆಧಾರಿತ ವಿನ್ಯಾಸ ಬಳಿಸಿದರೆ, ನೆರಳು ಮತ್ತು ಬಾರ್ಡರ್‌ಗಳನ್ನು ಸೇರಿಸಿ
+- **ಹಿನ್ನೆಲೆಗಳು**: ವೈಟ್ ಸ್ಪೇಸ್ ಮತ್ತು ಸೌಮ್ಯ ಹಿನ್ನೆಲೆಗಳ ಸೂಕ್ತ ಬಳಕೆ
+
+### ಹಂತ 4: ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯಗಳು (ಐಚ್ಛಿಕ)
+
+**ಈ ಆಧುನಿಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವ ಬಗ್ಗೆ ಪರಿಗಣಿಸಿ:**
+- **ಡಾರ್ಕ್ ಮೋಡ್**: ಬೆಳಕು ಮತ್ತು ಮೊಗ್ಗಿನ ಥೀಮ್‌ಗಳ ನಡುವೆ ಟಾಗಲ್
+- **ಆನಿಮೇಷನ್ಗಳು**: ಸೌಮ್ಯ ಸಂಕ್ರಮಣೆಗಳು ಮತ್ತು ಸೂಕ್ಷ್ಮ ಕ್ರಿಯೆಗಳು
+- **ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು**: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ವೇಳೆ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ
+- **ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಚಿತ್ರಗಳು**: ವಿಭಿನ್ನ ಪರದೆ ಗಾತ್ರಗಳಿಗೆ ಉತ್ತರದರ್ಶಕ ಚಿತ್ರಗಳು
+
+## ವಿನ್ಯಾಸ ಪ್ರೇರಣೆ
+
+**ಆಧುನಿಕ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಲಕ್ಷಣಗಳು:**
+- **ಸ್ವಚ್ಛ, ಕನಿಷ್ಠ ವಿನ್ಯಾಸ** ಸಾಕಷ್ಟು ಶ್ವೇತ ಸ್ಥಳದೊಂದಿಗೆ
+- **ವೃತ್ತಿಪರ ಬಣ್ಣ ಯೋಜನೆಗಳು** (ನೀಲಿ, ಹಸಿರು, ಅಥವಾ ವೈಭವೋಪೇತ ನ್ಯೂಟ್ರಲ್ಸ್)
+- **ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಹೈರಾರ್ಕಿ** ಪ್ರಭಾವಶಾಲಿ ಕರೆ-ಟು-ಆ್ಯಕ್ಷನ್ ಬಟನ್‌ಗಳೊಂದಿಗೆ
+- **ಪ್ರವೇಶಾರ್ಹ ವ್ಯತ್ಯಾಸ ಅನುಪಾತಗಳು** WCAG ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಪೂರೈಸುತ್ತವೆ
+- **ಮೊಬೈಲ್-ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸಗಳು** ಎಲ್ಲಾ ಸಾಧನಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಂತೆ
+
+## ಪ್ರಾಸಂಗಿಕ ಅಗತ್ಯಗಳು
+
+### CSS ಸಂಘಟನೆ
+```css
+/* 1. CSS Custom Properties (Variables) */
+:root {
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  /* Add more variables */
+}
+
+/* 2. Base Styles */
+/* Reset, typography, general elements */
+
+/* 3. Layout */
+/* Grid, flexbox, positioning */
+
+/* 4. Components */
+/* Forms, buttons, cards */
+
+/* 5. Utilities */
+/* Helper classes, responsive utilities */
+
+/* 6. Media Queries */
+/* Responsive breakpoints */
+```
+
+### ಪ್ರವೇಶಾರ್ಹತೆ ಅಗತ್ಯಗಳು
+- **ಬಣ್ಣ ವ್ಯತ್ಯಾಸ**: ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ ಕನಿಷ್ಠ 4.5:1 ಅನುಪಾತ ಖಾತ್ರಿಗೊಳಿಸಿ
+- **ಫೋಕಸ್ ಸೂಚಕಗಳು**: ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ದೃಶ್ಯমান ಫೋಕಸ್ ಸ್ಥಿತಿಗಳು
+- **ಫಾರ್ಮ್ ಲೇಬಲ್ಗಳು**: ಸರಿಯಾಗಿ ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ
+- **ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ**: 320px ರಿಂದ 1920px ಅಗಲದ ಪರದಿಗಳ ಮೇಲೆ ಬಳಸಬಹುದಾಗಿರಬೇಕು
+
+## ಮೌಲ್ಯಮಾಪನ ರೂಬ್ರಿಕ್
+
+| ಮಾನದಂಡ | ಉದಾಹರಣಾರ್ಹ (A) | ಪ್ರवीಣ (B) | ಬೆಳೆಯುತ್ತಿರುವ (C) | ಸುಧಾರಣೆ ಅಗತ್ಯ (F) |
+|----------|-----------------|------------|-------------------|-------------------|
+| **ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ** | ಸಾಮರಸ್ಯ ಬಣ್ಣಗಳು, ಟೈಪೋಗ್ರಫಿ ಮತ್ತು ಜಾಗದೊಂದಿಗೆ ಸಂಪೂರ್ಣ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುತ್ತದೆ | ಸ್ಪಷ್ಟ ವಿನ್ಯಾಸ ಮಾದರಿಗಳೊಂದಿಗೆ ಸಮಾನ ಶೈಲಿಯನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು ಉತ್ತಮ ದೃಶ್ಯ ಹಿಡಿತ | ಮೂಲಶೈಲಿ ಅನ್ವಯಿಸಲಾಗಿದ್ದು ಕೆಲವು ಸಕಲತೆ ಸಮಸ್ಯೆಗಳು ಅಥವಾ ವಿನ್ಯಾಸ ಅಂಶಗಳ ಕೊರತೆ | ಅತಿ ಕಡಿಮೆ ಶೈಲಿ, ಅಸಮನ್ವಿತ ಅಥವಾ ಘರ್ಷಣಾಶೀಲ ವಿನ್ಯಾಸ ಆಯ್ಕೆಗಳು |
+| **ಬಳಕೆದಾರ ಅನುಭವ** | ಉತ್ಸಾಹಕಾರಿ, ವೃತ್ತಿಪರ ಅಂತರ್ಜಾಲವನ್ನು ನಿರ್ಮಿಸಿ ಅತ್ಯುತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ದೃಶ್ಯ ಆಕರ್ಷಣೆ | ಸ್ಪಷ್ಟ ನ್ಯಾವಿಗೇಶನ್ ಮತ್ತು ಓಲವಿನ ವಿಷಯದೊಂದಿಗೆ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವ ಒದಗಿಸುತ್ತದೆ | ಕೆಲವು UX ಸುಧಾರಣೆಗಳಿಗೆ ಅಗತ್ಯವಿರುವ ಮೂಲಭೂತ ಬಳಕೆದಾರ ಅನುಭವ | ದುರಂತ ಬಳಕೆದಾರ ಅನುಭವ, ಸಂಚರಣೆ ಅಥವಾ ಓದಿನಲ್ಲಿ ಕಷ್ಟಕರ |
+| **ತಾಂತ್ರಿಕ ಅನುಷ್ಠಾನ** | ಆಧುನಿಕ CSS ತಂತ್ರಗಳು, ಸಂಘಟಿತ ಕೋಡ್ ರಚನೆ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ | ಉತ್ತಮ ಸಂಘಟನೆಯೊಂದಿಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ CSS ಅನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಸೂಕ್ತ ತಂತ್ರಗಳನ್ನು ಬಳಸುತ್ತದೆ | CSS ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಆದರೆ ಸಂಘಟನೆ ಅಥವಾ ಆಧುನಿಕ ವಿಧಾನಗಳ ಕೊರತೆ ಇರಬಹುದು | ತಾಂತ್ರಿಕ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ಅಥವಾ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯಲ್ಲಿ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ದುರ್ಬಲ CSS ಅನುಷ್ಠಾನ |
+| **ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ** | ಎಲ್ಲ ಸಾಧನ ಗಾತ್ರಗಳಲ್ಲೂ ಸುಂದರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಸಂಪೂರ್ಣ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ | ಕೆಲವು ಪರದೆ ಗಾತ್ರಗಳಲ್ಲಿ ತಣ್ಣನೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿದ ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವರ್ತನೆ | ಕೆಲವು ವಿನ್ಯಾಸ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ಮೂಲಭೂತ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಅನುಷ್ಠಾನ | ಪ್ರತಿಕ್ರಿಯಾಶೀಲವಿಲ್ಲ ಅಥವಾ ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಪ್ರಮುಖ ಸಮಸ್ಯೆಗಳು |
+| **ಪ್ರವೇಶಾರ್ಹತೆ** | WCAG ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಪೂರೈಸುತ್ತದೆ ಉತ್ತಮ ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಶನ್ ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬೆಂಬಲದೊಂದಿಗೆ | ಸೂಕ್ತ ವ್ಯತ್ಯಾಸ ಮತ್ತು ಫೋಕಸ್ ಸೂಚಕಗಳೊಂದಿಗೆ ಉತ್ತಮ ಪ್ರವೇಶಾರ್ಹತೆ ಅಭ್ಯಾಸಗಳು | ಕೆಲವು ಅಂಶಗಳ ಕೊರತೆ ಇರುವ ಮೂಲ ಪ್ರವೇಶಾರ್ಹತೆ ಪರಿಗಣನೆಗಳು | ದುರ್ಬಲ ಪ್ರವೇಶಾರ್ಹತೆ, ದೈಹಿಕ ಅಸಮರ್ಥತೆ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಕಷ್ಟಕಾರಿಯಾಗಿರುತ್ತದೆ |
+
+## ಸಲ್ಲಿಸುವ ಮಾರ್ಗಸೂಚಿಗಳು
+
+**ನಿಮ್ಮ ಸಲ್ಲಿಕೆಯಲ್ಲಿ ಸೇರಿಸಿ:**
+- **styles.css**: ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಶೈಲಿಪುಸ್ತಕ
+- **ನವೀನಗೊಳಿಸಿದ HTML**: ನೀವು ಮಾಡಿದ ಯಾವುದೇ HTML ಬದಲಾವಣೆಗಳು
+- **ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು**: ಡೆಸ್ಕ್‌ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್‌ನಲ್ಲಿ ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ತೋರಿಸುವ ಚಿತ್ರಗಳು
+- **README**: ನಿಮ್ಮ ವಿನ್ಯಾಸ ಆಯ್ಕೆಗಳು ಮತ್ತು ಬಣ್ಣ ಪ್ಯಾಲೆಟ್ ಕುರಿತು ಸಂಕ್ಷಿಪ್ತ ವಿವರಣೆ
+
+**ಬೋನಸ್ ಪಾಯಿಂಟ್‌ಗಳು:**
+- **CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್** ಉಳಿಸುವ ಶೈಲಿ ಮತ್ತು ಥೀಮಿಂಗ್
+- **ಆಧುನಿಕ CSS ವೈಶಿಷ್ಟ್ಯಗಳು** Grid, Flexbox ಅಥವಾ CSS ಆನಿಮೇಷನ್ಗಳಂತಹವು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಗಣನೆಗಳು** ಉತ್ತಮಗೊಳ್ಳಲಾದ CSS ಮತ್ತು ಕನಿಷ್ಠ ಫೈಲ್ ಗಾತ್ರ
+- **ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಪರಿಕ್ಷಣೆ** ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳೊಂದಿಗಿನ ಹೊಂದಾಣಿಕೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು
+
+> 💡 **ಪ್ರೊ ಟಿಪ್**: ಮೊಬೈಲ್ ವಿನ್ಯಾಸಕ್ಕೆ ಮೊದಲು ಪ್ರಾರಂಭಿಸಿ, ನಂತರ ದೊಡ್ಡ ಪರದೆಗಳಿಗೆ ಉತ್ತಮಗೊಳಿಸಿ. ಈ ಮೊಬೈಲ್-ಮೊದಲು ವಿಧಾನವು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಎಲ್ಲಾ ಸಾಧನಗಳ ಮೇಲೆ ಚೆನ್ನಾಗಿಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ ಮತ್ತು ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪಾಲಿಸುತ್ತದೆ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ತಪ್ಪು ನಿರಾಕರಣೆ**:
+ಈ ದಾಖಲೆಯನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಿಖರತೆಯನ್ನು ನಾವು ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುತೆಗಳಿರಬಹುದು ಎಂಬುದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆವೇ ಪ್ರಾಮಾಣಿಕ ಮೂಲವಾಗಿರಬೇಕಾಗಿದೆ. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು સમજಿಕೆ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಕ್ಕಾಗಿ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/3-data/README.md

@@ -0,0 +1,971 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "86ee5069f27ea3151389d8687c95fac9",
+  "translation_date": "2026-01-08T17:23:20+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಾಣ ಪಾರ್ಟ್ 3: ಡೇಟಾವನ್ನು ಪಡೆಯುವ ಮತ್ತು ಬಳಸುವ ವಿಧಾನಗಳು
+
+ಸ್ಟಾರ್ ಟ್ರೆಕ್‌ನ ಎಂಟರ್‌ಪ್ರೈಸ್ ಕಂಪ್ಯೂಟರ್ ಕುರಿತು ಯೋಚಿಸಿ - ಕ್ಯಾಪ್ಟನ್ ಪಿಕಾರ್ಡ್‌ನು ಹಡಗು ಸ್ಥಿತಿಗತಿಗಾಗಿ ಕೇಳಿದಾಗ, ಸಂಪೂರ್ಣ ಇಂಟರ್‌ಫೇಸ್ ನಿಲ್ಲಿಸಿ ಮರುನಿರ್ಮಿಸಲಾಗದೆ ಮಾಹಿತಿ ತಕ್ಷಣ ಕಾಣಿಸುತ್ತದೆ. ಆ ಸರಾಗ ಮಾಹಿತಿ ಹರಿವುಲೇ ನಾವು ಇಲ್ಲಿ ಡೈನಾಮಿಕ್ ಡೇಟಾ ಫೆಚಿಂಗ್ ಮೂಲಕ ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ.
+
+ಈಗ ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಒಂದು ಮುದ್ರಿತ ಸುದ್ದಿಪತ್ರಿಕೆಂತೆ ಇದೆ - ಮಾಹಿತಿಪೂರ್ಣ ಆದರೆ ಸ್ಥಿರ. ನಾವು ಅದನ್ನು NASA ಯ ಮಿಷನ್ ಕಂಟ್ರೋಲ್ ನಂತಹ ಬದಲಾಯಿಸುವುದಾಗಿ ಸಂಚಲನ ಮತ್ತು ನವೀಕರಣಗಳು ನಿರಂತರವಾಗಿ ಬಳಕೆದಾರರ ಕೆಲಸದ ಮಾರ್ಗವನ್ನು ಕಡಿತಮಾಡದೆ ನಡೆಯುವಂತೆ ಮಾಡುತ್ತೇವೆ.
+
+ನೀವು ಸರ್ವರ್ಗಳೊಂದಿಗೆ ಅಸಿಂಕ್ರೋನಸ್‌ ಆಗಿ ಸಂವಹನ ಮಾಡುವುದನ್ನು, ವಿಭಿನ್ನ ಸಮಯಗಳಲ್ಲಿ ಬರುತ್ತಿರುವ ಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸುವುದನ್ನು ಮತ್ತು ಕಚ್ಚಾ ಮಾಹಿತಿಯನ್ನು ಬಳಕೆದಾರರಿಗಾಗಿ ಅರ್ಥಪೂರ್ಣವಾಗಿ ಪರಿವರ್ತಿಸುವುದನ್ನು ಕಲಿಯುತ್ತೀರಿ. ಇದು ಡೆಮೊ ಮತ್ತು ಪ್ರೊಡಕ್ಷನ್-ಸಿದ್ಧ ಸಾಫ್ಟ್ವೇರ್ ನಡುವೆ ಇರುವ ವ್ಯತ್ಯಾಸ.
+
+## ⚡ ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದವು
+
+**ಬೇಕಾದರೆ ತ್ವರಿತ ಪ್ರಾರಂಭ ಮಾರ್ಗವಳಿ ಡೆವಲಪರ್ಸ್‌ಗಾಗಿ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 ನಿಮಿಷಗಳು] --> B[API ಸರ್ವರ್‌ ಅನ್ನು ಹೊಂದಿಸಿ]
+    B --> C[curl ಬಳಸಿ ಟೆಸ್ಟ್ ಫೆಚ್ ಮಾಡಿ]
+    C --> D[ಲಾಗಿನ್ ಕಾರ್ಯವನ್ನು ನಿರ್ಮಿಸಿ]
+    D --> E[ಕ್ರಿಯೆಯಲ್ಲಿ ಡೇಟಾವನ್ನು ನೋಡಿ]
+```
+- **ನಿಮಿಷ 1-2**: ನಿಮ್ಮ API ಸರ್ವರ್ ಪ್ರಾರಂಭಿಸಿ (`cd api && npm start`) ಮತ್ತು ಸಂಪರ್ಕ ಪರೀಕ್ಷಿಸಿ
+- **ನಿಮಿಷ 3**: ಮೂಲಭೂತ `getAccount()` ಫಂಕ್ಷನ್ fetch ಬಳಸಿ ಸೃಷ್ಟಿಸಿ
+- **ನಿಮಿಷ 4**: ಲಾಗಿನ್ ಫಾರ್ಮ್‌ ಅನ್ನು `action="javascript:login()"` ಮೂಲಕ ಸಂಪರ್ಕಿಸಿ
+- **ನಿಮಿಷ 5**: ಲಾಗಿನ್ ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಕಾಂಸೋಲ್‌ನಲ್ಲಿ ಖಾತೆ ಡೇಟಾ ಕಾಣಿಸಿ
+
+**ತ್ವರಿತ ಪರೀಕ್ಷಾ ಕಮಾಂಡ್ಗಳು**:
+```bash
+# API ಚಾಲನೆಯಲ್ಲಿ ಇದೆ ಎಂದು ಪರಿಶೀಲಿಸಿ
+curl http://localhost:5000/api
+
+# ಖಾತೆ ಡೇಟಾ ತ Rodrigues್ ಪಡೆಯಿರಿ
+curl http://localhost:5000/api/accounts/test
+```
+
+**ಇದಕ್ಕೆ ಏಕೆ ಮಹತ್ವವಿದೆ**: 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಪ್ರತಿ ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ತಾಳ್ಮೆಯಿಂದ ಇಡುತ್ತದೆ ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಫೆಚಿಂಗ್‌ನ ಮಾಯಾಜಾಲವನ್ನು ಕಾಣುತ್ತೀರಿ. ಇದು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಸ್ಪಂದನಶೀಲ ಮತ್ತು ಜೀವಂತಗೊಳಿಸುವ ಮೂಲಭೂತ ಅಂಶ.
+
+## 🗺️ ಡೇಟಾ-ಚಾಲಿತ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಮೂಲಕ ನಿಮ್ಮ ಅಧ್ಯಯನ ಪಯಣ
+
+```mermaid
+journey
+    title ಸ್ಥಿರ ಪುಟಗಳಿಂದ ಸುದೈನಿಮ ಅಧಿಕೃತತೆಗಳವರೆಗೆ
+    section ಅಭಿವೃದ್ಧಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+      ಸಂಪ್ರದಾಯಿಕ ಪುಟ ಮರುಲೋಡ್‌ಗಳು: 3: You
+      AJAX/SPA ಲಾಭಗಳು ಹುಡುಕಲೊಳ್ಳಿ: 5: You
+      ಫೆಚ್ API ಮಾದರಿಗಳನ್ನು ತಿಳಿಯಿರಿ: 7: You
+    section ಪ್ರಾಥಮಿಕ ಪ್ರಾಮಾಣಿಕತೆ ನಿರ್ಮಿಸುವುದು
+      ಲಾಗಿನ್ ಕಾರ್ಯಗಳನ್ನು ರಚಿಸು: 4: You
+      ಅಸಿಂಕ್ರೋ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಣೆ ಮಾಡು: 6: You
+      ಬಳಕೆದಾರ ಸೆಷನ್‌ಗಳನ್ನು ನಿರ್ವಹಣೆ ಮಾಡು: 8: You
+    section ಸುದೈನಿಮ UI ತಿದ್ದುಪಡಿ ಗಳು
+      DOM ನಿರ್ವಹಣೆಯನ್ನು ಕಲಿಯಿರಿ: 5: You
+      ವ್ಯವಹಾರ ಪ್ರದರ್ಶನಗಳನ್ನು ನಿರ್ಮಿಸು: 7: You
+      ಪ್ರತಿಕ್ರಿಯೆಯ dashboards ರಚಿಸು: 9: You
+    section ವೃತ್ತಿಪರ ಮಾದರಿಗಳು
+      ಟೆಂಪ್ಲೇಟು ಆಧಾರಿತ ರೆಂಡರಿಂಗ್: 6: You
+      ದೋಷ ನಿರ್ವಹಣಾ ತಂತ್ರಗಳು: 7: You
+      ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ: 8: You
+```
+**ನಿಮ್ಮ ಪಯಣ ಗುರಿ**: ಈ ಪಾಠದ ಕೊನೆಯಲ್ಲಿ, ನೀವು ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಡೇಟಾವನ್ನು ಹೇಗೆ ಪಡೆಯುತ್ತವೆ, ಪ್ರಕ್ರಿಯೆ ಮಾಡುತ್ತವೆ ಮತ್ತು ಡೈನಾಮಿಕ್ ಆಗಿ ಪ್ರದರ್ಶಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳುತ್ತೀರಿ, ಇದು ವೃತ್ತಿಪರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಂದ ನಾವು ನಿರೀಕ್ಷಿಸುವ ಸರಾಗ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
+
+## ಮುನ್ನಡಿ ಲಗ್ಗಣೆ ಪ್ರಶ್ನಾ ಪರೀಕ್ಷೆ
+
+[ಮುನ್ನಡಿ ಲಗ್ಗಣೆ ಪ್ರಶ್ನಾ ಪರೀಕ್ಷೆ](https://ff-quizzes.netlify.app/web/quiz/45)
+
+### ಪೂರ್ವಾವಶ್ಯಕತೆಗಳು
+
+ಡೇಟಾ ಪಡೆಯುವುದರಲ್ಲಿ ಮುಳುಗುವ ಮೊದಲು, ಈ ಘಟಕಗಳನ್ನು ಸಿದ್ಧವಾಗಿಸಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+
+- **ಹಿಂದಿನ ಪಾಠ**: [ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ಫಾರ್ಮ್](../2-forms/README.md) ಪೂರೈಸಿ - ನಾವು ಇದು ಮೇಲೆ ನಿರ್ಮಿಸುವೆವು
+- **ಸ್ಥಳೀಯ ಸರ್ವರ್**: [Node.js](https://nodejs.org) ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ ಮತ್ತು [API ಸರ್ವರ್ ಅನ್ನು ಚಾಲನೆ ಮಾಡಿ](../api/README.md) ಖಾತೆ ಡೇಟಾವನ್ನು ಒದಗಿಸಲು
+- **API ಸಂಪರ್ಕ**: ಈ ಕಮಾಂಡ್ ಮೂಲಕ ನಿಮ್ಮ ಸರ್ವರ್ ಸಂಪರ್ಕವನ್ನು ಪರೀಕ್ಷಿಸಿ:
+
+```bash
+curl http://localhost:5000/api
+# ನಿರೀಕ್ಷಿತ ಪ್ರತಿಕ್ರಿಯೆ: "ಬ್ಯಾಂಕ್ API v1.0.0"
+```
+
+ಈ ತ್ವರಿತ ಪರೀಕ್ಷೆ ಎಲ್ಲಾ ಘಟಕಗಳು ಸರಿಯಾದ ಸಂವಹನ ಮಾಡುತ್ತಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ:
+- ನಿಮ್ಮ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ Node.js ಸರಿಯಾಗಿ ಓಡುತ್ತಿದೆಯೇ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ನಿಮ್ಮ API ಸರ್ವರ್ ಸಕ್ರಿಯವಾಗಿದ್ದು ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತಿದೆಯೇ ಎಂದು ದೃಢೀಕರಿಸುತ್ತದೆ
+- ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸರ್ವರ್‌ನನ್ನು ತಲುಪಬಹುದೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ (ಮಿಷನ್ನಿಗೆ ಮುನ್ನ ರೇಡಿಯೋ ಸಂಪರ್ಕ ತಪಾಸಣೆಯಂತಾಗಿದೆ)
+
+## 🧠 ಡೇಟಾ ನಿರ್ವಹಣಾ ಪರಿಸರ ಅವಲೋಕನ
+
+```mermaid
+mindmap
+  root((ಡೇಟಾ ನಿರ್ವಹಣೆ))
+    Authentication Flow
+      Login Process
+        ಫಾರ್ಮ್ ಮಾನ್ಯತೆ
+        ಪ್ರಮಾಣಪತ್ರ ಪರಿಶೀಲನೆ
+        ಸೆಷನ್ ನಿರ್ವಹಣೆ
+      User State
+        ಜಾಗತಿಕ ಖಾತೆ ವಸ್ತು
+        ನಾವಿಗೇಶನ್ ಗಾರ್ಡ್‌ಗಳು
+        ದೋಷ ನಿರ್ವಹಣೆ
+    API Communication
+      Fetch Patterns
+        GET ವಿನಂತಿಗಳು
+        POST ವಿನಂತಿಗಳು
+        ದೋಷ ಪ್ರತಿಕ್ರಿಯೆಗಳು
+      Data Formats
+        JSON ಪ್ರಕ್ರಿಯೆ
+        URL ಎನ್‌ಕೋಡಿಂಗ್
+        ಪ್ರತಿಕ್ರಿಯೆ ವಿಶ್ಲೇಷಣೆ
+    Dynamic UI Updates
+      DOM Manipulation
+        ಸುರಕ್ಷಿತ ಪಠ್ಯ ನವೀಕರಣಗಳು
+        ಅಂಶ ಸೃಷ್ಟಿ
+        ಟೆಂಪ್ಲೇಟ್ ಕ್ಲೋನಿಂಗ್
+      User Experience
+        ನೈಜ-ಸಮಯ ನವೀಕರಣಗಳು
+        ದೋಷ ಸಂದેશಗಳು
+        ಲೋಡ್ ಸ್ಥಿತಿಗಳು
+    Security Considerations
+      XSS Prevention
+        textContent ಬಳಕೆ
+        ಇನ್‌ಪುಟ್ ಸ್ಯಾನಿಟೈಸೇಶನ್
+        ಸುರಕ್ಷಿತ HTML ಸೃಷ್ಟಿ
+      CORS Handling
+        ಕ್ರಾಸ್-ಆರಿಜಿನ್ ವಿನಂತಿಗಳು
+        ಹೆಡರ್ ಸಂರಚನೆ
+        ಅಭಿವೃದ್ಧಿ ಸೆಟಪ್
+```
+**ಪ್ರಮುಖ ಸಿದ್ಧಾಂತ**: ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಡೇಟಾ ಸಂಯೋಜನಾ ವ್ಯವಸ್ಥೆಗಳು - ಅವು ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳು, ಸರ್ವರ್ APIಗಳು ಮತ್ತು ಬ್ರೌಸರ್ ಭದ್ರತಾ ಮಾದರಿಗಳ ನಡುವೆ ಸಮನ್ವಯಿಸಿಸರಾಗ, ಸ್ಪಂದನಶೀಲ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತವೆ.
+
+---
+
+## ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌‌ಗಳಲ್ಲಿ ಡೇಟಾ ಪಡೆಯುವಿಕೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+
+ಕಳೆದ ಇಪ್ಪತ್ತು ವರ್ಷಗಳಲ್ಲಿ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಡೇಟಾ ನಿರ್ವಹಿಸುವ ವಿಧಾನವು ಭಾರಿ ಮಾರ್ಪಡಿತವಾಗಿದೆ. ಈ ಬದಲಾಗುವಿಕೆಯನ್ನು ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳುವುದು, AJAX ಮತ್ತು Fetch API ಮುಂತಾದ ಆಧುನಿಕ ತಂತ್ರಗಳನ್ನು ಏಕೆ ಶಕ್ತಿಯುತವಾಗಿವೆ ಮತ್ತು ವೆಬ್ ಡೆವಲಪರ್ಸ್‌ಗೆ ಅವು ಅಗತ್ಯವಾಯಿರುತ್ತವೆ ಎಂಬುದನ್ನು ಅವಲೋಕಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+ಸಾಂಪ್ರದಾಯಿಕ ವೆಬ್‌ಸೈಟುಗಳು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದವು ಮತ್ತು ನಾವು ಈಗ ನಿರ್ಮಿಸುತ್ತಿರುವ ಡೈನಾಮಿಕ್, ಸ್ಪಂದನಶೀಲ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಅನ್ವೇಷಿಸೋಣ.
+
+### ಸಾಂಪ್ರದಾಯಿಕ ಬಹು-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು (MPA)
+
+ವೆಬ್ ಪ್ರಾರಂಭಿಕೆಯಲ್ಲಿದ್ದಾಗ, ಪ್ರತಿ ಕ್ಲಿಕ್ ಹಳೆಯ ದೂರದರ್ಶನದ ಚಾನೆಲ್ ಬದಲಾಯಿಸುವಂತೆ ಇದ್ದಿತು - ಸ್ಕ್ರೀನ್ ಖಾಲಿ ಆಗಿ, ನಂತರ ಹೊಸ ವಿಷಯದೊಂದಿಗೆ ನಿಧಾನವಾಗಿ ಮುತುವರ್ಜಿ ಒಪ್ಪಿಕೊಳ್ಳುತ್ತಿತ್ತು. ಇದು ಮರುಬಳಕೆಯ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ನಿಜವಾಗಿದ್ದ ಸ್ಥಿತಿ, ಪ್ರತಿಯೊಂದು ಕ್ರಿಯೆಯೂ ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ಆರಂಭದಿಂದ ಮರುನಿರ್ಮಿಸುವುದಾಗಿತ್ತು.
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant Server
+    
+    User->>Browser: ಲಿಂಕ್ ಕ್ಲಿಕ್ ಮಾಡುತ್ತದೆ ಅಥವಾ ಫಾರ್ಮ್ ಸಲ್ಲಿಸುತ್ತದೆ
+    Browser->>Server: ಹೊಸ HTML ಪುಟಕ್ಕಾಗಿ ವಿನಂತಿ ಮಾಡುತ್ತದೆ
+    Note over Browser: ಪುಟ ಖಾಲಿಯಾಗುತ್ತದೆ
+    Server->>Browser: ಸಂಪೂರ್ಣ HTML ಪುಟವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ
+    Browser->>User: ಹೊಸ ಪುಟವನ್ನು ತೋರಿಸುತ್ತದೆ (ಫ್ಲ್ಯಾಶ್/ರೀಲುಡ್)
+```
+![ಮಲ್ಟಿ-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿವ ನವೀಕರಣ ಕಾರ್ಯವಾಹಿ](../../../../translated_images/mpa.7f7375a1a2d4aa77.kn.png)
+
+**ಈ ವಿಧಾನವನ್ನು ಅಸಹ್ಯವಾಗಿಸಿದ್ದದ್ದು:**
+- ಪ್ರತಿ ಕ್ಲಿಕ್ ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ಪುನರ್ನirmaಣೆ ಪರಿಚಯಿಸಿತು
+- ಬಳಕೆದಾರರು ಮಧ್ಯದಲ್ಲಿ ನಿಂತು ಬದಲಾವಣೆಯ ನೋಟಗಳನ್ನು ಅನುಭವಿಸಿದ್ದರು
+- ನಿಮ್ಮ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕ ಅದೇ ಹೆಡರ್ ಮತ್ತು ಫೂಟರ್ ಡೌನ್ಲೋಡ್ ಮಾಡಲು ಹಗಲು-ರಾತಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿತ್ತು
+- ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸಾಫ್ಟ್‌ವೇರ್‌ ಬಳಕೆಯಂತೆ ಇಲ್ಲ, ಕಡತಗಳ ಲಾಶೆಗೆ ಕ್ಲಿಕ್ ಮಾಡುವಂತಿದ್ದವು
+
+### ಆಧುನಿಕ ಸಿಂಗಲ್-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು (SPA)
+
+AJAX (ಅಸಿಂಕ್ರೋನಸ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು XML) ಈ ಪರಿಕಲ್ಪನೆಯನ್ನು ಸಂಪೂರ್ಣ ಬದಲಾಯಿಸಿದೆ. ಅಂತಾರಾಷ್ಟ್ರೀಯ ಶೇಖರಣಾ ನಿಲಯದ (ISS) ಮೋಡ್ಯೂಲರ್ ವಿನ್ಯಾಸದಂತೆ, ಅಲ್ಲಿ ಬಾಹ್ಯಯಾನಿಗಳು ವಿಚ್ಛಿನ್ನ ಭಾಗಗಳನ್ನು ಮರುಸ್ಥಾಪಿಸಬಹುದು, AJAX ನಮಗೆ ಪುಟದ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳನ್ನು ಮರುಲೋಡ್ ಮಾಡದೇ ನವೀಕರಣ ಮಾಡಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ. XML ಎಂದು ಹೆಸರಿರುವುದರ ಮೇಲೆ JSON ಅನ್ನು ನಾವು ಹೆಚ್ಚು ಬಳಕೆಮಾಡುತ್ತೇವೆ, ಆದರೆ ಮೂಲ ತತ್ವ ಎಂದರೆ: ಬದಲಾಯಿಸಬೇಕಾದ ಭಾಗವನ್ನು ಮಾತ್ರ ನವೀಕರಿಸು.
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant JavaScript
+    participant Server
+    
+    User->>Browser: ಪುಟದೊಂದಿಗೆ ಸಂವಹನ ಮಾಡುತ್ತದೆ
+    Browser->>JavaScript: ಘಟನೆ ಕೈಗಾರಿಕೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ
+    JavaScript->>Server: ಕೇವಲ ಅಗತ್ಯವಿರುವ ಡೇಟಾ ಪಡೆಯುತ್ತದೆ
+    Server->>JavaScript: JSON ಡೇಟಾವನ್ನು ಹೊಂದಿಸುತ್ತದೆ
+    JavaScript->>Browser: ನಿರ್ದಿಷ್ಟ ಪುಟದ ಅಂಶಗಳನ್ನು ನವೀಕರಿಸುತ್ತದೆ
+    Browser->>User: ನವೀಕೃತ ವಿಷಯವನ್ನು ತೋರಿಸುತ್ತದೆ (ಮತ್ತೆ ಲೋಡ್ ಮಾಡದೆ)
+```
+![ಸಿಂಗಲ್-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನವೀಕರಣ ಕಾರ್ಯವಾಹಿ](../../../../translated_images/spa.268ec73b41f992c2.kn.png)
+
+**SPAs ಇಷ್ಟು ಚೆನ್ನಾಗಿರುವುದಕ್ಕೆ ಕಾರಣಗಳು:**
+- ಬದಲಾಯಿಸಿದ ಭಾಗಗಳನ್ನು ಮಾತ್ರ ನವೀಕರಿಸಲಾಗುತ್ತದೆ (ಬುದ್ದಿವಂತಿಕೆ吧)
+- ಯಾವುದೇ ಜಾರಿಯಾದ ವಿರಾಮಗಳಿಲ್ಲ - ಬಳಕೆದಾರರು ತಮ್ಮ ಕ್ರಮದಲ್ಲಿ ಇರುತ್ತಾರೆ
+- ಕಡಿಮೆ ಡೇಟಾ ಸಂಚಾರ ವೇಗವಾಗಿ ಲೋಡ್ ಮಾಡುತ್ತದೆ
+- ಎಲ್ಲವು ಸ್ಪಂದನಶೀಲ ಮತ್ತು ತ್ವರಿತವಾಗಿ ಆಗುತ್ತದೆ, ನಿಮ್ಮ ಫೋನಿನ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಂತೆ
+
+### ಆಧುನಿಕ Fetch API ಗೆ ಬದಲಿ
+
+ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) ಅನ್ನು ಒದಗಿಸುತ್ತವೆ, ಇದು ಹಳೆಯ [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) ನೆ ವಿರುದ್ಧ ಬದಲಿ. ಟೆಲಿಗ್ರಾಫ್ ಮತ್ತು ಇಮೇಲ್ ಬಳಸುವ ವ್ಯತ್ಯಾಸದಂತೆ, Fetch API ಸ್ವಚ್ಛ, ಅಸಿಂಕ್ರೋನಸ್ ಕೋಡುವಿಕೆಗೆ ಪ್ರಾಮಿಸ್‌ಗಳನ್ನು ಉಪಯೋಗಿಸುತ್ತದೆ ಮತ್ತು JSON ನೈಜವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ.
+
+| ವೈಶಿಷ್ಟ್ಯ | XMLHttpRequest | Fetch API |
+|---------|----------------|----------|
+| **ವ್ಯಾಕರಣ** | ಒತ್ತಡದ ಕಾಲ್ಬ್ಯಾಕ್ ಆಧಾರಿತ | ಸ್ವಚ್ಛ ಪ್ರಾಮಿಸ್ ಆಧಾರಿತ |
+| **JSON ಹ್ಯಾಂಡ್ಲಿಂಗ್** | ಕೈಯಿಂದ ವಿಶ್ಲೇಷಣೆ ಬೇಕು | ನಿರ್ಮಿಸಲಾಗದ `.json()` ವಿಧಾನವು |
+| **ದೋಷ ನಿರ್ವಹಣೆ** | ಸೀಮಿತ ದೋಷ ಮಾಹಿತಿ | ಸಂಪೂರ್ಣ ದೋಷ ವಿವರಗಳು |
+| **ಆಧುನಿಕ ಬೆಂಬಲ** | ಪಾರಂಪರ್ಯ ಅನುಕೂಲತೆ | ES6+ ಪ್ರಾಮಿಸ್ ಮತ್ತು ಅಸಿಂಕ್/ಅವೇಟ್ |
+
+> 💡 **ಬ್ರೌಸರ್ ಅನುಕೂಲತೆ**: ಶುಭವಾರ್ತೆಗೆ, Fetch API ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ! ನೀವು ನಿಶ್ಚಿತ ಆವೃತ್ತಿಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚು ಗೊತ್ತಾಯ್ತುಕೊಳ್ಳಬೇಕಾದರೆ, [caniuse.com](https://caniuse.com/fetch) ನಲ್ಲಿ ಸಂಪೂರ್ಣ ಅನುಕೂಲತಾ ಕಥೆಯನ್ನು ನೋಡಿ.
+> 
+**ನೀವು ತಿಳಿಯಬೇಕಾಗಿರುವುದು**:
+- ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಸಫಾರಿ ಮತ್ತು ಎಡ್ಜ್‌ನಲ್ಲಿ ಅದ್ಭುತವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ (ಯಾವುದೇ ಬಳಕೆದಾರರ ಹಾಜರಾತಿಯ ತಾಣಗಳು)
+- ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್‌ಗೆ ಮಾತ್ರ ಹೆಚ್ಚುವರಿ ಸಹಾಯ ಬೇಕು (ನಿಜವಾಗಿಯೂ, IE ಹೋಗಲು ಸಮಯವಾಗಿದೆ)
+- ನಾವು ನಂತರ ಬಳಸುವ ಆಸುಂದರ ಅಸಿಂಕ್/ಅವೇಟ್ ಮಾದರಿಗಳಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ
+
+### ಬಳಕೆದಾರ ಲಾಗಿನ್ ಮತ್ತು ಡೇಟಾ ಪಡೆದಿಸಿಕೊಳ್ಳುವಿಕೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು
+
+ಇದೀಗ ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸ್ಥಿರ ಪ್ರದರ್ಶನದಿಂದ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿ ಪರಿವರ್ತಿಸುವ ಲಾಗಿನ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಅನುಷ್ಟಾನಗೊಳಿಸೋಣ. ಭದ್ರಸേനಾ ಸೌಲಭ್ಯಗಳಲ್ಲಿ ಉಪಯೋಗಿಸುವ ಪ್ರಮಾಣೀಕರಣ ಪ್ರೋಟೋಕಾಲ್‌ಗಳಂತೆ, ನಾವು ಬಳಕೆದಾರರ ವಿವರಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತೇವೆ ಮತ್ತು ನಂತರ ಅವರ ನಿರ್ದಿಷ್ಟ ಡೇಟಾಕ್ಕೆ ಪ್ರವೇಶ ನೀಡುತ್ತೇವೆ.
+
+ನಮಗೆ ಇದು ಹಂತ ಹಂತವಾಗಿ ನಿರ್ಮಿಸುವೆವು, ಮೂಲಭೂತ ಪ್ರಮಾಣೀಕರಣದಿಂದ ಪ್ರಾರಂಭಿಸಿ ನಂತರ ಡೇಟಾ ಪಡೆಯುವ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಸೇರಿಸುವುದು.
+
+#### ಹಂತ 1: ಲಾಗಿನ್ ಫಂಕ್ಷನ್ ಆಧಾರಶಿಲೆಯನ್ನು ಸೃಷ್ಟಿಸಿ
+
+ನಿಮ್ಮ `app.js` ಫೈಲ್ ತೆರೆಯಿರಿ ಮತ್ತು ಹೊಸ `login` ಫಂಕ್ಷನ್ ಸೇರಿಸಿ. ಇದು ಬಳಕೆದಾರದ ಪ್ರಮಾಣೀಕರಣ ಪ್ರಕ್ರಿಯೆ ನಿರ್ವಹಿಸುತ್ತದೆ:
+
+```javascript
+async function login() {
+  const loginForm = document.getElementById('loginForm');
+  const user = loginForm.user.value;
+}
+```
+
+**ಇದನ್ನು ನಾವು ವಿವರಿಸೋಣ:**
+- ಆ `async` ಕೀವರ್ಡ್‌? ಅದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ "ಈ ಫಂಕ್ಷನ್ ಕೆಲವು ಬಾರಿ ಕಾಯಬೇಕಾಗಬಹುದು" ಎಂದು ಹೇಳುತ್ತಿದೆ
+- ನಾವು ಪುಟದಿಂದ ಫಾರ್ಮ್ ಪಡೆದಿಕೊಂಡಿದ್ದೇವೆ (ಏನೂ ವಿಶೇಷವಿಲ್ಲ, ID ಮೂಲಕ ಹುಡುಕವಷ್ಟೇ)
+- ನಂತರ ಬಳಕೆದಾರ ಇಟ್ಟಿರುವ ವರ್ಗವನ್ನ ತೆಗೆದುಕೊಳ್ಳುತ್ತೇವೆ
+- ಇದು ದನಿ: ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ ಅನ್ನು ಅದರ `name` ಗುಣಲಕ್ಷಣದಿಂದ ನೇರವಾಗಿ ಆಕ್ಸೆಸ್ ಮಾಡಬಹುದು - ಹೆಚ್ಚುವರಿ getElementById ಕರೆಗಳ ಅವಶ್ಯಕತೆ ಇಲ್ಲ!
+
+> 💡 **ಫಾರ್ಮ್ ಆಕ್ಸೆಸ್ ಮಾದರಿ**: ಪ್ರತಿಯೊಂದು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣವು ಅದರ ಹೆಸರಿನ (HTML ನಲ್ಲಿ `name` ಗುಣಲಕ್ಷಣದ ಮೂಲಕ) ಪ್ರಾಪರ್ಟಿಯಾಗಿ ಫಾರ್ಮ್ ಎಲೆಮೆಂಟ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಲಭ್ಯವಿರುತ್ತದೆ. ಇದು ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ಸ್ವಚ್ಛವಾಗಿ, ಓದಲು ಸುಲಭವಾಗಿ ಪಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+#### ಹಂತ 2: ಖಾತೆ ಡೇಟಾ ಫೆಚಿಂಗ್ ಫಂಕ್ಷನ್ ಸೃಷ್ಟಿಸಿ
+
+ಬೀಗದ ನಂತರ, ನಾವು ಸರ್ವರ್‌ನಿಂದ ಖಾತೆ ಡೇಟಾ ಪಡೆಯಲು ಬಳಸುವ ವಿಶಿಷ್ಟ ಫಂಕ್ಷನ್ ರಚಿಸುವೆವು. ಇದು ನಿಮ್ಮ ನೋಂದಣಿ ಫಂಕ್ಷನ್ನಿಗೆ ಸಮಾನ ರೀತಿ ಆದರೆ ಡೇಟಾ ಪಡೆಯುವಿಕೆಯ ಮೇಲೆ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ:
+
+```javascript
+async function getAccount(user) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+**ಈ ಕೋಡ್ ಏನು ಸಾಧಿಸುತ್ತದೆ:**
+- **ಆಧುನಿಕ** `fetch` API ಅನ್ನು ಅಸಿಂಕ್ರೋನಸ್ ಅನ್ನು ವಿನಂತಿಸಲು ಬಳಸುತ್ತದೆ
+- **ಯೂಸರ್ ನೇಮ್** ಪರಾಮೀಟರ್‌తో ಗೇಟು ವಿನಂತಿಯ URL ರಚಿಸುತ್ತದೆ
+- **`encodeURIComponent()`** ಅನ್ನು URL ಗಳಲ್ಲಿ ವಿಶೇಷ ಅಕ್ಷರಗಳನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ನಿಭಾಯಿಸಲು ಅನ್ವಯಿಸುತ್ತದೆ
+- ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು JSON ಸ್ವರೂಪಕ್ಕೆ ಪರಿವರ್ತಿಸುತ್ತದೆ, ಇದು ಡೇಟಾ ನಿರ್ವಹಣೆಗೆ ಸುಲಭ
+- ದೋಷಗಳನ್ನು ಸಂಕಷ್ಟದಿಂದ ತಪ್ಪಿಸುತ್ತಾ, ದೋಷ ವಸ್ತುವನ್ನು ಹಿಂತಿರುಗಿಸುವ ಮೂಲಕ gracefully ನಿರ್ವಹಿಸುತ್ತದೆ
+
+> ⚠️ **ಭದ್ರತಾ ಟಿಪ್ಪಣಿ**: `encodeURIComponent()` ಕಾರ್ಯವಿಧಾನ URLಗಳ中特 ವಿಶೇಷ ಅಕ್ಷರಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ನೌಕಾ ಸಂವಹನದಲ್ಲಿ ಬಳಸುವ ಎನ್ಕೋಡಿಂಗ್ ವ್ಯವಸ್ಥೆಗಳಂತೆ, ಇದು ನಿಮ್ಮ ಸಂದೇಶ ನಿಖರವಾಗಿ ತಲುಪಿಸೋದು ಖಚಿತಪಡಿಸುತ್ತದೆ, "#" ಅಥವಾ "&" ಮುಂತಾದ ಅಕ್ಷರಗಳು ತಪ್ಪಾಗಿ ಅರ್ಥಹೀನವಾಗದಂತೆ ತಡೆಯುತ್ತದೆ.
+> 
+**ಇದಕ್ಕೆ ಏಕೆ ಮಹತ್ವವಿದೆ:**
+- ವಿಶೇಷ ಅಕ್ಷರಗಳು URLಗಳನ್ನು ಕೆಡು ಮುಗಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ
+- URL ತಿದ್ದುಪಡಿ ದಾಳಿಗಳಿಂದ ರಕ್ಷಣೆ ನೀಡುತ್ತದೆ
+- ನಿಮ್ಮ ಸರ್ವರ್ ಆವಶ್ಯಕ ಮಾಹಿತಿಯನ್ನು ಪಡೆಯುತ್ತದೆ
+- ಭದ್ರತೆಯಂತೆ ಕಾರ್ಯಕ್ರಮ ಬರೆಯುವ ಅಭ್ಯಾಸ ಅನುಸರಿಸುತ್ತದೆ
+
+#### HTTP GET ವಿನಂತಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+
+ನೀವು `fetch` ಬಳಸುವಾಗ ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಆಯ್ಕೆಗಳನ್ನು ನೀಡದೆ ಇರೋದಾದರೆ, ಅದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) ವಿನಂತಿಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ನಾವು ಮಾಡುತ್ತಿರುವುದು ಪರಿಪೂರ್ಣ: ಸರ್ವರ್ ಗೆ "ನಾನು ಈ ಬಳಕೆದಾರನ ಖಾತೆ ಡೇಟಾ ನೋಡಬಹುದೇ?" ಎಂದು ಕೇಳುವುದು.
+
+GET ವಿನಂತಿಗಳನ್ನು ಗ್ರಂಥಾಲಯದಿಂದ ಪುಸ್ತಕವನ್ನು ಬೇಧಿಕೊಳ್ಳುವಂತೆ ಭಾವಿಸಬಹುದು - ನೀವು ಈಗಾಗಲೇ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವುದನ್ನು ನೋಡಲು ಕೇಳುತ್ತಿದ್ದಾರೆ. POST ವಿನಂತಿಗಳು (ನೋಂದಣಿಗಾಗಿ ನಾವು ಬಳಸಿದ್ದದ್ದು) ಹೊಸ ಪುಸ್ತಕವನ್ನು ಸೇರಿಸುವಂತೆ.
+
+| GET ವಿನಂತಿ | POST ವಿನಂತಿ |
+|-------------|-------------|
+| **ಉದ್ದೇಶ** | ಈಗಾಗಲೇ ಇರುವ ಡೇಟಾ ಪಡೆಯುವುದು | ಹೊಸ ಡೇಟಾವನ್ನು ಸರ್ವರ್‌ಗೆ ಕಳುಹಿಸುವುದು |
+| **ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು** | URL ಪಥ/ವಿಚಾರ ಸರಣಿ ಯಲ್ಲಿ | ವಿನಂತಿ ದೇಹದಲ್ಲಿ |
+| **ಕ್ಯಾಶಿಂಗ್** | ಬ್ರೌಸರ್‌ಗಳು ಕ್ಯಾಶ್ ಮಾಡಬಹುದು | ಸಾಮಾನ್ಯವಾಗಿ ಕ್ಯಾಶ್ ಮಾಡದು |
+| **ಭದ್ರತೆ** | URL/ಲಾಗ್‌ಗಳಲ್ಲಿ ಕಾಣಿಸುತ್ತದೆ | ವಿನಂತಿ ದೇಹದಲ್ಲಿ ಮರೆಮಾಚಲ್ಪಟ್ಟಿದೆ |
+
+```mermaid
+sequenceDiagram
+    participant B as ಬ್ರೌಸರ್
+    participant S as ಸರ್ವರ್
+    
+    Note over B,S: GET ವಿನಂತಿ (ದತ್ತಾಂಶ ಪಡೆಯುವುದು)
+    B->>S: GET /api/accounts/test
+    S-->>B: 200 OK + ಖಾತೆ ದತ್ತಾಂಶ
+    
+    Note over B,S: POST ವಿನಂತಿ (ದತ್ತಾಂಶ ಸಲ್ಲಿಕೆ)
+    B->>S: POST /api/accounts + ಹೊಸ ಖಾತೆ ದತ್ತಾಂಶ
+    S-->>B: 201 ರಚಿಸಲಾಯಿತು + ದೃಢೀಕರಣ
+    
+    Note over B,S: ದೋಷ ನಿರ್ವಹಣೆ
+    B->>S: GET /api/accounts/nonexistent
+    S-->>B: 404 ಕಂಡುಬರುವುದಿಲ್ಲ + ದೋಷ ಸಂದೇಶ
+```
+#### ಹಂತ 3: ಎಲ್ಲವನ್ನೂ ಒಟ್ಟಿಗೆ ಸಂಪರ್ಕಿಸುವುದು
+
+ಈಗ ಸಮಾಧಾನಕಾರಿ ಹಂತ - ನಿಮ್ಮ ಖಾತೆ ಪಡೆಯುವ ಫಂಕ್ಷನ್ ಅನ್ನು ಲಾಗಿನ್ ಪ್ರಕ್ರಿಯೆಗೆ ಸಂಪರ್ಕಿಸೋಣ. ಎಲ್ಲವೂ ಇಲ್ಲಿ ಸ_free_বাংলবান್ಥಿ:
+
+```javascript
+async function login() {
+  const loginForm = document.getElementById('loginForm');
+  const user = loginForm.user.value;
+  const data = await getAccount(user);
+
+  if (data.error) {
+    return console.log('loginError', data.error);
+  }
+
+  account = data;
+  navigate('/dashboard');
+}
+```
+
+ಈ ಫಂಕ್ಷನ್ ಸ್ಪಷ್ಟ ಕ್ರಮವನ್ನು ಅನುಸರಿಸುತ್ತದೆ:
+- ಫಾರ್ಮ್ ಇಲಿನಪ್ಕೆಂದಿರುವ ಬಳಕೆದಾರ ಹೆಸರನ್ನು ತೆಗೆಯುವುದು
+- ಸರ್ವರ್‌ನಿಂದ ಬಳಕೆದಾರ ಖಾತೆ ಡೇಟಾವನ್ನು ವಿನಂತಿಸು
+- ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಸಂಭವಿಸುವ ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸು
+- ಯಶಸ್ವಿಯಾದಾಗ ಖಾತೆ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಿ, ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ನಾವಿಗೇಟ್ ಮಾಡು
+
+> 🎯 **ಅಸಿಂಕ್/ಅವೇಟ್ ಮಾದರಿ**: `getAccount` ಅಸಿಂಕ್ರೋನಸ್ ಫಂಕ್ಷನ್ ಆದ್ದರಿಂದ ನಾವು `await` ಕೀವರ್ಡ್ ಬಳಸಿ ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆ ಬರುವವರೆಗೆ ಕಾರ್ಯನಿರ್ವಹಣೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತೇವೆ. ಇದು ಅನಿಯಂತ್ರಿತ ಡೇಟಾದೊಂದಿಗೆ ಮುಂದುವರೆಯದಂತೆ ತಡೆಯುತ್ತದೆ.
+
+#### ಹಂತ 4: ನಿಮ್ಮ ಡೇಟಾ ಉಳಿಸುವ ಸ್ಥಳವನ್ನು ರಚಿಸುವುದು
+
+ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಲೋಡ್ ಆದ ನಂತರ ಖಾತೆ ಮಾಹಿತಿಯನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಲು ಒಂದೊಂದು ಸ್ಥಳ ಬೇಕು. ಇದನ್ನು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ನ ಶಾರ್ಟ್-ಟರ್ಮ್ ಮೆಮೊರಿ ಎಂದು ಭಾವಿಸಿ - ಪ್ರಸ್ತುತ ಬಳಕೆದಾರರ ಡೇಟಾ ತಿರುಗಿ ಬಳಸುವ ಸ್ಥಳ. `app.js` ಫೈಲ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಈ ಸಾಲು ಸೇರಿಸಿ:
+
+```javascript
+// ಇದು ಪ್ರಸ್ತುತ ಬಳಕೆದಾರನ ಖಾತೆ ಡೇಟಾವನ್ನು ಹಿಡಿದಿಡುತ್ತದೆ
+let account = null;
+```
+
+**ನಾವು ಇದನ್ನು ಯಾಕೆ ಬೇಕು:**
+- ಅಪ್ಲಿಕೇಶನ್‌ನಿಂದ ಎಲ್ಲಡೆ ಖಾತೆ ಡೇಟಾ ಪ್ರವೇಶ ಸಾಧ್ಯವಾಗುತ್ತದೆ
+- ಪ್ರಾರಂಭದಲ್ಲಿ `null` ಅಂದರೆ "ಯಾರೂ ಲಾಗಿನ್ ಆಗುತ್ತಿಲ್ಲ" ಎಂಬ ಅರ್ಥ
+- ಯಾರಾದರೂ ಯಶಸ್ವಿಯಾಗಿ ಲಾಗಿನ್ ಅಥವಾ ನೋಂದಣಿ ಮಾಡಿದಾಗ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತದೆ
+- ಏಕಮಾತ್ರ ನಿಜವಾದ ಮೂಲವಾಗಿದ್ದು, ಯಾರು ಲಾಗಿನ್ ಆಗಿದ್ದಾರೆ ಎಂಬ ಗೊಂದಲವಿಲ್ಲ
+
+#### ಹಂತ 5: ನಿಮ್ಮ ಫಾರ್ಮ್ ಅನ್ನು ಸಂಪರ್ಕಿಸಿ
+
+ಈಗ ನಿಮ್ಮ ಹೊಸ ಲಾಗಿನ್ ಫಂಕ್ಷನ್ ಅನ್ನು HTML ಫಾರ್ಮ್ ಗೆ ಸಂಪರ್ಕಿಸೋಣ. ಫಾರ್ಮ್ ಟ್ಯಾಗ್ ಹೀಗಾಗಿ ಅಪ್ಡೇಟ್ ಮಾಡಿ:
+
+```html
+<form id="loginForm" action="javascript:login()">
+  <!-- Your existing form inputs -->
+</form>
+```
+
+**ಈ ಸಣ್ಣ ಬದಲಾವಣೆ ಏನು ಮಾಡುತ್ತದೆ:**
+- ಫಾರ್ಮ್ ತನ್ನ ಡೀಫಾಲ್ಟ್ "ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡು" ನಡವಳಿಕೆ ನಿಲ್ಲಿಸುತ್ತದೆ
+- ನಿಮ್ಮ ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಂಕ್ಷನ್‌ಗೆ ಕರೆ ಮಾಡುತ್ತದೆ
+- ಎಲ್ಲವೂ ಸರಾಗ ಮತ್ತು ಸಿಂಗಲ್-ಪುಟ ಅಪ್ಲಿಕೇಶನ್ ನೆನಪಿಸಿಕೊಳ್ಳುತ್ತದೆ
+- ಬಳಕೆದಾರರು "ಲಾಗಿನ್" ಬಟನ್ ಒತ್ತಿದಾಗ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣ ನಿಮಗೆ ಲಭಿಸುತ್ತದೆ
+
+#### ಹಂತ 6: ನಿಮ್ಮ ನೋಂದಣಿ ಫಂಕ್ಷನ್ನನ್ನು ಸುಧಾರಿಸಿ
+
+ಸಮಾನತೆಯಿಗಾಗಿ, ನಿಮ್ಮ `register` ಫಂಕ್ಷನನ್ನು ಹೊಸ ಮೂಲಗಳಿಂದ ಖಾತೆ ಡೇಟಾ ಉಳಿಸುವುದು ಮತ್ತು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ನಾವಿಗೇಟ್ ಮಾಡುವಂಥದಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡಿ:
+
+```javascript
+// ನಿಮ್ಮ register ಫಂಕ್ಷನ್‌ನ ಕೊನೆಯಲ್ಲಿ ಈ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಿ
+account = result;
+navigate('/dashboard');
+```
+
+**ಈ ಸುಧಾರಣೆ ನೀಡುತ್ತದೆ:**
+- ನೋಂದಣಿಯಿಂದ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ತಿರುವು ಸೌಕರ್ಯ
+- ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ಪ್ರಕ್ರಿಯೆಗಳ ನಡುವಣ ಸಮಾನ ಅನುಭವ
+- ಯಶಸ್ವಿ ನೋಂದಣಿಯ ನಂತರ ತಕ್ಷಣ ಖಾತೆ ಡೇಟಾ ಲಭ್ಯತೆ
+
+#### ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಪರೀಕ್ಷಿಸಿ
+
+```mermaid
+flowchart TD
+    A[ಬಳಕೆದಾರರು ಪ್ರಾಮಾಣಿಕತೆ ನಮೂದಿಸುತ್ತಾರೆ] --> B[ಲಾಗಿನ್ ಕಾರ್ಯವನ್ನು ಕರೆಸಲಾಗುತ್ತದೆ]
+    B --> C[ಸರ್ವರ್‌ನಿಂದ ಖಾತೆ ಡೇಟಾವನ್ನು ಹಿಂಪಡೆಯಿರಿ]
+    C --> D{ಡೇಟಾ ಯಶಸ್ವಿಯಾಗಿ ಸ್ವೀಕರಿಸಲಾಯಿತು?}
+    D -->|ಹೌದು| E[ಖಾತೆ ಡೇಟಾವನ್ನು ಜಾಗತಿಕವಾಗಿ ಸಂಗ್ರಹಿಸಿ]
+    D -->|ಇಲ್ಲ| F[ದೋಷ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ]
+    E --> G[ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ನಾವಿಗೇಟ್ ಮಾಡಿ]
+    F --> H[ಬಳಕೆದಾರರು ಲಾಗಿನ್ ಪುಟದಲ್ಲಿ ನಿಲ್ಲುತ್ತಾರೆ]
+```
+**ಈಗ ಅದನ್ನು ಪರೀಕ್ಷಿಸಲು ಸಮಯ:**
+1. ಹೊಸ ಖಾತೆ ಸೃಷ್ಟಿಸಿ ಎಲ್ಲವೂ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿದೆಯೆ ನೋಡಿ
+2. ಅದೇ ಸಕ್ರಿಯತೆಗಳನ್ನು ಬಳಸಿ ಲಾಗಿನ್ ಪ್ರಯತ್ನಿಸಿ
+3. ಇಲ್ಲವಿದ್ದಲ್ಲಿ ಬ್ರೌಸರ್ ಕಾಂಸೋಲ್ನಲ್ಲಿ (F12) ತಪಾಸಿಸಿ
+4. ಯಶಸ್ವಿ ಲಾಗಿನ್ ನಂತರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ಹೋಗುತ್ತಿದ್ದೀರಾ ಎಂದು ಖಚಿತಗೊಳ್ಳಿ
+
+ಯಾವುದಾದರೂ ತಪ್ಪಿದ್ದಲ್ಲಿ, ಭಯಪಡುವ ಅಗತ್ಯವಿಲ್ಲ! ಹೆಚ್ಚಿನ ಸಮಸ್ಯೆಗಳು ನುಡಿಪಟಗಳ ಹಾಗಿರುವ ಸರಳ ದೋಷಗಳಾಗಿರುತ್ತವೆ ಅಥವಾ API ಸರ್ವರ್ ಪ್ರಾರಂಭಿಸಲು ಮರೆಯುವಂತಿರುವ ಪರಿಸ್ಥಿತಿ.
+
+#### ಕ್ರಾಸ್-ಓರಿಜಿನ್ ಮೈಜಿಕ್ ಬಗ್ಗೆ ಚುಟುಕು ಮಾತು
+
+ನೀವು ಆಶ್ಚರ್ಯಪಡುವಿರಾ: "ನನ್ನ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಮತ್ತು API ಸರ್ವರ್ ಭಿನ್ನ ಪೋರ್ಟುಗಳ ಮೇಲೆ ಚಾಲನೆ ಆಗುತ್ತಿದೆಯಾದರೂ, ಅವುಗಳು ಹೇಗೆ ಸಂವಹನ ಮಾಡುತ್ತಿವೆ?" ಅದ್ಭುತ ಪ್ರಶ್ನೆ! ಈ ವಿಷಯವೇ ಪ್ರತಿಯೊಂದು ವೆಬ್ ಡೆವಲಪರ್ ಇಡೆ ಹತ್ತಿರದಿಂದ ಎದುರಿಸುವುದು.
+
+> 🔒 **ಕ್ರಾಸ್-ಓರಿಜಿನ್ ಭದ್ರತೆ**: ಬ್ರೌಸರ್‌ಗಳು "ಒಂದೇ ಮೂಲತೆ ನীতি" ಹಮ್ಮಿಕೊಂಡಿದ್ದು, ವಿಭಿನ್ನ ಡೊಮೇನ್‌ಗಳ ನಡುವೆ ಅನಧಿಕೃತ ಸಂವಹನವನ್ನು ತಡೆಯುತ್ತವೆ. ಪೆಂಟಾಗನ್ ತಪಾಸಣಾ ಕೇಂದ್ರದಂತೆ, ಅವು ಸಂವಹನಸಾಧ್ಯವೆಂದು ಖಚಿತಪಡಿಸಿಕೊಂಡ ಬಳಿಕ ಮಾತ್ರ ಡೇಟಾ ವರ್ಗಾವಣೆ ಅನುಮತಿಸುತ್ತವೆ.
+> 
+**ನಮ್ಮ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ:**
+- ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ `localhost:3000`(ಡೆವಲಪ್‌ಮೆಂಟ್ ಸರ್ವರ್) ನಲ್ಲಿ ಜಾರುತ್ತಿದೆ
+- ನಿಮ್ಮ API ಸರ್ವರ್ `localhost:5000` (ಬ್ಯಾಕ್ಎಂಡ್ ಸರ್ವರ್) ನಲ್ಲಿ ಜಾರುತ್ತಿದೆ
+- API ಸರ್ವರ್ CORS ಹೆಡರ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದು ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಸಂವಹನಕ್ಕೆ ಸ್ಪಷ್ಟ ಅನುಮತಿ ನೀಡುತ್ತದೆ
+
+ಈ ಸಂರಚನೆ ಯೋಚಿಸೋಣವು ಹೀಗಿದೆ: ಫ್ರಂಟ್‌ಎಂಡ್ ಮತ್ತು ಬ್ಯಾಕ್‌ಎಂಡ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ವಿಭಿನ್ನ ಸರ್ವರ್‌ಗಳಲ್ಲಿ ಚಲಿಸುತ್ತವೆ.
+
+> 📚 **ಹೆಚ್ಚು ಕಲಿಯಿರಿ**: APIಗಳು ಮತ್ತು ಡೇಟಾ ಪಡೆಯುವಿಕೆ ಕುರಿತ ಈ [Microsoft Learn ಮೋಡ್ಯೂಲ್](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) ಮೂಲಕ ಆಳವಾಗಿ ತಿಳಿಯಿರಿ.
+
+## HTML ನಲ್ಲಿ ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಜೀವಂತಗೊಳಿಸುವುದು
+
+ಈಗ ನಾವು ಪಡೆಯಲಾದ ಡೇಟಾವನ್ನು ಬಳಕೆದಾರರಿಗೆ DOM ಮಾದರಿಯಲ್ಲಿ ತೋರಿಸೋಣ. ಡಾರ್ಕ್‌ರೂಮ್‌ನಲ್ಲಿ ಫೋಟೋಗಳನ್ನು ಪ್ರಕ್ರಿಯೆ ಮಾಡುವಂತೆ, ನಾವು ಅದೊಂದ -*ನಿರೀಕ್ಷಿಸಲಾಗದ* ಡೇಟಾವನ್ನು ತೆರೆದಡೆದುಕೊಳ್ಳುವ ಹಾಗೂ ಬಳಕೆದಾರರೊಂದಿಗೆ ಸಂವಾದ ಮಾಡಬಲ್ಲ ಮಾದರಿಯಲ್ಲಿಗೆ ಪರಿವರ್ತಿಸುತ್ತೇವೆ.
+DOM ಮ್ಯಾನಿಪುಲೇಶನ್ ಅಂದರೆ ಸ್ಥಿರ ವೆಬ್ ಪುಟಗಳನ್ನು ಸಕ್ರಿಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಾಗಿ ಪರಿವರ್ತಿಸುವ ತಂತ್ರಜ್ಞಾನ, ಅದು ಬಳಕೆದಾರರ ಸಂವಹನ ಮತ್ತು ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಗಳ ಆಧಾರದ ಮೇಲೆ ಅವರ ವಿಷಯವನ್ನು ನವೀಕರಿಸುತ್ತದೆ.
+
+### ಕೆಲಸಕ್ಕೆ ಸರಿಯಾದ ಉಪಕರಣವನ್ನು ಆಯ್ಕೆಮಾಡುವುದು
+
+ನೀವು ನಿಮ್ಮ HTML ಅನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ನವೀಕರಿಸುವಾಗ, ಹಲವಾರು ಆಯ್ಕೆಗಳಿವೆ. ಇದನ್ನು ಉಪಕರಣಸಂಚಯದಲ್ಲಿರುವ ವಿಭಿನ್ನ ಸಾಧನಗಳಂತೆ ಪರಿಗಣಿಸಿ - ಪ್ರತಿ ಉಪಕರಣವು ವಿಶೇಷ ಕೆಲಸಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ:
+
+| ವಿಧಿ | ಇದರ ಉತ್ತಮ ಪ್ರಯೋಜನಗಳು | ಯಾವಾಗ ಬಳಸಬೇಕು | ಸುರಕ್ಷತಾ ಮಟ್ಟ |
+|--------|---------------------|----------------|--------------|
+| `textContent` | ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಪ್ರದರ್ಶಿಸುವುದು | ನೀವು ಎಡ ಪರೀಕ್ಷೆಗೆ ಬರೆದು ತೋರಿಸುವಾಗ | ✅ ದೃಢವಾಗಿರುತ್ತದೆ |
+| `createElement()` + `append()` | ಸಂಕೀರ್ಣ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸುವುದು | ಹೊಸ ವಿಭಾಗಗಳು/ಪಟ್ಟಿಗಳನ್ನು ರಚಿಸುವಾಗ | ✅ ಬಲವಾದದು |
+| `innerHTML` | HTML ವಿಷಯವನ್ನು ಹೊಂದಿಸುವುದು | ⚠️ ಇದನ್ನು ತಪ್ಪಿಸಲು ಪ್ರಯತ್ನಿಸಿ | ❌ ಅಪಾಯಕರವಾಗಿದೆ |
+
+#### ಪಠ್ಯವನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ತೋರಿಸುವ ಮಾರ್ಗ: textContent
+
+[`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) ಗುಣಲಕ್ಷಣವು ಬಳಕೆದಾರರ ಅಥವಾ ಅನ್ಯ ಪಠ್ಯವನ್ನು ತೋರಿಸುವಾಗ ನಿಮ್ಮ ಅತ್ಯುತ್ತಮ ಗೆಳೆಯ. ಇದು ನಿಮ್ಮ ವೆಬ್‌ಪೇಜ್‌ಗೆ ಬೌನ್ಸರ್ ಇದ್ದಂತೆ - ಏನೇನೇ ಹಾನಿಕಾರಕವೇ ಇಲ್ಲದೆ ತಲುಪುತ್ತದೆ:
+
+```javascript
+// ಪಠ್ಯವನ್ನು ನವೀಕರಿಸುವ ಸುರಕ್ಷಿತ, ನಂಬಬಹುದಾದ ವಿಧಾನ
+const balanceElement = document.getElementById('balance');
+balanceElement.textContent = account.balance;
+```
+  
+**textContent ನ ಲಾಭಗಳು:**  
+- ಎಲ್ಲವನ್ನೂ ಸರಳ ಪಠ್ಯವಾಗಿ ಪರಿಗಣಿಸುತ್ತದೆ (ಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯ ನಿರ್ವಹಣೆಯನ್ನು ತಡೆಯುತ್ತದೆ)  
+- ಮುಂಗಡದಲ್ಲಿರುವ ವಿಷಯವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ತೆರವುಗೊಳಿಸುತ್ತದೆ  
+- ಸರಳ ಪಠ್ಯ ನವೀಕರಣಗಳಿಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ  
+- ದುಷ್ಟ ವಿಷಯಗಳಿಂದ ರಕ್ಷಣೆಗಾಗಿ ಒಳಗಿರುವ ಸುರಕ್ಷತೆ ಒದಗಿಸುತ್ತದೆ  
+
+#### ಡೈನಾಮಿಕ್ HTML ಅಂಶಗಳನ್ನು ರಚಿಸುವುದು
+
+ಹೆಚ್ಚಿನ ಸಂಕೀರ್ಣ ವಿಷಯಕ್ಕಾಗಿ, [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) ಅನ್ನು [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) ವಿಧಾನೊಡನೆ ಸಂಯೋಜಿಸಿ:
+
+```javascript
+// ಹೊಸ ಅಂಶಗಳನ್ನು ರಚಿಸುವ ಸುರಕ್ಷಿತ ವಿಧಾನ
+const transactionItem = document.createElement('div');
+transactionItem.className = 'transaction-item';
+transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
+container.append(transactionItem);
+```
+  
+**ಈ ವಿಧಾನವನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು:**  
+- ಹೊಸ DOM ಅಂಶಗಳನ್ನು ಪ್ರೋಗ್ರಾಮ್ ತಂತ್ರದೊಂದಿಗೆ ಸೃಷ್ಟಿಸುತ್ತದೆ  
+- ಅಂಶದ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ವಿಷಯದ ಮೇಲೆ ಪೂರ್ಣ ನಿಯಂತ್ರಣವನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತದೆ  
+- ಸಂಕೀರ್ಣ, ಗಂಟಲಿನೊಳಗಿನ ಅಂಶ სტ್ರಕ್ಚರ್‌ಗಳನ್ನು ಸಹ ಅನುಮತಿಸುತ್ತದೆ  
+- ರಚನೆ ಮತ್ತು ವಿಷಯವನ್ನು ವಿಭಜಿಸುವುದರಿಂದ ಸುರಕ್ಷತೆ ಕಾಯ್ದಿರುತ್ತದೆ  
+
+> ⚠️ **ಸುರಕ್ಷತಾ ಪರಿಗಣನೆ**: ಹಲವಾರು ಪಾಠಗಳಲ್ಲಿ [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) ಕಾಣಸಿಗಬಹುದು, ಅದು ನೇರವಾಗಿ ಸೇರ್ಪಡೆ ಮಾಡಿದ ಸ್ಕ್ರಿಪ್ಟುಗಳು ನಡೆಸಬಹುದು. CERNನಲ್ಲಿ ಅನುಮತಿಸದ ಕೋಡ್ ಅನ್ವಯವನ್ನು ತಡೆಯುವ ಸುರಕ್ಷತಾ ನಿಯಮಾವಳಿಗಳಂತೆ, `textContent` ಮತ್ತು `createElement` ಉಪಯೋಗಿಸುವುದು ಹೆಚ್ಚು ಸುರಕ್ಷಿತ ಪರ್ಯಾಯಗಳು.  
+>   
+**innerHTML ನ ಅಪಾಯಗಳು:**  
+- ಬಳಕೆದಾರರ ಡೇಟಾದ `<script>` ಟ್ಯಾಗ್ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ  
+- ಕೋಡ್ ಇಂಜೆಕ್ಷನ್ ದಾಳಿಗೆ ಒಳಪಡಬಹುದಾಗಿದೆ  
+- ಭದ್ರತಾ ಭಂಗಗಳಿಗೆ ಅವಕಾಶ ಸೃಷ್ಟಿಸುತ್ತದೆ  
+- ನಾವು ಉಪಯೋಗಿಸುವ ಸುರಕ್ಷಿತ ಪರ್ಯಾಯಗಳು ಸಮಾನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ  
+
+### ದೋಷಗಳನ್ನು ಬಳಕೆದಾರ ಸ್ನೇಹಿಯಾಗಿ ಮಾಡುವುದು
+
+ಈಗಾಗಲೇ, ಲಾಗಿನ್ ದೋಷಗಳು ಬ್ರೌಸರಿನ ಕಾನ್ಸೋಲ್‌ನಲ್ಲಿ ಮಾತ್ರ ತೋರುತ್ತಿವೆ, ಅದು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸುವುದಿಲ್ಲ. ಪೈಲಟ್‌ನ ಆಂತರಿಕ ನಿರ್ಣಯಗಳ ಮತ್ತು ಪ್ರಯಾಣಿಕರ ಮಾಹಿತಿ ವ್ಯವಸ್ಥೆಯ ನಡುವಿನ ಭೇದದಂತೆ, ನಾವು ಸರಿಯಾದ ಮಾರ್ಗದಲ್ಲಿ ಪ್ರಮುಖ ಮಾಹಿತಿಯನ್ನು ನುಡಿಸಲು ಅಗತ್ಯವಿದೆ.
+
+ದೋಷ ಸಂದೇಶಗಳನ್ನು ಗೋಚರಿಸುವ ಮೂಲಕ ಬಳಕೆದಾರರಿಗೆ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡಬಹುದು, ಏನು ತಪ್ಪು ಆಗಿದೆ ಮತ್ತು ಮುಂದೆ ಏನು ಮಾಡಬೇಕು ಎಂಬುದನ್ನು ತಿಳಿಸಲು.
+
+#### ಹೆಜ್ಜೆ 1: ದೋಷ ಸಂದೇಶಗಳಿಗಾಗಿ ಸ್ಥಳ ಸೇರಿಸುವುದು
+
+ಮೊದಲು, ನಿಮ್ಮ HTML ನಲ್ಲಿ ದೋಷ ಸಂದೇಶಗಳಿಗೆ ಮನೆ ನೀಡೋಣ. ಲಾಗಿನ್ ಬಟನ್ ಮುಂದೆ ಇದನ್ನು ಸೇರಿಸಿ, ಇದರಿಂದ ಬಳಕೆದಾರರು ಸಹಜವಾಗಿ ನೋಡುತ್ತಾರೆ:
+
+```html
+<!-- This is where error messages will appear -->
+<div id="loginError" role="alert"></div>
+<button>Login</button>
+```
+  
+**ಇಲ್ಲಿ ಏನು ಆಗುತ್ತಿದೆ:**  
+- ನಾವು ಖಾಲಿ ಕಂಟೈನರ್ ಸೃಷ್ಟಿಸುತ್ತಿದ್ದೇವೆ, ಅದು ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಗೋಚರಿಸುತ್ತದೆ  
+- ಅದು ಬಳಕೆದಾರರು "Login" ಕ್ಲಿಕ್ ಮಾಡಿದ ನಂತರ ಸಹಜವಾಗಿ ನೋಡಲಿರುವ ಸ್ಥಳದಲ್ಲಿದೆ  
+- ಅಲ್ಲಿ ಇರುವ `role="alert"` ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ಮಾಹಿತಿ ನೀಡುತ್ತದೆ - "ಇದು ಮಹತ್ವದದ್ದು!"  
+- ವಿಶಿಷ್ಟ `id` ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಸುಲಭ ಗುರಿ ಒದಗಿಸುತ್ತದೆ  
+
+#### ಹೆಜ್ಜೆ 2: ಉಪಯುಕ್ತ ಸಹಾಯಕ ಕಾರ್ಯವನ್ನು ರಚಿಸುವುದು
+
+ಯಾವುದೇ ಅಂಶದ ಪಠ್ಯವನ್ನು ನವೀಕರಿಸಬಹುದಾದ ಒಂದು ಸರಳ ಕಾರ್ಯವನ್ನು ರಚಿಸೋಣ. ಇದು "ಒಂದು ಬಾರಿ ಬರೆದು ಎಲ್ಲೆಡೆ ಉಪಯೋಗಿಸು" ಮಾದರಿಯ ಕಾರ್ಯ:
+
+```javascript
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+  
+**ಈ ಕಾರ್ಯದ ಲಾಭಗಳು:**  
+- ಒಂದು ಅಂಶದ ಐಡಿ ಮತ್ತು ಪಠ್ಯವನ್ನು ಮಾತ್ರ ಬೇಕು  
+- DOM ಅಂಶಗಳನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಹುಡುಕಿ ನವೀಕರಿಸುತ್ತದೆ  
+- ಪುನರಾಯೋಜನೀಯ ಮಾದರಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ  
+- ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಸಮಾನ ನವೀಕರಣ ಕ್ರಮ ಕಾಯ್ದಿರಿಸುತ್ತದೆ  
+
+#### ಹೆಜ್ಜೆ 3: ದೋಷಗಳನ್ನು ಬಳಕೆದಾರರಿಗೆ ಕಾಣುವಂತೆ ತೋರಿಸುವುದು
+
+ಈಗ ಗೂಢ ಸಮರಾದ್ಯಾತ್ರೆಯ ಸಂದೇಶವನ್ನು ಬದಲಿಸಿ, ಬಳಕೆದಾರರು ನಿಜವಾಗಿಯೂ ನೋಡಬಹುದಾದ ದೋಷ ಸಂದೇಶವನ್ನು ತೋರಿಸೋಣ. ನಿಮ್ಮ ಲಾಗಿನ್ ಕಾರ್ಯವನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಿ:
+
+```javascript
+// ಕೇವಲ ಕನ್‌ಸೋಲ್‌ಗೆ ದಾಖಲು ಮಾಡದಿರುವ ಬದಲು, ಬಳಕೆದಾರಿಗೆ ಏನು ತಪ್ಪಾಗಿದೆ ಎಂದು ತೋರಿಸಿ
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+  
+**ಈ ಸಣ್ಣ ಬದಲಾವಣೆ ಡೋಡ ಪ್ರಭಾವ ಉಂಟುಮಾಡುತ್ತದೆ:**  
+- ದೋಷ ಸಂದೇಶಗಳು ಬಳಕೆದಾರರು ನೋಡುತ್ತಿರುವ ಸ್ಥಳದಲ್ಲಿ ತೋರುತ್ತವೆ  
+- ಇನ್ನೂ ಕಮ್ಗಳ ಗೋಚರಿಸದ ವೈಫಲ್ಯಗಳಿಲ್ಲ  
+- ಬಳಕೆದಾರರಿಗೆ ತಕ್ಷಣದ, ವ್ಯವಹಾರಯುಕ್ತ ಪ್ರತಿಕ್ರಿಯೆ ಸಿಗುತ್ತದೆ  
+- ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ವೃತ್ತಿಪರ ಮತ್ತು ಚಿಂತನೆಯುತ್ತಿರುತ್ತದೆ  
+
+ಈಗ ತಪ್ಪಾದ ಖಾತೆ ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗ, ಅಲ್ಲಿ ಸಹಾಯಕ ದೋಷ ಸಂದೇಶವನ್ನು ನೋಡಬಹುದಾಗಿದೆ!
+
+![Screenshot showing the error message displayed during login](../../../../translated_images/login-error.416fe019b36a6327.kn.png)
+
+#### ಹೆಜ್ಜೆ 4: ಪ್ರವೇಶಕಾರ್ಯದಕ್ಷತೆಗೆ ಹೊಂದಿಕೊಳ್ಳುವುದು
+
+ನಮ್ಮ `role="alert"` ಅಂಶ ಒಂದು ಲೈವ್ ರೀಜನ್ನ ಪೈಕಿ ಒಂದು - [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) ರೀತಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಅದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ತಕ್ಷಣ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರಕಟಿಸುತ್ತದೆ:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+  
+**ಈದಕ್ಕೆ ಕಾರಣವೇನು:**  
+- ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಕೆದಾರರು ದೋಷ ಸಂದೇಶವನ್ನು ತಕ್ಷಣ ಕೇಳುತ್ತಾರೆ  
+- ಎಲ್ಲರೂ ಸಮಾನ ಮಾಹಿತಿಯನ್ನು ಪಡೆಯುತ್ತಾರೆ, ಅವರು ಹೇಗೆ ನವಿಗೇಟ್ ಆಗುತ್ತಾರೆಯೋ ಅವನ ಮೇಲೆ ಅವಲಂಬಿಸಿದೆ ಇಲ್ಲ  
+- ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಹೆಚ್ಚು ಅನೇಕರಿಂದ ಉಪಯೋಗಿಸಬಹುದಾದಂತೆ ಮಾಡುತ್ತದೆ  
+- ನಿಮಗೆ ಒಳಗೊಂಡ ಅನುಭವಗಳ ನಿರ್ಮಾಣದ ಹಿಂದಿದ್ದೇವೆ ಎಂದು ತೋರಿಸುತ್ತದೆ  
+
+ಇಂತಹ ಸಣ್ಣ ಸ್ಪರ್ಶಗಳು ಉತ್ತಮ ಡೆವಲಪರ್‌ಗಳನ್ನು ಅತ್ಯುತ್ತಮ ಡೆವಲಪರ್‌ಗಳಾಗಿ ವಿಭಜಿಸುತ್ತವೆ!
+
+### 🎯 ಶಿಕ್ಷಣ ಪರಿಶೀಲನೆ: ಪ್ರಮಾಣೀಕರಣ ಮಾದರಿಗಳು
+
+**ನಿಂತು ಚಿಂತಿಸಿ**: ನೀವು ಸಂಪೂರ್ಣ ಪ್ರಮಾಣೀಕರಣ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಅನುಸ್ಥಾಪಿಸಿದ್ದೀರಾ. ಇದು ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಪ್ರಮುಖ ಮಾದರಿಯಾಗಿದೆ.
+
+**ತ್ವರಿತ ಸ್ವ-ಮೌಲ್ಯಮಾಪನ:**  
+- API ಕಾಲ್‌ಗಳಿಗೆ async/await ಯಾಕೆ ಬಳಸಿಕೊಳ್ಳಲಾಗುತ್ತದೆ ಎಂದು ವಿವರಿಸಬಹುದೇ?  
+- `encodeURIComponent()` ಫಂಕ್ಷನ್ ಮರೆತಿದರೆ ಏನಾಗುತ್ತದೆ?  
+- ನಮ್ಮ ದೋಷ ನಿರ್ವಹಣೆಯಿಂದ ಬಳಕೆದಾರ ಅನುಭವ ಹೇಗೆ ಸುಧಾರಿಸುತ್ತದೆ?  
+
+**ನೈಜ-ಜಗತ್ತಿನ ಸಂಪರ್ಕ:** ನೀವು ಇಲ್ಲಿ ಕಲಿತಿರುವ ಮಾದರಿಗಳು (async ಡೇಟಾ ಪಡೆಯುವುದು, ದೋಷ ನಿರ್ವಹಣೆ, ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ) ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮದಿಂದ ಇ-ಕಾಮರ್ಸ್ ತಾಣಗಳವರೆಗೆ ಪ್ರತಿಯೊಂದು ನೈಜ ವೆಬ್ ಅಪ್ಲಿಕೇಶನಲ್ಲಿಯೂ ಉಪಯೋಗಿಸುತ್ತಾರೆ. ನೀವು ಉತ್ಪಾದನಾ ಮಟ್ಟದ ಕೌಶಲ್ಯಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೀರಿ!
+
+**ಸವಾಲಿನ ಪ್ರಶ್ನೆ:** ಈ ಪ್ರಮಾಣೀಕರಣ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಹುಬಳಕೆದಾರ ಪಾತ್ರಗಳನ್ನು (ಗ್ರಾಹಕ, ಆಡಳಿತಗಾರ, ಟೆಲರ್) ಸಮರ್ಥಿಸಲು ನೀವು ಹೇಗೆ ಬದಲಾಯಿಸಬಹುದು? ಡೇಟಾ ರಚನೆ ಮತ್ತು ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಬದಲಾವಣೆಗಳ ಬಗ್ಗೆ ಯೋಚಿಸಿ.
+
+#### ಹೆಜ್ಜೆ 5: ನೋಂದಣಿ ಪ್ರಕ್ರಿಯೆಗೆ ಇದೇ ಮಾದರಿಯನ್ನು ಅನ್ವಯಿಸಿ
+
+ಒಂದೇ ರೀತಿಗೆ, ನಿಮ್ಮ ನೋಂದಣಿ ಫಾರ್ಮ್ನಲ್ಲೂ ಇದೇ ದೋಷ ನಿಯಂತ್ರಣವನ್ನು ಜಾರಿಗೊಳಿಸಿ:
+
+1. ನಿಮ್ಮ ನೋಂದಣಿ HTML ಗೆ ದೋಷ ಪ್ರದರ್ಶನ ಅಂಶ ಸೇರಿಸಿ:  
+```html
+<div id="registerError" role="alert"></div>
+```
+  
+2. ಇದೀಗ ನಿಮ್ಮ ನೋಂದಣಿ ಕಾರ್ಯವನ್ನು ನವೀಕರಿಸಿ ಎಂದೇ ಅದೇ ದೋಷ ಪ್ರದರ್ಶನ ಮಾದರಿಯನ್ನು ಬಳಸಲು:  
+```javascript
+if (data.error) {
+  return updateElement('registerError', data.error);
+}
+```
+  
+**ದೋಷ ನಿರ್ವಹಣೆಯ ಸರ್ವಜ್ಞ ಲಾಭಗಳು:**  
+- ಎಲ್ಲಾ ಫಾರ್ಮ್ಗಳಲ್ಲಿ ಸಮಾನ ಬಳಕೆದಾರ ಅನುಭವ ನೀಡುವುದು  
+- ಪರಿಚಿತ ಮಾದರಿಯನ್ನು ಬಳಸಿ ಮಾನಸಿಕ ಭಾರ ತಗ್ಗಿಸುವುದು  
+- ಮರುಬಳಕೆ ಸಾಧ್ಯವಾದ ಕೋಡ್‌ನೊಂದಿಗೆ ನಿರ್ವಹಣೆ ಸರಳಗೊಳಿಸುವುದು  
+- ಅಪ್ಲಿಕೇಶನ್ മുഴುವರೆಗೂ ಪ್ರವೇಶಕಾರ್ಯದಕ್ಷತೆ ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸುವುದು  
+
+## ನಿಮ್ಮ ಸಕ್ರಿಯ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ರಚಿಸುವುದು
+
+ನಾವು ಈಗ ನಿಮ್ಮ ಸ್ಥಿರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು ಕಾಲಮಾನಿಕ ಖಾತೆ ಡೇಟಾವನ್ನು ತೋರಿಸುವ ಡೈನಾಮಿಕ್ ಇಂಟರ್ಫೇಸ್ ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತೇವೆ. ಛಾಪಿತ ವಿಮಾನ ನಿರ್ವಹಣಾ ವೇಳಾಪಟ್ಟಿಯ ಮತ್ತು ವಿಮಾನ ನಿಲ್ದಾಣದ ನೇರಪ್ರವಾಹ ತಟ್ಟೆಯ ನಡುವಿನ ಭೇದದಂತೆ, ನಾವು ಸ್ಥಿರ ಮಾಹಿತಿಯಿಂದ ನಿಜಸಮಯ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಪ್ರದರ್ಶನಕ್ಕೆ ಹೋಗಲು ಹೊರಟಿದ್ದೇವೆ.
+
+ನೀವು ಕಲಿತ DOM ಮ್ಯಾನಿಪುಲೇಶನ್ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಉಪಯೋಗಿಸಿ, ನವೀಕರಿಸುವ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ನಿರ್ಮಿಸುವೆವು.
+
+### ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಪರಿಚಯಿಸಿಕೊಳ್ಳಿ
+
+ನಾವು ನಿರ್ಮಾಣ ಆರಂಭಿಸುವ ಮೊದಲು, ನಿಮ್ಮ ಸರ್ವರ್ ಏನೆನಾದರೂ ಪ್ರಯೋಜನಕಾರಿ ಮಾಹಿತಿ ಕಳುಹಿಸುತ್ತದೆಯೋ ನೋಡೋಣ. ಯಶಸ್ವಿಯಾಗಿ ಲಾಗಿನ್ ಆಗಿರುವಾಗ, ನೀವು ಹೀಗೊಂದು ಡೇಟಾ ಸಾಂದ್ರಣವನ್ನು ನೋಡುತ್ತೀರಿ:
+
+```json
+{
+  "user": "test",
+  "currency": "$",
+  "description": "Test account",
+  "balance": 75,
+  "transactions": [
+    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
+    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
+    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
+  ]
+}
+```
+  
+**ಈ ಡೇಟಾ ರಚನೆಯು ಒದಗಿಸುತ್ತದೆ:**  
+- **`user`**: ವೈಯಕ್ತಿಕ ಅನುಭಾವಕ್ಕಾಗಿ ("ಮತ್ತೆ ಬಂದಿರೇ, ಸಾರಾ!")  
+- **`currency`**: ಹಣದ ಮೊತ್ತಗಳನ್ನು ಸರಿಯಾಗಿ ತೋರಿಸಲು  
+- **`description`**: ಖಾತೆಯ ಸ್ನೇಹಪೂರಿತ ಹೆಸರು  
+- **`balance`**: ಅತ್ಯಂತ ಮುಖ್ಯವಾದ ಇತ್ತೀಚಿನ ಲೆಕ್ಕಪತ್ರ  
+- **`transactions`**: ಸಂಪೂರ್ಣ ವ್ಯವಹಾರ ಇತಿಹಾಸ ಹಾಗೂ ವಿವರಗಳು  
+
+ನೀವು ವೃತ್ತಿಪರ ಬ್ಯಾಂಕಿಂಗ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ನಿರ್ಮಿಸಲು ಬೇಕಾದ ಎಲ್ಲದು!
+
+```mermaid
+flowchart TD
+    A[ಬಳಕೆದಾರ ಲಾಗಿನ್] --> B[ಖಾತೆ ಮಾಹಿತಿ ಪಡೆಯಿರಿ]
+    B --> C{ಮಾಹಿತಿ ಸರಿಯಾಗಿದೆಯೇ?}
+    C -->|ಹೌದು| D[ಜಾಗತಿಕ ಚರದಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ]
+    C -->|ಇಲ್ಲ| E[ದೋಷ ಸಂದೇಶ ತೋರಿಸಿ]
+    D --> F[ಡ್ಯಾಶ್ಬೋರ್ಡ್‌ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿ]
+    F --> G[ಯುಐ ಅಂಶಗಳನ್ನು ನವೀಕರಿಸಿ]
+    G --> H[ಬ্যালೆನ್ಸ್ ಪ್ರದರ್ಶಿಸಿ]
+    G --> I[ವಿವರಣೆ ತೋರಿಸಿ]
+    G --> J[লেনದನ ಸುರಕ್ಷಣೆ]
+    J --> K[ಕಿತಾಬು ಸಾಲುಗಳನ್ನು ರಚಿಸಿ]
+    K --> L[ಮುದ್ರಣ ಮೌಲ್ಯ ಸ್ವರೂಪ]
+    L --> M[ಬಳಕೆದಾರ ಲೈವ್ ಡೇಟಾವನ್ನು ನೋಡುತ್ತಾನೆ]
+```  
+> 💡 **ಪ್ರೋ ಟಿಪ್**: ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು ತಕ್ಷಣ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತ ನೋಡಲು ಬಯಸದಿದ್ದರೆ, ಲಾಗಿನ್ ಪ್ರಕ್ರियೆಯಲ್ಲಿ `test` ಎಂಬ ಬಳಕೆದಾರ ಹೆಸರನ್ನು ಉಪಯೋಗಿಸಿ - ಇದರಲ್ಲಿ ಆದರ್ಶ ಡೇಟಾ ಪೂರ್ವನಿರ್ದಿಷ್ಟವಾಗಿ ಲೋಡ್ ಆಗಿದೆ, ಆದ್ದರಿಂದ ನೀವು ಮೊದಲೇ ವ್ಯವಹಾರಗಳನ್ನು ಸೃಷ್ಟಿಸದೇ ಎಲ್ಲವನ್ನೂ ಪರೀಕ್ಷಿಸಬಹುದು.  
+>   
+**ಪರೀಕ್ಷಾ ಖಾತೆ ಉಪಯೋಗಿಸುವ ಕಾರಣಗಳು:**  
+- ವಾಸ್ತವಿಕ ಮಾದರಿ ಡೇಟಾ ಪೂರ್ವಲಭ್ಯ  
+- ವ್ಯವಹಾರ ಪ್ರದರ್ಶನ ಹೇಗಿದೆ ಎಂಬುದನ್ನು ನೋಡಲು ಸೂಕ್ತ  
+- ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಸಾರ್ಥಕ  
+- ಕೈಗೆತ್ತಿದ್ದ ಡUMMY ಡೇಟಾ ಸೃಷ್ಟಿಸುವ ಅಗತ್ಯ ದೂರವಾಗುತ್ತದೆ  
+
+### ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಪ್ರದರ್ಶನ ಅಂಶಗಳನ್ನು ರಚಿಸುವುದು
+
+ನಮ್ಮ ಬೆسಿಗೆ, ಖಾತೆ ಸಾರಾಂಶ ಮಾಹಿತಿ ಮತ್ತು ನಂತರ ವ್ಯವಹಾರ ಪಟ್ಟಿಗಳನ್ನು ಹಂತ ಹಂತವಾಗಿ ನಿರ್ಮಿಸೋಣ.
+
+#### ಹೆಜ್ಜೆ 1: ನಿಮ್ಮ HTML ರಚನೆಯನ್ನು ನವೀಕರಿಸಿ
+
+ಮೊದಲಿಗೆ, ಸ್ಥಿರ "ಬ್ಯಾಲೆನ್ಸ್" ವಿಭಾಗವನ್ನು ಡೈನಾಮಿಕ್ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಅಂಶಗಳೊಂದಿಗೆ ಬದಲಿಸಿ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ತುಂಬಿಸಬಲ್ಲಂತೆ:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+  
+ನಂತರ, ಖಾತೆಯ ವಿವರಣೆಗಾಗಿ ವಿಭಾಗ ಸೇರಿಸಿ. ಇದು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ವಿಷಯಕ್ಕೆ ಶೀರ್ಷಿಕೆ ಆಗಿಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದರಿಂದ, ಸಮಾಂತರ HTML ಬಳಸಿರಿ:
+
+```html
+<h2 id="description"></h2>
+```
+  
+**HTML ರಚನೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು:**  
+- ಬ್ಯಾಲೆನ್ಸ್ ಮತ್ತು ಕರೆನ್ಸಿಗೆ ವಿಭಿನ್ನ `<span>` ಅಂಶಗಳನ್ನು ಉಪಯೋಗಿಸುವ ಮೂಲಕ ವೈಯಕ್ತಿಕ ನಿಯಂತ್ರಣ  
+- ಪ್ರತಿಯೊಂದು ಅಂಶಕ್ಕೂ ವಿಶಿಷ್ಟ ಐಡಿಗಳಿಂದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗುರಿ  
+- ಖಾತೆ ವಿವರಣೆಗೆ `<h2>` ಬಳಸಿ ಸಮಾಂತರ HTML ಅನುಸರಣೆ  
+- ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು SEO ಗಾಗಿ ಸಾಂದರ್ಭಿಕ ಹಿರarchie ರಚನೆ  
+
+> ✅ **ಪ್ರವೇಶಕಾರ್ಯದಕ್ಷತೆ ತಿಳಿವಳಿಕೆ**: ಖಾತೆ ವಿವರಣೆ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ವಿಷಯಕ್ಕೆ ಶೀರ್ಷಿಕೆಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಅದನ್ನು ಶೀರ್ಷಿಕೆಗಳಾಗಿ ಗುರುತಿಸಲಾಗಿದೆ. [ಶೀರ್ಷಿಕೆ ರಚನೆಯ](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) ಪ್ರವೇಶಕಾರ್ಯದಕ್ಷತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಕುರಿತ ಮಾಹಿತಿ ಕಲಿಯಿರಿ. ನಿಮ್ಮ ಪುಟದಲ್ಲಿನ ಇತರ ಅಂಶಗಳಲ್ಲಿ ಕೂಡ ಶೀರ್ಷಿಕೆ ಟ್ಯಾಗ್‌ಗಳಿಂದ ಲಾಭ ಪಡೆಯಬಹುದೋ ನೋಡಿ.  
+
+#### ಹೆಜ್ಜೆ 2: ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ನವೀಕರಣ ಕಾರ್ಯವನ್ನು ರಚಿಸಿ
+
+ಈಗ, ನಿಜವಾದ ಖಾತೆ ಡೇಟಾದೊಂದಿಗೆ ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು ತುಂಬಿಸುವ ಕಾರ್ಯವನ್ನು ರಚಿಸೋಣ:
+
+```javascript
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+  
+**ಹಂತ ಹಂತವಾಗಿ ಈ ಕಾರ್ಯ ಏನು ಮಾಡುತ್ತದೆ:**  
+- ಖಾತೆ ಡೇಟಾ ಇದ್ದೇ ಇದ್ದದ್ದನ್ನು ದೃಢಪಡಿಸುತ್ತದೆ  
+- ಪ್ರಮಾಣೀಕರಣವಾಗದ ಬಳಕೆದಾರರನ್ನು ಲಾಗಿನ್ ಪುಟಕ್ಕೆ ಮರಳಿಸುತ್ತದೆ  
+- ಪುನರಾಯೋಜನೀಯ `updateElement` ಕಾರ್ಯದಲ್ಲಿ ಖಾತೆ ವಿವರಣೆಯನ್ನು ನವೀಕರಿಸುತ್ತದೆ  
+- ಬ್ಯಾಲೆನ್ಸ್ ಅನ್ನು ಎಂದಿಗೂ ಎರಡು ದಶಮಾಂಶಗಳಾಗಿ ಸ್ವರೂಪಗೊಳಿಸುತ್ತದೆ  
+- ಸೂಕ್ತ ಕರೆನ್ಸಿ ಚಿಹ್ನೆಯನ್ನು ತೋರಿಸುತ್ತದೆ  
+
+> 💰 **ಹಣದ ಸ್ವರೂಪಗೊಳಿಸುವಿಕೆ**: ಆ [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) ವಿಧಾನವು ರಕ್ಷಕವಾಗಿದೆ! ಅದು ನಿಮ್ಮ ಬ್ಯಾಲೆನ್ಸ್ ನಿಜವಾದ ಹಣದಂತೆ ತೋರುತ್ತದೆ - "75.00" ಬದಲಾಗಿ "75" ಎಂಬುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬಳಕೆದಾರರು ಪರಿಚಿತ ಕರೆನ್ಸಿ ಸ್ವರೂಪಗೊಳಿಸುವಿಕೆಯನ್ನು ಮೆಚ್ಚಿಕೊಳ್ಳುತ್ತಾರೆ.  
+
+#### ಹೆಜ್ಜೆ 3: ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ನವೀಕರಿಸುತ್ತಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
+
+ಪ್ರತಿ ಬಾರಿ ಯಾರಾದರೂ ಭೇಟಿ ನೀಡುವಾಗ ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ನವೀಕರಿಸಲು, ನಿಮ್ಮ ನॅವಿಗೇಶನ್ ವ್ಯವಸ್ಥೆಗೂ ಸಂಯೋಜಿಸುವ ಅವಶ್ಯಕತೆ ಇದೆ. ನೀವು [ಪಾಠ 1 ಕಾರ್ಯ](../1-template-route/assignment.md) ಪೂರ್ಣಗೊಳಿಸಿದ್ದರೆ, ಇದು ಪರಿಚಿತವಾಗಿರುತ್ತದೆ. ಇಲ್ಲದಿದ್ದರೆ, ಯಾಕೆಂದರೆ ಇಲ್ಲಿದೆ ನೀವು ಬೇಕಾದುದು:  
+
+ನಿಮ್ಮ `updateRoute()` ಕಾರ್ಯದ ಕೊನೆಯಲ್ಲಿ ಈ కోಡ್ ಸೇರಿಸಿ:
+
+```javascript
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+  
+ನಂತರ, ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಆರಂಭಿಕೀಕರಣಕ್ಕಾಗಿ ನಿಮ್ಮ ಮಾರ್ಗಗಳನ್ನು ನವೀಕರಿಸಿ:
+
+```javascript
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+  
+**ಈ ಬುದ್ಧಿವಂತಿಕೆದ ವ್ಯವಸ್ಥೆ ಏನು ಮಾಡುತ್ತದೆ:**  
+- ಮಾರ್ಗಗಳಿಗೆ ವಿಶೇಷ ಪ್ರಾರಂಭ ಕೋಡ್ ಇದ್ದರೂ ಪರಿಶೀಲಿಸುತ್ತದೆ  
+- ಮಾರ್ಗ ಬಂದಾಗ ಆ ಕೋಡ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ  
+- ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಯಾವಾಗಲೂ ಪ್ರಸ್ತುತ, ನವೀನ ಮಾಹಿತಿಯನ್ನು ತೋರಿಸುತ್ತದೆ  
+- ನಿಮ್ಮ ಮಾರ್ಗಪಥ್ ಲಾಜಿಕ್ ಶುದ್ಧ ಮತ್ತು ವ್ಯವಸ್ಥಿತವಾಗಿರುತ್ತೆ  
+
+#### ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಪರೀಕ್ಷಿಸುವುದು
+
+ಈ ಬದಲಾವಣೆಗಳನ್ನು ಜಾರಿಗೆ ತಂದ ನಂತರ, ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನ ಪರೀಕ್ಷೆ ಮಾಡಿ:
+
+1. ಪರೀಕ್ಷಾ ಖಾತೆಯಿಂದ ಲಾಗಿನ್ ಆಗಿ  
+2. ನೀವು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ಹಿಂತಿರುಗಲ್ಪಟ್ಟಿದ್ದೀರಿ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಿ  
+3. ಖಾತೆಯ ವಿವರಣೆ, ಬ್ಯಾಲೆನ್ಸ್ ಮತ್ತು ಕರೆನ್ಸಿ ಸರಿಯಾಗಿ ತೋರಿಸುತ್ತಿದೆಯೇ ತಪಾಸಿಸಿ  
+4. ಲಾಗ್ ಔಟ್ ಮಾಡಿ ಮತ್ತೆ ಲಾಗಿನ್ ಆಗಿ ಡೇಟಾ ಸರಿಯಾಗಿ ನವೀಕರಿಸುತ್ತಿದೆಯೇ ಎಂದು ದೃಢೀಕರಿಸಿ  
+
+ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಈಗ ಲಾಗಿನ್ ಆಗಿರುವ ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಅವಲಂಬಿಸಿಕೊಂಡು ಡೈನಾಮಿಕ್ ಮಾಹಿತಿಯನ್ನು ತೋರಿಸುತ್ತಿರುತ್ತದೆ!
+
+## ಟೆಂಪ್ಲೇಟ್ಗಳೊಂದಿಗೆ ಸ್ಮಾರ್ಟ್ ವ್ಯವಹಾರ ಪಟ್ಟಿಗಳನ್ನು ನಿರ್ಮಿಸುವುದು
+
+ಪ್ರತಿ ವ್ಯವಹಾರದ HTML ಅನ್ನು ಕೈಯಿಂದ ಸೃಷ್ಟಿಸುವ ಬದಲು, ನಾವು ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ಉಪಯೋಗಿಸಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಮಾನ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸೋಣ. ಅಂತರಿಕ್ಷ ನೌಕಾ ತಯಾರಿಕೆಯಲ್ಲಿಯ ಮಿಕ್ಕೋ ಲೆಕ್ಕಣಿಕೆ ಘಟಕಗಳಂತೆ, ಟೆಂಪ್ಲೇಟ್ಗಳು ಪ್ರತಿಯೊಂದು ವ್ಯವಹಾರ ಸಾಲು ಕೂಡ ಒಂದೇ ರಚನೆ ಮತ್ತು ವಿನ್ಯಾಸವನ್ನು ಅನುಸರಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತವೆ.
+
+ಈ ತಂತ್ರಜ್ಞಾನ ಕೆಲವು ವ್ಯವಹಾರಗಳಿಂದ ಸಾವಿರಾರು ವ್ಯವಹಾರಗಳವರೆಗೂ ಸುಗಮವಾಗಿ ವಿಸ್ತರಿಸಿ, ಸಮಾನ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಪ್ರದರ್ಶನವನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತದೆ.
+
+```mermaid
+graph LR
+    A[HTML ಟೆಂಪ್ಲೇಟ್] --> B[ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕ್ಲೋನ್]
+    B --> C[ಡೇಟಾ ilə ತುಂಬಿಸಿ]
+    C --> D[ಫ್ರೇಗ್ಮೆಂಟ್‌ಗೆ ಸೇರಿಸಿ]
+    D --> E[DOMಗೆ ಬ್ಯಾಚ್ ಸೇರಿಸಿ]
+    
+    subgraph "ಪ್ರದರ್ಶನ ಲಾಭಗಳು"
+        F[ಒಂದು DOM ನವೀಕರಣ]
+        G[ಸತತ ಸ್ವರೂಪಕರಣ]
+        H[ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮಾದರಿ]
+    end
+    
+    E --> F
+    E --> G
+    E --> H
+```  
+```mermaid
+flowchart LR
+    A[ವ್ಯವಹಾರದ ಡೇಟಾ] --> B[HTML ಟೆಂಪ್ಲೇಟು]
+    B --> C[ಟೆಂಪ್ಲೇಟನ್ನು ಪ್ರತಿಲಿಪಿ ಮಾಡಿ]
+    C --> D[ಡೇಟಾವನ್ನು ತುಂಬಿ]
+    D --> E[ಡಿಓಎಂಗೆ ಸೇರಿಸಿ]
+    E --> F[ಪ್ರತಿ ವ್ಯವಹಾರಕ್ಕೆ ಪುನರಾವರ್ತಿಸಿ]
+```  
+### ಹೆಜ್ಜೆ 1: ವ್ಯವಹಾರ ಟೆಂಪ್ಲೇಟನ್ನು ರಚಿಸುವುದು
+
+ಮೊದಲಿಗೆ, ನಿಮ್ಮ HTML `<body>` ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಬಳಸಬಹುದಾದ ವ್ಯವಹಾರ ಸಾಲುಗಳನ್ನು 위한 ಪುನಃಬಳಕೆಯ ಟೆಂಪ್ಲೇಟನ್ನು ಸೇರಿಸೋಣ:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+  
+**HTML ಟೆಂಪ್ಲೇಟ್‌ಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು:**  
+- ಒಂದೇ ಟೇಬಲ್ ಸಾಲಿನ ರಚನೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ  
+- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ನಕಲಿಸಿ ಹಾಗೂ ತುಂಬಿಸುವವರೆಗೆ ಗೋಚರಿಸುವುದಿಲ್ಲ  
+- ಮೂರು ಸೆಲ್‌ಗಳನ್ನು ಹೊಂದಿದೆ; ದಿನಾಂಕ, ವರ್ಣನೆ ಮತ್ತು ಮೊತ್ತ  
+- ಸಮಾನ ವಿನ್ಯಾಸ ಕೈಗಾರಿಕೆಗೆ ಪುನಃಬಳಕೆಯ ಮಾದರಿಯ ಒದಗಿಸುತ್ತದೆ  
+
+### ಹೆಜ್ಜೆ 2: ಡೈನಾಮಿಕ್ ವಿಷಯಕ್ಕಾಗಿ ನಿಮ್ಮ ಟೇಬಲ್ ಸಿದ್ಧಪಡಿಸಿರಿ
+
+ನಂತರ, ಟೇಬಲ್ ಶರೀರಕ್ಕೆ ಐಡಿ ಸೇರಿಸಿ, ಇದರಿಂದ ಜಾವಾ ಸ್ಕ್ರಿಪ್ಟ್ সহজವಾಗಿ ಗುರಿ ತಲುಪಬಹುದು:
+
+```html
+<tbody id="transactions"></tbody>
+```
+  
+**ಇದರಿಂದ ಪಡೆಯುವದು:**  
+- ವ್ಯವಹಾರ ಸಾಲುಗಳ ಸೇರಿಸಲು ಸ್ಪಷ್ಟ ಗುರಿಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ  
+- ಟೇಬಲ್ ರಚನೆ ಮತ್ತು ಡೈನಾಮಿಕ್ ವಿಷಯವನ್ನು ವಿಭಜಿಸುತ್ತದೆ  
+- ವ್ಯವಹಾರ ಡೇಟಾವನ್ನು ಬಹಳ ಸುಲಭವಾಗಿ ತೆರವುಗೊಳಿಸಲು ಮತ್ತು ಪುನಃ ತುಂಬಿಸಲು ಸಹಾಯಮಾಡುತ್ತದೆ  
+
+### ಹೆಜ್ಜೆ 3: ವ್ಯವಹಾರ ಸಾಲು ತಯಾರಕ ಕಾರ್ಯವನ್ನು ರಚಿಸುವುದು
+
+ಈಗ, ವ್ಯವಹಾರ ಡೇಟಾವನ್ನು HTML ಅಂಶಗಳಾಗಿ ಪರಿವರ್ತಿಸುವ ಕಾರ್ಯವನ್ನು ರಚಿಸೋಣ:
+
+```javascript
+function createTransactionRow(transaction) {
+  const template = document.getElementById('transaction');
+  const transactionRow = template.content.cloneNode(true);
+  const tr = transactionRow.querySelector('tr');
+  tr.children[0].textContent = transaction.date;
+  tr.children[1].textContent = transaction.object;
+  tr.children[2].textContent = transaction.amount.toFixed(2);
+  return transactionRow;
+}
+```
+  
+**ಈ ಫ್ಯಾಕ್ಟ್‌ರಿ ಕಾರ್ಯವನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು:**  
+- ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ಅದರ ಐಡಿಯಿಂದ ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ  
+- ಸುರಕ್ಷಿತ ಸಂಚಲನಕ್ಕಾಗಿ ಟೆಂಪ್ಲೇಟ್ ವಿಷಯವನ್ನು ನಕಲಿಸುತ್ತದೆ  
+- ನಕಲಿಸಿದ ವಿಷಯದ ಟೇಬಲ್ ಸಾಲನ್ನು ಆರಿಸಿಕೊಂಡು  
+- ಪ್ರತಿಯೊಂದು ಸೆಲಿಗೆ ವ್ಯವಹಾರ ಡೇಟಾವನ್ನು ತುಂಬಿಸುತ್ತದೆ  
+- ಮೊತ್ತವನ್ನು ಸರಿಯಾದ ದಶಮಾಂಶಗಳಿಂದ ಸ್ವರೂಪಗೊಳಿಸುತ್ತದೆ  
+- ಟೇಬಲ್ ಸಾಲುಗಳನ್ನು ಹಾಕಲು ತಯಾರಾಗಿಸಿದ ಪೂರ್ಣವಾದ ಅಂಶವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ  
+
+### ಹೆಜ್ಜೆ 4: ಹಲವಾರು ವ್ಯವಹಾರ ಸಾಲುಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಉತ್ಪಾದಿಸುವುದು
+
+ನಿಮ್ಮ `updateDashboard()` ಕಾರ್ಯದಲ್ಲಿ ಈ ಕೆಳಗಿನ ಕೋಡ್ ಸೇರಿಸಿ ಎಲ್ಲ ವ್ಯವಹಾರಗಳನ್ನು ತೋರಿಸಲು:
+
+```javascript
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+  
+**ಈ ಪರಿಣಾಮಕಾರಿ ವಿಧಾನವನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು:**  
+- ಡಾಕ್ಯುಮೆಂಟ್ ಫ್ರಾಗ್ಮೆಂಟ್ ಅನ್ನು ರಚಿಸಿ DOM ಕಾರ್ಯಗಳನ್ನು ಗುಚ್ಛವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ  
+- ಖಾತೆ ಡೇಟಾದ ಎಲ್ಲಾ ವ್ಯವಹಾರಗಳಲ್ಲಿನ ಮೂಲಕ ಚಲಿಸುತ್ತದೆ  
+- ಫ್ಯಾಕ್ಟರಿ ಕಾರ್ಯದಿಂದ ಪ್ರತಿ ವ್ಯವಹಾರಕ್ಕೆ ಸಾಲು ಸೃಷ್ಟಿಸುತ್ತದೆ  
+- ಎಲ್ಲಾ ಸಾಲುಗಳನ್ನು ಫ್ರಾಗ್ಮೆಂಟ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ ನಂತರ DOM ಗೆ ಸೇರಿಸುತ್ತದೆ  
+- ವೈಯಕ್ತಿಕ ಸೇರಿಸುವಿಕೆಗಳಿಗಿಂತ ಒಂದು ಬಾರಿ ಮಾತ್ರ DOM ನವೀಕರಣ ಮಾಡುತ್ತದೆ  
+
+> ⚡ **ಕಾರ್ಯಕ್ಷಮತೆ ಉತ್ತಮಿಕೆ**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) ಬೋಯಿಂಗ್‌ನಲ್ಲಿ ಅಸೆಂಬ್ಲಿ ಪ್ರಕ್ರಿಯೆಯಂತೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ - ಕಾಂಪೋನೆಂಟುಗಳನ್ನು ಮುಖ್ಯ ಲೈನ್‌ನಿಂದ ಹೊರಗೆ ತಯಾರಿಸಿ, ಬಳಿಕ ಸಂಪೂರ್ಣ ಘಟಕವಾಗಿ ಸ್ಥಾಪಿಸಲಾಗುತ್ತದೆ. ಈ ಬ್ಯಾಚಿಂಗ್ ವಿಧಾನವು DOM ಮರುಪ್ರವಾಹಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ ಒಂದೇ ಸೇರವಿಕೆಯನ್ನು ಅನೇಕ ವೈಯಕ್ತಿಕ ಕ್ರಿಯೆಗಳಿಗಿಂತ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಆಗಿಸುತ್ತದೆ.
+
+### ಹಂತ 5: ಮಿಶ್ರ ವಿಷಯಕ್ಕಾಗಿ Update ಫಂಕ್ಷನ್ ಅನ್ನು ಉತ್ತಮಗೊಳಿಸುವುದು
+
+ನಿಮ್ಮ `updateElement()` ಫಂಕ್ಷನ್ ಪ್ರಸ್ತುತ ಮಾತ್ರ ಪಠ್ಯ ವಿಷಯವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಅದನ್ನು ಪಠ್ಯ ಮತ್ತು DOM ನೋಡ್ ಎರಡನ್ನೂ ಸಹ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ನವೀಕರಿಸಿ:
+
+```javascript
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // ಎಲ್ಲಾ ಮಕ್ಕಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ
+  element.append(textOrNode);
+}
+```
+
+**ಈ ನವೀಕರಣದ ಪ್ರಮುಖ ಸುಧಾರಣೆಗಳು:**
+- ಹೊಸ ವಿಷಯವನ್ನು ಸೇರಿಸುವ ಮೊದಲು ಇರುವುದು ಇಲ್ಲದೆ ಮಾಡಿ
+- ಪ್ಯಾರಾಮೀಟರ್‌ಗಳಾಗಿ ಪಠ್ಯ ಸ್ಟ್ರಿಂಗ್‌ಗಳು ಅಥವಾ DOM ನೋಡ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ
+- ಲವಚಿಕತೆಯಿಗಾಗಿ [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) ವಿಧಾನವನ್ನು ಬಳಕೆ ಮಾಡುತ್ತದೆ
+- ಇತ್ತೀಚಿನ ಪಠ್ಯ ಆಧರಿತ ಬಳಕೆಯೊಂದಿಗೆ ಹಿಂದಿನ ಸಮ್ಮಿಲನತೆಯನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತದೆ
+
+### ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಸಮಯ
+
+ನಿಜವಾದ ಕ್ಷಣಕ್ಕೆ ಸಿದ್ಧರಾಗಿ! ನಿಮ್ಮ ಡೈನಾಮಿಕ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು ಕಾರ್ಯದಲ್ಲಿದ್ದಂತೆ ನೋಡೋಣ:
+
+1. `test` ಖಾತೆಯನ್ನು ಬಳಸಿ ಲಾಗಿನ್ ಮಾಡಿ (ಇದರಲ್ಲಿ ಉದಾಹರಣೆಯ ಡೇಟಾ ಇದೆ)
+2. ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ಹೋಗಿ
+3. ವ್ಯವಹಾರ ಸಾಲುಗಳು ಸರಿಯಾದ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಲ್ಲಿ ಪ್ರತ್ಯಕ್ಷವಾಗುತ್ತವೆಯೇ ಎನ್ನುವುದನ್ನು ಪರಿಶೀಲಿಸಿ
+4. ದಿನಾಂಕಗಳು, ವಿವರಣೆಗಳು ಮತ್ತು ಮೊತ್ತಗಳು ಎಲ್ಲಾ ಸರಿಯಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿ
+
+ಎಲ್ಲವೂ ಸರಿಯಾಗಿದ್ದರೆ, ನೀವು ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನಲ್ಲಿ ಪೂರ್ಣ ಕಾರ್ಯನಿರ್ವಹಣೆಯಿರುವ ವ್ಯವಹಾರಪಟ್ಟಿಯನ್ನು ನೋಡುವಿರಿ! 🎉
+
+**ನೀವು ಸಾಧಿಸಿದದ್ದು:**
+- ಯಾವುದೇ ಪ್ರಮಾಣದ ಡೇಟಾದೊಂದಿಗೆ ವಿಸ್ತರಿಸಬಹುದಾದ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ನಿರ್ಮಿಸಲಾಗಿದ್ದು
+- ಸ್ಥಿರ ಫಾರ್ಮ್ಯಾಟಿಂಗ್‌ಗೆ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಟೆಂಪ್ಲೇಟುಗಳನ್ನು ಸೃಷ್ಟಿಸಲಾಗಿದೆ
+- ಪರಿಣಾಮಕಾರಿಯಾದ DOM ನಿರ್ವಹಣಾ ತಂತ್ರಗಳನ್ನು ಜಾರಿಗೆ ತಂದುಕೊಳ್ಳಲಾಗಿದೆ
+- ಉತ್ಪಾದನಾ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಬಳಕೆದಾರ ಲಕ್ಷಣಗಳಿಗೆ ಸಮಾನ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲಾಗಿದೆ
+
+ನೀವು ಸ್ಥಿರ ವೆಬ್‌ಪೇಜ್ ಅನ್ನು ಡೈನಾಮಿಕ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿ ಯಶಸ್ವಿಯಾಗಿ ಪರಿವರ್ತಿಸಿದ್ದಾರೆ.
+
+### 🎯 ಪಾಠ ನಿರೀಕ್ಷಣೆ ಪರಿಶೀಲನೆ: ಡೈನಾಮಿಕ್ ವಿಷಯ ರಚನೆ
+
+**ವಾಸ್ತುಶಿಲ್ಪ ಅರಿವು**: ನೀವು React, Vue, Angular ಮುಂತಾದ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ ಬಳಸುವ ಮಾದರಿಗಳನ್ನು ಅನುಸರಿಸುವ ಸುಕ್ಷ್ಮ ಡೇಟಾ-ಮೂಲಕ UI ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಜಾರಿಗೆ ತಂದಿದ್ದೀರಿ.
+
+**ಪ್ರಮುಖ ಕಲಿತ ತತ್ವಗಳು**:
+- **ಟೆಂಪ್ಲೇಟ್ ಆಧಾರಿತ ರೆಂಡರಿಂಗ್**: ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ UI ಕಾಂಪೋನೆಂಟುಗಳ ಸೃಷ್ಟಿ
+- **ಡಾಕ್ಯುಮೆಂಟ್ ಫ್ರಾಗ್ಮೆಂಟ್‌ಗಳು**: DOM ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುವುವು
+- **ಸುರಕ್ಷಿತ DOM ನಿರ್ವಹಣೆ**: ಭದ್ರತೆಯಲ್ಲಿನ ಅಪಾಯಗಳನ್ನು ತಡೆಯುವುದು
+- **ಡೇಟಾ ಪರಿವರ್ತನೆ**: ಸರ್ವರ್ ಡೇಟಾವಿನಿಂದ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳಿಗೆ ಪರಿವರ್ತನೆ
+
+**ಕೈಗಾರಿಕಾ ಸಂಪರ್ಕ**: ಈ ತಂತ್ರಗಳು ಆಧುನಿಕ ಫ್ರಂಟ್‌ಎಂಡ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳ ಮೂಲಭೂತ. React ನ ವರ್ಚ್ಚುವಲ್ DOM, Vue ನ ಟೆಂಪ್ಲೇಟ್ ಸಿಸ್ಟಮ್, ಮತ್ತು Angular ನ ಕಾಂಪೋನೆಂಟ್ ವಾಸ್ತುಶಿಲ್ಪ，都 ಈ ಪ್ರಮುಖ ತತ್ವಗಳ ಮೇಲಾಗಿವೆ.
+
+**ಪರಿಗಣನೆ ಪ್ರಶ್ನೆ**: ಈ ವ್ಯವಸ್ಥೆಯನ್ನು ನೈತಿಕ ಸಮಯದ ನವೀಕರಣಗಳನ್ನು (ಹಾಗೆ ಹೊಸ ವ್ಯವಹಾರಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕಾಣುವುದು) ಹೇಗೆ ವಿಸ್ತರಿಸುವಿರಿ? WebSockets ಅಥವಾ ಸರ್ವರ್-ಕಳುಹಿಸಲಾದ ಘಟನಾಕ್ರಮಗಳ ಬಗ್ಗೆ ಯೋಚಿಸಿ.
+
+---
+
+## 📈 ನಿಮ್ಮ ಡೇಟಾ ನಿರ್ವಹಣೆಯ ಪರಿಣತಿ ಸಮಯರೇಖೆ
+
+```mermaid
+timeline
+    title ಡೇಟಾ-ಚಾಲಿತ ಅಭಿವೃದ್ಧಿ ಪ್ರಯಾಣ
+    
+    section ಮೂಲಭೂತ ನಿರ್ಮಾಣ
+        API ಸೆಟ್‌ಅಪ್ ಮತ್ತು ಪರೀಕ್ಷೆ
+            : ಕ್ಲೈಂಟ್-ಸರ್ವರ್ ಸಂವಹನವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+            : HTTP ವಿನಂತಿ/ಪ್ರತಿಕ್ರಿಯೆ ಚಕ್ರವನ್ನು ಮಾಸ್ಟರ್ ಮಾಡಿ
+            : ಡಿಬಗ್ ತಂತ್ರಗಳನ್ನು ಕಲಿಯಿರಿ
+    
+    section ಪ್ರಾಮಾಣೀಕರಣ ಪರಿಣತಿ
+        ಅಸಿಂಕ್ರೋನಸ್ ಫಂಕ್ಷನ್ ಮಾದರಿಗಳು
+            : ಸ್ವಚ್ಛ async/await ಕೋಡ್ ಬರೆಯಿರಿ
+            : ಪ್ರಾಮಿಸ್ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸಿ
+            : ದೋಷ ಮಿತಿ ರೇಖೆಗಳನ್ನು ಜಾರಿಗೆ ತಂದೀರಿ
+        ಬಳಕೆದಾರ ಸೆಶನ್ ನಿರ್ವಹಣೆ
+            : ಗ್ಲೋಬಲ್ ಸ್ಟೇಟ್ ಮಾದರಿಗಳನ್ನು ಸೃಷ್ಟಿಸಿ
+            : ನ್ಯಾವಿಗೇಶನ್ ಗಾರ್ಡ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿ
+            : ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ
+    
+    section ಡೈನಾಮಿಕ್ UI ಅಭಿವೃದ್ಧಿ
+        ಸುರಕ್ಷಿತ DOM ನಿರ್ವಹಣೆ
+            : XSS ಭದ್ರತೆಗಳನ್ನು ತಡೆಯಿರಿ
+            : innerHTML ಬದಲು textContent ಬಳಸಿ
+            : ಪ್ರವೇಶযোগ্যತೆ ಸ್ನೇಹಿ ಇಂಟರ್ಫೇಸ್ ನಿರ್ಮಿಸಿ
+        ಟೆಂಪ್ಲೇಟ್ ವ್ಯವಸ್ಥೆಗಳು
+            : ಮರುಬಳಕೆಯ_UI_ಘಟಕಗಳನ್ನು ನಿರ್ಮಿಸಿ
+            : ಫ್ರಾಗ್ಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ದೊಡ್ದಮಾಡಿ
+            : ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳನ್ನು ಕையாளಲು ವ್ಯಾಪ್ತಿ ಮಾಡಿರಿ
+    
+    section ವೃತ್ತಿಪರ ಮಾದರಿಗಳು
+        ಉತ್ಪಾದನೆ-ಸಿದ್ಧ ಕೋಡ್
+            : ಸಮಗ್ರ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಜಾರಿಗೆ ತರುತ್ತದೆ
+            : ಭದ್ರತಾ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ
+            : ನಿರ್ವಹಣೀಯ ವಾಸ್ತುಶಿಲ್ಪಗಳನ್ನು ಸೃಷ್ಟಿಸಿ
+        ಆಧುನಿಕ ವೆಬ್ ಮಾನದಂಡಗಳು
+            : Fetch API ಮಾದರಿಗಳನ್ನು ಮಾಸ್ಟರ್ ಮಾಡಿ
+            : CORS ಸಂರಚನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+            : ಪ್ರತಿಕ್ರಿಯಾಶೀಲ, ಪ್ರವೇಶযোগ্য UI ಗಳನ್ನು ನಿರ್ಮಿಸಿ
+```
+**🎓 ಪದವಿ ಕೊನೆಯ ಮರ್ಕುಳಿ**: ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿಗಳನ್ನು ಬಳಸಿ ಸಂಪೂರ್ಣ ಡೇಟಾ-ಚಾಲಿತ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಯಶಸ್ವಿಯಾಗಿ ನಿರ್ಮಿಸಿದ್ದೀರಿ. ಈ ಕೌಶಲ್ಯಗಳು React, Vue ಅಥವಾ Angular ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತದೆ.
+
+**🔄 ಮುಂದಿನ ಹಂತದ ಸಾಮರ್ಥ್ಯಗಳು**:
+- ಈ ತತ್ವಗಳ ಮೇಲೆ ಆಧಾರಿತ ಫ್ರಂಟ್‌ಎಂಡ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಸಿದ್ಧ
+- WebSockets ಮೂಲಕ ನೈತಿಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಜಾರಿಗೆ ತರುವುದಕ್ಕೆ ಸಿದ್ಧ
+- ಆಫ್‌ಲೈನ್ ಸಾಮರ್ಥ್ಯಗಳೊಂದಿಗೆ ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಿದ್ಧ
+- ಸುಧಾರಿತ ಸ್ಥಿತಿ ನಿರ್ವಹಣಾ ಮಾದರಿಗಳನ್ನು ಕಲಿಯಲು ತಯಾರು
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲ್ 🚀
+
+ನೀವು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:
+
+**ವಿವರಣೆ:** ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಿ, ಬಳಕೆದಾರರು ದಿನಾಂಕ ಮಿತಿ, ಮೊತ್ತ ಅಥವಾ ವ್ಯವಹಾರ ವಿವರ ನಿಯತಾಂಕಗಳ ಮೂಲಕ ನಿರ್ದಿಷ್ಟ ವ್ಯವಹಾರಗಳನ್ನು ಹುಡುಕಲು ಮತ್ತು ಫಿಲ್ಟರ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗುವಂತಹ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಜೋಡಿಸಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‍ಗಾಗಿ ಹುಡುಕಾಟ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿರ್ಮಿಸಿ, ಅದು ಒಳಗೊಂಡಿದೆ: 1) ದಿನಾಂಕ ಮಿತಿ (ಇಂದಿನಿಂದ/ಇಂದಿಗೆ), ಕನಿಷ್ಠ/ಗರಿಷ್ಟ ಮೊತ್ತ, ಮತ್ತು ವ್ಯವಹಾರ ವಿವರಣೆ ಕೀーワード್‌ಗಳ್ತ್ರ ಹಾವಾಯ್ ಹುಡುಕಾಟ ಫಾರ್ಮ್, 2) ಹುಡುಕಾಟ ಮಾನದಂಡಗಳಿಗೆ ಅನುಗುಣವಾಗಿ account.transactions ಅrray ಅನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುವ `filterTransactions()` ಫಂಕ್ಷನ್, 3) ಫಿಲ್ಟರ್ ಮಾಡಿದ ಫಲಿತಾಂಶಗಳನ್ನು ತೋರಿಸಲು `updateDashboard()` ನವೀಕರಣ, ಮತ್ತು 4) ವೀಕ್ಷಣೆಯನ್ನು ಮರುಹೊಂದಿಸಲು "ಫಿಲ್ಟರ್ ತೆರವು" ಬಟನ್. ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅರೆ ಮಂಡಲ ವಿಧಾನಗಳಾದ `filter()` ಬಳಸಿ ಹಾಗೂ ಖಾಲಿ ಹುಡುಕಾಟ ಮಾನದಂಡಗಳ ಗಡಿಮೆಸಲು ಹ್ಯಾಂಡಲ್ ಮಾಡಿ.
+
+ಇಲ್ಲಿ [ಏಜೆಂಟ್ ಮೋಡ್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಲಭ್ಯವಿದೆ.
+
+## 🚀 ಸವಾಲ್
+
+ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಮುಂದಿನ ಮಟ್ಟಕ್ಕೆ ತೆಗೆದುಹೋಗಲು ಸಿದ್ಧವೇ? ಇದನ್ನು ನಿಜವಾಗಿಯೂ ಬಳಸಲು ಇಚ್ಛಿಸುವಂಥದಾಗಿಸೋಣ. ನಿಮ್ಮ ಸೃಜನಶೀಲತೆಯನ್ನು ಪ್ರೇರేపಿಸುವ ಕೆಲವು ಆಲೋಚನೆಗಳು:
+
+**ಸುಂದರವಾಗಿ ಮಾಡಿ**: CSS ಶೈಲಿಯನ್ನು ಸೇರಿಸಿ ನಿಮ್ಮ ಕಾರ್ಯನಿರ್ವಹಣೆಯ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು ದೃಶ್ಯವಾಗಿ ಆಕರ್ಷಕವಾಗಿಸಿಕೊಳ್ಳಿ. ಸ್ವಚ್ಛ ರೇಖೆಗಳು, ಉತ್ತಮ ಅಂತರ, ಹಾಗೂ ಸಂಪೂರ್ಣ ಹಾಸಿನ ಮರುಭರಿತ ಸ್ಪರ್ಶಗಳು.
+
+**ಪ್ರತ್ಯುತ್ಯದಾಯಕವಾಗಿಸಿಕೊಳ್ಳಿ**: [ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳ](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) ಉಪಯೋಗಿಸಿ [ಪ್ರತ್ಯುತ್ಯದಾಯಕ ವಿನ್ಯಾಸ](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) ರಚಿಸಿ, ಇದು ಫೋನ್‌ಗಳು, ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳು ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬಳಕೆದಾರರು ನಿಮಗೆ ಧನ್ಯವಾದ ಹೇಳುತ್ತಾರೆ!
+
+**ಕೆಲವು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಿ**: ವ್ಯವಹಾರಗಳನ್ನು ಬಣ್ಣದಿಂದ ವಿವರಿಸಿ (ಆದಾಯಕ್ಕೆ ಹಸಿರು, ವೆಚ್ಚಕ್ಕೆ ಕೆಂಪು), ಐಕಾನ್ಗಳನ್ನು ಸೇರಿಸಿ, ಅಥವಾ ಹೋವರ್ ಪರಿಣಾಮಗಳ ಮೂಲಕ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಸಂವೇದನಾಶೀಲಗೊಳಿಸಿ.
+
+ಇದಲ್ಲದೆ, ಈ ರೀತಿ ಒಳ್ಳೆಯ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಕಾಣಿಸಬಹುದು:
+
+![ಸ್ಟೈಲಿಂಗ್ ನಂತರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಉದಾಹರಣೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/screen2.123c82a831a1d14a.kn.png)
+
+ನೀವು ಇದನ್ನು ಖಚಿತವಾಗಿ ಬೀಳ್ತೀರಾ ಎಂದು ಭಾವಿಸಬೇಡಿ - ಇದನ್ನು ಪ್ರೇರಣೆ ರೂಪದಲ್ಲಿ ತೆಗೆದುಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮದೇ ರೀತಿಯಲ್ಲಿ ಮಾಡಿ!
+
+## ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/46)
+
+## ಹಬ್ಬಾಳಿಕೆ
+
+[ನಿಮ್ಮ ಕೋಡ್ ನವೀಕರಿಸಿ ಮತ್ತು ಕಾಮೆಂಟ್ ಮಾಡಿ](assignment.md)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಅದ್ಭುತ ಸೂಚನೆ**:  
+ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾದ ಸೇವೆಯ ಮೂಲಕ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯ ಪ್ರಯತ್ನ ಮಾಡುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಧುಯೋಗತೆಗಳು ಇರಬಹುದಾಗಿದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆವೇ ಅತ್ಯಂತ ನೈಜ ಮೂಲವಾಗಿರುತ್ತದೆ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿ ಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾದ ಯಾವುದೇ ತಪ್ಪು ವಿವರಣೆಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/3-data/assignment.md

@@ -0,0 +1,144 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d0a02cb117e91a5b5f24178080068a3d",
+  "translation_date": "2026-01-08T17:32:48+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "kn"
+}
+-->
+# ಕೋಡ್ ಮರುಸಂಯೋಜನೆ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ನಿಯೋಜನೆ
+
+## ಕಲಿಕಾ ಗುರಿಗಳು
+
+ಈ ನಿಯೋಜನೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸುವ ಮೂಲಕ, ನೀವು ವೃತ್ತಿಪರ ಡೆವಲಪರ್‌ಗಳು ಪ್ರತಿದಿನ ಬಳಸುತಿರುವ ಅಗತ್ಯವಾದ ಸಾಫ್ಟ್‌ವೇರ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ. ನೀವು ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಣೆಯುಳ್ಳಂತೆ ಸಂಘಟಿಸುವುದು, ಅವರுத்தಿಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು ಮತ್ತು ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಭವಿಷ್ಯದಲ್ಲಿ ಅಭಿವೃದ್ಧಿಪಡಿಸುವವರಿಗಾಗಿ (ನಿಮ್ಮ ಸಹಿತ!) ಡಾಕ್ಯುಮೆಂಟ್ ಮಾಡುವುದು ಕಲಿಯುತ್ತೀರಿ.
+
+ವಾಸ್ತವಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಯೋಜನೆಗಳಲ್ಲಿ ಸ್ವಚ್ಛ, ಚೆನ್ನಾಗಿ ಡಾಕ್ಯುಮೆಂಟ್ ಮಾಡಲಾದ ಕೋಡ್ ಬಹಳ ಮುಖ್ಯವಾಗಿದ್ದು, ಅಲ್ಲಿ ಹಲವಾರು ಡೆವಲಪರ್‌ಗಳು ಸಹಕಾರ ಮಾಡುತ್ತಾರೆ ಮತ್ತು ಕೋಡ್‌ಬೇಸ್‌ಗಳು ಕಾಲಕ್ರಮದಲ್ಲಿ ಅಭಿವೃದ್ಧಿಯಾಗುತ್ತವೆ.
+
+## ನಿಯೋಜನೆ ಅವಲೋಕನ
+
+ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‌ನ `app.js` ಫೈಲ್ ಲಾಗಿನ್, ನೋಂದಣಿ ಮತ್ತು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಕಾರ್ಯತತ್ಥ್ಯದೊಂದಿಗೆ ಸಾಕಷ್ಟು ವಿಸ್ತಾರಗೊಂಡಿದ್ದೇನೆ. ಈ ಕೋಡ್ ಅನ್ನು ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ ಅಭ್ಯಾಸಗಳನ್ನು ಬಳಸಿ ಮರುಸಂಯೋಜನೆ ಮಾಡುವ ಸಮಯವಾಗಿದೆ, ಇದರಿಂದ ಓದುವುದರಲ್ಲಿ ಸುಲಭವಾಗುವುದು, ನಿರ್ವಹಣೆಯುಳ್ಳದು ಆಗುವುದು ಮತ್ತು ಅವರುತಿಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು.
+
+## ಸೂಚನೆಗಳು
+
+ನಿಮ್ಮ ಪ್ರಸ್ತುತ `app.js` ಕೋಡ್ ಅನ್ನು ಈ ಮೂರು ಪ್ರಮುಖ ಮರುಸಂಯೋಜನೆ ತಂತ್ರಗಳನ್ನು ಜಾರಿಗೆ ತರುವ ಮೂಲಕ ಬದಲಾಯಿಸಿ:
+
+### 1. ನಿಗದಿತ ನಿಯತಾಂಕಗಳನ್ನು ಹೊರತೆಗೆಯಿರಿ
+
+**ಕಾರ್ಯ**: ಪುನಃ ಬಳಕೆಗೆ ಯೋಗ್ಯ ನಿಯತಾಂಕಗಳೊಂದಿಗೆ ಫೈಲ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಸಂರಚನಾ ವಿಭಾಗದೊ לה ಪೂರ್ಣಗೊಳ್ಳಲು.
+
+**ಅಮಲಾತ್ಮಕ ಸಲಹೆಗಳು:**
+- ಸರ್ವರ್ API ಮೂಲ URL ಅನ್ನು ಹೊರತೆಗೆಯಿರಿ (ಪ್ರಸ್ತುತ ಅನೇಕ ಸ್ಥಳಗಳಲ್ಲಿ ಹಾರ್ಡ್‌ಕೋಡ್ ಆಗಿದೆ)
+- ಅನೇಕ ಕಾರ್ಯಗಳಲ್ಲಿ ಕಾಣುವ ದೋಷ ಸಂದೇಶಗಳಿಗೆ ನಿಯತಾಂಕಗಳನ್ನು ರಚಿಸಿ
+- ಪುನರಾವೃತ್ತಿ ಆಗುತ್ತಿರುವ ಮಾರ್ಗ ಪಥಗಳು ಮತ್ತು ತತ್ವಾಂಶಗಳ IDಗಳನ್ನು ಹೊರತೆಗೆದುಕೊಳ್ಳುವ ಕುರಿತು ಪರಿಗಣಿಸಿ
+
+**ಉದಾಹರಣೆ ರಚನೆ:**
+```javascript
+// ಸಂರಚನಾ ಸ್ಥಿರಾಂಕಗಳು
+const API_BASE_URL = 'http://localhost:5000/api';
+const ROUTES = {
+  LOGIN: '/login',
+  DASHBOARD: '/dashboard'
+};
+```
+
+### 2. ಏಕೀಕೃತ ವಿನಂತಿ ಕಾರ್ಯವನ್ನು ರಚಿಸಿ
+
+**ಕಾರ್ಯ**: `createAccount()` ಮತ್ತು `getAccount()` ನಡುವೆ ಇರುವ ನಕಲಿ ಕೋಡ್ ನಾಶ ಮಾಡಬಲ್ಲ ಪುನಃ ಬಳಕೆಯ `sendRequest()` ಫಂಕ್ಷನ್ ರಚಿಸಿ.
+
+**ಆವಶ್ಯಕತೆಗಳು:**
+- GET ಮತ್ತು POST ಎರಡನ್ನೂ ನಿರ್ವಹಿಸಲು
+- ಸೂಕ್ತ ದೋಷ ನಿರ್ವಹಣೆ ಒಳಗೊಂಡಂತೆ
+- ಭಿನ್ನ URL ಎಂಡ್ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುವುದು
+- ಐಚ್ಛಿಕ ವಿನಂತಿ ದೇಹದಲ್ಲಿನ ಡೇಟಾ ಸ್ವೀಕರಿಸುವುದು
+
+**ಕಾರ್ಯಸೂಚಿ ಕೋಡ್ ಶಿಲ್ಪ:**
+```javascript
+async function sendRequest(endpoint, method = 'GET', data = null) {
+  // ನಿಮ್ಮ ಜಾರಿಗೆ ಇಲ್ಲಿ
+}
+```
+
+### 3. ವೃತ್ತಿಪರ ಕೋಡ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಸೇರಿಸಿ
+
+**ಕಾರ್ಯ**: ನಿಮ್ಮ ಲಾಜಿಯ ಹಿಂದೆ ಇರುವ "ಏಕೆ" ಯನ್ನು ವಿವರಿಸುವ ಸ್ಪಷ್ಟ, ಸಹಾಯಕ ಕಾಮೆಂಟ್ ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಕೋಡ್ ಡಾಕ್ಯುಮೆಂಟ್ ಮಾಡಿ.
+
+**ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಮಾನದಂಡಗಳು:**
+- ಉದ್ದೇಶ, ಪ್ಯಾರಾಮೀಟರ್ಗಳು ಮತ್ತು ರಿಟರ್ನ್ ಮೌಲ್ಯಗಳನ್ನು ವಿವರಿಸುವ ಕಾರ್ಯ ಡಾಕ್ಯುಮೆಂಟ್ ಸೇರಿಸಿ
+- ಸಂಕೀರ್ಣ ಲಾಜಿಕ್ ಅಥವಾ ವ್ಯವಹಾರ ನಿಯಮಗಳಿಗಾಗಿ ಇನ್‌ಲೈನ್ ಕಾಮೆಂಟ್‌ಗಳನ್ನೊಳಗೊಂಡಿರಿ
+- ಸಂಬಂಧಿತ ಕಾರ್ಯಗಳನ್ನು ವಿಭಾಗ ಶೀರ್ಷಿಕೆಗಳಿಂದ ಗುಂಪು ಮಾಡಿ
+- ಸ್ಪಷ್ಟವಾಗದ ಕೋಡ್ ಮಾದರಿಗಳು ಅಥವಾ ಬ್ರೌಜರ್ ನಿರ್ದಿಷ್ಟ ಪರಿಹಾರಗಳನ್ನು ವಿವರಿಸಿ
+
+**ಉದಾಹರಣೆ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಶೈಲಿ:**
+```javascript
+/**
+ * Authenticates user and redirects to dashboard
+ * @param {Event} event - Form submission event
+ * @returns {Promise<void>} - Resolves when login process completes
+ */
+async function login(event) {
+  // ಜಾವಾಸ్క್ರಿಪ್ಟ್‌ ಬಳಸಿ ನಿರ್ವಹಿಸಲು ಡೀಫ ನೀತ್ಯಾ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯನ್ನು ತಡೆಹಿಡಿಯಿರಿ
+  event.preventDefault();
+  
+  // ನಿಮ್ಮ ಅನುಷ್ಠಾನ...
+}
+```
+
+## ಯಶಸ್ಸಿನ ಮಾನದಂಡಗಳು
+
+ನಿಮ್ಮ ಮರುಸಂಯೋಜಿತ ಕೋಡ್ ಈ ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ ಅಭ್ಯಾಸಗಳನ್ನು ತೋರಿಸಬೇಕು:
+
+### ಉದಾಹರಣೀಯ ಜಾರಿ
+- ✅ **ನಿಗದಿತ ನಿಯತಾಂಕಗಳು**: ಅಷ್ಟಿಷ್ಟು ಮಾಂತ್ರಿಕ ಸ್ಟ್ರಿಂಗ್‌ಗಳು ಮತ್ತು URL ಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಹೆಸರಿಸಲಾದ ನಿಯತಾಂಕಗಳಲ್ಲಿ ಹೊರತೆಗೆಯಲಾಗಿದೆ
+- ✅ **DRY ತತ್ವ**: ಸಾಮಾನ್ಯ ವಿನಂತಿ ತರ್ಕವನ್ನು ಪುನಃ ಬಳಕೆಯ `sendRequest()` ಕಾರ್ಯದಲ್ಲಿ ಸಮಗ್ರಗೊಳಿಸಲಾಗಿದೆ
+- ✅ **ಡಾಕ್ಯುಮೆಂಟೇಶನ್**: ಕಾರ್ಯಗಳ ಉದ್ದೇಶ ಮತ್ತು ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ವಿವರಿಸುವ JSDoc ಕಾಮೆಂಟ್‌ಗಳು ಇವೆ
+- ✅ **ಸಂಘಟನೆ**: ಕೋಡ್ ಕೃತ್ರಿಮವಾಗಿ ವರ್ಗೀಕರಿಸಿ ವಿಭಾಗ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಸತ್ವಪೂರ್ಣ ಸ್ವರೂಪದಲ್ಲಿ ಉನ್ನತಮವಾಗಿದೆ
+- ✅ **ದೋಷ ನಿರ್ವಹಣೆ**: ಹೊಸ ವಿನಂತಿ ಕಾರ್ಯವನ್ನು ಬಳಸಿ ಸುಧಾರಿತ ದೋಷ ನಿರ್ವಹಣೆ
+
+### ಯೋಗ್ಯ ಜಾರಿ
+- ✅ **ನಿಗದಿತ ನಿಯತಾಂಕಗಳು**: ಬಹುತೇಕ ಪುನರಾವೃತಿ ಮೌಲ್ಯಗಳನ್ನು ಹೊರತೆಗೆಯಲಾಗಿದೆ, ಚಿಕ್ಕ ಹಾರ್ಡ್‌ಕೋಡ್ ಮೌಲ್ಯಗಳು ಉಳಿದಿವೆ
+- ✅ **ಘಟಕಾಕೃತಿ**: ಮೂಲಭೂತ `sendRequest()` ಕಾರ್ಯ ರಚಿಸಲಾಗಿದೆ ಆದರೆ ಎಲ್ಲ ತಿರುವು ಪ್ರಕರಣಗಳನ್ನು ನಿರ್ವಹಿಸದಿರಬಹುದು
+- ✅ **ಕಾಮೆಂಟ್‌ಗಳು**: ಮುಖ್ಯ ಕಾರ್ಯಗಳನ್ನು ಡಾಕ್ಯುಮೆಂಟ್ ಮಾಡಲಾಗಿದೆ, ಆದರೆ ಕೆಲವು ವಿವರಣೆಗಳು ಪೂರ್ಣವಾಗಿಲ್ಲದಿರಬಹುದು
+- ✅ **ಓದಬಹುದಾದಿಕೆ**: ಕೋಡ್ ಸಾಮಾನ್ಯವಾಗಿ ಚೆನ್ನಾಗಿ ಸಂಘಟಿತವಾಗಿದೆ, ಕೆಲವು ಸುಧಾರಣೆ ಸ್ಥಳಗಳಿವೆ
+
+### ಸುಧಾರಣೆ ಬೇಕು
+- ❌ **ನಿಗದಿತ ನಿಯತಾಂಕಗಳು**: ಅನೇಕ ಮಾಂತ್ರಿಕ ಸ್ಟ್ರಿಂಗ್‌ಗಳು ಮತ್ತು URL ಗಳು ಸಂಪೂರ್ಣ ಫೈಲ್‌ನಲ್ಲಿ ಹಾರ್ಡ್‌ಕೋಡ್ ಆಗಿವೆ
+- ❌ **ಪುನರಾವೃತಿ**: ಸಮಾನ ಕಾರ್ಯಗಳ ನಡುವೆ ಮಹತ್ವದ ಕೋಡ್ ನಕಲಿಕೆ ಉಳಿದಿದೆ
+- ❌ **ಡಾಕ್ಯುಮೆಂಟೇಶನ್**: ಕೋಡ್ ಉದ್ದೇಶವನ್ನು ವಿವರಿಸುವ ಕಾಮೆಂಟ್‌ಗಳು ಇಲ್ಲ ಅಥವಾ ಅಪ್ರತಿಕೂಲವಾಗಿವೆ
+- ❌ **ಸಂಘಟನೆ**: ಕೋಡ್ ಸ್ಪಷ್ಟವಾದ ರಚನೆಯಾಗಿಲ್ಲ ಮತ್ತು ತರ್ಕಮಯ ಗುಂಪುಗಳಿಲ್ಲ
+
+## ನಿಮ್ಮ ಮರುಸಂಯೋಜಿತ ಕೋಡ್ ಅನ್ನು ಪರೀಕ್ಷಿಸುವುದು
+
+ಮರುಸಂಯೋಜನೆಯ ನಂತರ, ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆಯಾ ಎಂದು ದೃಢಪಡಿಸಿ:
+
+1. **ಎಲ್ಲಾ ಬಳಕೆದಾರ ಹರಿವುಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ**: ನೋಂದಣಿ, ಲಾಗಿನ್, ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಪ್ರದರ್ಶನ, ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆ
+2. **API ಕರೆಗೆ ತಪಾಸಣೆ ಮಾಡಿ**: ನಿಮ್ಮ `sendRequest()` ಕಾರ್ಯವು ಖಾತೆ ರಚನೆ ಮತ್ತು ಪಡೆಯಲು ಎರಡನ್ನೂ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
+3. **ದೋಷ ಸ್ಥಿತಿಗಳನ್ನು ಪರಿಶೀಲಿಸಿ**: ಅಸಾಕ್ಷ್ಯಾತ ಪ್ರಮಾಣಪತ್ರ ಮತ್ತು ನೆಟ್ವರ್ಕ್ ದೋಷಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ
+4. **ಕನ್‌ಸೋಲ್ ಔಟ್‌ಪುಟ್ ಪರಿಶೀಲನೆ**: ಮರುಸಂಯೋಜನೆಯ ವೇಳೆ ಯಾವುದೇ ಹೊಸ ದೋಷಗಳು ಹುಟ್ಟಿಕೊಂಡಿಲ್ಲವೇ ಎಂದು ಖಚಿತಪಡಿಸಿ
+
+## ಸಲ್ಲಿಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳು
+
+ನಿಮ್ಮ ಮರುಸಂಯೋಜಿತ `app.js` ಫೈಲ್ ಅನ್ನು ಈ ನಿಯಮಾನುಸಾರ ಸಲ್ಲಿಸಿ:
+- ವಿವಿಧ ಕಾರ್ಯತತ್ಥ್ಯಗಳನ್ನು ಸಂಘಟಿಸುವ ಸ್ಪಷ್ಟ ವಿಭಾಗ ಶೀರ್ಷಿಕೆಗಳು
+- ಸತ್ವಪೂರ್ಣ ಕೋಡ್ ಸ್ವರೂಪ ಮತ್ತು ಉದ್ದೇಶದ ಅನುಯಾಯಿಗಳಾಗಿ
+- ಎಲ್ಲಾ ಕಾರ್ಯಗಳ ಪೂರ್ಣ JSDoc ಡಾಕ್ಯುಮೆಂಟೇಶನ್
+- ಮೇಲ್ಭಾಗದಲ್ಲಿ ಜನರಲ್ ಮರುಸಂಯೋಜನೆ ದೃಷ್ಟಿಕೋಣವನ್ನು ವಿವರಿಸುವ ಸಂಕ್ಷಿಪ್ತ ಕಾಮೆಂಟ್
+
+**ಬೋನಸ್ ಚಾಲೆಂಜ್**: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ವಾಸ್ತುಶಿಲ್ಪವನ್ನು ವಿವರಿಸುವ ಮತ್ತು ವಿವಿಧ ಕಾರ್ಯಗಳು ಹೇಗೆ ಒಟ್ಟಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ವಿವರಿಸುವ ಸರಳ ಕೋಡ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಫೈಲ್ (`CODE_STRUCTURE.md`) ರಚಿಸಿ.
+
+## ವಾಸ್ತವಿಕ ಜಗತ್ತು ಸಂಪರ್ಕ
+
+ಈ ನಿಯೋಜನೆ ವೃತ್ತಿಪರ ಡೆವಲಪರ್‌ಗಳು ನಿಯಮತಃ ನಡೆಸುವ ಕೋಡ್ ನಿರ್ವಹಣೆಯ ರೀತಿಯನ್ನು ಅನುಕರಣ ಮಾಡುತ್ತದೆ. ಕೈಗಾರಿಕಾ ಸೆಟ್ಟಿಂಗ್‌ಗಳಲ್ಲಿ:
+- **ಕೋಡ್ ವಿಮರ್ಶೆ**ಗಳು ಓದಬೇಕಾದ ಹಾಗೆ ಮತ್ತು ನಿರ್ವಹಣೆಯುಳ್ಳ ರೀತಿಯಲ್ಲಿ ಈ ನಿಯೋಜನೆಗಳಂತೆ ಮೌಲ್ಯಮಾಪನ ಮಾಡುತ್ತವೆ
+- **ತಾಂತ್ರಿಕ ಸಾಲ** ಕೋಡ್ ನಿಯಮಿತವಾಗಿ ಮರುಸಂಯೋಜನೆ ಮಾಡದೇ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ ಮಾಡದೇ ಉಳಿದಾಗ ಸಂಗ್ರಹವಾಗುತ್ತದೆ
+- **ಟೀಮ್ ಸಹಕಾರ** ಸ್ಪಷ್ಟ ಮತ್ತು ಚೆನ್ನಾಗಿ ಡಾಕ್ಯುಮೆಂಟ್ ಮಾಡಲಾದ ಕೋಡ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ, ಹೊಸ ಟೀಮ್ ಸದಸ್ಯರು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ
+- **ದೋಷ ಶುದ್ದತೆಗಳು** ಸೂಕ್ತ ಅವಿಭಜನೆಗಳೊಂದಿಗೆ ಉತ್ತಮ ಸಂಘಟಿತ ಕೋಡ್‌ಬೇಸ್‌ಗಳಲ್ಲಿ ಬಹಳ ಸುಲಭ
+
+ನೀವು ಇಲ್ಲಿ ಅಭ್ಯಾಸ ಮಾಡುತ್ತಿರುವ ಕೌಶಲ್ಯಗಳು - ನಿಯತಾಂಕಗಳನ್ನು ಹೊರತೆಗೆಯುವುದು, ನಕಲಿಕೆಯನ್ನು ನಿವಾರಿಸುವುದು ಮತ್ತು ಸ್ಪಷ್ಟ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಬರೆಯುವುದು - ವೃತ್ತಿಪರ ಸಾಫ್ಟ್‌ವೇರ್ ಅಭಿವೃದ್ಧಿಗೆ ಮೂಲಭೂತ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ನಿರಾಕರಣೆ**:  
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯ ಕಡೆ ಗಮನ ಹರಿಸುತ್ತೇವೆ ಆದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇದ್ದಿರಬಹುದು. ಮೂಲ ದಾಖಲೆ ಅದರ ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸ್ಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸದರಿಂದ ಉಂಟಾಗಬಹುದಾದ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ ಅಥವಾ ಅರ್ಥಭ್ರಾಂತರ জন্য ನಾವು ಜವಾಬ್ದಾರಿಯಾಗಿರುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/4-state-management/README.md

@@ -0,0 +1,809 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b807b09df716dc48a2b750835bf8e933",
+  "translation_date": "2026-01-08T17:49:26+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಾಣ ಭಾಗ 4: ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಯ ಸಂಪ್ರದಾಯಗಳು
+
+## ⚡ ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು
+
+**ಬಿಜಿ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ತ್ವರಿತ ಪ್ರಾರಂಭ ಮಾರ್ಗ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 ನಿಮಿಷಗಳು] --> B[ಸ್ಥಿತಿ ಸಮಸ್ಯೆಗಳನ್ನು ಪತ್ತೆಮಾಡಿ]
+    B --> C[ಕೇಂದ್ರಿತ ಸ್ಥಿತಿ ವಸ್ತುವನ್ನು ರಚಿಸಿ]
+    C --> D[updateState ಫಂಕ್ಷನ್ನನ್ನು ಸೇರಿಸಿ]
+    D --> E[ತಕ್ಷಣ ಸುಧಾರಣೆಗಳನ್ನು ನೋಡಿ]
+```
+- **ನಿಮಿಷ 1**: ಪ್ರಸ್ತುತ ಸ್ಟೇಟ್ ಸಮಸ್ಯೆ ಪರೀಕ್ಷಿಸಿ - ಲಾಗಿನ್ ಮಾಡಿ, ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ, ಲಾಗೌಟ್ ಆಗುತ್ತಿರುವುದನ್ನು ಗಮನಿಸಿ
+- **ನಿಮಿಷ 2**: `let account = null` ಅನ್ನು `let state = { account: null }` ಗೆ ಬದಲಿಸಿ
+- **ನಿಮಿಷ 3**: ನಿಯಂತ್ರಿತ ಅಪ್ಡೇಟ್ಗಳಿಗಾಗಿ ಸರಳ `updateState()` ಫಂಕ್ಷನ್ ರಚಿಸಿ
+- **ನಿಮಿಷ 4**: ಹೊಸ ಮಾದರಿಯನ್ನು ಬಳಸುವಂತೆ ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಿ
+- **ನಿಮಿಷ 5**: ಸುಧಾರಿತ ಪೂರ್ವಾನುಮಾನ ಮತ್ತು ಡಿಬಗ್ಗಿಂಗ್ ಸಾಮರ್ಥ್ಯವನ್ನು ಪರೀಕ್ಷಿಸಿ
+
+**ತ್ವರಿತ ಡಯಾಗ್ನೋಸ್ಟಿಕ್ ಪರೀಕ್ಷೆ**:
+```javascript
+// ಮುಂಚೆ: ಹರಿದಾಡುವ ಸ್ಥಿತಿ
+let account = null; // ರೀಫ್ರೆಶ್ ಮಾಡುವಾಗ ಕಳೆದುಹೋಗಿತು!
+
+// ನಂತರ: ಕೇಂದ್ರಿತ ಸ್ಥಿತಿ
+let state = Object.freeze({ account: null }); // ನಿಯಂತ್ರಿತ ಮತ್ತು ಅನುಸರಿಸಬಹುದಾದ!
+```
+
+**ಈದರಿಂದ ಪ್ರಮುಖತೆ**: 5 ನಿಮಿಷಗಳಲ್ಲಿ, ನೀವು ಗೊಂದಲದ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಯಿಂದ ನಿಗದಿತ, ಡಿಬಗ್ಗಿಂಗ್ ಮಾಡಲು ಸುಲಭವಾದ ಮಾದರಿಗಳಿಗೆ ಪರಿವರ್ತನೆಯನ್ನು ಅನುಭವಿಸುತ್ತೀರಿ. ಇದೇ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅಡಿಗಟ್ಟಾಗಿದೆ.
+
+## 🗺️ ಸ್ಟೇಟ್ ನಿರ್ವಹಣಾ ವಿಧಗಳ ಮೂಲಕ ನಿಮ್ಮ ಕಲಿಕಾ ಪಯಣ
+
+```mermaid
+journey
+    title ಫಸಟಾದ ರಾಜ್ಯದಿಂದ ವೃತ್ತಿಪರ ವಾಸ್ತುಶಿಲ್ಪಕ್ಕೆ
+    section ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸುವುದು
+      ರಾಜ್ಯ ನಷ್ಟ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಿ: 3: You
+      ವಿತಡಿತ ನವೀಕರಣಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 4: You
+      ವಾಸ್ತುಶಿಲ್ಪ ಅಗತ್ಯಗಳನ್ನು ಗುರುತಿಸಿ: 6: You
+    section ನಿಯಂತ್ರಣವನ್ನು ಕೇಂದ್ರಿಕೃತಗೊಳಿಸುವುದು
+      ಏಕೀಕೃತ ರಾಜ್ಯ ವಸ್ತುವನ್ನು ರಚಿಸಿ: 5: You
+      ನಿಯಂತ್ರಿತ ನವೀಕರಣಗಳನ್ನು ನೆರವೇರಿಸಿ: 7: You
+      ಅಚಲ ಮಾದರಿಗಳನ್ನು ಸೇರಿಸಿ: 8: You
+    section ಸ್ಥಾಯಿತ್ವವನ್ನು ಸೇರಿಸುವುದು
+      localStorage ಅನ್ನು ಜಾರಿಗೊಳಿಸಿ: 6: You
+      ಸರಣೀಕರಣವನ್ನು ನಿರ್ವಹಿಸಿ: 7: You
+      ಸೆಷನ್ தொடர்ச்சಿಯನ್ನು ರಚಿಸಿ: 9: You
+    section تازگی (freshness) ಅನ್ನು ಸರಿಹೊಂದಿಸುವುದು
+      ದತ್ತಾಂಶ ಹಳೆಯತೆಯುಂಟಾಗುವ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಿ: 5: You
+      ನವೀಕರಣ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ಮಿಸಿ: 8: You
+      ಅತ್ಯುತ್ತಮ ಸಮತೋಲನವನ್ನು ಸಾಧಿಸಿ: 9: You
+```
+**ನಿಮ್ಮ ಪಯಣ ಗುರಿ**: ಈ ಪಾಠದ ಅಂತ್ಯಕ್ಕೆ, ನೀವು ವೃತ್ತಿಪರ-ಮಟ್ಟದ ಸ್ಟೇಟ್ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿದ್ದು, ಅದು ಸ್ಥಾಯಿತ್ವ, ಡೇಟಾ ತಾಜಾತನ ಮತ್ತು ನಿಗದಿತ ಅಪ್ಡೇಟ್ಗಳನ್ನೂ ನಿಭಾಯಿಸುತ್ತದೆ - ಉತ್ಪಾದನಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬಳಸುವ ಅದೇ ಮಾದರಿಗಳು.
+
+## ಪೂರ್ವ-ಪಾಠ ಕ್ವಿಜ್
+
+[ಪೂರ್ವ-ಪಾಠ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/47)
+
+## ಪರಿಚಯ
+
+ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ ಕಣಿವೆ ಯಂತ್ರಗಳಂತೆ – ಎಲ್ಲವೂ ಸರಾಗವಾಗಿ ನಡೆಯುತ್ತಿರುವಾಗ ನೀವು ಅದರಿರುವುದನ್ನು ಅಷ್ಟೇನೂ ಗಮನಿಸುವುದಿಲ್ಲ. ಆದರೆ ಸಮಸ್ಯೆಗಳು ಬಂದಾಗ, ಅದು između ನಕ್ಷತ್ರಾಂತರ ಬಾಹ್ಯಾಕಾಶ ತಲುಪುವುದು ಮತ್ತು ಬಾಹ್ಯಾಕಾಶದ ಅಧೋಗತಿಯಲ್ಲಿ ತಲೆಹಾಕಿಕೊಳ್ಳುವ ನಡುವಿನ ವ್ಯತ್ಯಾಸವಾಗುತ್ತದೆ. ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್‌ನಲ್ಲಿ, ಸ್ಟೇಟ್ ಎಂದರೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸಂರಕ್ಷಿಸಬೇಕಾದ ಎಲ್ಲವೂ: ಬಳಕೆದಾರ ಲಾಗಿನ್ ಸ್ಥಿತಿ, ಫಾರ್ಮ್ ಡೇಟಾ, ನ್ಯಾವಿಗೇಶನ್ ಇತಿಹಾಸ ಮತ್ತು ತಾತ್ಕಾಲಿಕ ಇಂಟರ್‌ಫೇಸ್ ಸ್ಥಿತಿಗಳು.
+
+ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಸರಳ ಲಾಗಿನ್ ಫಾರ್ಮ್‌ನಿಂದ ಹೆಚ್ಚು ನುಡಿ ಸಂರಚನೆಯ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿ ಅಭಿವೃದ್ಧಿಯಾಗಿರುವಂತೆ, ನೀವು ಕೆಲವು ಸಾಮಾನ್ಯ ಸವಾಲುಗಳನ್ನು ಎದುರಿಸಿದ್ದಿರಬಹುದು. ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿದಾಗ ಬಳಕೆದಾರರು ಅಸ್ಪಷ್ಟವಾಗಿ ಲಾಗ್ ಔಟ್ ಆಗುತ್ತಾರೆ. ಬ್ರೌಸರ್ ಮುಚ್ಚಿದರೆ ಎಲ್ಲ ಪ್ರಗತಿ ಕಳೆದುಹೋದಂತೆ ಕಾಣುತ್ತದೆ. ಸಮಸ್ಯೆಯನ್ನು ಡಿಬಗ್ ಮಾಡಲು ನೀವು ಒದಗಿಸಿದ ಡೇಟಾವನ್ನು ಬದಲಾಯಿಸುವ ಹಲವಾರು ಕಾರ್ಯಗಳ ಬಳಿಯಲ್ಲಿ ಹುಡುಕುತ್ತಿದ್ದೀರಿ.
+
+ಇವು ಕೋಪದ ಕೋಡ್‌ಗಳ ಸಂಕೇತಗಳು ಅಲ್ಲ – ಇದು ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಒ一定 ಗಾತ್ರದ ಸಂಕೀರ್ಣತೆಯ ಮಟ್ಟವನ್ನು ತಲುಪಿದಾಗ ಕಾಣುವ ಸಹಜ ಬಾಧೆಗಳಾಗಿವೆ. ಪ್ರತಿ ಡೆವಲಪರ್ ತಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು "ಸಾಕ್ಷಾತ್ಕಾರ" ನಿಂದ "ಉತ್ಪಾದನಾ ಸಿದ್ಧ" ಆಗುವಾಗ ಈ ಸವಾಲುಗಳನ್ನು ಎದುರಿಸುತ್ತಾರೆ.
+
+ಈ ಪಾಠದಲ್ಲಿ, ನಾವು ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಂಬಿಗಸ್ತ, ವೃತ್ತಿಪರ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿ ಪರಿವರ್ತಿಸುವ ಒಂದು ಕೇಂದ್ರಿತ ಸ್ಟೇಟ್ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಯನ್ನು ಜಾರಿಗೊಳಿಸಲು ಹೋಗುತ್ತೇವೆ. ನೀವು ಡೇಟಾ ಪ್ರವಾಹಗಳನ್ನು ನಿಗದಿತವಾಗಿ ನಿರ್ವಹಿಸುವುದನ್ನು, ಬಳಕೆದಾರ ಸೆಷನ್‌ಗಳನ್ನು ಸೂಕ್ತವಾಗಿ ಸ್ಥಿರಗೊಳಿಸುವುದನ್ನು ಹಾಗೂ ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಅಗತ್ಯವಿರುವ ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುವುದನ್ನು ಕಲ್ತೀರಿ.
+
+## ಪೂರ್ವಾಪೇಕ್ಷಿತಗಳು
+
+ಸ್ಟೇಟ್ ನಿರ್ವಹಣಾ ಸಂಪ್ರದಾಯಗಳಿಗೆ ಮುಂಚೆ, ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಪರಿಸರವನ್ನು ಸರಿಯಾಗಿ ಹೊಂದಿಸಿಕೊಳ್ಳಬೇಕು ಮತ್ತು ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಮೂಲವನ್ನು ಸಿದ್ಧಪಡಿಸಿಕೊಳ್ಳಬೇಕು. ಈ ಪಾಠ ಸರಣಿಯ ಹಿಂದಿನ ಭಾಗಗಳ ಸಂಪ್ರದಾಯಗಳು ಮತ್ತು ಕೋಡ್ ಮೇಲೆ ನೇರವಾಗಿ ಅವಲಂಬಿಸಿದೆ.
+
+ಮುಂದುವರೆಯುವ ಮೊದಲು ಈ ಘಟಕಗಳನ್ನು ಸಿದ್ಧಪಡಿಸಿಕೊಳ್ಳಿ:
+
+**ಅವಶ್ಯಕ ಸ್ಥಾಪನೆ:**
+- [ಡೇಟಾ ಫೆಚಿಂಗ್ ಪಾಠ](../3-data/README.md) ಪೂರ್ಣಗೊಳಿಸಿ - ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಖಾತೆ ಡೇಟಾವನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಲೋಡ್ ಮತ್ತು ಪ್ರದರ್ಶಿಸಬೇಕು
+- ನಿಮ್ಮ ವ್ಯವಸ್ಥೆಗೆ [Node.js](https://nodejs.org) ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ ಬ್ಯಾಕ್‌ಎಂಡ್ API ನಡೆಸಲು
+- ಖಾತೆ ಡೇಟಾ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿಭಾಯಿಸಲು [ಸರ್ವರ್ API](../api/README.md) ಅನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಪ್ರಾರಂಭಿಸಿ
+
+**ನಿಮ್ಮ ಪರಿಸರವನ್ನು ಪರೀಕ್ಷೆ ಮಾಡಿ:**
+
+ಟರ್ಮಿನಲ್‌ನಲ್ಲಿ ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಹರಟಿಸಿದರೆ ನಿಮ್ಮ API ಸರ್ವರ್ ಸರಿಯಾದಂತೆ ನಡೆಯುತ್ತಿದ್ದಾನೆ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+
+```sh
+curl http://localhost:5000/api
+# -> ಫಲಿತಾಂಶವಾಗಿ "ಬ್ಯಾಂಕ್ ಎಪಿಐ v1.0.0" ಅನ್ನು ನೀಡಬೇಕು
+```
+
+**ಈ ಆಜ್ಞೆಯ ಕಾರ್ಯ:**
+- ನಿಮ್ಮ ಸ್ಥಳೀಯ API ಸರ್ವರ್‌ಗೆ GET ವಿನಂತಿ ಕಳುಹಿಸುತ್ತದೆ
+- ಸಂಪರ್ಕವನ್ನು ಪರಿಕ್ಷಿಸಿ ಸರ್ವರ್ ಮೇಲೆ ಪ್ರತಿಕ್ರಿಯೆ ಬರುತ್ತದೆ ಎಂದು ಖಾತ್ರಿಪಡಿಸುತ್ತದೆ
+- ಎಲ್ಲಾ ಸರಿಯಾಗಿದೆಯೇ ಎಂಬುದನ್ನು ತೋರಿಸುವ API ಆವೃತ್ತಿ ಮಾಹಿತಿ ಹಿಂತಿರುಗಿಸುತ್ತದೆ
+
+## 🧠 ಸ್ಟೇಟ್ ನಿರ್ವಹಣಾ ವಾಸ್ತುಶಿಲ್ಪ ಅವಲೋಕನ
+
+```mermaid
+mindmap
+  root((ರಾಜ್ಯ ನಿರ್ವಹಣೆ))
+    Current Problems
+      Session Loss
+        ಪುಟ ರಿಫ್ರೆಶ್ ಸಮಸ್ಯೆಗಳು
+        ಬ್ರೌಸರ್ ಆಫ್ ಪ್ರಭಾವ
+        ಚರಮಾನ ಪುನಃಸೆಟ್ ಸಮಸ್ಯೆಗಳು
+      Scattered Updates
+        ವಿವಿಧ ಬದಲಾವಣೆ ಅಂಕಿಗಳು
+        ಡಿಬಗ್ಗಿಂಗ್ ಸವಾಲುಗಳು
+        ನಿರೀಕ್ಷಿಸದ ನಡತೆ
+      Incomplete Cleanup
+        ಲಾಗ್‌ಔಟ್ ರಾಜ್ಯದ ಸಮಸ್ಯೆಗಳು
+        ಮೆಮೊರಿ ರಸಾಯನಗಳು
+        ಭದ್ರತೆ ವಿಚಾರಗಳು
+    Centralized Solutions
+      Unified State Object
+        ಒಂದೇ ಮೂಲ ಉದ್ಧೇಶ
+        ನಿರೀಕ್ಷಿತ ರಚನೆ
+        ವಿಸ್ತಾರ ಯೋಗ್ಯ ನೆಲೆ
+      Controlled Updates
+        ಪರಿವರ್ತನೆಯಿಲ್ಲದ ಮಾದರಿಗಳು
+        Object.freeze ಬಳಕೆ
+        ಫಂಕ್ಷನ್-ಆಧರಿತ ಬದಲಾವಣೆಗಳು
+      State Tracking
+        ಇತಿಹಾಸ ನಿರ್ವಹಣೆ
+        ಡಿಬಗ್ ದೃಶ್ಯತೆ
+        ಬದಲಾವಣೆ ಪರಿಶೀಲನೆ
+    Persistence Strategies
+      localStorage Integration
+        ಸೆಷನ್ ನಿರಂತರತೆ
+        JSON ಸರಣೀಕರಣ
+        ಸ್ವಚಾಲಿತ ಸಮನ್ವಯ
+      Data Freshness
+        ಸರ್ವರ್ ರಿಫ್ರೆಶ್
+        ಹಳೆ ಡೇಟಾ ನಿರ್ವಹಣೆ
+        ಸಮತೋಲತೆಯ ಉತ್ತಮಗೊಳಿಸಲು
+      Storage Optimization
+        ಕನಿಷ್ಠ ಡೇಟಾ
+        ಕಾರ್ಯಕ್ಷಮತೆ ಗಮನ
+        ಭದ್ರತೆ ಪರಿಗಣನೆಗಳು
+```
+**ಕೋರ್ ನಿಯಮ**: ವೃತ್ತಿಪರ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ ನಿಗದಿತತೆ, ಸ್ಥಿರತೆ ಮತ್ತು ಪ್ರదర్శನೆಯನ್ನು ಸಮತೋಲಗೊಳಿಸಿ ನಂಬಿಗಸ್ತ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಅವು ಸರಳ ಸಂಪರ್ಕಗಳಿಂದ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಪ್ರವಾಹಗಳಿಗೆ ವ್ಯಾಪಿಸುತ್ತವೆ.
+
+---
+
+## ಪ್ರಸ್ತುತ ಸ್ಟೇಟ್ ಸಮಸ್ಯೆಗಳ ವಿಶ್ಲೇಷಣೆ
+
+ಶೆರ್ಲಾಕ್ ಹೋಲ್ಮ್ಸ್ ಅಪರಾಧ ಸ್ಥಳ ಪರಿಶೀಲನೆಯಂತೆ, ನಾವು ಮಾಯವಾಗುತ್ತಿರುವ ಬಳಕೆದಾರ ಸೆಷನ್‌ಗಳ ರಹಸ್ಯವನ್ನು ಪರಿಹರಿಸುವ ಮೊದಲೆ ನಮ್ಮ ಪ್ರಸ್ತುತ ಜಾರಿಗೆ ಆಗುತ್ತಿರುವ ನಿಜವಾಗಿರುವ ಪರಿಸ್ಥಿತಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು.
+
+ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಸರಳ ಪರಿಕ್ಷೆ ಮಾಡಿ, ಅಡಗಿಹೋಗುತ್ತಿರುವ ಸ್ಟೇಟ್ ನಿರ್ವಹಣಾ ಸವಾಲುಗಳನ್ನು ಬಿಚ್ಚಿಡೋಣ:
+
+**🧪 ಈ ಡಯಾಗ್ನೋಸ್ಟಿಕ್ ಪರೀಕ್ಷೆಯನ್ನು ಪ್ರಯತ್ನಿಸಿ:**
+1. ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನಲ್ಲಿ ಲಾಗಿನ್ ಆಗಿ ಮತ್ತು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ಹೋಗಿ
+2. ಬ್ರೌಸರ್ ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ
+3. ನಿಮ್ಮ ಲಾಗಿನ್ ಸ್ಥಿತಿಗೆ ಏನಾಗುತ್ತಿದೆ ಎಂದು ಗಮನಿಸಲಿ
+
+ನೀವು ಲಾಗಿನ್ ಸ್ಕ್ರೀನ್ಗೆ ಮರುನಿರ್ದೇಶಿತಗೊಂಡರೆ, ನೀವು ವರ್ಧಿತ ಸ್ಥಿರತೆ ಸಮಸ್ಯೆಯನ್ನು ಕಂಡುಹಿಡಿದಿದ್ದೀರಿ. ಈ ನಡೆ ಯಾಕೆಂದರೆ ನಮ್ಮ ಪ್ರಸ್ತುತ ಜಾರಿಗೆ ನಾವು ಬಳಕೆದಾರ ಡೇಟಾವನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಚರಗಳಲ್ಲಿ ಇಡುತ್ತಿರುವುದು ಪುಟ ಲೋಡ್ ಆಗುವ ಪ್ರತಿಯೊಂದು ಬಾರಿ ಅಸ್ಥಾಯಿಯಾಗಿ ನಿಧಾನಗೊಳ್ಳುತ್ತದೆ.
+
+**ಪ್ರಸ್ತುತ ಜಾರಿಯಲ್ಲಿ ಸಮಸ್ಯೆಗಳು:**
+
+ನಮ್ಮ [ಹಿಂದಿನ ಪಾಠದಿಂದ](../3-data/README.md) ಸರಳ `account` ಚರ ಮೂರು ಮಹತ್ವದ ಸಮಸ್ಯೆಗಳನ್ನೂ ಉಂಟುಮಾಡುತ್ತದೆ, ಅವು ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೂ ಮತ್ತು ಕೋಡ್ ನಿರ್ವಹಣೆಗೆ ಪ್ರಭಾವ ಬೀರುತ್ತವೆ:
+
+| ಸಮಸ್ಯೆ | ತಾಂತ್ರಿಕ ಕಾರಣ | ಬಳಕೆದಾರರ ಮೇಲೆ ಪ್ರಭಾವ |
+|---------|---------------|-----------------------|
+| **ಸೆಷನ್ ಕಳೆದುಹೋಗುವುದು** | ಪುಟ ರಿಫ್ರೆಶ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಚರಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ | ಬಳಕೆದಾರರು ಆದಿತ್ಯಾವಧಿಯಲ್ಲಿ ಮರು ಲಾಗಿನ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ |
+| **ವಿಭಜಿತ ಅಪ್ಡೇಟ್ಗಳು** | ಹಲವಾರು ಫಂಕ್ಷನ್ಗಳು ನೇರವಾಗಿ ಸ್ಟೇಟ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ | ಡಿಬಗ್ಗಿಂಗ್ มาก加入ಮೂಸುವಾಗಿದೆ |
+| **ಅಪೂರ್ಣ ಶುದ್ಧೀಕರಣ** | ಲಾಗೌಟ್ ಎಲ್ಲಾ ಸ್ಟೇಟ್ ಸೂಚನೆಗಳನ್ನು ತೆರವುಗೊಳಿಸುವುದಿಲ್ಲ | ಭದ್ರತೆ ಮತ್ತು ಖಾಸಗಿ ಮಾಹಿತಿ ಸಂಬಂದಿ ಆತಂಕಗಳು |
+
+**ವಾಸ್ತುಶಿಲ್ಪ ಸವಾಲು:**
+
+ಟೈಟ್ಯಾನಿಕ್ ನವರಗಿನಂತೆಯೇ ಗಡಿಭಾಗಗಳ ವಿಭಜನೆ ಬಲವಾದಂತೆ ತೋರುತ್ತಿತ್ತೆಂದರೆ, ಪ್ರತಿ ಘಟಕದಲ್ಲಿ ನೀರು ತುಂಬಿದಾಗ ಸಮಗ್ರ ಪರಿಣಾಮ ಉಂಟಾಗಿದೆ, ನಾವು ಭೇಟಿಯಾಗುತ್ತಿರುವ ಸಮಸ್ಯೆಗಳನ್ನು ಪ್ರತಿ ಘಟಕದಲ್ಲಿ ಬೇಬೇಕೆ ತಿದ್ದುಪಡಿ ಮಾಡುವುದರಿಂದ ಮೂಲ ವಾಸ್ತುಶಿಲ್ಪ ಸಮಸ್ಯೆ ಪರಿಹಾರವಾಗುವುದಿಲ್ಲ. ನಮ್ಮ ಬಯಕೆಯೇ ಒಂದು ಸಮಗ್ರ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ ಪರಿಹಾರ.
+
+> 💡 **ನಾವು ನಿಜವಾಗಿಯೇ ಏನನ್ನು ಸಾಧಿಸಲು ಯತ್ನಿಸುತ್ತಿದ್ದೇವೆ?**
+
+[ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ](https://en.wikipedia.org/wiki/State_management) ಎರಡು ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಪರಿಹರಿಸುವುದಾಗಿದೆ:
+
+1. **ನನ್ನ ಡೇಟಾ ಎಲ್ಲಿದೆ?**: ನಮ್ಮ ಬಳಿ ಇರುವ ಮಾಹಿತಿ ಮತ್ತು ಅದು ಎಲ್ಲಿ ಬರುತ್ತಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸೋದು
+2. **ಎಲ್ಲರೂ ಒಂದೇ ಪುಟದಲ್ಲಿದೆಯಾ?**: ಬಳಕೆದಾರರು ಕಾಣುತ್ತಿರುವುದು ನಿಜಕ್ಕೂ ಏನಾಗುತ್ತಿದೆ ಎಂಬುದಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗಬೇಕಾಗಿದೆ
+
+**ನಮ್ಮ ತಂತ್ರ:**
+
+ನಾವು ಇಗೋ ಒಂದು **ಕೇಂದ್ರಿತ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ** ವ್ಯವಸ್ಥೆಯನ್ನು ಸೃಷ್ಟಿಸುವೆವು. ಇದು ಎಲ್ಲಾ ಮುಖ್ಯ ವಿಷಯಗಳ ನಿಯಂತ್ರಣದಲ್ಲಿ ಒಬ್ಬ ವ್ಯವಸ್ಥಿತ ವ್ಯಕ್ತಿ ಇರುವ ಪ್ರಕಾರ.
+
+![HTML, ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳು ಮತ್ತು ಸ್ಟೇಟ್ ನಡುವಣ ಡೇಟಾ ಪ್ರವಾಹವನ್ನು ತೋರಿಸುವ ಸ್ಕೀಮಾ](../../../../translated_images/data-flow.fa2354e0908fecc8.kn.png)
+
+```mermaid
+flowchart TD
+    A[ಬಳಕೆದಾರ ಕೈಗೆಟು] --> B[ಈвೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್]
+    B --> C[updateState ಫಂಕ್ಶನ್]
+    C --> D{ಸ್ಥಿತಿ ಪರಿಶೀಲನೆ}
+    D -->|ಮಾನ್ಯ| E[ಹೊಸ ಸ್ಥಿತಿ ರಚನೆ]
+    D -->|ಅಮಾನ್ಯ| F[ದೋಷ ನಿರ್ವಹಣೆ]
+    E --> G[ಒಬ್ಜೆಕ್ಟ್.ಫ್ರೀಜ್]
+    G --> H[ಸ್ಥಳೀಯಸಂಗ್ರಹಣೆ ನವೀಕರಣ]
+    H --> I[UI ನವೀಕರಣ ಪ್ರಚೋದನೆ]
+    I --> J[ಬಳಕೆದಾರ ಬದಲಾವಣೆಗಳನ್ನು ನೋಡುತ್ತಾರೆ]
+    F --> K[ಬಳಕೆದಾರ ದೋಷವನ್ನು ನೋಡುತ್ತಾರೆ]
+    
+    subgraph "ಸ್ಥಿತಿ ನಿರ್ವಹಣಾ ಪದರ"
+        C
+        E
+        G
+    end
+    
+    subgraph "ಸ್ಥಿರತೆ ಪದರ"
+        H
+        L[localStorage]
+        H -.-> L
+    end
+```
+**ಈ ಡೇಟಾ ಪ್ರವಾಹವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ:**
+- ಎಲ್ಲಾ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಟೇಟ್ ಅನ್ನು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ
+- ಎಲ್ಲಾ ಸ್ಟೇಟ್ ಬದಲಾವಣೆಗಳನ್ನು ನಿಯಂತ್ರಿತ ಕಾರ್ಯಗಳ ಮೂಲಕ ಮಾರ್ಗನಿರ್ದೇಶನ ಮಾಡುತ್ತದೆ
+- ಬಳಕೆದಾರಮುಖ್ಯಾಂಶವು ಪ್ರಸ್ತುತ ಸ್ಟೇಟ್‌ಗಡೆ ಹೊಂದಿಕೊಂಡಂತೆ ಇರುತ್ತದೆ
+- ಡೇಟಾ ನಿರ್ವಹಣೆಗೆ ಸ್ಪಷ್ಟ, ನಿಗದಿತ ಮಾದರಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ
+
+> 💡 **ವೃತ್ತಿಪರ ಗ್ರಹಿಕೆ**: ಈ ಪಾಠ ಮೂಲ ಸಂಪ್ರದಾಯಗಳಿಗೆ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ. ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ, [Redux](https://redux.js.org) ಮುಂತಾದ ಗ್ರಂಥಾಲಯಗಳು ಸುಧಾರಿತ ಸ್ಟೇಟ್ ನಿರ್ವಹಣಾ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ ಮೂಲ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದರಿಂದ ನೀವು ಯಾವುದೇ ಸ್ಟೇಟ್ ನಿರ್ವಹಣಾ ಗ್ರಂಥಾಲಯವನ್ನು ನಿಷ್ಠುರವಾಗಿ ಹತೋಟಿಗೆ ತರುವುದು.
+
+> ⚠️ **ಮುನ್ನಡೆ ವಿಷಯ**: ನಾವು ಸ್ಟೇಟ್ ಬದಲಾವಣೆಗಳ ಕಾರಣವಾಗುವ ಸ್ವಯಂಚಾಲಿತ UI ಅಪ್ಡೇಟ್ಗಳನ್ನು ಇಲ್ಲಿ ಕಾಣಿಸುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಇದು [ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಪ್ರೋಗ್ರಾಮಿಂಗ್](https://en.wikipedia.org/wiki/Reactive_programming) ಪರಿಕಲ್ಪನೆಗಳೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದೆ. ನಿಮ್ಮ ಕಲಿಕೆಯ ಮುಂದಿನ ಹಂತಕ್ಕೆ ಇದು ಅತ್ಯುತ್ತಮ ಹಾದಿ.
+
+### ಕಾರ್ಯ: ಸ್ಟೇಟ್ ರಚನೆಯನ್ನು ಕೇಂದ್ರೀಕರಣ ಮಾಡುವುದು
+
+ನಾವು ಈಗ ವಿಭಜಿತ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಯನ್ನಿಂದ ಕೇಂದ್ರಿತ ವ್ಯವಸ್ಥೆಗೆ ಪರಿವರ್ತಿಸಲು ಪ್ರಾರಂಭಿಸೋಣ. ಈ ಮೊದಲ ಹೆಜ್ಜೆ ಮುಂದಿನ ಎಲ್ಲಾ ಸುಧಾರಣೆಗಳ ಅಡಿಗಟ್ಟಿ ಅañasಿಸುತ್ತದೆ.
+
+**ಹೆಜ್ಜೆ 1: ಕೇಂದ್ರಿತ ಸ್ಟೇಟ್ ವಸ್ತು ರಚಿಸಿ**
+
+ಸರಳ `account` ಘೋಷಣೆಯನ್ನು ಬದಲಾಯಿಸಿ:
+
+```js
+let account = null;
+```
+
+ಒಂದು ರಚಿಸಲಾದ ಸ್ಟೇಟ್ ವಸ್ತುವಿನಿಂದ:
+
+```js
+let state = {
+  account: null
+};
+```
+
+**ಈ ಬದಲಾವಣೆಯ ಮಹತ್ವ:**
+- ಎಲ್ಲಾ ಅಪ್ಲಿಕೇಶನ್ ಡೇಟಾಗಳನ್ನು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ
+- ರಾಜ್ಯದಲ್ಲಿ ಇನ್ನೂ ಹೆಚ್ಚುವರಿ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸೇರಿಸಲು ರಚನೆಯನ್ನು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ
+- ಸ್ಟೇಟ್ ಮತ್ತು ಇತರ ಚರಗಳಿಗೆ ಸ್ಪಷ್ಟ ಮೆರೆಯುವ ಗಡಿಯನ್ನು ರಚಿಸುತ್ತದೆ
+- ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಬೆಳೆಯುತ್ತಿರಲು ಮಾದರಿಯನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ
+
+**ಹೆಜ್ಜೆ 2: ಸ್ಟೇಟ್ ಪ್ರವೇಶ ಮಾದರಿಗಳನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುವುದು**
+
+ನಿಮ್ಮ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಹೊಸ ಸ್ಟೇಟ್ ರಚನೆಯನ್ನು ಬಳಸುವಂತೆ ತಿದ್ದುಪಡಿ ಮಾಡಿ:
+
+**`register()` ಮತ್ತು `login()` ಫಂಕ್ಷನ್‌ಗಳಲ್ಲಿ**, ಬದಲಾವಣೆ ಮಾಡಿ:
+```js
+account = ...
+```
+
+ಇದಕ್ಕೆ:
+```js
+state.account = ...
+```
+
+**`updateDashboard()` ಫಂಕ್ಷನ್‌ನಲ್ಲಿ**, ಮೇಲ್ಭಾಗದಲ್ಲಿ ಈ ಸಾಲನ್ನು ಸೇರಿಸಿ:
+```js
+const account = state.account;
+```
+
+**ಈ ಅಪ್ಡೇಟ್ಗಳ ಸಾಧನೆ:**
+- ಇತ್ತೀಚಿನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುತ್ತಾ ರಚನೆಯಲ್ಲಿ ಸುಧಾರಣೆ
+- ನಿಮ್ಮ ಕೋಡನ್ನು ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಗೆ ಸಿದ್ಧಗೊಳಿಸುತ್ತದೆ
+- ಸ್ಟೇಟ್ ಡೇಟಾ ಪ್ರವೇಶಕ್ಕೆ ಸुसಂಗತ ಮಾದರಿಗಳನ್ನು ರಚಿಸುತ್ತದೆ
+- ಕೇಂದ್ರಿತ ಸ್ಟೇಟ್ ಅಪ್ಡೇಟ್‌ಗಳ ಅಡಿಗಟ್ಟನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ
+
+> 💡 **ಗಮನಿಸಿ**: ಈ ಪುನರ್ಸಂರಚನೆಯು ತಕ್ಷಣ ನಮ್ಮ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುವುದಿಲ್ಲ, ಆದರೆ ಶಕ್ತಿಶಾಲಿ ಸುಧಾರಣೆಗಳಿಗೆ ಅಗತ್ಯವಾದ ಅಡಿಕಟ್ಟು ಸೃಷ್ಟಿಸುತ್ತದೆ!
+
+### 🎯 ಬೋಧನಾ ಪರಿಶೀಲನೆ: ಕೇಂದ್ರೀಕರಣ ತತ್ವಗಳು
+
+**ನಿಂತು ಚಿಂತಿಸಿ**: ನೀವು ಇತ್ತೀಚೆಗೆ ಕೇಂದ್ರಿತ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಯ ಅಡಿಕಟ್ಟು ಜಾರಿಗೊಳಿಸಿದ್ದೀರೇ. ಇದು ಮಹತ್ವದ ವಾಸ್ತುಶಿಲ್ಪ ನಿರ್ಧಾರ.
+
+**ತ್ವರಿತ ಸ್ವಯಂ-ಮೌಲ್ಯಮಾಪನ:**
+- ಸ್ಟೇಟ್ ಅನ್ನು ಒಂದೇ ವಸ್ತುವಿನಲ್ಲಿ ಕೇಂದ್ರೀಕರಿಸುವುದನ್ನು ವಿಭಜಿತ ಚರಗಳಿಗಿಂತ ಏಕೆ ಉತ್ತಮ ಎಂದು ವಿವರಣೆ ನೀಡಬಹುದು ಎಂದುಕೊಳ್ಳಿ
+- ನೀವು `state.account` ಬಳಸಲು ಸಾಧ್ಯವಾಗುವಂತೆ ಫಂಕ್ಷನ್ ಅನ್ನು ತಿದ್ದುಪಡಿ ಮಾಡದೇ ಬಿಟ್ಟರೆ ಯಾವ ಪರಿಣಾಮಗಳು ಆತ?
+- ಈ ಮಾದರಿ ನಿಮ್ಮ ಕೋಡನ್ನು ಹೆಚ್ಚಿನ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಹೇಗೆ ಸಿದ್ದಪಡಿಸುತ್ತದೆ?
+
+**ವಾಸ್ತವಿಕ ಜೋಡಣೆ**: ನೀವು ಕಲಿತಿರುವ ಕೇಂದ್ರೀಕರಣ ಮಾದರಿ Redux, Vuex, ಮತ್ತು React Context ಮುಂತಾದ ಆಧುನಿಕ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳ ಅಡಿಗಟ್ಟಿ. ನೀವು ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬಳಸುವ ಅದೇ ವಾಸ್ತುಶಿಲ್ಪ ಚಿಂತನೆಯನ್ನೇ ನಿರ್ಮಿಸುತ್ತಿದ್ದೀರಿ.
+
+**ಸವಾಲು ಪ್ರಶ್ನೆ**: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಬಳಕೆದಾರ ಇಚ್ಛೆಗಳು (ಥೀಮ್, ಭಾಷೆ) ಸೇರಿಸಬೇಕಾದರೆ, ನೀವು ಈ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸ್ಟೇಟ್ ರಚನೆಯಲ್ಲಿ ಎಲ್ಲಿಗೆ ಸೇರಿಸುತ್ತಿರಿ? ಇದು ಹೇಗೆ ಬೆಳೆಯುತ್ತದೆ?
+
+## ನಿಯಂತ್ರಿತ ಸ್ಟೇಟ್ ಅಪ್ಡೇಟ್‌ಗಳನ್ನು ಜಾರಿಗೆ ತರುವಿಕೆ
+
+ನಮ್ಮ ಸ್ಟೇಟ್ ಕೇಂದ್ರಿತವಾಗಿದೆ, ಆದ್ದರಿಂದ ಮುಂದಿನ ಹೆಜ್ಜೆ ಡೇಟಾ ತಿದ್ದುಪಡಿ ಗಾಗಿ ನಿಯಂತ್ರಿತ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸ್ಥಾಪಿಸುವುದು. ಇದು ನಿಗದಿತ ಸ್ಟೇಟ್ ಬದಲಾವಣೆ ಮತ್ತು ಸುಲಭ ಡಿಬಗ್ಗಿಂಗ್ ಖಾತ್ರಿ ಮಾಡುತ್ತದೆ.
+
+ಮೂಲತತ್ವವು ವಿಮಾನ ಸಂಚಾರ ನಿಯಂತ್ರಣದಂತಿದೆ: ಸ್ಟೇಟ್ ಅನ್ನು ಸಹಬಳಕೆದಾರ ರೀತಿ ಬದಲಾಯಿಸಲು ಅನುವು ನೀಡದೇ, ಎಲ್ಲಾ ಬದಲಾವಣೆಗಳನ್ನು ಒಂದೇ ನಿಯಂತ್ರಿತ ಫಂಕ್ಷನ್ ಮೂಲಕ ಸಂಚಾಲಿಸುವುದಾಗಿದೆ. ಇದು ಯಾವಾಗ ಮತ್ತು ಹೇಗೆ ಡೇಟಾ ಬದಲಾಯನೆಗಳು ಸಂಭವಿಸುತ್ತವೆ ಎಂಬ ಸ್ಪಷ್ಟ ಅವಲೋಕನ ಒದಗಿಸುತ್ತದೆ.
+
+**ಅಮ್ಯೂಟಬಲ್ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ:**
+
+ನಾವು ನಮ್ಮ `state` ವಸ್ತುವನ್ನು [*ಅಮ್ಯೂಟಬಲ್*](https://en.wikipedia.org/wiki/Immutable_object) ಎಂದು ಪರಿಗಣಿಸುವೆವು; ಅಂದರೆ ನಾವು ನೇರವಾಗಿ ಅದನ್ನು ಬದಲಾಯಿಸುವುದಿಲ್ಲ. ಪ್ರತಿಯೊಂದು ಬದಲಾವಣೆ ಹೊಸ ಸ್ಟೇಟ್ ವಸ್ತು ರಚಿಸುವ ಮೂಲಕ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ.
+
+ಈ ವಿಧಾನ ಪ್ರಾಥಮಿಕವಾಗಿ ನೇರ ಬದಲಾವಣೆಗಳಿಗಿಂತ ಅಕಾರ್ಯಕ್ಷಮವಾಗಿ ತೋರುವುದಾದರೂ, ಡಿಬಗ್ಗಿಂಗ್, ಪರೀಕ್ಷೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಪೂರ್ವಾನುಮಾನಕ್ಕಾಗಿ ಮಹತ್ವದ ಲಾಭಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
+
+**ಅಮ್ಯೂಟಬಲ್ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಯ ಪ್ರಯೋಜನಗಳು:**
+
+| ಪ್ರಯೋಜನ | ವಿವರಣೆ | ಪರಿಣಾಮ |
+|---------|----------|-----------|
+| **ಪೂರ್ವಾನುಮಾನ** | ಬದಲಾವಣೆಗಳನ್ನು ನಿಯಂತ್ರಿತ ಫಂಕ್ಷನ್ಗಳ ಮೂಲಕ ಮಾತ್ರ ಆಗುತ್ತವೆ | ಡಿಬಗ್ಗ್ ಮತ್ತು ಪರೀಕ್ಷೆ ಸುಲಭ |
+| **ಇತಿಹಾಸ ಹಾರಾವಣೆ** | ಪ್ರತಿ ಸ್ಟೇಟ್ ಬದಲಾವಣೆ ಹೊಸ ವಸ್ತು ಸೃಷ್ಟಿಸುತ್ತದೆ | ಅನ್ಡೂ/ರಿಡೋ ಕಾರ್ಯಗಳ ಅನುಮತಿ |
+| **ಪಕ್ಷ ಪರಿಣಾಮ ತಡೆ** | ಯಾದೃಚ್ಛಿಕ ಬದಲಾವಣೆಗಳಿಲ್ಲ | ರಹಸ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಗಟ್ಟುತ್ತದೆ |
+| **ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ** | ಸ್ಟೇಟ್ ಯಾರ ಆಗರಿಸುತ್ತಿತ್ತಾದರೋ ಸುಲಭ ದರ್ಶನ | ಪರಿಣಾಮಕಾರಿ UI ಅಪ್ಡೇಟ್ಗಳಿಗೆ ಸಹಾಯ |
+
+**`Object.freeze()` ಬಳಸಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಮ್ಯೂಟಬಿಲಿಟಿ:**
+
+ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) ವಸ್ತು ಬದಲಾವಣೆಗಳನ್ನು ತಡೆಯಲು ಒದಗಿಸುತ್ತದೆ:
+
+```js
+const immutableState = Object.freeze({ account: userData });
+// ಬದಲಾಯಿಸಲಾಗದ ಸ್ಥಿತಿಯನ್ನು ಬದಲಾಯಿಸಲು ಯಾವುದೇ ಪ್ರಯತ್ನವೂ ಒಂದು ದೋಷವನ್ನು ಉಂಟುಮಾಡುವುದು
+```
+
+**ಇಲ್ಲಿ ಏನಾಗುತ್ತೆ ಎಂಬುದನ್ನು ವಿವರಿಸುವುದು:**
+- ನೇರ ಗುಣಲಕ್ಷಣ ನಿಯೋಜನೆ ಅಥವಾ ಅಳಿಸುವಿಕೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ
+- ತಿದ್ದುಪಡಿ ಪ್ರಯತ್ನ ಮಾಡಿದರೆ exceptions ಎಸೆದು ನಿಲ್ಲಿಸುತ್ತದೆ
+- ಸ್ಟೇಟ್ ಬದಲಾವಣೆಗಳು ನಿಯಂತ್ರಿತ ಫಂಕ್ಷನ್‌ಗಳ ಮೂಲಕ ಆಗಬೇಕಾಗಿದೆ ಎಂದು ಖಾತ್ರಿ ಪಡಿಸುತ್ತದೆ
+- ಸ್ಟೇಟ್ ನವೀಕರಣದ ಬಗ್ಗೆ ಸ್ಪಷ್ಟ ಒಪ್ಪಂದ ಸೃಷ್ಟಿಸುತ್ತದೆ
+
+> 💡 **ವಿಸ್ತೃತ ಅಧ್ಯಯನ**: [MDN ಡಾಕ್ಯುಮೆಂಟೇಶನ್](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) ನಲ್ಲಿ *ಶALLOW* ಮತ್ತು *ಡೀಪ್* ಅಮ್ಯೂಟಬಲ್ ವಸ್ತುಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಕಲಿಯಿರಿ. ಸಂಕೀರ್ಣ ಸ್ಟೇಟ್ ರಚನೆಗಳಿಗೆ ಈ ವ್ಯತ್ಯಾಸ ಅತೀವ ಅವಶ್ಯಕ.
+
+```mermaid
+stateDiagram-v2
+    [*] --> StateV1: ಪ್ರಾಥಮಿಕ ಸ್ಥಿತಿ
+    StateV1 --> StateV2: updateState('account', newData)
+    StateV2 --> StateV3: updateState('account', anotherUpdate)
+    StateV3 --> StateV4: updateState('preferences', userSettings)
+    
+    note right of StateV1
+        Object.freeze()
+        ಬದಲಿಸಲಾಗದ
+        ಡಿಬಗ್ಗೆ ಮಾಡುವಾವುದು
+    end note
+    
+    note right of StateV2
+        ಹೊಸ ವಸ್ತು ರಚಿಸಲಾಗಿದೆ
+        ಹಳೆಯ ಸ್ಥಿತಿಯು ಉಳಿಸಲಾಗಿದೆ
+        ಮುಂದುಗೋಳುವ ಬದಲಾವಣೆಗಳು
+    end note
+```
+### ಕಾರ್ಯ
+
+ಹೊಸ `updateState()` ಫಂಕ್ಷನ್ ರಚಿಸೋಣ:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+ಈ ಫಂಕ್ಷನ್‌ನಲ್ಲಿ, ನಾವು ಹಿಂದಿನ ಸ್ಟೇಟ್‌ನಿಂದ ಡೇಟಾವನ್ನು ನಕಲಿ ಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ನೂತನ ಡೇಟಾವಿನಿಂದ ಸ್ಟೇಟ್ ವಸ್ತುವಿನ ಕೆಲವು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮೀರಿಸುವ ಮೂಲಕ ಹೊಸ ಸ್ಟೇಟ್ ವಸ್ತುವನ್ನು ರಚಿಸುತ್ತೇವೆ. `[property]` ಬ ಪ್ರವೇಶಾಂಕವನ್ನು ಬದಲಾವಣೆಗಾಗಿ ಬಳಸುತ್ತೇವೆ. ಕೊನೆಯಲ್ಲಿ `Object.freeze()` ಉಪಯೋಗಿಸಿ ವಸ್ತುವನ್ನು ಸಂಶೋಧನೆಗೆ ಬಂದ ಬದಲಾವಣೆಗಳಿಂದ ರಕ್ಷಿಸುತ್ತೇವೆ. ಈಗಿಗೂ ಸ್ಟೇಟ್‌ನಲ್ಲಿ ಕೇವಲ `account` ಗುಣಲಕ್ಷಣ ಮಾತ್ರ ಇರುತ್ತದೆ, ಆದರೆ ಈ ವಿಧಾನದಿಂದ ನೀವು ಬೇಕಾದಷ್ಟು ಗುಣಲಕ್ಷಣ ಸೇರಿಸಬಹುದು.
+
+ನಂತರ, ಆರಂಭಿಕ ಸ್ಟೇಟ್ ಅನ್ನು ಕೂಡ ಸ್ಥಿರಗೊಳಿಸುವಂತೆ `state` ಪ್ರಾರಂಭಣೆಯನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡೋಣ:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+ನಂತರ, `register` ಫಂಕ್ಷನ್‌ನಲ್ಲಿ `state.account = result;` ಅನ್ನು ಈ ಮೂಲಕ ಬದಲಾಯಿಸಿ:
+
+```js
+updateState('account', result);
+```
+
+`login` ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಕೂಡ `state.account = data;` ಅನ್ನು ಈ ಮೂಲಕ ಬದಲಾಯಿಸಿ:
+
+```js
+updateState('account', data);
+```
+
+ಬಳಕೆದಾರ Logout ಮಾಡಿದಾಗ ಖಾತೆ ಡೇಟಾ ಸ್ವಚ್ಛವಾಗದಿರುವ ಸಮಸ್ಯೆಯನ್ನು ಸರಿಪಡಿಸಲು ಈಗಾಗಲೇ ಅವಕಾಶ ಸಿಗುತ್ತದೆ.
+
+ಹೊಸ `logout()` ಫಂಕ್ಷನ್ ರಚಿಸಿ:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+`updateDashboard()`ನಲ್ಲಿ, ರೀಡೈರೆಕ್ಷನ್ `return navigate('/login');` ಅನ್ನು `return logout()` ಗೆ ಬದಲಾಯಿಸಿ;
+
+ಹೊಸ ಖಾತೆಯನ್ನು ನೋಂದಾಯಿಸಿ, ಲಾಗೌಟ್ ಮಾಡಿ ಮತ್ತೆ ಲಾಗಿನ್ ಮಾಡಿ ಎಲ್ಲವೂ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
+
+> ಟಿಪ್: `updateState()` ಕಡೆಯಲ್ಲಿಯೇ `console.log(state)` ಅನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನಲ್ಲಿ ಕಾನ್ಸೋಲ್ ತೆರೆಯಿರಿ, ಎಲ್ಲ ಸ್ಟೇಟ್ ಬದಲಾವಣೆಗಳನ್ನು ನೋಟ ಮಾಡಿ.
+
+## ಡೇಟಾ ಸ್ಥಾಯಿತ್ವ ಜಾರಿಗೊಳಿಸುವಿಕೆ
+
+ಮುಂಚೆ ಗುರುತಿಸಿದ ಸೆಷನ್ ಕಳೆದುಹೋಗುವ ಸಮಸ್ಯೆ ಬ್ರೌಸರ್ ಸೆಷನ್‌ಗಳ ಮಧ್ಯೆ ಬಳಕೆದಾರ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವಲ್ಲಿನ ಅಗತ್ಯವಿದೆ. ಇದು ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ತಾತ್ಕಾಲಿಕ ಅನುಭವದಿಂದ ವಿಶ್ವಾಸನೀಯ, ವೃತ್ತಿಪರ ಸಾಧನವಾಗಿಸುತ್ತದೆ.
+
+ಅಣುಘಂಟೆಗಳು ವಿದ್ಯುತ್ ಕಡಿಮೆಯಾಗಿದ್ದರೂ ನಿಖರ ಸಮಯವನ್ನು ಸ್ಥಿರವಾಗಿಟ್ಟುಕೊಳ್ಳುವಂತೆ, ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಕೂಡ ಬ್ರೌಸರ್ ಸೆಷನ್‌ಗಳ ನಡುವೆ ಅವಶ್ಯಕ ಬಳಕೆದಾರ ಡೇಟಾವನ್ನು ಉಳಿಸಿಕೊಳ್ಳಲು ಸ್ಥಿರ ಸಂಗ್ರಹಣಾ ವಿಧಾನಗಳನ್ನು ಹೊಂದಿರಬೇಕು.
+
+**ಡೇಟಾ ಸ್ಥಾಯಿತ್ವಕ್ಕಾಗಿ ಸೌಕ್ತಿಕ ಪ್ರಶ್ನೆಗಳು:**
+
+ಸ್ಥಾಯಿತ್ವವನ್ನು ಜಾರಿಗೆ ತರುವ ಮೊದಲು ಈ ಮಹತ್ವದ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸಿ:
+
+| ಪ್ರಶ್ನೆ | ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಸಂಧರ್ಭ | ತೀರ್ಮಾನದ ಪರಿಣಾಮ |
+|----------|--------------------------|-------------------|
+| **ಡೇಟಾ ಸಂವೇದನಶೀಲವೇ?** | ಖಾತೆ ಶೇಷ, ವ್ಯವಹಾರ ಇತಿಹಾಸ | ಭದ್ರ ಸಂಗ್ರಹಣಾ ವಿಧಾನಗಳ ಆಯ್ಕೆ |
+| **ಇದು ಎಷ್ಟು ಕಾಲ ಸ್ಥಿರವಾಗಿರಬೇಕು?** | ಲಾಗಿನ್ ಸ್ಥಿತಿ ಹಾಗೂ ತಾತ್ಕಾಲಿಕ UI ಆದ್ಯತೆಗಳು | ಯೋಗ್ಯ ಸಂಗ್ರಹಣ ಸಮಯವನ್ನು ಆಯ್ಕೆಮಾಡಿ |
+| **ಸರ್ವರ್‌ಗೆ ಇದ್ರ ಅಗತ್ಯವಿದೆಯೇ?** | ಪ್ರamaanೀಕರಣ ಟೋಕೇನ್ಗಳು ಹಾಗೂ UI ಸೆಟ್ಟಿಂಗ್ಸ್ | ಹಂಚಿಕೆ ಅಗತ್ಯತೆಗಳನ್ನು ನಿರ್ಧರಿಸಿ |
+
+**ಬ್ರೌಸರ್ ಸಂಗ್ರಹಣ ಆಯ್ಕೆಗಳು:**
+
+ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ವಿವಿಧ ಸಂಗ್ರಹಣ ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ, ಪ್ರತಿ ಒಬ್ಬವೂ ಭಿನ್ನ ಬಳಕೆಗೆ ರೂಪುಗೊಂಡವು:
+
+**ಪ್ರಾಥಮಿಕ ಸಂಗ್ರಹಣ APIs:**
+
+1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: ಸ್ಥಿರ [ಕೀ/ಮೌಲ್ಯ ಸಂಗ್ರಹಣ](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
+   - ಬಿಳ್ವಳದ ಬ್ರೌಸರ್ ಸೆಶನ್‌ಗಳ ನಡುವೆ ದತ್ತಾಂಶವನ್ನು **ಸ್ಥಾಯಿಯಾಗಿ** ಕಾಯ್ದಿಡುತ್ತದೆ  
+   - ಬ್ರೌಸರ್ ಮರುಪ್ರಾರಂಭ ಮತ್ತು ಕಂಪ್ಯೂಟರ್ ರೀಲೋಡ್ ಸಹಿಸುವುದು
+   - ನಿಯಮಿತವಾಗಿ ನಿರ್ದಿಷ್ಟ ವೆಬ್‌ಸೈಟ್ ಡೊಮೇನ್ ಗೆ **ಪರಿಧಿತ**
+   - ಬಳಕೆದಾರ ಆದ್ಯತೆಗಳು ಹಾಗೂ ಲಾಗಿನ್ ಸ್ಥಿತಿಗಳಿಗಾಗಿ **ಉತ್ತಮ**
+
+2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: ತಾತ್ಕಾಲಿಕ ಸೆಶನ್ ಸಂಗ್ರಹಣ
+   - ಸಕ್ರಿಯ ಸೆಶನ್ ಅವಧಿಯಲ್ಲಿ localStorage ಗೆ ಹೋಲುವ ರೀತಿಯಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
+   - ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ ಮುಚ್ಚಿದಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ **ಅಳಿಸುತ್ತದೆ**
+   - ಸ್ಥಿರವಾಗಿರಬಾರಾದ ತಾತ್ಕಾಲಿಕ ದತ್ತಾಂಶಕ್ಕೆ **ಉತ್ತಮ**
+
+3. **[HTTP ಕುಕೀಸ್](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: ಸರ್ವರ್ ಹಂಚಿಕೊಳ್ಳುವ ಸಂಗ್ರಹಣ
+   - ಸರ್ವರ್‌ಗೆ ಪ್ರತಿಯೊಂದು ವಿನಂತಿಯೊಂದಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕಳುಹಿಸಲಾಗುತ್ತದೆ
+   - **ಪ್ರಮಾನೀಕರಣ** ಟೋಕೇನ್ಗೆ ಅತ್ಯುತ್ತಮ
+   - ಗಾತ್ರದಲ್ಲಿ ಸೀಮಿತ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಪ್ರಭಾವ ಬೀರುವಷ್ಟು
+
+**ದತ್ತಾಂಶ ಸರಣೀಕರಣ ಅವಶ್ಯಕತೆ:**
+
+`localStorage` ಹಾಗೂ `sessionStorage` ಎರಡುಕ್ಕೂ ಮಾತ್ರ [ತstring ಕಳಬಳಿಕೆಯನ್ನೇಳಿಸು](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String):
+
+```js
+// ಸಂಗ್ರಹಿಸಲು ವಸ್ತುಗಳನ್ನು JSON ಸ್ಟ್ರಿಂಗ್‌ಗಳಾಗಿ ಪರಿವರ್ತಿಸಿ
+const accountData = { user: 'john', balance: 150 };
+localStorage.setItem('account', JSON.stringify(accountData));
+
+// ಮರುಪಡೆಯುವಾಗ JSON ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ವಸ್ತುಗಳಿಗೆ ವಿಶ್ಲೇಷಿಸಿ
+const savedAccount = JSON.parse(localStorage.getItem('account'));
+```
+
+**ಸರಣೀಕರಣ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ:**
+- **JavaScript ವಸ್ತುಗಳನ್ನು JSON ನಲ್ಲಿ ಪರಿವರ್ತಿಸಲು** [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) ಬಳಕೆ
+- JSON ನಿಂದ ವಸ್ತುಗಳನ್ನು ಮತ್ತೆ ತಯಾರಿಸಲು [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) ಉಪಯೋಗಿಸಿ
+- ಸಂಕೀರ್ಣ ಜಟಿಲ ವಸ್ತುಗಳು ಮತ್ತು ಷೇರುಗಳನ್ನೂ ಸ್ವಯಂಕ್ರಿಯವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ
+- ಕಾರ್ಯಗಳು, ಅಸ್ಥಿರ ಮೌಲ್ಯಗಳು ಮತ್ತು ವೃತ್ತಾಕಾರದ ಸೂಚನೆಗಳ ಮೇಲೆ ವಿಫಲವಾಗುತ್ತದೆ
+
+> 💡 **ಆಧುನಿಕ ಆಯ್ಕೆ**: ದೊಡ್ಡ ದತ್ತಸಂಗ್ರಹಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಆಫ್‌ಲೈನ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) ಪರಿಗಣಿಸಿ. ಇದು ಪೂರ್ಣ ಗ್ರಾಹಕ-ಮಟ್ಟದ ಡೇಟಾಬೇಸ್ ಒದಗಿಸುತ್ತದೆ ಆದರೆ ಜಟಿಲ ಅನುಷ್ಠಾನ ಅಗತ್ಯವಿದೆ.
+
+```mermaid
+quadrantChart
+    title ಬ್ರೌಸರ್ ಸಂಗ್ರಹಣೆ ಆಯ್ಕೆಗಳು
+    x-axis ಕಡಿಮೆ ಸಡಿಲತೆ --> ಹೆಚ್ಚು ಸಡಿಲತೆ
+    y-axis ಕಿರು ಅವಧಿ --> ದೀರ್ಘ ಅವಧಿ
+    
+    quadrant-1 ವೃತ್ತಿಪರ ಸಾಧನಗಳು
+    quadrant-2 ಸರಳ ಸ್ಥಿರತೆ
+    quadrant-3 ತಾತ್ಕಾಲಿಕ ಸಂಗ್ರಹಣೆ
+    quadrant-4 ಉನ್ನತ ವ್ಯವಸ್ಥೆಗಳು
+    
+    localStorage: [0.3, 0.8]
+    sessionStorage: [0.2, 0.2]
+    HTTP Cookies: [0.6, 0.7]
+    IndexedDB: [0.9, 0.9]
+    Memory Variables: [0.1, 0.1]
+```
+### ಕಾರ್ಯ: localStorage ಸ್ಥಿರತೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+
+ಬಳಕೆದಾರರು ಸ್ಪಷ್ಟವಾಗಿ ಲಾಗೌಟ್ ಆಗುವವರೆಗೂ ಲಾಗಿನ್ ಸ್ಥಿತಿಯನ್ನು ಕಾಪಾಡಿ ಉಳಿಸುವಂತೆ ಸ್ಥಿರ ಸಂಗ್ರಹಣವನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸೋಣ. ಬ್ರೌಸರ್ ಸೆಶನ್‌ಗಳ ನಡುವೆ ಖಾತೆ ದತ್ತಾಂಶವನ್ನು ಭದ್ರಪಡಿಸಲು `localStorage` ಬಳಸದೋಣ.
+
+**ಹಂತ 1: ಸಂಗ್ರಹಣ ಸಂರಚನೆ ನಿರ್ಧರಿಸಿ**
+
+```js
+const storageKey = 'savedAccount';
+```
+
+**ಈ ಕಾನ್ಸ್ಟೆಂಟ್ ನೀಡುವವು:**
+- ನಮ್ಮ ಸಂಗ್ರಹಿತ ದತ್ತಾಂಶಕ್ಕೆ ಸಾಬೀತಾದ ಗುರುತು ಸೃಷ್ಟಿಸುತ್ತದೆ
+- ಸಂಗ್ರಹಣೆ ಕೀ ಉಲ್ಲೇಖಗಳಲ್ಲಿ ಲಿಪ ಮಾಡುವ ತಪ್ಪುಗಳನ್ನು ತಪ್ಪಿಸುತ್ತದೆ
+- ಬೇಕಾದರೆ ಸಂಗ್ರಹಣ ಕೀ ಬದಲಾಯಿಸಲು ಸುಲಭವನ್ನಾಗಿಸುತ್ತದೆ
+- ನಿರ್ವಹಣೀಯವಾಗಿರುವ ಬ್ಯಾಕ್ಎಂಡ್ ಕೋಡ್‌ಗೆ ಅನುಗುಣವಾಗಿ ಅನುಸರಿಸುತ್ತದೆ
+
+**ಹಂತ 2: ಸ್ವಯಂಚಾಲಿತ ಸ್ಥಿತಿಗೈತನ ಸೇರಿಸಿ**
+
+`updateState()` ಫಂಕ್ಷನ್ನಿನ ಕೊನೆಯಲ್ಲಿ ಈ ಸಾಲನ್ನು ಹಾಕಿ:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+**ಇಲ್ಲಿ ಏನಾಗುತ್ತದೆ ವಿವರಣೆ:**
+- ಖಾತೆ ವಸ್ತುವನ್ನು JSON ಸರಣೀಕರಿಸಿ ಸ್ಟೋರ್ ಮಾಡುತ್ತದೆ
+- ಸಧ್ಯದ ಸಂಗ್ರಹಣ ಕೀ ಬಳಸಿ ದತ್ತಾಂಶವನ್ನು ಉಳಿಸುತ್ತಿದೆ
+- ಸ್ಥಿತಿಯಲ್ಲಿ ಬದಲಾವಣೆ ಆಗುತ್ತಿದ್ದಂತೆ ಸ್ವಯಂಚಾಲಿತ ಕಾರ್ಯನಿರ್ವಹಣೆ
+- ಸಂಗ್ರಹಿತ ದತ್ತಾಂಶವು ಸಧ್ಯದ ಸ್ಥಿತಿಗೆ ಹೊಂದಾಣಿಕೆ ಆಗಿರುವುದು ಖಚಿತಪಡಿಸುತ್ತದೆ
+
+> 💡 **ವಾಸ್ತುಶಿಲ್ಪದ ಪ್ರಯೋಜನ**: ನಾವು ಎಲ್ಲಾ ಸ್ಥಿತಿಯ ಅಪ್‌ಡೇಟನ್ನು `updateState()` ಮೂಲಕ ಕೇಂದ್ರೀಕರಿಸಿದ್ದರಿಂದ, ಸ್ಥಿರತೆಯ ಸೇರ್ಪಡೆ ಒಂದು ಸಾಲಿನಲ್ಲಿ ಸಾಧ್ಯವಾಯಿತು. ಉತ್ತಮ ವಾಸ್ತುಶಿಲ್ಪದ ಶಕ್ತಿ ಇದು!
+
+**ಹಂತ 3: ಅಪ್ಲೋಡ್ ಸಮಯದಲ್ಲಿ ಸ್ಥಿತಿ ಮರುಸ್ಥಾಪಿಸಿ**
+
+ಉಳಿಸಲಾಗಿದ್ದ ಕೀಪಡನ್ನು ಮರುಸ್ಥಾಪಿಸುವ ಆರಂಭಿಕ ಕಾರ್ಯವನ್ನು ರಚಿಸಿ:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // ನಮ್ಮ ಹಿಂದಿನ ಪ್ರಾರಂಭ ಕೋಡ್
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+**ಆರಂಭಿಕಾ ಕಾರ್ಯದ ಪ್ರಕ್ರಿಯೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ:**
+- localStorage ನಲ್ಲಿ ಉಳಿದಿದ್ದ ಖಾತೆ ದತ್ತಾಂಶವನ್ನು ಪಡೆಯುತ್ತದೆ
+- JSON ಸರಣೀಕರಿಸಿದ್ದ ನುಡಿಯಿಂದ ವಸ್ತುವಿಗೆ ಮರುಪಾರ್ಸಿಂಗ್ ಮಾಡುತ್ತದೆ
+- ನಿಯಂತ್ರಿತ ಅಪ್‌ಡೇಟ್ ಫಂಕ್ಶನ್ ಬಳಸಿ ಸ್ಥಿತಿ ನವೀಕರಿಸುತ್ತದೆ
+- ಬಳಕೆದಾರ ಸೆಶನ್‌ನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪುನಃಸ್ಥಾಪಿಸುತ್ತದೆ
+- ಮಾರ್ಗದ ಅಪ್‌ಡೇಟ್ಗಳ ಮುಂಚೆ ಈ ಕಾರ್ಯನು ನಿರ್ವಹಿಸುತ್ತದೆ
+
+**ಹಂತ 4: ಡೀಫಾಲ್ಟ್ ಮಾರ್ಗವನ್ನು ಸರಿಪಡಿಸಿ**
+
+ಸ್ಥಿರತೆಯ ಪ್ರಯೋಜನ ಪಡೆಯಲು ಡೀಫಾಲ್ಟ್ ಮಾರ್ಗವನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿ:
+
+`updateRoute()`ಯಲ್ಲಿ ಈ ಬದಲು ಹಾಕಿ:
+
+```js
+// ಬದಲಿಸಿ: return navigate('/login');
+return navigate('/dashboard');
+```
+
+**ಈ ಬದಲಾವಣೆ ಯಾಕೆ ಉಪಯುಕ್ತ?**
+- ನಮ್ಮ ಹೊಸ ಸ್ಥಿರತೆಯ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಉಪಯೋಗಿಸುತ್ತದೆ
+- ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನ್ನು ಪ್ರಮಾಣೀಕರಣ ಪರಿಶೀಲನೆಗೆ ಅನುಮತಿಸುತ್ತದೆ
+- ಉಳಿದ ಸೆಶನ್ ಇಲ್ಲದಿದ್ದರೆ ಸ್ವಯಂಚಾಲಿತ ಲಾಗಿನ್‌ಗೆ ಮರಳಿಸುತ್ತದೆ
+- ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವ ಒದಗಿಸುತ್ತದೆ
+
+**ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+
+1. ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‌లో ಲಾಗಿನ್ ಆಗಿ
+2. ಬ್ರೌಸರ್ ಪುಟವನ್ನು ಪುನಃ ಲೋಡ್ ಮಾಡಿ
+3. ನೀವು ಲಾಗಿನ್ ಆಗಿ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನಲ್ಲಿ ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸಿ
+4. ಬ್ರೌಸರ್ ಅನ್ನು ಮುಚ್ಚಿ ಮತ್ತೆ ತೆರೆಯಿರಿ
+5. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಹೋಗಿ ನೀವು ಇನ್ನೂ ಲಾಗಿನ್ ಆಗಿರುವುದನ್ನು ದೃಢಪಡಿಸಿ
+
+🎉 **ಸಾಧನೆ!**: ನೀವು ಯಶಸ್ವಿಯಾಗಿ ಸ್ಥಿರ ರಾಜ್ಯ ನಿರ್ವಹಣೆಯನ್ನು ಅನುಷ್ಟಾನಗೊಳಿಸಿದ್ದೀರಿ! ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಈಗ ವೃತ್ತಿಪರ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಪ್ರಕಾರ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
+
+### 🎯 ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ: ಸ್ಥಿರತೆಯ ವಾಸ್ತುಶಿಲ್ಪ
+
+**ವಾಸ್ತುಶಿಲ್ಪ ತಿಳುವಳಿಕೆ**: ನೀವು ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ದತ್ತ ನಿರ್ವಹಣೆಯ ಸಂಕೀರ್ಣತೆಯನ್ನು ಸಮತೋಲಗೊಳಿಸುವ ಹೊರಗಿನ sophisticated ಸ್ಥಿರತೆಯ ಪದರವನ್ನು ಅನುಷ್ಠಾನ ಮಾಡಿದ್ದೀರಿ.
+
+**ಪ್ರಮುಖ ಸಂಪ್ರದಾಯಗಳು:**
+- **JSON ಸರಣೀಕರಣ**: ಸಂಕೀರ್ಣ ವಸ್ತುಗಳನ್ನು ಸঞ্চಯಿಸಲು ಸ್ಟ್ರಿಂಗ್ ಆಗಿ ಪರಿವರ್ತಿಸುವುದು
+- **ಸ್ವಯಂಕ್ರಿಯ ಸಮ್ಮಿಲನ**: ಸ್ಥಿತಿಯಲ್ಲಿ ಬದಲಾವಣೆ ಆಗಿದ್ದಂತೆ ಸ್ಥಿರ ಸಂಗ್ರಹಣ ಇನ್ನಷ್ಟೂ
+- **ಸೆಶನ್ ಮರುಪಡೆಯಿರಿ**: ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ತುಸು ವ್ಯತ್ಯಯದ ನಂತರ ಬಳಕೆದಾರ ಸಂದರ್ಭ ಮರುಸ್ಥಾಪಿಸಬಲ್ಲವು
+- **ಕೇಂದ್ರಿತ ಸ್ಥಿರತೆ**: ಒಂದು ಅಪ್‌ಡೇಟ್ ಫಂಕ್ಷನ್ ಸಕಲ ಸಂಗ್ರಹಣಕ್ಕೂ ನಿರ್ವಹಣೆಗೆ
+
+**ಕಡತ ಜೋಡಣ**: ಈ ಸ್ಥಿರತೆಯ ಮಾದರಿ ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಸ್ (PWAs), ಆಫ್‌ಲೈನ್ ಪ್ರಾಥಮಿಕ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಮತ್ತು ಆಧುನಿಕ ಮೋಬೈಲ್ ವೆಬ್ ಅನುಭವಗಳಿಗೆ ಮೂಲಾಧಾರವಾಗಿದೆ. ನೀವು ಉತ್ಪಾದನಾ ಮಟ್ಟದ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೀರಿ.
+
+**ಚಿಂತನೆ ಪ್ರಶ್ನೆ:** ಒಂದೇ ಸಾಧನದಲ್ಲಿ ಹಲವಾರು ಬಳಕೆದಾರ ಖಾತೆಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು? ಗೌಪ್ಯತೆ ಮತ್ತು ಭದ್ರತಾ ಪರಿಣಾಮಗಳನ್ನು ಪರಿಗಣಿಸಿ.
+
+## ಸ್ಥಿರತೆಯೊಂದಿಗೆ ದತ್ತ ಹೊಸತನವನ್ನು ಸಮತೋಲಗೊಳಿಸುವುದು
+
+ನಮ್ಮ ಸ್ಥಿರತಾ ವ್ಯವಸ್ಥೆ ಬಳಕೆದಾರ ಸೆಶನ್‌ಗಳನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಉಳಿಸುತ್ತದೆ, ಆದರೆ ಹೊಸ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ: ದತ್ತಾಂಶ ಹಳೆಯದು ಆಗಿರುವುದು. ಹಲವು ಬಳಕೆದಾರರು ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಒಂದೇ ಸರ್ವರ್ ದತ್ತಾಂಶವನ್ನು ಬದಲಾಯಿಸಿದಾಗ, ಸ್ಥಳೀಯ ಕ್ಯಾಶೆ ಮಾಡಿದ ಮಾಹಿತಿ ಹಳೆಯದು ಆಗುತ್ತದೆ.
+
+ಈ ಪರಿಸ್ಥಿತಿ ವಿಕಿಂಗ್ ನ್ಯಾವಿಗೇಟರ್‌ಗಳು ಜಕ್ಷ್ಯ ತಾರಾಗಣಿತ ಮತ್ತು ಪ್ರಸ್ತುತ ಆಕಾಶ ವೀಕ್ಷಣೆಯನ್ನು ನಂಬಿದಿದ್ದಂತೆ. ತಾರಾಗಣಿತ ಸ್ಥಿರತೆ ನೀಡುತ್ತಿತ್ತು, ಆದರೆ ನ್ಯಾವಿಗೇಟರ್‌ಗಳು ಬದಲಾವಣೆಯ ವಿಮರ್ಶೆಗೆ ಪ್ರಸ್ತುತ ವೀಕ್ಷಣೆಯನ್ನು ಬೇಕಾಗಿತ್ತು. ಹಾಗೆಯೇ, ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಸ್ಥಿರ ಬಳಕೆದಾರ ಸ್ಥಿತಿ ಹಾಗೂ ಪ್ರಸ್ತುತ ಸರ್ವರ್ ದತ್ತಾಂಶ ಎರಡೂ ಅಗತ್ಯ.
+
+**🧪 ದತ್ತ ಹೊಸತನ ದೋಷ ಕಂಡುಹಿಡಿಯುವುದು:**
+
+1. `test` ಖಾತೆ ಬಳಸಿ ಡ್ಯಾಶ್ಬೋರ್ಡ್‌ನಲ್ಲಿ ಲಾಗಿನ್ ಆಗಿ
+2. ಇತರ ಮೂಲದಿಂದ ವಹಿವಾಟನ್ನು ಅನುಕರಿಸಲು ಟರ್ಮಿನಲ್‌ನಲ್ಲಿ ಈ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ:
+
+```sh
+curl --request POST \
+     --header "Content-Type: application/json" \
+     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
+     http://localhost:5000/api/accounts/test/transactions
+```
+
+3. ಬ್ರೌಸರ್‌ನಲ್ಲಿರುವ ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಪುಟವನ್ನು ಪುನಃ ಲೋಡ್ ಮಾಡಿ
+4. ಹೊಸ ವಹಿವಾಟನ್ನು ನೀವು ನೋಡಬಹುದೇ ಎಂಬುದನ್ನು ಗಮನಿಸಿ
+
+**ಈ ಪರೀಕ್ಷೆ ಏನು ತೋರಿಸುತ್ತದೆ:**
+- ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣವು ಹೇಗೆ "ಹಳೆಯದು" ಆಗಬಹುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ
+- ಅಪ್ಲಿಕೇಶನ್ ಹೊರಗಿನ ಘಟನೆಗಳಾಗುವ ಸ್ಥಿತಿಗಳನ್ನು ಅನುಕರಿಸುತ್ತದೆ
+- ಸ್ಥಿರತೆ ಮತ್ತು ದತ್ತ ಹೊಸತನ ನಡುವಿನ ಒತ್ತಡವನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ
+
+**ದತ್ತ ಹಳೆಯತನ ಆಡಳಿತ:**
+
+| ಸಮಸ್ಯೆ | ಕಾರಣ | ಬಳಕೆದಾರ ಪರಿಣಾಮ |
+|---------|-------|-------------|
+| **ಹಳೆಯ ದತ್ತಾಂಶ** | localStorage ಸ್ವಯಂಚಾಲಿತ ಮುಗಿಸುವಿಕೆ ಇಲ್ಲ | ಬಳಕೆದಾರರು ಹಳೆಯ ಮಾಹಿತಿಯನ್ನು ನೋಡುತ್ತಾರೆ |
+| **ಸರ್ವರ್ ಬದಲಾವಣೆಗಳು** | ಇತರ ಅಪ್ಲಿಕೇಶನ್ಗಳು/ಬಳಕೆದಾರರು ಒಂದೇ ದತ್ತ ತೋರಿಕೆ ಬದಲಾಯಿಸುತ್ತಾರೆ | ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳು ನಡುವಿನ ಅಸಮನ್ವಯದುತ್ತಾನೆ |
+| **ಕ್ಯಾಶೆ ವಿರುದ್ಧ ವಾಸ್ತವಿಕತೆ** | ಸ್ಥಳೀಯ ಕ್ಯಾಶೆ ಸರ್ವರ್ ಸ್ಥಿತಿಗೆ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ | ಕೆಟ್ಟ ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ಗೊಂದಲ |
+
+**ಸಮಾಧಾನ ತಂತ್ರಜ್ಞಾನ:**
+
+ನಾವು "ಲೋಡ್ ಮಾಡುವಾಗ ರಿಫ್ರೆಷ್" ಮಾದರಿಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸೋಣ, ಇದು ಸ್ಥಿರತೆ ಪ್ರಯೋಜನಗಳ ಜೊತೆಗೆ ದತ್ತ ಹೊಸತನ ಅಗತ್ಯವನ್ನು ಸಮತೋಲಗೊಳಿಸುತ್ತದೆ. ಈ ವಿಧಾನ ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವ ಕಾಯ್ದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ದತ್ತ ಖಚಿತತೆಗಾಗಿ ಒಪ್ಪಿಗೆಯಾದಾಗುತ್ತದೆ.
+
+```mermaid
+sequenceDiagram
+    participant U as ಬಳಕೆದಾರ
+    participant A as ಅಪ್ಲಿಕೇಶನ್
+    participant L as ಸ್ಥಳೀಯಸಂಗ್ರಹಣೆ
+    participant S as ಸರ್ವರ್
+    
+    U->>A: ಅಪ್ಲಿಕೇಶನ್ ತೆರೆಯು
+    A->>L: ಉಳಿಸಿರುವ ಸ್ಥಿತಿಯನ್ನು ಲೋಡ್ ಮಾಡಿ
+    L-->>A: ಸಂಗ್ರಹಿತ ಡೇಟಾವನ್ನು_Return_ಮಾಡಿ
+    A->>U: ತಕ್ಷಣ UI ತೋರಿಸಿ
+    A->>S: ಹೊಸ ಡೇಟಾವನ್ನು ಪಡೆದು ಕೊಳ್ಳಿ
+    S-->>A: ಪ್ರಸ್ತುತ ಡೇಟಾವನ್ನು_Return_ಮಾಡಿ
+    A->>L: ಸಂಗ್ರಹಣೆಯನ್ನು ನವಿಕರಿಸಿ
+    A->>U: ಹೊಸ ಡೇಟಾ ಜೊತೆಗೆ UI ನವೀಕರಿಸಿ
+```
+### ಕಾರ್ಯ: ದತ್ತಾ ರಿಫ್ರೆಷ್ ವ್ಯವಸ್ಥೆ ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+
+ನಾವು ಸರ್ವರ್‌ನಿಂದ ಸತತವಾಗಿ تازಾ ದತ್ತಾಂಶವನ್ನು ತರಲು ಹಾಗೆಯೇ ನಮ್ಮ ಸ್ಥಿರ ಸ್ಥಿತಿಗೈತನ ವ್ಯವಸ್ಥೆಯ ಪ್ರಯೋಜನಗಳನ್ನು ಉಳಿಸಿಕೊಳ್ಳುವ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸುವೆವು.
+
+**ಹಂತ 1: ಖಾತೆ ದತ್ತಾಂಶ ನವೀಕರಣಕಾರ್ ರಚಿಸಿ**
+
+```js
+async function updateAccountData() {
+  const account = state.account;
+  if (!account) {
+    return logout();
+  }
+
+  const data = await getAccount(account.user);
+  if (data.error) {
+    return logout();
+  }
+
+  updateState('account', data);
+}
+```
+
+**ಈ ಫಂಕ್ಷನ್ ತರ್ಕ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ:**
+- ಬಳಕೆದಾರ ಲಾಗಿನ್ ಆಗಿದೆಯೆ ಎನ್ನುವಿಕೆ (state.account ಇರುವುದು) ಪರಿಶೀಲಿಸಿ
+- ಮಾನ್ಯ ಸೆಶನ್ ಇಲ್ಲದಿದ್ದರೆ ಲಾಗೌಟ್‌ಗೆ ಮಾರ್ಗದರ್ಶಿಸಿ
+- ಈಗಾಗಲೇ ಇರುವ `getAccount()` ಬಳಸಿ ಸರ್ವರ್ ನಿಂದ ಹೊಸ ಖಾತೆ ದತ್ತಾಂಶವನ್ನು ಪಡೆದು ಬರುವುದು
+- ದೋಷಗಳಿಲ್ಲದಂತೆ ಸರ್ವರ್ ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸಿ, ಮಾನ್ಯತೆ ಇಲ್ಲದ ಸೆಶನ್‌ಗಳನ್ನು ಲಾಗೌಟ್ ಮಾಡಿ
+- ನಮ್ಮ ನಿಯಂತ್ರಿತ ಅಪ್‌ಡೇಟ್ ವ್ಯವಸ್ಥೆಯ ಮೂಲಕ ಸ್ಥಿತಿಯನ್ನು ಹೊಸ ದತ್ತಾಂಶಕ್ಕೆ ನವೀಕರಿಸಿ
+- `updateState()` ಮೂಲಕ tựಯವಾಗಿ localStorage ಸ್ಥಿರತೆಯನ್ನು ಪ್ರೇರೇಪಿಸಿ
+
+**ಹಂತ 2: ಡ್ಯಾಶ್ಬೋರ್ಡ್ ರಿಫ್ರೆಷ್ ಹ್ಯಾಂಡ್ಲರ್ ರಚಿಸಿ**
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+**ಈ ರಿಫ್ರೆಷ್ ಫಂಕ್ಷನಿಂದ ಏನು ಸಾದ್ಯವಾಗುತ್ತದೆ:**
+- ದತ್ತ ರಿಫ್ರೆಷ್ ಮತ್ತು UI ನವೀಕರಣದ ಸಂಯೋಜನೆ
+- ತಾಜಾ ದತ್ತಾಂಶ ಲೋಡ್ ಆದ ನಂತರ ಪ್ರದರ್ಶನ ನವೀಕರಿಸಲು ಕಾಯುವುದು
+- ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಹೆಚ್ಚಿನ പാര്‌ಯೋಗಿತ ಮಾಹಿತಿಯನ್ನು ತೋರಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು
+- ದತ್ತ ನಿರ್ವಹಣೆಯು ಮತ್ತು UI ನವೀಕರಣವನ್ನು ಬೇರ್ಪಡಿಸಿ ನಿರ್ವಹಿಸುವುದು
+
+**ಹಂತ 3: ಮಾರ್ಗ ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ಅಳವಡಿಸಿಕೊಳ್ಳಿ**
+
+ನಿಮ್ಮ ಮಾರ್ಗ ಕಾನ್ಫಿಗರೇಶನ್ನಿನಲ್ಲಿ ಈ ರಿಫ್ರೆಷ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತ ಕಾರ್ಯನಿರ್ವಹಣೆಗೆ ಸೇರಿಸಿ:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+**ಈ ಅಳವಡಿಕೆ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:**
+- ಪ್ರತಿಯೋಮ್ಮೆ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಮಾರ್ಗ ಲೋಡ್ ಆಗುವಾಗ ರಿಫ್ರೆಷ್ ಫಂಕ್ಷನ್ ನಡೆಯುತ್ತದೆ
+- ಬಳಕೆದಾರರು ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಗೆ ಹೋಗುವಾಗ ಸದಾ ತಾಜಾ ಮಾಹಿತಿ ತೋರಿಸಲಾಗುತ್ತದೆ
+- ಹಳೆಯ ಮಾರ್ಗ ರಚನೆ ಉಳಿದುಕೊಂಡು ದತ್ತ ಹೊಸತನವನ್ನು ಸೇರಿಸುತ್ತದೆ
+- ಮಾರ್ಗ-ನಿರ್ದಿಷ್ಟ ಆರಂಭಿಕರಣಕ್ಕಾಗಿ ಸಮ್ಮಿಲಿತ ಮಾದರಿ ಒದಗಿಸುತ್ತದೆ
+
+**ನಿಮ್ಮ ದತ್ತಾ ರಿಫ್ರೆಷ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+
+1. ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಲಾಗಿನ್ ಆಗಿ
+2. ಮೊದಲು ನೀಡಲಾದ	curl ಆಜ್ಞೆಯನ್ನು ಇಡೀ ನಡೆಸಿ ಹೊಸ ವಹಿವಾಟು ಸೃಷ್ಟಿಸಲು
+3. ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಪುಟವನ್ನು ಪುನಃ ಲೋಡ್ ಮಾಡಿ ಅಥವಾ ದೂರ ಹೋಗಿ ಮರಳಿ ಬನ್ನಿ
+4. ಹೊಸ ವಹಿವಾಟು ತಕ್ಷಣವೇ ಕಾಣುವಂತೆ ಖಚಿತಪಡಿಸಿ
+
+🎉 **ಸಂಪೂರ್ಣ ಸಮತೋಲ ಸಾಧನೆ**: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಈಗ ಸ್ಥಿರ ರಾಷ್ಟಾವಂತಿಕೆಯನ್ನು ಕಾಪಾಡುತ್ತಿದ್ದು, ಸರ್ವರ್‌ನ ತಾಜಾ ದತ್ತಾಂಶ ಅರಿವಿನಿಂದ ಕೂಡಿದೆ!
+
+## 📈 ನಿಮ್ಮ ರಾಜ್ಯ ನಿರ್ವಹಣಾ ಪ್ರಭುತ್ವ ಟೈಮ್‌ಲೈನ್
+
+```mermaid
+timeline
+    title ವೃತ್ತిపರ ರಾಜ್ಯ ನಿರ್ವಹಣಾ ಪ್ರಯಾಣ
+    
+    section ಸಮಸ್ಯೆ ಗುರುತಿಸುವಿಕೆ
+        ರಾಜ್ಯ ಸಮಸ್ಯೆಗಳ ನಿರ್ಣಯ
+            : ಸೆಷನ್ ನಷ್ಟ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಿ
+            : ವಿತರಿತ ನವೀಕರಣ ಸಮಸ್ಯೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+            : ವಾಸ್ತುಶಿಲ್ಪ ಅಗತ್ಯಗಳನ್ನು ಗುರುತಿಸಿ
+    
+    section ವಾಸ್ತುಶಿಲ್ಪ ನೆಲೆ
+        ಕೇಂದ್ರಿತ ರಾಜ್ಯ ವಿನ್ಯಾಸ
+            : ಏಕೀಕೃತ ರಾಜ್ಯ ವಸ್ತುಗಳನ್ನು ಸೃಷ್ಟಿಸಿ
+            : ನಿಯಂತ್ರಿತ ನವೀಕರಣ ಮಾದರಿಗಳನ್ನು ಅನುಷ್ಠಾನ ಮಾಡಿ
+            : ಅಚಲ ತತ್ವಗಳನ್ನು ಸ್ಥಾಪಿಸಿ
+        
+        ನಿರೀಕ್ಷಿತ ನವೀಕರಣಗಳು
+            : Object.freeze() ಬಳಕೆಯನ್ನು ಪರಿಣತಿ ಮಾಡಿ
+            : ಡಿಬಗ್ ಸ್ನೇಹಿ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ಮಿಸಿ
+            : ಮಾಪನೀಯ ಮಾದರಿಗಳನ್ನು ಸೃಷ್ಟಿಸಿ
+    
+    section ಉಳಿವು ನಿಪುಣತೆ
+        localStorage ಏಕೀಕರಣ
+            : JSON ಸರಣೀಕರಣವನ್ನು ನಿರ್ವಹಿಸಿ
+            : ಸ್ವಯಂಚಾಲಿತ ಸಮನೆಟನೆಯನ್ನು ಅನುಷ್ಠಾನ ಮಾಡಿ
+            : ಸೆಷನ್_continuity ಸೃಷ್ಟಿಸಿ
+        
+        ಡೇಟಾ تازಾ ಸಮತೋಲನ
+            : ಹಳೆಯತನದ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಿ
+            : ನವೀಕರಣ ಯಂತ್ರಗಳನ್ನು ನಿರ್ಮಿಸಿ
+            : ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಖಚಿತತೆಯ ಮದ್ಯಗಳ ಸಮತೋಲನ
+    
+    section ವೃತ್ತಿಪರ ಮಾದರಿಗಳು
+        ಉತ್ಪಾದನಾ-ಸಜ್ಜುಗೊಂಡ ವ್ಯವಸ್ಥೆಗಳು
+            : ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಅನುಷ್ಠಾನ ಮಾಡಿ
+            : ನಿರ್ವಹಿಸಬಹುದಾದ ವಾಸ್ತುಶಿಲ್ಪಗಳನ್ನು ಸೃಷ್ಟಿಸಿ
+            : ಉದ್ಯಮ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ
+        
+        ಸುಧಾರಿತ ಸಾಮರ್ಥ್ಯಗಳು
+            : ಫ್ರೇಮ್ವರ್ಕ್ ಏಕೀಕರಣಕ್ಕೆ ಸಿದ್ಧವಾಗಿರಿ
+            : ಜಟಿಲ ರಾಜ್ಯ ಅವಶ್ಯಕತೆಗಳಿಗೆ ಸಿದ್ಧರಾಗಿ
+            : ರಿಯಲ್-ಟೈಮ್ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ನೆಲೆಯಾಗಿ
+```
+**🎓 ಪದವೀಧರ ಹಂತ:** ನೀವು ರೇಡಕ್ಷ್, Vuex ಮತ್ತು ಇತರೆ ವೃತ್ತಿಪರ ರಾಜ್ಯ ಗ್ರಂಥಾಲಯಗಳ ಆಧಾರದ ಮೇಲೆ ಪೂರ್ಣ ರಾಜ್ಯ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿಕೊಂಡಿದ್ದೀರಿ. ಈ ಮಾದರಿಗಳು ಸರಳ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಂದ ಉದ್ಯಮ ಮಟ್ಟದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳವರೆಗೆ ವಿಸ್ತಾರಗೊಳ್ಳುತ್ತವೆ.
+
+**🔄 ಮುಂದಿನ ಮಟ್ಟದ ಸಾಮರ್ಥ್ಯಗಳು:**
+- ರಾಜ್ಯ ನಿರ್ವಹಣಾ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳನ್ನು (Redux, Zustand, Pinia) ಕದನ ಮಾಡಲು ಸಿದ್ಧತೆ
+- ವೆಬ್‌ಸಾಕೆಟ್‌ಗಳೊಂದಿಗೆ ರಿಯಲ್-ಟೈಮ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಲು ತಯಾರಿ
+- ಆಫ್‌ಲೈನ್-ಫಸ್ಟ್ ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಿಸಲು ಸಾಮರ್ಥ್ಯ
+- ರಾಜ್ಯ ಯಂತ್ರಗಳು ಮತ್ತು ವೀಕ್ಷಕರಂತಹ ಅగ్రಗಣ್ಯ ಮಾದರಿಗಳಿಗಾಗಿ ನೆಲ ಹಾಕಲಾಗಿದೆ
+
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ಎಜಂಟ್ ಮೋಡ್ ಬಳಸಿ ಕೆಳಗಿನ ಚಾಲೆಂಜ್ ಪೂರೈಸಿ:
+
+**ವಿವರಣೆ:** ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ undo/redo ಕಾರ್ಯಕ್ಷಮತೆಯೊಂದಿಗೆ ಕಾಂಪ್ಲೆಕ್ಸ್ ರಾಜ್ಯ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ. ಈ ಚಾಲೆಂಜ್ ಸ್ಟೇಟ್ ಇತಿಹಾಸಗಳನ್ನು ಹಿಟ್ ತಳ್ಳುವಿಕೆ, ಅಪ್ರಮಾಣಿಕ ಅಪ್‌ಡೇಟ್‌ಗಳು ಹಾಗೂ UI ಸಂಯೋಜನೆ ಮುಂತಾದ ಅತಿ ಜಟಿಲ ರಾಜ್ಯ ನಿರ್ವಹಣಾ ತತ್ತ್ವಗಳ ಅಭ್ಯಾಸ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಹೆಚ್ಚಳಗೊಂಡ ರಾಜ್ಯ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿ, ಅದರಲ್ಲಿ: 1) ಪೂರ್ವದ ಎಲ್ಲಾ ರಾಜ್ಯಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಸ್ಟೇಟ್ ಇತಿಹಾಸದ ಅರೆ, 2) ಹಿಂದಕ್ಕೆ ಮತ್ತು ಮುಂದಕ್ಕೆ ವಾಪಾಸು ಹೋಗುವ undo ಮತ್ತು redo ಕ್ರಿಯೆಗಳು, 3) ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನಲ್ಲಿ undo/redo ಗೆ UI ಬಟನ್‌ಗಳು, 4) ಮೆಮೊರಿ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು 10 ರಾಜ್ಯಗಳ ಗರಿಷ್ಠ ಇತಿಹಾಸ ಮಿತಿಯು, 5) ಬಳಕೆದಾರ ಲಾಗೌಟ್ ಆಗುವಾಗ ಇತಿಹಾಸದ ಸ್ವಚ್ಛತೆ. undo/redo ಕಾರ್ಯಕ್ಷಮತೆ ಖಾತೆ ಶಿಪ್ಪಣೆ ಬದಲಾವಣೆಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಬೇಕು ಮತ್ತು ಬ್ರೌಸರ್ ರಿಫ್ರೆಶ್‌ಗೂ ಸಹ ಸ್ಥಾಯಿಯಾಗಿರಬೇಕು.
+
+[information about agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಇಲ್ಲಿ ಪಡೆಯಿರಿ.
+
+## 🚀 ಚಾಲೆಂಜ್: ಸಂಗ್ರಹಣ ಗರಿಷ್ಟತೆ
+
+ನಿಮ್ಮ ಅನುಷ್ಠಾನ ಈಗ ಬಳಕೆದಾರ ಸೆಶನ್, ದತ್ತ ರಿಫ್ರೆಷ್ ಮತ್ತು ರಾಜ್ಯ ನಿರ್ವಹಣೆಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿಭಾಯಿಸುತ್ತದೆ. ಆದರೆ, ನಮ್ಮ ಪ್ರಸ್ತುತ ವಿಧಾನ ಸಂಗ್ರಹಣದ ಸಾಧನೆಯನ್ನು ಕಾರ್ಯಕ್ಷಮತೆಯ ಜೊತೆ ಸಮತೋಲಗೊಳಿಸುವುದೇ ಎಂದು ಪರಿಗಣಿಸಿ.
+
+ಹುಡುಕಾಟ ಮಾಸ್ಟರ್ಗಳು ಅವಶ್ಯಕ ಘಟಕಗಳು ಮತ್ತು ಬಳಸದ ಪದಾರಂಭಗಳನ್ನು ವಿಭಿನ್ನಗೊಳ್ಳುವ ಮೂಲಕ ಸಮರ್ಥ ರಾಜ್ಯ ನಿರ್ವಹಣೆಯನ್ನು ಸಾಧಿಸುತ್ತಾರೆ. ಪರಿಣಾಮಕಾರಿಯಾದ Estado ನಿರ್ವಹಣೆ ಯಾವ ದತ್ತ ಸಂಪರ್ಕ ಸಾಧಿಸಬೇಕೆಂದು ಹಾಗೂ ಯಾವುದು ಸರ್ವರ್‌ನಿಂದ ತಾಜಾ ಆಗಿರಬೇಕು ಎಂದು ಗುರುತಿಸುತ್ತದೆ.
+
+**ಗರಿಷ್ಟತೆ ವಿಶ್ಲೇಷಣೆ:**
+
+ನಿಮ್ಮ ಪ್ರಸ್ತುತ localStorage ರಚನೆಯನ್ನು ಮೌಲ್ಯಾಂಕಿಸಿ ಈ ತಂತ್ರತಾತ್ವಿಕ ಪ್ರಶ್ನೆಗಳನ್ನು ಯೋಚಿಸಿ:
+- ಬಳಕೆದಾರ ದತ್ತ ಗುರುತಿಸುವಿಕೆಯನ್ನು ಕಾಯ್ದುಕೊಳ್ಳಲು ಕನಿಷ್ಠ ಮಾಹಿತಿ ಯಾವದು ಬೇಕು?
+- ಯಾವ ದತ್ತಾಂಶ ಹೆಚ್ಚು ಬದಲಾಗುತ್ತವೆ, ಅದು ಸ್ಥಳೀಯ ಕ್ಯಾಶೆ ಮಾಡುವುದರಿಂದ ಕಡಿಮೆ ಲಾಭ ಮಾಡುತ್ತದೆ?
+- ಸಂಗ್ರಹಣ ಗರಿಷ್ಟತೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೇಗೆ ಸುಧಾರಿಸಬಹುದು, ಬಳಕೆದಾರ ಅನುಭವ ಕುಗ್ಗದೆ
+
+ಈ ರೀತಿಯ ವಾಸ್ತುಶಿಲ್ಪ ವಿಶ್ಲೇಷಣೆ ಅನುಭವಸंपನ್ನ ಡೆವಲಪರ್‌ರನ್ನು ಗುರುತಿಸುತ್ತದೆ, ಜಿಜ್ಞಾಸು ಕೋಡ್ ಜೊತೆಗೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಿಸುತ್ತದೆ.
+
+**ಅನುಷ್ಠಾನ ತಂತ್ರಜ್ಞಾನ:**
+- ಸ್ಥಿರವಾಗಿರಬೇಕಾದ ಅತಿ ಪ್ರಮುಖ ದತ್ತಾಂಶವನ್ನು ಗುರುತಿಸಿ (ಬಹುಶಃ ಬಳಕೆದಾರ ಗುರುತಿಸುವಿಕೆ ಮಾತ್ರ)
+- ನಿಮ್ಮ localStorage ರಚನೆಯನ್ನು ಕೇವಲ ಪ್ರಮುಖ ಸೆಶನ್ ದತ್ತಾಂಶವನ್ನು ಸೇರ್ಪಡೆ ಮಾಡುವಂತೆ ಬದಲಾಯಿಸಿ
+- ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಭೇಟಿ ವೇಳೆ ಸರ್ವರ್‌ನಿಂದ ಹೊಸ ದತ್ತಾಂಶವನ್ನು ಯಾವಾಗಲೂ ಲೋಡ್ ಮಾಡಲಿ
+- ನಿಮ್ಮ ಗರಿಷ್ಠ ತಂತ್ರಜ್ಞಾನ ಬಳಕೆದಾರ ಅನುಭವದ ಸಮಾನತೆಯನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ಪರೀಕ್ಷಿಸಿ
+
+**ಆಧುನಿಕ ಪರಿಗಣನೆ:**
+- ಸಂಪೂರ್ಣ ಖಾತೆ ದತ್ತಾಂಶ ಸಂಗ್ರಹಿಸುವ ತಪ್ಪಿಗೆ ವಿರುದ್ಧವಾಗಿ ಕೇವಲ ಪ್ರಮಾನಪತ್ರ ಟೋಕೇನ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸುವ ಲಾಭ-ನಷ್ಟಗಳು
+- ನಿಮ್ಮ ನಿರ್ಧಾರಗಳು ಹಾಗೂ ಕಾರಣಗಳನ್ನು ತಂಡದ ಭವಿಷ್ಯದ ಸದಸ್ಯರಿಗಾಗಿ ದಾಖಲಿಸಿ
+
+ಈ ಚಾಲೆಂಜ್ ನಿಮಗೆ ವೃತ್ತಿಪರ ಡೆವಲಪರ್ ಹಿಂದಿನಂತೆ ಯೋಚಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸುವಂತೆ! ಸಮಯ ತೆಗೆದು ವಿಭಿನ್ನ ವಿಧಾನಗಳನ್ನು ಪ್ರಯೋಗಿಸಿ!
+
+## ಉಪನ್ಯಾಸಾನಂತರ Quiz
+
+[ಉಪನ್ಯಾಸಾನಂತರ Quiz](https://ff-quizzes.netlify.app/web/quiz/48)
+
+## ಹಾಜರಿ
+
+["ವಹಿವಾಟು ಸೇರಿಸಿ" ಸಂವಾದವನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ](assignment.md)
+
+ಹೀಗಿದೆ ನಿಮ್ಮ ಹಾಜರಿ ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ ಉದಾಹರಣೆಯ ಫಲಿತಾಂಶ:
+
+![ಉದಾಹರಣೆ "ವಹಿವಾಟು ಸೇರಿಸಿ" ಸಂವಾದವನ್ನು ತೋರಿಸುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/dialog.93bba104afeb79f1.kn.png)
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಎಚ್ಚರಿಕೆ**:  
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗೆ ಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ದಸ್ತಾವೇಜಿನ ಮೂಲ ಭಾಷೆಯನ್ನು ಅಧಿಕೃತ ಮೂಲವಾಗೆ ಪರಿಗಣಿಸುವುದು ಉತ್ತಮ. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಸೂಚಿಸಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಮ್ಯತ್ಯಾಸಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥೈಸುಪ್ಪಿನ ಹೊಣೆಗಾರಿಕೆ ನಮ್ಮದಾಗಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/4-state-management/assignment.md

@@ -0,0 +1,164 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "50a7783473b39a2e0f133e271a102231",
+  "translation_date": "2026-01-08T18:01:29+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "kn"
+}
+-->
+# "ಲೆನದ ಪತ್ರವನ್ನು ಸೇರಿಸಿ" ಡೈಲಾಗ್ ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+
+## ಅವಲೋಕನ
+
+ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಈಗ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಮತ್ತು ಡೇಟಾ ಪರ್ಸಿಸ್ಟನ್ಸ್ ಪಡೆದಿದೆ, ಆದರೆ ಅದು ಒಂದು ಅವಶ್ಯಕ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಹೊಂದಿಲ್ಲ: ಬಳಕೆದಾರರು ತಮ್ಮದೇ ಲೆನದ ಪತ್ರಗಳನ್ನು ಸೇರಿಸಲು ಸಾಧ್ಯವಾಗಬೇಕಾಗಿದೆ. ಈ ಅಸೈನ್‌ಮೆಂಟ್‌ನಲ್ಲಿ, ನೀವು ನಿಮ್ಮ ಇತರ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ಸೊಗಸಾಗಿ ಏಕೀಕರಿಸುವ ಸಂಪೂರ್ಣ "ಲೆನದ ಪತ್ರವನ್ನು ಸೇರಿಸಿ" ಡೈಲಾಗ್ ಅನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುತ್ತೀರಿ.
+
+ಈ ಅಸೈನ್‌ಮೆಂಟ್ ನಿಮ್ಮ ನಾಲ್ಕು ಬ್ಯಾಂಕಿಂಗ್ ಪಾಠಗಳಲ್ಲಿ ಕಲಿತ ಎಲ್ಲಾ ವಿಷಯಗಳನ್ನು: HTML ಟೆಂಪ್ಲೇಟಿಂಗ್, ಫಾರ್ಮ್ ಹ್ಯಾಂಡಲಿಂಗ್, API ಏಕೀಕರಣ, ಮತ್ತು ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಅನ್ನು ಒಟ್ಟಾರೆ ಕೊಂಡೊಯ್ಯುತ್ತದೆ.
+
+## ಕಲಿಕೆ ಉದ್ದೇಶಗಳು
+
+ಈ ಅಸೈನ್‌ಮೆಂಟ್ ಪೂರ್ಣಗೊಳಿಸುವ ಮೂಲಕ, ನೀವು:
+- **ಬಳಕೆದಾರ ಸ್ನೇಹಿ** ಡೈಲಾಗ್ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ರಚಿಸುವಿರಿ
+- **ಅಕ್ಸೆಸಿಬಲ್** ಫಾರ್ಮ್ ವಿನ್ಯಾಸವನ್ನು ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬೆಂಬಲದೊಂದಿಗೆ ಅನುಷ್ಠಾನಗೊಳಿಸುವಿರಿ
+- **ಎಕ್ಸಿಸ್ಟಿಂಗ್ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್** ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಏಕೀಕರಿಸುವಿರಿ
+- **API ಸಂವಹನ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆ** ಅಭ್ಯಾಸ ಮಾಡುವಿರಿ
+- **ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಮಾದರಿಗಳನ್ನು** ನೈಜ-ಲೋಕ ವೈಶಿಷ್ಟ್ಯಕ್ಕೆ ಅನ್ವಯಿಸುವಿರಿ
+
+## ಸೂಚನೆಗಳು
+
+### ಹಂತ 1: ಲೆನದ ಪತ್ರ ಸೇರಿಸುವ ಬಟನ್
+
+ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಪುಟದಲ್ಲಿ ಬಳಕೆದಾರರು ಸುಲಭವಾಗಿ ಕಂಡು ಸಾಧಿಸಲು ಆಗುವ "ಲೆನದ ಪತ್ರ ಸೇರಿಸಿ" ಬಟನ್ ಅನ್ನು **ಸೃಷ್ಟಿಸಿ**.
+
+**ಅವಶ್ಯಕತೆಗಳು:**
+- ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನ ತರ್ಕಬದ್ಧ ಸ್ಥಳದಲ್ಲಿ ಬಟನ್ **ನಿರ್ವಹಿಸಿ**
+- ಸ್ಪಷ್ಟ, ಕ್ರಿಯಾಶೀಲ ಬಟನ್ ಪಠ್ಯವನ್ನು **ಬಳಸು**
+- ನಿಮ್ಮ ಇತ್ತೀಚಿನ UI ವಿನ್ಯಾಸಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಬಟನನ್ನು **ಶೈಲಿ ಮಾಡಿ**
+- ಬಟನ್ ಕೀಬೋರ್ಡ್ ಮೂಲಕ **ಸುಲಭವಾಗಿ ಬಳಕೆ ಮಾಡಬಹುದಾಗಿರಲಿ**
+
+### ಹಂತ 2: ಡೈಲಾಗ್ ಅನುಷ್ಠಾನ
+
+ನಿಮ್ಮ ಡೈಲಾಗ್ ಅನುಷ್ಠಾನಕ್ಕೆ ಈ ಎರಡು ವಿಧಾನಗಳಲ್ಲೊಂದು ಆಯ್ಕೆಮಾಡಿ:
+
+**ವಿಕಲ್ಪ A: ಪ್ರತ್ಯೇಕ ಪುಟ**
+- ಲೆನದ ಪತ್ರ ಫಾರ್ಮ್‌ಗೆ ಹೊಸ HTML ಟೆಂಪ್ಲೇಟನ್ನು **ಸೃಷ್ಟಿಸಿ**
+- ನಿಮ್ಮ ರೌಟಿಂಗ್ ವ್ಯವಸ್ಥೆಗೆ ಹೊಸ ಮಾರ್ಗವನ್ನು **ಹೋರಾಟ ಮಾಡಿ**
+- ಫಾರ್ಮ್ ಪುಟಕ್ಕೆ ಮತ್ತು ಹಿಂದಕ್ಕೆ ಸಂಚರಿಸುವ ಅವಕಾಶವನ್ನು **ಅನುಷ್ಠಾನಗೊಳಿಸಿ**
+
+**ವಿಕಲ್ಪ B: ಮೋಡಲ್ ಡೈಲಾಗ್ (ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ)**
+- ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಬಿಟ್ಟುಹೋಗದೆ JavaScript ಬಳಸಿ ಡೈಲಾಗ್ ಅನ್ನು ತೋರಿಸ/ಮರೆಮಾಡಿ
+- [`hidden` ಗುಣಲಕ್ಷಣ](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) ಅಥವಾ CSS ವರ್ಗಗಳನ್ನು **ಬಳಸಿರಿ**
+- ಸರಿಯಾದ ಫೋಕಸ್ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಸಿವಾರ ಪಟ್ಟ ಅನುಭವವನ್ನು **ತಯಾರಿಸಿ**
+
+### ಹಂತ 3: ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಅನುಷ್ಠಾನ
+
+ನಿಮ್ಮ ಡೈಲಾಗ್ [ಮೋಡಲ್ ಡೈಲಾಗ್‌ಗಳಿಗೆ ನನ್ನವಿರುವ ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಮಾನದಂಡಗಳನ್ನು](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) ಪೂರೈಸುವಂತೆ **ಪರಿಶೀಲಿಸಿ**:
+
+**ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಶನ್:**
+- ಡೈಲಾಗ್ ಮುಚ್ಚಲು Escape ಕೀ ಬೆಂಬಲಿಸಿ
+- ಡೈಲಾಗ್ ತೆರೆಯಲಾದಾಗ ಫೋಕಸ್ ಅನ್ನು ಒಳಗಿನ ಭಾಗದಲ್ಲಿಯೇ **ಬಿಗಿ ಹಿಡಿಸಿ**
+- ಮುಚ್ಚಿದ ನಂತರ ಫೋಕಸ್ ಅನ್ನು ಟ್ರಿಗರ್ ಬಟನ್ಗೆ ಮತ್ತೆ **ಹಿಂತಿರುಗಿಸಿ**
+
+**ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬೆಂಬಲ:**
+- ಸೂಕ್ತ ARIA ಲೇಬಲ್ಗಳು ಮತ್ತು ಪಾತ್ರಗಳನ್ನು **ಹೋದಲಿಸಿ**
+- ಡೈಲಾಗ್ ತೆರೆಯುವುದು/ಮುಚ್ಚುವುದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗೆ **ಘೋಷಿಸಿ**
+- ಸ್ಪಷ್ಟ ಫಾರ್ಮ್ ಕ್ಷೇತ್ರ ಲೇಬಲ್ಗಳನ್ನು ಮತ್ತು ದೋಷ ಸಂದೇಶಗಳನ್ನು **ನೀಡಿ**
+
+### ಹಂತ 4: ಫಾರ್ಮ್ ರಚನೆ
+
+ಲೆನದ ಪತ್ರ ಡೇಟಾಗೆ ಸೇರಿಸಲು HTML ಫಾರ್ಮ್ ಅನ್ನು **ವಿನ್ಯಾಸ ಮಾಡಿ**:
+
+**ಅವಶ್ಯಕ ಕ್ಷೇತ್ರಗಳು:**
+- **ದಿನಾಂಕ**: ಲೆನದ ಪತ್ರ ಯಾವಾಗ ನಡೆದಿದೆ
+- **ವಿವರಣೆ**: ಲೆನದ ಪತ್ರ ಯಾವ ಕಾರಣಕ್ಕಾಗಿ ಇದೆ
+- **ಮುಲ್ಯ**: ಲೆನದ ಪತಿಯ ಮೌಲ್ಯ (ಆದಾಯಕ್ಕೆ ಧನಾತ್ಮಕ, ಖರ್ಚಿಗೆ ಋಣಾತ್ಮಕ)
+
+**ಫಾರ್ಮ್ ವೈಶಿಷ್ಟ್ಯಗಳು:**
+- ಸಲ್ಲಿಸುವ ಮೊದಲು ಬಳಕೆದಾರ ಅಂಕಗಳನ್ನು **ಸರಿಯಾದದಾಗಿರುವುದನ್ನೌಪಯೋಗಿ**
+- ತಪ್ಪು ಡೇಟಾಗೆ ಸ್ಪಷ್ಟ ದೋಷ ಸಂದೇಶಗಳನ್ನು **ನೀಡಿ**
+- ಸಹಾಯಕ Placeholder ಪಠ್ಯ ಮತ್ತು ಲೇಬಲ್ಗಳನ್ನು **ಸೇರಿಸಿ**
+- ನಿಮ್ಮ ಇತ್ತೀಚಿನ ವಿನ್ಯಾಸಕ್ಕೆ ಸಮ್ಮತವಾಗಿ **ಶೈಲಿ ಮಾಡಿ**
+
+### ಹಂತ 5: API ಏಕೀಕರಣ
+
+ನಿಮ್ಮ ಫಾರ್ಮ್ ಅನ್ನು ಬ್ಯಾಂಕಿಂಗ್ API ನೊಂದಿಗೆ **ಸಂಪರ್ಕಿಸಿ**:
+
+**ಅನುಷ್ಠಾನ ಹಂತಗಳು:**
+- ಸರಿಯಾದ ಎಂಡ್‌ಪಾಯಿಂಟ್ ಮತ್ತು ಡೇಟಾ ಫಾರ್ಮಾಟ್ ಗಾಗಿ [ಸರ್ವರ್ API ನಿರ್ದಿಷ್ಟತೆಗಳನ್ನು](../api/README.md) **ಪರಿಶೀಲಿಸಿ**
+- ಫಾರ್ಮ್ ಇನ್ಪುಟ್‌ಗಳಿಂದ JSON ಡೇಟಾ **ತಯಾರಿಸಿ**
+- ಸರಿಯಾದ ದೋಷ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ API ಗೆ ಡೇಟಾವನ್ನು **ಪাঠಿಸಿ**
+- ಬಳಕೆದಾರಿಗೆ ಯಶಸ್ಸು/ವಿಫಲತೆ ಸಂದೇಶಗಳನ್ನು **ತೋರಿಸಿ**
+- ನೆಟ್‌ವರ್ಕ್ ದೋಷಗಳನ್ನು ಶ್ರದ್ಧೆಯುತವಾಗಿ **ನಿರ್ವಹಿಸಿ**
+
+### ಹಂತ 6: ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಏಕೀಕರಣ
+
+ಹೊಸ ಲೆನದ ಪತ್ರದೊಂದಿಗೆ ನಿಮ್ಮ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು **ಅัปಡೇಟ್ ಮಾಡಿ**:
+
+**ಎಕೀಕರಣ ಅವಶ್ಯಕತೆಗಳು:**
+- ಲೆನದ ಪತ್ರ ಯಶಸ್ವಿಯಾಗಿ ಸೇರಿಸಿದ ನಂತರ ಖಾತೆ ಡೇಟಾವನ್ನು **ರಿಫ್ರೆಶ್ ಮಾಡಿ**
+- ಪುಟ ರೀಹ್‌ಲೋಡ್ ಅಗತ್ಯವಿಲ್ಲದೆ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಪ್ರದರ್ಶನವನ್ನು **ನವೀಕರಿಸಿ**
+- ಹೊಸ ಲೆನದ ಪತ್ರ ತಕ್ಷಣವೇ **ತೋರಿಸಬೇಕು**
+- ಪ್ರಕ್ರಿಯೆ ಅವಧಿಯಲ್ಲಿ ಸರಿಯಾದ ಸ್ಟೇಟ್ ಸಮ್ಮತತೆಯನ್ನು **ರಕ್ಷಿಸಿ**
+
+## ತಾಂತ್ರಿಕ ನಿರ್ದಿಷ್ಟತೆಗಳು
+
+**API ಎಂಡ್‌ಪಾಯಿಂಟ್ ವಿವರಗಳು:**
+[ಸರ್ವರ್ API ಡಾಕ್ಯುಮೆಂಟೇಶನ್](../api/README.md) ನೋಡಿ:
+- ಲೆನದ ಪತ್ರ ಡೇಟಾ ಗೆ ಅಗತ್ಯವಿರುವ JSON ಫಾರ್ಮಾಟ್
+- HTTP ವಿಧಾನ ಮತ್ತು ಎಂಡ್‌ಪಾಯಿಂಟ್ URL
+- ನಿರೀಕ್ಷಿತ ಪ್ರತಿಕ್ರಿಯೆ ಫಾರ್ಮಾಟ್
+- ದೋಷ ಪ್ರತಿಕ್ರಿಯೆ ನಿರ್ವಹಣೆ
+
+**ನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶ:**
+ಈ ಅಸೈನ್‌ಮೆಂಟ್ ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಪರಿಪೂರ್ಣವಾಗಿ ಕೆಲಸ ಮಾಡುವ "ಲೆನದ ಪತ್ರ ಸೇರಿಸಿ" ವೈಶಿಷ್ಟ್ಯವನ್ನು ಹೊಂದಿರುತ್ತದೆ, ವೃತ್ತಿಪರವಾಗಿ ಕಾಣುವುದು ಮತ್ತು ನಡೆದುಕೊಳ್ಳುವುದು:
+
+![ಉದಾಹರಣೆ "ಲೆನದ ಪತ್ರ ಸೇರಿಸಿ" ಡೈಲಾಗ್ ಚಿತ್ರಣ](../../../../translated_images/dialog.93bba104afeb79f1.kn.png)
+
+## ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಪರೀಕ್ಷಿಸುವುದು
+
+**ಕಾರ್ಯಾಚರಣಾ ಪರೀಕ್ಷೆ:**
+1. "ಲೆನದ ಪತ್ರ ಸೇರಿಸಿ" ಬಟನ್ ಸ್ಪಷ್ಟವಾಗಿ ದೃಶ್ಯಮಾನದಾಗಿದ್ದು ಲಭ್ಯವಿದೆ ಎಂದು **ತಪಾಸಣೆ ಮಾಡಿ**
+2. ಡೈಲಾಗ್ ಸರಿಯಾಗಿ ತೆರೆಯುತ್ತದೆ ಮತ್ತು ಮುಚ್ಚುತ್ತದೆ ಎಂಬುದನ್ನು **ಪರಿಶೀಲಿಸಿ**
+3. ಎಲ್ಲಾ ಅಗತ್ಯ ಕ್ಷೇತ್ರಗಳಿಗೆ ಫಾರ್ಮ್ ಮೌಲ್ಯಪೂರಣ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು **ನಿಖರತೆ ಮಾಡಿ**
+4. ಯಶಸ್ವಿ ಲೆನದ ಪತ್ರಗಳು ತಕ್ಷಣವೇ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನಲ್ಲಿ ಕಾಣುತ್ತವೆ ಎಂಬುದನ್ನು **ಪರಿಶೀಲಿಸಿ**
+5. ತಪ್ಪು ಡೇಟಾ ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಸಮಸ್ಯೆಗಳಿಗಾಗಿ ದೋಷ ನಿರ್ವಹಣೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು **ನಿರೀಕ್ಷಿಸಿ**
+
+**ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಪರೀಕ್ಷೆ:**
+1. ಕೇವಲ ಕೀಬೋರ್ಡ್ ಬಳಸಿ ಸಂಪೂರ್ಣ ಪ್ರಕ್ರಿಯೆ ಮೂಲಕ **ಸಂಚರಿಸಿ**
+2. ಸರಿಯಾದ ಘೋಷಣೆಗಳಿಗಾಗಿ ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಸಿ **ಪರೀಕ್ಷಿಸಿ**
+3. ಫೋಕಸ್ ನಿರ್ವಹಣೆ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ ಎಂದು **ನಿಖರವಾಗಿ ಪರಿಶೀಲಿಸಿ**
+4. ಎಲ್ಲಾ ಫಾರ್ಮ್ ಘಟಕಗಳಿಗೆ ಸೂಕ್ತ ಲೇಬಲ್ಗಳು ಇರುವುದನ್ನು **ತಪಾಸಿಸಿರಿ**
+
+## ಮೌಲ್ಯಮಾಪನ ರೂಬ್ರಿಕ್
+
+| ಮಾನದಂಡ | ಉದಾಹರಣೆ | ಅತ್ಯುತ್ತಮ | ಸುಧಾರಣೆ ಅಗತ್ಯವಿದೆ |
+| -------- | --------- | -------- | ----------------- |
+| **ಕಾರ್ಯಾಚರಣೆ** | ಲೆನದ ಪತ್ರ ವೈಶಿಷ್ಟ್ಯವು ದೋಷರಹಿತವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅತ್ಯುತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ಪಾಠಗಳಿಂದ ಎಲ್ಲ ಉತ್ತಮ ಕ್ರಮಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ | ಲೆನದ ಪತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಆದರೆ ಕೆಲವು ಅತ್ಯುತ್ತಮ ಕ್ರಮಗಳನ್ನು ಅನುಸರಿಸದೆ ಅಥವಾ ಸಣ್ಣ ಬಳಕೆದಾರ ಅನುಕೂಲ ಸಮಸ್ಯೆಗಳಿವೆ | ಲೆನದ ಪತ್ರ ಭಾಗಶಃ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಅಥವಾ ಪ್ರಮುಖ ಬಳಕೆದಾರ ಅನುಕೂಲ ಸಮಸ್ಯೆಗಳಿವೆ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಕೋಡ್ ಸುಸಂಯೋಜಿತವಾಗಿದೆ, ಸ್ಥಾಪಿತ ಮಾದರಿಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಸರಿಯಾದ ದೋಷ ನಿರ್ವಹಣೆಯುಳ್ಳದೆ ಮತ್ತು ಇತ್ತೀಚಿನ ಸ್ಟೇಟ್ ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಏಕೀಕರಿಸಲಾಗಿದೆ | ಕೋಡ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಆದರೆ ಕೆಲವೊಂದು ಸಂಘಟನೆ ಸಮಸ್ಯೆಗಳು ಅಥವಾ ಅಸ್ಥಿರ ಮಾದರಿಗಳಿವೆ | ಕೋಡ್ ಧಾರ್ಮಿಕ ಸಮಸ್ಯೆ ಮತ್ತು ಇತ್ತೀಚಿನ ಮಾದರಿಗಳೊಂದಿಗೆ ಸರಿಯಾಗಿ ಏಕೀಕರಿಸದೇ ಇದೆ |
+| **அಕ್ಸೆಸಿಬಿಲಿಟಿ** | ಸಂಪೂರ್ಣ ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಶನ್ ಬೆಂಬಲ, ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಹೊಂದಾಣಿಕೆ, ಹಾಗೂ WCAG ಮಾರ್ಗಸೂಚಿತ ಸಹಿತ ಅತ್ಯುತ್ತಮ ಫೋಕಸ್ ನಿರ್ವಹಣೆ | ಮೂಲಭೂತ ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ವೈಶಿಷ್ಟ್ಯಗಳು ಜಾರಿಯಾದವು, ಆದರೆ ಕೆಲವು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಶನ್ ಅಥವಾ ಸ್ಕ್ರೀನ್ ರೀಡರ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಇಲ್ಲ | ಅನೇಕ ಅಥವಾ ಯಾವುದೇ ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಪರಿಗಣನೆಗಳು ಜಾರಿಯಾಗಿಲ್ಲ |
+| **ಬಳಕೆದಾರ ಅನುಭವ** | ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆ, ಸೌಮ್ಯ ಸಂಭಾಷಣೆ ಮತ್ತು ವೃತ್ತಿಪರ ಆಲಂಕಾರಿಕತೆ ಹೊಂದಿದ ಅದೃಷ್ಟಶಾಲಿ, ಮೆಚ್ಚುಗೆಯ ಸೋಪಾನ | ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವ ಆದರೆ ಪ್ರತಿಕ್ರಿಯೆ ಅಥವಾ ದೃಶ್ಯ ವಿನ್ಯಾಸದಲ್ಲಿ ಸಣ್ಣ ಸುಧಾರಣೆಗಳಿಗೆ ಅಗತ್ಯವಿದೆ | ಗೊಂದಲಕಾರಿ ಇಂಟರ್ಫೇಸ್ ಅಥವಾ ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಯ ಕೊರತೆ ಇರುವ ದೌರ್ಬಲ್ಯপূর্ণ ಅನುಭವ |
+
+## ಹೆಚ್ಚುವರಿ ಸವಾಲುಗಳು (ಐಚ್ಛಿಕ)
+
+ನೀವು ಮೂಲ ಅಗತ್ಯಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ಈ ಸುಧಾರಣೆಗಳನ್ನು ಪರಿಗಣಿಸಿ:
+
+**ವಿಕಸಿತ ವೈಶಿಷ್ಟ್ಯಗಳು:**
+- ಲೆನದ ಪತ್ರ ವರ್ಗಗಳನ್ನು (ಅಹಾರ, ಸಾರಿಗೆ, ಮನರಂಜನೆ ಇತ್ಯಾದಿ) **ಸೇರಿಸಿ**
+- ನೈಜ-ಸಮಯ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ಇನ್ಪುಟ್ ಮೌಲ್ಯಪೂರಣವನ್ನು **ಅನುಷ್ಠಾನಗೊಳಿಸಿ**
+- ಶಕ್ತಿಶಾಲಿ ಬಳಕೆದಾರರಿಗೆ ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್‌ಕಟ್ ಗಳನ್ನು **ತಯಾರಿಸಿ**
+- ಲೆನದ ಪತ್ರ ಸಂಪಾದನೆ ಮತ್ತು ಅಳಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು **ಸೇರಿಸಿ**
+
+**ಮುನ್ನಡೆ ಏಕೀಕರಣ:**
+- ಇತ್ತೀಚೆಗೆ ಸೇರಿಸಿದ ಲೆನದ ಪತ್ರಗಳಿಗೆ undo ಕಾರ್ಯಾಂಕವನ್ನು **ಅನುಷ್ಠಾನಗೊಳಿಸಿ**
+- CSV ಫೈಲ್‌ಗಳಿಂದ ಒಂದುಗೂಡಿಸಿದ ಲೆನದ ಪತ್ರಗಳನ್ನು **ಆಮದು ಮಾಡಿ**
+- ಲೆನದ ಪತ್ರ ಹುಡುಕಾಟ ಮತ್ತು ಫಿಲ್ಟರಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು **ಸೃಷ್ಟಿಸಿ**
+- ಡೇಟಾ ರಫ್ತು ಕಾರ್ಯವನ್ನು **ಅನುಷ್ಠಾನಗೊಳಿಸಿ**
+
+ಈ ಐಚ್ಛಿಕ ವೈಶಿಷ್ಟ್ಯಗಳು ನಿಮಗೆ ಹೆಚ್ಚು ಉನ್ನತ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ತಂತ್ರಾಂಶಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ ಮತ್ತು ಸಂಪೂರ್ಣವಾದ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ!
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಉಲ್ಲೇಖ ನಿರಾಕರಣೆ**:
+ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯನ್ನು ಸಾಧಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ ಸಹ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸ್ಪಷ್ಟತೆಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿನ ನೇರ ದಾಖಲೆಯನ್ನು ಅಧಿಕೃತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಲಾಗಬೇಕು. ಗಂಭೀರ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲಾರದ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಉತ್ತರದಾಯಕರಾಗಿರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/README.md

@@ -0,0 +1,37 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2026-01-08T11:31:04+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "kn"
+}
+-->
+# :dollar: ಬ್ಯಾಂಕ್ ನಿರ್ಮಿಸಿ
+
+ಈ ಯೋಜನೆಯಲ್ಲಿ, ನೀವು ಒಂದು ಕಲ್ಪಿತ ಬ್ಯಾಂಕನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಬೇಕು ಎಂಬುದನ್ನು ಕಲಿಯೋಿರಿ. ಇವುಗಳಲ್ಲಿ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ವಿನ್ಯಾಸಗೊಳಿಸುವುದು ಮತ್ತು ಮಾರ್ಗಗಳನ್ನು ಒದಗಿಸುವುದು, ಫಾರ್ಮ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು, ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವುದು, ಮತ್ತು ಬ್ಯಾಂಕಿನ ಡೇಟಾವನ್ನು ಪಡೆಯಲು API ಯಿಂದ ಡೇಟಾವನ್ನು ಎങ്ങനെ ಪಡೆಯಬೇಕು ಎಂಬುದು ಸೇರಿವೆ.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.kn.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.kn.png) |
+|--------------------------------|--------------------------------|
+
+## ಪಾಠಗಳು
+
+1. [ವೆಬ್ ಅಪ್ಲಿಕೇಶನಿನಲ್ಲಿ HTML ಟೆಂಪ್ಲೇಟ್ಸ್ ಮತ್ತು ಮಾರ್ಗಗಳು](1-template-route/README.md)
+2. [ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ಫಾರ್ಮ್ ನಿರ್ಮಿಸಿ](2-forms/README.md)
+3. [ಡೇಟಾವನ್ನು ಪಡೆಯುವ ಮತ್ತು ಬಳಸುವ ವಿಧಾನಗಳು](3-data/README.md)
+4. [ಸ್ಥಿತಿ ನಿರ್ವಹಣೆಯ ಸಂಪ್ರದಾಯಗಳು](4-state-management/README.md)
+
+### ಕ್ರೆಡಿಟ್ಸ್
+
+ಈ ಪಾಠಗಳನ್ನು :hearts: ಯೋಹಾನ್ ಲಾಸೋರ್ಸಾ [Yohan Lasorsa](https://twitter.com/sinedied) ಅವರು ಬರೆಯಲಾಗಿದೆ.
+
+ನೀವು ಈ ಪಾಠಗಳಲ್ಲಿ ಬಳಸಿರುವ [ಸರ್ವರ್ API](/7-bank-project/api/README.md) ಯನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಬೇಕೆಂದು ಕಲಿಯಲು ಆಸಕ್ತರಿದ್ದರೆ, ನೀವು [ಈ ವೀಡಿಯೋ ಶ್ರೇಣಿಯನ್ನು](https://aka.ms/NodeBeginner) (ಪ್ರಮುಖವಾಗಿ 17 ರಿಂದ 21 ವೀಡಿಯೋಗಳವರೆಗೆ) ಅನುಸರಿಸಬಹುದು.
+
+ನೀವು [ಈ ಇಂಟರಾಕ್ಟಿವ್ ಲರ್ನ್ ಟ್ಯುಟೋರಿಯಲ್](https://aka.ms/learn/express-api) ಅನ್ನು ಕೂಡ ನೋಡಿ ತಿಳಿಯಬಹುದು.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಒಪ್ಪಂದ ಮುಕ್ತಾಯ**:
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿಕೊಂಡು ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೆ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನದಲ್ಲಿ ಇಡಿ. ಮೂಲ ಭಾಷೆಯಡಿಯಲ್ಲಿ ಇರುವ ಮೂಲ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಅಧಿಕೃತ ಮೂಲವಾಗಿದೆ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಅತ್ಯಂತ ಸಂಖ್ಯಾತಮ ಮಾಹಿತಿಗಳಿಗೆ ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಆಗಿರುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳುವಿಕೆ ಅಥವಾ ತಪ್ಪಾದ ಅರ್ಥಗೊಳ್ಳುವಿಕೆಗೆ ನಾವು ಜವಾಬ್ದಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/api/README.md

@@ -0,0 +1,50 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2026-01-08T16:40:10+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬ್ಯಾಂಕ್ API
+
+> [Node.js](https://nodejs.org) + [Express](https://expressjs.com/) ಬಳಸಿ ನಿರ್ಮಿಸಿರುವ ಬ್ಯಾಂಕ್ API.
+
+API ಈಗಾಗಲೆ ನಿಮಗಾಗಿ ನಿರ್ಮಿಸಲಾಗಿದೆ ಮತ್ತು ವ್ಯಾಯಾಮದ ಭಾಗವಲ್ಲ.
+
+ಯಾದರೂ, ನೀವು ಹೀಗೆ ಒಂದು API ಹೇಗೆ ನಿರ್ಮಿಸುವುದೇನು ಎಂಬುದನ್ನು ಕಲಿಯಲು ಆಸಕ್ತಿ ಹೊಂದಿದ್ದರೆ, ಈ ಸರಣಿಯ ವೀಡಿಯೊಗಳನ್ನು ಅನುಸರಿಸಬಹುದು: https://aka.ms/NodeBeginner (ವೀಡಿಯೊಗಳು 17 ರಿಂದ 21 ಅವಧಿವರೆಗೆ ಈ ನಿಖರ API ಅನ್ನು ಕವರ್ ಮಾಡುತ್ತವೆ).
+
+ನೀವು ಈ ಇಂಟರಾಕ್ಟಿವ್ ಟ್ಯುಟೋರಿಯಲ್ಗೆ ಸಹ ಒಂದು ತಿರುಗು ನೋಡಬಹುದು: https://aka.ms/learn/express-api
+
+## ಸರ್ವರ್ ಚಾಲನೆ
+
+ನಿಮ್ಮಲ್ಲಿ [Node.js](https://nodejs.org) ಸ್ಥಾಪಿತವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
+
+1. ಈ ರೆಪೊವನ್ನು Git clone ಮಾಡಿ [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. ನಿಮ್ಮ ಟರ್ಮಿನಲ್ ಅನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು `Web-Dev-For-Beginners/7-bank-project/api` ಫೋಲ್ಡರ್‌ಗೆ ನವಿಗೇಟ್ ಮಾಡಿ
+2. `npm install` ಆಜ್ಞೆಯನ್ನು ಓಡಿಸಿ ಮತ್ತು ಪ್ಯಾಕೇಜುಗಳು ಸ್ಥಾಪಿತವಾಗುವವರೆಗೆ ಕಾಯಿರಿ (ನಿಮ್ಮ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕದ ಗುಣಮಟ್ಟದ ಪ್ರಕಾರ ಸ್ವಲ್ಪ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳಬಹುದು).
+3. ಸ್ಥಾಪನೆ ಮುಗಿದ ಮೇಲೆ, `npm start` ಆಜ್ಞೆಯನ್ನು ಓಡಿಸಿ ಮತ್ತು ನೀವು ಸಿದ್ಧರಾಗಿ.
+
+ಸರ್ವರ್ `5000` ಪೋರ್ಟ್ ನಲ್ಲಿ ಶ್ರವಣ ಆರಂಭಿಸಬೇಕು.
+*ಈ ಸರ್ವರ್ ಮುಖ್ಯ ಬ್ಯಾಂಕ್ ಆ್ಯಪ್ ಸರ್ವರ್ ಟರ್ಮಿನಲ್ಗಾಗಿ (ಪೋರ್ಟ್ `3000` ನಲ್ಲಿ ಶ್ರವಣ) ಜೊತೆಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅದನ್ನು ಮುಚ್ಚಬೇಡಿ.*
+
+> ಗಮನಿಸಿ: ಎಲ್ಲಾ ದಾಖಲಾತಿಗಳು ಮೆಮೋರಿಯಲ್ಲಿದೆ ಮತ್ತು ಸಂರಕ್ಷಿಸಲಾಗುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ಸರ್ವರ್ ನಿಲ್ಲಿಸಿದಾಗ ಎಲ್ಲಾ ಡೇಟಾ ಕಳೆದುಹೋಗುತ್ತದೆ.
+
+## API ವಿವರಗಳು
+
+ರೌಟ್                                        | ವಿವರಣೆ
+---------------------------------------------|------------------------------------
+GET    /api/                                 | ಸರ್ವರ್ ಮಾಹಿತಿ ಪಡೆಯಿರಿ
+POST   /api/accounts/                        | ಖಾತೆಯನ್ನು ಸೃಷ್ಟಿಸಿ, ಉದಾ: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | సూచಿಸಲಾದ ಖಾತೆಗಾಗಿ ಎಲ್ಲಾ ಡೇಟಾ ಪಡೆಯಿರಿ
+DELETE /api/accounts/:user                   | ಸೂಚಿಸಲಾದ ಖಾತೆ ಅನ್ನು ತೆಗೆದುಹಾಕಿ
+POST   /api/accounts/:user/transactions      | ಒಂದು ವ್ಯವಹಾರ ಸೇರಿಸಿ, ಉದಾ: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | ಸೂಚಿಸಲಾದ ವ್ಯವಹಾರವನ್ನು ತೆಗೆದುಹಾಕಿ
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ವಿಷಯ ಸೂಚನೆ**:  
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಅಧಿಕೃತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಲಾಗಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಸಲಹೆ ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ ಅಥವಾ ತಪ್ಪಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುವಿಕೆಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/7-bank-project/solution/README.md

@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2026-01-08T18:07:24+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "kn"
+}
+-->
+# ಬ್ಯಾಂಕ್ ಅಪ್
+
+> ಬ್ಯಾಂಕ್ ಅಪ್ ಯೋಜನೆಯನ್ನು ರೂಪಿಸಲು ಉದಾಹರಣೆಯ ಪರಿಹಾರ, ವನಿಲಾ HTML5, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (ಯಾವುದೇ ಫ್ರೇಮ್ವರ್ಕ್‌ಗಳು ಅಥವಾ ಲೈಬ್ರರಿಗಳು ಬಳಸಿಲ್ಲ) ಬಳಸಿ ನಿರ್ಮಿಸಲಾಗಿದೆ.
+
+## ಅಪ್ ರನ್ ಮಾಡುವುದು
+
+ಮೊದಲು ನೀವು [API ಸರ್ವರ್](../api/README.md) ಚಾಲನೆಯಲ್ಲಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
+
+ಯಾವುದೇ ವೆಬ್ ಸರ್ವರ್ ಅಪ್ ಅನ್ನು ರನ್ ಮಾಡಬಹುದು, ಆದರೆ ನೀವು ಯಾವುದೇ ಕಾರಣಕ್ಕಾಗಿ API ರನ್ ಮಾಡಲು [Node.js](https://nodejs.org) ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿರಬೇಕು, ಆದ್ದರಿಂದ ನೀವು:
+
+1. ಈ ರೆಪೊ ಕ್ಲೋನ್ ಮಾಡಿ.
+2. ತರ್ಮಿನಲ್ ತೆರೆದು, ಈ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಹೋಗಿ, ನಂತರ `npx lite-server .` ಅನ್ನು ರನ್ ಮಾಡಿ. ಇದು ಪೋರ್ಟ್ `3000` ನಲ್ಲಿ ಡೆವಲಪ್ಮೆಂಟ್ ವೆಬ್ ಸರ್ವರ್ ಆರಂಭಿಸುತ್ತದೆ.
+3. ಅಪ್ ರನ್ ಮಾಡಲು ಬ್ರೌಸರ್‌ನಲ್ಲಿ `http://localhost:3000` ತೆರೆಯಿರಿ.
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ವಿಮೃಶಣೆ**:  
+ಈ ದಾಖಲೆyiನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸಮರ್ಪಕತೆಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿನ ಮೂಲ ದಾಖಲೆyniೇ ಪ್ರಮಾಣಿಕ ಮೂಲವಾಗಿರಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೆಗಳು ಅಥವಾ ದೋಷಗಳಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗಿರುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/8-code-editor/1-using-a-code-editor/README.md

@@ -0,0 +1,639 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
+  "translation_date": "2026-01-08T13:18:30+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "kn"
+}
+-->
+# ಕೋಡ್ ಸಂಪಾದಕವನ್ನು ಬಳಸುವುದು: VSCode.dev ನಲ್ಲಿ ಪರಿಣತಿ
+
+*ದಿ ಮ್ಯಾಟ್ರಿಕ್ಸ್* ನಲ್ಲಿ ನೀಯೋ ದೊಡ್ಡ ಕಂಪ್ಯೂಟರ್ ಟರ್ಮಿನಲ್‌ಗೆ ಸಂಪರ್ಕ ಹೊಂದಿ ಡಿಜಿಟಲ್ ಜಗತ್ತಿಗೆ ಪ್ರವೇಶ ಪಡೆದಿದ್ದಾಗ ನೆನಪಾಗಿದೆಯೆ? ಇಂದಿನ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಸಾಧನಗಳು ಅದಕ್ಕೆ ಬದಲಿ ಕಥೆಯಾಗಿದೆ – ಎಲ್ಲೆಡೆಂದೂ ಲಭ್ಯವಿರುವ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ಸಾಮರ್ಥ್ಯಗಳು. VSCode.dev ಒಂದು ಬ್ರೌಸರ್ ಆಧಾರಿತ ಕೋಡ್ ಸಂಪಾದಕವಾಗಿದ್ದು, ಯಾವುದೇ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕ ಇರುವ ಸಾಧನಕ್ಕೆ ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣಗಳನ್ನು ತರುತ್ತದೆ.
+
+ಮುದ್ರಣ ಯಂತ್ರವು ಪುಸ್ತಕಗಳನ್ನು ಎಲ್ಲರಿಗೂ ಲಭ್ಯವಾಗಿಸುವುದರಿಂದ, ಮಾತ್ರವಲ್ಲದೆ ಟಿಪ್ಪಣಿಗಳನ್ನು ಮಾತ್ರ ಸಂಗ್ರಹಿಸುವವರಿಗೇ ಇರಲಿಲ್ಲ ಹಾಗೆ, VSCode.dev ಕೂಡ ಕೋಡಿಂಗ್ ಅನ್ನು ಜನಸಾಮಾನ್ಯರಿಗೂ ಲಭ್ಯಗೊಳಿಸುತ್ತದೆ. ನೀವು ಗ್ರಂಥಾಲಯದ ಕಂಪ್ಯೂಟರ್, ಶಾಲಾ ಪ್ರಯೋಗಾಲಯ ಅಥವಾ ಯಾವುದೇ ಬ್ರೌಸರ್ ಹೊಂದಿರುವ ಸ್ಥಳದಿಂದ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳ ಮೇಲೆ ಕೆಲಸ ಮಾಡಬಹುದು. ಯಾವುದೇ ಇನ್ಸ್ಟಾಲೇಶನ್ ಅಗತ್ಯವಿಲ್ಲ, ಅಥವಾ "ನನಗೆ ನನ್ನ ನಿರ್ದಿಷ್ಟ ಸೆಟ್ಟಪ್ ಬೇಕು" ಸೀಮಾ ಇಲ್ಲ.
+
+ಈ ಪಾಠದ ಕೊನೆಯಲ್ಲಿ, ನೀವು VSCode.dev ನವಿಗೇಟ್ ಮಾಡುವುದನ್ನು, ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನೇರವಾಗಿ GitHub ರೆಪೊಜಿಟರಿಗಳನ್ನು ತೆರುವುದನ್ನು ಮತ್ತು Git ಅನ್ನು ಆವೃತ್ತಿ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಬಳಸಬೇಕೆಂದು ತಿಳಿದುಕೊಳ್ಳುತ್ತೀರಿ – ವೃತ್ತಿಪರ ಡೆವಲಪರ್‌ಗಳು ಪ್ರತಿದಿನ ಅವಲಂಬಿಸುವ ಎಲ್ಲ ಕೌಶಲ್ಯಗಳು.
+
+## ⚡ ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು
+
+**ವೇಗದ ಪ್ರಾರಂಭ ಮಾರ್ಗಭ್ರಮಣದ ಹಾದಿ ಬ್ಯುಸಿ ಡೆವಲಪರ್‌ಗಳಿಗೆ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 ನಿಮಿಷಗಳು] --> B[ vscode.dev ಗೆ ಭೇಟಿ ನೀಡಿ]
+    B --> C[GitHub ಖಾತೆಯನ್ನು ಸಂಪರ್ಕಿಸಿ]
+    C --> D[ಯಾವುದೇ ರೆಪೊಸಿಟೋರಿಯನ್ನು ತೆರೆಯಿರಿ]
+    D --> E[ತಕ್ಷಣ ಸಂಪಾದನೆಯನ್ನು ಪ್ರಾರಂಭಿಸಿ]
+```
+- **ಮೊದಲನೇ ನಿಮಿಷ**: [vscode.dev](https://vscode.dev) ಗೆ ಚೆಲ್ಲಿರಿ - ಯಾವುದೇ ಇನ್ಸ್ಟಾಲೇಶನ್ ಅಗತ್ಯವಿಲ್ಲ
+- **ಎರಡನೇ ನಿಮಿಷ**: ನಿಮ್ಮ ರೆಪೊಜಿಟರಿಗಳನ್ನು ಸಂಪರ್ಕಿಸಲು GitHub ನಲ್ಲಿ ಸೈನ್ ಇನ್ ಆಗಿ
+- **ಮೂರನೇ ನಿಮಿಷ**: URL ಟ್ರಿಕ್ ಪ್ರಯತ್ನಿಸಿ: ಯಾವುದೇ ರೆಪೊ URL ನಲ್ಲಿ `github.com` ಅನ್ನು `vscode.dev/github` ಗೆ ಬದಲಾಯಿಸಿ
+- **ನಾಲಕನೇ ನಿಮಿಷ**: ಹೊಸ ಫೈಲ್ ಸೃಷ್ಟಿಸಿ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟಿಂಗ್ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ನೋಡಿ
+- **ಐದನೇ ನಿಮಿಷ**: ಬದಲಾವಣೆ ಮಾಡಿರಿ ಮತ್ತು ಸෝರ್ಸ್ ಕಂಟ್ರೋಲ್ ಪ್ಯಾನಲ್ ಮೂಲಕ ಕಮಿಟ್ ಮಾಡಿ
+
+**ವೇಗದ ಪರೀಕ್ಷಾ URL**:  
+```
+# Transform this:
+github.com/microsoft/Web-Dev-For-Beginners
+
+# Into this:
+vscode.dev/github/microsoft/Web-Dev-For-Beginners
+```
+  
+**ಇದಕ್ಕೆ ಕಾರಣ**: 5 ನಿಮಿಷಗಳಲ್ಲಿ, ನೀವು ವೃತ್ತಿಪರ ಉಪಕರಣಗಳೊಂದಿಗೆ ಎಲ್ಲೆಡೆ ಕೋಡಿಂಗ್ ಮಾಡುವ ಸ್ವತಂತ್ರತೆಯನ್ನು ಅನುಭವಿಸುವಿರಿ. ಇದು ಅಭಿವೃದ್ಧಿಯ ಭವಿಷ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ – ಲಭ್ಯವಿರುವ, ಶಕ್ತಿವಾನು ಮತ್ತು ತ್ವರಿತ.
+
+## 🗺️ ಮೋಘ ಆಧಾರಿತ ಅಭಿವೃದ್ಧಿ ಮೂಲಕ ನಿಮ್ಮ ಕಲಿಕೆಯ ಪ್ರಯಾಣ
+
+```mermaid
+journey
+    title ಸ್ಥಳೀಯ ಸೆಟ್ಅಪ್ನಿಂದ ಕ್ಲೌಡ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಮಾಸ್ಟರಿ ತನಕ
+    section ವೇದಿಕೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+      ವೆಬ್ ಆಧಾರಿತ ಎಡಿಟಿಂಗ್ ಕಂಡುಹಿಡಿಯಿರಿ: 4: You
+      ಗಿಥಬ್ ಪರಿಸರಕ್ಕೆ ಸಂಪರ್ಕಿಸು: 6: You
+      ಇಂಟರ್‌ಫೇಸ್ ನಾವಿಗೇಶನ್‌ನಲ್ಲಿ ಪರಿಣತಿ ಹೊಂದಿ: 7: You
+    section ಕಡತ ನಿರ್ವಹಣಾ ಕೌಶಲ್ಯಗಳು
+      ಕಡತಗಳನ್ನು ರಚಿಸಿ ಮತ್ತು ಆಯೋಜಿಸಿ: 5: You
+      ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟಿಂಗ್‌ನೊಂದಿಗೆ ಸಂಪಾದಿಸಿ: 7: You
+      ಪ್ರಾಜೆಕ್ಟ್ ರಚನೆಗಳನ್ನು ನಾವಿಗೇಟ್ ಮಾಡಿ: 8: You
+    section ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ ಮಾಸ್ಟರಿ
+      ಗಿಟ್ ಇಂಟಿಗ್ರೇಶನ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 6: You
+      ಕಮಿಟ್ ವರ್ಕ್ಫ್ಲೋಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿರಿ: 8: You
+      ಸಹಕಾರ ಮಾದರಿಗಳಲ್ಲಿ ಪರಿಣತಿ ಹೊಂದಿರಿ: 9: You
+    section ವೃತ್ತಿಪರ ಕಸ್ಟಮೈಸೇಶನ್
+      ಶಕ್ತಿಶಾಲಿ ವಿಸ್ತರಣೆಗಳನ್ನು ಸ್ಥಾಪಿಸಿ: 7: You
+      ಡೆವಲಪ್ಮೆಂಟ್ ಪರಿಸರವನ್ನು ಸಂರಚಿಸಿ: 8: You
+      ವೈಯಕ್ತಿಕ ವರ್ಕ್‌ಫ್ಲೋಗಳನ್ನು ನಿರ್ಮಿಸಿ: 9: You
+```  
+**ನಿಮ್ಮ ಪ್ರಯಾಣ ಗುರಿ**: ಈ ಪಾಠದ ಕೊನೆಯಲ್ಲಿ, ನೀವು ಪ್ರೊಫೆಷನಲ್ ಕ್ಲೌಡ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಪರಿಸರವನ್ನು ಸಂಪೂರ್ಣ ಅರ್ಥಮಾಡಿಕೊಂಡಿರುತ್ತೀರಿ, ಇದು ಯಾವುದೇ ಸಾಧನದಿಂದ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಪ್ರಮುಖ ತಂತ್ರಜ್ಞಾನ ಕಂಪನಿಗಳಲ್ಲಿರುವ ಡೆವಲಪರ್‌ಗಳು ಬಳಸುವ ಸಾಧನಗಳನ್ನು ಬಳಸಿ ಕೋಡ್ ಬರೆಯಲು ನಿಮಗೆ ನೆರವಾಗುತ್ತದೆ.
+
+## ನೀವು ಏನು ಕಲಿಯುತ್ತೀರಿ
+
+ನಾವು ಇದನ್ನು ಜೊತೆಯಾಗಿ ನಡೆದುಹೋಗುವ ನಂತರ, ನೀವು ಈಕೆಲಸ ಮಾಡಬಹುದು:
+
+- VSCode.dev ನವಿಗೇಟ್ ಮಾಡಿ, ಅದು ನಿಮ್ಮ ಎರಡನೇ ಮನೆ ಎಂದು ಭಾವಿಸಿ — ಎಲ್ಲವನ್ನೂ ಹುಡುಕಿಕೊಂಡು ತೀರುವ್ಲ್ಲದೆ  
+- ಯಾವುದೇ GitHub ರೆಪೊಜಿಟರಿಯನ್ನು ನಿಮ್ಮ ব্রೌಸರ್‌ನಲ್ಲಿ ತೆರೆಯಿರಿ ಮತ್ತು ಕೂಡಲೇ ಸಂಪಾದನೆ ಮಾಡಿ (ಇದು ವಿಸ್ಮಯಕರವಾಗಿದೆ!)  
+- Git ಅನ್ನು ಬದಲಾವಣೆಗಳನ್ನು ಟ್ರಾಕ್ ಮಾಡಲು ಬಳಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ಪ್ರಗತಿಯನ್ನು ವೃತ್ತಿಪರರಂತೆ ಉಳಿಸಿ  
+- ಕೋಡಿಂಗ್ ವೇಗವಾಗಿ ಮತ್ತು ಆಸ್ವಾದನೀಯವಾಗಿ ಮಾಡಲು ಎಕ್ಸ್ಟೆನ್ಶನ್‌ಗಳನ್ನು ಉಪಯೋಗಿಸಿ ನಿಮ್ಮ ಸಂಪಾದಕವನ್ನು ಸಶಕ್ತಗೊಳಿಸಿಕೊಳ್ಳಿ  
+- ಪ್ರಾಜೆಕ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಧೈರ್ಯದಿಂದ ರಚಿಸಿ ಮತ್ತು ಏರ್ಪಡಿಸಿಕೊಳ್ಳಿ
+
+## ನೀವು ಏನು ಬೇಕಾಗುತ್ತದೆ
+
+ಅಗತ್ಯಗಳೆ ಇವು:
+
+- ಉಚಿತ [GitHub ಖಾತೆ](https://github.com) (ಆವಶ್ಯಕವಾದರೆ ನಾವು ಸೃಷ್ಟಿಯ ಕುರಿತು ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತೇವೆ)  
+- ವೆಬ್ ಬ್ರೌಸರ್ನಲ್ಲಿ ಮೂಲಭೂತ ಪರಿಚಯ  
+- GitHub ಮೂಲಗಳನ್ನು ಪರಿಚಯಿಸುವ ಪಾಠ ಸಹಾಯವಾಗಬಹುದು, ಆದರೆ ಅವಶ್ಯಕವಿಲ್ಲ
+
+> 💡 **GitHub ನವೀನರೇ?** ಖಾತೆ ಸೃಷ್ಟಿಸುವುದು ಉಚಿತ ಮತ್ತು ಕೆಲವೇ ನಿಮಿಷಗಳಲ್ಲಿ ಆಗುತ್ತದೆ. ಗ್ರಂಥಾಲಯ ಕಾರ್ಡ್ ವಿಶ್ವದಾದ್ಯಂತ ಪುಸ್ತಕಗಳಿಗೆ ಪ್ರವೇಶ ನೀಡುವುದಿನಂತೆ, GitHub ಖಾತೆಯು ಇಂಟರ್ನೆಟ್ ಸಮಗ್ರ ರಾತ್ರಿ ಕೋಡ್ ರೆಪೊಗಳಿಗೆ ದಾರಿತೋರುತ್ತದೆ.
+
+## 🧠 ಮೋಘ ಅಭಿವೃದ್ಧಿ ಪರಿಸರ ಸಮೀಕ್ಷೆ
+
+```mermaid
+mindmap
+  root((VSCode.dev ಮಾಸ್ಟರಿ))
+    Platform Benefits
+      Accessibility
+        ಸಾಧನ ಸ್ವಾತಂತ್ರ್ಯ
+        ಸ್ಥಾಪನೆ ಅಗತ್ಯವಿಲ್ಲ
+        ತಕ್ಷಣದ ನವೀಕರಣಗಳು
+        ವಿಶ್ವವ್ಯಾಪಿ ಪ್ರವೇಶ
+      Integration
+        GitHub ಸಂಪರ್ಕ
+        ರೆಪೊಸಿಟರಿ ಸಿಂಕ್
+        ಸೆಟ್ಟಿಂಗ್ಸ್ ಸ್ಥಿರತೆ
+        ಸಹಕಾರಕ್ಕೆ ಸಿದ್ಧ
+    Development Workflow
+      File Management
+        ಯೋಜನೆ ರಚನೆ
+        ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟಿಂಗ್
+        ಬಹು-ಟ್ಯಾಬ್ ಸಂಪಾದನೆ
+        ಸ್ವಯಂಚಾಲಿತ-ಸೇವಾ ವೈಶಿಷ್ಟ್ಯಮಗಳು
+      Version Control
+        Git ಸಂಯೋಜನೆ
+        ಕಮಿಟ್ ವರ್ಕ್‌ಫ್ಲೋಗಳು
+        ಶಾಖೆ ನಿರ್ವಹಣೆ
+        ಬದಲಾವಣೆ ಪರಿಶೀಲನೆ
+    Customization Power
+      Extensions Ecosystem
+        ಉತ್ಪಾದಕತೆ ಉಪಕರಣಗಳು
+        ಭಾಷಾ ಬೆಂಬಲ
+        ಥೀಮ್ ಆಯ್ಕೆಗಳು
+        ಕಸ್ಟಮ್ ಶಾರ್ಟ್‌ಕಟ್‌ಗಳು
+      Environment Setup
+        ವೈಯಕ್ತಿಕ ಪ್ರೀತಿಗಳು
+        ವರ್ಕ್‌ಸ್ಪೇಸ್ ಸಂರಚನೆ
+        ಉಪಕರಣ ಸಂಯೋಜನೆ
+        ವರ್ಕ್‌ಫ್ಲೋ ಸುಧಾರಣೆ
+    Professional Skills
+      Industry Standards
+        ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ
+        ಕೋಡ್ ಗುಣಮಟ್ಟ
+        ಸಹಕಾರ
+        ಡಾಕ್ಯುಮೆಂಟೇಷನ್
+      Career Readiness
+        ದೂರಸ್ಥ ಕಾರ್ಯ
+        ಕ್ಲೌಡ್ ಅಭಿವೃದ್ಧಿ
+        ತಂಡ ಯೋಜನೆಗಳು
+        ಮುಕ್ತ ಮೂಲ
+```  
+**ಮುಖ್ಯ ತತ್ವ**: ಮೋಘ ಆಧಾರಿತ ಅಭಿವೃದ್ಧಿ ಪರಿಸರಗಳು ಕೋಡಿಂಗ್ ಭವಿಷ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ - ವೃತ್ತಿಪರ ಮಟ್ಟದ ಉಪಕರಣಗಳನ್ನು ಲಭ್ಯವಿರಿಸುತ್ತವೆ, ಸಹಕರಿಸಲ್ಪಡುತ್ತವೆ ಮತ್ತು ವೇದಿಕೆ-ಸ್ವಾತಂತ್ರ್ಯವನ್ನು ಘೋಷಿಸುತ್ತವೆ.
+
+## ವೆಬ್ ಆಧಾರಿತ ಕೋಡ್ ಸಂಪಾದಕರು ಏಕೆ ಮಹತ್ವವುಳ್ಳವೆಯೆ
+
+ಇಂಟರ್ನೆಟ್ ಮೊದಲು, ವಿವಿಧ ವಿಶ್ವವಿದ್ಯಾಲಯಗಳ ವಿಜ್ಞಾನಿಗಳು ಸಂಶೋಧನೆಯನ್ನು ಸುಲಭವಾಗಿ ಹಂಚుకోಲಾಗುತ್ತಿರಲಿಲ್ಲ. 1960 ರ ದಶಕದಲ್ಲಿ ARPANET ಬಂದು ದೂರದ ಕಂಪ್ಯೂಟರ್‌ಗಳನ್ನು ಸಂಪರ್ಕಿಸಿತು. ವೆಬ್ ಆಧಾರಿತ ಕೋಡ್ ಸಂಪಾದಕರು ಇದೇ ತತ್ವವನ್ನು ಅನುಸರಿಸುತ್ತವೆ – ಶಕ್ತಿಶಾಲಿ ಉಪಕರಣಗಳನ್ನು ನೀವು ಇರುವ ಸ್ಥಲೆ ಅಥವಾ ಸಾಧನ ಯಾವದಾದರೂ, ಲಭ್ಯವಾಗಿಸುವುದು.
+
+ಕೋಡ್ ಸಂಪಾದಕವು ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಕೆಲಸದ ಕೇಂದ್ರಸ್ಥಳ, ಅಲ್ಲಿ ನೀವು ಕೋಡ್ ಬರೆಯುತ್ತೀರಿ, ಸಂಪಾದಿಸುತ್ತೀರಿ, ವ್ಯವಸ್ಥೆ ಮಾಡುತ್ತೀರಿ. ಸರಳ ಪಠ್ಯ ಸಂಪಾದಕರಿಗಿಂತ ವಿಭಿನ್ನವಾಗಿ, ವೃತ್ತಿಪರ ಕೋಡ್ ಸಂಪಾದಕರು ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟಿಂಗ್, ದೋಷ ಪತ್ತೆ ಮತ್ತು ಪ್ರಾಜೆಕ್ಟ್ ನಿರ್ವಹಣೆ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.
+
+VSCode.dev ಈ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ಗೆ ತರುತ್ತದೆ:
+
+**ವೆಬ್ ಆಧಾರಿತ ಸಂಪಾದನೆಯ ಲಾಭಗಳು:**
+
+| ವೈಶಿಷ್ಟ್ಯ | ವಿವರಣೆ | ಬಳಕೆಯ ಪ್ರಭಾವ |
+|---------|-------------|----------|
+| **ವೇದಿಕೆ ಸ್ವಾತಂತ್ರ್ಯ** | ಯಾವುದೇ ಬ್ರೌಸರ್ ಇರುವ ಸಾಧನದಲ್ಲಿ ಚಾಲನೆ | ವಿವಿಧ ಕಂಪ್ಯೂಟರ್‌ಗಳಿಂದ ನಿರಂತರ ಕೆಲಸ |
+| **ಯಾವುದೇ ಇನ್ಸ್ಟಾಲೇಶನ್ ಅಗತ್ಯವಿಲ್ಲ** | ವೆಬ್ URL ಮೂಲಕ ಪ್ರವೇಶ | ಸಾಫ್ಟ್‌ವೇರ್ ಇನ್ಸ್ಟಾಲೇಶನ್ ನಿಯಂತ್ರಣಗಳಿಂದ ತಪ್ಪಿಸಿಕೊಳ್ಳಬಹುದು |
+| **ಸ್ವಯಂಚಾಲಿತ ನವೀಕರಣಗಳು** | ಸದಾ ನವೀಕೃತ ಆವೃತ್ತಿ ಚಾಲನೆ | ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಕೈಯಿಂದ ನವೀಕರಿಸಬೇಕಾಗಿಲ್ಲ ಎಂದು |
+| **ರೆಪೊಜಿಟರಿ ಅಂತರಸಂವಹನ** | GitHub ಗೆ ನೇರ ಸಂಪರ್ಕ | ಸ್ಥಳೀಯ ಫೈಲ್ ನಿರ್ವಹಣೆ ಇಲ್ಲದೆ ಕೋಡನ್ನು ಸಂಪಾದನೆ ಮಾಡಬಹುದು |
+
+**ಆದಾಯ ಮತ್ತು ಪರಿಣಾಮಗಳು:**  
+- ವಿಭಿನ್ನ ಪರಿಸರಗಳಲ್ಲಿ ಕಾರ್ಯ ನಿರಂತರತೆ  
+- ಯಾವುದೇ ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್‌ಗಳ ಬಳಕೆಗೆ ಸಮಾನ ಇಂಟರ್‌ಫೇಸ್  
+- ತಕ್ಷಣ ಸಹಯೋಗಕ್ಕೆ ಸಾಧ್ಯತೆ  
+- ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯ ಅಗತ್ಯ ಕಡಿಮೆ
+
+## VSCode.dev ಅನ್ವೇಷಣೆ
+
+ಮೇರಿ 큜ುರಿಯ ಪ್ರಯೋಗಾಲಯವು ಸರಳ ಜಾಗದಲ್ಲಿದೆಯಾಗಿ ಸುಧಾರತ್ಮಕ ಉಪಕರಣಗಳನ್ನು ಒಳಗೊಂಡಿದ್ದ ಹಾಗೆ, VSCode.dev ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣಗಳನ್ನು ಬ್ರೌಸರ್ ತಾಣದಲ್ಲಿ ಒದಗಿಸುತ್ತದೆ. ಈ ವೆಬ್ ಆಪ್ಲಿಕೇಶನ್ ಡೆಸ್ಕ್‌ಟಾಪ್ ಕೋಡ್ ಸಂಪಾದಕರ ಮೌಲ್ಯದ ಮುಖ್ಯ ಭಾಗಿ ಸಮಾನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
+
+ಪ್ರಾರಂಭಿಸಲು, ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ [vscode.dev](https://vscode.dev) ಗೆ ಹೋಗಿ. ಡೌನ್‌ಲೋಡ್ ಅಥವಾ ಸಿಸ್ಟಂ ಇನ್ಸ್ಟಾಲೇಶನಿಲ್ಲದೆ ಇಂಟರ್‌ಫೇಸ್ ಲೋಡ್ ಆಗುತ್ತದೆ – ಮೋಘ ಗಣನೆ ತತ್ವಗಳ ನೇರ ಅನ್ವಯ.
+
+### ನಿಮ್ಮ GitHub ಖಾತೆ ಸಂಪರ್ಕಿಸುವುದು
+
+ಅಲೆಕ್ಸಾಂಡರ್ ಗ್ರಾಹಂ ಬೆಲ್‌ ಅವರ ದೂರವಾಣಿ ದೂರದ ಸ್ಥಳಗಳನ್ನು ಸಂಪರ್ಕಿಸಿದೆ ಹಾಗೆ, ನಿಮ್ಮ GitHub ಖಾತೆಯನ್ನು ಸಂಪರ್ಕಿಸುವ ಮೂಲಕ VSCode.dev ನೊಂದಿಗೆ ನಿಮ್ಮ ಕೋಡ್ ರೆಪೊಗಳನ್ನು ಸೇರ್ಪಡೆ ಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ. GitHub ನಲ್ಲಿ ಸೈನ್ ಇನ್ ಮಾಡಲು ಕೇಳುತ್ತಿದ್ದರೆ, ಒಪ್ಪಿಸುವುದು ಸೂಕ್ತ.
+
+**GitHub ಸಂಯೋಜನೆ ನೀಡುವವು:**  
+- ಸಂಪಾದಕರೊಳಗಿನ ನೇರ ರೆಪೊ ಪ್ರವೇಶ  
+- ಸಾಧನಗಳ ಮಧ್ಯೆ ಸಂಯೋಜಿತ ಸೆಟ್ಟಿಂಗ್ಸ್ ಮತ್ತು ಎಕ್ಸ್ಟೆನ್ಶನ್‌ಗಳು  
+- GitHub ಗೆ ಸರಳ ಮತ್ತು ಸಲೀಸು ಉಳಿಸುವ ಕಾರ್ಯಪ್ರದಾನ  
+- ವೈಯಕ್ತಿಕ ಅಭಿವಿಕಾಸ ಪರಿಸರ
+
+### ನಿಮ್ಮ ಹೊಸ ಕೆಲಸದ ಜಾಗವನ್ನು ಪರಿಚಯಿಸಿ
+
+ಎಲ್ಲವೂ ಲೋಡ್ ಆದ ಮೇಲೆ, ನೀವು ಅತ್ಯಂತ ಸ್ವಚ್ಛ ಕೆಲಸದ ಜಾಗವನ್ನು ನೋಡುತ್ತೀರಿ, ಅದು ನೀವು ಮಹತ್ವಪೂರ್ಣವಾಗಿ ಕಾಣುವದಕ್ಕೆ — ನಿಮ್ಮ ಕೋಡಿಗೆ — ಗಮನ ಸೆಳೆಯುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ!
+
+![ಪ್ರಾರಂಭಿಕ VSCode.dev ಇಂಟರ್‌ಫೇಸ್](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.kn.png)
+
+**ನಿಮ್ಮ ಹತ್ತಿರದ ಪ್ರದೇಶದ ಪ್ರೇಕ್ಷಣೀಯತೆ:**  
+- **ಕ್ರಿಯಾಶೀಲತೆ ಬಾರ್** (ಎಡಬದಿಯಲ್ಲಿ ಇರುವ ಪದ್ಧತಿ): Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, Settings ⚙️ ಇದನ್ನು ಹೊಂದಿರುವ ನಿಮ್ಮ ಮುಖ್ಯ ನವಿಗೇಶನ್  
+- **ಸೈಡ್‌ಬಾರ್** (ಅದರ ಪಕ್ಕದ ಪ್ಯಾನೆಲ್): ನೀವು ಆರಿಸಿಕೊಂಡ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ಸಂಬಂಧಿತ ಮಾಹಿತಿ ತೋರಿಸಲು ಬದಲಾಗುತ್ತದೆ  
+- **ಸಂಪಾದಕ ಪ್ರದೇಶ** (ಮಧ್ಯಭಾಗದ ದೊಡ್ಡ ಜಾಗ): ಇಲ್ಲಿ ಮಾಯಾಜಾಲ ಸಂಭವಿಸುತ್ತದೆ – ನಿಮ್ಮ ಮುಖ್ಯ ಕೋಡಿಂಗ್ ಪ್ರದೇಶ
+
+**ಕೇಂದ್ರೀಕರಿಸಲು ಒಂದು ಕ್ಷಣ ತೆಗೆದುಕೊಳ್ಳಿ:**  
+- ಆ ಕ್ರಿಯಾಶೀಲತೆ ಬಾರ್ ಐಕಾನ್ಗಳ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಪ್ರತಿಯೊಂದು ಏನು ಮಾಡುತ್ತದೆಯೋ ನೋಡಿ  
+- ಸೈಡ್‌ಬಾರ್ ಹೇಗೆ ವಿಭಿನ್ನ ಮಾಹಿತಿ ತೋರಿಸುತ್ತದೆ ಗಮನಿಸಿ – ಅದ್ಭುತ, ಸರಿ ಎಂದು ಭಾವಿಸುವಿರಿ  
+- Explorer ವೀಕ್ಷಣೆಯಲ್ಲಿ (📁) ನೀವು ಬಹುಶಃ ಹೆಚ್ಚು ಸಮಯ ಕಳೆಯುತ್ತೀರಿ, ಆದ್ದರಿಂದ ಅದರೊಂದಿಗೆ ಆರಾಮವಾಗಿ ಪಾಲಿಗೊಳ್ಳಿ
+
+```mermaid
+flowchart TB
+    subgraph "VSCode.dev ಇಂಟರ್ಫೇಸ್ ವಾಸ್ತುಶಿಲ್ಪ"
+        A[ಕಾರ್ಯ ಚುಕ್ಕಿ] --> B[ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 📁]
+        A --> C[ಹುಡುಕು 🔍]
+        A --> D[ಸ್ತೋತ್ರ ನಿಯಂತ್ರಣ 🌿]
+        A --> E[ಸ್ಥಾಪನೆಗಳು 🧩]
+        A --> F[ಸಂಯೋಜನೆಗಳು ⚙️]
+        
+        B --> G[ಫೈಲ್ ಮರ]
+        C --> H[ಹುಡುಕಿ ಬದಲಾಯಿಸಿ]
+        D --> I[Git ಸ್ಥಿತಿ]
+        E --> J[ಸ್ಥಾಪನೆ ಮಾರುಕಟ್ಟೆ]
+        F --> K[ಕಾನ್ಫಿಗರೇಷನ್]
+        
+        L[ಸೈಡ್‌ಬಾರ್] --> M[ಸಂದರ್ಭ ಫಲಕ]
+        N[ಸಂಪಾದಕ ಪ್ರದೇಶ] --> O[ಕೋಡ್ ಕಡತಗಳು]
+        P[ಟರ್ಮಿನಲ್/ಔಟ್‌ಪುಟ್] --> Q[ಆಜ್ಞಾ ಸಾಲು]
+    end
+```  
+## GitHub ರೆಪೊ ಇದೀಗ ತೆಗೆಯುವುದು
+
+ಇಂಟರ್ನೆಟ್ ಮೊದಲು, ಸಂಶೋಧಕರು ಲೈಬ್ರರಿಗಳಿಗೆ ನಡೆಸಿಕೊಡಬೇಕಾಗಿತ್ತು ದಾಖಲೆಗಳಿಗಾಗಿ. GitHub ರೆಪೊಜಿಟರಿಗಳು ಅಂಥದೆಯೇ – ದೂರಸ್ಥವಾಗಿರುವ ಕೋಡ್ ಸಂಗ್ರಹಗಳು. VSCode.dev ನಿಮ್ಮ ಸ್ಥಳೀಯ ಸಾಧನಕ್ಕೆ ಡೌನ್‌ಲೋಡ್ ಮಾಡದೆ ಹೊಸ ಗೇಟು ತೆರೆಯುತ್ತದೆ.
+
+ಈ ಶಕ್ತಿ ಲಭ್ಯವಿರುವುದರಿಂದ ಯಾವುದಾದರೂ ಸಾರ್ವಜನಿಕ ರೆಪೊ ಕೂಡಲೇ ವೀಕ್ಷಣೆ, ಸಂಪಾದನೆ ಅಥವಾ ಕೊಡುಗೆ ನೀಡಲು ತೆರೆದುಕೊಳ್ಳಬಹುದು. ಇವು ರೆಪೊಗಳನ್ನು ತೆರೆಯುವ ಎರಡು ವಿಧಾನಗಳು:
+
+### ವಿಧಾನ 1: ಪಾಯಿಂಟ್-ಅಂಡ್-ಕ್ಲಿಕ್ ವಿಧಾನ
+
+ನೀವು ಹೊಸದಾಗಿ VSCode.dev ಪ್ರಾರಂಭಿಸಿ ನಿರ್ದಿಷ್ಟ ರೆಪೊ ತೆರೆಯಬೇಕಾದಾಗ ಇದು ಪರಿಪೂರ್ಣ. ಸಾದಾ ಮತ್ತು ಆರಂಭಿಕರಿಗೂ ಅನुकूल:
+
+**ಹೀಗೆ ಮಾಡಿರಿ:**  
+
+1. ನೀವು ಇಲ್ಲಿಗಾಗಿಲ್ಲವಾದರೆ, [vscode.dev](https://vscode.dev) ಗೆ ಹೋಗಿ  
+2. ಸ್ವಾಗತ ಪರದೆಯಲ್ಲಿ “Open Remote Repository” ಬಟನ್ ನೋಡಿ클ಿಕ್ ಮಾಡಿ  
+
+   ![ರೆಮೋಟ್ ರೆಪೊ ತೆಗೆಯಿರಿ](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.kn.png)  
+
+3. ಯಾವುದಾದರೂ GitHub ರೆಪೊ URL ಅನ್ನು ಪೇಸ್ಟ್ ಮಾಡಿ (`https://github.com/microsoft/Web-Dev-For-Beginners` ಪ್ರಯತ್ನಿಸಿ)  
+4. ಎಂಟರ್ ಒತ್ತಿ ಮತ್ತು ಮಾಯಾಜಾಲವನ್ನು ನೋಡಿ!
+
+**ಪ್ರೊ ಟಿಪ್ - ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್ ಶಾರ್ಟ್‌ಕಟ್:**  
+
+ನೀವು ಕೋಡಿಂಗ್ ಮಾಯಾಜಾಲಿವನಾಗಿ ಭಾವಿಸಬೇಕೆ? ಈ ಕಿ ಸಂಯೋಜನೆಯನ್ನು ಪ್ರಯತ್ನಿಸಿ: Ctrl+Shift+P (ಮ್ಯಾಕ್‌ನಲ್ಲಿ Cmd+Shift+P) ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್ ತೆರೆಯಲು:  
+
+![ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್](../../../../translated_images/palette-menu.4946174e07f42622.kn.png)  
+
+**ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್ ಎಲ್ಲವೂ ಮಾಡಲು ಎಂದು ಹುಡುಕುವ ಇಂಜಿನ್ ಗೆ ಸಮಾನ:**  
+- "open remote" typed ಮಾಡಿ ಅದು ರೆಪೊ ತೆಗೆಯುವ ಇನ್ಸ್ಟ್ರುಮೆಂಟ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ  
+- ಇತ್ತೀಚೆಗೆ ತೆರೆಯಲಾದ ರೆಪೊಗಳನ್ನು ಸ್ಮರಿಸುತ್ತದೆ (ಬಹಳ ಉಪಯುಕ್ತ!)  
+- ಇದಕ್ಕೆ ಅಭ್ಯಾಸವಾದಾಗ, ನೀವು ಅತಿ ವೇಗದಲ್ಲಿ ಕೋಡಿಂಗ್ ಮಾಡುತ್ತಿರುವಂತೆ ಅನುಭವಿಸುತ್ತೀರಿ  
+- ಇದು VSCode.dev ನ "ಹೇ ಸಿರಿ, ಆದರೆ ಕೋಡಿಂಗ್ ಗೆ" ಆವೃತ್ತಿ
+
+### ವಿಧಾನ 2: URL ಬದಲಾವಣೆಯ ತಂತ್ರ
+
+HTTP ಮತ್ತು HTTPS ಬೇರೆಯಾದ ಪ್ರೋಟೋಕಾಲ್ ಬಳಸಿದರೂ ಅದೇ ಡೊಮೇನ್ ರಚನೆ ಇರುವುದು ಹಾಗೆ, VSCode.dev ಕೂಡ GitHub ವಿಳಾಸಿಸುವ ರೀತಿಯ ಗಮನಾರ್ಹ URL ಮಾದರಿಯನ್ನು ಬಳಸುತ್ತದೆ. ಯಾವುದೇ GitHub ರೆಪೊ URL ನೇರವಾಗಿ VSCode.dev ನಲ್ಲಿ ತೆರೆಯಬಹುದು.
+
+**URL ಪರಿವರ್ತನೆಯ ಮಾದರಿ:**
+
+| ರೆಪೊ ಪ್ರಕಾರ | GitHub URL | VSCode.dev URL |
+|----------------|---------------------|----------------|
+| **ಸಾರ್ವಜನಿಕ ರೆಪೊ** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
+| **ವೈಯಕ್ತಿಕ ಪ್ರಾಜೆಕ್ಟ್** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
+| **ಯಾವುದೇ ಲಭ್ಯ ರೆಪೊ** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
+
+**ಅಮಲೀಕರಣ:**  
+- `github.com` ಅನ್ನು `vscode.dev/github` ಗೆ ಬದಲಾಯಿಸಿ  
+- ಇತರೆ ಎಲ್ಲಾ URL ಭಾಗಗಳನ್ನು ಅಚಲವಾಗಿರಿಸಿ  
+- ಯಾವುದೇ ಸಾರ್ವಜನಿಕ ರೆಪೊಗಾಗಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ  
+- ತಕ್ಷಣ ಸಂಪಾದನೆ ಪ್ರವೇಶ ನೀಡುತ್ತದೆ
+
+> 💡 **ಜೀವನ ಪರಿವರ್ತಕ ಟಿಪ್**: ನಿಮ್ಮ ಇಷ್ಟದ ರೆಪೊಗಳ VSCode.dev ಆವೃತ್ತಿಗಳನ್ನು ಬುಕ್‌ಮಾರ್ಕ್ ಮಾಡಿ. ನಾನು "ನನ್ನ ಪೋರ್ಟ್ಫೋಲಿಯೊ ಸಂಪಾದನೆ" ಮತ್ತು "ದಾಖಲೆ ಸರಿಪಡಿಸುವಿಕೆ" ಎಂಬ ಬುಕ್‌ಮಾರ್ಕ್‌ಗಳನ್ನು ಇಟ್ಟುಕೊಂಡಿದ್ದೇನೆ, ಅವು ತಕ್ಷಣ ಸಂಪಾದನಾ ಮೋಡ್‌ಗೆ ಸಾಗಿಸುತ್ತವೆ!
+
+**ನೀವು ಯಾವ ವಿಧಾನವನ್ನು ಉಪಯೋಗಿಸಬೇಕು?**  
+- **ಇಂಟರ್‌ಫೇಸ್ ವಿಧಾನ:** ನೀವು ಅನ್ವೇಷಣೆ ಮಾಡುತ್ತಿರುವಾಗ ಅಥವಾ ಸರಿಯಾದ ರೆಪೊ ಹೆಸರನ್ನು ನೆನಪಿಡಲಾರದೆ ಇದ್ದಾಗ ಉತ್ತಮ  
+- **URL ಟ್ರಿಕ್:** ನೀವು ಯಾವತ್ತೂ ತ್ವರಿತ ಪ್ರವೇಶಿಸಲು ನಿರ್ದಿಷ್ಟ ಜಾಗವನ್ನು ತಿಳಿದಿದ್ದಾಗ ಪರಿಪೂರ್ಣ
+
+### 🎯 ಶಿಕ್ಷಣ ಚಟುವಟಿಕೆ: ಮೋಘ ಅಭಿವೃದ್ಧಿ ಪ್ರವೇಶ
+
+**ವಿರಾಮಿಸಿ ಹಾಗೂ ಪ್ರತಿಬಿಂಬಿಸಿ:** ನೀವು ಈಗ ಕೆಲವೇ ಕ್ಷಣಗಳ ಹಿಂದೆ ಒಂದು ವೆಬ್ ಬ್ರೌಸರ್ ಮುಖಾಂತರ ಕೋಡ್ ರೆಪೊ ಪಡೆಯುವ ಎರಡು ವಿಧಾನಗಳನ್ನು ಕಲಿತಿರಿ. ಇದು ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯ ವಿಧಾನದಲ್ಲಿ ಮೂಲಭೂತ ಬದಲಾವಣೆಯಾಗಿದೆ.
+
+**ವೇಗದ ಸ್ವ-ಮೌಲ್ಯಮಾಪನ:**  
+- ವೆಬ್ ಆಧಾರಿತ ಸಂಪಾದನೆ ಮುವು ಪರಂಪರাগত "ಅಭಿವೃದ್ಧಿ ಪರಿಸರ ಸ್ಥಾಪನೆ" ಯಾಕೆ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಎಂದು ತಿಳಿಸಬಹುದೇ?  
+- URL ಪರಿಷ್ಕರಣೆಯ ತಂತ್ರವು ಸ್ಥಳೀಯ Git ಕ್ಲೋನಂಗಿಗಿಂತ ಯಾವ ಲಾಭ ತರುತ್ತದೆ?  
+- ಈ ವಿಧಾನವು ನೀವು ಮುಕ್ತ ಮೂಲ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡುವ ರೀತಿ ಹೇಗೆ ಬದಲಾಯಿಸುತ್ತದೆ?
+
+**ನಿಜ ಜೀವನ ಸಂಪರ್ಕ:** GitHub, GitLab, Replit ಮುಂತಾದ ಪ್ರಮುಖ ಕಂಪನಿಗಳು ತಮ್ಮ ಅಭಿವೃದ್ಧಿ ವೇದಿಕೆಗಳನ್ನು ಈ ಮೋಘ ಮೊದಲಿಗ ತತ್ವಗಳ ಮೇಲೆ ನಿರ್ಮಿಸಿದ್ದಾರೆ. ನೀವು ವಿಶ್ವದ ವೃತ್ತಿಪರ ತಂಡಗಳ ಬಳಸುವ ಕೆಲಸದ ವಿಧಾನಗಳನ್ನು ಕಲಿಯುತ್ತಿದ್ದೀರಿ.
+
+**ಸವಾಲಿನ ಪ್ರಶ್ನೆ:** ಮೋಘ ಆಧಾರಿತ ಅಭಿವೃದ್ಧಿ ಶಿಕ್ಷಣವನ್ನು ಶಾಲೆಯಲ್ಲಿಯೇ ಹೇಗೆ ಬದಲಾಯಿಸಬಹುದು? ಸಾಧನ ಅವಶ್ಯಕತೆಗಳು, ಸಾಫ್ಟ್‌ವೇರ್ ನಿರ್ವಹಣೆ ಮತ್ತು ಸಹಕಾರ ಸಾಧ್ಯತೆಗಳನ್ನು ಗಮನಿಸಿ.
+
+## ಫೈಲ್‌ಗಳು ಮತ್ತು ಪ್ರಾಜೆಕ್ಟ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು
+
+ನೀವು ಈಗ ರೆಪೊ ತೆರೆಯಲಾಗಿದೆ, ನಿರ್ಮಾಣ ಪ್ರಾರಂಭಿಸೋಣ! VSCode.dev ನಿಮಗೆ ಕೋಡ್ ಫೈಲ್‌ಗಳನ್ನು ರಚಿಸಲು, ಸಂಪಾದಿಸಲು ಮತ್ತು ವ್ಯವಸ್ಥೆ ಮಾಡಲು ಬೇಕಾಗುವ ಎಲ್ಲವನ್ನೂ ನೀಡುತ್ತದೆ. ನಿಮ್ಮ ಡಿಜಿಟಲ್ ವರ್ಕ್‌ಶಾಪ್ ಎಂದು ಪರಿಗಣಿಸಿ — ಪ್ರತಿಯೊಂದು ಸಾಧನವೂ ನಿಮಗೆ ಬೇಕಾದ ಸ್ಥಳದಲ್ಲಿದೆ.
+
+ನಿತ್ಯ ಕೆಲಸಗಳನ್ನು ನಮ್ಮ ಜೊತೆಗೆ ತೊಡಗಿಸೋಣ.
+
+### ಹೊಸ ಫೈಲ್ ರಚಿಸುವುದು
+
+ವ್ಯಾಸಂಗಿ ಗೃಹ ನಿರ್ಮಾಣದಂತೆ, VSCode.dev ನಲ್ಲಿ ಫೈಲ್ ರಚನೆ ಕ್ರಮಬದ್ಧವಾಗಿದೆ. ವ್ಯವಸ್ಥೆ ಎಲ್ಲಜೊತೆಗೆ ಎಲ್ಲಾ ಸಾಮಾನ್ಯ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಫೈಲ್ ಪ್ರಕಾರಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ.
+
+**ಫೈಲ್ ರಚನೆ ಪ್ರಕ್ರಿಯೆ:**
+
+1. Explorer ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ಗುರಿ ಫೋಲ್ಡರ್‌ಗೆ ನವಿಗೇಟ್ ಮಾಡಿ  
+2. ಫೋಲ್ಡರ್ ಹೆಸರಿನ ಮೇರೆಗೆ ಹೊಸ ಫೈಲ್ ಐಕಾನ್ (📄+) ಕಾಣಿತ್ತಾದ ನಂತರ ಕರ್ಸರ್ ಹೊಂದಿಸಿ  
+3. ಫೈಲ್ ಹೆಸರು ಸೇರಿಸಿ ಮತ್ತು ಸರಿಯಾದ ವಿಸ್ತರಣೆಯನ್ನು (`style.css`, `script.js`, `index.html`) ನಮೂದಿಸಿ  
+4. ಫೈಲ್ ರಚಿಸಲು Enter ಒತ್ತಿ
+
+![ಹೊಸ ಫೈಲ್ ರಚನೆ](../../../../translated_images/create-new-file.2814e609c2af9aeb.kn.png)
+
+**ಹೆಸರಿನ ನಿಯಮಗಳು:**  
+- ಸ್ಪಷ್ಟವಾಗಿರುವ, ಫೈಲ್ ಉದ್ದೇಶ ವಿವರಿಸುವ ಹೆಸರುಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ  
+- ಸರಿಯಾದ ವಿಸ್ತರಣೆಗಳನ್ನು ಬಳಸಿರಿ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟಿಂಗಿಗಾಗಿ  
+- ಯೋಜನೆಗಳಲ್ಲಿ ಸಮಾನ ಹೆಸರಿನ ಕ್ರಮವನ್ನು ಪಾಲಿಸಿ  
+- ಖಾಲಿ ಸ್ಥಳಗಳ ಬದಲು ಸಣ್ಣಕ್ಷರ ಮತ್ತು ಹೈಫನ್ ಬಳಸಿರಿ
+
+### ಫೈಲ್ ಸಂಪಾದನೆ ಮತ್ತು ಉಳಿಸುವಿಕೆ
+
+ನಿಜವಾದ ರಮಣೀಯ ಭಾಗ ಇಲ್ಲಿದೆ! VSCode.dev ಸಂಪಾದಕವು ಸಹಾಯಕ ವೈಶಿಷ್ಟ್ಯಗಳಿಂದ ತುಂಬಿದೆ, ಇದು ಕೋಡಿಂಗ್ ಅನುಭವವನ್ನು ಸೌಲಭ್ಯದಾಯಕ ಮತ್ತು ನಯವಾಗುವಂತೆ చేస్తದೆ. ಇದು ಒಂದು ನುಜ್ಜಕ್ಕೆ ಬುದ್ಧಿವಂತ ಲೇಖಕ ಸಹಾಯಕವಿದ್ದಂತೆ, ಆದರೆ ಕೋಡ್‌ಗೆ.
+
+**ನಿಮ್ಮ ಸಂಪಾದನೆ ಕಾರ್ಯವಿಧಾನ:**  
+
+1. Explorer ಯಲ್ಲಿ ಯಾವುದಾದರೂ ಫೈಲ್ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಮುಖ್ಯ ಪ್ರದೇಶದಲ್ಲಿ ತೆರೆಯಿರಿ  
+2. ಟೈಪ್ ಮಾಡುತ್ತಿರಿರಿ ಮತ್ತು VSCode.dev ನಿಮಗೆ ಬಣ್ಣಗಳು, ಸಲಹೆಗಳು ಮತ್ತು ದೋಷ ಪತ್ತೆ ಹಂಚುತ್ತದೆ  
+3. Ctrl+S (Windows/Linux) ಅಥವಾ Cmd+S (Mac) ಒತ್ತಿ ನಿಮ್ಮ ಕೆಲಸ ಉಳಿಸಿ – ಆದರೆ ಸ್ವಯಂ-ಉಳಿಸಲು ಕೂಡ ಇದೆ!
+
+![VSCode.dev ನಲ್ಲಿ ಫೈಲ್ ಸಂಪಾದನೆ](../../../../translated_images/edit-a-file.52c0ee665ef19f08.kn.png)
+
+**ನೀವು ಕೋಡಿಂಗ್ ವೇಳೆ ಸಂಭವಿಸುವವನ್ನು ನೋಡಿ:**  
+- ನಿಮ್ಮ ಕೋಡ್ ಸುಂದರವಾಗಿ ಬಣ್ಣಪೂರಿತವಾಗಿರುತ್ತದೆ, ಓದಲು ಸುಲಭವಾಗಿದೆ  
+- VSCode.dev ಟೈಪಿಂಗ್ ವೇಳೆ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಗಳನ್ನು ಸೂಚಿಸುತ್ತದೆ (ಸ್ವಯಂ-ತಿದ್ದಿಸುವಂತೆ, ಆದರೆ ಹೆಚ್ಚು ಬುದ್ಧಿವಂತ)  
+- ನೀವು ಉಳಿಸುವ ಮೊದಲು ದೋಷಗಳು ಮತ್ತು ಟೈಪೋಗಳನ್ನು ಹಿಡಿಯುತ್ತದೆ  
+- ಬ್ರೌಸರ್‌ನಂತೆ ಬಹು ಫೈಲ್‌ಗಳನ್ನು ಟ್ಯಾಬ್‌ಗಳಲ್ಲಿ ತೆರೆದು ಇಡಬಹುದು  
+- ಎಲ್ಲವನ್ನೂ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಉಳಿಸುತ್ತದೆ
+
+> ⚠️ **ವೇಗದ ಟಿಪ್**: ಸ್ವಯಂ-ಉಳಿಸುವಿಕೆ ನಿಮ್ಮ ಬೆದರಿಕೆಯನ್ನು ಹೊಂದಿದ್ದರೂ Ctrl+S ಅಥವಾ Cmd+S ಒತ್ತುವುದು ಉತ್ತಮ ಅಭ್ಯಾಸ. ಇದು ತಕ್ಷಣದ ಉಳಿಸುವಿಕೆಯನ್ನು ಮಾಡುತ್ತದೆ ಮತ್ತು ದೋಷ ಪರಿಶೀಲನೆಗೆ ಕೆಲವು ಹೆಚ್ಚುವರಿ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.
+
+### Git ಬಳಸಿ ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ
+
+ಪ್ರಾಚೀನ ವಿಜ್ಞಾನಿಗಳು ಅವಶೇಷ ಬೇರ್ಪಡಿಸಿದ ಹಂತಗಳ ವಿವರ ದಾಖಲೆ ರಚಿಸುವಂತೆ, Git ನಿಮ್ಮ ಕೋಡ್ ಬದಲಾವಣೆಗಳ ಇತಿಹಾಸವನ್ನು ಸಂರಕ್ಷಿಸುತ್ತದೆ. ಈ ವ್ಯವಸ್ಥೆ ಪ್ರಾಜೆಕ್ಟ್ ಇತಿಹಾಸವನ್ನು ಉಳಿಸುತ್ತದೆ ಮತ್ತು ಅಗತ್ಯವಾಗಿದ್ದಾಗ ಹಿಂದಿನ ಆವೃತ್ತಿಗಳಿಗೇ ಹಿಂತಿರುಗಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. VSCode.dev Git ಫಂಕ್ಷನಾಲಿಟಿಯನ್ನು ಒಳಗೊಂಡಿದೆ.
+
+**ಸೋರ್ಸ್ ಕಂಟ್ರೋಲ್ ಇಂಟರ್‌ಫೇಸ್:**
+
+1. Activity Bar ನಲ್ಲಿ 🌿 ಐಕಾನ್ ಮೂಲಕ ಸೋರ್ಸ್ ಕಂಟ್ರೋಲ್ ಪ್ಯಾನೆಲ್ ಪ್ರವೇಶಿಸಿ  
+2. ಬದಲಾಯಿಸಿದ ಫೈಲ್‌ಗಳು "Changes" ವಿಭಾಗದಲ್ಲಿ ಕಾಣಿಸುತ್ತವೆ  
+3. ಬಣ್ಣ ಐಕಾನಗಳು ಬದಲಾವಣೆಯ ವಿಧವನ್ನು ಸೂಚಿಸುತ್ತವೆ: ಹಸಿರು ಸೇರಿಸುವಿಕೆಗೆ, ಕೆಂಪು ತೆಗೆದುಹಾಕಲು
+
+![ಸೋರ್ಸ್ ಕಂಟ್ರೋಲ್‌ನಲ್ಲಿ ಬದಲಾವಣೆಗಳ ವೀಕ್ಷಣೆ](../../../../translated_images/working-tree.c58eec08e6335c79.kn.png)
+
+**ನಿಮ್ಮ ಕೆಲಸ ಉಳಿಸುವಿಕೆ (ಕಮಿಟ್ ಕಾರ್ಯವಿಧಾನ):**
+
+```mermaid
+flowchart TD
+    A[ಫೈಲ್‌ಗಳಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಿ] --> B[ಮೂಲ ನಿಯಂತ್ರಣದಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ವೀಕ್ಷಿಸಿ]
+    B --> C[+ ಕ್ಲಿಕ್ ಮಾಡಿ ಬದಲಾವಣೆಗಳನ್ನು ಸ್ಟೇಜ್ ಮಾಡಿ]
+    C --> D[ವಿವರಣೆಾತ್ಮಕ ಕಮಿಟ್ ಸಂದೇಶವನ್ನು ಬರೆಯಿರಿ]
+    D --> E[ಕಮಿಟ್ ಮಾಡಲು ಚೆಕ್‌ಮಾರ್ಕ್ ಕ್ಲಿಕ್ ಮಾಡಿ]
+    E --> F[ಬದಲಾವಣೆಗಳನ್ನು GitHub ಗೆ pushed ಮಾಡಲಾಗಿದೆ]
+```  
+```mermaid
+stateDiagram-v2
+    [*] --> Modified: ಕಡತಗಳನ್ನು ಸಂಪಾದಿಸಿ
+    Modified --> Staged: ಹಂತದೃಷ್ಟಕ್ಕೆ + ಕ್ಲಿಕ್ ಮಾಡಿ
+    Staged --> Modified: ಹಂತವನ್ನು ಮುಂದುವರಿಸಲು - ಕ್ಲಿಕ್ ಮಾಡಿ
+    Staged --> Committed: ಸಂದೇಶ ಸೇರಿಸಿ & ಕಮಿಟ್ ಮಾಡಿ
+    Committed --> [*]: GitHub ಗೆ ಸಮನ್ವಯಗೊಳಿಸು
+    
+    state Committed {
+        [*] --> LocalCommit
+        LocalCommit --> RemotePush: ಸ್ವಯಂ-ಸಮನ್ವಯ
+    }
+```  
+**ನಿಮ್ಮ ಹಂತದ ಹಂತ ಪ್ರಕ್ರಿಯೆ:**  
+- ನೀವು ಉಳಿಸಲು ಬಯಸುವ ಫೈಲ್‌ಗಳ ಪಕ್ಕದಲ್ಲಿ ಇರುವ "+" ಐಕಾನ್ ಕ್ಲಿಕ್ ಮಾಡಿ (ಇದನ್ನು "ಸ್ಟೇಜಿಂಗ್" ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ)
+- ಎಲ್ಲಾ ಮೆಟ್ಟಲಿನ ಬದಲಾವಣೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ ತೃಪ್ತಿಯನ್ನು ದ್ವಿತೀಯ ದೃಢೀಕರಣ ಮಾಡಿ
+- ನೀವು ಏನು ಮಾಡಿದಿರಿ ಎಂಬುದನ್ನು ವಿವರಿಸುವ ಒಂದು ಹಷಿ ಟಿಪ್ಪಣಿ ಬರೆಸಿ (ಇದು ನಿಮ್ಮ "ಕಮಿಟ್ ಸಂದೇಶ")
+- ಎಲ್ಲಾ ಫೈಲ್‌ಗಳನ್ನು GitHub ಗೆ ಉಳಿಸಲು ಚಿಹ್ನೆ ಬಟನ್ನನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ
+- ನೀವು ಯಾರಾದರೂ ಬದಲಾವಣೆ ಬಗ್ಗೆ ವಿಚಾರ ಬದಲಿಸಿದರೆ, ಅನ್‌ಡೂ ಐಕಾನ್ ಮೂಲಕ ಬದಲಾವಣೆಗಳನ್ನು ಬಿಡಿಸಬಹುದು
+
+**ಚೆನ್ನಾಗಿ ಬರೆದ ಕಮಿಟ್ ಸಂದೇಶಗಳು (ಇದು ನೀವು ಭಾವಿಸುವುದಕ್ಕಿಂತ ಸುಲಭ!):**
+- ನೀವು ಮಾಡಿದ್ದುದನ್ನು ಮಾತ್ರ ವಿವರಿಸಿ, ಉದಾ: "ಸಂಪರ್ಕ ಫಾರ್ಮ್ ಸೇರಿಸಿ" ಅಥವಾ "ಭ್ರಷ್ಟ ನಾವಿಗೇಶನ್ ಸರಿಪಡಿಸಿ"
+- সংক্ষিপ্তವಾಗಿರಲಿ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತವಾಗಿರಲಿ – ಟ್ವೀಟ್ ಉದ್ದ, ಪ್ರಬಂಧ ಅಲ್ಲ
+- "ಸೇರಿಸಿ", "ಸರಿಪಡಿಸಿ", "ನವೀಕರಿಸಿ", ಅಥವಾ "ಅಳಿಸಿ" ಎಂಬ ಕ್ರಿಯಾ ಪದಗಳಿಂದ ಪ್ರಾರಂಭಿಸಿ
+- **ಚನ್ನಾದ ಉದಾಹರಣೆಗಳು**: "ಸ್ಪಂದನ ಶೀಲ ನವಿಗೇಶನ್ ಮೆನು ಸೇರಿಸಿ", "ಮೊಬೈಲ್ ವರ್ಗಸರಣಿಯ ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸಿ", "ಬೇಸರಿಕೆಯತೆಗೆ ಉತ್ತಮ ಬಣ್ಣಗಳನ್ನು ನವೀಕರಿಸಿ"
+
+> 💡 **ದ್ರುತ ನಾವಿಗೇಶನ್ ಸಲಹೆ**: ऊपर बाएँ कोने में हैमबर्गर मेनू (☰) उपयोगಿಸಿ ನಿಮ್ಮ GitHub ಸಂಗ್ರಹಕ್ಕೆ ಹಿಂತಿರುಗಿ ಮತ್ತು ನಿಮ್ಮ ಕಮಿಟ್ ಮಾಡಿದ ಬದಲಾವಣೆಗಳನ್ನು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ ನೋಡಿ. ಇದು ನಿಮ್ಮ ಸಂಪಾದನಾ ಪರಿಸರ ಮತ್ತು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಹೋಮ್ GitHub ನಡುವಿನ ಒಂದು ಪೋರ್ಟಲ್ ಹಿಂತಿರುಗುವುದು!
+
+## ವಿಸ್ತಾರಗಳೊಂದಿಗೆ ಕಾರ್ಯಾಚರಣೆ ಹೆಚ್ಚಿಸುವುದು
+
+ಹೆಚ್ಚುವರಿ ಉಪಕರಣ ಹೊಂದಿರುವ ವೃತ್ತಿಪರ ನಿಪುಣರ ಕಾರ್ಖಾನೆ ಹೀಗೆಯೇ, VSCode.dev ನ್ನು ವಿಸ್ತಾರಗಳ ಮೂಲಕ ವೈಶಿಷ್ಟ್ಯಪೂರ್ಣ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಸೇರಿಸುವಂತೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು. ಈ ಸಮುದಾಯ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಪ್ಲಗಿನ್‌ಗಳು ಕೋಡ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್, ನೇರ ಪೂರ್ವವೀಕ್ಷಣೆ, ಮತ್ತು ಸುಧಾರಿತ Git ಸಮ್ಮಿಲನ ಮುಂತಾದ ಸಾಮಾನ್ಯ ಅಭಿವೃದ್ಧಿ ಅಗತ್ಯಗಳನ್ನು ಸರಿಪಡಿಸುತ್ತವೆ.
+
+ವಿಸ್ತಾರ ಮಾರುಕಟ್ಟೆ ಜಾಗತಿಕವಾಗಿ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಸಾವಿರಾರು ಉಚಿತ ಉಪಕರಣಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಪ್ರತಿ ವಿಸ್ತಾರವು ವಿಶಿಷ್ಟ ಕಾರ್ಯವಿಧಾನ ಸವಾಲುಗಳನ್ನು ಪರಿಹರಿಸುತ್ತದೆ, ಇದು ನಿಮಗೆ ವಿಶೇಷ ಅಗತ್ಯಗಳು ಮತ್ತು ಆದ್ಯತೆಗಳಿಗೆ ತಕ್ಕಂತೆ ವೈಯಕ್ತಿಕ ಅಭಿವೃದ್ಧಿ ಪರಿಸರವನ್ನು ಕಟ್ಟಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ.
+
+```mermaid
+mindmap
+  root((Extension Ecosystem))
+    Essential Categories
+      Productivity
+        Live Server
+        Auto Rename Tag
+        Bracket Pair Colorizer
+        GitLens
+      Code Quality
+        Prettier
+        ESLint
+        Spell Checker
+        Error Lens
+      Language Support
+        HTML CSS Support
+        JavaScript ES6
+        Python Extension
+        Markdown Preview
+      Themes & UI
+        Dark+ Modern
+        Material Icon Theme
+        Peacock
+        Rainbow Brackets
+    Discovery Methods
+      Popular Rankings
+        Download Counts
+        User Ratings
+        Recent Updates
+        Community Reviews
+      Recommendations
+        Workspace Suggestions
+        Language-based
+        Workflow-specific
+        Team Standards
+```
+### ನಿಮ್ಮ perfecte ವಿಸ್ತಾರಗಳನ್ನು શોધುವುದು
+
+ವಿಸ್ತಾರ ಮಾರುಕಟ್ಟೆ ಯಶಸ್ವಿಯಾಗಿ ವ್ಯವಸ್ಥಿತವಾಗಿದ್ದು, ನೀವು ಅಗತ್ಯವಿರುವುದನ್ನು ಹುಡುಕಲು ಕಳೆದುಹೋಗುವ ಅಗತ್ಯವಿಲ್ಲ. ಇದು ನಿಮಗೆ ನಿರ್ದಿಷ್ಟ ಉಪಕರಣಗಳನ್ನು ಮತ್ತು ನೀವು ತಿಳಿದಿರಲಿಲ್ಲದ ಕುತೂಹಲಕರ ವಸ್ತುಗಳನ್ನು ಕಂಡುಹಿಡಿಯಲು ಸಹಾಯ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ!
+
+**ಮಾರುಕಟ್ಟೆಗೆ ತೆರಳುವ ವಿಧಾನ:**
+
+1. ಚಟುವಟಿಕೆ ಬಾರ್ನಲ್ಲಿನ ವಿಸ್ತಾರ ಐಕಾನ್(🧩) ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ
+2. ಸುತ್ತಾಟ ಮಾಡಿ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ವಸ್ತುವನ್ನು ಹುಡುಕಿ
+3. ಹೆಚ್ಚು ಮಾಹಿತಿ ತಿಳಿಯಲು ಆಸಕ್ತಿಗೊಳಿಸುವ ಯಾವುದೇ ವಿಷಯವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ
+
+![ವಿಸ್ತಾರ ಮಾರುಕಟ್ಟೆ ಇಂಟರ್ಫೇಸ್](../../../../translated_images/extensions.eca0e0c7f59a10b5.kn.png)
+
+**ನೀವು ಅನ್ವೇಷಿಸುವುದು:**
+
+| ವಿಭಾಗ | ಒಳಗೊಂಡಿದೆ | ಇದರಿಂದ ಪ್ರಯೋಜನವೇನು |
+|----------|---------|----------|
+| **ಸೆಟಪ್ ಮಾಡಿದವು** | ನೀವು ಈಗಾಗಲೇ ಸೇರಿಸಿದ್ದ ವಿಸ್ತಾರಗಳು | ನಿಮ್ಮ ವೈಯಕ್ತಿಕ ಕೋಡಿಂಗ್ ಉಪಕರಣಗಳ ಕಿಟ್ |
+| **ಜನಪ್ರಿಯ** | ಜನಪ್ರಿಯ ಆಯ್ಕೆಗಳು | ಬಹುತೇಕ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದವರು ನಂಬುವವು |
+| **ಶಿಫಾರಸ್ಸು ಮಾಡಿದ** | ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗಾಗಿ ಸ್ಮಾರ್ಟ್ ಸಲಹೆಗಳು | VSCode.dev ನ ಸಹಾಯಕ ಶಿಫಾರಸ್ಸುಗಳು |
+
+**ನಶ್ಟವಿಲ್ಲದ ಬ್ರೌಸಿಂಗ್ ಮಾಡುವುದು:**
+- ಪ್ರತಿಯೊಂದು ವಿಸ್ತಾರವು ರೇಟಿಂಗ್‌ಗಳು, ಡೌನ್ಲೋಡ್ ಸಂಖ್ಯೆಗಳು, ಮತ್ತು ಬಳಕೆದಾರ ವಿಮರ್ಶೆಗಳನ್ನು ತೋರಿಸುತ್ತದೆ
+- ನೀವು स्क्रीनಶಾಟ್‌ಗಳು ಮತ್ತು ಸ್ಪಷ್ಟ ವಿವರಣೆಗಳನ್ನು ಪಡೆಯುತ್ತೀರಿ ಅದು ಏನು ಮಾಡುತ್ತದೆ ಎಂದು
+- ಎಲ್ಲವೂ ಹೊಂದಿಕೊಳ್ಳುವ ಮಾಹಿತಿ ಅಳವಡಿಸಲಾಗಿದೆ
+- ಸಮಾನ ವಿಸ್ತಾರಗಳನ್ನು ಶಿಫಾರಸು ಮಾಡಿ ನೀವು ಆಯ್ಕೆಯನ್ನು ಹೋಲಿಸಬಹುದು
+
+### ವಿಸ್ತಾರಗಳನ್ನು ಸ್ಥಾಪಿಸುವುದು (ಇದು ತುಂಬಾ ಸುಲಭ!)
+
+ನಿಮ್ಮ ಸಂಪಾದಕಕ್ಕೆ ಹೊಸ ಶಕ್ತಿಗಳನ್ನು ಸೇರಿಸುವುದು ಕೇವಲ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವಷ್ಟೇ ಸುಲಭ. ವಿಸ್ತಾರಗಳು ಸೆಕೆಂಡುಗಳಲ್ಲಿ ಸ್ಥಾಪಿತವಾಗುತ್ತವೆ ಮತ್ತು ತಕ್ಷಣ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ – ಯಾವುದೇ ಮರುಪ್ರಾರಂಭವಿಲ್ಲ, ಕಾಯುವ ಅವಶ್ಯಕತೆ ಇಲ್ಲ.
+
+**ನೀವು ಮಾಡಬೇಕಾದ ಒಂದೆಲ್ಲ:**
+
+1. ನೀವು ಬೇಕಾದ ವಿಸ್ತಾರವನ್ನು ಹುಡುಕಿ ("live server" ಅಥವಾ "prettier" ಅನ್ನು ಪ್ರಯತ್ನಿಸಿ)
+2. ಒಳ್ಳೆಯದಾಗಿ ಕಂಡ ವಿಸ್ತಾರವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಹೆಚ್ಚಿನ ವಿವರಗಳನ್ನು ನೋಡಿ
+3. ಅದರ ಕಾರ್ಯಗಳನ್ನು ಓದಿ ಮತ್ತು ರೇಟಿಂಗ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+4. ನೀಲಿ "Install" ಬಟನ್ ನ್ನು ಒತ್ತಿ ಮುಗಿಸಿ!
+
+![ವಿಸ್ತಾರಗಳು ಸ್ಥಾಪಿಸುವುದು](../../../../8-code-editor/images/install-extension.gif)
+
+**ತೆರಳಿನ ಹಿಂದೆ ಏನಾಗುತ್ತದೆ:**
+- ವಿಸ್ತಾರ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಡೌನ್ಲೋಡ್ ಆಗಿ ಮತ್ತು ಸೆಟಪ್ ಆಗುತ್ತದೆ
+- ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳು ತಕ್ಷಣ ನಿಮ್ಮ ಇಂಟರ್ಫೇಸಿಗೆ ಬರುತ್ತವೆ
+- ಎಲ್ಲವೂ ತಕ್ಷಣ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತವೆ (ಕಡಿಮೆ ಕಾಲ)
+- ನೀವು ಸೈನ್ ಇನ್ ಆಗಿದ್ದರೆ, ವಿಸ್ತಾರ ಎಲ್ಲಾ ಸಾಧನಗಳಿಗೆ ಸಿಂಕ್ ಆಗುತ್ತದೆ
+
+**ನಾನು ಶಿಫಾರಸು ಮಾಡುವ ಕೆಲವು ವಿಸ್ತಾರಗಳು:**
+- **Live Server**: ನೀವು ಕೋಡ್ ಮಾಡಿದಂತೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ನೇರವಾಗಿ ನವೀಕರಿಸುವುದನ್ನು ನೋಡಿ (ಇದು ಅದ್ಭುತ!)
+- **Prettier**: ನಿಮ್ಮ ಕೋಡ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸ್ವಚ್ಛ ಮತ್ತು ವೃತ್ತಿಪರವಾಗಿ ಮಾಡುವುದು
+- **Auto Rename Tag**: ಒಂದು HTML ಟ್ಯಾಗ್ ಬದಲಾಯಿಸಿದಾಗ ಅದರ ಜೋಡಿ ಕೂಡ ಒದಗಿಸುವುದು
+- **Bracket Pair Colorizer**: ನಿಮ್ಮ ಬ್ರಾಕೆಟ್‌ಗಳನ್ನು ಬಣ್ಣಗಳೊಂದಿಗೆ ಕುರಿತಂತೆ ಟ್ಯಾಗ್ ನಲ್ಲಿ ತಪ್ಪು ಸಿಗದಂತೆ ಮಾಡಿ
+- **GitLens**: Git ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಹಲವಾರು ಉಪಯುಕ್ತ ಮಾಹಿತಿಯಿಂದ ಇಂಧನ ತುಂಬುವುದು
+
+### ನಿಮ್ಮ ವಿಸ್ತಾರಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು
+
+ಬಹುತೆಕ ವಿಸ್ತಾರಗಳು ಅಲ್ಲಿ ಸಕ್ರಿಯ ಮಾಡಬಹುದಾದ ಸೆಟ್ಟಿಂಗ್‌ಗಳೊಂದಿಗೆ ಬರುತ್ತವೆ, ಇದು ನಿಮ್ಮ ಇಷ್ಟಕ್ಕೆ ತಕ್ಕಂತೆ ಅವು ಕಾರ್ಯನಿರ್ವಹಿಸುವಂತೆ ರೂಪಿಸಬಹುದು. ಇದನ್ನು ನೀವು ಕಾರಿನ ಆಸನ ಮತ್ತು ಕಣ್ಣಪ್ಪನ್ನು ಸರಿಪಡಿಸುವಂತೆ ಬುದ್ಧಿಮತ್ತೆಯಿಂದ ಮಾಡಿ.
+
+**ವಿಸ್ತಾರ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ನವೀಕರಿಸುವುದು:**
+
+1. ವಿಸ್ತಾರ ಪ್ಯಾನಲ್ ನಲ್ಲಿ ನೀವು ಸ್ಥಾಪಿಸಿದ ವಿಸ್ತಾರವನ್ನು ಹುಡುಕಿ
+2. ಅದರ ಹೆಸರಿನ ಬಳಿಯಲ್ಲಿ ಇರುವ ಚಿಲುಮೆ ಐಕಾನ್ (⚙️) ಮಿತಿ ಕ್ಲಿಕ್ ಮಾಡಿ
+3. ಡ್ರಾಪ್‌ಡೌನ್‌ನಲ್ಲಿ "Extension Settings" ಆಯ್ಕೆಮಾಡಿ
+4. ನಿಮ್ಮ ಕಾರ್ಯಪ್ರವಾಹಕ್ಕೆ ಸರಿಹೊಂದುತ್ತದೆವರೆಗೆ ಮೇಲಾಗಿಸಿಕೊಂಡು ಹೋಗಿ
+
+![ವಿಸ್ತಾರ ಸೆಟ್ಟಿಂಗ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು](../../../../translated_images/extension-settings.21c752ae4f4cdb78.kn.png)
+
+**ನೀವು ನವೀಕರಿಸಲು ಇಚ್ಛಿಸಬಹುದಾದ ಸಾಮಾನ್ಯ ವಸ್ತುಗಳು:**
+- ನಿಮ್ಮ ಕೋಡ್ ಹೇಗೆ ಫಾರ್ಮ್ಯಾಟ್ ಆಗುತ್ತದೆ (ಟ್ಯಾಬ್‌ಗಳು ಅಥವಾ ಜಾಗಗಳು, ಸಾಲು ಉದ್ದ, ಇತ್ಯಾದಿ)
+- ಬೇರೆ ಬೇರೆ ಕ್ರಿಯೆಗಳಿಗೆ ಯಾವ ಕೀಲಿಮಣೆ ಶಾರ್ಟ್‌ಕಟ್‌ಗಳು ಹೊಣೆ ಹೊತ್ತಿವೆ
+- ವಿಸ್ತಾರ ಯಾವ ಫೈಲ್ ಪ್ರಕಾರಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬೇಕು
+- ನಿರ್ದಿಷ್ಟ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಆನ್ ಅಥವಾ ಆಫ್ ಮಾಡಿ ವಾತಾವರಣವನ್ನು ಸರಳವಾಗಿಡಿ
+
+### ನಿಮ್ಮ ವಿಸ್ತಾರಗಳನ್ನು ಸಂಘಟಿತವಾಗಿರಿಸುವುದು
+
+ನೀವು ಇನ್ನಷ್ಟು ಕುತೂಹಲಕರ ವಿಸ್ತಾರಗಳನ್ನು ಕಂಡುಹಿಡಿದಂತೆ, ನೀವು ಅವುಗಳನ್ನು ಸರಿಯಾದ ಕ್ರಮದಲ್ಲಿ ಮತ್ತು ಉತ್ತಮವಾಗಿ ನಿರ್ವಹಿಸಲು ಬಯಸುತ್ತೀರಿ. VSCode.dev ಇದನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಲು ಸುಧಾರಿಸಿದೆ.
+
+**ನಿಮ್ಮ ವಿಸ್ತಾರ ನಿರ್ವಹಣಾ ಆಯ್ಕೆಗಳು:**
+
+| ನೀವು ಏನು ಮಾಡಬಹುದು | ಇದು ಎಷ್ಟಿಗೆ ಸಹಾಯಕ | ಪ್ರೊ ಸಲಹೆ |
+|--------|---------|----------|
+| **ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ** | ವಿಸ್ತಾರ ಸಮಸ್ಯೆ ಉಂಟುಮಾಡಿದೆಯಾ ಎಂದು ಪರೀಕ್ಷೆ ಮಾಡುತ್ತಿರುವಾಗ | ಬದಲಾವಣೆ ಯಾದಸ್ಸಾಗಬಹುದು ಬೇಕಾದರೆ ಮತ್ತೆ ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು |
+| **ಅಳಿಸು** | ನೀವು ಬಳಸದೇ ಇರುವ ವಿಸ್ತಾರಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತೆರವುಗೊಳಿಸುವಾಗ | ನಿಮ್ಮ ವಾತಾವರಣವನ್ನು ಸ್ವಚ್ಛ ಮತ್ತು ವೇಗವಾಗಿ ಇಡುವುದು |
+| **ನವೀಕರಿಸಿ** | ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ದೋಷ ಪರಿಹಾರಗಳನ್ನು ಪಡೆಯಲು | ಸಾಮಾನ್ಯವಾಗಿ ಸ್ವಯಂಚಾಲಿತವಾಗುತ್ತದೆಯಾದರೂ ಪರಿಶೀಲಿಸುವುದು ಮುಖ್ಯ |
+
+**ನಾನು ವಿಸ್ತಾರಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತೇನೆ:**
+- ಪ್ರತಿಯೊಂದು ಕೆಲ ತಿಂಗಳಿಗೆ ನಾನು ಸ್ಥಾಪಿಸಿದ ವಿಸ್ತಾರಗಳನ್ನು ಪರಿಶೀಲಿಸಿ ಬಳಸದವನನ್ನು ತೆಗೆದುಹಾಕುತ್ತೇನೆ
+- ನವೀಕರಣಗಳನ್ನು ಬಿಟ್ಟುಬಿಡದೆ ನವೀಕರಿಸಿ ಗೆಲುವಾಗುತ್ತೇನೆ
+- ಏನಾದರೂ ನಿಧಾನವಾಗಿದ್ದರೆ, ಕೆಲವು ವಿಸ್ತಾರಗಳನ್ನು ತಾತ್ಕಾಲಿಕವಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ ಸಮಸ್ಯೆ ಏನು ಎಂದು ನೋಡುತ್ತೇನೆ
+- ವಿಸ್ತಾರಗಳನ್ನು ದೊಡ್ಡ ನವೀಕರಣ ಬರುವಾಗ ವಿಮರ್ಶೆಯೂ ಮಾಡುತ್ತೇನೆ – ಕೆಲವೊಮ್ಮೆ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳಿವೆ!
+
+> ⚠️ **ಕಾರ್ಯಕ್ಷಮತಾ ಸಲಹೆ**: ವಿಸ್ತಾರಗಳು ಅದ್ಭುತವಾಗಿವೆ, ಆದರೆ ಹೆಚ್ಚಾಗಿದ್ದರೆ ಸಿಸ್ಟಮ್ ನಿಧಾನವಾಗಬಹುದು. ನಿಮ್ಮ ಜೀವನವನ್ನು ನಿಜವಾಗಿಯೇ ಸುಲಭ ಮಾಡುತ್ತಿವೆಯೆಂಬ ವಿಸ್ತಾರಗಳನ್ನು ಮಾತ್ರ ಉಪಯೋಗಿಸಿ ಮತ್ತು ಬಳಸದ ವಿಸ್ತಾರಗಳನ್ನು ಅಳಿಸಲು ಮನಸ್ಸು ಮಾಡಿರಿ.
+
+### 🎯 ಪಠ್ಯ ಪರಿಕ್ಷಣ: ಅಭಿವೃದ್ಧಿ ಪರಿಸರ ಕಸ್ಟಮೈಜೆಶನ್
+
+**ವಾಸ್ತುಶಿಲ್ಪದ ಅರ್ಥ**: ಸಮುದಾಯ ಸೃಷ್ಟಿಸಿದ ವಿಸ್ತಾರಗಳನ್ನು ಬಳಸಿ ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ ಪರಿಸರವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನೀವು ಕಲಿತಿದ್ದೀರಿ. ಇದು ಉದ್ಯಮ ಅಭಿವೃದ್ಧಿ ತಂಡಗಳು ನಿರ್ದಿಷ್ಟವಾದ ಉಪಕರಣ ಸರಣಿಗಳನ್ನು ಏನೆಂದರೆ ಅದೇ ರೀತಿಯ ಅಳವಡಿಕೆಯಾಗುತ್ತದೆ.
+
+**ಮುಖ್ಯ ತತ್ವಗಳು ಅಧ್ಯಯನಗೊಂಡವು**:
+- **ವಿಸ್ತಾರ ಅನ್ವೇಷಣೆ**: ನಿರ್ದಿಷ್ಟ ಅಭಿವೃದ್ಧಿ ಸವಾಲುಗಳನ್ನು ಪರಿಹರಿಸುವ ಸಾಧನಗಳನ್ನು ಹುಡುಕುವುದು
+- **ಪರಿಸರ ಸಂರಚನೆ**: ವೈಯಕ್ತಿಕ ಅಥವಾ ತಂಡದ ಆದ್ಯತೆಗಳಿಗೆ ಹೊಂದಿಸಲಾದ ಸಾಧನಗಳ ಕಸ್ಟಮೈಜೆಶನ್
+- **ಕಾರ್ಯಕ್ಷಮತಾ ಸುಧಾರಣೆ**: ಕಾರ್ಯಪಟುತ್ವವನ್ನು ವ್ಯವಸ್ಥೆಯ ಕಾರ್ಯಕ್ಷಮತೆ ಜೊತೆಗೆ ಸಮತೋಲನಗೊಳಿಸುವುದು
+- **ಸಮುದಾಯ ಸಹಕಾರ**: ಜಾಗತಿಕ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಸಮುದಾಯ ರಚಿಸಿದ ಸಾಧನಗಳನ್ನು ಬಳಸುವುದು
+
+**ಕಲಿಕಾ ಸಂಪರ್ಕ**: ವಿಸ್ತಾರ ಪರಿಕಲ್ಪನೆಗಳು VS Code, Chrome DevTools ಮತ್ತು ಆಧುನಿಕ IDE ಗಳಂತಹ ಪ್ರಮುಖ ಅಭಿವೃದ್ಧಿ ವೇದಿಕೆಗಳಿಗೆ ಅಭಿವೃದ್ಧಿ ಮಾಡಲಾಗುತ್ತವೆ. ವಿಸ್ತಾರಗಳನ್ನು ಮೌಲ್ಯಮಾಪನ, ಸ್ಥಾಪನೆ ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯವಿಧಾನಗಳಿಗೆ ಅವಶ್ಯಕ.
+
+**ಪರಿವಿಮರ್ಶಾ ಪ್ರಶ್ನೆ**: ನೀವು 10 ಅಭಿವೃದ್ಧಿಪಡಿಸಿದವರ ತಂಡಕ್ಕೆ ಡೆವಲಪ್‌ಮೆಂಟ್ ಪರಿಸರವನ್ನು ಹೇಗೆ ನಿಯಮಿತಗೊಳಿಸುತ್ತೀರಿ? ಒಂದುಸಾರಿ ಸಪಟ್, ಕಾರ್ಯಪಟುತ್ವ ಮತ್ತು ವೈಯಕ್ತಿಕ ಆದ್ಯತೆಗಳನ್ನು ಪರಿಗಣಿಸಿ.
+
+## 📈 ನಿಮ್ಮ ಕ್ಲೌಡ್ ಅಭಿವೃದ್ಧಿ ನಿಪುಣತೆ ಸಮಯ ರೇಖೆ
+
+```mermaid
+timeline
+    title ವೃತ್ತಿಪರ ಕ್ಲೌಡ್ ಅಭಿವೃದ್ಧಿ ಪ್ರಯಾಣ
+    
+    section ವೇದಿಕೆ ಅಧಾರಗಳು
+        ಕ್ಲೌಡ್ ಅಭಿವೃದ್ಧಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ
+            : ವೆಬ್ ಆಧಾರಿತ ಸಂಪಾದನೆಯ ಕಲ್ಪನೆಗಳನ್ನು ನಿಪುಣತೆಯಿಂದ ಅಳವಡಿಸಿಕೊಳ್ಳಿ
+            : GitHub ಸಂಯೋಜನೆ ಮಾದರಿಗಳನ್ನು ಸಂಪರ್ಕಿಸಿ
+            : ವೃತ್ತಿಪರ ಇಂಟರ್ಫೇಸ್‌ಗಳಲ್ಲಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿ
+    
+    section ವರ್ಕ್‌ಫ್ಲೋ ಮಾಸ್ಟರಿ
+        ಕಡತ & ಪ್ರಾಜೆಕ್ಟ್ ನಿರ್ವಹಣೆ
+            : ಸಂಘಟಿತ ಪ್ರಾಜೆಕ್ಟ್ ರಚನೆಗಳನ್ನು ರಚಿಸಿ
+            : ವಾಕ್ಯರಚನೆ ಹೈಲೈಟಿಂಗ್ ಪ್ರಯೋಜನಗಳನ್ನು ನಿಪುಣತೆಯಿಂದ ಬಳಸಿ
+            : ಬಹು ಕಡತ ಸಂಪಾದನೆ ವರ್ಕ್‌ಫ್ಲೋಗಳನ್ನು ಕೈಗೊಳ್ಳಿ
+        
+        ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ ಸಂಯೋಜನೆ
+            : Git ದೃಶ್ಯೀಕರಣವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+            : ಕಮಿಟ್ ಸಂದೇಶ ಮಾನದಂಡವನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ
+            : ಬದಲಾವಣೆ ಟ್ರ್ಯಾಕಿಂಗ್ ವರ್ಕ್‌ಫ್ಲೋಗಳನ್ನು ನಿಪುಣತೆಯಿಂದ ನಿರ್ವಹಿಸಿ
+    
+    section ಪರಿಸರ ಕಸ್ಟಮೈಜೇಶನ್
+        ವಿಸ್ತರಣೆ ಪರಿಸರ
+            : ಉತ್ಪಾದಕತಾ ವಿಸ್ತರಣೆಗಳನ್ನು ಕಂಡುಹಿಡಿಯಿರಿ
+            : ಅಭಿವೃದ್ಧಿ ಪ್ರాధಾನ್ಯತೆಗಳನ್ನು ಸಂರಚಿಸಿ
+            : ಕಾರ್ಯಕ್ಷಮತೆ ವಿರುದ್ಧ ಕಾರ್ಯತತ್ವವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ
+        
+        ವೃತ್ತಿಪರ ಸಜ್ಜುಗೊಳಿಸುವಿಕೆ
+            : ಸ೦ಗತವಾದ ವರ್ಕ್‌ಫ್ಲೋಗಳನ್ನು ರಚಿಸಿ
+            : ಪುನಃಬಳಕೆಯಾಗುವ ಸಂರಚನೆಗಳನ್ನು ರಚಿಸಿ
+            : ತಂಡ ಮಾನದಂಡಗಳನ್ನು ಸ್ಥಾಪಿಸಿ
+    
+    section ಕೈಗಾರಿಕೆ ಸಿದ್ಧತೆ
+        ಕ್ಲೌಡ್-ಫಸ್ಟ್ ಅಭಿವೃದ್ಧಿ
+            : ದೂರಸ್ಥ ಅಭಿವೃದ್ಧಿ ಅಭ್ಯಾಸಗಳನ್ನು ನಿಪುಣತೆಯಿಂದ ಕೈಗೊಳ್ಳಿ
+            : ಸಹಕಾರ ವರ್ಕ್‌ಫ್ಲೋಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+            : ವೇದಿಕೆ ಸ್ವತಂತ್ರ ಕೌಶಲ್ಯಗಳನ್ನು ನಿರ್ಮಿಸಿ
+        
+        ವೃತ್ತಿಪರ ಅಭ್ಯಾಸಗಳು
+            : ಕೈಗಾರಿಕೆ ಮಾನದಂಡಗಳನ್ನು ಅನುಸರಿಸಿ
+            : ನಿರ್ವಹಣೀಯ ವರ್ಕ್‌ಫ್ಲೋಗಳನ್ನು ರಚಿಸಿ
+            : ತಂಡ ಪರಿಸರಗಳಿಗೆ ಸಿದ್ದರಾಗಿ
+```
+**🎓 ಪದವೀಧರ ಹಂತ**: ನೀವು ಪ್ರಮುಖ ತಂತ್ರಜ್ಞಾನ ಕಂಪನಿಗಳ ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದವರ ಬಳಸಿ ಸಮಾನ ಸಾಧನಗಳು ಮತ್ತು ಕಾರ್ಯಪ್ರವಾಹವನ್ನು ಬಳಸಿಕೊಂಡು ಕ್ಲೌಡ್ ಆಧಾರಿತ ಅಭಿವೃದ್ಧಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ನಿಪುಣವಾಗಿ ಮಾಡಿಕೊಂಡಿದ್ದೀರಿ. ಈ ಕೌಶಲ್ಯಗಳು ಸಾಫ್ಟ್‌ವೇರ್ ಅಭಿವೃದ್ಧಿಯ ಭವಿಷ್ಯವನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತವೆ.
+
+**🔄 ಮುಂದಿನ ಹಂತದ ಸಾಮರ್ಥ್ಯಗಳು**:
+- ಕೋಡ್ಸ್‌ಪೇಸಸ್, GitPod ಮುಂತಾದ ಮುಂದಿನ ತಲೆಮಾರಿನ ಕ್ಲೌಡ್ ಅಭಿವೃದ್ಧಿ ವೇದಿಕೆಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಸಿದ್ಧ
+- ವಿತರಿತ ಅಭಿವೃದ್ಧಿ ತಂಡಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಸಿದ್ಧ
+- ಜಾಗತಿಕವಾಗಿ ಓಪನ್ ಸೋರ್ಸ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಲು ಸಜ್ಜುಗೊಂಡಿದ್ದಾರೆ
+- ಆಧುನಿಕ DevOps ಹಾಗೂ ನಿರಂತರ ಸಮ್ಮಿಲನ ಆಚಾರಗಳನ್ನು ಸ್ಥಾಪಿಸಲು ನೆಲೆಸಿದ ಮೇಲ್ಮೈ
+
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ನಾಸಾ ಬಳಸುವ ಕಟ್ಟಿಕೆಯಾಗಿರುವ ವಿಧಾನವನ್ನು ಹೋಲುವಂತೆ, ಈ ಪ್ರಶಿಕ್ಷಣದಲ್ಲಿ VSCode.dev ಕೌಶಲ್ಯಗಳ ಸಂಯೋಜಿತ ಬಳಕೆಗೆ ಸಂಪೂರ್ಣ ಕೆಲಸದ ಸಮಯ ಪಧ್ಯತಿಯನ್ನು ಅನುಸರಿಸಲಾಗಿದೆ.
+
+**ಉದ್ದೇಶ**: VSCode.dev ನ್ನು ಸಂಪೂರ್ಣ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯವಿಧಾನವನ್ನು ಸ್ಥಾಪಿಸುವ ಮೂಲಕ ಪ್ರಾಮಾಣಿಕತೆಗೆ ತಲುಪಿಸುವುದು.
+
+**ಪ್ರಾಜೆಕ್ಟ್ ಅಗತ್ಯಗಳು:** ಏಜೆಂಟ್ ಮೋಡ್ ಸಹಾಯದಿಂದ ಈ ಕಾರ್ಯಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:
+1. ಈಗಿರುವ ರೆಪೋವನ್ನು ಫರ್ಕ್ ಮಾಡುವುದು ಅಥವಾ ಹೊಸದನ್ನು ಸೃಷ್ಟಿಸುವುದು
+2. HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಪ್ರಾಜೆಕ್ಟ್ ರಚನೆ ಸ್ಥಾಪಿಸುವುದು
+3. ಮೂರು ಅಭಿವೃದ್ಧಿ ಉತ್ತೇಜಕ ವಿಸ್ತಾರಗಳನ್ನು ಸ್ಥಾಪಿಸಿ ಸಂರಚಿಸುವುದು
+4. ವಿವರಣಾತ್ಮಕ ಕಮಿಟ್ ಸಂದೇಶಗಳೊಂದಿಗೆ ಸಂಸ್ಕರಣಾ ನಿಯಂತ್ರಣ ಅಭ್ಯಾಸ
+5. ವೈಶಿಷ್ಟ್ಯ ಶಾಖೆ ಸೃಷ್ಟಿ ಮತ್ತು ಪರಿಷ್ಕರಣೆ ಅಭ್ಯಾಸ
+6. README.md ಕಡತದಲ್ಲಿ ಪ್ರಕ್ರಿಯೆ ಮತ್ತು ಕಲಿತ ವಿಷಯಗಳನ್ನು ದಾಖಲಿಸುವುದು
+
+ಈ ಅಭ್ಯಾಸವು ಎಲ್ಲ VSCode.dev ತತ್ವಗಳನ್ನು ಭವಿಷ್ಯದಲ್ಲಿ ಅಭಿವೃದ್ಧಿ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗೆ ಅನ್ವಯಿಸುವ ಪ್ರಾಯೋಗಿಕ ಕಾರ್ಯಪದ್ಧತಿಯಲ್ಲಿ ಸಂಯೋಜಿಸುತ್ತದೆ.
+
+ಇಲ್ಲಿ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ವಿವರಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ.
+
+## ಅಸೈನ್‌ಮೆಂಟ್
+
+ಈ ಕೌಶಲ್ಯಗಳನ್ನು ಪ್ರಾಯೋಗಿಕ ಪರೀಕ್ಷೆಗೆ ತರುತ್ತೇವೆ! ನಿಮಗಾಗಿ ಒಂದು ಹಸ್ತಪ್ರದರ್ಶನ ಪ್ರಾಜೆಕ್ಟ್ ಇದೆ: [VSCode.dev ಬಳಸಿ ರೆಸ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ಸೃಷ್ಟಿಸಿ](./assignment.md)
+
+ಈ ಅಸೈನ್‌ಮೆಂಟ್ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ವೃತ್ತಿಪರ ರೆಸ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ನಿರ್ಮಿಸುವಂತೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತದೆ. ನೀವು ಎಲ್ಲ VSCode.dev ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸುತ್ತೀರಿ ಮತ್ತು ಅಂತ್ಯಕ್ಕೆ ನೀವು ಒಳ್ಳೆಯ ವೆಬ್‌ಸೈಟ್ ಮತ್ತು ನಿಮ್ಮ ಹೊಸ ಕಾರ್ಯವಿಧಾನದಲ್ಲಿ ದೃಢ ವಿಶ್ವಾಸ ಹೊಂದಿದ್ದೀರಿ.
+
+## ಮುಂದೂಡಿ ಅನ್ವೇಷಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕೌಶಲ್ಯಗಳನ್ನು ಬೆಳೆಸಿಕೊಳ್ಳಿ
+
+ಈಗ ನಿಮಗೆ ಉತ್ತಮ ನೆಲೆ ಇದೆ, ಆದರೆ ಇನ್ನೂ ಅನೇಕ ಕುತೂಹಲಕರ ವಿಷಯಗಳನ್ನು ಅನ್ವೇಷಿಸಬಹುದು! ನಿಮ್ಮ VSCode.dev ಕೌಶಲ್ಯಗಳನ್ನು ಮುಂದಿನ ಮಟ್ಟಿಗೆ ತಳ್ಳಲು ಇಲ್ಲಿ ಕೆಲವು ಸಂಪನ್ಮೂಲಗಳು ಮತ್ತು ಯೋಚನೆಗಳು:
+
+**ಸರಕಾರಿ ಡಾಕ್ಯುಮೆಂಟ್‌ಗಳು ಗರ್ಭಿಡಲು ಮಿಗಿಲಾದವು:**
+- [VSCode ವೆಬ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – ಬ್ರೌಸರ್ ಆಧಾರಿತ ಸಂಪಾದನೆಗೆ ಸಂಪೂರ್ಣ ಮಾರ್ಗದರ್ಶಿ
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) – ಕ್ಲೌಡ್‌ನಲ್ಲಿ ಇನ್ನಷ್ಟು ಶಕ್ತಿ ಬಯಸಿದಾಗ
+
+**ಮುಂದಿನ ಅವಕಾಶಗಳನ್ನು ಪ್ರಯೋಗಿಸಲು ಕುತೂಹಲಕರ ವೈಶಿಷ್ಟ್ಯಗಳು:**
+- **ಕೀಲಿಮಣೆ ಶಾರ್ಟ್‌ಕಟ್‌ಗಳು**: ನೀವು ಕೋಡಿಂಗ್ ನಿಂಜಾ ಎನ್ನಿಸಿಕೊಳ್ಳುವ ಕೀ ಸಂಯೋಜನೆಗಳನ್ನು ಕಲಿಯಿರಿ
+- **ಕಾರ್ಯಪ್ರದೇಶ ಸೆಟ್ಟಿಂಗ್‌ಗಳು**: ವಿಭಿನ್ನ ಪ್ರಾಜೆಕ್ಟ್ ಪ್ರಕಾರಗಳಿಗೆ ವಿಭಿನ್ನ ಪರಿಸರಗಳನ್ನು ಹೊಂದಿಸಿ
+- **ಬಹುಮೂಲ ಪ್ರದೇಶ ಕಾರ್ಯಪ್ರದೇಶಗಳು**: ಒಂದೇ ಸಮಯದಲ್ಲಿ ಹಲವಾರು ರೆಪೋಗಳಿಗೆ ಕೆಲಸ ಮಾಡಿ (ಬಹು ಉಪಯುಕ್ತ!)
+- **ಟರ್ಮಿನಲ್ ಸಂಯೋಜನೆ**: ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲೇ ಕಮಾಂಡ್-ಲೈನ್ ಉಪಕರಣಗಳಿಗೆ ಪ್ರವೇಶ ಹೊಂದಿ
+
+**ಇವುಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಲು ಸಲಹೆಗಳು:**
+- ಕೆಲ ಓಪನ್ ಸೋರ್ಸ್ ಪ್ರಾಜೆಕ್ಟ್ ಗಳಲ್ಲಿ VSCode.dev ಬಳಸಿ ಕೊಡುಗೆ ನೀಡಿ – ಇದು ಕೊಡುಗೆ ನೀಡಲು ಉತ್ತಮ ಮಾರ್ಗ!
+- ನಿಮ್ಮ ಪರಿಪೂರ್ಣ ಸೆಟ್ ಅಪ್ ಕಂಡುಹಿಡಿಯಲು ವಿವಿಧ ವಿಸ್ತಾರಗಳನ್ನು ಪ್ರಯೋಗಿಸಿ
+- ನೀವು ಹೆಚ್ಚಾಗಿ ನಿರ್ಮಿಸುವ ತಾಣಗಳಿಗೆ ಪ್ರಾಜೆಕ್ಟ್ ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ರಚಿಸಿ
+- ಬ್ರಾಂಚಿಂಗ್ ಮತ್ತು ಮರ್ಜಿಂಗ್ ಮುಂತಾದ Git ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ – ತಂಡದ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಈ ಕೌಶಲ್ಯಗಳು ಬಂಗಾರದಷ್ಟು ಮೌಲ್ಯಯುತವೆ
+
+---
+
+**ನೀವು ಬ್ರೌಸರ್ ಆಧಾರಿತ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ನಿಪುಣರಾಗಿದ್ದೀರಿ!** 🎉 ಪೋರ್ಟಬಲ್ ಸಾಧನಗಳ ಆವಿಷ್ಕಾರವು ವಿಜ್ಞಾನಿಗಳನ್ನು ದೂರದ ಸ್ಥಳಗಳಲ್ಲಿಯೂ ಸಂಶೋಧನೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡಿದ್ದಂತೆ, VSCode.dev ಯಾವುದೇ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕ ಹೊಂದಿರುವ ಸಾಧನದಿಂದ ವೃತ್ತಿಪರ ಕೋಡಿಂಗ್ ಮಾಡಿಕೊಳ್ಳಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ.
+
+ಈ ಕೌಶಲ್ಯಗಳು ಪ್ರಸ್ತುತ ಉದ್ಯಮದ ಪ್ರವರ್ತನೆಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತವೆ – ಅನೇಕ ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದವರು ತಮ್ಮ ಹಗಲು ಕಾರ್ಯದಲ್ಲಿ ಕ್ಲೌಡ್ ಆಧಾರಿತ ಅಭಿವೃದ್ಧಿ ಪರಿಸರಗಳನ್ನು ಬಳಸುತ್ತಾರೆ, ಇದು ಲವಚಿಕತೆ ಮತ್ತು ಸುಲಭ ಪ್ರವೇಶದ ಕಾರಣವಾಗಿ. ನೀವು ವೈಯಕ್ತಿಕ ಪ್ರಾಜೆಕ್ಟ್ ಗಳಿಂದ ದೊಡ್ಡ ತಂಡಗಳ ಸಹಯೋಗದವರೆಗೆ ವ್ಯಾಪಿಸುವ workflows ಅನ್ನು ಕಲಿತಿದ್ದೀರಿ.
+
+ನಿಮ್ಮ ಮುಂದಿನ ಅಭಿವೃದ್ಧಿ ಪ್ರಾಜೆಕ್ಟ್ ಗೆ ಈ ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸಿ! 🚀
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಡಿಸ್ಕ್ಲೇಮರ್**:  
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯನ್ನು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದು ಎಂದು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಸ್ತಾವೇಜಿನನ್ನೇ ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ अनುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆ ನಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪಾಗು ಎೖ ಅಥವಾ ತಪ್ಪುನಿರ್ದೇಶನಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರರಾಗುವುದಿಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/kn/8-code-editor/1-using-a-code-editor/assignment.md

@@ -0,0 +1,591 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "effe56ba51c38d7bdfad1ea38288666b",
+  "translation_date": "2026-01-08T13:24:34+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "kn"
+}
+-->
+# VSCode.dev ಬಳಸಿ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ರಚಿಸು
+
+ನಿಮ್ಮ ವೃತ್ತಿಜീവನದ ಸಾಧ್ಯತೆಗಳನ್ನು ಪರಿವರ್ತಿಸಿ, ನಿಮ್ಮ ಕನಿವು ಮತ್ತು ಅನುಭವವನ್ನು ಆಂತರಿಕ, ಆಧುನಿಕ ಮಾದರಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವ ವೃತ್ತಿಪರ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ನಿರ್ಮಿಸುವ ಮೂಲಕ. ಪರಂಪರাগত PDFಗಳನ್ನು ಕಳುಹಿಸುವ ಬದಲು, ನೇಮಕಾತಿದಾರರಿಗೆ ನಿಮ್ಮ ಅರ್ಹತೆಗಳು ಮತ್ತು ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ತೋರಿಸುವ ಸುಂದರ, ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವೆಬ್‌ಸೈಟ್ ಒದಗಿಸುವುದನ್ನು ಕಲ್ಪಿಸಿ.
+
+ಈ ಕೈಗೊಳ್ಳುವ ಕೆಲಸವು ನಿಮ್ಮ ಎಲ್ಲಾ VSCode.dev ಕೌಶಲ್ಯಗಳನ್ನು ಅನ್ವಯಿಕೆಯಲ್ಲಿಟ್ಟು, ನಿಮ್ಮ ವೃತ್ತಿಜೀವನಕ್ಕಾಗಿ ನಿಜವಾಗಿಯೂ ಉಪಯುಕ್ತವಾದ ಏನನ್ನಾದರೂ ನಿರ್ಮಿಸುವ ಅವಕಾಶ ನೀಡುತ್ತದೆ. ನೀವು ಸಂಪೂರ್ಣ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯಪ್ರವಾಹವನ್ನು ಅನುಭವಿಸುವಿರಿ – ರೆಪೊ ಜಂಕ್ಷನ್ ಸೃಷ್ಟಿ ನಿಂದ ನೈಜಪ್ಪ ಕ್ಕೆ – ಅದು ಎಲ್ಲವೂ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಒಳಗೆ.
+
+ಈ ಪ್ರಾಜೆಕ್ಟ್ ಪೂರ್ಣಗೊಳಿಸುವ ಮೂಲಕ, ನೀವು ವೃತ್ತಿಪರ ಆನ್ಲೈನ್ ​​ಹಾಜರಾತಿ ಹೊಂದಿರುವಿರಿ, ಅದನ್ನು ಸುಲಭವಾಗಿ ಭವಿಷ್ಯದ ಉದ್ಯೋಗಕ್ಕೆ ಹಂಚಿಕೊಳ್ಳಬಹುದು, ನಿಮ್ಮ ಕೌಶಲ್ಯ ಬೆಳವಣಿಗೆಗೆ ಅನುಗುಣವಾಗಿ ನವೀಕರಿಸಬಹುದು ಮತ್ತು ವೈಯಕ್ತಿಕ ಬ್ರಾಂಡ್‌ಗೆ ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು. ಇದು ವಾಸ್ತವ ಜಗತ್ತಿನ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ತೋರಿಸುವ ಪ್ರಾಯೋಗಿಕ ಪ್ರಾಜೆಕ್ಟಿನಷ್ಟೇ.
+
+## ಕಲಿಕೆಯ ಉದ್ದೇಶಗಳು
+
+ಈ ಕಾರ್ಯವನ್ನು ಮುಗಿಸಿದ ನಂತರ, ನೀವು ಸಾಧ್ಯವಾಗುವುದು:
+
+- **VSCode.dev ಬಳಸಿ** ಸಂಪೂರ್ಣ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಪ್ರಾಜೆಕ್ಟ್ ರಚಿಸಿ ಮತ್ತು ನಿರ್ವಹಿಸಿ
+- **ಸಾಮರಸ್ಯಪೂರ್ಣ HTML ಅಂಶಗಳನ್ನು** ಬಳಸಿ ವೃತ್ತಿಪರ ವೆಬ್‌ಸೈಟ್ ರಚಿಸಿ
+- **ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸಗಳಿಗೆ** ಆಧುನಿಕ CSS ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಅಳವಡಿಸಿ
+- **ಮೂಲ ವೆಬ್ ತಂತ್ರಜ್ಞಾನಗಳ** ಮುಖಾಂತರ ಅಂತರ್‌ಕ್ರಿಯಾತ್ಮಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಜಾರಿಗೊಳಿಸಿ
+- **ಹಂಚಿಕೊಳ್ಳಬಹುದಾದ URL ಮೂಲಕ ಲೈವ್ ವೆಬ್‌ಸೈಟ್** ಅನ್ನು ನಿಯೋಜಿಸಿ
+- ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆ ಅವಧಿಯಲ್ಲಿ **ವರ್ಷನ್ ನಿಯಂತ್ರಣ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು** ಪ್ರದರ್ಶಿಸಿ
+
+## ಪೂರ್ವಶರತ್ತುಗಳು
+
+ಈ ಕಾರ್ಯವನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ನೀವು ಈ ಕೆಳಕಂಡವುಳ್ಳದ್ದಾಗಿರಬೇಕು:
+
+- GitHub ಖಾತೆ (ಬೇಕಾದರೆ [github.com](https://github.com/) ನಲ್ಲಿ ಸೃಷ್ಟಿಸಿ)
+- VSCode.dev ಪಾಠಗಳಲ್ಲಿ ಇಂಟರ್ಫೇಸ್ ನಾವಿಗೇಶನ್ ಮತ್ತು ಮೂಲ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿರಬೇಕು
+- HTML ರಚನೆ ಮತ್ತು CSS ಶೈಲಿಯ ಮೂಲ ಮನಸ್ಸು
+
+## ಪ್ರಾಜೆಕ್ಟ್ ಸೆಟಪ್ ಮತ್ತು ರೆಪೊ ಸೃಷ್ಟಿ
+
+ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಆಧಾರವನ್ನು ಸ್ಥಾಪಿಸುವುದರಿಂದ ಪ್ರಾರಂಭಿಸೋಣ. ಈ ಪ್ರಕ್ರಿಯೆಯು ನೈಜ ಜಗತ್ತಿನ ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯಪ್ರವಾಹಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು ಸರಿಯಾದ ರೆಪೊ ಇನಿಷಿಯಲೈಜೇಶನ್ ಮತ್ತು ರಚನೆ ಯೋಜನೆಯಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ.
+
+### ಹಂತ 1: ನಿಮ್ಮ GitHub ರೆಪೊ ಸೃಷ್ಟಿಸಿ
+
+ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಸರಿಯಾಗಿ ಸಂಘಟಿತವಾಗಿದ್ದು, ವರ್ಷನ್ ನಿಯಂತ್ರಿತವಾಗಿರಲು ನೀವೇನೂ ನಿಗದಿಪಡಿಸಿದ ರೆಪೊ ತೆಗೆಯಿರಿ.
+
+1. [GitHub.com](https://github.com) ಗೆ ಹೋಗಿ ಮತ್ತು ನಿಮ್ಮ ಖಾತೆಯಲ್ಲಿ ಲಾಗಿನ್ ಆಗಿ  
+2. ಮೇಲುಭಾಗದಲ್ಲಿರುವ ಹಸಿರು "New" ಬಟನ್ ಅಥವಾ "+" ಬೆಂಬಲಿಸುವ ಐಕಾನ್ ಕ್ಲಿಕ್ ಮಾಡಿ  
+3. ನಿಮ್ಮ ರೆಪೊಗೆ `my-resume` ಎಂದು ಹೆಸರು ನೀಡಿರಿ (ಅಥವಾ `john-smith-resume` ಮುಂತಾದ ವೈಯಕ್ತಿಕ ಹೆಸರು ಆಯ್ಕೆಮಾಡಿ)  
+4. "Professional resume website built with HTML and CSS" ಎಂಬ ಸರಳ ವಿವರಣೆಯನ್ನು ಸೇರಿಸಿ  
+5. ನಿಮ್ಮ ರೆಜ್ಯೂಮೆ ಭವಿಷ್ಯದ ಉದ್ಯೋಗಿಗಳಿಗೆ ಲಭ್ಯವಾಗುವಂತೆ "Public" ಆಯ್ಕೆ ಮಾಡಿ  
+6. ಪ್ರಾಥಮಿಕ ಪ್ರಾಜೆಕ್ಟ್ ವಿವರಣೆಗಾಗಿ "Add a README file" ಅನ್ನು ಪರಿಶೀಲಿಸಿ  
+7. ಸೆಟಪ್ ಪೂರ್ಣಗೊಳಿಸಲು "Create repository" ಕ್ಲಿಕ್ ಮಾಡಿ
+
+> 💡 **ರೆಪೊ ಹೆಸರಿಸುವ ಸಲಹೆ**: ಪ್ರಾಜೆಕ್ಟಿನ ಉದ್ದೇಶವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ತೋರಿಸುವ ವಿವರಣಾತ್ಮಕ, ವೃತ್ತಿಪರ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ. ಇದು ಉದ್ಯೋಗಿಗಳಿಗೆ ಹಂಚಿಕೊಳ್ಳುವಾಗ ಅಥವಾ ಪೋರ್ಟ್‌ಫೋಲಿಯೋ ಪರಿಶೀಲನೆಯಲ್ಲಿ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+### ಹಂತ 2: ಪ್ರಾಜೆಕ್ಟ್ ರಚನೆ ಆರಂಭಿಸಿ
+
+VSCode.dev ಕಡಿಮೆಸ್‌ಮ್ಮುಖವಾಗಿ ಕಡಾ ಫೈಲ್ ಇರದಿದ್ದರೆ ರೆಪೊ ತೆರೆಯುವುದಿಲ್ಲ ಎಂಬ ಕಾರಣದಿಂದ, ಮುಖ್ಯ HTML ಫೈಲ್ ಅನ್ನು ನೇರ ಗಿಥಬ್‌ನಲ್ಲಿ ರಚಿಸೋಣ, ನಂತರ ವೆಬ್ ಸಂಪಾದಕಕ್ಕೆ ಬದಲಾಯಿಸೋಣ.
+
+1. ನಿಮ್ಮ ಹೊಸ ರೆಪೊದಲ್ಲಿ "creating a new file" ಕೊಂಡಿ ಕ್ಲಿಕ್ ಮಾಡಿ  
+2. ಫೈಲ್ ಹೆಸರಾಗಿ `index.html` ಟೈಪ್ ಮಾಡಿ  
+3. ಈ ಪ್ರಾಥಮಿಕ HTML ರಚನೆಯನ್ನು ಸೇರಿಸಿ:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Name - Professional Resume</title>
+</head>
+<body>
+    <h1>Your Name</h1>
+    <p>Professional Resume Website</p>
+</body>
+</html>
+```
+  
+4. "Add initial HTML structure" ಎಂಬ ಕಮಿಟ್ ಸಂದೇಶವನ್ನು ಬರೆಯಿರಿ  
+5. ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸಲು "Commit new file" ಕ್ಲಿಕ್ ಮಾಡಿ
+
+![GitHub ನಲ್ಲಿ ಪ್ರಾಥಮಿಕ ಫೈಲ್ ರಚನೆ](../../../../translated_images/new-file-github.com.c886796d800e8056.kn.png)
+
+**ಈ ಆರಂಭಿಕ ಸೆಟಪ್ ಏನನ್ನು ಸಾಧಿಸುತ್ತದೆ:**
+- ಸಮಾಸ್ಯಪೂರ್ಣ HTML5 ಡಾಕ್ಯುಮೆಂಟ್ ರಚನೆ ಉಂಟುಮಾಡುತ್ತದೆ
+- ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸಕ್ಕೆ.viewport ಮೆಟ ಟ್ಯಾಗ್ ಸೇರಿದೆ
+- ಬ್ರೌಸರ್ ಚಿಟ್ಟೆಗಳಲ್ಲಿ ಕಾಣುವ ವಿವರಣಾತ್ಮಕ ಪುಟ ಶೀರ್ಷಿಕೆ ಹಸ್ತಾಂತರಿಸುತ್ತದೆ
+- ವೃತ್ತಿಪರ ವಿಷಯ ವ್ಯವಸ್ಥೆಗೆ ಆಧಾರ ಸಿದ್ಧಪಡಿಸುತ್ತದೆ
+
+## VSCode.dev ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಿಕೆ
+
+ನಿಮ್ಮ ರೆಪೊ ಆಧಾರ ಸ್ಥಾಪನೆಯಾದ ನಂತರ, VSCode.dev ಗೆ ಬದಲಾಯಿಸಿ ಮುಖ್ಯ ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯಮಾಡೋಣ. ಈ ವೆಬ್ ಆಧಾರಿತ ಸಂಪಾದಕವು ವೃತ್ತಿಪರ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಬೇಕಾದ ಎಲ್ಲ ಸಾಧನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
+
+### ಹಂತ 3: ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ VSCode.dev ನಲ್ಲಿ ತೆರೆಯಿರಿ
+
+1. ಹೊಸ ಬ್ರೌಸರ್ ಟ್ಯಾಬ್‌ನಲ್ಲಿ [vscode.dev](https://vscode.dev) ಗೆ ಭೇಟಿ ನೀಡಿ  
+2. ಸ್ವಾಗತ ಪರದೆಯಾದಲ್ಲಿ "Open Remote Repository" ಕ್ಲಿಕ್ ಮಾಡಿ  
+3. ಗಿಥಬ್‌ನಿಂದ ನಿಮ್ಮ ರೆಪೊ URL ನಕಲಿಸಿ ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರಕ್ಕೆ ಅಂಟಿಸಿ  
+
+   ರೂಪ: `https://github.com/your-username/my-resume`  
+   
+   *`your-username` ಅನ್ನು ನಿಮ್ಮ ನಿಜವಾದ GitHub ಬಳಕೆದಾರಹೆಸರಿನಿಂದ ಬದಲಿಸಿ*
+
+4. ಪ್ರಾಜೆಕ್ಟ್ ಲೋಡ್ಗಾಗಿ Enter ಒತ್ತಿರಿ
+
+✅ **ಯಶಸ್ಸಿನ ಸೂಚನೆ**: ಎಕ್ಸ್ಪ್ಲೋರರ್ ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೈಲುಗಳು ಮತ್ತು `index.html` ಮುಖ್ಯ ಸಂಪಾದಕ ಪ್ರದೇಶದಲ್ಲಿ ತೋರಬೇಕು.
+
+![VSCode.dev ನಲ್ಲಿ ಪ್ರಾಜೆಕ್ಟ್ ಲೋಡ್](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.kn.png)
+
+**ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ನೀವು ಕಾಣುವವು:**
+- **ಎಕ್ಸ್ಪ್ಲೋರರ್ ಸೈಡ್‌ಬಾರ್**: ರೆಪೊ ಫೈಲುಗಳು ಮತ್ತು ಫೋಲ್ಡರ್ ರಚನೆಯನ್ನು ತೋರಿಸುತ್ತದೆ  
+- **ಸಂಪಾದಕ ಪ್ರದೇಶ**: ಆರಿಸಿದ ಫೈಲಿನ ವಿಷಯ ಸಂಪಾದನೆಗೆ ತೋರಿಸುತ್ತದೆ  
+- **ಕ್ರಿಯಾತ್ಮಕ ಬಾರ್**: ಮೂಲ ನಿಯಂತ್ರಣ ಹಾಗೂ ವಿಸ್ತಾರಗಳಲ್ಲಿನ ಪ್ರವೇಶ ನೀಡುತ್ತದೆ  
+- **ಸ್ಥಿತಿ ಬಾರ್**: ಸಂಪರ್ಕ ಸ್ಥಿತಿಗೆ ಮತ್ತು ಪ್ರಸ್ತುತ ಶಾಖೆ ಮಾಹಿತಿ ನೀಡುತ್ತದೆ  
+
+### ಹಂತ 4: ನಿಮ್ಮ ರೆಜ್ಯೂಮ್ ವಿಷಯ ನಿರ್ಮಿಸಿ
+
+`index.html` ನಲ್ಲಿ ಇರುವ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವನ್ನು ಸಂಪೂರ್ಣ ರೆಜ್ಯೂಮ್ ವಿನ್ಯಾಸದಿಂದ ಬದಲಿಸಿ. ಈ HTML ನಿಮ್ಮ ಅರ್ಹತೆಗಳ ವೃತ್ತಿಪರ ಪ್ರದರ್ಶನಕ್ಕೆ ಆಧಾರ.
+
+<details>
+<summary><b>ಸಂಪೂರ್ಣ HTML ರೆಜ್ಯೂಮ್ ರಚನೆ</b></summary>
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="style.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <title>Your Name - Professional Resume</title>
+</head>
+<body>
+    <header id="header">
+        <h1>Your Full Name</h1>
+        <hr>
+        <p class="role">Your Professional Title</p>
+        <hr>
+    </header>
+    
+    <main>
+        <article id="mainLeft">
+            <section>
+                <h2>CONTACT</h2>
+                <p>
+                    <i class="fa fa-envelope" aria-hidden="true"></i>
+                    <a href="mailto:your.email@domain.com">your.email@domain.com</a>
+                </p>
+                <p>
+                    <i class="fab fa-github" aria-hidden="true"></i>
+                    <a href="https://github.com/your-username">github.com/your-username</a>
+                </p>
+                <p>
+                    <i class="fab fa-linkedin" aria-hidden="true"></i>
+                    <a href="https://linkedin.com/in/your-profile">linkedin.com/in/your-profile</a>
+                </p>
+            </section>
+            
+            <section>
+                <h2>SKILLS</h2>
+                <ul>
+                    <li>HTML5 & CSS3</li>
+                    <li>JavaScript (ES6+)</li>
+                    <li>Responsive Web Design</li>
+                    <li>Version Control (Git)</li>
+                    <li>Problem Solving</li>
+                </ul>
+            </section>
+            
+            <section>
+                <h2>EDUCATION</h2>
+                <h3>Your Degree or Certification</h3>
+                <p>Institution Name</p>
+                <p>Start Date - End Date</p>
+            </section>
+        </article>
+        
+        <article id="mainRight">
+            <section>
+                <h2>ABOUT</h2>
+                <p>Write a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach.</p>
+            </section>
+            
+            <section>
+                <h2>WORK EXPERIENCE</h2>
+                <div class="job">
+                    <h3>Job Title</h3>
+                    <p class="company">Company Name | Start Date – End Date</p>
+                    <ul>
+                        <li>Describe a key accomplishment or responsibility</li>
+                        <li>Highlight specific skills or technologies used</li>
+                        <li>Quantify impact where possible (e.g., "Improved efficiency by 25%")</li>
+                    </ul>
+                </div>
+                
+                <div class="job">
+                    <h3>Previous Job Title</h3>
+                    <p class="company">Previous Company | Start Date – End Date</p>
+                    <ul>
+                        <li>Focus on transferable skills and achievements</li>
+                        <li>Demonstrate growth and learning progression</li>
+                        <li>Include any leadership or collaboration experiences</li>
+                    </ul>
+                </div>
+            </section>
+            
+            <section>
+                <h2>PROJECTS</h2>
+                <div class="project">
+                    <h3>Project Name</h3>
+                    <p>Brief description of what the project accomplishes and technologies used.</p>
+                    <a href="#" target="_blank">View Project</a>
+                </div>
+            </section>
+        </article>
+    </main>
+</body>
+</html>
+```
+</details>
+
+**ಅನುಕೂಲಪಡಿಸುವ ಮಾರ್ಗದರ್ಶನ:**
+- ಎಲ್ಲಾ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯಗಳನ್ನು ನಿಮ್ಮ ನಿಜವಾದ ಮಾಹಿತಿಯಿಂದ ಬದಲಾಯಿಸಿ  
+- ನಿಮ್ಮ ಅನುಭವ ಮಟ್ಟ ಮತ್ತು ವೃತ್ತಿ ದೃಷ್ಟಿಕೋನದ ಪ್ರಕಾರ ವಿಭಾಗಗಳನ್ನು ಹೊಂದಿಸಿ  
+- ಅವಶ್ಯಕತೆ ಇದ್ದರೆ ವಿಭಾಗಗಳನ್ನು ಸೇರಿಸಿ ಅಥವಾ ತೆಗೆದುಹಾಕಿ (ಉದಾಹರಣೆಗೆ, ಪ್ರಮಾಣಪತ್ರಗಳು, ಸ್ವಯಂಸೇವಕ ಕೆಲಸ, ಭಾಷೆಗಳು)  
+- ನಿಮ್ಮ ನಿಜವಾದ ಪ್ರೊಫೈಲ್‌ಗಳು ಮತ್ತು ಪ್ರಾಜೆಕ್ಟುಗಳಿಗೆ ಲಿಂಕ್ ಸೇರಿಸಿ  
+
+### ಹಂತ 5: ಬೆಂಬಲಿಸಿದ ಫೈಲುಗಳನ್ನು ರಚಿಸಿ
+
+ವೃತ್ತಿಪರ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ ಸರಕಾರವಾದ ಫೈಲ್ ರಚನೆ ಅಗತ್ಯ. ಪೂರ್ಣ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಬೇಕಾಗುವ CSS ಶೈಲಿ ಮತ್ತು ಕಾಂಫಿಗ್ ನಕಲನ್ನು ಸೃಷ್ಟಿಸಿ.
+
+1. ಎಕ್ಸ್ಪ್ಲೋರರ್ ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್ ಹೆಸರಿನ ಮೇಲೆ ಹೋವರ ಮಾಡಿ  
+2. ತೋರಾದ "New File" ಐಕಾನ್ (📄+) ಕ್ಲಿಕ್ ಮಾಡಿ  
+3. ಈ ಫೈಲ್‌ಗಳನ್ನು ಒಂದೊಂದಾಗಿ ರಚಿಸಿ:  
+   - `style.css` (ಶೈಲಿ ಮತ್ತು ವಿನ್ಯಾಸಕ್ಕಾಗಿ)  
+   - `codeswing.json` (ಪ್ರಿವ್ಯೂ ವಿಸ್ತರಣೆಯ ಕಾಂಫಿಗ್)  
+
+**CSS ಫೈಲ್ (`style.css`) ರಚಿಸುವುದು:**
+
+<details>
+<summary><b>ವೃತ್ತಿಪರ CSS ಶೈಲಿ</b></summary>
+
+```css
+/* Modern Resume Styling */
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 20px;
+    color: #333;
+    background-color: #f9f9f9;
+}
+
+/* Header Styling */
+header {
+    text-align: center;
+    margin-bottom: 3em;
+    padding: 2em;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    font-size: 3em;
+    letter-spacing: 0.1em;
+    margin-bottom: 0.2em;
+    font-weight: 300;
+}
+
+.role {
+    font-size: 1.3em;
+    font-weight: 300;
+    margin: 1em 0;
+}
+
+/* Main Content Layout */
+main {
+    display: grid;
+    grid-template-columns: 35% 65%;
+    gap: 3em;
+    margin-top: 3em;
+    background: white;
+    padding: 2em;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Typography */
+h2 {
+    font-size: 1.4em;
+    font-weight: 600;
+    margin-bottom: 1em;
+    color: #667eea;
+    border-bottom: 2px solid #667eea;
+    padding-bottom: 0.3em;
+}
+
+h3 {
+    font-size: 1.1em;
+    font-weight: 600;
+    margin-bottom: 0.5em;
+    color: #444;
+}
+
+/* Section Styling */
+section {
+    margin-bottom: 2.5em;
+}
+
+#mainLeft {
+    border-right: 1px solid #e0e0e0;
+    padding-right: 2em;
+}
+
+/* Contact Links */
+section a {
+    color: #667eea;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+section a:hover {
+    color: #764ba2;
+    text-decoration: underline;
+}
+
+/* Icons */
+i {
+    margin-right: 0.8em;
+    width: 20px;
+    text-align: center;
+    color: #667eea;
+}
+
+/* Lists */
+ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+li {
+    margin: 0.5em 0;
+    padding: 0.3em 0;
+    position: relative;
+}
+
+li:before {
+    content: "▸";
+    color: #667eea;
+    margin-right: 0.5em;
+}
+
+/* Work Experience */
+.job, .project {
+    margin-bottom: 2em;
+    padding-bottom: 1.5em;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.company {
+    font-style: italic;
+    color: #666;
+    margin-bottom: 0.5em;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    main {
+        grid-template-columns: 1fr;
+        gap: 2em;
+    }
+    
+    #mainLeft {
+        border-right: none;
+        border-bottom: 1px solid #e0e0e0;
+        padding-right: 0;
+        padding-bottom: 2em;
+    }
+    
+    h1 {
+        font-size: 2.2em;
+    }
+    
+    body {
+        padding: 10px;
+    }
+}
+
+/* Print Styles */
+@media print {
+    body {
+        background: white;
+        color: black;
+        font-size: 12pt;
+    }
+    
+    header {
+        background: none;
+        color: black;
+        box-shadow: none;
+    }
+    
+    main {
+        box-shadow: none;
+    }
+}
+```
+</details>
+
+**ಕಾಂಫಿಗ್ ಫೈಲ್ (`codeswing.json`) ರಚಿಸುವುದು:**
+
+```json
+{
+    "scripts": [],
+    "styles": []
+}
+```
+  
+**CSS ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+- ಪ್ರತ್ಯುತ್ತರ, ವೃತ್ತಿಪರ ವಿನ್ಯಾಸಕ್ಕೆ CSS Grid ಉಪಯೋಗಿಸಲಾಗಿದೆ  
+- ಆಧುನಿಕ ಬಣ್ಣ ಯೋಜನೆಗಳನ್ನು ಗ್ರೇಡಿಯಂಟ್ ಹೆಡರ್‌ಗಳೊಂದಿಗೆ ಅನುಷ್ಠಾನ ಮಾಡಿದೆಯಾದುದು  
+- ಮುಚ್ಚಳ ಪರಿಣಾಮಗಳು ಮತ್ತು ನಿಸ್ತಾರ ಫ್ಲೋ ತರಂಗಗಳು ಅಳವಡಿಸಲಾಗಿದೆ  
+- ಎಲ್ಲಾ ಸಾಧನಗಳ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸವನ್ನು ಒದಗಿಸುತ್ತದೆ  
+- PDF ರಚನೆಗಾಗಿ ಮುದ್ರಣ ಸ್ನೇಹಿ ಶೈಲಿಗಳು ಸೇರಿಸಲಾಗಿದೆ  
+
+### ಹಂತ 6: ವಿಸ್ತರಣೆಗಳನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ
+
+ವಿಸ್ತರಣೆಗಳು ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಅನುಭವವನ್ನು ಮೆಚ್ಚಿಸುವಂತೆ, ಲೈವ್ ಪ್ರಿವ್ಯೂ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಮತ್ತು ಉತ್ತಮ ಕಾರ್ಯಪ್ರವಾಹ ಸಾಧನಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. CodeSwing ವಿಸ್ತರಣೆಯನ್ನು ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಪ್ರಾಜೆಕ್ಟ್ಗಾಗಿ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
+
+**CodeSwing ವಿಸ್ತರಣೆ ಸ್ಥಾಪನೆ:**
+
+1. ಕ್ರಿಯಾತ್ಮಕ ಬಾರ್ ಒಳಗಿನ ವಿಸ್ತರಣೆಗಳ ಐಕಾನ್ (🧩) ಕ್ಲಿಕ್ ಮಾಡಿ  
+2. ಮಾರುಕಟ್ಟೆ ಹುಡುಕು ಬಾಕ್ಸ್‌ನಲ್ಲಿ "CodeSwing" ಹುಡುಕಿ  
+3. ಹುಡುಕುವ ಫಲಿತಾಂಶಗಳಿಂದ CodeSwing ವಿಸ್ತರಣೆಯನ್ನು ಆಯ್ಕೆಮಾಡಿ  
+4. ನೀಲ ಬಣ್ಣದ "Install" ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ
+
+![CodeSwing ವಿಸ್ತರಣೆ ಸ್ಥಾಪನೆ](../../../../8-code-editor/images/install-extension.gif)
+
+**CodeSwing ಏನು ಒದಗಿಸುತ್ತದೆ:**
+- ನೀವು ತಿದ್ದುಪಡಿಗಳನ್ನೂ ಮಾಡುತ್ತಿರುವಂತೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ನೈಜಕಾಲದ ಮುಂದೆಲೇಟನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ  
+- ಕೈಬಿಟ್ಟ_REFRESH ಅವಶ್ಯಕತೆ ಇಲ್ಲದೆ ನೈಜಕಾಲದಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ತೋರಿಸುತ್ತದೆ  
+- HTML, CSS ಮತ್ತು JavaScript ಸೇರಿದಂತೆ ಬೃಹತ್ ಫೈಲ್ ಪ್ರಕಾರಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ  
+- ಒಟ್ಟುಗೂಡಿಸಿದ ಅಭಿವೃದ್ಧಿ ಪರಿಸರ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ  
+
+**ಸ್ಥಾಪನೆಯಾದ ನಂತರ ತಕ್ಷಣದ ಫಲಿತಾಂಶಗಳು:**
+CodeSwing ಸ್ಥಾಪಿತವಾದ ಮೇಲೆ, ನಿಮ್ಮ ಸಂಪಾದಕದಲ್ಲಿ ನಿಮಗೆ ನಿಮ್ಮ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟಿನ ಲೈವ್ ಪ್ರಿವ್ಯೂ ತೋರಿಸಲಾಗುತ್ತದೆ. ಇದು ನೀವು ಮಾಡಿದ ಬದಲಾವಣೆಗಳನ್ನು ತಕ್ಷಣ ಹೇಗಿರುವುದೆಂದು ನೋಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+![CodeSwing ಲೈವ್ ಪ್ರಿವ್ಯೂ ತೋರಣೆ](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.kn.png)
+
+**ಮೇಲ್ನೋಟ ಹೊಂದಿದ ಇಂಟರ್ಫೇಸ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ:**
+- ** ಸ್ಪ್ಲಿಟ್ ವೀಕ್ಷಣೆ**: ಒಂದೊಂದರ ಬದಿಯಲ್ಲಿ ನಿಮ್ಮ ಕೋಡ್ ಮತ್ತು ಮತ್ತೊಂದರ ಬದಿಯಲ್ಲಿ ಲೈವ್ ಪ್ರಿವ್ಯೂ  
+- **ನೈಜಕಾಲದ ನವೀಕರಣಗಳು**: ಟೈಪ್ ಮಾಡಲು ತಕ್ಷಣವೇ ಬದಲಾವಣೆಗಳನ್ನ ತೋರಿಸುತ್ತದೆ  
+- **ಅಂತರ್‌ಕ್ರಿಯಾತ್ಮಕ ಪ್ರಿವ್ಯೂ**: ಲಿಂಕ್‌ಗಳನ್ನು ಮತ್ತು ಸಂವಹನಗಳನ್ನು ಪರೀಕ್ಷಿಸಬಹುದು  
+- **ಮೊಬೈಲ್ ಸಿಮ್ಯುಲೇಶನ್**: ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸವನ್ನು ಪರೀಕ್ಷಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ  
+
+### ಹಂತ 7: ವರ್ಷನ್ ನಿಯಂತ್ರಣ ಮತ್ತು ಪ್ರಕಟಣೆ
+
+ನಿಮ್ಮ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ಸಂಪೂರ್ಣವಾದ ನಂತರ, Git ಬಳಸಿ ನಿಮ್ಮ ಕೆಲಸದ ಸುದ್ದಿಯನ್ನು ಉಳಿಸಿ ಮತ್ತು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರಿಸಿ.
+
+**ನಿಮ್ಮ ಬದಲಾವಣೆಗಳನ್ನು ಕಮಿಟ್ ಮಾಡುವುದು:**
+
+1. ಕ್ರಿಯಾತ್ಮಕ ಬಾರ್‌ನಲ್ಲಿ ಮೂಲ ನಿಯಂತ್ರಣ ಐಕಾನ್ (🌿) ಕ್ಲಿಕ್ ಮಾಡಿ  
+2. "Changes" ವಿಭಾಗದಲ್ಲಿ ನೀವು ರಚಿಸಿದ ಮತ್ತು ಸಾದರಿಸಿದ ಎಲ್ಲಾ ಫೈಲುಗಳನ್ನು ಪರಿಶೀಲಿಸಿ  
+3. ಪ್ರತಿಯೊಂದು ಫೈಲ್ ಬಳಿ ಇರುವ "+" ಐಕಾನ್ ಕ್ಲಿಕ್ ಮಾಡಿ ಶೇಡ್ ಮಾಡಿ  
+4. ವಿವರಣಾತ್ಮಕ ಕಮಿಟ್ ಸಂದೇಶವನ್ನು ಬರೆಯಿರಿ, ಉದಾಹರಣೆಗೆ:  
+   - "Add complete resume website with responsive design"  
+   - "Implement professional styling and content structure"  
+5. ಕಮಿಟ್ ಮಾಡಿ ಪುಷ್ ಮಾಡಲು ಟಿಕ್ ಚಿಹ್ನೆ (✓) ಕ್ಲಿಕ್ ಮಾಡಿ
+
+**ಫಲಪ್ರದ ಕಮಿಟ್ ಸಂದೇಶ ಉದಾಹರಣೆಗಳು:**
+- "Add professional resume content and styling"  
+- "Implement responsive design for mobile compatibility"  
+- "Update contact information and project links"
+
+> 💡 **ವೃತ್ತಿಪರ ಸಲಹೆ**: ಒಳ್ಳೆಯ ಕಮಿಟ್ ಸಂದೇಶಗಳು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಬೆಳವಣಿಗೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಮತ್ತು ವಿವರಕ್ಕೆ ಮನಸ್ಸು ಕೊಡುತ್ತಿದ್ದೀರಂತೆ ತೋರುವುದಕ್ಕೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ – ಇದು ಉದ್ಯೋಗಿಗಳಿಗೆ ಹೆಚ್ಚಾಗಿ ಮೆಚ್ಚುಗೆ ದೊರಕಿಸುವ ಗುಣ.
+
+**ನಿಮ್ಮ ಪ್ರಕಟಿತ ಸೈಟ್‌ಗೆ ಪ್ರವೇಶ:**
+ಒಮ್ಮೆ ಕಮಿಟ್ ಮಾಡಿದ ನಂತರ, ನಿಮ್ಮ ಗಿಥಬ್ ರೆಪೊಗೆ ಹ್ಯಾಂಬರ್ಗರ್ ಮೆನು (☰) ದ್ವಾರಾ ಮರುಹೋಗಬಹುದು. ನಿಮ್ಮ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ಈಗ ವರ್ಷನ್ ನಿಯಂತ್ರಿತ ಮತ್ತು ನಿಯೋಜನೆ ಅಥವಾ ಹಂಚಿಕೆಯ ಹಕ್ಕು ಇರುವಂತಾಗಿದೆ.
+
+## ಫಲಿತಾಂಶಗಳು ಮತ್ತು ಮುಂದಿನ ಹಂತಗಳು
+
+**ಅಭಿನಂದನೆಗಳು! 🎉** ನೀವು ಯಶಸ್ವಿಯಾಗಿ VSCode.dev ಬಳಸಿ ವೃತ್ತಿಪರ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ರಚಿಸಿದ್ದೀರಿ. ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ತೋರಿಸುವುದೇ:
+
+**ತಂತ್ರಜ್ಞಾನ ಕೌಶಲ್ಯಗಳು ತೋರಿಸಲಾಗಿದೆ:**
+- **ರೆಪೊ ನಿರ್ವಹಣೆ**: ಪೂರ್ಣ ಪ್ರಾಜೆಕ್ಟ್ ರಚನೆ ಮಾಡಿತು ಮತ್ತು ಸಂಘಟಿಸಿತು  
+- **ವೆಬ್ ಅಭಿವೃದ್ಧಿ**: ಆಧುನಿಕ HTML5 ಮತ್ತು CSS3 ಬಳಸಿ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವೆಬ್‌ಸೈಟ್ ನಿರ್ಮಿಸಿತು  
+- **ವರ್ಷನ್ ನಿಯಂತ್ರಣ**: ಸಮರ್ಥ Git ಕಾರ್ಯವಿಧಾನವನ್ನು ಅಳವಡಿಸಿಕೊಂಡಿತು  
+- **ಸಾಧನ ದಕ್ಷತೆ**: VSCode.dev ಇಂಟರ್ಫೇಸ್ ಮತ್ತು ವಿಸ್ತಾರದ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರಿಣಾಮಕಾರಿ ಬಳಕೆ
+
+**ವೃತ್ತಿಪರ ಫಲಿತಾಂಶಗಳು:**
+- **ಆನ್ಲೈನ್ ಹಾಜರಾತಿ**: ನಿಮ್ಮ ಅರ್ಹತೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಹಂಚಿಕೊಳ್ಳಬಹುದಾದ URL  
+- **ಆಧುನಿಕ ಮಾದರಿ**: ಪರಂಪರೆಯ PDF ರೆಜ್ಯೂಮ್‌ಗೆ ಪ್ರವೃತ್ತಿಸುವ ಅಂತರ್‌ಕ್ರಿಯಾತ್ಮಕ ಪರ್ಯಾಯ  
+- **ಪ್ರದರ್ಶಿಸಲಾಗುವ ಕೌಶಲ್ಯಗಳು**: ನಿಮ್ಮ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಸಾಮರ್ಥ್ಯಗಳ ದೃಢ ನಿದರ್ಶನ  
+- **ಸಹಜ ನವೀಕರಣಗಳು**: ನಿರಂತರವಾಗಿ ಸುಧಾರಣೆ ಮತ್ತು ವೈಯಕ್ತಿಕಗೊಳಿಸುವ ನೆಲೆ
+
+### ನಿಯೋಜನೆ ಆಯ್ಕೆಗಳು
+
+ನಿಮ್ಮ ರೆಜ್ಯೂಮ್ ಉದ್ಯೋಗಿಗಳಿಗೆ ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡಲು ಈ ಹೋಸ್ಟ್ ಆಯ್ಕೆಗಳನ್ನು ಪರಿಗಣಿಸಿ:
+
+**GitHub Pages (ಶಿಫಾರಸು):**
+1. ನಿಮ್ಮ ರೆಪೊ ಸೆಟಿಂಗ್ಸ್ ಗೆ GitHub ನಲ್ಲಿ ಹೋಗಿ  
+2. "Pages" ವಿಭಾಗಕ್ಕೆ ಸ್ಕ್ರೋಲ್ ಮಾಡಿ  
+3. " Deploy from a branch" ಆಯ್ಕೆ ಮಾಡಿ ಮತ್ತು "main" ಶಾಖೆಯನ್ನು ಆಯ್ಕೆ ಮಾಡಿ  
+4. ನಿಮ್ಮ ಸೈಟ್ `https://your-username.github.io/my-resume` ನಲ್ಲಿ ಲಭ್ಯವಾಗುತ್ತದೆ
+
+**ಬ alternatives ವಿಶೇಷ ವೇದಿಕೆಗಳು:**
+- **Netlify**: ಕಸ್ಟಮ್ ಡೊಮೇನ್ಗಳೊಂದಿಗೆ ಸ್ವಯಂಚಾಲಿತ ನಿಯೋಜನೆ  
+- **Vercel**: ವೇಗವಂತ ನಿಯೋಜನೆ ಆಧುನಿಕ ಹೋಸ್ಟಿಂಗ್ ಫೀಚರ್‌ಗಳೊಂದಿಗೆ  
+- **GitHub Codespaces**: ಒಳಗೂಡಿಸಿದ ಪೂರ್ವವೀಕ್ಷಣೆ ಇರುವ ಅಭಿವೃದ್ಧಿ ಪರಿಸರ  
+
+### ಸುಧಾರಣೆಯ ಸಲಹೆಗಳು
+
+ನಿಮ್ಮ ಕೌಶಲ್ಯಗಳನ್ನು ಮುಂದುವರೆಸಿ ಇವೆಂತುವ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಿ:
+
+**ತಾಂತ್ರಿಕ ಸುಧಾರಣೆಗಳು:**
+- **JavaScript ಅಂತರ್‌ಕ್ರಿಯಾತ್ಮಕತೆ**: ಸ್ಮೂತ್ ಸ್ಕ್ರೋಲಿಂಗ್ ಅಥವಾ ಅಂತರ್ಘಟಕಗಳನ್ನು ಸೇರಿಸಿ  
+- **ಡಾರ್ಕ್ ಮೋಡ್ ಟೋಗಲ್**: ಬಳಕೆದಾರ ಇಚ್ಛೆಗೆ ಅನುಗುಣವಾಗಿ ಥೀಮ್ ಬದಲಾವಣೆ ಗುಣಲಕ್ಷಣ  
+- **ಸಂಪರ್ಕ ಫಾರ್ಮ್**: ಭವಿಷ್ಯದ ಉದ್ಯೋಗಿಗಳಿಂದ ನೇರ ಸಂವಹನಕ್ಕೆ ಸಶಕ್ತಗೊಳಿಸಿ  
+- **SEO ಆಪ್ಟಿಮೈಸೇಶನ್**: ಉತ್ತಮ ಹುಡುಕಾಟದ ಗೋಚರತೆಯಿಗಾಗಿ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳು ಮತ್ತು ರಚನೆಗೊಂಡ ಡೇಟಾ ಸೇರಿಸಿ  
+
+**ವಿಷಯ ಸುಧಾರಣೆಗಳು:**
+- **ಪ್ರಾಜೆಕ್ಟ್ ಪೋರ್ಟ್‌ಫೋಲಿಯೋ**: GitHub ರೆಪೊಗಳು ಮತ್ತು ಲೈವ್ ಪ್ರದರ್ಶನಗಳಿಗೆ ಲಿಂಕ್ ಸೇರಿಸಿ  
+- **ಕೌಶಲ್ಯ ದೃಶ್ಯೀಕರಣ**: ಪ್ರಗತಿ ಬಾರ್‌ಗಳು ಅಥವಾ ಕೌಶಲ್ಯ ಮೌಲ್ಯಮಾಪನ ವ್ಯವಸ್ಥೆ ರಚಿಸಿ  
+- **ಪ್ರಶಂಸಾಪತ್ರ ವಿಭಾಗ**: ಸಹೋದ್ಯೋಗಿಗಳು ಅಥವಾ ಶಿಕ್ಷಕರಿಂದ ಶಿಫಾರಸುಗಳನ್ನು ಸೇರಿಸಿ  
+- **ಬ್ಲಾಗ್ ಏಕਾਈಕ>** ನಿಮ್ಮ ಕಲಿಕಾ ಯಾತ್ರೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬ್ಲಾಗ್ ವಿಭಾಗ ಸೇರಿಸಿ  
+
+## GitHub Copilot Agent ಸವಾಲು 🚀
+
+Agent ಮೋಡ್ ಬಳಸಿ ಈ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:
+
+**ವಿವರಣೆ:** ನಿಮ್ಮ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ವೃತ್ತಿಪರ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಸಾಮರ್ಥ್ಯಗಳ ಮತ್ತು ಆಧುನಿಕ ವಿನ್ಯಾಸ ತತ್ತ್ವಗಳನ್ನು ತೋರಿಸುವ ترقيಗೊಂಡ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸಮೃದ್ಧಗೊಳಿಸಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ನಿಮ್ಮ ಇಂದಿನ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ನಡೀತುದಾಗಿ, ಈ ترقيಗೊಂಡ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಜಾರಿಗೊಳಿಸಿ:  
+1. ನಯವಾದ ಪರಿವರ್ತನೆಗಳೊಂದಿಗೆ ಡಾರ್ಕ್/ಲೈಟ್ ಥೀಮ್ ಟೋಗಲ್ ಸೇರಿಸಿ  
+2. ಹರವು ಪ್ರಗತಿ ಬಾರ್ಗಳೊಂದಿಗೆ ಅಂತರ್‌ಕ್ರಿಯಾತ್ಮಕ ಕೌಶಲ್ಯ ವಿಭಾಗ ರಚಿಸಿ  
+3. ಫಾರ್ಮ್ ಮಾನ್ಯತೆ ಜೋಡಿಸಿದ ಸಂಪರ್ಕ ಫಾರ್ಮ್ ಜಾರಿಗೊಳಿಸಿ  
+4. ಹೋವರ ಪರಿಣಾಮಗಳು ಮತ್ತು ಮೊದಲ್ ಪಾಪ್‌ಅಪ್ಗಳೊಂದಿಗೆ ಪ್ರಾಜೆಕ್ಟ್ ಪೋರ್ಟ್‌ಫೋಲಿಯೊ ವಿಭಾಗ ಸೇರಿಸಿ  
+5. ನಿಮ್ಮ ಕಲಿಕೆಯ ಯಾತ್ರೆಯ ಕುರಿತು ಕನಿಷ್ಠ 3 ಉದಾಹರಣೆಯುಳ್ಳ ಬ್ಲಾಗ್ ವಿಭಾಗ ಸೇರಿಸಿ  
+6. ಸರಿಯಾದ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳು, ರಚನಾ ಡೇಟಾ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯಿಂದ SEO ಅನ್ನು ಉತ್ತಮಗೊಳಿಸಿ  
+7. GitHub Pages ಅಥವಾ Netlify ಬಳಸಿ ಸುಂದರಗೊಳಿಸಿದ ಸೈಟ್ ನಿಯೋಜಿಸಿ  
+8. README.md ನಲ್ಲಿ ಎಲ್ಲಾ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸ್ಕ್ರೀನ್ಶಾಟ್‌ಗಳೊಂದಿಗೆ ದಾಖಲೆಗೊಳಿಸಿ
+
+ನಿಮ್ಮ ಸುಧಾರಿತ ವೆಬ್‌ಸೈಟ್ ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಅಭ್ಯಾಸಗಳ ಮಾಸ್ಟರಿಯನ್ನು ತೋರಿಸಬೇಕು, ಇದರಲ್ಲಿ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸ, JavaScript ಅಂತರ್‌ಕ್ರಿಯಾತ್ಮಕತೆ ಮತ್ತು ವೃತ್ತಿಪರ ನಿಯೋಜನೆ ಕಾರ್ಯಪದ್ಧತಿಗಳು ಸೇರಿವೆ.
+
+## ಸವಾಲಿನ ವಿಸ್ತರಣೆ
+
+ನಿಮ್ಮ ಕೌಶಲ್ಯಗಳನ್ನು ಇನ್ನಷ್ಟು ವಿಸ್ತರಿಸಲು ಸಿದ್ಧರಿದ್ದೀರಾ? ಈ ಆಧುನಿಕ ಸವಾಲುಗಳನ್ನು ಬಳಸಿ ಪ್ರಯತ್ನಿಸಿ:
+
+**📱 ಮೊಬೈಲ್-ಮೊದಲು ಮರುರಚನೆ:** CSS Grid ಮತ್ತು Flexbox ಬಳಸಿ ಮೊಬೈಲ್-ಮೊದಲು ದೃಷ್ಟಿಕೋಣದಿಂದ ನಿಮ್ಮ ಸೈಟ್ ಸಂಪೂರ್ಣ ಮರುನಿರ್ಮಿಸಿ
+
+**🔍 SEO ಆಪ್ಟಿಮೈಸೇಶನ್:** ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳು, ರಚನಾತ್ಮಕ ಮಾಹಿತಿ, ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆಗಳನ್ನು ಒಳಗೊಂಡ ಸಮಗ್ರ SEO ಜಾರಿಗೊಳಿಸಿ
+
+**🌐 ಬಹುಭಾಷಾ ಬೆಂಬಲ:** ಬಹುಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಅಂತರ್‌ರಾಷ್ಟ್ರೀಯೀಕರಣ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಿ
+
+**📊 ವಿಶ್ಲೇಷಣೆ ಸಂಯೋಜನೆ:** ವೀಕ್ಷಕರEngagement ಅನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು Google Analytics ಸೇರಿಸಿ ಮತ್ತು ನಿಮ್ಮ ವಿಷಯವನ್ನು ಉತ್ತಮಗೊಳಿಸಿ
+
+**🚀 ಕಾರ್ಯಕ್ಷಮತಾ ಆಪ್ಟಿಮೈಸೇಶನ್:** ಎಲ್ಲಾ ವರ್ಗಗಳಲ್ಲಿ ಪರಿಪೂರ್ಣ Lighthouse ಅಂಕೆಯನ್ನು ಸಾಧಿಸಿ
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+ಈ ಸಂಪನ್ಮೂಲಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಜ್ಞಾನವನ್ನು ವಿಸ್ತರಿಸಿ:
+
+**ಆಧುನಿಕ VSCode.dev ವೈಶಿಷ್ಟ್ಯಗಳು:**  
+- [VSCode.dev ಡಾಕ್ಯುಮೆಂಟೇಶನ್](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) - ವೆಬ್ ಆಧಾರಿತ ಸಂಪಾದನೆಯ ಸಂಪೂರ್ಣ ಮಾರ್ಗದರ್ಶಕ  
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) - ಕ್ಲೌಡ್ ಅಭಿವೃದ್ಧಿ ವಾತಾವರಣಗಳು
+
+**ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು:**  
+- **ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸ:** ಆಧುನಿಕ ವಿನ್ಯಾಸಗಳಿಗೆ CSS Grid ಮತ್ತು Flexbox ಅಧ್ಯಯನ ಮಾಡಿ
+- **ಆಕ್ಸೆಸಿಬಿಲಿಟಿ**: ಒಳಗೊಂಡ ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ WCAG ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಕಲಿಯಿರಿ  
+- **ಕಾರ್ಯಕ್ಷಮತೆ**: ಲೈಟ್‌ಹೌಸ್‌ಂತಹ ಸಾಧನಗಳನ್ನು ಅನ್ವೇಷಿಸಿ ಅನುಷ್ಠಾನ  
+- **SEO**: ಹುಡುಕಾಟ ಎಂಜಿನ್ ಅನ್ವಯೀಕರಣ ಮೂಲಭೂತವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ  
+
+**ವೃತ್ತಿಪರ ಬೆಳವಣಿಗೆ:**  
+- **ಪೋರ್ಟ್ಫೋಲಿಯೊ ನಿರ್ಮಾಣ**: ವಿಭಿನ್ನ ಕೌಶಲಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಹೆಚ್ಚುವರಿ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು ರಚಿಸಿ  
+- **ಮುಕ್ತ ಮೂಲ**: ಸಹಭಾಗಿತ್ವ ಅನುಭವದಿಗಾಗಿ ಇExisting Projectsಗೆ ನೆರವು ನೀಡಿ  
+- **ನೆಟ್‌ವರ್ಕಿಂಗ್**: ಅಭಿಪ್ರಾಯಕ್ಕಾಗಿ ಡೆವಲಪರ್ ಸಮುದಾಯಗಳಲ್ಲಿ ನಿಮ್ಮ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ಹಂಚಿಕೊಳ್ಳಿ  
+- **ನಿರಂತರ ಕಲಿಕೆ**: ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಪ್ರವರ್ತನೆಗಳು ಮತ್ತು ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಅಪ್‌ಟುಡೇಟ್ ಆಗಿ  
+
+---
+
+**ನಿಮ್ಮ ಮುಂದಿನ ಹೆಜ್ಜೆಗಳು:** ನಿಮ್ಮ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಮಿತ್ರರು, ಕುಟುಂಬ ಸದಸ್ಯರು ಅಥವಾ ಮಾರ್ಗದರ್ಶಕರೊಂದಿಗೆ ಅಭಿಪ್ರಾಯಕ್ಕಾಗಿ ಹಂಚಿಕೊಳ್ಳಿ. ಅವರ ಸಲಹೆಗಳನ್ನು ಬಳಸಿ ಮರು ಪರಿಶೀಲನೆ ಮಾಡಿ ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಸುಧಾರಿಸಿ. ಈ ಪ್ರಾಜೆಕ್ಟ್ ಕೇವಲ ರೆಜ್ಯೂಮ್ ಮಾತ್ರವಲ್ಲ – ಇದು ನಿಮ್ಮ ವೆಬ್ ಡೆವಲಪರ್ ಆದ ವರದಿಯ ನಿರೂಪಣೆ!
+
+---
+
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**ಡಿಸ್ಕ್ಲೇಮರ್**:  
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ಸದೃಢತೆಯನ್ನು ಪ್ರಯತ್ನಿಸಿದರೂ ಸಹ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆ ಪ್ರಾಮಾಣಿಕ ಬೆಂಬಲಸಾಧನವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರಿವುಗಳು ಅಥವಾ ದುರರ್ಥನೆಗಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->