script.js

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=";

const movieBox = document.querySelector('#movie-box');

const getMovies = async (api) => {
    const response = await fetch(api);
    // jo data response me aya usko ham json me convert kr rhe h
    const data = await response.json();
    console.log(data);

    showMovies(data.results)
}

//ye function chalaye data ko individually nikalne k lye j sab item me store ho rha h
const showMovies = (data) => {
    movieBox.innerHTML = ""; //reset ya empty krta h movie box ko
    data.forEach(
        (item) => {
            const box = document.createElement('div');
            box.classList.add('box');
            box.innerHTML = `
                    <img src="${IMGPATH + item.poster_path}" alt="" width="400">
                    <div class="overlay">
                        <div class="title">
                            <h2>${item.original_title}</h2>
                            <span>${item.vote_average}</span>
                        </div>
                        <h3>Overview : </h3>
                        <p>${item.overview}</p>
                    </div>
            `;
            movieBox.appendChild(box);
        }
    )
    
}

document.querySelector('#search').addEventListener(
    'keyup', //ye predefined h
    //ye event paramete represent krta h k kya event ho rha h
    function(event){
        if(event.target.value != ""){
            getMovies(SEARCHAPI + event.target.value);
        }else{
            getMovies(APIURL); //agr search blank rhega to ye else part run krega
        }
    }            
)

getMovies(APIURL);