diff --git a/src/app.de.js b/src/app.de.js index 05221e0..54e260a 100644 --- a/src/app.de.js +++ b/src/app.de.js @@ -49,11 +49,13 @@ const elements = { resetBtn: document.getElementById("reset-btn"), disableFeedbackToggle: document.getElementById("disable-feedback-toggle"), - // Modal - modalContainer: document.getElementById("modal-container"), - modalTitle: document.getElementById("modal-title"), - modalContent: document.getElementById("modal-content"), - modalClose: document.getElementById("modal-close") + // Dialogs + helpDialog: document.getElementById("help-dialog"), + helpDialogClose: document.getElementById("help-dialog-close"), + resetDialog: document.getElementById("reset-dialog"), + 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 @@ -448,78 +450,36 @@ function runCode() { } } -// ================= MODALS ================= +// ================= DIALOGS ================= function showHelp() { - elements.modalTitle.textContent = "Hilfe"; + elements.helpDialog.showModal(); +} - elements.modalContent.innerHTML = ` -

So verwendest du Code Crispies

-

Code Crispies ist eine interaktive Plattform zum Erlernen von HTML, CSS und Tailwind durch praktische Übungen.

- -

Erste Schritte

-

Öffne das Menü (☰), um ein Lektionsmodul auszuwählen. Jedes Modul enthält eine Reihe von Lektionen.

- -

Lektionen abschließen

-
    -
  1. Lies die Anleitung auf der linken Seite
    2. -
  2. Schreibe deinen Code im Editor
    3. -
  3. Klicke auf "Ausführen" oder drücke Strg+Enter zum Testen
    4. -
  4. Folge den Hinweisen, um Probleme zu beheben
    5. -
  5. Klicke auf "Weiter", wenn du fertig bist
    6. -
- -

Tipps

- - -

Emmet-Kürzel (HTML-Modus)

-

Tippe Abkürzungen ein und drücke Tab zum Erweitern:

- - `; - - elements.modalContainer.classList.remove("hidden"); +function closeHelpDialog() { + elements.helpDialog.close(); } function showResetConfirmation() { - elements.modalTitle.textContent = "Fortschritt zurücksetzen"; - - elements.modalContent.innerHTML = ` -

Bist du sicher, dass du deinen gesamten Fortschritt zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.

-
- - -
- `; - - 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"); + elements.resetDialog.showModal(); } -function closeModal() { - elements.modalContainer.classList.add("hidden"); +function closeResetDialog() { + 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 ================= @@ -575,10 +535,13 @@ function init() { }); elements.resetCodeBtn.addEventListener("click", resetCode); - // Modals + // Dialogs elements.helpBtn.addEventListener("click", showHelp); - elements.modalClose.addEventListener("click", closeModal); + elements.helpDialogClose.addEventListener("click", closeHelpDialog); elements.resetBtn.addEventListener("click", showResetConfirmation); + elements.resetDialogClose.addEventListener("click", closeResetDialog); + elements.cancelReset.addEventListener("click", closeResetDialog); + elements.confirmReset.addEventListener("click", handleResetConfirm); // Settings elements.disableFeedbackToggle.addEventListener("change", (e) => { @@ -599,10 +562,9 @@ function init() { e.preventDefault(); } - // Escape to close sidebar + // Escape to close sidebar (dialogs handle Escape natively) if (e.key === "Escape") { closeSidebar(); - closeModal(); } }); } diff --git a/src/app.js b/src/app.js index a42b80a..d82b528 100644 --- a/src/app.js +++ b/src/app.js @@ -49,11 +49,13 @@ const elements = { resetBtn: document.getElementById("reset-btn"), disableFeedbackToggle: document.getElementById("disable-feedback-toggle"), - // Modal - modalContainer: document.getElementById("modal-container"), - modalTitle: document.getElementById("modal-title"), - modalContent: document.getElementById("modal-content"), - modalClose: document.getElementById("modal-close") + // Dialogs + helpDialog: document.getElementById("help-dialog"), + helpDialogClose: document.getElementById("help-dialog-close"), + resetDialog: document.getElementById("reset-dialog"), + 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 @@ -448,78 +450,36 @@ function runCode() { } } -// ================= MODALS ================= +// ================= DIALOGS ================= function showHelp() { - elements.modalTitle.textContent = "Help"; + elements.helpDialog.showModal(); +} - elements.modalContent.innerHTML = ` -

How to Use Code Crispies

-

Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.

- -

Getting Started

-

Open the menu (☰) to select a lesson module. Each module contains a series of lessons.

- -

Completing Lessons

-
    -
  1. Read the instructions on the left
    2. -
  2. Write your code in the editor
    3. -
  3. Click "Run" or press Ctrl+Enter to test
    4. -
  4. Follow the hints to fix any issues
    5. -
  5. Click "Next" when you're done
    6. -
- -

Tips

- - -

Emmet Shortcuts (HTML mode)

-

Type abbreviations and press Tab to expand:

- - `; - - elements.modalContainer.classList.remove("hidden"); +function closeHelpDialog() { + elements.helpDialog.close(); } function showResetConfirmation() { - elements.modalTitle.textContent = "Reset Progress"; - - elements.modalContent.innerHTML = ` -

Are you sure you want to reset all your progress? This cannot be undone.

-
- - -
- `; - - 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"); + elements.resetDialog.showModal(); } -function closeModal() { - elements.modalContainer.classList.add("hidden"); +function closeResetDialog() { + 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 ================= @@ -575,10 +535,13 @@ function init() { }); elements.resetCodeBtn.addEventListener("click", resetCode); - // Modals + // Dialogs elements.helpBtn.addEventListener("click", showHelp); - elements.modalClose.addEventListener("click", closeModal); + elements.helpDialogClose.addEventListener("click", closeHelpDialog); elements.resetBtn.addEventListener("click", showResetConfirmation); + elements.resetDialogClose.addEventListener("click", closeResetDialog); + elements.cancelReset.addEventListener("click", closeResetDialog); + elements.confirmReset.addEventListener("click", handleResetConfirm); // Settings elements.disableFeedbackToggle.addEventListener("change", (e) => { @@ -599,10 +562,9 @@ function init() { e.preventDefault(); } - // Escape to close sidebar + // Escape to close sidebar (dialogs handle Escape natively) if (e.key === "Escape") { closeSidebar(); - closeModal(); } }); } diff --git a/src/index.de.html b/src/index.de.html index aa13f25..c66b435 100644 --- a/src/index.de.html +++ b/src/index.de.html @@ -136,18 +136,60 @@ - -