feat: enhance success indicators and update favicon path

nextlevelshit · nextlevelshit · commit 910529a6c3bc · 2025-05-13T21:35:16.000+02:00
diff --git a/src/app.js b/src/app.js
@@ -33,7 +33,8 @@ const elements = {
 	resetBtn: document.getElementById("reset-btn"),
 	helpBtn: document.getElementById("help-btn"),
 	lessonContainer: document.querySelector(".lesson-container"),
-	editorContent: document.querySelector(".editor-content")
+	editorContent: document.querySelector(".editor-content"),
+	codeEditor: document.querySelector(".code-editor")
 };
 
 // Initialize the lesson engine
@@ -151,10 +152,9 @@ function selectModule(moduleId) {
 
 // Reset success indicators
 function resetSuccessIndicators() {
-	elements.lessonContainer.classList.remove("success-highlight");
+	elements.codeEditor.classList.remove("success-highlight");
 	elements.lessonTitle.classList.remove("success-text");
-	const headings = elements.lessonContainer.querySelectorAll("h2, h3, h4");
-	headings.forEach((heading) => heading.classList.remove("success-text"));
+	elements.runBtn.classList.remove("success");
 }
 
 // Load the current lesson
@@ -262,10 +262,9 @@ function runCode() {
 		showFeedback(true, validationResult.message || "Great job! Your code works correctly.");
 
 		// Add success visual indicators
-		elements.lessonContainer.classList.add("success-highlight");
+		elements.codeEditor.classList.add("success-highlight");
 		elements.lessonTitle.classList.add("success-text");
-		const headings = elements.lessonContainer.querySelectorAll("h3, h4");
-		headings.forEach((heading) => heading.classList.add("success-text"));
+		elements.runBtn.classList.add("success");
 
 		// Apply the code to see the result
 		lessonEngine.applyUserCode(userCode);
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" href="./public/favicon.ico" type="image/x-icon" />
+		<link rel="icon" href="./favicon.ico" type="image/x-icon" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>CODE CRISPIES - Learn CSS Interactively</title>
 		<link rel="stylesheet" href="main.css" />
diff --git a/src/main.css b/src/main.css
@@ -238,8 +238,8 @@ code {
 	padding: 0.5rem 0;
 	outline: none;
 	resize: vertical;
-	caret-color: var(--primary-color);
-	caret-shape: block;
+	caret-color: var(--primary-light);
+	/*caret-shape: block;*/
 	transition: background-color 0.2s ease;
 }
 
@@ -371,6 +371,13 @@ code {
 	transition: color 0.3s ease;
 }
 
+.success,
+.success:hover,
+.success:focus {
+	background-color: var(--success-color);
+	border: 1px solid var(--success-color);
+}
+
 /* Friendlier error feedback */
 .feedback-error {
 	color: #996633;
