public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

feat: enhance success indicators and update favicon path

Browse Source
This commit is contained in:
Michael Czechowski
2025-05-13 21:35:16 +02:00
parent 6f760b83a6
commit 7817528f4f
3 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app.js
View File

@@ -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);

2
src/index.html
View File

@@ -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" />

11
src/main.css
View File

@@ -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;