| Andrew W. Ishak

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Song Chooser</title>
</head>
<body onload="chooseRandomSongs()">

<h2>Choose a Random Song</h2>

<div id="songButtons"></div>
<div id="chosenSong"></div>
<div id="songCounts"></div>

<script>
// Define an array to hold the song titles
var songTitles = ["Song 1", "Song 2", "Song 3", "Song 4", "Song 5", "Song 6"];

// Object to keep track of how many times each song was chosen
var songCounts = {};

function chooseRandomSongs() {
  // Get two random indices within the length of the songTitles array
  var index1 = Math.floor(Math.random() * songTitles.length);
  var index2 = Math.floor(Math.random() * songTitles.length);

  // Make sure the two indices are not the same
  while (index1 === index2) {
    index2 = Math.floor(Math.random() * songTitles.length);
  }

  // Get the song titles at the randomly chosen indices
  var song1 = songTitles[index1];
  var song2 = songTitles[index2];

  // Display the randomly chosen song titles on buttons
  var songButtonsDiv = document.getElementById("songButtons");
  songButtonsDiv.innerHTML = `
    <button onclick="chooseSong('${song1}')">${song1}</button>
    <button onclick="chooseSong('${song2}')">${song2}</button>
  `;

  // Output song chosen counts
  outputSongCounts();
}

function chooseSong(songTitle) {
  // Increment the count for the chosen song
  if (songCounts[songTitle]) {
    songCounts[songTitle]++;
  } else {
    songCounts[songTitle] = 1;
  }

  // Display the chosen song title and its count
  var chosenSongDiv = document.getElementById("chosenSong");
  chosenSongDiv.innerText = "You chose: " + songTitle + ". Chosen " + songCounts[songTitle] + " times.";

  // Output song chosen counts
  outputSongCounts();
  chooseRandomSongs();
}

function outputSongCounts() {
  // Sort the song titles based on their counts in descending order
  var sortedSongTitles = Object.keys(songCounts).sort(function(a, b) {
    return songCounts[b] - songCounts[a];
  });

  // Output all of the song chosen counts in descending order
  var songCountsDiv = document.getElementById("songCounts");
  songCountsDiv.innerHTML = "<h3>Song Chosen Counts (Descending Order):</h3>";
  sortedSongTitles.forEach(function(songTitle) {
    songCountsDiv.innerHTML += "<p>" + songTitle + ": " + songCounts[songTitle] + "</p>";
  });
}
</script>

</body>
</html>