From 7817528f4f271622567e12c6227bed3dcc77a495 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 13 May 2025 21:35:16 +0200 Subject: [PATCH] feat: enhance success indicators and update favicon path --- src/app.js | 13 ++++++------- src/index.html | 2 +- src/main.css | 11 +++++++++-- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/app.js b/src/app.js index b984e1a..c130811 100644 --- 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 index dd90313..b3f4bab 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - + CODE CRISPIES - Learn CSS Interactively diff --git a/src/main.css b/src/main.css index 8727552..610dd8e 100644 --- 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;