From ff0aad28f955dc613d88be83c574ce7dd860dcb8 Mon Sep 17 00:00:00 2001 From: ayangupta9 Date: Fri, 3 Sep 2021 21:16:50 +0530 Subject: [PATCH] =?UTF-8?q?=E2=9C=8F=20enhanced=20readability=20by=20forma?= =?UTF-8?q?tting=20date=20strings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + js/formatDate.js | 22 ++++++++ js/indexMovies.js | 67 ++++++++++++++----------- js/movie.js | 2 +- js/searchMovie.js | 2 +- js/searchTv.js | 85 ++++++++++++++++--------------- js/tv.js | 124 ++++++++++++++++++++++++++-------------------- movies.html | 1 + singleMovie.html | 1 + singleTv.html | 1 + tv.html | 102 ++++++++++++++++++++------------------ 11 files changed, 234 insertions(+), 174 deletions(-) create mode 100644 js/formatDate.js diff --git a/index.html b/index.html index 34ff6cb..209bdb5 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,7 @@ + diff --git a/js/formatDate.js b/js/formatDate.js new file mode 100644 index 0000000..539ce7f --- /dev/null +++ b/js/formatDate.js @@ -0,0 +1,22 @@ +const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December' +] + +function formatDate (stringDate) { + const date = new Date(stringDate) + const formattedDate = `${ + months[date.getMonth()] + } ${date.getDate()}, ${date.getFullYear()}` + return formattedDate +} diff --git a/js/indexMovies.js b/js/indexMovies.js index e5753b2..6fe4b07 100644 --- a/js/indexMovies.js +++ b/js/indexMovies.js @@ -1,39 +1,48 @@ - -$( document ).ready(function() { - axios.get('https://api.themoviedb.org/3/discover/movie?api_key=ca5d667528ca51e527d9e4f7830d97d2&language=en-US&sort_by=popularity.desc&include_adult=false') - .then((response) =>{ - let movies = response.data.results; - console.log(response); - let output =''; - $.each(movies, (index, movie) =>{ - output += ` +$(document).ready(function () { + axios + .get( + 'https://api.themoviedb.org/3/discover/movie?api_key=ca5d667528ca51e527d9e4f7830d97d2&language=en-US&sort_by=popularity.desc&include_adult=false' + ) + .then(response => { + let movies = response.data.results + console.log(response) + let output = '' + $.each(movies, (index, movie) => { + output += `
- - ${movie.title} + + ${movie.title}

${movie.title}

- Released On

${movie.release_date}

- Movie Details + Released On

${formatDate(movie.release_date)}

+ Movie Details
- `; - }); - $('#home-movies').html(output); - }) - .catch((err) =>{ - console.log(err); - }); -}); - + ` + }) + $('#home-movies').html(output) + }) + .catch(err => { + console.log(err) + }) +}) -//function to display navbar background-color on scroll -window.onscroll = function(){scrollFunction()} -function scrollFunction(){ - if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10){ - document.getElementById('mainNav').style.backgroundColor = '#323033'; - }else{ - document.getElementById('mainNav').style.backgroundColor = 'transparent'; +//function to display navbar background-color on scroll +window.onscroll = function () { + scrollFunction() +} +function scrollFunction () { + if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) { + document.getElementById('mainNav').style.backgroundColor = '#323033' + } else { + document.getElementById('mainNav').style.backgroundColor = 'transparent' } } diff --git a/js/movie.js b/js/movie.js index 7cd68d3..5116c4e 100644 --- a/js/movie.js +++ b/js/movie.js @@ -47,7 +47,7 @@ function getMovie() { ` : `
  • Released On: ${ - movie.release_date + formatDate(movie.release_date) }
    • ` } diff --git a/js/searchMovie.js b/js/searchMovie.js index dd3fb83..13d8b37 100644 --- a/js/searchMovie.js +++ b/js/searchMovie.js @@ -47,7 +47,7 @@ function getMovies(searchText) { }

    ${movie.title}

    -

    Released On
    ${movie.release_date}

    +

    Released On
    ${formatDate(movie.release_date)}

    Movie Details diff --git a/js/searchTv.js b/js/searchTv.js index db34414..9fbecee 100644 --- a/js/searchTv.js +++ b/js/searchTv.js @@ -1,57 +1,62 @@ - - - $(document).ready(() => { - $('#searchForm').on('submit', (e) => { - let searchText = $('#searchText').val(); - getMovies(searchText); - e.preventDefault(); - - }); -}); - - -function getMovies(searchText){ - axios.get('https://api.themoviedb.org/3/search/tv?api_key=ca5d667528ca51e527d9e4f7830d97d2&language=en-US&query='+searchText+'&page=1') - .then((response) =>{ - let movies = response.data.results; - console.log(response); - let output =''; - if(movies.length>0){ - $.each(movies, (index, movie) =>{ - output += ` + $('#searchForm').on('submit', e => { + let searchText = $('#searchText').val() + getMovies(searchText) + e.preventDefault() + }) +}) + +function getMovies (searchText) { + axios + .get( + 'https://api.themoviedb.org/3/search/tv?api_key=ca5d667528ca51e527d9e4f7830d97d2&language=en-US&query=' + + searchText + + '&page=1' + ) + .then(response => { + let movies = response.data.results + console.log(response) + let output = '' + if (movies.length > 0) { + $.each(movies, (index, movie) => { + output += `
    - ${!movie.poster_path ? - - ` + ${ + !movie.poster_path + ? ` ${movie.name} - `:` + ` + : ` ${movie.name} ` - } + }

    ${movie.name}

    -

    Released On
    ${movie.first_air_date}

    - View Details +

    Released On
    ${formatDate( + movie.first_air_date + )}

    + View Details

    - `; - }); - $('#movies').html(output); - } - else { - output ='

    No Tv Series Available with this Name!! Please Try Another Name

    ' - $('#movies').html(output); - } - }) - .catch((err) =>{ - console.log(err); - }); + ` + }) + $('#movies').html(output) + } else { + output = + '

    No Tv Series Available with this Name!! Please Try Another Name

    ' + $('#movies').html(output) + } + }) + .catch(err => { + console.log(err) + }) } diff --git a/js/tv.js b/js/tv.js index cef4a5b..150c1ac 100644 --- a/js/tv.js +++ b/js/tv.js @@ -1,77 +1,92 @@ - -const notAvailable = 'N/A'; -let title=''; -let searchTitle =''; - -function movieSelected(id){ - sessionStorage.setItem('movieId', id); - window.location = 'singleTv.html'; - return false; +const notAvailable = 'N/A' +let title = '' +let searchTitle = '' + +function movieSelected (id) { + sessionStorage.setItem('movieId', id) + window.location = 'singleTv.html' + return false } - - -function getMovie(){ - let movieId = sessionStorage.getItem('movieId'); - - axios.get('https://api.themoviedb.org/3/tv/'+movieId+'?api_key=ca5d667528ca51e527d9e4f7830d97d2&language=en-US') - .then((response) =>{ - console.log(response); - let movie = response.data; - let output =` +function getMovie () { + let movieId = sessionStorage.getItem('movieId') + + axios + .get( + 'https://api.themoviedb.org/3/tv/' + + movieId + + '?api_key=ca5d667528ca51e527d9e4f7830d97d2&language=en-US' + ) + .then(response => { + console.log(response) + let movie = response.data + let output = `
    - ${!movie.poster_path ? - - ` + ${ + !movie.poster_path + ? `
    ${movie.title}
    - `:` + ` + : `
    ${movie.title}
    ` - } + }

    ${movie.original_name}

      - ${!movie.first_air_date? - ` + ${ + !movie.first_air_date + ? `
    • Released On:${notAvailable}
      • - `:` -
    • Released On: ${movie.first_air_date}
      • - ` - } - ${!movie.genres[0].name? + ` + : ` +
    • Released On: ${formatDate( + movie.first_air_date + )}
      • ` + } + ${ + !movie.genres[0].name + ? `
    • Rated:${notAvailable}
      • - `:` + ` + : `
    • Rated: ${movie.genres[0].name}
      • ` - } - ${!movie.created_by[0].name? - ` + } + ${ + !movie.created_by[0].name + ? `
    • Tagline:${notAvailable}
      • - `:` + ` + : `
    • Tagline: ${movie.created_by[0].name}
      • ` - } - ${!movie.production_companies[0].name? - ` + } + ${ + !movie.production_companies[0].name + ? `
    • production Companies:${notAvailable}
      • - `:` + ` + : `
    • production Companies: ${movie.production_companies[0].name}
      • ` - } - ${!movie.origin_country[0]? - ` + } + ${ + !movie.origin_country[0] + ? `
    • production Country:${notAvailable}
      • - `:` + ` + : `
    • production Country: ${movie.origin_country[0]}
      • ` - } + }
    @@ -79,10 +94,12 @@ function getMovie(){

    Plot

    - ${!movie.overview?notAvailable:movie.overview} + ${!movie.overview ? notAvailable : movie.overview}

    - Watch It + Watch It Go back to search
    @@ -91,11 +108,10 @@ function getMovie(){ - `; - $('#movie').html(output); - }) - .catch((err) =>{ - console.log(err); - }); - + ` + $('#movie').html(output) + }) + .catch(err => { + console.log(err) + }) } diff --git a/movies.html b/movies.html index a0e3d03..46102e7 100644 --- a/movies.html +++ b/movies.html @@ -21,6 +21,7 @@ + diff --git a/singleMovie.html b/singleMovie.html index 0788385..41202cf 100644 --- a/singleMovie.html +++ b/singleMovie.html @@ -20,6 +20,7 @@ + diff --git a/singleTv.html b/singleTv.html index bc6f746..65f8b0d 100644 --- a/singleTv.html +++ b/singleTv.html @@ -22,6 +22,7 @@ + diff --git a/tv.html b/tv.html index 90d5ee4..4895c50 100644 --- a/tv.html +++ b/tv.html @@ -1,6 +1,6 @@ - - + + @@ -12,70 +12,73 @@ - + - + + - - -
    -
    -
    -

    Search for any Show

    -
    - - -
    -
    +
    +
    +

    Search for any Show

    +
    + + +
    -
    +
    +
    -
    +
    @@ -113,5 +116,6 @@

    Search for an - - + + + \ No newline at end of file