JS 101

// JS liest das hier als erstes
let name = "Mikey";        // Schritt 1: Variable erstellen
name = "Dante";             // Schritt 2: Wert ändern
console.log(name);          // Schritt 3: "Dante" ausgeben
// Das hier wird NICHT "Mikey" ausgeben — name wurde geändert!

> 2 + 2
< 4

> console.log("Hallo Welt!")
< Hallo Welt!

> console.error("Das ist ein Fehler!")
< ❌ Das ist ein Fehler!

> console.warn("Vorsicht!")
< ⚠️ Vorsicht!

// ✅ let — kann geändert werden
let punkte = 0;
punkte = 10;   // OK

// ✅ const — unveränderlich
const name = "Mikey";
// name = "Dante";  // ❌ Fehler! const kann nicht geändert werden

// ❌ var — vermeide es
var alt = "nicht mehr benutzen";

const begruessung = "Hallo MyKeyZ!";   // String
const punkte = 42;                     // Number
const istEingeloggt = false;           // Boolean
const benutzer = null;                  // null — noch kein User
let ergebnis;                            // undefined bis Wert zugewiesen
const cave = { name: "Mikeys Center", punkte: 100 }; // Object

console.log(typeof begruessung);  // "string"
console.log(typeof punkte);       // "number"
console.log(typeof null);        // "object" ← bekannter JS-Bug!

const name = "Mikey";
const punkte = 42;

// ❌ Alte Methode — umständlich
console.log("Hallo " + name + "! Du hast " + punkte + " Punkte.");

// ✅ Template Literal — sauber und lesbar
console.log(`Hallo ${name}! Du hast ${punkte} Punkte.`);

// Auch Ausdrücke möglich
console.log(`Doppelt: ${punkte * 2} Punkte`);  // Doppelt: 84 Punkte

// Zahl + String = String (Verkettung!)
console.log(1 + "2");    // "12" nicht 3!

// Andere Operatoren zwingen zur Zahl
console.log("5" - 2);   // 3
console.log("5" * 2);   // 10

// Explizit umwandeln — immer besser!
const eingabe = "42";
const zahl = Number(eingabe);   // 42 als Zahl
const text = String(42);        // "42" als Text

// && (UND) — beide müssen true sein
const darfRein = alter >= 16 && hatAccount;

// || (ODER) — mindestens eines muss true sein
const hatZugriff = istAdmin || hatPremium;

// ! (NICHT) — kehrt um
const istGast = !istEingeloggt;

// ?? (Nullish Coalescing) — falls null oder undefined
const anzeigeName = benutzername ?? "Gast";

const punkte = 75;

if (punkte >= 90) {
  console.log("Ausgezeichnet! 🏆");
} else if (punkte >= 70) {
  console.log("Gut gemacht! ✅");
} else if (punkte >= 50) {
  console.log("Bestanden 👍");
} else {
  console.log("Versuch es nochmal 💪");
}
// Ausgabe: Gut gemacht! ✅

// Lange Form
let status;
if (istEingeloggt) { status = "Willkommen!"; }
else               { status = "Bitte einloggen"; }

// Kurze Form (ternär)
const status = istEingeloggt ? "Willkommen!" : "Bitte einloggen";
const rolle   = hatPremium   ? "Premium Member" : "Free Member";

const tutorials = ["HTML 101", "CSS 101", "JS 101"];

// Zugriff über Index (beginnt bei 0!)
console.log(tutorials[0]);      // "HTML 101"
console.log(tutorials.length); // 3

// Element hinzufügen / entfernen
tutorials.push("Python 101");  // ans Ende
const letztes = tutorials.pop(); // letztes entfernen

const punkte = [45, 78, 92, 23, 88, 67];

// filter — nur Punkte über 70
const gute = punkte.filter(p => p > 70);
console.log(gute);  // [78, 92, 88]

// map — alle verdoppeln
const doppelt = punkte.map(p => p * 2);

// find — erste Zahl über 80
const ersteBeste = punkte.find(p => p > 80);
console.log(ersteBeste);  // 92

// Klassische for-Schleife
for (let i = 0; i < 5; i++) {
  console.log(`Runde ${i}`);
}

// for...of — elegant durch Arrays
const farben = ["Rot", "Grün", "Blau"];
for (const farbe of farben) {
  console.log(farbe);
}

// forEach — mit Index
farben.forEach((farbe, index) => {
  console.log(`${index}: ${farbe}`);
});

function begrüsse(name) {
  return `Hallo ${name}! Willkommen im Center.`;
}

console.log(begrüsse("Mikey"));
// Hallo Mikey! Willkommen im Center.

function berechneScore(richtig, gesamt) {
  const prozent = (richtig / gesamt) * 100;
  return `${prozent.toFixed(1)}%`;
}
console.log(berechneScore(7, 10));  // "70.0%"

// Klassische Funktion
function verdopple(n) { return n * 2; }

// Arrow Function — gleiche Funktion, kürzer
const verdopple = (n) => { return n * 2; };

// Noch kürzer — bei einzeiligem return
const verdopple = n => n * 2;

// Alle drei machen das gleiche!
console.log(verdopple(21));  // 42

// Default Parameter
function begrüsse(name = 'Gast') {
  return `Hallo ${name}!`;
}
begrüsse('Mikey');  // 'Hallo Mikey!'
begrüsse();         // 'Hallo Gast!' — Default greift

// Scope — globale vs lokale Variable
const appName = "MyKeyZ";   // global — überall sichtbar

function zeigeApp() {
  const intern = 'nur hier';  // lokal — nur in dieser Funktion
  console.log(appName);  // ✅
}
// console.log(intern);  // ❌ Fehler!

function verarbeite(zahl, operation) {
  return operation(zahl);
}

const verdopple = n => n * 2;
const quadrat   = n => n * n;

console.log(verarbeite(5, verdopple));  // 10
console.log(verarbeite(5, quadrat));    // 25

// Du kennst Callbacks schon! (aus Kapitel 4)
[1,2,3].map(n => n * 10);  // map nimmt eine Callback-Funktion

// Per ID — schnellste Methode
const cave = document.getElementById('cave');

// Per CSS-Selektor — flexibelste Methode
const titel = document.querySelector('.titel');
const erstLink = document.querySelector('nav a');

// Alle Elemente
const alleButtons = document.querySelectorAll('button');
alleButtons.forEach(btn => console.log(btn.textContent));

const titel = document.querySelector('h1');

titel.textContent = 'Hallo Mikey!';        // Text ändern
titel.innerHTML = '<em>Kursiv</em> und normal'; // HTML setzen

// CSS direkt ändern
titel.style.color = 'var(--coral)';

// Klassen steuern
const card = document.querySelector('.card');
card.classList.add('aktiv');
card.classList.remove('versteckt');
card.classList.toggle('dunkelmodus');  // ein/aus

const neuerEintrag = document.createElement('li');
neuerEintrag.textContent = 'Neues Tutorial';
neuerEintrag.classList.add('tutorial-item');

const liste = document.querySelector('#tutorial-liste');
liste.appendChild(neuerEintrag);  // ans Ende
liste.prepend(neuerEintrag);     // an den Anfang
neuerEintrag.remove();           // entfernen

const btn = document.querySelector('#meinButton');

// ❌ Nicht so — überschreibt vorherige Handler
btn.onclick = () => console.log("Klick 1");
btn.onclick = () => console.log("Klick 2");  // überschreibt Klick 1!

// ✅ So — mehrere Handler möglich
btn.addEventListener('click', () => console.log("Klick 1"));
btn.addEventListener('click', () => console.log("Klick 2"));  // beide laufen!

const suchfeld = document.querySelector('#suche');
const liste    = document.querySelectorAll('.tutorial-item');

suchfeld.addEventListener('input', (e) => {
  const suchtext = e.target.value.toLowerCase();

  liste.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(suchtext) ? '' : 'none';
  });
});
// Tipp, Tipp → live gefiltert!

// ✅ Event Delegation — ein Listener auf dem Container
document.querySelector('#container').addEventListener('click', (e) => {
  if (e.target.classList.contains('btn')) {
    handler(e.target);
  }
});
// Funktioniert auch für dynamisch hinzugefügte Buttons!

const benutzer = {
  name: "Mikey",
  punkte: 350,
  premium: true,
  cave: "Mikeys Creative Lab",
};

// Punkt-Notation
console.log(benutzer.name);      // 'Mikey'

// Bracket-Notation (für dynamische Keys)
const feld = "name";
console.log(benutzer[feld]);     // 'Mikey'

// Property hinzufügen
benutzer.abzeichen = ['HTML Master', 'CSS Pro'];

const cave = {
  name: "Mikeys Center",
  besucher: 0,
  betreten() {
    this.besucher++;
    return `Willkommen in ${this.name}!`;
  }
};

// Destructuring — Properties auspacken
const { name, punkte } = benutzer;

// Spread — Objekt kopieren/erweitern
const erweiterter = { ...benutzer, rolle: 'admin' };

const benutzer = { name: 'Mikey', punkte: 350 };

// JS Objekt → JSON String
const json = JSON.stringify(benutzer);
// '{"name":"Mikey","punkte":350}'

// JSON String → JS Objekt
const daten = JSON.parse('{"name":"Mikey","punkte":350}');
console.log(daten.name);  // 'Mikey'

// Schön formatiert (für Debugging)
console.log(JSON.stringify(benutzer, null, 2));

console.log('1');
setTimeout(() => console.log('2 (nach 1 Sekunde)'), 1000);
console.log('3');  // läuft VOR der '2'!
// Ausgabe: 1, 3, 2

async function ladeWetter() {
  try {
    const response = await fetch(
      'https://api.open-meteo.com/v1/forecast?latitude=47.42&longitude=9.37&current_weather=true'
    );
    const daten = await response.json();
    console.log('Temperatur:', daten.current_weather.temperature);
  } catch (fehler) {
    console.error('Fehler:', fehler);
  }
}

ladeWetter();

// Speichern — nur Strings!
localStorage.setItem("benutzername", "Mikey");

// Lesen
const name = localStorage.getItem("benutzername");

// Löschen
localStorage.removeItem("benutzername");

// Objekte mit JSON
const cave = { name: 'Mikeys Center', punkte: 350 };
localStorage.setItem('cave', JSON.stringify(cave));

const geladen = JSON.parse(localStorage.getItem("cave"));
console.log(geladen.name);  // 'Mikeys Center'

// State laden (oder Default)
let state = {
  count: JSON.parse(localStorage.getItem("count")) || 0
};

function render() {
  document.querySelector("#anzeige").textContent = state.count;
}

function sichern() {
  localStorage.setItem("count", JSON.stringify(state.count));
}

document.querySelector("#plus").addEventListener("click", () => {
  state.count++;
  render();
  sichern();
});

render();  // Initial anzeigen