omdb.js

// Select the form
const form = document.querySelector('#search-movies');
// Listen to the submit event
form.addEventListener('submit', (event) => {
  // Prevent the default reload behavior of the form
  event.preventDefault();
  // Retrieve the searched keyword
  const keyword = document.querySelector('#keyword').value;
  // Call the API with the keyword
  fetch(`http://www.omdbapi.com/?s=${keyword}&apikey=adf1f2d7`)
    .then(response => response.json())
    .then((data) => {
      // Select the empty list
      const list = document.querySelector('#results');
      // We need to empty this list in case it's a 2nd search
      list.innerText = '';
      // Iterate on the results (Search an object key)
      data.Search.forEach((movie) => {
        // For each movie build a list-item
        const listItem = `<li class="list-inline-item">
          <img src='${movie.Poster}' />
          ${movie.Title}
        </li>`;
        // Insert each list-item in the list
        list.insertAdjacentHTML('beforeend', listItem);
      });
    });
});