JustWatch Search

by oktaviardi pratama

HTML

<h2>JustWatch Search</h2>

<input 
  id="movie" 
  value="The Legend of Korra" 
  placeholder="Search movie..."
>

<button onclick="searchMovie()">
  Search
</button>

<div id="movies"></div>


<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

CSS

body {
  font-family: Arial, sans-serif;
  background: #111;
  color: white;
  padding: 20px;
}

input {
  width: 300px;
  padding: 10px;
  border-radius: 5px;
  border: none;
}

button {
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}


#movies {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 25px;
}


.movie-card {

  width: 350px;
  background: #222;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,.5);

}


.movie-card img {

  width: 100%;
  height: 450px;
  object-fit: cover;

}


.movie-body {

  padding: 15px;

}


.movie-body h2 {

  margin-top: 0;

}


.rating {

  color: gold;
  font-size: 18px;

}


.description {

  color: #ccc;
  line-height: 1.5;

}


.offer {

  background: #333;
  padding: 8px;
  margin-top: 5px;
  border-radius: 5px;

}


.offer a {

  color: #4da6ff;
  text-decoration: none;

}

JavaScript

async function searchMovie() {


  const query = document.getElementById("movie").value;

  const container = document.getElementById("movies");


  container.innerHTML = "Loading...";


  try {


    const response = await axios.get(
      "https://imdb.iamidiotareyoutoo.com/justwatch",
      {
        params: {
          q: query,
          L: "en_US"
        }
      }
    );


    console.log(response.data);


    container.innerHTML = "";


    let movies = [];


    /*
      API can return:
      - array
      - object
      - object.description
      - object.results
    */


    if (Array.isArray(response.data)) {


      movies = response.data;


    } else if (response.data.description) {


      movies = response.data.description;


    } else if (response.data.results) {


      movies = response.data.results;


    } else {


      movies = [response.data];

    }



    movies.forEach(movie => {


      renderMovie(movie);


    });



  } catch(error) {


    console.error(error);


    container.innerHTML =
      "Error: " + error.message;


  }

}




function renderMovie(movie) {


  const container = document.getElementById("movies");



  const image = movie.photo_url?.[0] ||

    "https://via.placeholder.com/350x450";



  const tomato = movie.tomatoMeter
    ? movie.tomatoMeter + "%"
    : "N/A";



  const jwRating = movie.jwRating
    ? Math.round(movie.jwRating * 100) + "%"
    : "N/A";



  let offersHTML = "";



  if(movie.offers) {


    movie.offers
      .slice(0,8)
      .forEach(offer => {


        offersHTML += `

          <div class="offer">

            <b>${offer.type}</b><br>

            ${offer.name}

            <br>

            <a 
              href="${offer.url}" 
              target="_blank"
            >
              Watch
            </a>

          </div>

     ...