<div class="wrapper">
      <header class="header">
        <div class="header_logo">Movie</div>
        <div class="header_actions">
          <form onsubmit="handle_form(event)" id="header_form">
            <div class="header_form-icon">
            <input type="search" class="header_form-input" placeholder="Search, Press Enter to Submit" />
            <svg class="icon" width="22px" height="22px"><use href="#icon-search" /></svg>
          </div>
          </form>
          <img id="img_icon" width="32px" height="32px" src="" alt="" >
        </div>
      </header>
      <main id="main">
        <section>
          <article class="movie">
            <div class="movie_img">
              <img id="img_src" src="">
            </div>
            <div class="movie_info">
              <header><h1 class="movie_title"></h1></header>
              <div class="movie_desc"></div>
              <div class="movie_details">
                <h2>Details</h2>
                <ul class="flex">
                  <li>Premiered: <span id="movie_date"></span></li>
                  <li>Rating: <span id="movie_rating"></span></li>
                  <li>Runtime: <span id="movie_runtime"></span></li>
                  <li>Status: <span id="movie_status"></span></li>
                </ul>
              </div>
              <a href="" class="btn" target="_blank" rel="noopener noreferrer">
            <svg class="icon" width="16px" height="16px"><use href="#icon-play" /></svg>
                Watch Movie</a>
            </div>
          </article>
          <div class="episodes_list">
            <h3 class="episodes_title"></h3>
          <ol class="episodes" id="episodes"></ol>
        </div>
        </section>
      </main>
			<footer class="footer">
				All credits goes to <a href="tvmaze.com">TvMaze</a> for providing the free API used for this demo
			</footer>
    </div>
  </body>
  <script src="main.js"></script>
  <svg style="display: none" xmlns="http://www.w3.org/2000/svg">
    <symbol
    viewBox="0 0 24 24"
    id="icon-search"
    fill-rule="evenodd"
    clip-rule="evenodd"
  >
    <path
      d="M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5 4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5 8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z"
    />
    <symbol
      viewBox="0 0 24 24"
      id="icon-user"
      fill-rule="evenodd"
      clip-rule="evenodd"
    >
      <path
        d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm8.127 19.41c-.282-.401-.772-.654-1.624-.85-3.848-.906-4.097-1.501-4.352-2.059-.259-.565-.19-1.23.205-1.977 1.726-3.257 2.09-6.024 1.027-7.79-.674-1.119-1.875-1.734-3.383-1.734-1.521 0-2.732.626-3.409 1.763-1.066 1.789-.693 4.544 1.049 7.757.402.742.476 1.406.22 1.974-.265.586-.611 1.19-4.365 2.066-.852.196-1.342.449-1.623.848 2.012 2.207 4.91 3.592 8.128 3.592s6.115-1.385 8.127-3.59zm.65-.782c1.395-1.844 2.223-4.14 2.223-6.628 0-6.071-4.929-11-11-11s-11 4.929-11 11c0 2.487.827 4.783 2.222 6.626.409-.452 1.049-.81 2.049-1.041 2.025-.462 3.376-.836 3.678-1.502.122-.272.061-.628-.188-1.087-1.917-3.535-2.282-6.641-1.03-8.745.853-1.431 2.408-2.251 4.269-2.251 1.845 0 3.391.808 4.24 2.218 1.251 2.079.896 5.195-1 8.774-.245.463-.304.821-.179 1.094.305.668 1.644 1.038 3.667 1.499 1 .23 1.64.59 2.049 1.043z"
      />
    </symbol>
    <symbol id="icon-play" viewBox="0 0 24 24"><path d="M3 22v-20l18 10-18 10z"/></symbol>
  </svg>



  
html {
  box-sizing: border-box;
  font-size: 16px;
  font-family: sans-serif;
}
:root {
  --color-primary: #f76d4e;
  --color-bg: #171d22;
  --color-bg-alt: #292c34;
  --color-text: #fff;
}
body {
  background-color: var(--color-bg);
}

*,
*:before,
*:after {
  box-sizing: inherit;
  font-family: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}
svg {
  fill: currentColor;
  vertical-align: middle;
}
.wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: 1024px;
  padding: 32px 64px;
  border-radius: 22px;
  background-color: var(--color-bg-alt);
  color: var(--color-text);
}

@media (max-width: 759px) {
  .wrapper {
    padding: 16px;
    flex-direction: column;
  }
}

input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  font-family: inherit;
  font-size: 100%;
  outline: 0px;
  border: 0px;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none;
}

.header_form-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.header_form-icon .icon {
  position: absolute;
  right: 10px;
}
.header_form-icon .icon {
  position: absolute;
  fill: #000;
}
.header_form-input {
  width: 0px;
  background-color: transparent;
}
.header_form-input {
  width: 90%;
  color: #000;
  background-color: #fff;
  cursor: auto;
  padding: 1rem;
  border-radius: 40px;
}

#header_form input:-moz-placeholder {
  font-size: small;
}
#header_form input::-webkit-input-placeholder {
  font-size: small;
}

.header,
.header_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#img_icon {
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  width: 32px;
  height: 32px;
  border: 3px solid #dee1e3;
}
.movie {
  display: flex;
  gap: 3rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}
@media (max-width: 759px) {
  .movie {
    flex-direction: column;
  }
}
.movie_img img {
  min-width: 280px;
  max-width: 280px;
  border-radius: 22px;
}
@media (max-width: 759px) {
  .movie_img img {
    min-width: 100%;
    max-width: 100%;
  }
}
.movie_info {
  margin-top: 2px;
}
.movie_title {
  font-size: 2rem;
  margin-bottom: 2rem;
}
.movie_desc {
  color: #dee1e3;
  margin-bottom: 2rem;
}
.movie_details {
  margin-bottom: 2rem;
}
.movie_details h2 {
  font-size: 1.9rem;
  margin-bottom: 1rem;
}
.flex {
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 759px) {
  .flex {
    flex-wrap: wrap;
  }
}
.flex li {
  color: #dee1e3;
}
.flex li span {
  color: #fff;
}
.btn {
  border-radius: 40px;
  background-color: var(--color-primary);
  color: #fff;
  display: inline-block;
  padding: 1rem 1.5rem;
  text-decoration: none;
  text-align: center;
}
.btn svg {
  margin-right: 4px;
}

.episodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-gap: 1rem;
}
.episodes li a {
  display: inline-block;
}

.episodes li a img {
  height: 320px;
  border-radius: 22px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 759px) {
  .episodes li a img {
    height: auto;
    object-fit: initial;
  }
}

.episodes_list h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.footer {
  text-align: center;
  margin-top: 2rem;
  font-size: small;
}
const get_movie = (value = "Game of thrones") => {
  // Challenge: Display a loader
  fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)
    .then((response) => response.json())
    .then((data) => {
      if (data._embedded.episodes.length > 0) {
        const new_data = data._embedded.episodes.slice(0, 4);

        create_UI(data);
        return create_episodesUI(new_data);
      } else {
        return create_UI(data);
      }
    })
    .catch((error) => {
      console.log(error);
      // Challenge: Display error messages
    });
};

const create_UI = (data) => {
  const movie_img = document.querySelector("#img_src");
  const movie_icon = document.querySelector("#img_icon");
  const movie_title = document.querySelector(".movie_title");
  const movie_desc = document.querySelector(".movie_desc");
  const movie_link = document.querySelector(".btn");
  const movie_date = document.querySelector("#movie_date");
  const movie_rating = document.querySelector("#movie_rating");
  const movie_runtime = document.querySelector("#movie_runtime");
  const movie_status = document.querySelector("#movie_status");

  // set the UI
  movie_icon.src = data.image.medium;
  movie_img.src = data.image.original;
  movie_title.textContent = data.name;
  movie_desc.innerHTML = data.summary;
  movie_link.href = data.officialSite;
  movie_date.textContent = data.premiered;
  movie_rating.textContent = data.rating.average;
  movie_runtime.textContent = data.runtime;
  movie_status.textContent = data.status;
};

const create_episodesUI = (data) => {
  //episodes
  const episodes_list = document.querySelector("#episodes");
  const episodes_title = document.querySelector(".episodes_title");

  // remove children if they exist
  episodes_title.textContent = "";
  episodes_list.innerHTML = "";

  // add the title
  episodes_title.textContent = "Episodes";

  data.forEach((episode) => {
    let li = document.createElement("li");
    const link = document.createElement("a");
    const img = document.createElement("img");
    img.src = episode.image.original;
    // Append the text node to anchor element.
    link.appendChild(img);

    // Set the title.
    link.title = episode.name;

    // Set the href property.
    link.href = episode.url;

    // Append the anchor element to the body.
    li.appendChild(link);
    episodes_list.appendChild(li);
  });
};

// handle form submit
const search = (event) => {
  event.preventDefault();
  const value = document.querySelector(".header_form-input").value;

  get_movie(value);
};

// create default UI
get_movie();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.