feat: enhance validation feedback in code editor, improve layout and reset functionality

src/app.js

@@ -35,7 +35,8 @@ const elements = {
 	helpBtn: document.getElementById("help-btn"),
 	lessonContainer: document.querySelector(".lesson-container"),
 	editorContent: document.querySelector(".editor-content"),
-	codeEditor: document.querySelector(".code-editor")
+	codeEditor: document.querySelector(".code-editor"),
+	validationIndicators: document.querySelector(".validation-indicators-container")
 };
 
 // Initialize the lesson engine
@@ -160,12 +161,8 @@ function resetSuccessIndicators() {
 }
 
 // Configure editor layout based on display type
-function configureEditorLayout(lesson) {
-	// Remove validation indicator if exists
-	const existingIndicator = elements.codeEditor.querySelector(".validation-success-indicator");
-	if (existingIndicator) {
-		existingIndicator.remove();
-	}
+function resetEditorLayout(lesson) {
+	elements.validationIndicators.innerHTML = "";
 }
 
 // Load the current lesson
@@ -200,7 +197,7 @@ function loadCurrentLesson() {
 	);
 
 	// Configure editor layout based on lesson settings
-	configureEditorLayout(lesson);
+	resetEditorLayout(lesson);
 
 	// Update level indicator
 	renderLevelIndicator(elements.levelIndicator, state.currentLessonIndex + 1, state.currentModule.lessons.length);
@@ -299,10 +296,6 @@ function runCode() {
 
 	const validationResult = validateUserCode(userCode, lesson);
 
-	// Remove any existing validation indicators before adding new ones
-	const existingIndicators = elements.codeEditor.querySelectorAll(".validation-success-indicator");
-	existingIndicators.forEach((indicator) => indicator.remove());
-
 	// Add validation indicators based on validCases count if available
 	if (validationResult.validCases) {
 		const casesCount =
@@ -312,23 +305,7 @@ function runCode() {
 					? validationResult.validCases.length
 					: 1;
 
-		// Create a container for indicators if it doesn't exist
-		let indicatorContainer = elements.codeEditor.querySelector(".validation-indicators-container");
-		if (!indicatorContainer) {
-			indicatorContainer = document.createElement("div");
-			indicatorContainer.className = "validation-indicators-container";
-			elements.codeEditor.appendChild(indicatorContainer);
-		} else {
-			indicatorContainer.innerHTML = "";
-		}
-
-		// Add the appropriate number of checkmarks
-		for (let i = 0; i < casesCount; i++) {
-			const validationIndicator = document.createElement("div");
-			validationIndicator.className = "validation-success-indicator";
-			validationIndicator.innerHTML = "✓";
-			indicatorContainer.appendChild(validationIndicator);
-		}
+		elements.validationIndicators.innerHTML = `${validationResult.validCases} / ${validationResult.totalCases}`;
 	}
 
 	if (validationResult.isValid) {

src/config/lessons.js

@@ -16,7 +16,7 @@ import responsiveConfig from "../../lessons/08-responsive.json";
 
 // Module store
 const moduleStore = [
-	basicSelectorsConfig,
+	basicSelectorsConfig
 	// basicsConfig,
 	// boxModelConfig,
 	// selectorsConfig,

src/helpers/validator.js

@@ -20,6 +20,7 @@ export function validateUserCode(userCode, lesson) {
 	let result = {
 		isValid: true,
 		validCases: 0,
+		totalCases: validations.length ?? 0,
 		message: "Your code looks good!"
 	};
 
@@ -35,6 +36,7 @@ export function validateUserCode(userCode, lesson) {
 					result = {
 						isValid: false,
 						validCases: result.validCases,
+						totalCases: result.totalCases,
 						message: message || `Your code should include "${value}".`
 					};
 				}
@@ -46,6 +48,7 @@ export function validateUserCode(userCode, lesson) {
 					result = {
 						isValid: false,
 						validCases: result.validCases,
+						totalCases: result.totalCases,
 						message: message || `Your code should not include "${value}".`
 					};
 				}
@@ -57,6 +60,7 @@ export function validateUserCode(userCode, lesson) {
 					result = {
 						isValid: false,
 						validCases: result.validCases,
+						totalCases: result.totalCases,
 						message: message || "Your code does not match the expected pattern."
 					};
 				}
@@ -68,6 +72,7 @@ export function validateUserCode(userCode, lesson) {
 					result = {
 						isValid: false,
 						validCases: result.validCases,
+						totalCases: result.totalCases,
 						message: message || `The "${value.property}" property should be set to "${value.expected}".`
 					};
 				}
@@ -80,6 +85,7 @@ export function validateUserCode(userCode, lesson) {
 					result = {
 						isValid: false,
 						validCases: result.validCases,
+						totalCases: result.totalCases,
 						message: message || `CSS syntax error: ${syntaxResult.error}`
 					};
 				}
@@ -93,6 +99,7 @@ export function validateUserCode(userCode, lesson) {
 						result = {
 							isValid: false,
 							validCases: result.validCases,
+							totalCases: result.totalCases,
 							message: customResult.message || message || "Your code does not meet the requirements."
 						};
 					}