JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div id="genre-buttons"></div>
<input type="text" id="genre" placeholder="Wähle ein Genre">

JavaScript

// Array mit Musik-Genres
const genres = [
  "Rock",
  "Pop",
  "Electronic",
  "Hip-Hop",
  "R&B",
  "Jazz",
  "Classical",
  "Folk",
  "Country",
  "Metal",
  "Punk",
  "Indie"
];

// Funktion, um drei zufällige Genres auszuwählen
function selectRandomGenres() {
  const randomGenres = [];
  for (let i = 0; i < 3; i++) {
    const randomIndex = Math.floor(Math.random() * genres.length);
    randomGenres.push(genres[randomIndex]);
  }
  return randomGenres;
}

// Funktion, um die Genres als Buttons anzuzeigen
function displayGenres() {
  const genreButtons = document.getElementById("genre-buttons");
  genreButtons.innerHTML = "";
  const randomGenres = selectRandomGenres();
  randomGenres.forEach(genre => {
    const button = document.createElement("button");
    button.textContent = genre;
    button.addEventListener("click", () => {
      const genreField = document.getElementById("genre");
      genreField.value += genre + ", ";
      const index = genres.indexOf(genre);
      if (index !== -1) {
        genres.splice(index, 1);
      }
      displayGenres();
    });
    genreButtons.appendChild(button);
  });
}

// Anfangsaufruf
displayGenres();