Mini HTML-Editor

Mika.html Öffnen

🔗 Link 🖼 Bild 🎨 Farbcode 📋 Liste (ul/li) 🃏 Karte (div) ⚡ Javascript-Block

// Wochentage-Vorlage
    const daysOfWeek = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"];

// Event Listener für den Button aktivieren
    document.getElementById('calcBtn').addEventListener('click', function() {
        // Holt sich die aktuelle Eingabe aus dem Textfeld
        const sportart = document.getElementById('sportart').value.trim() || "Training";
        const ziel = document.getElementById('ziel').value;
        const tageAnzahl = parseInt(document.getElementById('tage').value);

// 1. Zufälligen Motivationsspruch wählen
        const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
        document.getElementById('quoteContainer').innerText = `"${randomQuote}"`;

// 2. Trainingsstruktur festlegen basierend auf der Anzahl der Tage
        let schedulePattern = [];
        if (tageAnzahl === 2) schedulePattern = [false, true, false, false, true, false, false]; // Di, Fr
        else if (tageAnzahl === 3) schedulePattern = [true, false, true, false, true, false, false]; // Mo, Mi, Fr
        else if (tageAnzahl === 4) schedulePattern = [true, false, true, false, true, false, true]; // Mo, Mi, Fr, So
        else if (tageAnzahl === 5) schedulePattern = [true, true, false, true, true, false, true]; // Mo, Di, Do, Fr, So

// Intensitäts-Reihenfolge für die Trainingstage
        const intensities = ["leicht", "mittel", "intensiv", "leicht", "mittel"];
        let intensityIndex = 0;

// 3. HTML für den Plan generieren
        let htmlContent = "";

daysOfWeek.forEach((tag, index) => {
            const isTrainingDay = schedulePattern[index];
            
            if (isTrainingDay) {
                const aktuelleIntensitaet = intensities[intensityIndex % intensities.length];
                intensityIndex++;

// FEHLER BEHOBEN: Variable wird hier nur befüllt, nicht neu deklariert
                let einheitText = "";
                if (ziel === "Wettkampf") {
                    einheitText = `${sportart} (Fokus: Leistung & Tempo)`;
                } else if (ziel === "Abnehmen") {
                    einheitText = `${sportart} (Fokus: Fettverbrennung & Ausdauer)`;
                } else {
                    einheitText = `${sportart} (Fokus: Ausgleich & Gesundheit)`;
                }

htmlContent += `
                    <div class="day-card">
                        <div class="day-name">${tag}</div>
                        <div class="day-content">${einheitText}</div>
                        <span class="badge ${aktuelleIntensitaet}">${aktuelleIntensitaet}</span>
                    </div>
                `;
            } else {
                htmlContent += `
                    <div class="day-card" style="opacity: 0.7;">
                        <div class="day-name">${tag}</div>
                        <div class="day-content" style="color: var(--text-light)">Regeneration & Erholung</div>
                        <span class="badge rest">Pause</span>
                    </div>
                `;
            }
        });

// Plan einfügen und sichtbar machen
        document.getElementById('planContainer').innerHTML = htmlContent;
        document.getElementById('result').style.display = 'block';
        
        // Sanftes Scrollen zum Ergebnis
        document.getElementById('result').scrollIntoView({ behavior: 'smooth' });
    });
</script>

⚙ Projekt-Eigenschaften