Questions on Modals

Question

I am new to coding and in school for web dev and the task is to created a pokemon pokedex and I am currently using a modal for a pop up...

I was able to get pretty far for my skill level, but I am running into a bit of a jam and looking for guidance and things to consider to finish this project. Hell even an article, I think I am making a mountain out of a molehill but struggle and have been working on this last section for way too long (embarrassed to admit the amount of time, lol)

The modal needs to display at least the name and height of the Pokémon.

The modal also needs to have an img tag rendering an image of the Pokémon. (Remember the example in the previous Exercise for getting an image of a Pokémon from the API and assigning it to imgUrl?)

On the first part to display name and height, I am === dumbfounded & I believe for the img I need to find a pokemon API for images and use that (i think)

Here is my JavaScript so far:

  let modalContainer = document.querySelector('#modal-container');
  let pokemonList = [];
  let apiUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=150';

  function add(pokemon) {
    if (
      typeof pokemon === "object" &&
      "name" in pokemon
    ) {
      pokemonList.push(pokemon);
    } else {
      console.log("Pokemon is not correct");
    }
  }
  function getAll() {
    return pokemonList;
  };

  function addListItem(pokemon) {
    let pokemonList = document.querySelector(".pokemon-list");
    let listpokemon = document.createElement("li");
    let button = document.createElement("button");
    button.innerText = pokemon.name;
    button.classList.add("button-class");
    listpokemon.appendChild(button);
    pokemonList.appendChild(listpokemon);
    button.addEventListener("click", function(event) {
      showDetails(pokemon);
    });
  }

  function loadList() {
    return fetch(apiUrl).then(function (response) {
      return response.json();
    }).then(function (json) {
      json.results.forEach(function (item) {
        let pokemon = {
          name: item.name,
          detailsUrl: item.url
        };
        add(pokemon);
        console.log(pokemon);
      });
    }).catch(function (e) {
      console.error(e);
    })
  }

  function loadDetails(item) {
    let url = item.detailsUrl;
    return fetch(url).then(function (response) {
      return response.json();
    }).then(function (details) {
      // Now we add the details to the item
      item.imageUrl = details.sprites.front_default;
      item.height = details.height;
      item.types = details.types;
    }).catch(function (e) {
      console.error(e);
    });
  }

  function showDetails(item) {
    loadDetails(item).then(function () {
      showModal(item);
    });
  }

  function showModal() {
    let modalContainer = document.querySelector('#modal-container');
    modalContainer.classList.add('is-visible');
  }

  document.querySelector('#show-modal').addEventListener('click', () => {
    showModal();
  });



  function showModal(title, text) {
    modalContainer.innerHTML = '';

    let modal = document.createElement('div');
    modal.classList.add('modal');

    // I THINK I ADD IMG HERE?
    let closeButtonElement = document.createElement('button');
    closeButtonElement.classList.add('modal-close');
    closeButtonElement.innerText = 'Close';
    closeButtonElement.addEventListener('click', hideModal);

    let titleElement = document.createElement('h1');
    titleElement.innerText = title;

    let contentElement = document.createElement('p');
    contentElement.innerText = text;

    modal.appendChild(closeButtonElement);
    modal.appendChild(titleElement);
    modal.appendChild(contentElement);
    modalContainer.appendChild(modal);

    modalContainer.classList.add('is-visible');
  }

  function hideModal() {
    modalContainer.classList.remove('is-visible');
  }

  document.querySelector('#show-modal').addEventListener('click', () => {
    showModal('Test');
  });

  window.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && modalContainer.classList.contains('is-visible')) {
      hideModal();
    }
  });

  modalContainer.addEventListener('click', (e) => {
    let target = e.target;
    if (target === modalContainer) {
      hideModal();
    }
  });

  return {
    add: add,
    getAll: getAll,
    addListItem: addListItem,
    loadList: loadList,
    loadDetails: loadDetails,
    showDetails: showDetails
  };
})();

pokemonRepository.loadList().then(function () {
  pokemonRepository.getAll().forEach(function (pokemon) {
    pokemonRepository.addListItem(pokemon);
  });
});

**Here is my HTML if needed:**

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Pokedex</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>

  <body>
    <button id="show-modal">Show Model</button>
    <div id="modal-container">
       <div class="modal">
       <button class='modal-close'>Close</button>
    <h1>Pokedex</h1>
    <p>Modal Text</p>
       </div>
       </div>

    <ul class="pokemon-list"></ul>
    <script src="js/promise-polyfill.js"></script>
    <script src="js/fetch-polyfill.umd.js"></script>
    <script src="js/script.js"></script>

  </body>
</html>

Any feedback or input would be great, I am not looking for a solution but guidance at this point as I just feel dumb, lol

Thanks for reading and taking time if you are reading this : )