KenzieAcademy-Students · github-classroom · May 30, 2023 · Jun 5, 2023 · Jun 7, 2023 · Jun 7, 2023
diff --git a/code.js b/code.js
@@ -1,4 +1,53 @@
 // Your Code Here!
+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 movieCompare = function(movie) {
+    for (let detail of movieDetails) {
+        if (movie.title === detail.title) {
+            return detail.imageUrl;
+        }
+    }
+}
+
+let movieListRender = movieCatalog.forEach(movie => {
+    for (let detail of movieDetails) {
+        if (movie.title === detail.title) {
+            movieListDiv.innerHTML += `
+            <div class="movieDiv">
+                <img src="${movieCompare(movie)}" width="150px">
+                <h2>${movie.title}</h2>
+                <p><strong>Starring</strong>: ${movie.cast}</p>
+                <h6>Released: ${movie.year}</p>
+            </div>`;
+        }
+    }
+})
+
+let titleSearchButton = document.getElementById("titleSearchButton");
+let titleSearchBar = document.getElementById("titleSearchBar");
+
+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 += `
+                <div class="movieDiv">
+                    <img src="${movieCompare(result)}" width="150px">
+                    <h2>${result.title}</h2>
+                    <p><strong>Starring</strong>: ${result.cast}</p>
+                    <h6>Released: ${result.year}</p>
+                </div>`;
+            }
+        }
+    });
+});
 
 console.log("Movies:", movies);
 console.log("MovieDetails:", movieDetails);
diff --git a/index.html b/index.html
@@ -21,7 +21,10 @@
 
   <body style="text-align: center;">
     <h1>Kenzie Movie Catalog</h1>
-    Write Your HTML Here!
+    <label for="titleSearchBar">Search by Title: </label>
+    <input id="titleSearchBar"><br>
+    <button id="titleSearchButton" type="submit">Search</button>
+    <div id="movieList"></div>
     <script src="movieDetails.js"></script>
     <script src="movies.js"></script>
     <script src="code.js"></script>

diff --git a/style.css b/style.css
@@ -1 +1,29 @@
 /* Write your CSS Here. */
+body {
+    margin: auto;
+    width: 100%;
+    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;
+}
+
+.movieDiv {
+    width: 200px;
+    margin: 10px;
+    padding: 20px;
+    border: 1px solid black;
+}