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

refactor: replace custom modal with native HTML dialog element

Browse Source 
- Convert help and reset modals to native <dialog> elements
- Content is now in HTML, not dynamically generated via JS
- Use dialog.showModal() and dialog.close() native API
- Dialog handles Escape key natively for closing
- Fix list indentation in help dialog with proper padding
- Add styled kbd elements for keyboard shortcuts
- Separate dialogs for help and reset confirmation
- Apply same changes to German version

Benefits:
- Better accessibility (native focus trapping, escape handling)
- Simpler JavaScript (no DOM manipulation for content)
- Content visible in HTML source for easier editing
- Native backdrop styling via ::backdrop
This commit is contained in:
Michael Czechowski
2025-12-24 00:57:24 +01:00
parent 1c99e0ab0d
commit 7fb70e7257
5 changed files with 240 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/app.de.js
View File

@@ -49,11 +49,13 @@ const elements = {
resetBtn: document.getElementById("reset-btn"), resetBtn: document.getElementById("reset-btn"),
disableFeedbackToggle: document.getElementById("disable-feedback-toggle"), disableFeedbackToggle: document.getElementById("disable-feedback-toggle"),
// Modal // Dialogs
modalContainer: document.getElementById("modal-container"), helpDialog: document.getElementById("help-dialog"),
modalTitle: document.getElementById("modal-title"), helpDialogClose: document.getElementById("help-dialog-close"),
modalContent: document.getElementById("modal-content"), resetDialog: document.getElementById("reset-dialog"),
modalClose: document.getElementById("modal-close") resetDialogClose: document.getElementById("reset-dialog-close"),
cancelReset: document.getElementById("cancel-reset"),
confirmReset: document.getElementById("confirm-reset")
}; };
// Initialize the lesson engine - now the single source of truth // Initialize the lesson engine - now the single source of truth
@@ -448,78 +450,36 @@ function runCode() {
} }
} }
// ================= MODALS ================= // ================= DIALOGS =================
function showHelp() { function showHelp() {
elements.modalTitle.textContent = "Hilfe"; elements.helpDialog.showModal();
}
elements.modalContent.innerHTML = ` function closeHelpDialog() {
<h3>So verwendest du Code Crispies</h3> elements.helpDialog.close();
<p>Code Crispies ist eine interaktive Plattform zum Erlernen von HTML, CSS und Tailwind durch praktische Übungen.</p>
<h4>Erste Schritte</h4>
<p>Öffne das Menü (☰), um ein Lektionsmodul auszuwählen. Jedes Modul enthält eine Reihe von Lektionen.</p>
<h4>Lektionen abschließen</h4>
<ol>
<li>Lies die Anleitung auf der linken Seite</li>
<li>Schreibe deinen Code im Editor</li>
<li>Klicke auf "Ausführen" oder drücke Strg+Enter zum Testen</li>
<li>Folge den Hinweisen, um Probleme zu beheben</li>
<li>Klicke auf "Weiter", wenn du fertig bist</li>
</ol>
<h4>Tipps</h4>
<ul>
<li>Klicke auf "Lösung zeigen", um das Zielergebnis zu sehen</li>
<li>Dein Fortschritt wird automatisch gespeichert</li>
<li>Strg+Enter führt deinen Code aus</li>
</ul>
<h4>Emmet-Kürzel (HTML-Modus)</h4>
<p>Tippe Abkürzungen ein und drücke Tab zum Erweitern:</p>
<ul>
<li><kbd>div.container</kbd> → div mit Klasse</li>
<li><kbd>ul>li*5</kbd> → ul mit 5 li-Kindern</li>
<li><kbd>nav>ul>li*3>a</kbd> → verschachtelte Struktur</li>
<li><kbd>p{Hallo}</kbd> → p mit Textinhalt</li>
</ul>
`;
elements.modalContainer.classList.remove("hidden");
} }
function showResetConfirmation() { function showResetConfirmation() {
elements.modalTitle.textContent = "Fortschritt zurücksetzen"; elements.resetDialog.showModal();
elements.modalContent.innerHTML = `
<p>Bist du sicher, dass du deinen gesamten Fortschritt zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.</p>
<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
<button id="cancel-reset" class="btn">Abbrechen</button>
<button id="confirm-reset" class="btn btn-ghost">Alles zurücksetzen</button>
</div>
`;
document.getElementById("cancel-reset").addEventListener("click", closeModal);
document.getElementById("confirm-reset").addEventListener("click", () => {
lessonEngine.clearProgress();
closeModal();
closeSidebar();
// Reload first module
const modules = lessonEngine.modules;
if (modules.length > 0) {
selectModule(modules[0].id);
}
updateProgressDisplay();
});
elements.modalContainer.classList.remove("hidden");
} }
function closeModal() { function closeResetDialog() {
elements.modalContainer.classList.add("hidden"); elements.resetDialog.close();
}
function handleResetConfirm() {
lessonEngine.clearProgress();
closeResetDialog();
closeSidebar();
// Reload first module
const modules = lessonEngine.modules;
if (modules.length > 0) {
selectModule(modules[0].id);
}
updateProgressDisplay();
} }
// ================= INITIALIZATION ================= // ================= INITIALIZATION =================
@@ -575,10 +535,13 @@ function init() {
}); });
elements.resetCodeBtn.addEventListener("click", resetCode); elements.resetCodeBtn.addEventListener("click", resetCode);
// Modals // Dialogs
elements.helpBtn.addEventListener("click", showHelp); elements.helpBtn.addEventListener("click", showHelp);
elements.modalClose.addEventListener("click", closeModal); elements.helpDialogClose.addEventListener("click", closeHelpDialog);
elements.resetBtn.addEventListener("click", showResetConfirmation); elements.resetBtn.addEventListener("click", showResetConfirmation);
elements.resetDialogClose.addEventListener("click", closeResetDialog);
elements.cancelReset.addEventListener("click", closeResetDialog);
elements.confirmReset.addEventListener("click", handleResetConfirm);
// Settings // Settings
elements.disableFeedbackToggle.addEventListener("change", (e) => { elements.disableFeedbackToggle.addEventListener("change", (e) => {
@@ -599,10 +562,9 @@ function init() {
e.preventDefault(); e.preventDefault();
} }
// Escape to close sidebar // Escape to close sidebar (dialogs handle Escape natively)
if (e.key === "Escape") { if (e.key === "Escape") {
closeSidebar(); closeSidebar();
closeModal();
} }
}); });
} }

108
src/app.js
View File

@@ -49,11 +49,13 @@ const elements = {
resetBtn: document.getElementById("reset-btn"), resetBtn: document.getElementById("reset-btn"),
disableFeedbackToggle: document.getElementById("disable-feedback-toggle"), disableFeedbackToggle: document.getElementById("disable-feedback-toggle"),
// Modal // Dialogs
modalContainer: document.getElementById("modal-container"), helpDialog: document.getElementById("help-dialog"),
modalTitle: document.getElementById("modal-title"), helpDialogClose: document.getElementById("help-dialog-close"),
modalContent: document.getElementById("modal-content"), resetDialog: document.getElementById("reset-dialog"),
modalClose: document.getElementById("modal-close") resetDialogClose: document.getElementById("reset-dialog-close"),
cancelReset: document.getElementById("cancel-reset"),
confirmReset: document.getElementById("confirm-reset")
}; };
// Initialize the lesson engine - now the single source of truth // Initialize the lesson engine - now the single source of truth
@@ -448,78 +450,36 @@ function runCode() {
} }
} }
// ================= MODALS ================= // ================= DIALOGS =================
function showHelp() { function showHelp() {
elements.modalTitle.textContent = "Help"; elements.helpDialog.showModal();
}
elements.modalContent.innerHTML = ` function closeHelpDialog() {
<h3>How to Use Code Crispies</h3> elements.helpDialog.close();
<p>Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.</p>
<h4>Getting Started</h4>
<p>Open the menu (☰) to select a lesson module. Each module contains a series of lessons.</p>
<h4>Completing Lessons</h4>
<ol>
<li>Read the instructions on the left</li>
<li>Write your code in the editor</li>
<li>Click "Run" or press Ctrl+Enter to test</li>
<li>Follow the hints to fix any issues</li>
<li>Click "Next" when you're done</li>
</ol>
<h4>Tips</h4>
<ul>
<li>Click "Show Expected" to see the target result</li>
<li>Your progress is saved automatically</li>
<li>Ctrl+Enter runs your code</li>
</ul>
<h4>Emmet Shortcuts (HTML mode)</h4>
<p>Type abbreviations and press Tab to expand:</p>
<ul>
<li><kbd>div.container</kbd> → div with class</li>
<li><kbd>ul>li*5</kbd> → ul with 5 li children</li>
<li><kbd>nav>ul>li*3>a</kbd> → nested structure</li>
<li><kbd>p{Hello}</kbd> → p with text content</li>
</ul>
`;
elements.modalContainer.classList.remove("hidden");
} }
function showResetConfirmation() { function showResetConfirmation() {
elements.modalTitle.textContent = "Reset Progress"; elements.resetDialog.showModal();
elements.modalContent.innerHTML = `
<p>Are you sure you want to reset all your progress? This cannot be undone.</p>
<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
<button id="cancel-reset" class="btn">Cancel</button>
<button id="confirm-reset" class="btn btn-ghost">Reset All</button>
</div>
`;
document.getElementById("cancel-reset").addEventListener("click", closeModal);
document.getElementById("confirm-reset").addEventListener("click", () => {
lessonEngine.clearProgress();
closeModal();
closeSidebar();
// Reload first module
const modules = lessonEngine.modules;
if (modules.length > 0) {
selectModule(modules[0].id);
}
updateProgressDisplay();
});
elements.modalContainer.classList.remove("hidden");
} }
function closeModal() { function closeResetDialog() {
elements.modalContainer.classList.add("hidden"); elements.resetDialog.close();
}
function handleResetConfirm() {
lessonEngine.clearProgress();
closeResetDialog();
closeSidebar();
// Reload first module
const modules = lessonEngine.modules;
if (modules.length > 0) {
selectModule(modules[0].id);
}
updateProgressDisplay();
} }
// ================= INITIALIZATION ================= // ================= INITIALIZATION =================
@@ -575,10 +535,13 @@ function init() {
}); });
elements.resetCodeBtn.addEventListener("click", resetCode); elements.resetCodeBtn.addEventListener("click", resetCode);
// Modals // Dialogs
elements.helpBtn.addEventListener("click", showHelp); elements.helpBtn.addEventListener("click", showHelp);
elements.modalClose.addEventListener("click", closeModal); elements.helpDialogClose.addEventListener("click", closeHelpDialog);
elements.resetBtn.addEventListener("click", showResetConfirmation); elements.resetBtn.addEventListener("click", showResetConfirmation);
elements.resetDialogClose.addEventListener("click", closeResetDialog);
elements.cancelReset.addEventListener("click", closeResetDialog);
elements.confirmReset.addEventListener("click", handleResetConfirm);
// Settings // Settings
elements.disableFeedbackToggle.addEventListener("change", (e) => { elements.disableFeedbackToggle.addEventListener("change", (e) => {
@@ -599,10 +562,9 @@ function init() {
e.preventDefault(); e.preventDefault();
} }
// Escape to close sidebar // Escape to close sidebar (dialogs handle Escape natively)
if (e.key === "Escape") { if (e.key === "Escape") {
closeSidebar(); closeSidebar();
closeModal();
} }
}); });
} }

62
src/index.de.html
View File

@@ -136,18 +136,60 @@
</footer> </footer>
</aside> </aside>
<!-- Hilfe-Modal --> <!-- Hilfe-Dialog -->
<div id="modal-container" class="modal-container hidden"> <dialog id="help-dialog" class="dialog">
<div class="modal"> <div class="dialog-header">
<div class="modal-header"> <h3>Hilfe</h3>
<h3 id="modal-title">Modal-Titel</h3> <button id="help-dialog-close" class="dialog-close" aria-label="Schließen">&times;</button>
<button id="modal-close" class="modal-close">&times;</button> </div>
</div> <div class="dialog-content">
<div class="modal-content" id="modal-content"> <h4>So verwendest du Code Crispies</h4>
<!-- Modal-Inhalt wird hier eingefügt --> <p>Code Crispies ist eine interaktive Plattform zum Lernen von HTML, CSS und Tailwind durch praktische Übungen.</p>
<h4>Erste Schritte</h4>
<p>Öffne das Menü (☰), um ein Lektionsmodul auszuwählen. Jedes Modul enthält eine Reihe von Lektionen.</p>
<h4>Lektionen abschließen</h4>
<ol>
<li>Lies die Anleitung auf der linken Seite</li>
<li>Schreibe deinen Code im Editor</li>
<li>Klicke auf "Ausführen" oder drücke Strg+Enter zum Testen</li>
<li>Folge den Hinweisen, um Fehler zu beheben</li>
<li>Klicke auf "Weiter", wenn du fertig bist</li>
</ol>
<h4>Tipps</h4>
<ul>
<li>Klicke auf "Lösung zeigen", um das Zielergebnis zu sehen</li>
<li>Dein Fortschritt wird automatisch gespeichert</li>
<li>Strg+Enter führt deinen Code aus</li>
</ul>
<h4>Emmet-Kürzel (HTML-Modus)</h4>
<p>Tippe Abkürzungen und drücke Tab zum Erweitern:</p>
<ul>
<li><kbd>div.container</kbd> → div mit Klasse</li>
<li><kbd>ul>li*5</kbd> → ul mit 5 li-Kindern</li>
<li><kbd>nav>ul>li*3>a</kbd> → verschachtelte Struktur</li>
<li><kbd>p{Hallo}</kbd> → p mit Textinhalt</li>
</ul>
</div>
</dialog>
<!-- Zurücksetzen-Bestätigungsdialog -->
<dialog id="reset-dialog" class="dialog">
<div class="dialog-header">
<h3>Fortschritt zurücksetzen</h3>
<button id="reset-dialog-close" class="dialog-close" aria-label="Schließen">&times;</button>
</div>
<div class="dialog-content">
<p>Bist du sicher, dass du deinen gesamten Fortschritt zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.</p>
<div class="dialog-actions">
<button id="cancel-reset" class="btn">Abbrechen</button>
<button id="confirm-reset" class="btn btn-ghost">Alles zurücksetzen</button>
</div> </div>
</div> </div>
</div> </dialog>
</div> </div>
<script type="module" src="app.de.js"></script> <script type="module" src="app.de.js"></script>

62
src/index.html
View File

@@ -136,18 +136,60 @@
</footer> </footer>
</aside> </aside>
<!-- Help Modal --> <!-- Help Dialog -->
<div id="modal-container" class="modal-container hidden"> <dialog id="help-dialog" class="dialog">
<div class="modal"> <div class="dialog-header">
<div class="modal-header"> <h3>Help</h3>
<h3 id="modal-title">Modal Title</h3> <button id="help-dialog-close" class="dialog-close" aria-label="Close">&times;</button>
<button id="modal-close" class="modal-close">&times;</button> </div>
</div> <div class="dialog-content">
<div class="modal-content" id="modal-content"> <h4>How to Use Code Crispies</h4>
<!-- Modal content will be populated here --> <p>Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.</p>
<h4>Getting Started</h4>
<p>Open the menu (☰) to select a lesson module. Each module contains a series of lessons.</p>
<h4>Completing Lessons</h4>
<ol>
<li>Read the instructions on the left</li>
<li>Write your code in the editor</li>
<li>Click "Run" or press Ctrl+Enter to test</li>
<li>Follow the hints to fix any issues</li>
<li>Click "Next" when you're done</li>
</ol>
<h4>Tips</h4>
<ul>
<li>Click "Show Expected" to see the target result</li>
<li>Your progress is saved automatically</li>
<li>Ctrl+Enter runs your code</li>
</ul>
<h4>Emmet Shortcuts (HTML mode)</h4>
<p>Type abbreviations and press Tab to expand:</p>
<ul>
<li><kbd>div.container</kbd> → div with class</li>
<li><kbd>ul>li*5</kbd> → ul with 5 li children</li>
<li><kbd>nav>ul>li*3>a</kbd> → nested structure</li>
<li><kbd>p{Hello}</kbd> → p with text content</li>
</ul>
</div>
</dialog>
<!-- Reset Confirmation Dialog -->
<dialog id="reset-dialog" class="dialog">
<div class="dialog-header">
<h3>Reset Progress</h3>
<button id="reset-dialog-close" class="dialog-close" aria-label="Close">&times;</button>
</div>
<div class="dialog-content">
<p>Are you sure you want to reset all your progress? This cannot be undone.</p>
<div class="dialog-actions">
<button id="cancel-reset" class="btn">Cancel</button>
<button id="confirm-reset" class="btn btn-ghost">Reset All</button>
</div> </div>
</div> </div>
</div> </dialog>
</div> </div>
<script type="module" src="app.js"></script> <script type="module" src="app.js"></script>

87
src/main.css
View File

@@ -839,32 +839,24 @@ input:checked + .toggle-slider::before {
} }
/* ================= MODAL ================= */ /* ================= DIALOG (Native HTML) ================= */
.modal-container { .dialog {
position: fixed; border: none;
inset: 0;
background: var(--modal-bg);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-container.hidden {
display: none;
}
.modal {
background: var(--panel-bg);
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-modal); box-shadow: var(--shadow-modal);
padding: 0;
width: 90%; width: 90%;
max-width: 500px; max-width: 500px;
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
background: var(--panel-bg);
} }
.modal-header { .dialog::backdrop {
background: var(--modal-bg);
}
.dialog-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -872,22 +864,75 @@ input:checked + .toggle-slider::before {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
.modal-close { .dialog-header h3 {
margin: 0;
}
.dialog-close {
background: none; background: none;
border: none; border: none;
font-size: 1.5rem; font-size: 1.5rem;
cursor: pointer; cursor: pointer;
color: var(--light-text); color: var(--light-text);
line-height: 1;
padding: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
} }
.modal-content { .dialog-close:hover {
background: var(--primary-bg-light);
color: var(--primary-color);
}
.dialog-content {
padding: var(--spacing-lg); padding: var(--spacing-lg);
} }
.modal-content p { .dialog-content h4 {
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-xs);
color: var(--dark-text);
}
.dialog-content h4:first-child {
margin-top: 0;
}
.dialog-content p {
margin-bottom: var(--spacing-md); margin-bottom: var(--spacing-md);
} }
.dialog-content ul,
.dialog-content ol {
margin: 0 0 var(--spacing-md) 0;
padding-left: var(--spacing-lg);
}
.dialog-content li {
margin-bottom: var(--spacing-xs);
}
.dialog-content kbd {
background: var(--code-bg);
padding: 2px 6px;
border-radius: var(--border-radius-sm);
font-size: 0.85em;
border: 1px solid var(--border-color);
}
.dialog-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
/* ================= FOOTER ================= */ /* ================= FOOTER ================= */
.app-footer { .app-footer {
padding: var(--spacing-md); padding: var(--spacing-md);