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;