Keine Vorschau vorhanden
Code-Snapshot
Dies ist der veröffentlichte Zustand. Spätere Änderungen am Code überschreiben diese Veröffentlichung nicht automatisch.
[{"text":"Projekt","spriteCssClass":"fa fa-folder","items":[{"text":"index.html","spriteCssClass":"fa fa-file-code-o","code":"<!DOCTYPE html>\n<html lang='de'>\n<head>\n <meta charset='UTF-8'>\n <meta name='viewport' content='width=device-width, initial-scale=1.0'>\n <title>Meine WebApp</title>\n <link rel='stylesheet' href='style.css'>\n</head>\n\n<body>\n <header class='kopfbereich'>\n <div>\n <p class='label'>Taschenrechner</p>\n <h1 id='appTitel'>Modern Calculator</h1>\n <p id='appBeschreibung'>Ein wissenschaftlicher Taschenrechner mit erweiterten Funktionen.</p>\n </div>\n <button id='modusSchalter' class='sekundaerKnopf'>Modus wechseln</button>\n </header>\n\n <main class='layout'>\n <section class='karte heldenKarte'>\n <h2>📱 Taschenrechner</h2>\n <div class='rechnerDisplay' id='display'>0</div>\n <div class='rechnerTasten'>\n <button class='taste funktion' data-action='clear'>AC</button>\n <button class='taste funktion' data-action='negate'>+/-</button>\n <button class='taste funktion' data-action='percent'>%</button>\n <button class='taste operator' data-action='operator'>÷</button>\n\n <button class='taste' data-value='7'>7</button>\n <button class='taste' data-value='8'>8</button>\n <button class='taste' data-value='9'>9</button>\n <button class='taste operator' data-action='operator'>×</button>\n\n <button class='taste' data-value='4'>4</button>\n <button class='taste' data-value='5'>5</button>\n <button class='taste' data-value='6'>6</button>\n <button class='taste operator' data-action='operator'>-</button>\n\n <button class='taste' data-value='1'>1</button>\n <button class='taste' data-value='2'>2</button>\n <button class='taste' data-value='3'>3</button>\n <button class='taste operator' data-action='operator'>+</button>\n\n <button class='taste null' data-value='0'>0</button>\n <button class='taste' data-value='.'>.</button>\n <button class='taste operator' data-action='equals'>=</button>\n <button class='taste funktion' data-action='sqrt'>√</button>\n <button class='taste funktion' data-action='power'>^</button>\n <button class='taste funktion' data-action='openParen'>(</button>\n <button class='taste funktion' data-action='closeParen'>)</button>\n <button class='taste funktion' data-action='memoryAdd'>M+</button>\n <button class='taste funktion' data-action='memorySubtract'>M-</button>\n <button class='taste funktion' data-action='memoryRecall'>MR</button>\n </div>\n <p id='statusText' class='status'>Bereit für Eingaben.</p>\n </section>\n\n <section class='karte'>\n <h2>ℹ️ Bedienung</h2>\n <ul>\n <li><strong>Zahlen:</strong> 0-9</li>\n <li><strong>Operatoren:</strong> +, -, ×, ÷</li>\n <li><strong>AC:</strong> Alles löschen</li>\n <li><strong>+/-:</strong> Vorzeichen wechseln</li>\n <li><strong>%:</strong> Prozentwert</li>\n <li><strong>=:</strong> Ergebnis berechnen</li>\n <li><strong>√:</strong> Quadratwurzel</li>\n <li><strong>^:</strong> Potenz</li>\n <li><strong>( ):</strong> Klammern</li>\n <li><strong>M+:</strong> Zum Speicher addieren</li>\n <li><strong>M-:</strong> Vom Speicher subtrahieren</li>\n <li><strong>MR:</strong> Speicher abrufen</li>\n </ul>\n </section>\n\n <section class='karte vorschauKarte'>\n <h2>📊 Beispiel</h2>\n <div id='vorschauFeld' class='vorschauFeld'>\n <strong>Beispielrechnung:</strong>\n <span>Drücke 5 × 3 =</span>\n </div>\n </section>\n\n <section class='karte'>\n <h2>📝 Listenberechnung</h2>\n <div class='aktionsZeile'>\n <input type='text' id='zahlenEingabe' placeholder='Zahlen durch Komma trennen, z.B. 3,7,2,9'>\n </div>\n <div class='aktionsZeile'>\n <button id='summeKnopf' class='sekundaerKnopf'>Summe berechnen</button>\n <button id='durchschnittKnopf' class='sekundaerKnopf'>Durchschnitt berechnen</button>\n </div>\n <div class='aktionsZeile'>\n <button id='minKnopf' class='sekundaerKnopf'>Minimum</button>\n <button id='maxKnopf' class='sekundaerKnopf'>Maximum</button>\n </div>\n <div id='ergebnisAnzeige' class='vorschauFeld'>\n <strong>Ergebnisse:</strong>\n <span id='ergebnisText'>Bitte Zahlen eingeben und eine Berechnung auswählen.</span>\n </div>\n <div id='listenAnzeige' class='vorschauFeld'>\n <strong>Aktuelle Liste:</strong>\n <span id='listenText'>Keine Daten</span>\n </div>\n </section>\n </main>\n\n <footer class='fussbereich'>\n <p>Ein einfacher Taschenrechner mit HTML, CSS und JavaScript.</p>\n </footer>\n\n <script src='script.js'></script>\n</body>\n</html>","isMain":true},{"text":"script.js","spriteCssClass":"fa fa-file-code-o","code":"const display = document.querySelector('#display');\nconst tasten = document.querySelectorAll('.taste');\nconst statusText = document.querySelector('#statusText');\nconst modusSchalter = document.querySelector('#modusSchalter');\n\nlet currentInput = '0';\nlet previousInput = '';\nlet operation = null;\nlet resetScreen = false;\nlet memoryValue = 0;\nlet isExpertMode = false;\n\nfunction updateDisplay() {\n display.textContent = currentInput;\n}\n\nfunction handleNumber(value) {\n if (currentInput === '0' || resetScreen) {\n currentInput = value;\n resetScreen = false;\n } else {\n currentInput += value;\n }\n updateDisplay();\n statusText.textContent = 'Eingabe: ' + currentInput;\n}\n\nfunction handleFunction(action) {\n switch (action) {\n case 'sqrt':\n currentInput = Math.sqrt(parseFloat(currentInput)).toString();\n updateDisplay();\n statusText.textContent = 'Wurzel berechnet.';\n break;\n case 'power':\n currentInput += '^';\n updateDisplay();\n statusText.textContent = 'Potenzmodus aktiv.';\n break;\n case 'openParen':\n currentInput += '(';\n updateDisplay();\n statusText.textContent = 'Klammer geöffnet.';\n break;\n case 'closeParen':\n currentInput += ')';\n updateDisplay();\n statusText.textContent = 'Klammer geschlossen.';\n break;\n case 'memoryAdd':\n memoryValue += parseFloat(currentInput);\n statusText.textContent = 'Wert zum Speicher addiert.';\n break;\n case 'memorySubtract':\n memoryValue -= parseFloat(currentInput);\n statusText.textContent = 'Wert vom Speicher subtrahiert.';\n break;\n case 'memoryRecall':\n currentInput = memoryValue.toString();\n updateDisplay();\n statusText.textContent = 'Speicherwert abgerufen.';\n break;\n }\n}\n\nfunction handleOperator(op) {\n if (operation !== null && !resetScreen) {\n statusText.textContent = 'Fehler: Zwei Operatoren hintereinander.';\n return;\n }\n previousInput = currentInput;\n operation = op;\n resetScreen = true;\n statusText.textContent = 'Operation: ' + op;\n}\n\nfunction handleAction(action) {\n switch (action) {\n case 'clear':\n currentInput = '0';\n previousInput = '';\n operation = null;\n updateDisplay();\n statusText.textContent = 'Bereit für Eingaben.';\n break;\n case 'negate':\n currentInput = (parseFloat(currentInput) * -1).toString();\n updateDisplay();\n statusText.textContent = 'Vorzeichen gewechselt.';\n break;\n case 'percent':\n currentInput = (parseFloat(currentInput) / 100).toString();\n updateDisplay();\n statusText.textContent = 'Prozentwert berechnet.';\n break;\n case 'equals':\n if (operation === null || previousInput === '') {\n statusText.textContent = 'Fehler: Keine Operation ausgewählt.';\n return;\n }\n calculateResult();\n break;\n }\n}\n\nfunction calculateResult() {\n const prev = parseFloat(previousInput);\n const current = parseFloat(currentInput);\n let result;\n\n switch (operation) {\n case '+':\n result = prev + current;\n break;\n case '-':\n result = prev - current;\n break;\n case '×':\n result = prev * current;\n break;\n case '÷':\n if (current === 0) {\n statusText.textContent = 'Fehler: Division durch Null.';\n return;\n }\n result = prev / current;\n break;\n default:\n statusText.textContent = 'Fehler: Ungültige Operation.';\n return;\n }\n\n // Rounding to 10 decimal places to avoid floating point precision issues\n result = Math.round(result * 1e10) / 1e10;\n currentInput = result.toString();\n operation = null;\n previousInput = '';\n resetScreen = true;\n updateDisplay();\n statusText.textContent = 'Ergebnis: ' + currentInput;\n}\n\nfunction handleButtonClick(e) {\n const button = e.target;\n const value = button.getAttribute('data-value');\n const action = button.getAttribute('data-action');\n\n if (value !== null) {\n handleNumber(value);\n } else if (action === 'operator') {\n handleOperator(button.textContent);\n } else if (action) {\n if (action === 'sqrt' || action === 'power' || action === 'openParen' || action === 'closeParen' || action === 'memoryAdd' || action === 'memorySubtract' || action === 'memoryRecall') {\n handleFunction(action);\n } else {\n handleAction(action);\n }\n }\n}\n\nfunction modusWechseln() {\n document.body.classList.toggle('hellerModus');\n isExpertMode = !isExpertMode;\n const modusText = isExpertMode ? 'Expertenmodus aktiviert' : 'Grundmodus aktiviert';\n statusText.textContent = modusText;\n updateDisplay();\n}\n\ntasten.forEach(taste => {\n taste.addEventListener('click', handleButtonClick);\n});\nmodusSchalter.addEventListener('click', modusWechseln);\n\nupdateDisplay();","isMain":false},{"text":"style.css","spriteCssClass":"fa fa-file-code-o","code":"* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n font-family: Arial, sans-serif;\n background: radial-gradient(circle at top left, #7c3aed, #111827 42%, #020617);\n color: #f8fafc;\n min-height: 100vh;\n}\n\n.kopfbereich {\n display: flex;\n justify-content: space-between;\n gap: 24px;\n align-items: center;\n padding: 36px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.15);\n}\n\n.label {\n margin: 0 0 8px;\n color: #a7f3d0;\n font-weight: bold;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n font-size: 0.8rem;\n}\n\nh1, h2, p {\n margin-top: 0;\n}\n\nh1 {\n font-size: clamp(2rem, 6vw, 4.4rem);\n margin-bottom: 12px;\n}\n\n.layout {\n display: grid;\n grid-template-columns: 1.2fr 0.8fr;\n gap: 22px;\n padding: 28px 36px;\n}\n\n.karte {\n background: rgba(15, 23, 42, 0.76);\n border: 1px solid rgba(255, 255, 255, 0.14);\n border-radius: 24px;\n padding: 24px;\n box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(12px);\n}\n\n.heldenKarte {\n grid-row: span 2;\n}\n\n.rechnerDisplay {\n background-color: rgba(255, 255, 255, 0.15);\n color: white;\n font-size: 2.5rem;\n text-align: right;\n padding: 20px 24px;\n border-radius: 16px;\n margin-bottom: 16px;\n min-height: 80px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n overflow: hidden;\n}\n\n.rechnerTasten {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 12px;\n}\n\n.taste {\n padding: 20px;\n font-size: 1.5rem;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.08);\n color: white;\n border: 1px solid rgba(255, 255, 255, 0.18);\n cursor: pointer;\n transition: background 0.2s, transform 0.1s;\n}\n\n.taste:hover {\n background: rgba(255, 255, 255, 0.15);\n transform: scale(1.05);\n}\n\n.taste.operator {\n background: rgba(236, 72, 153, 0.35);\n border-color: rgba(236, 72, 153, 0.5);\n}\n\n.taste.operator:hover {\n background: rgba(236, 72, 153, 0.5);\n}\n\n.taste.funktion {\n background: rgba(126, 34, 206, 0.35);\n border-color: rgba(126, 34, 206, 0.5);\n}\n\n.taste.funktion:hover {\n background: rgba(126, 34, 206, 0.5);\n}\n\n.taste.null {\n grid-column: span 2;\n border-radius: 40px;\n}\n\n.aktionsZeile {\n display: flex;\n gap: 12px;\n margin: 24px 0 12px;\n}\n\ninput {\n flex: 1;\n min-width: 0;\n padding: 14px 16px;\n border-radius: 14px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n background: rgba(255, 255, 255, 0.08);\n color: white;\n font-size: 1rem;\n}\n\nbutton {\n border: 0;\n border-radius: 14px;\n padding: 14px 18px;\n background: #34d399;\n color: #052e2b;\n font-weight: bold;\n cursor: pointer;\n transition: transform 0.2s, filter 0.2s;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n filter: brightness(1.1);\n}\n\n.sekundaerKnopf {\n background: rgba(255, 255, 255, 0.12);\n color: #f8fafc;\n border: 1px solid rgba(255, 255, 255, 0.18);\n}\n\n.status {\n color: #c4b5fd;\n min-height: 24px;\n}\n\n.bausteinListe {\n display: grid;\n gap: 10px;\n margin-bottom: 16px;\n}\n\n.baustein {\n padding: 14px;\n border-radius: 16px;\n background: rgba(255, 255, 255, 0.08);\n color: #cbd5e1;\n}\n\n.baustein.aktiv {\n background: rgba(52, 211, 153, 0.18);\n color: #bbf7d0;\n outline: 2px solid rgba(52, 211, 153, 0.45);\n}\n\n.vorschauFeld {\n min-height: 150px;\n border-radius: 20px;\n background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(236, 72, 153, 0.28));\n display: grid;\n place-items: center;\n text-align: center;\n padding: 24px;\n}\n\n.vorschauFeld span {\n display: block;\n margin-top: 8px;\n color: #dbeafe;\n}\n\n.fussbereich {\n padding: 20px 36px 36px;\n color: #cbd5e1;\n}\n\nbody.hellerModus {\n background: linear-gradient(135deg, #e0f2fe, #f5d0fe, #fef3c7);\n color: #0f172a;\n}\n\nbody.hellerModus .karte,\nbody.hellerModus .kopfbereich {\n background: rgba(255, 255, 255, 0.72);\n color: #0f172a;\n}\n\nbody.hellerModus .sekundaerKnopf {\n background: rgba(15, 23, 42, 0.08);\n color: #0f172a;\n}\n\n@media (max-width: 760px) {\n .kopfbereich,\n .aktionsZeile {\n flex-direction: column;\n align-items: stretch;\n }\n\n .layout {\n grid-template-columns: 1fr;\n padding: 20px;\n }\n\n .kopfbereich {\n padding: 24px 20px;\n }\n}","isMain":false}]}]