feat: add JavaScript learning section with starter lessons and sidebar section headers

Implementation following plan:
- S01: Foundation: schema, section config, and router
- S02: Install CodeMirror JavaScript language support
- S03: Create JavaScript lesson JSON files (variables, DOM, events)
- S04: Register JavaScript lessons in module stores
- S05: Add JavaScript validation logic
- S06: Add JavaScript mode to LessonEngine preview rendering
- S07: Add JavaScript mode to CodeEditor
- S08: Update app.js for JavaScript mode support
- S09: Update navigation HTML and CSS theming for JavaScript section
- S10: Add section grouping headers in sidebar navigation
- S11: Update and write tests

src/index.html

@@ -77,6 +77,7 @@
 						<a href="#html" class="nav-link" data-section="html">HTML</a>
 						<!-- <a href="#tailwind" class="nav-link" data-section="tailwind">Tailwind</a> -->
 						<a href="#markdown" class="nav-link" data-section="markdown">Markdown</a>
+						<a href="#javascript" class="nav-link" data-section="javascript">JavaScript</a>
 						<a href="#reference/css" class="nav-link nav-link-ref" data-section="reference">Reference</a>
 					</nav>
 					<button id="auth-trigger-header" class="btn btn-outline btn-sm" data-i18n="authLogin">Log In</button>
@@ -178,6 +179,12 @@
 								<p data-i18n="landingMarkdownDesc">Lightweight markup for formatting text</p>
 								<span class="section-card-progress" id="markdown-progress"></span>
 							</a>
+							<a href="#javascript" class="section-card" data-section="javascript">
+								<div class="section-card-icon" style="background: #f0db4f; color: #333">JS</div>
+								<h3>JavaScript</h3>
+								<p data-i18n="landingJsDesc">Interactive scripting for web pages</p>
+								<span class="section-card-progress" id="javascript-progress"></span>
+							</a>
 						</div>
 						<p class="device-notice" data-i18n-html="deviceNotice">
 							<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.
@@ -194,13 +201,6 @@
 								<h3 data-i18n="comingSoonAchievementsTitle">Achievements</h3>
 								<p data-i18n="comingSoonAchievementsText">Earn badges as you master new skills. Track your learning milestones.</p>
 							</article>
-							<article class="coming-soon-card">
-								<span class="coming-soon-icon">
-									<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
-								</span>
-								<h3 data-i18n="comingSoonJsTitle">JavaScript</h3>
-								<p data-i18n="comingSoonJsText">Interactive JavaScript lessons with live code execution and DOM manipulation.</p>
-							</article>
 							<article class="coming-soon-card">
 								<span class="coming-soon-icon">
 									<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
@@ -478,6 +478,7 @@
 					<a href="#css" class="sidebar-nav-link" data-section="css">CSS</a>
 					<a href="#html" class="sidebar-nav-link" data-section="html">HTML</a>
 					<!-- <a href="#tailwind" class="sidebar-nav-link" data-section="tailwind">Tailwind</a> -->
+					<a href="#javascript" class="sidebar-nav-link" data-section="javascript">JavaScript</a>
 					<button id="auth-trigger-mobile" class="sidebar-nav-link sidebar-auth-link" data-i18n="authLogin">Log In</button>
 				</nav>