public/code-crispies
2
1
Fork 0
Code Issues 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 6f6a2bb42e
commit 910529a6c3
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"), resetBtn: document.getElementById("reset-btn"),
helpBtn: document.getElementById("help-btn"), helpBtn: document.getElementById("help-btn"),
lessonContainer: document.querySelector(".lesson-container"), lessonContainer: document.querySelector(".lesson-container"),
editorContent: document.querySelector(".editor-content") editorContent: document.querySelector(".editor-content"),
codeEditor: document.querySelector(".code-editor")
}; };
// Initialize the lesson engine // Initialize the lesson engine
@@ -151,10 +152,9 @@ function selectModule(moduleId) {
// Reset success indicators // Reset success indicators
function resetSuccessIndicators() { function resetSuccessIndicators() {
elements.lessonContainer.classList.remove("success-highlight"); elements.codeEditor.classList.remove("success-highlight");
elements.lessonTitle.classList.remove("success-text"); elements.lessonTitle.classList.remove("success-text");
const headings = elements.lessonContainer.querySelectorAll("h2, h3, h4"); elements.runBtn.classList.remove("success");
headings.forEach((heading) => heading.classList.remove("success-text"));
} }
// Load the current lesson // Load the current lesson
@@ -262,10 +262,9 @@ function runCode() {
showFeedback(true, validationResult.message || "Great job! Your code works correctly."); showFeedback(true, validationResult.message || "Great job! Your code works correctly.");
// Add success visual indicators // Add success visual indicators
elements.lessonContainer.classList.add("success-highlight"); elements.codeEditor.classList.add("success-highlight");
elements.lessonTitle.classList.add("success-text"); elements.lessonTitle.classList.add("success-text");
const headings = elements.lessonContainer.querySelectorAll("h3, h4"); elements.runBtn.classList.add("success");
headings.forEach((heading) => heading.classList.add("success-text"));
// Apply the code to see the result // Apply the code to see the result
lessonEngine.applyUserCode(userCode); lessonEngine.applyUserCode(userCode);

2
src/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CODE CRISPIES - Learn CSS Interactively</title> <title>CODE CRISPIES - Learn CSS Interactively</title>
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />

11
src/main.css
View File

@@ -238,8 +238,8 @@ code {
padding: 0.5rem 0; padding: 0.5rem 0;
outline: none; outline: none;
resize: vertical; resize: vertical;
caret-color: var(--primary-color); caret-color: var(--primary-light);
caret-shape: block; /*caret-shape: block;*/
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
@@ -371,6 +371,13 @@ code {
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.success,
.success:hover,
.success:focus {
background-color: var(--success-color);
border: 1px solid var(--success-color);
}
/* Friendlier error feedback */ /* Friendlier error feedback */
.feedback-error { .feedback-error {
color: #996633; color: #996633;