Display search results for TV shows I haven't been coding super long in this language so if someone could take a look and help me improve my code and make it more efficient, that would be great! The HTML is one input field that you can type a show and then you get the result on the screen. From the beginning you get the top ten shows with the highest rating from the API.

// from start show the tv shows with highest rating
fetch('https://api.tvmaze.com/shows')
    .then(blob =&gt; blob.json())
    .then(json =&gt; {
        const topTenShows = json
        .filter(show =&gt; show.rating.average) 
        .sort((a, b) =&gt; a.rating.average &gt; b.rating.average ? -1 : 1) 
        .slice(0, 9) // tar element 0-9 i arrayen
         return topTenShows
  })
  .then(shows =&gt; {
      const app = document.getElementById('app')

      app.innerHTML = shows.map(show =&gt; `
          &lt;div class="col-sm movie-content"&gt;
              &lt;div class="movie-image"&gt;
                  ${show.image ? `&lt;img src="${show.image.medium}"&gt;` : `&lt;img class="fallbackImage"src="design/icons/No_image_available.svg"&gt;`}
              &lt;/div&gt;
              &lt;div class="movie-info"&gt;
                  &lt;h1&gt;${show.name}&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      `).join(' ');
    })

// show the search results from user input
function searchTvShows ({ target }) {
    fetch(`https://api.tvmaze.com/search/shows?q=${target.value}`)
        .then(blob =&gt; blob.json())
        .then(shows =&gt; {
            const app = document.getElementById('app');

            app.innerHTML = shows.map(({ show }) =&gt; `
                &lt;div class="col-sm movie-content"&gt;
                    &lt;div class="movie-image"&gt;
                        ${show.image ? `&lt;img src="${show.image.medium}"&gt;` : `&lt;img class="fallbackImage"src="design/icons/No_image_available.svg"&gt;`}
                    &lt;/div&gt;
                    &lt;div class="movie-info"&gt;
                        &lt;h1&gt;${show.name}&lt;/h1&gt;
                    &lt;/div&gt;
              &lt;/div&gt;

        `).join(' ');
    })
  }

  const inputSearchField = document.querySelector('.inputSearchField')

  inputSearchField.addEventListener('keydown', searchTvShows)
Since in both instances HTML is the same, it could be extracted to another function;
target.value appended to the URL needs to go through EncodeURIComponent() to avoid bugs, surprises and even XSS;
topTenShows has actually only 9 shows. Second argument of .slice() is exclusive;
It would be better to listen to input event instead of keydown. Right now, when you type, the last character doesn't make it into request.


Rewrite



const app              = document.querySelector('#app'),
      inputSearchField = document.querySelector('.inputSearchField'),
      apiEndpoint      = 'https://api.tvmaze.com',
      noImagePath      = 'design/icons/No_image_available.svg';

/**
 * For each object representing one show, creates HTML source and sets them all as content of #app
 * @param  {object} shows Array containing objects representing API results
 * @return {string}       HTML that got set as content of #app (unused)
 */
const buildShowsHTML = shows =&gt; {
  app.innerHTML = shows.map(obj =&gt; {
    const show = obj.show || obj;
    const img = show.image ? `&lt;img src="${show.image.medium}"/&gt;` : `&lt;img class="fallbackImage" src="${noImagePath}"/&gt;`;

    return `
      &lt;div class="col-sm movie-content"&gt;
        &lt;div class="movie-image"&gt;
          ${img}
        &lt;/div&gt;
        &lt;div class="movie-info"&gt;
          &lt;h1&gt;${show.name}&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;`;
  }).join('');
};

/**
 * Gets top 10 shows from the input array of objects
 * @param  {object} arr Array containing objects representing API results
 * @return {object}     Array of top 10 shows
 */
const getTopTenShows = arr =&gt; arr
  .filter(show =&gt; show.rating.average)
  .sort((a, b) =&gt; a.rating.average &gt; b.rating.average ? -1 : 1)
  .slice(0, 10); // tar element [0 – 10) i arrayen

// Show top 10 shows upon load
fetch(`${apiEndpoint}/shows`).then(resp =&gt; resp.json()).then(getTopTenShows).then(buildShowsHTML);

// Show the search results on user input
inputSearchField.addEventListener('input', event =&gt; {
  const input = encodeURIComponent(event.target.value);
  fetch(`${apiEndpoint}/search/shows?q=${input}`).then(resp =&gt; resp.json()).then(buildShowsHTML);
});
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;meta name="viewport" content="width=device-width"/&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/&gt;
  &lt;title&gt;Demo&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;input class="inputSearchField"/&gt;
  &lt;main id="app"&gt;&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;