✏ enhanced readability by formatting date strings

index.html

@@ -23,6 +23,7 @@
     <!-- Custom styles for this template -->
     <link href="css/style.css" rel="stylesheet">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+    <script src="js/formatDate.js"></script>
     <script src="js/indexMovies.js"></script>
     <script type="text/javascript" src="js/movie.js"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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
+}

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 += `
       <div class="col-md-4 col-sm-6 portfolio-item">
-        <a class="portfolio-link" data-toggle="modal" href="#" onclick="movieSelected('${movie.id}')">
-          <img class="img-fluid" src="https://image.tmdb.org/t/p/w500/${movie.poster_path}" alt="${movie.title}">
+        <a class="portfolio-link" data-toggle="modal" href="#" onclick="movieSelected('${
+          movie.id
+        }')">
+          <img class="img-fluid" src="https://image.tmdb.org/t/p/w500/${
+            movie.poster_path
+          }" alt="${movie.title}">
         </a>
         <div class="portfolio-caption">
           <h4>${movie.title}</h4>
-          Released On<p class="text-muted">${movie.release_date}</p>
-        <a onclick="movieSelected('${movie.id}')" class="btn btn-primary" href="#">Movie Details</a>
+          Released On<p class="text-muted">${formatDate(movie.release_date)}</p>
+        <a onclick="movieSelected('${
+          movie.id
+        }')" class="btn btn-primary" href="#">Movie Details</a>
         </div>
       </div>
 
-      `;
-    });
-    $('#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'
   }
 }

js/movie.js

@@ -47,7 +47,7 @@ function getMovie() {
                 `
                   : `
               <li class="list-group-item"><strong>Released On:</strong> ${
-                movie.release_date
+                formatDate(movie.release_date)
               }</li>
               `
               }

js/searchMovie.js

@@ -47,7 +47,7 @@ function getMovies(searchText) {
         }
         <div class="portfolio-caption">
           <h4 style="color:black">${movie.title}</h4>
-          <p class="text-muted">Released On<br/>${movie.release_date}</p>
+          <p class="text-muted">Released On<br/>${formatDate(movie.release_date)}</p>
         <a onclick="movieSelected('${
           movie.id
         }')" class="btn btn-primary" href="#">Movie Details</a>

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 += `
       <div class="col-md-4 col-sm-6 portfolio-item">
-        ${!movie.poster_path ?
-
-      `
+        ${
+          !movie.poster_path
+            ? `
       <a class="portfolio-link" data-toggle="modal" href="#" onclick="movieSelected('${movie.id}')">
          <img class="img-fluid" src="img/no-poster.gif" alt="${movie.name}">
        </a>
 
-        `:`
+        `
+            : `
         <a class="portfolio-link" data-toggle="modal" href="#" onclick="movieSelected('${movie.id}')">
             <img class="img-fluid" src="https://image.tmdb.org/t/p/w500/${movie.poster_path}" alt="${movie.name}">
           </a>
           `
-      }
+        }
         <div class="portfolio-caption">
           <h4 class="text-dark">${movie.name}</h4>
-          <p class="text-muted">Released On<br/>${movie.first_air_date}</p>
-        <a onclick="movieSelected('${movie.id}')" class="btn btn-primary" href="#">View Details</a>
+          <p class="text-muted">Released On<br/>${formatDate(
+            movie.first_air_date
+          )}</p>
+        <a onclick="movieSelected('${
+          movie.id
+        }')" class="btn btn-primary" href="#">View Details</a>
         <br><br>
         </div>
       </div>
 
-      `;
-    });
-    $('#movies').html(output);
-  }
-  else {
-    output ='<h2 class="text-center">No Tv Series Available with this Name!! Please Try Another Name</h2>'
-    $('#movies').html(output);
-  }
-  })
-  .catch((err) =>{
-    console.log(err);
-  });
+      `
+        })
+        $('#movies').html(output)
+      } else {
+        output =
+          '<h2 class="text-center">No Tv Series Available with this Name!! Please Try Another Name</h2>'
+        $('#movies').html(output)
+      }
+    })
+    .catch(err => {
+      console.log(err)
+    })
 }