Familienangebote im August: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Zeile 1: Zeile 1:
<html lang="de">
cell.addEventListener("click", () => {
<head>
<meta charset="UTF-8">
<title>Familienangebote August 2026</title>


<style>
    const data = JSON.parse(localStorage.getItem(key) || "{}");
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}


h2 {
    const was = prompt("Was?", data.was || "");
     text-align: center;
     if (was === null) return;
}


.calendar {
     const wann = prompt("Wann?", data.wann || "");
     display: grid;
     if (wann === null) return;
    grid-template-columns: repeat(7, 1fr);
     gap: 8px;
}


.weekday {
    const zielgruppe = prompt("Zielgruppe?", data.zielgruppe || "");
    font-weight: bold;
     if (zielgruppe === null) return;
    text-align: center;
     padding: 10px;
    background: #f0f0f0;
}


.day {
    const wo = prompt("Wo?", data.wo || "");
    border: 1px solid #ccc;
     if (wo === null) return;
     min-height: 120px;
    padding: 8px;
    cursor: pointer;
    background: #fff;
    transition: 0.2s;
}


.day:hover {
    const anmeldung = prompt("Anmeldung?", data.anmeldung || "");
     background: #f8f8f8;
     if (anmeldung === null) return;
}


.day-number {
    const link = prompt("Link?", data.link || "");
    font-weight: bold;
     if (link === null) return;
     margin-bottom: 5px;
}


.note {
    const newData = {
    font-size: 13px;
        was,
     white-space: pre-wrap;
        wann,
}
        zielgruppe,
</style>
        wo,
        anmeldung,
        link
     };


</head>
    localStorage.setItem(key, JSON.stringify(newData));
<body>


<h2>Familienangebote – August 2026</h2>
    renderDay(cell, day, newData);
 
<div class="calendar" id="calendar"></div>
 
<script>
const calendar = document.getElementById("calendar");
 
const weekdays = [
    "Mo","Di","Mi","Do","Fr","Sa","So"
];
 
weekdays.forEach(day => {
    const el = document.createElement("div");
    el.className = "weekday";
    el.textContent = day;
    calendar.appendChild(el);
});
});
// August 2026 beginnt an einem Samstag
const firstDayOffset = 5;
// Leere Felder vor dem 1. August
for(let i = 0; i < firstDayOffset; i++){
    const empty = document.createElement("div");
    calendar.appendChild(empty);
}
// Tage erzeugen
for(let day = 1; day <= 31; day++) {
    const cell = document.createElement("div");
    cell.className = "day";
    const key = "august2026_" + day;
    const savedText = localStorage.getItem(key) || "";
    cell.innerHTML = `
        <div class="day-number">${day}</div>
        <div class="note">${savedText}</div>
    `;
    cell.addEventListener("click", () => {
        const current = localStorage.getItem(key) || "";
        const text = prompt(
            "Eintrag für den " + day + ". August 2026:",
            current
        );
        if(text !== null) {
            localStorage.setItem(key, text);
            cell.querySelector(".note").textContent = text;
        }
    });
    calendar.appendChild(cell);
}
</script>
</body>
</html>

Version vom 9. Juni 2026, 08:57 Uhr

cell.addEventListener("click", () => {

   const data = JSON.parse(localStorage.getItem(key) || "{}");
   const was = prompt("Was?", data.was || "");
   if (was === null) return;
   const wann = prompt("Wann?", data.wann || "");
   if (wann === null) return;
   const zielgruppe = prompt("Zielgruppe?", data.zielgruppe || "");
   if (zielgruppe === null) return;
   const wo = prompt("Wo?", data.wo || "");
   if (wo === null) return;
   const anmeldung = prompt("Anmeldung?", data.anmeldung || "");
   if (anmeldung === null) return;
   const link = prompt("Link?", data.link || "");
   if (link === null) return;
   const newData = {
       was,
       wann,
       zielgruppe,
       wo,
       anmeldung,
       link
   };
   localStorage.setItem(key, JSON.stringify(newData));
   renderDay(cell, day, newData);

});