Array und andere Methoden

.concat(), .forEach(), .includes(), .push(),
.sort() .charAt( 0 ).toUpperCase() , .slice( 1 )
.getElementById(), .createElement(), .appendChild(), innerHTML

const selectList = document.getElementById("selectList");

const continent = {
europa: ["Adler", "Wolf", "Luchs", "Bär", "Biber"],
asien: ["Tiger", "Elefant", "Affe", "Yak", "Leopard", "Nashorn"],
afrika: ["Leopard", "Löwe", "Elefant", "Nashorn", "Affe", "Giraffe", "Zebra"],
amerika: ["Panther", "Bär", "Adler", "Puma", "Biber", "Leopard"]
};

// 1. Alle Tiere extrahieren und flachklopfen
// Object.values(continent) gibt uns ein Array von Arrays [[...], [...]]
// .flat() macht daraus ein einziges großes Array
const alleTiereRaw = Object.values(continent).flat();

// 2. Dubletten entfernen & Sortieren
// Ein 'Set' speichert jeden Wert automatisch nur einmal.
// Der Spread Operator [...] macht daraus wieder ein normales Array.
const tiereEindeutig = [...new Set(alleTiereRaw)].sort();

// 3. Dropdown füllen (Deklarativ)
// .map() wandelt jedes Tier-Objekt direkt in einen HTML-String um
selectList.innerHTML += tiereEindeutig
.map(tier => `${tier}`)
.join("");

selectList.addEventListener("change", (evt) => {
const wahl = evt.target.value;
if (!wahl) return;

// 4. Kontinente finden mit .filter()
// Wir filtern die Namen der Kontinente (Keys) basierend auf der Bedingung
const vorkommen = Object.keys(continent)
.filter(key => continent[key].includes(wahl))
.map(key => key.charAt(0).toUpperCase() + key.slice(1)); // Direkt hier großschreiben

output.innerHTML = `<strong>${wahl}</strong><br>${vorkommen.join(" | ")}`;
});