NetFlixDemo

by pvskr

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Netflix.css">
    <title>Netflix</title>
</head>
<body>
   
      <main>
        <div class="netflixOriginals">
            <div class="original_header">
                <h2>NETFLIX ORIGINALS</h2>
            </div>
            <div class="original_movies">
                                <!--original movies list here-->
            </div>
        </div>
        <details>
            <summary>Wishlist</summary>
            <div class="movies">
                <div class="movies_header">
                   <!--<h2>Wishlist</h2>--> 
                </div>
                <div id="wishlist" class="movies_container"></div>
                <div class="movies_header">
                    <h2>Trending Now</h2>
                </div>
                <div id="trending" class="movies_container">
                    <!--Trending movies list here-->
                </div>
                <div class="movies_header">
                    <h2>Top Rated</h2>
                </div>
                <div id="top_rated" class="movies_container">
                    <!--Top rated movies list here -->
                </div>
            </div>
          </details>
    </main>
   
    
    <script src="Netflix.js"></script>
</body>

</html>

CSS

@keyframes body{
    0%   {
      letter-spacing: 1.2em;
      color: white;
    }
    100%   {
      letter-spacing: 0.1em;
      color: white;
    }
  }
body {
    
    animation-name: body;
    animation-duration: 0.1s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
        padding: 1px;
    border: 1px;
    color: aliceblue;
    background-image: url("https://images.unsplash.com/photo-1517999144091-3d9dca6d1e43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80");
}

summary{
    padding: 3px;
    border: 1px;
    font-size: 30px;
    text-align: center;
    
}


.movies_header{
    padding: 2px;
    border: 2px;
    margin: 10px;
   
}
img{
    width: 87px;
    height: 110px;
    margin: 10px;
    padding: 2px;
    border: 1.5px solid white;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.9s ease-in-out;
    transition: 0.9s ease-in-out;
    object-fit: cover;
  vertical-align: bottom;
  cursor:pointer;
  }
  img:hover{
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
   
    padding: 2px;
}
.original_movies,.movies_container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
}

JavaScript

window.onload=()=>{
    getOriginals()
    getTrendingNow()
    getTopRated()
}
function fetchMovies(url,dom_element,path_type){
fetch(url)
.then(response =>{
    console.log(response)
    if(response.ok){
        return response.json()}
        else{
        throw new Error('something went werong')
        }
}).then(data=>{
    showMovies(data,dom_element,path_type)
}).catch(error=>{
    console.log(error)
})
}

fetchMovies('https://api.themoviedb.org/3/discover/tv?api_key=19f84e11932abbc79e6d83f82d6d1045&with_networks=213')

showMovies=(movies,dom_element,path_type)=>{
    var moviesEl=document.querySelector(dom_element)
    for(let movie of movies.results){
        console.log(movie)
        let imageElement = document.createElement('img')
        //set attribute
        imageElement.setAttribute('data-id',movie.id)
        //set source
        imageElement.src=`https://image.tmdb.org/t/p/original${movie[path_type]}`

        //append the imagelement to the dom_element
        moviesEl.appendChild(imageElement) 
    }

}
fetchMovies('https://api.themoviedb.org/3/discover/tv?api_key=19f84e11932abbc79e6d83f82d6d1045&with_networks=213','original_movies','poster_path')
function getOriginals(){
    let url='https://api.themoviedb.org/3/discover/tv?api_key=19f84e11932abbc79e6d83f82d6d1045&with_networks=213'
    fetchMovies(url,'.original_movies','poster_path')
}
function getTrendingNow()
{
  
    let url='https://api.themoviedb.org/3/trending/movie/week?api_key=19f84e11932abbc79e6d83f82d6d1045'
    fetchMovies(url,'#trending','backdrop_path')
}
function getTopRated()
{
    let url='https://api.themoviedb.org/3/movie/top_rated?api_key=19f84e11932abbc79e6d83f82d6d1045&language=en-US&page=1'
    fetchMovies(url,'#top_rated','backdrop_path') 
}