Trending Movie or Tv Series Generator

Membangun website TV Series dengan TMDB API biasanya membutuhkan beberapa halaman seperti halaman populer/trending, tayangan yang sedang berlangsung, tayangan hari ini, detail serial, season, hingga episode. Menulis kode yang hampir sama berulang kali tentu memakan waktu dan meningkatkan risiko terjadinya kesalahan. Tending Movie or Tv series Generator hadir untuk menyederhanakan proses tersebut. Generator ini dapat menghasilkan kode halaman Trending TV Series dan Movie secara otomatis berdasarkan pilihan yang Anda tentukan. Script yang dihasilkan sudah disusun agar mudah dipasang, dipelajari, dan dikembangkan sesuai kebutuhan. Alat ini sangat cocok bagi pemula yang ingin belajar menggunakan TMDB API maupun developer yang ingin mempercepat proses pembuatan website Movie dan TV Series di Blogspot atau website HTML. Dengan generator ini, Anda dapat lebih fokus mengembangkan tampilan dan fitur tanpa harus mengulang penulisan kode dasar pada setiap halaman.

Live Demo


<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>TMDB Grid Generator</title>

<style>
body{
  font-family:Arial;
  background:#111;
  color:#fff;
  padding:20px;
}

.box{
  max-width:900px;
  margin:auto;
  background:#1c1c1c;
  padding:15px;
  border-radius:10px;
}

input, select, button, textarea{
  width:100%;
  margin-top:10px;
  padding:10px;
  border:none;
  border-radius:6px;
}

button{
  background:#ff3d00;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
}

textarea{
  height:350px;
  background:#000;
  color:#0f0;
}

/* GRID FIX */
.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr); /* HP FIX 2 KOLOM */
  gap:10px;
  margin:10px 0;
}

@media(min-width:768px){
  .grid{
    grid-template-columns:repeat(5, 1fr);
  }
}

.card{
  background:#222;
  border-radius:8px;
  overflow:hidden;
  text-align:center;
  padding:8px;
}

.card img{
  width:100%;
  border-radius:6px;
}

.card h4{
  font-size:12px;
  margin:5px 0 0;
}

h2{
  margin-top:20px;
}
</style>
</head>
<body>

<div class="box">

<h2>TMDB GRID GENERATOR</h2>

<input id="api" placeholder="API KEY TMDB">

<select id="type">
  <option value="movie">movie</option>
  <option value="tv">tv</option>
</select>

<button onclick="generate()">generate</button>
<button onclick="copyText()">copy</button>

<textarea id="out"></textarea>

</div>

<script>

const movieList = [
  {title:"Upcoming Movie", url:"https://api.themoviedb.org/3/movie/upcoming"},
  {title:"Top Rated Movie", url:"https://api.themoviedb.org/3/movie/top_rated"},
  {title:"Popular Movie", url:"https://api.themoviedb.org/3/movie/popular"},
  {title:"Trending Movie", url:"https://api.themoviedb.org/3/trending/movie/week"}
];

const tvList = [
  {title:"On The Air TV", url:"https://api.themoviedb.org/3/tv/on_the_air"},
  {title:"Airing Today TV", url:"https://api.themoviedb.org/3/tv/airing_today"},
  {title:"Popular TV", url:"https://api.themoviedb.org/3/tv/popular"},
  {title:"Top Rated TV", url:"https://api.themoviedb.org/3/tv/top_rated"}
];

async function fetchData(url, api){
  let res = await fetch(url + "?api_key=" + api + "&language=id-ID&page=1");
  return await res.json();
}

async function generate(){
  let api = document.getElementById("api").value;
  let type = document.getElementById("type").value;

  if(!api){
    alert("API key kosong");
    return;
  }

  let list = type === "movie" ? movieList : tvList;

  let html = "";

  for(let i=0;i<list.length;i++){
    let data = await fetchData(list[i].url, api);

    html += `<h2>${list[i].title}</h2>\n<div class="grid">`;

    data.results.slice(0,10).forEach(v=>{
      let title = v.title || v.name;
      let img = v.poster_path ? "https://image.tmdb.org/t/p/w500"+v.poster_path : "";

      html += `
<div class="card">
  <img src="${img}">
  <h4>${title}</h4>
</div>`;
    });

    html += `</div>`;
  }

  document.getElementById("out").value = html;
}

function copyText(){
  let t = document.getElementById("out");
  t.select();
  document.execCommand("copy");
  alert("copied");
}

</script>

</body>
</html>

Tool

🛠 BERKAH JAYA ABADI TEKNIK

Layanan Jasa Service elektronik panggilan

Pesan Jasa Sekarang

Tending Movie or Tv series Generator

Trending Movie or Tv Series Generator

🛠 BERKAH JAYA ABADI TEKNIK

Ikuti Blog ini