From 8d1a3697e2cd9a47af7e4cbda7763a309dadad59 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Tue, 30 May 2023 18:59:49 +0000 Subject: [PATCH 1/7] Setting up GitHub Classroom Feedback From 630e8a4b5a5928969a54bb00d25c2b99a2ff6826 Mon Sep 17 00:00:00 2001 From: Thien Dang Date: Mon, 5 Jun 2023 10:19:16 -0400 Subject: [PATCH 2/7] Completed Part 1 by first creating a new array matching and filtering the match titles from the movie details API and added to a new array contianing the needed info with the movies info. --- code.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/code.js b/code.js index 1a8bb5c..91c1bdd 100644 --- a/code.js +++ b/code.js @@ -1,4 +1,9 @@ // Your Code Here! +let movieInfo = movies.map(movie => movieDetails.filter(details => details.title === movie.title)); +let movieCatalog = [...movies, ...movieInfo]; + + +document.write(JSON.stringify(movieCatalog)); console.log("Movies:", movies); console.log("MovieDetails:", movieDetails); \ No newline at end of file From a8490d32fe1a89bfd7f2b8062c9d3f4699400042 Mon Sep 17 00:00:00 2001 From: Thien Dang Date: Tue, 6 Jun 2023 22:34:10 -0400 Subject: [PATCH 3/7] Rendered the new array as a list to visually verify the list, and then filtered it to removed any undefined in the new list --- code.js | 10 ++++++++-- index.html | 4 +++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/code.js b/code.js index 91c1bdd..bf0d799 100644 --- a/code.js +++ b/code.js @@ -1,9 +1,15 @@ // Your Code Here! let movieInfo = movies.map(movie => movieDetails.filter(details => details.title === movie.title)); let movieCatalog = [...movies, ...movieInfo]; - -document.write(JSON.stringify(movieCatalog)); +let movieListDiv = document.getElementById("movieList"); +let movieListRender = movieCatalog + .filter(movie => movie.title !== undefined) + .forEach(movie => { + movieListDiv.innerHTML += `
  • ${movie.title}
    • ` +}) + +// document.write(JSON.stringify(movieCatalog)); console.log("Movies:", movies); console.log("MovieDetails:", movieDetails); \ No newline at end of file diff --git a/index.html b/index.html index 97e84c4..18ddbcc 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,9 @@

    Kenzie Movie Catalog

    - Write Your HTML Here! + + + From 9ccf71b63a111cfdf991479afcab379082aa55c5 Mon Sep 17 00:00:00 2001 From: Thien Dang Date: Tue, 6 Jun 2023 22:48:57 -0400 Subject: [PATCH 4/7] Got a basic search funtion active, now going to render the required completion criteria --- code.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/code.js b/code.js index bf0d799..5502248 100644 --- a/code.js +++ b/code.js @@ -1,14 +1,25 @@ // Your Code Here! let movieInfo = movies.map(movie => movieDetails.filter(details => details.title === movie.title)); -let movieCatalog = [...movies, ...movieInfo]; +let movieCatalog = [...movies, ...movieInfo].filter(movie => movie.title !== undefined); let movieListDiv = document.getElementById("movieList"); -let movieListRender = movieCatalog - .filter(movie => movie.title !== undefined) - .forEach(movie => { +let movieListRender = movieCatalog.forEach(movie => { movieListDiv.innerHTML += `
  • ${movie.title}
    • ` }) +let searchButton = document.getElementById("searchButton"); +let searchBar = document.getElementById("searchBar"); + +searchButton.addEventListener("click", () => { + movieListDiv.innerHTML = ""; + movieListRender = movieCatalog.filter(function(movie) { + return movie.title.toLowerCase().includes(searchBar.value.toLowerCase()); + }); + movieListRender.forEach(result => { + movieListDiv.innerHTML += `
  • ${result.title}
    • ` + }); +}); + // document.write(JSON.stringify(movieCatalog)); console.log("Movies:", movies); From 0ca6f017daa66af1a303383f8fc34e71b41780bf Mon Sep 17 00:00:00 2001 From: Thien Dang Date: Tue, 6 Jun 2023 23:37:59 -0400 Subject: [PATCH 5/7] Got basic styling in, next up is finishing the css styling, and info --- code.js | 5 ++++- index.html | 2 +- style.css | 20 ++++++++++++++++++++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/code.js b/code.js index 5502248..c978b85 100644 --- a/code.js +++ b/code.js @@ -3,8 +3,11 @@ let movieInfo = movies.map(movie => movieDetails.filter(details => details.title let movieCatalog = [...movies, ...movieInfo].filter(movie => movie.title !== undefined); let movieListDiv = document.getElementById("movieList"); +// let movieListDivID = ""; + let movieListRender = movieCatalog.forEach(movie => { - movieListDiv.innerHTML += `
  • ${movie.title}
    • ` + // movieListDivID = `${movie.title.toLowerCase()}`.replace(/[^a-z0-9]+/ig, ""); + movieListDiv.innerHTML += `
    ${movie.title}
    `; }) let searchButton = document.getElementById("searchButton"); diff --git a/index.html b/index.html index 18ddbcc..583a813 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@

    Kenzie Movie Catalog

    -
      +
      diff --git a/style.css b/style.css index 7e60e49..ddcd65b 100644 --- a/style.css +++ b/style.css @@ -1 +1,21 @@ /* Write your CSS Here. */ +body { + margin: auto; + width: 100%; + min-width: 700px; + max-width: 800px; +} + +#movieList { + margin: auto; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.movieDiv { + width: 200px; + margin: 10px; + padding: 20px; + border: 1px solid black; +} \ No newline at end of file From 2a721d3d8c223012db6ed3115460538b5adcdbe5 Mon Sep 17 00:00:00 2001 From: Thien Dang Date: Wed, 7 Jun 2023 00:05:28 -0400 Subject: [PATCH 6/7] Ran into issue with imageUrls, looks like I am missing some info from the moviesDetails array --- code.js | 50 ++++++++++++++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/code.js b/code.js index c978b85..7e21ed9 100644 --- a/code.js +++ b/code.js @@ -2,28 +2,38 @@ let movieInfo = movies.map(movie => movieDetails.filter(details => details.title === movie.title)); let movieCatalog = [...movies, ...movieInfo].filter(movie => movie.title !== undefined); -let movieListDiv = document.getElementById("movieList"); -// let movieListDivID = ""; +document.write(JSON.stringify(movieCatalog)); -let movieListRender = movieCatalog.forEach(movie => { - // movieListDivID = `${movie.title.toLowerCase()}`.replace(/[^a-z0-9]+/ig, ""); - movieListDiv.innerHTML += `
      ${movie.title}
      `; -}) +// let movieListDiv = document.getElementById("movieList"); -let searchButton = document.getElementById("searchButton"); -let searchBar = document.getElementById("searchBar"); +// let movieListRender = movieCatalog.forEach(movie => { +// movieListDiv.innerHTML += ` +//
      +// +//

      ${movie.title}

      +//

      Starring: ${movie.cast}

      +//
      Released: ${movie.year}

      +//
      `; +// }) -searchButton.addEventListener("click", () => { - movieListDiv.innerHTML = ""; - movieListRender = movieCatalog.filter(function(movie) { - return movie.title.toLowerCase().includes(searchBar.value.toLowerCase()); - }); - movieListRender.forEach(result => { - movieListDiv.innerHTML += `
    • ${result.title}
      • ` - }); -}); +// let searchButton = document.getElementById("searchButton"); +// let searchBar = document.getElementById("searchBar"); -// document.write(JSON.stringify(movieCatalog)); +// searchButton.addEventListener("click", () => { +// movieListDiv.innerHTML = ""; +// movieListRender = movieCatalog.filter(function(movie) { +// return movie.title.toLowerCase().includes(searchBar.value.toLowerCase()); +// }); +// movieListRender.forEach(result => { +// movieListDiv.innerHTML += ` +//
      +// +//

      ${result.title}

      +//

      Starring: ${result.cast}

      +//
      Released: ${result.year}

      +//
      `; +// }); +// }); -console.log("Movies:", movies); -console.log("MovieDetails:", movieDetails); \ No newline at end of file +// console.log("Movies:", movies); +// console.log("MovieDetails:", movieDetails); \ No newline at end of file From 444f8ee553c0179e52151f1434c2c41d935e8078 Mon Sep 17 00:00:00 2001 From: Thien Dang Date: Wed, 7 Jun 2023 01:58:40 -0400 Subject: [PATCH 7/7] Ready to submit --- code.js | 74 ++++++++++++++++++++++++++++++++---------------------- index.html | 5 ++-- style.css | 8 ++++++ 3 files changed, 55 insertions(+), 32 deletions(-) diff --git a/code.js b/code.js index 7e21ed9..596791c 100644 --- a/code.js +++ b/code.js @@ -2,38 +2,52 @@ let movieInfo = movies.map(movie => movieDetails.filter(details => details.title === movie.title)); let movieCatalog = [...movies, ...movieInfo].filter(movie => movie.title !== undefined); -document.write(JSON.stringify(movieCatalog)); +let movieListDiv = document.getElementById("movieList"); -// let movieListDiv = document.getElementById("movieList"); +let movieCompare = function(movie) { + for (let detail of movieDetails) { + if (movie.title === detail.title) { + return detail.imageUrl; + } + } +} -// let movieListRender = movieCatalog.forEach(movie => { -// movieListDiv.innerHTML += ` -//
      -// -//

      ${movie.title}

      -//

      Starring: ${movie.cast}

      -//
      Released: ${movie.year}

      -//
      `; -// }) +let movieListRender = movieCatalog.forEach(movie => { + for (let detail of movieDetails) { + if (movie.title === detail.title) { + movieListDiv.innerHTML += ` +
      + +

      ${movie.title}

      +

      Starring: ${movie.cast}

      +
      Released: ${movie.year}

      +
      `; + } + } +}) -// let searchButton = document.getElementById("searchButton"); -// let searchBar = document.getElementById("searchBar"); +let titleSearchButton = document.getElementById("titleSearchButton"); +let titleSearchBar = document.getElementById("titleSearchBar"); -// searchButton.addEventListener("click", () => { -// movieListDiv.innerHTML = ""; -// movieListRender = movieCatalog.filter(function(movie) { -// return movie.title.toLowerCase().includes(searchBar.value.toLowerCase()); -// }); -// movieListRender.forEach(result => { -// movieListDiv.innerHTML += ` -//
      -// -//

      ${result.title}

      -//

      Starring: ${result.cast}

      -//
      Released: ${result.year}

      -//
      `; -// }); -// }); +titleSearchButton.addEventListener("click", () => { + movieListDiv.innerHTML = ""; + movieListRender = movieCatalog.filter(function(movie) { + return movie.title.toLowerCase().includes(titleSearchBar.value.toLowerCase()); + }); + movieListRender.forEach(result => { + for (let detail of movieDetails) { + if (result.title === detail.title) { + movieListDiv.innerHTML += ` +
      + +

      ${result.title}

      +

      Starring: ${result.cast}

      +
      Released: ${result.year}

      +
      `; + } + } + }); +}); -// console.log("Movies:", movies); -// console.log("MovieDetails:", movieDetails); \ No newline at end of file +console.log("Movies:", movies); +console.log("MovieDetails:", movieDetails); \ No newline at end of file diff --git a/index.html b/index.html index 583a813..6933a3c 100644 --- a/index.html +++ b/index.html @@ -21,8 +21,9 @@

      Kenzie Movie Catalog

      - - + +
      +
      diff --git a/style.css b/style.css index ddcd65b..51569c3 100644 --- a/style.css +++ b/style.css @@ -5,9 +5,17 @@ body { min-width: 700px; max-width: 800px; } +input { + margin: 10px 0px; +} + +button { + margin: 10px; +} #movieList { margin: auto; + margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center;