<nav id='index'>
  <ul>
  </ul>
</nav>
<div id='not-found' class='hidden'>Имён не найдено</div>
<div id='names' class='hidden'></div>

#index ul {
  list-style-type: none;
}
#index li {
  display: inline-block;
  padding: 0 0.5em;
  color: blue;
  cursor: pointer;
}

#index li.selected {
  text-decoration: underline;
}

#not-found {
  color: red;
}

.hidden {
  display: none;
}

const names = [
  'Aaron', 'Abraham', 'Adam', 'Adrian', 'Aidan', 'Alan', 'Albert', 'Alejandro', 'Alex', 'Alexander',
  'Alfred', 'Andrew', 'Angel', 'Anthony', 'Antonio', 'Ashton', 'Austin', 'Aaliyah', 'Abigail', 'Ada',
  'Adelina', 'Agatha', 'Alexa', 'Alexandra', 'Alexis', 'Alise', 'Allison', 'Alyssa', 'Amanda', 'Amber',
  'Amelia', 'Angelina', 'Anita', 'Ann', 'Ariana', 'Arianna', 'Ashley', 'Audrey', 'Autumn', 'Ava',
  'Avery', 'Benjamin', 'Bernard', 'Blake', 'Brandon', 'Brian', 'Bruce', 'Bryan', 'Bailey', 'Barbara',
  'Beatrice', 'Belinda', 'Brianna', 'Bridjet', 'Brooke', 'Cameron', 'Carl', 'Carlos', 'Charles',
  'Christopher', 'Cole', 'Connor', 'Caleb', 'Carter', 'Chase', 'Christian', 'Clifford', 'Cody', 'Colin',
  'Curtis', 'Cyrus', 'Caroline', 'Catherine', 'Cecilia', 'Celia', 'Chloe', 'Christine', 'Claire',
  'Daniel', 'David', 'Dennis', 'Devin', 'Diego', 'Dominic', 'Donald', 'Douglas', 'Dylan', 'Daisy',
  'Danielle', 'Deborah', 'Delia', 'Destiny', 'Diana', 'Dorothy', 'Edward', 'Elijah', 'Eric', 'Ethan',
  'Evan', 'Eleanor', 'Elizabeth', 'Ella', 'Emily', 'Emma', 'Erin', 'Evelyn', 'Francis', 'Fred', 'Faith',
  'Fiona', 'Florence', 'Freda', 'Gabriel', 'Gavin', 'Geoffrey', 'George', 'Gerld', 'Gilbert', 'Gordon',
  'Graham', 'Gregory', 'Gloria', 'Gabriella', 'Gabrielle', 'Gladys', 'Grace', 'Harold', 'Harry', 'Hayden',
  'Henry', 'Herbert', 'Horace', 'Howard', 'Hugh', 'Hunter', 'Hailey', 'Haley', 'Hannah', 'Helen', 'Ian',
  'Isaac', 'Isaiah', 'Isabel', 'Isabella', 'Jack', 'Jackson', 'Jacob', 'Jaden', 'Jake', 'James', 'Jason',
  'Jayden', 'Jeffery', 'Jeremiah', 'Jesse', 'Jesus', 'John', 'Jonathan', 'Jordan', 'Jose', 'Joseph',
  'Joshua', 'Juan', 'Julian', 'Justin', 'Jacqueline', 'Jada', 'Jane', 'Jasmine', 'Jenna', 'Jennifer', 
  'Jessica', 'Jocelyn', 'Jordan', 'Josephine', 'Joyce', 'Julia', 'Keith', 'Kevin', 'Kyle', 'Kaitlyn', 
  'Katelyn', 'Katherine', 'Kathryn', 'Kayla', 'Kaylee', 'Kimberly', 'Kylie', 'Landon', 'Lawrence',
  'Leonars', 'Lewis', 'Logan', 'Louis', 'Lucas', 'Luke', 'Laura', 'Lauren', 'Leah', 'Leonora', 'Leslie',
  'Lillian', 'Lily', 'Linda', 'Lorna', 'Luccile', 'Lucy', 'Lynn', 'Malcolm', 'Martin', 'Mason', 'Matthew',
  'Michael', 'Miguel', 'Miles', 'Morgan', 'Mabel', 'Mackenzie', 'Madeline', 'Madison', 'Makayla',
  'Margaret', 'Maria', 'Marisa', 'Marjorie', 'Mary', 'Maya', 'Megan', 'Melanie', 'Melissa', 'Mia',
  'Michelle', 'Mildred', 'Molly', 'Monica', 'Nathan', 'Nathaniel', 'Neil', 'Nicholas', 'Noah', 'Norman',
  'Nancy', 'Natalie', 'Nicole', 'Nora', 'Oliver', 'Oscar', 'Oswald', 'Owen', 'Olivia', 'Patrick', 'Peter',
  'Philip', 'Paige', 'Pamela', 'Patricia', 'Pauline', 'Penelope', 'Priscilla', 'Ralph', 'Raymond',
  'Reginald', 'Richard', 'Robert', 'Rodrigo', 'Roger', 'Ronald', 'Ryan', 'Rachel', 'Rebecca', 'Riley', 
  'Rita', 'Rosalind', 'Rose', 'Samuel', 'Sean', 'Sebastian', 'Seth', 'Simon', 'Stanley', 'Steven',
  'Samantha', 'Sandra', 'Sara', 'Sarah', 'Savannah', 'Sharon', 'Sheila', 'Shirley', 'Sierra', 'Sofia',
  'Sophia', 'Stephanie', 'Susan', 'Sybil', 'Sydney', 'Sylvia', 'Thomas', 'Timothy', 'Tyler', 'Taylor',
  'Trinity', 'Vanessa', 'Victoria', 'Violet', 'Virginia', 'Wallace', 'Walter', 'William', 'Wyatt',
  'Winifred', 'Xavier', 'Yvonne', 'Zachary', 'Zoe'
];

function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomLetters(count) {
  const a = 'A'.charCodeAt(0);
  const z = 'Z'.charCodeAt(0);
  const letters = [];
  if (count > 26) {
    count = 26;
  }
  while (letters.length < count) {
    const letter = String.fromCharCode(rand(a, z));
    if (!letters.includes(letter)) {
      letters.push(letter);
    }
  }
  letters.sort((a, b) => a.localeCompare(b));
  return letters;
}

function fillIndex(letters) {
  const index = document.querySelector('#index ul');
  index.innerHTML = '';
  letters.forEach(letter => {
    const li = document.createElement('li');
    li.innerText = letter;
    li.dataset.letter = letter;
    index.append(li);
  })
}

document.getElementById('index').addEventListener(
  'click',
  e => {
    const letter = e.target.dataset.letter;
    if (letter === undefined) {
      return;
    }
    const current = document.querySelector('#index li.selected');
    if (current !== null) {
      current.classList.remove('selected');
    }
    e.target.classList.add('selected');
    const list = names.filter(n => n.charAt(0) === letter);
    if (list.length === 0) {
      document.getElementById('names').classList.add('hidden');
      document.getElementById('not-found').classList.remove('hidden');
    } else {
      document.getElementById('not-found').classList.add('hidden');
      const namesEl = document.getElementById('names');
      list.sort((a, b) => a.localeCompare(b));
      namesEl.innerText = list.join('\n');
      namesEl.classList.remove('hidden');
    }
  }
)

const letters = randomLetters(5);
fillIndex(letters);