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

feat: implement tailwind validations and basic example

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-01 22:34:55 +02:00
parent 33a0b7274b
commit 9e28534562
6 changed files with 180 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app.js
View File

@@ -210,6 +210,19 @@ function resetSuccessIndicators() {
elements.runBtn.classList.remove("re-run");
}
function updateEditorForMode(mode) {
const codeInput = elements.codeInput;
const editorLabel = document.querySelector(".editor-label");
if (mode === "tailwind") {
codeInput.placeholder = "Enter Tailwind classes (e.g., bg-blue-500 text-white p-4)";
if (editorLabel) editorLabel.textContent = "Tailwind Classes:";
} else {
codeInput.placeholder = "Enter your CSS code here...";
if (editorLabel) editorLabel.textContent = "CSS Code:";
}
}
// Configure editor layout based on display type
function resetEditorLayout(lesson) {
elements.validationIndicators.innerHTML = "";
@@ -229,8 +242,12 @@ function loadCurrentLesson() {
}
const lesson = state.currentModule.lessons[state.currentLessonIndex];
const mode = lesson.mode || state.currentModule?.mode || "css";
lessonEngine.setLesson(lesson);
// Update UI based on mode
updateEditorForMode(mode);
// Reset any success indicators
resetSuccessIndicators();