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

tests/unit/lessons.test.js

@@ -19,6 +19,10 @@ describe("Lessons Config Module", () => {
 			expect(moduleIds).toContain("css-basic-selectors");
 			expect(moduleIds).toContain("box-model");
 			expect(moduleIds).toContain("flexbox");
+			// JavaScript modules
+			expect(moduleIds).toContain("js-variables");
+			expect(moduleIds).toContain("js-dom");
+			expect(moduleIds).toContain("js-events");
 		});
 
 		test("should have mode set on each lesson", async () => {
@@ -27,7 +31,7 @@ describe("Lessons Config Module", () => {
 			modules.forEach((module) => {
 				module.lessons.forEach((lesson) => {
 					expect(lesson.mode).toBeDefined();
-					expect(["html", "css", "tailwind", "markdown", "playground"]).toContain(lesson.mode);
+					expect(["html", "css", "tailwind", "markdown", "javascript", "playground"]).toContain(lesson.mode);
 				});
 			});
 		});

tests/unit/router.test.js

@@ -56,7 +56,8 @@ describe("Router", () => {
 		test.each([
 			["css", "css"],
 			["html", "html"],
-			["markdown", "markdown"]
+			["markdown", "markdown"],
+			["javascript", "javascript"]
 		])("parseHash_SectionId_%s_ReturnsSectionRoute", (sectionId, expectedId) => {
 			window.location.hash = `#${sectionId}`;
 			const result = parseHash();
@@ -220,6 +221,7 @@ describe("Router", () => {
 			expect(ids).toContain("css");
 			expect(ids).toContain("html");
 			expect(ids).toContain("markdown");
+			expect(ids).toContain("javascript");
 		});
 
 		test("getSectionIds_MutatingCopy_DoesNotAffectOriginal", () => {

tests/unit/sections.test.js

@@ -3,12 +3,13 @@ import { sections, getSection, getSectionList, getModuleSection, getModulesBySec
 
 describe("Sections Config", () => {
 	describe("sections constant", () => {
-		test("sections_AllDefined_HasFourSections", () => {
-			expect(Object.keys(sections)).toHaveLength(4);
+		test("sections_AllDefined_HasFiveSections", () => {
+			expect(Object.keys(sections)).toHaveLength(5);
 			expect(sections).toHaveProperty("css");
 			expect(sections).toHaveProperty("html");
 			expect(sections).toHaveProperty("tailwind");
 			expect(sections).toHaveProperty("markdown");
+			expect(sections).toHaveProperty("javascript");
 		});
 
 		test("sections_EachSection_HasRequiredFields", () => {
@@ -27,7 +28,8 @@ describe("Sections Config", () => {
 			["css", "CSS"],
 			["html", "HTML"],
 			["tailwind", "Tailwind CSS"],
-			["markdown", "Markdown"]
+			["markdown", "Markdown"],
+			["javascript", "JavaScript"]
 		])("getSection_%s_ReturnsCorrectSection", (id, expectedTitle) => {
 			const section = getSection(id);
 			expect(section).not.toBeNull();
@@ -51,7 +53,7 @@ describe("Sections Config", () => {
 	describe("getSectionList", () => {
 		test("getSectionList_Default_ReturnsSortedByOrder", () => {
 			const list = getSectionList();
-			expect(list).toHaveLength(4);
+			expect(list).toHaveLength(5);
 
 			// Verify sorted by order
 			for (let i = 1; i < list.length; i++) {
@@ -64,9 +66,9 @@ describe("Sections Config", () => {
 			expect(list[0].id).toBe("css");
 		});
 
-		test("getSectionList_Default_MarkdownIsLast", () => {
+		test("getSectionList_Default_JavaScriptIsLast", () => {
 			const list = getSectionList();
-			expect(list[list.length - 1].id).toBe("markdown");
+			expect(list[list.length - 1].id).toBe("javascript");
 		});
 
 		test("getSectionList_Default_ContainsAllSections", () => {
@@ -76,6 +78,7 @@ describe("Sections Config", () => {
 			expect(ids).toContain("html");
 			expect(ids).toContain("tailwind");
 			expect(ids).toContain("markdown");
+			expect(ids).toContain("javascript");
 		});
 	});
 
@@ -89,7 +92,8 @@ describe("Sections Config", () => {
 			["css", "css"],
 			["html", "html"],
 			["tailwind", "tailwind"],
-			["markdown", "markdown"]
+			["markdown", "markdown"],
+			["javascript", "javascript"]
 		])("getModuleSection_Mode%s_InfersCorrectSection", (mode, expectedSection) => {
 			const module = { mode };
 			expect(getModuleSection(module)).toBe(expectedSection);
@@ -104,7 +108,7 @@ describe("Sections Config", () => {
 		});
 
 		test("getModuleSection_UnknownMode_DefaultsToCss", () => {
-			expect(getModuleSection({ mode: "javascript" })).toBe("css");
+			expect(getModuleSection({ mode: "unknown-mode" })).toBe("css");
 		});
 
 		test("getModuleSection_ExplicitSectionOverridesMode_UsesSection", () => {

tests/unit/validator.test.js

@@ -226,6 +226,86 @@ describe("CSS Validator", () => {
 	});
 });
 
+describe("JavaScript Validator", () => {
+	describe("validateUserCode with mode: javascript", () => {
+		it("should validate contains correctly for JavaScript", () => {
+			const userCode = 'const name = "Alice";';
+			const lesson = {
+				mode: "javascript",
+				validations: [{ type: "contains", value: "const", message: "Use const" }]
+			};
+
+			const result = validateUserCode(userCode, lesson);
+			expect(result.isValid).toBe(true);
+			expect(result.validCases).toBe(1);
+		});
+
+		it("should validate regex correctly for JavaScript", () => {
+			const userCode = 'const name = "Alice";';
+			const lesson = {
+				mode: "javascript",
+				validations: [{ type: "regex", value: 'const\\s+name\\s*=', message: "Declare name" }]
+			};
+
+			const result = validateUserCode(userCode, lesson);
+			expect(result.isValid).toBe(true);
+		});
+
+		it("should validate not_contains correctly for JavaScript", () => {
+			const userCode = 'const name = "Alice";';
+			const lesson = {
+				mode: "javascript",
+				validations: [{ type: "not_contains", value: "var", message: "Do not use var" }]
+			};
+
+			const result = validateUserCode(userCode, lesson);
+			expect(result.isValid).toBe(true);
+
+			const failCode = 'var name = "Alice";';
+			const failResult = validateUserCode(failCode, lesson);
+			expect(failResult.isValid).toBe(false);
+			expect(failResult.message).toBe("Do not use var");
+		});
+
+		it("should return invalid for missing code", () => {
+			const userCode = "";
+			const lesson = {
+				mode: "javascript",
+				validations: [{ type: "contains", value: "const", message: "Use const" }]
+			};
+
+			const result = validateUserCode(userCode, lesson);
+			expect(result.isValid).toBe(false);
+		});
+
+		it("should pass with no validations", () => {
+			const userCode = 'const x = 1;';
+			const lesson = { mode: "javascript" };
+
+			const result = validateUserCode(userCode, lesson);
+			expect(result.isValid).toBe(true);
+			expect(result.message).toContain("No validations specified");
+		});
+
+		it("should handle multiple validations with early return on failure", () => {
+			const userCode = 'const name = "Alice";';
+			const lesson = {
+				mode: "javascript",
+				validations: [
+					{ type: "contains", value: "const", message: "Use const" },
+					{ type: "contains", value: "let", message: "Use let" },
+					{ type: "contains", value: "name", message: "Declare name" }
+				]
+			};
+
+			const result = validateUserCode(userCode, lesson);
+			expect(result.isValid).toBe(false);
+			expect(result.message).toBe("Use let");
+			expect(result.validCases).toBe(1);
+		});
+	});
+});
+
 describe("HTML Validator", () => {
 	describe("validateUserCode with mode: html", () => {
 		it("should validate element_exists correctly", () => {