Crumb-Core-v.1/docs/crumbforest/Schnippsi_button.md

html

Hallo, Sonnenschein! ☀️

🌙 Nachtmodus aktivieren

Willkommen in der freundlichen Welt von Schnippsi! 🌈

Spielzeuge

• In den Korb legen
• In den Korb legen
• In den Korb legen

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 = `
    <img src="${toyImage}" alt="${toyAlt}" />
    <p>${toyName}</p>
    <button class="remove-from-cart">Aus dem Korb nehmen</button>
  `;
  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! 🎨💻🌍