public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

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

Browse Source 
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
This commit is contained in:
Michael Czechowski
2026-03-28 20:22:50 +01:00
parent 372320b807
commit ae8f9fef45
20 changed files with 863 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/app.js
View File

@@ -578,6 +578,11 @@ function updateEditorForMode(mode) {
label: "Markdown Editor",
cmMode: "markdown"
},
javascript: {
placeholder: "// Write your JavaScript here...",
label: "JavaScript Editor",
cmMode: "javascript"
},
playground: {
placeholder: "<style>\n /* CSS here */\n</style>\n\n<!-- HTML here -->",
label: "HTML & CSS",
@@ -1493,6 +1498,64 @@ This is \`inline code\`.</code></pre>
</div>
</div>
</div>
`,
javascript: `
<div class="section-overview">
<p><strong>JavaScript</strong> is the programming language of the web. It adds interactivity to HTML pages—responding to clicks, updating content dynamically, validating forms, and much more. Every modern browser includes a JavaScript engine, making it the most widely deployed programming language in the world.</p>
<p>These beginner lessons cover the fundamentals: declaring variables, selecting and modifying DOM elements, and handling user events. Each concept builds on the previous one, giving you the tools to make any web page interactive.</p>
</div>
<div class="topic-row">
<div class="topic-text">
<h2>Variables & Data Types</h2>
<p>JavaScript uses <code>const</code> for values that won't change and <code>let</code> for values that will. Template literals with backticks make it easy to embed expressions in strings using <code>\${...}</code> syntax.</p>
<p>Arrays store ordered collections in square brackets. Objects store key-value pairs in curly braces. These are the building blocks of every JavaScript program.</p>
<a href="#js-variables/0" class="topic-link">Learn JS Variables</a>
</div>
<div class="topic-code">
<div class="code-block">
<pre><code>const name = "Alice";
let count = 0;
count = count + 1;
const msg = \`Hello, \${name}!\`;
const colors = ["red", "green"];</code></pre>
</div>
</div>
</div>
<div class="topic-row">
<div class="topic-text">
<h2>DOM Manipulation</h2>
<p>The DOM (Document Object Model) is how JavaScript sees your HTML. Use <code>document.querySelector()</code> to find elements by CSS selector, then modify them with properties like <code>textContent</code>, <code>style</code>, and <code>classList</code>.</p>
<a href="#js-dom/0" class="topic-link">Practice DOM Methods</a>
</div>
<div class="topic-code">
<div class="code-block">
<pre><code>const title = document.querySelector('h1');
title.textContent = "New Title";
title.style.color = "coral";
title.classList.add("active");</code></pre>
</div>
</div>
</div>
<div class="topic-row">
<div class="topic-text">
<h2>Event Handling</h2>
<p>Events let your code respond to user actions. Use <code>addEventListener()</code> to run a function when something happens—a click, a keystroke, or an input change. The callback receives an event object with details about what happened.</p>
<a href="#js-events/0" class="topic-link">Handle Events</a>
</div>
<div class="topic-code">
<div class="code-block">
<pre><code>const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
alert('Clicked!');
});</code></pre>
</div>
</div>
</div>
`
};
@@ -2310,7 +2373,7 @@ function showLandingPage() {
*/
function renderFooterLessonLinks() {
const modules = lessonEngine.modules || [];
const sectionGroups = { css: [], html: [] };
const sectionGroups = { css: [], html: [], javascript: [] };
modules.forEach((module) => {
if (module.excludeFromProgress) return;
@@ -2347,7 +2410,7 @@ function renderFooterLessonLinks() {
* Update progress indicators on landing page
*/
function updateLandingProgress() {
["css", "html", "markdown"].forEach((sectionId) => { // tailwind temporarily disabled
["css", "html", "markdown", "javascript"].forEach((sectionId) => { // tailwind temporarily disabled
const progressEl = document.getElementById(`${sectionId}-progress`);
if (progressEl) {
const sectionModules = getModulesBySection(lessonEngine.modules, sectionId);

27
src/config/lessons.js
View File

@@ -31,6 +31,9 @@ import filtersEN from "../../lessons/11-filters.json";
import positioningEN from "../../lessons/12-positioning.json";
import pseudoElementsEN from "../../lessons/13-pseudo-elements.json";
import markdownBasicsEN from "../../lessons/40-markdown-basics.json";
import jsVariablesEN from "../../lessons/50-js-variables.json";
import jsDomEN from "../../lessons/51-js-dom.json";
import jsEventsEN from "../../lessons/52-js-events.json";
import playgroundEN from "../../lessons/98-playground.json";
import goodbyeEN from "../../lessons/99-goodbye.json";
@@ -165,6 +168,10 @@ const moduleStoreEN = [
htmlTablesEN,
// Markdown
markdownBasicsEN,
// JavaScript
jsVariablesEN,
jsDomEN,
jsEventsEN,
// Outro
goodbyeEN,
playgroundEN
@@ -206,6 +213,10 @@ const moduleStoreDE = [
htmlTablesDE,
// Markdown
markdownBasicsEN, // Using EN fallback until translated
// JavaScript
jsVariablesEN, // Using EN fallback until translated
jsDomEN, // Using EN fallback until translated
jsEventsEN, // Using EN fallback until translated
// Outro
goodbyeEN,
playgroundEN
@@ -247,6 +258,10 @@ const moduleStorePL = [
htmlTablesPL,
// Markdown
markdownBasicsEN, // Using EN fallback until translated
// JavaScript
jsVariablesEN, // Using EN fallback until translated
jsDomEN, // Using EN fallback until translated
jsEventsEN, // Using EN fallback until translated
// Outro
goodbyeEN,
playgroundEN
@@ -288,6 +303,10 @@ const moduleStoreES = [
htmlTablesES,
// Markdown
markdownBasicsEN, // Using EN fallback until translated
// JavaScript
jsVariablesEN, // Using EN fallback until translated
jsDomEN, // Using EN fallback until translated
jsEventsEN, // Using EN fallback until translated
// Outro
goodbyeEN,
playgroundEN
@@ -329,6 +348,10 @@ const moduleStoreAR = [
htmlTablesAR,
// Markdown
markdownBasicsEN, // Using EN fallback until translated
// JavaScript
jsVariablesEN, // Using EN fallback until translated
jsDomEN, // Using EN fallback until translated
jsEventsEN, // Using EN fallback until translated
// Outro
goodbyeEN,
playgroundEN
@@ -370,6 +393,10 @@ const moduleStoreUK = [
htmlTablesUK,
// Markdown
markdownBasicsEN, // Using EN fallback until translated
// JavaScript
jsVariablesEN, // Using EN fallback until translated
jsDomEN, // Using EN fallback until translated
jsEventsEN, // Using EN fallback until translated
// Outro
goodbyeEN,
playgroundEN

8
src/config/sections.js
View File

@@ -31,6 +31,13 @@ export const sections = {
description: "Lightweight markup language for formatting text",
color: "#5b8dd9",
order: 4
},
javascript: {
id: "javascript",
title: "JavaScript",
description: "Interactive scripting for web pages",
color: "#f0db4f",
order: 5
}
};
@@ -65,6 +72,7 @@ export function getModuleSection(module) {
if (mode === "html") return "html";
if (mode === "tailwind") return "tailwind";
if (mode === "markdown") return "markdown";
if (mode === "javascript") return "javascript";
return "css";
}

17
src/helpers/renderer.js
View File

@@ -2,6 +2,7 @@
* Renderer - Handles UI updates for the CSS learning platform
*/
import { t } from "../i18n.js";
import { getModuleSection, getSection, getSectionList } from "../config/sections.js";
/**
* Compute lesson difficulty based on lesson structure
@@ -72,8 +73,24 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
}
}
// Group modules by section for headers
let currentSectionId = null;
// Create list items for each module
modules.forEach((module) => {
// Insert section header when section changes
const sectionId = getModuleSection(module);
if (sectionId !== currentSectionId && !module.excludeFromProgress) {
currentSectionId = sectionId;
const section = getSection(sectionId);
if (section) {
const header = document.createElement("h3");
header.className = "sidebar-section-header";
header.textContent = section.title;
header.style.borderLeftColor = section.color;
container.appendChild(header);
}
}
// Create module container
// Use native <details>/<summary> for expand/collapse
const moduleContainer = document.createElement("details");

2
src/helpers/router.js
View File

@@ -27,7 +27,7 @@ export const RouteType = {
/**
* Valid section IDs
*/
const SECTIONS = ["css", "html", "markdown"]; // tailwind temporarily disabled
const SECTIONS = ["css", "html", "markdown", "javascript"]; // tailwind temporarily disabled
/**
* Valid language codes for URL-based switching

76
src/helpers/validator.js
View File

@@ -10,6 +10,8 @@ export function validateUserCode(userCode, lesson) {
return validateHtmlCode(userCode, lesson);
case "tailwind":
return validateTailwindClasses(userCode, lesson);
case "javascript":
return validateJavaScriptCode(userCode, lesson);
case "css":
default:
return validateCssCode(userCode, lesson);
@@ -204,6 +206,80 @@ function validateHtmlCode(userHtml, lesson) {
return result;
}
/**
* Validate user JavaScript code against the lesson requirements
* @param {string} userCode - User submitted JavaScript code
* @param {Object} lesson - The current lesson object
* @returns {Object} Validation result with isValid and message properties
*/
function validateJavaScriptCode(userCode, lesson) {
if (!lesson || !lesson.validations) {
return { isValid: true, message: "No validations specified for this lesson." };
}
const validations = lesson.validations;
let result = {
isValid: true,
validCases: 0,
totalCases: validations.length,
message: "Your CODE looks CRISPY!"
};
for (const validation of validations) {
const { type, value, message, options } = validation;
let validationPassed = false;
switch (type) {
case "contains":
validationPassed = containsValidation(userCode, value, options);
if (!validationPassed) {
result = {
...result,
isValid: false,
message: message || `Your code should include "${value}".`
};
}
break;
case "not_contains":
validationPassed = !containsValidation(userCode, value, options);
if (!validationPassed) {
result = {
...result,
isValid: false,
message: message || `Your code should not include "${value}".`
};
}
break;
case "regex":
validationPassed = regexValidation(userCode, value, options);
if (!validationPassed) {
result = {
...result,
isValid: false,
message: message || "Your code does not match the expected pattern."
};
}
break;
default:
console.warn(`Unknown JavaScript validation type: ${type}`);
validationPassed = true;
}
if (validationPassed) {
result.validCases++;
} else {
return result;
}
}
result.validCases = validations.length;
return result;
}
function validateTailwindClasses(userClasses, lesson) {
if (!lesson || !lesson.validations) {
return { isValid: true, message: "No validations specified for this lesson." };

4
src/impl/CodeEditor.js
View File

@@ -8,6 +8,7 @@ import { history } from "@codemirror/commands";
import { html } from "@codemirror/lang-html";
import { css } from "@codemirror/lang-css";
import { markdown } from "@codemirror/lang-markdown";
import { javascript } from "@codemirror/lang-javascript";
import { autocompletion } from "@codemirror/autocomplete";
import { abbreviationTracker, expandAbbreviation } from "@emmetio/codemirror6-plugin";
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
@@ -181,7 +182,8 @@ export class CodeEditor {
const fullDoc = prefix + initialValue + suffix;
// Get language extension based on mode
const langExtension = this.mode === "html" ? html() : this.mode === "markdown" ? markdown() : css();
const langExtension =
this.mode === "html" ? html() : this.mode === "javascript" ? javascript() : this.mode === "markdown" ? markdown() : css();
// Create read-only zones decorations
const readOnlyMark = Decoration.mark({ class: "cm-readonly-zone" });

48
src/impl/LessonEngine.js
View File

@@ -256,6 +256,30 @@ export class LessonEngine {
${htmlWithClasses}
</body>
</html>
`;
} else if (mode === "javascript") {
// For JavaScript mode, user code runs as a script against previewHTML
const { codePrefix, codeSuffix } = this.currentLesson;
const fullScript = `${codePrefix || ""}${this.userCode || ""}${codeSuffix || ""}`;
html = `
<!DOCTYPE html>
<html>
<head>
<style>html, body { min-height: 100%; margin: 0; }</style>
<style>${previewBaseCSS || ""}</style>
<style>${sandboxCSS || ""}</style>
</head>
<body>
${previewHTML || ""}
<script>
try {
${fullScript}
} catch (e) {
document.body.innerHTML += '<pre style="color:red">' + e.message + '</pre>';
}
</script>
</body>
</html>
`;
} else if (mode === "markdown") {
// For Markdown mode, parse user code to HTML
@@ -382,6 +406,30 @@ export class LessonEngine {
${htmlWithClasses}
</body>
</html>
`;
} else if (mode === "javascript") {
// For JavaScript mode, solution code runs as a script against previewHTML
const { codePrefix, codeSuffix } = this.currentLesson;
const fullScript = `${codePrefix || ""}${solutionCode}${codeSuffix || ""}`;
html = `
<!DOCTYPE html>
<html>
<head>
<style>html, body { min-height: 100%; margin: 0; }</style>
<style>${previewBaseCSS || ""}</style>
<style>${sandboxCSS || ""}</style>
</head>
<body>
${previewHTML || ""}
<script>
try {
${fullScript}
} catch (e) {
document.body.innerHTML += '<pre style="color:red">' + e.message + '</pre>';
}
</script>
</body>
</html>
`;
} else if (mode === "markdown") {
// For Markdown mode, parse solution to HTML

15
src/index.html
View File

@@ -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>

106
src/main.css
View File

@@ -291,6 +291,14 @@ kbd {
background: #5b8dd9;
}
[data-section="javascript"] .logo h1 .code-text {
color: #d4a017;
}
[data-section="javascript"] .logo h1 .crispies-text {
background: #d4a017;
}
.help-toggle {
width: 28px;
height: 28px;
@@ -1244,6 +1252,22 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
animation: milestone-pop 0.5s ease-out;
}
/* Sidebar section grouping headers */
.sidebar-section-header {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--light-text);
padding: 0.75rem 0.75rem 0.25rem;
margin: 0.5rem 0 0;
border-left: 3px solid transparent;
}
.sidebar-section-header:first-child {
margin-top: 0;
}
/* Module List in Sidebar */
.module-list {
/* No max-height - parent nav.sidebar-section handles overflow */
@@ -3618,6 +3642,14 @@ input:checked + .toggle-slider::before {
--section-color-rgb: 91, 141, 217;
}
/* JavaScript Section - Gold */
[data-section="javascript"] {
--section-color: #d4a017;
--section-color-light: #e0b840;
--section-color-dark: #b08610;
--section-color-rgb: 212, 160, 23;
}
/* Apply section colors to nav links */
.nav-link[data-section="css"] {
color: #d95a8a;
@@ -3635,6 +3667,10 @@ input:checked + .toggle-slider::before {
color: #5b8dd9;
}
.nav-link[data-section="javascript"] {
color: #d4a017;
}
.nav-link[data-section="css"]:hover,
.nav-link[data-section="css"].active {
background: rgba(217, 90, 138, 0.1);
@@ -3659,6 +3695,12 @@ input:checked + .toggle-slider::before {
color: #4070b8;
}
.nav-link[data-section="javascript"]:hover,
.nav-link[data-section="javascript"].active {
background: rgba(212, 160, 23, 0.1);
color: #b08610;
}
/* Hint section colors */
body[data-section="css"] .hint {
background: rgba(217, 90, 138, 0.3);
@@ -3696,6 +3738,15 @@ body[data-section="markdown"] .hint-progress {
background: #5b8dd9;
}
body[data-section="javascript"] .hint {
background: rgba(212, 160, 23, 0.3);
border-left-color: #e0b840;
}
body[data-section="javascript"] .hint-progress {
background: #d4a017;
}
/* RTL hint border */
[dir="rtl"] body[data-section="css"] .hint {
border-right-color: #a98cd6;
@@ -3713,6 +3764,10 @@ body[data-section="markdown"] .hint-progress {
border-right-color: #7ba3e5;
}
[dir="rtl"] body[data-section="javascript"] .hint {
border-right-color: #e0b840;
}
/* Reference nav link colors */
.ref-nav-link[data-ref="css"],
.ref-nav-link[data-ref="selectors"],
@@ -3816,6 +3871,24 @@ body[data-section="markdown"] .cm-editor .cm-activeLine {
background-color: rgba(91, 141, 217, 0.08) !important;
}
body[data-section="javascript"] .cm-editor .cm-content {
caret-color: #d4a017 !important;
}
body[data-section="javascript"] .cm-editor .cm-cursor,
body[data-section="javascript"] .cm-editor .cm-dropCursor {
border-left-color: #d4a017 !important;
}
body[data-section="javascript"] .cm-editor .cm-selectionBackground,
body[data-section="javascript"] .cm-editor .cm-content ::selection {
background-color: rgba(212, 160, 23, 0.25) !important;
}
body[data-section="javascript"] .cm-editor .cm-activeLine {
background-color: rgba(212, 160, 23, 0.08) !important;
}
/* Module pill section colors */
body[data-section="css"] .module-pill {
background: rgba(217, 90, 138, 0.1);
@@ -3853,6 +3926,15 @@ body[data-section="markdown"] .module-pill .level-indicator {
color: #4070b8;
}
body[data-section="javascript"] .module-pill {
background: rgba(212, 160, 23, 0.1);
color: #d4a017;
}
body[data-section="javascript"] .module-pill .level-indicator {
color: #b08610;
}
/* Code block border section colors */
body[data-section="css"] .code-block {
border-color: rgba(217, 90, 138, 0.4);
@@ -3870,6 +3952,10 @@ body[data-section="markdown"] .code-block {
border-color: rgba(91, 141, 217, 0.4);
}
body[data-section="javascript"] .code-block {
border-color: rgba(212, 160, 23, 0.4);
}
/* Section code block CodeMirror syntax highlighting overrides */
body[data-section="css"] .code-block .cm-editor .cm-line {
color: #c9c0e0;
@@ -3887,6 +3973,10 @@ body[data-section="markdown"] .code-block .cm-editor .cm-line {
color: #c0d0e8;
}
body[data-section="javascript"] .code-block .cm-editor .cm-line {
color: #e0d8b0;
}
/* Task instruction bubble section colors */
[data-section="css"] .task-instruction {
background: rgba(217, 90, 138, 0.92);
@@ -3904,6 +3994,10 @@ body[data-section="markdown"] .code-block .cm-editor .cm-line {
background: rgba(91, 141, 217, 0.92);
}
[data-section="javascript"] .task-instruction {
background: rgba(212, 160, 23, 0.92);
}
/* Section page progress bar colors */
body[data-section="css"] .section-progress-bar .progress-fill {
background: #d95a8a;
@@ -3921,6 +4015,10 @@ body[data-section="markdown"] .section-progress-bar .progress-fill {
background: #5b8dd9;
}
body[data-section="javascript"] .section-progress-bar .progress-fill {
background: #d4a017;
}
/* Section page header colors */
[data-section="css"] .section-hero h1 {
color: #d95a8a;
@@ -3938,6 +4036,10 @@ body[data-section="markdown"] .section-progress-bar .progress-fill {
color: #5b8dd9;
}
[data-section="javascript"] .section-hero h1 {
color: #d4a017;
}
/* Lesson title h2 section colors */
body[data-section="css"] #lesson-title {
color: #d95a8a;
@@ -3955,6 +4057,10 @@ body[data-section="markdown"] #lesson-title {
color: #5b8dd9;
}
body[data-section="javascript"] #lesson-title {
color: #d4a017;
}
/* Section and Reference footer - override landing-footer styles */
.section-footer.landing-footer,
.reference-footer.landing-footer {