fix movie app

solygambas · solygambas · commit 2dcda27efbd4 · 2021-01-15T10:15:01.000+01:00
diff --git a/17-movie app/index.html b/17-movie app/index.html
@@ -8,11 +8,17 @@
   </head>
   <body>
     <header>
+      <h1>Should I watch it?</h1>
       <form id="form">
         <input type="text" placeholder="Search" id="search" class="search" />
       </form>
     </header>
     <main id="main"></main>
+    <footer class="footer">
+      <p>
+        This project uses the TMDb API but is not endorsed or certified by TMDb.
+      </p>
+    </footer>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/17-movie app/script.js b/17-movie app/script.js
@@ -1,16 +1,16 @@
-const API_URL =
-  "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1";
-// For education purpose only - Do not use this key in production
+const KEY = "3fd2be6f0c70a2a598f084ddfb75487c";
+// For educational purposes only - DO NOT USE in production
+// Request your own key for free: https://developers.themoviedb.org/3
+const API_URL = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${KEY}&page=1`;
 const IMG_PATH = "https://image.tmdb.org/t/p/w1280";
-const SEARCH_API =
-  'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="';
+const SEARCH_API = `https://api.themoviedb.org/3/search/movie?api_key=${KEY}&query=`;
 
 const main = document.getElementById("main");
 const form = document.getElementById("form");
 const search = document.getElementById("search");
 
 const getClassByRate = (vote) => {
-  if (vote >= 8) return "green";
+  if (vote >= 7.5) return "green";
   else if (vote >= 7) return "orange";
   else return "red";
 };
diff --git a/17-movie app/style.css b/17-movie app/style.css
@@ -18,10 +18,18 @@ body {
 header {
   padding: 1rem;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
   background-color: var(--secondary-color);
 }
 
+header h1 {
+  color: #eee;
+  padding: 0;
+  margin: 0;
+  font-size: 1.5rem;
+}
+
 .search {
   background-color: transparent;
   border: 2px solid var(--primary-color);
@@ -109,3 +117,8 @@ main {
 .movie:hover .overview {
   transform: translateY(0);
 }
+
+.footer p {
+  color: #eee;
+  text-align: center;
+}
