Array

items in arrow array and modal array not showing up in console

HTML

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Employee Directory</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <main class="container">

      <!-- <header>
        <h3 class="header">Awesome Startup Employee Directory</h3>
      </header> 

      <div class="item 1">
        <div class="card">
          <img src="member-1.jpg">
          <div class="text-container">
            <h4>Name</h4>
            <p>Email</p>
            <p>City</p>
          </div>
        </div>
      </div> -->

    </main>

    <div class="modal-container off">

    </div>

    <!-- <div class="modal">

      <div class="arrow">
        <i class="fa fa-window-close" aria-hidden="true"></i>
      </div>

      <div class="box-container">

        <div class="box one">
          <img src="member-1.jpg">
          <h4>Name</h4>
          <p>Email</p>
          <p>City</p>
        </div>

        <div class="box two">
          <p>Number</p>
          <p>Address</p>
          <p>Birthday</p>
        </div>

      </div>

    </div> -->



    <script src="app.js" ></script>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(243, 243, 243);
  font-family: 'Roboto', sans-serif;
}
p {
  color: #444E55;
}

.container {
  margin: 0 auto;
  width: 95%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 50px;
  grid-auto-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

header {
  grid-column: 1/span 3;
  color: #4A4A4A
}

img {
  display: block;
  border-radius: 50%;
  height: 100px;
}
.item {
  padding: 12px;
  background-color:  #ffffff;
  border: 1px rgb(197, 197, 197) solid;
}
.item:hover {
  cursor: pointer;
}
.item > * {
  pointer-events: none;
}

.card {
  border-radius: 3px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text-container {
  line-height: 0;
  margin-left: 10px;
}

.modal-container {
  position: relative; 
  bottom: 500px;
}

.modal {
  background-color:  #ffffff;
  border: 1px rgb(197, 197, 197) solid;
  border-radius: 3px;
  padding: 50px;
  margin: 0 auto;
  width: 30%;
  z-index: 99;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box.one {
  border-bottom: 1px grey solid;
}

.arrow {
  display: inline-block;
  position: relative;
  left: 100%;
  bottom: 30px;
}
.arrow:hover {
  cursor: pointer;
}

.fa.fa-window-close {
  font-family: fontAwesome;
} 

.off {
  display: none;
}
.on {
  display: block;
}

JavaScript

const randomURL='https://randomuser.me/api/?results=12&nat=us';
const container=document.querySelector('.container');
const header=document.createElement("header");
const main=document.querySelector('main');
const modalContainer=document.querySelector('.modal-container');

header.innerHTML=`<h3 class="header">Awesome Startup Employee Directory</h3>`;
container.appendChild(header);

function fetchData (url) {
  return fetch(url)
  .then(resp=>resp.json())
  .catch(Error());
}




function generateHTML (data) {
  fetchData(data)
  .then(function(data){
    let results=data.results;
    return results.map(function(result,index){
      html=`
      <div class="item ${index}">
        <div class="card">
          <img src=${result.picture.thumbnail}>
          <div class="text-container">
            <h4>${result.name.first} ${result.name.last}</h4>
            <p>${result.email}</p>
            <p>${result.location.city}</p>
          </div>
        </div>
      </div>
      `;
      overlayHtml=`
      <div class="modal ${index} off">
        <div class="arrow">
          <i class="fa fa-window-close" aria-hidden="true"></i>
        </div>
        <div class="box-container">
          <div class="box one">
            <img src="${result.picture.thumbnail}">
            <h4>${result.name.first} ${result.name.last}</h4>
            <p>${result.email}</p>
            <p>${result.location.city}</p>
          </div>
          <div class="box two">
            <p>${result.cell}</p>
            <p>${result.location.street} ${result.location.postcode}</p>
            <p>${result.dob.date}</p>
          </div>
        </div>
      </div>
      `;
      main.lastElementChild.insertAdjacentHTML('afterend', html);
      modalContainer.insertAdjacentHTML('beforeend', overlayHtml);
    })
  }).then (function (data) {
      const modals=document.querySelectorAll('.modal');
      const modalsArray=[...modals];
      console.log(modalsArray);

      const...