### html

Hallo, Sonnenschein! ☀️

Willkommen in der freundlichen Welt von Schnippsi! 🌈

Spielzeuge

Dein Spielzeugkorb

jsInput.value = `console.log("Krümel hat gerade Schnippsis Editor benutzt! 🧁");`; --- ### cssCode /* Grundlegende Farben und Layout */ body { font-family: sans-serif; margin: 0; padding: 2rem; transition: background-color 0.3s ease, color 0.3s ease; } body.light { background-color: #fffbea; color: #333; } body.dark { background-color: #1e1e2f; color: #f1f1f1; } button { background: #ffd700; border: none; padding: 1rem 1.5rem; font-size: 1rem; border-radius: 0.5rem; cursor: pointer; transition: background 0.3s ease; } button:hover { background: #ffcc00; } body.dark button { background: #444; color: #fff; } body.dark button:hover { background: #666; } .toy-list, .basket-list { list-style: none; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; } .toy, .basket-item { border: 2px solid #ccc; border-radius: 10px; padding: 1rem; text-align: center; background-color: #fefefe; width: 150px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); } button { margin-top: 0.5rem; padding: 0.5rem; font-size: 1rem; background-color: #88c0d0; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover, button:focus { background-color: #5e81ac; outline: none; } --- ### js console.log("Krümel hat gerade Schnippsis Editor benutzt! 🧁"); document.addEventListener('DOMContentLoaded', () => { // JSON-Anzeige & Senden function sendToyToAPI(toyData) { // Kindgerechte Ausgabe im Log console.log("✨ Super! Du hast " + toyData.name + " in den Korb gelegt."); console.log("📦 JSON-Objekt wird an /crumbapi/toylog gesendet:"); console.log(toyData); // Abschicken an die API fetch('/crumbapi/toylog', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(toyData) }) .then(response => response.json()) .then(result => { console.log("✅ Erfolgreich gespeichert:", result); }) .catch(error => { console.error("❌ Fehler beim Speichern:", error); }); } //json const showJSON = (obj) => { let jsonBox = document.querySelector('.json-preview'); if (!jsonBox) { jsonBox = document.createElement('pre'); jsonBox.className = 'json-preview'; jsonBox.style.background = '#f9f9f9'; jsonBox.style.border = '1px solid #ccc'; jsonBox.style.padding = '1rem'; jsonBox.style.marginTop = '1rem'; jsonBox.style.whiteSpace = 'pre-wrap'; jsonBox.style.fontSize = '0.9rem'; document.body.appendChild(jsonBox); } jsonBox.textContent = JSON.stringify(obj, null, 2); }; // 🧁 Schnippsi Reaktionsfunktion const schnippsiRespond = (text) => { let basketDiv = document.querySelector('.response-message'); if (!basketDiv) { basketDiv = document.createElement('div'); basketDiv.className = 'response-message'; basketDiv.style.marginTop = '1rem'; basketDiv.style.fontSize = '1.2rem'; basketDiv.style.transition = 'opacity 0.3s ease'; document.body.appendChild(basketDiv); } basketDiv.textContent = text; basketDiv.style.opacity = 1; setTimeout(() => { basketDiv.style.opacity = 0.5; }, 3000); }; // Lichtschalter const toggleButton = document.getElementById('toggleTheme'); toggleButton.addEventListener('click', () => { const body = document.body; const isLight = body.classList.contains('light'); body.classList.toggle('light', !isLight); body.classList.toggle('dark', isLight); toggleButton.textContent = isLight ? '☀️ Tagmodus aktivieren' : '🌙 Nachtmodus aktivieren'; schnippsiRespond(isLight ? "Guten Morgen, Sonnenschein! ☀️" : "Nachtmodus aktiviert. Kuschelig! 🌙"); }); // Spielzeugkorb const basket = document.getElementById('basket'); document.querySelectorAll('.add-to-cart').forEach(button => { button.addEventListener('click', () => { const toyItem = button.closest('.toy'); const toyName = toyItem.dataset.toy; const toyImage = toyItem.querySelector('img').src; const toyAlt = toyItem.querySelector('img').alt; const basketItem = document.createElement('li'); basketItem.className = 'basket-item'; basketItem.innerHTML = ` ${toyAlt}

${toyName}

`; basket.appendChild(basketItem); const toyData = { name: toyName, image: toyImage, alt: toyAlt, timestamp: new Date().toISOString() }; schnippsiRespond(`✨ Super! Du hast ${toyName} in den Korb gelegt.`); showJSON(toyData); // API senden sendToyToAPI(toyData); basketItem.querySelector('.remove-from-cart').addEventListener('click', () => { basket.removeChild(basketItem); schnippsiRespond(`👋 ${toyName} wurde aus dem Korb genommen.`); }); }); }); }); --- 🌈 Wuuuuhuuuu! Das war ein riesiger Schritt für Schnippsi und die ganze Crew! Mit dem JSON-Logging habt ihr jetzt eine lebendige Erinnerung im Krümelwald geschaffen — wie ein digitales Baumhaus voller Spielzeugeinträge, Umschalter-Tänze und Kinderlogik. 💡🌳 Wenn du willst, baue ich dir als Nächstes: ### 🧁 **Schnippsis Keksbuch-UI** Ein Mini-Frontend in Vanilla JS, das: * alle `toylog`-Einträge liest (z. B. aus `/markdowns/viewApi/toylog.json`) * sie hübsch im Browser anzeigt * optional filterbar oder durchsuchbar ist * barrierefrei und mobilfreundlich bleibt Und falls du willst, können wir sogar: * 🧠 Lieblingsspielzeuge mit Herz markieren * 📤 neue Spielzeuge direkt hinzufügen * 🔄 ein Live-Reload der Einträge basteln Sag einfach: > „Schnippsi, lass uns das Keksbuch aufklappen!“ 🍪📖 Dann schnipsel ich dir das Grundgerüst für die Anzeige und verknüpfe es mit dem Crumbforest-Backend. Mach dich bereit — die Spielzeug-Geschichte wird jetzt interaktiv! 🎨💻🌍