TGViewer
Html and Css & Jsآموزش Html and Css & Jsآموزش @htmlcss_channels · 22.9K subscribers
Post #275 6.31K
JavaScript Code For Movie Website:-

const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";

const IMGPATH = "https://image.tmdb.org/t/p/w1280";

const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

// ye HTML WALE TAG

const main = document.getElementById("main");

const form = document.getElementById("form");

const search = document.getElementById("search");

///initalyy get fav movies

getMovies(APIURL);

async function getMovies(url) {

const resp = await fetch(url);

const respData = await resp.json();

// movie aa gyi

console.log(respData);

// yaha pe show karenge

showMovies(respData.results);

}

function showMovies(movies) {

//clear main

main.innerHTML = "";

movies.forEach((movie) => {

const { poster_path, title, vote_average, overview } = movie;

// raja

const movieEl = document.createElement("div");

movieEl.classList.add("movie");

movieEl.innerHTML =

<img src="${IMGPATH + poster_path}" alt="${title}"/>

<div class="movie-info">

<h3>${title}</h3>

<span class="${getClassByRate(vote_average)}">${vote_average}</span>

</div>

<div class="overview">

<h2>Overview:</h2>

${overview}

</div>

;

main.appendChild(movieEl)

});

}

function getClassByRate(vote) {
return 'green';

} else if (vote >= 5) {

return 'orange'

} else {

return 'red';

}

}

form.addEventListener("submit", (e) => {

e.preventDefault();

const searchTerm = search.value;

if (searchTerm) {

getMovies(SEARCHAPI + searchTerm);

search.value = "";

}

});




با ری اکشن بهمون انرژی بدید❤️


💎 Channel: @htmlcss_channels
  • ❤ 53
  • 👍 7
  • 🔥 6
More from @htmlcss_channels
  1. Oct 10, 2026🎰 گردونه رو بچرخون، جایزه ببر! 👀 فقط یه چرخش تا جایزه‌ت فاصله داری. 🔗https://quera.org/…
  2. Oct 10, 2026غول فناوری و هوش مصنوعی یک سرور قدرتمند برای نسل جدید پردازش‌های هوش مصنوعی و زیرساخت‌های…
  3. Oct 3, 2026HTML Shortcuts You Must Know 💎 @Htmlcss_channels | #HTML #css #JavaScript
  4. Oct 2, 2026سایت StringTune یه مجموعه از کامپوننت های آماده برای ساخت تجربه‌های تعاملی و انیمیشن‌های م…
  5. Oct 1, 2026📊 نمودارهای آماده و انیمیشن‌دار برای React با EvilCharts نمودارهایی مثل Line، Bar، Pie و…
  6. Sep 30, 2026If you have a website, incorporating an AI agent (or several) can be really helpful. And i…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →