.concat(), .forEach(), .includes(), .push(),
.sort() .charAt( 0 ).toUpperCase() , .slice( 1 )
.getElementById(), .createElement(), .appendChild(), innerHTML
// Referenz auf das HTML-Dropdown-Menü holen
let selectList = document.getElementById( "selectList" );
// Ein Objekt als Datenquelle: Schlüssel sind Kontinente, Werte sind Arrays (Listen)
let 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" ]
}
/**
* SCHRITT 1: Arrays zusammenführen
* Methode: .concat()
* Erstellt ein neues Array, das alle Tiere enthält (noch mit Duplikaten).
*/
let tiereAlle = continent.europa.concat( continent.asien ).concat( continent.afrika ).concat( continent.amerika );
console.log( tiereAlle );
/**
* SCHRITT 2: Duplikate entfernen
* Methoden: .forEach(), .includes(), .push()
* Wir gehen jedes Tier durch. Wenn es noch nicht im Ziel-Array ist, fügen wir es hinzu.
*/
let tiere = [];
tiereAlle.forEach( ( element ) =>
{
if ( !tiere.includes( element ) )
{
tiere.push( element );
}
} );
/**
* SCHRITT 3: Alphabetisch ordnen
* Methode: .sort()
* Sortiert das Array standardmäßig nach Unicode-Zeichen (A-Z).
*/
tiere.sort();
/**
* SCHRITT 4: Dropdown dynamisch füllen
* Methode: .forEach() & DOM-Manipulation
*/
tiere.forEach( el =>
{
let opt = document.createElement( "option" );
opt.innerHTML = el;
opt.value = el;
selectList.appendChild( opt );
} );
// Event Listener: Reagiert, wenn der Benutzer ein Tier auswählt
selectList.addEventListener( "change", showTier );
function showTier ( evt )
{
let el = evt.target;
let tierName = el.value;
// Anzeige zurücksetzen und gewählten Namen fett drucken
output.innerHTML = `<strong>${ tierName }</strong><br>| `;
/**
* SCHRITT 5: Objekt durchsuchen
* Methode: for...in Schleife & .includes()
* Wir prüfen für jeden Kontinent, ob das gewählte Tier darin vorkommt.
*/
for ( let key in continent )
{
// continent[key] greift auf das Array des aktuellen Kontinents zu
if ( continent[ key ].includes( el.value ) )
{
/**
* SCHRITT 6: String-Formatierung
* Methoden: .charAt(), .toUpperCase(), .slice()
* Macht aus "europa" -> "E" + "uropa"
*/
let cont = key.charAt( 0 ).toUpperCase() + key.slice( 1 );
output.innerHTML += cont + " | ";
}
}
}