exercises/17 - Sort Without Articles/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Sort Without Articles</title>
</head>

<body>

  <style>
    body {
      font-family: sans-serif;
      background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
      background-size: cover;
      display: flex;
      align-items: center;
      min-height: 100vh;
    }

    #bands {
      list-style: inside square;
      font-size: 20px;
      background: white;
      width: 500px;
      margin: auto;
      padding: 0;
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
    }
    #bands li {
      border-bottom: 1px solid #efefef;
      padding: 20px;
    }
    #bands li:last-child {
      border-bottom: 0;
    }

    a {
      color: #ffc600;
      text-decoration: none;
    }

  </style>

<ul id="bands"></ul>

<script>
  (() => {
    const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean',
      'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts',
      'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog']


    // Declare constant variable and define as new Regular Expression object
    const namePrefixes = new RegExp('^(a |the |an )', 'i')

    // Declare constant variable and define as an arrow function which
    // accepts a 'bandName' property and returns that provided argument
    // after replacing values that match the previously defined
    // regex pattern with an empty string and removing whitespace on either end
    const stripPrefixes = (bandName) => bandName.replace(namePrefixes, '').trim()

    // Declare constant variable and define as the result of sorting through the 'bands'
    // array depending on the band name excluding prefixes ('A', 'The', 'An')
    const sortedBands = bands.sort((a, b) => stripPrefixes(a) > stripPrefixes(b) ? 1 : -1);

    // Select the #bands unordered list and update the inner html
    // to be the values in the sortedBands array stored within
    // list items.
    document.querySelector("#bands").innerHTML =
      sortedBands
        .map(band => `<li>${band}</li>`)
        .join('')
  })();

</script>

</body>

</html>