diff --git a/src/lessons/configs/basics.json b/lessons/basics.json
similarity index 100%
rename from src/lessons/configs/basics.json
rename to lessons/basics.json
diff --git a/src/lessons/configs/flexbox.json b/lessons/flexbox.json
similarity index 100%
rename from src/lessons/configs/flexbox.json
rename to lessons/flexbox.json
diff --git a/src/lessons/configs/grid.json b/lessons/grid.json
similarity index 100%
rename from src/lessons/configs/grid.json
rename to lessons/grid.json
diff --git a/src/lessons/configs/tailwindcss.json b/lessons/tailwindcss.json
similarity index 100%
rename from src/lessons/configs/tailwindcss.json
rename to lessons/tailwindcss.json
diff --git a/src/js/app.js b/src/app.js
similarity index 95%
rename from src/js/app.js
rename to src/app.js
index a44d2c2..cc3e366 100644
--- a/src/js/app.js
+++ b/src/app.js
@@ -1,7 +1,7 @@
-import { LessonEngine } from './LessonEngine';
-import { renderLesson, renderModuleList, renderLevelIndicator, showFeedback } from './renderer';
-import { validateUserCode } from './validator';
-import { loadModules } from '../lessons/config.js';
+import { LessonEngine } from './impl/LessonEngine.js';
+import { renderLesson, renderModuleList, renderLevelIndicator, showFeedback } from './helpers/renderer.js';
+import { validateUserCode } from './helpers/validator.js';
+import { loadModules } from './config/lessons.js';
// Main Application state
const state = {
@@ -33,6 +33,7 @@ const elements = {
resetBtn: document.getElementById('reset-btn'),
helpBtn: document.getElementById('help-btn'),
lessonContainer: document.querySelector('.lesson-container'),
+ editorContent: document.querySelector('.editor-content')
};
// Initialize the lesson engine
@@ -424,11 +425,11 @@ function handleEditorClick() {
elements.codeInput.focus();
// Add a temporary highlight class to show where the cursor is
- elements.codeInput.classList.add('editor-focused');
+ elements.editorContent.classList.add('editor-focused');
// Remove the highlight after a short delay
setTimeout(() => {
- elements.codeInput.classList.remove('editor-focused');
+ elements.editorContent.classList.remove('editor-focused');
}, 300);
}
@@ -462,20 +463,10 @@ function init() {
elements.resetBtn.addEventListener('click', resetProgress);
elements.helpBtn.addEventListener('click', showHelp);
elements.codeInput.addEventListener('click', handleEditorClick);
- elements.codeInput.addEventListener('focus', () => {
- elements.codeInput.classList.add('editor-active');
- });
- elements.codeInput.addEventListener('blur', () => {
- elements.codeInput.classList.remove('editor-active');
- });
// Also make the editor container clickable to focus the text area
- const editorContent = document.querySelector('.editor-content');
- editorContent.addEventListener('click', (e) => {
- // Only trigger if clicking the container itself, not child elements
- if (e.target === editorContent) {
- elements.codeInput.focus();
- }
+ elements.editorContent.addEventListener('click', (e) => {
+ elements.codeInput.focus();
});
// Add tab key handler for the code input
diff --git a/src/lessons/config.js b/src/config/lessons.js
similarity index 92%
rename from src/lessons/config.js
rename to src/config/lessons.js
index d3239a2..42ea3d6 100644
--- a/src/lessons/config.js
+++ b/src/config/lessons.js
@@ -3,10 +3,10 @@
*/
// Import lesson configs
-import flexboxConfig from './configs/flexbox.json';
-import gridConfig from './configs/grid.json';
-import basicsConfig from './configs/basics.json';
-import tailwindConfig from './configs/tailwindcss.json';
+import flexboxConfig from '../../lessons/flexbox.json';
+import gridConfig from '../../lessons/grid.json';
+import basicsConfig from '../../lessons/basics.json';
+import tailwindConfig from '../../lessons/tailwindcss.json';
// Module store
const moduleStore = [
diff --git a/src/js/renderer.js b/src/helpers/renderer.js
similarity index 100%
rename from src/js/renderer.js
rename to src/helpers/renderer.js
diff --git a/src/js/validator.js b/src/helpers/validator.js
similarity index 100%
rename from src/js/validator.js
rename to src/helpers/validator.js
diff --git a/src/js/LessonEngine.js b/src/impl/LessonEngine.js
similarity index 97%
rename from src/js/LessonEngine.js
rename to src/impl/LessonEngine.js
index 4f8dc28..26d83ec 100644
--- a/src/js/LessonEngine.js
+++ b/src/impl/LessonEngine.js
@@ -1,9 +1,9 @@
/**
* LessonEngine - Core class for managing lessons and applying/testing user code
- * This file is the implementation of the LessonEngine class declaration from app.js
+ * This file is the implementation of the LessonEngine class declaration from app.helpers
*/
-import { validateUserCode } from './validator.js';
-import { showFeedback } from './renderer.js';
+import { validateUserCode } from '../helpers/validator.js';
+import { showFeedback } from '../helpers/renderer.js';
export class LessonEngine {
constructor() {
diff --git a/src/index.html b/src/index.html
index 4c5ff30..6a179e8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
CODE CRISPIES - Learn CSS Interactively
-
+