feat: day 17

solygambas · solygambas · commit 3077c40d33c2 · 2025-06-24T11:32:47.000+02:00
diff --git a/017-movie app/index.html b/017-movie app/index.html
@@ -4,13 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Movie App</title>
+    <title>My Movie Finder</title>
   </head>
   <body>
     <header>
-      <h1>Should I watch it?</h1>
+      <h1>My Movie Finder</h1>
       <form id="form">
-        <input type="text" placeholder="Search" id="search" class="search" />
+        <input
+          type="text"
+          placeholder="Search for a movie..."
+          id="search"
+          class="search"
+        />
       </form>
     </header>
     <main id="main"></main>
diff --git a/017-movie app/script.js b/017-movie app/script.js
@@ -10,25 +10,37 @@ const form = document.getElementById("form");
 const search = document.getElementById("search");
 
 const getClassByRate = (vote) => {
-  if (vote >= 7.5) return "green";
-  else if (vote >= 7) return "orange";
+  // Adjust Rating Color Thresholds
+  if (vote > 8) return "green";
+  else if (vote >= 6) return "orange";
   else return "red";
 };
 
 const showMovies = (movies) => {
   main.innerHTML = "";
+  // Handle No Search Results
+  if (movies.length === 0) {
+    main.innerHTML =
+      '<h1 class="no-results">No movies found. Please try another search.</h1>';
+    return;
+  }
   movies.forEach((movie) => {
-    const { title, poster_path, vote_average, overview } = movie;
+    // Display the Movie's Release Date
+    const { title, poster_path, vote_average, overview, release_date } = movie;
+    const year = new Date(release_date).getFullYear();
     const movieElement = document.createElement("div");
     movieElement.classList.add("movie");
+    // Handle Missing Movie Posters
+    // Format Movie Ratings
     movieElement.innerHTML = `
-    <img
-      src="${IMG_PATH + poster_path}"
-      alt="${title}"
-    />
+    <img src="${
+      IMG_PATH + poster_path
+    }" alt="${title}" onerror="this.src='https://placehold.co/1280x1920/058ED9/FFF?text=${title}&font=poppins'" />
     <div class="movie-info">
-      <h3>${title}</h3>
-      <span class="${getClassByRate(vote_average)}">${vote_average}</span>
+      <h3>${title} <span class="release-date">(${year})</span></h3>
+      <span class="${getClassByRate(vote_average)}">${vote_average.toFixed(
+      1
+    )}</span>
     </div>
     <div class="overview">
       <h3>Overview</h3>
diff --git a/017-movie app/style.css b/017-movie app/style.css
@@ -55,6 +55,13 @@ main {
   justify-content: center;
 }
 
+.no-results {
+  color: #eee;
+  text-align: center;
+  margin: 2rem;
+  font-size: 1.2rem;
+}
+
 .movie {
   width: 300px;
   margin: 1rem;
@@ -89,6 +96,14 @@ main {
   font-weight: bold;
 }
 
+/* Display the Movie's Release Date */
+.movie-info span.release-date {
+  background-color: inherit;
+  padding: 0;
+  font-size: 0.9rem;
+  font-weight: lighter;
+}
+
 .movie-info span.green {
   color: lightgreen;
 }
