html

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! 🎨💻🌍