Merge pull request #69 from Srijan1878/movie-website

Added the Movie-Website

Author: Ayushparikh-code

Movie-Website/Icon.ico

@@ -0,0 +1,24 @@
+# Movie App
+Built with Vanilla JavaScript. Below is a list of the methods and properties use
+
+* querySelector
+* createElement
+* innerHTML
+* appendChild
+* insertBefore
+* preventDefault
+* dataset
+* parentElement
+* nextElementSibling
+* classList
+    * add
+    * remove
+* fetch
+* bind
+* setAttribute
+* onClick
+* toLowerCase
+* target
+
+
+### Video coming soon!!!

Movie-Website/README.md

@@ -0,0 +1,56 @@
+// Initial Values
+const MOVIE_DB_API = '6bf3b3542f9ff12290736047042a751d';
+const MOVIE_DB_ENDPOINT = 'https://api.themoviedb.org';
+const MOVIE_DB_IMAGE_ENDPOINT = 'https://image.tmdb.org/t/p/w500';
+const DEFAULT_POST_IMAGE = 'https://via.placeholder.com/150';
+
+function requestMovies(url, onComplete, onError) {
+    fetch(url)
+        .then((res) => res.json())
+        .then(onComplete)
+        .catch(onError);
+}
+
+function generateMovieDBUrl(path) {
+    const url = `${MOVIE_DB_ENDPOINT}/3${path}?api_key=${MOVIE_DB_API}`;
+    return url;
+}
+
+
+function getTopRatedMovies() {
+    const url = generateMovieDBUrl(`/movie/top_rated`);
+    const render = renderMovies.bind({ title: 'Top Rated Movies' })
+    requestMovies(url, render, handleGeneralError);
+}
+
+function getTrendingMovies() {
+    const url = generateMovieDBUrl('/trending/movie/day');
+    const render = renderMovies.bind({ title: 'Trending Movies' })
+    requestMovies(url, render, handleGeneralError);
+}
+
+
+function searchUpcomingMovies() {
+    const url = generateMovieDBUrl('/movie/upcoming');
+    const render = renderMovies.bind({ title: 'Upcoming Movies' })
+    requestMovies(url, render, handleGeneralError);
+}
+
+function searchPopularMovie() {
+    const url = generateMovieDBUrl('/movie/popular');
+    const render = renderMovies.bind({ title: 'Popular Movies' });
+    requestMovies(url, render, handleGeneralError);
+}
+
+// Invoke a different function for search movies
+function searchMovie(value) {
+    const url = generateMovieDBUrl('/search/movie') + '&query=' + value;
+    requestMovies(url, renderSearchMovies, handleGeneralError);
+}
+
+
+function getVideosByMovieId(movieId, content) {
+    const url = generateMovieDBUrl(`/movie/${movieId}/videos`);
+    const render = createVideoTemplate.bind({ content });
+    requestMovies(url, render, handleGeneralError);
+}

Movie-Website/apiTransaction.js

@@ -0,0 +1,166 @@
+// Initial Values
+const INITIAL_SEARCH_VALUE = 'spiderman';
+const log = console.log;
+
+// Selecting elements from the DOM
+const searchButton = document.querySelector('#search');;
+const searchInput = document.querySelector('#exampleInputEmail1');
+const moviesContainer = document.querySelector('#movies-container');
+const moviesSearchable = document.querySelector('#movies-searchable');
+
+function createImageContainer(imageUrl, id) {
+    const tempDiv = document.createElement('div');
+    tempDiv.setAttribute('class', 'imageContainer');
+    tempDiv.setAttribute('data-id', id);
+
+    const movieElement = `
+        <img src="${imageUrl}" alt="" data-movie-id="${id}">
+    `;
+    tempDiv.innerHTML = movieElement;
+
+    return tempDiv;
+}
+
+function resetInput() {
+    searchInput.value = '';
+}
+
+function handleGeneralError(error) {
+    log('Error: ', error.message);
+    alert(error.message || 'Internal Server');
+}
+
+function createIframe(video) {
+    const videoKey = (video && video.key) || 'No key found!!!';
+    const iframe = document.createElement('iframe');
+    iframe.src = `https://www.youtube.com/embed/${videoKey}`;
+    iframe.width = 360;
+    iframe.height = 315;
+    iframe.allowFullscreen = true;
+    return iframe;
+}
+
+function insertIframeIntoContent(video, content) {
+    const videoContent = document.createElement('div');
+    const iframe = createIframe(video);
+
+    videoContent.appendChild(iframe);
+    content.appendChild(videoContent);
+}
+
+
+function createVideoTemplate(data) {
+    const content = this.content;
+    content.innerHTML = '<p id="content-close">X</p>';
+    
+    const videos = data.results || [];
+
+    if (videos.length === 0) {
+        content.innerHTML = `
+            <p id="content-close">X</p>
+            <p>No Trailer found for this video id of ${data.id}</p>
+        `;
+        return;
+    }
+
+    for (let i = 0; i < 4; i++) {
+        const video = videos[i];
+        insertIframeIntoContent(video, content);
+    }
+}
+
+function createSectionHeader(title) {
+    const header = document.createElement('h2');
+    header.innerHTML = title;
+
+    return header;
+}
+
+
+function renderMovies(data) {
+    const moviesBlock = generateMoviesBlock(data);
+    const header = createSectionHeader(this.title);
+    moviesBlock.insertBefore(header, moviesBlock.firstChild);
+    moviesContainer.appendChild(moviesBlock);
+}
+
+
+
+function renderSearchMovies(data) {
+    moviesSearchable.innerHTML = '';
+    const moviesBlock = generateMoviesBlock(data);
+    moviesSearchable.appendChild(moviesBlock);
+}
+
+function generateMoviesBlock(data) {
+    const movies = data.results;
+    const section = document.createElement('section');
+    section.setAttribute('class', 'section');
+
+    for (let i = 0; i < movies.length; i++) {
+        const { poster_path, id } = movies[i];
+
+        if (poster_path) {
+            const imageUrl = MOVIE_DB_IMAGE_ENDPOINT + poster_path;
+    
+            const imageContainer = createImageContainer(imageUrl, id);
+            section.appendChild(imageContainer);
+        }
+    }
+
+    const movieSectionAndContent = createMovieContainer(section);
+    return movieSectionAndContent;
+}
+
+
+
+// Inserting section before content element
+function createMovieContainer(section) {
+    const movieElement = document.createElement('div');
+    movieElement.setAttribute('class', 'movie');
+
+    const template = `
+        <div class="content">
+            <p id="content-close">X</p>
+        </div>
+    `;
+
+    movieElement.innerHTML = template;
+    movieElement.insertBefore(section, movieElement.firstChild);
+    return movieElement;
+}
+
+searchButton.onclick = function (event) {
+    event.preventDefault();
+    const value = searchInput.value
+   if (value) {
+    searchMovie(value);
+   }
+    resetInput();
+}
+
+// Click on any movies
+// Event Delegation
+document.onclick = function (event) {
+    log('Event: ', event);
+    const { tagName, id } = event.target;
+    if (tagName.toLowerCase() === 'img') {
+        const movieId = event.target.dataset.movieId;
+        const section = event.target.parentElement.parentElement;
+        const content = section.nextElementSibling;
+        content.classList.add('content-display');
+        getVideosByMovieId(movieId, content);
+    }
+
+    if (id === 'content-close') {
+        const content = event.target.parentElement;
+        content.classList.remove('content-display');
+    }
+}
+
+// Initialize the search
+searchMovie(INITIAL_SEARCH_VALUE);
+searchUpcomingMovies();
+getTopRatedMovies();
+searchPopularMovie();
+getTrendingMovies();

Movie-Website/app.js

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="shortcut icon" href="Icon.ico" type="image/x-icon" />.
+    <title>BingeNation</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+      <img src="logo.png" class="poster" alt="logo">
+      <h1>BingeNation</h1>
+      </div>
+      <form>
+        <div class="form-group">
+          <input
+            type="text"
+            class="form-control"
+            id="exampleInputEmail1"
+            aria-describedby="emailHelp"
+            placeholder="Search a Movie.."
+          />
+        </div>
+        <button type="submit" class="btn" id="search">
+          Search
+        </button>
+      </form>
+
+      <div id="movies-searchable"></div>
+      <div id="movies-container"></div>
+    </div>
+
+    <script src="apiTransaction.js"></script>
+    <script src=" app.js"></script>
+  </body>
+</html>