feat: add inputbox 'enter name movie'

bernardofernandezz · Jul 10, 2024 · d5c571b · d5c571b
1 parent 264746f
commit d5c571b
Show file tree

Hide file tree

Showing 6 changed files with 261 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.env
+.env.local
+.env.development.local
+.env.test.local
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Movie Guide</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="search-container">
+        <input
+          type="text"
+          id="movie-name"
+          placeholder="Digite o Filme.."
+          value=""
+        />
+        <button id="search-btn">Pesquisar</button>
+      </div>
+      <div id="result"></div>
+    </div>
+
+    <script src="key.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/key.js b/key.js
@@ -0,0 +1,3 @@
+// Enter you API Key here
+
+key = "51c2ef49";
diff --git a/main.js b/main.js
@@ -0,0 +1,72 @@
+let movieNameRef = document.getElementById("movie-name");
+let searchBtn = document.getElementById("search-btn");
+let result = document.getElementById("result");
+
+//function to fetch data from api
+
+let getMovie = () => {
+  let movieName = movieNameRef.value;
+  console.log("movieName", movieName);
+  let url = `http://www.omdbapi.com/?t=${movieName}&apikey=${key}`;
+  console.log("url", url);
+  //if input field is empty
+
+  if (movieName.length <= 0) {
+    result.innerHTML = `<h3 class="msg">Please enter a movie name </h3>`;
+  }
+
+  //if input isn't empty
+  else {
+    fetch(url)
+      .then((resp) => resp.json())
+      .then((data) => {
+        //if movie exist in database
+        if (data.Response == "True") {
+          result.innerHTML = `
+                    <div class="info">
+                        <img src=${data.Poster} class="poster">
+                        <div>
+                            <h2>${data.Title}</h2>
+                            <div class="rating">
+                                <img src="star-icon.svg">
+                                <h4>${data.imdbRating}</h4>
+                            </div>
+                            <div class="details">
+                                <span>${data.Rated}</span>
+                                <span>${data.Year}</span>
+                                <span>${data.Runtime}</span>
+                            </div>
+                            <div class="genre">
+                                <div>${data.Genre.split(",").join(
+                                  "</div><div>"
+                                )}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <h3>Plot:</h3>
+                    <p>${data.Plot}</p>
+                    <h3>Cast:</h3>
+                    <p>${data.Actors}</p>
+                `;
+        }
+
+        //if movie doesn't exist in database
+        else {
+          result.innerHTML = `<h3 class="msg">${data.Error}</h3>`;
+        }
+      })
+      //if error occurs
+      .catch(() => {
+        result.innerHTML = `<h3 class="msg">Error Occured</h3>`;
+      });
+  }
+};
+
+console.log("movieName", movieName.length);
+if (movieName.length > 0) {
+  getMovie();
+}
+
+movieNameRef.addEventListener("input", getMovie);
+searchBtn.addEventListener("click", getMovie);
+window.addEventListener("load", getMovie);
diff --git a/star-icon.svg b/star-icon.svg
diff --git a/style.css b/style.css
@@ -0,0 +1,149 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  height: 100vh;
+  background: linear-gradient(#1c1917 50%, #0e34a0 50%);
+}
+
+.container {
+  font-size: 16px;
+  width: 90vw;
+  max-width: 37.5em;
+  padding: 3em 1.8em;
+  background-color: #1e293b;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  border-radius: 0.6em;
+  box-shadow: 1.2em 2em 3em rgba(0, 0, 0, 0.2);
+}
+
+.search-container {
+  display: grid;
+  grid-template-columns: 9fr 3fr;
+  gap: 1.2em;
+}
+
+.search-container input,
+.search-container button {
+  font-size: 0.9em;
+  outline: none;
+  border-radius: 0.3em;
+}
+
+.search-container input {
+  background-color: transparent;
+  border: 1px solid #a0a0a0;
+  color: #fff;
+  padding: 0.7em;
+}
+.search-container input:focus {
+  border-color: #fff;
+}
+
+.search-container button {
+  background-color: #ffb92a;
+  border: none;
+  cursor: pointer;
+}
+
+#result {
+  color: #fff;
+}
+
+.info {
+  position: relative;
+  display: grid;
+  grid-template-columns: 4fr 8fr;
+  margin-top: 1.2em;
+}
+
+.poster {
+  width: 100%;
+}
+
+h2 {
+  text-align: center;
+  font-size: 1.5em;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+}
+
+.rating {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6em;
+  margin: 0.6em 0 0.9em 0;
+}
+
+.rating img {
+  width: 1.2em;
+}
+
+.rating h4 {
+  display: inline-block;
+  font-size: 1.1em;
+  font-weight: 500;
+}
+
+.details {
+  display: flex;
+  font-size: 0.95em;
+  gap: 1em;
+  justify-content: center;
+  color: #a0a0a0;
+  margin: 0.6em 0;
+  font-weight: 300;
+}
+
+.genre {
+  display: flex;
+  justify-content: space-around;
+}
+
+.genre div {
+  border: 1px solid #a0a0a0;
+  font-size: 0.75em;
+  padding: 0.4em 1.6em;
+  border-radius: 0.4em;
+  font-weight: 300;
+}
+
+h3 {
+  font-weight: 500;
+  margin-top: 1.2em;
+}
+
+p {
+  font-size: 0.9em;
+  font-weight: 300;
+  line-height: 1.8em;
+  text-align: justify;
+  color: #a0a0a0;
+}
+
+.msg {
+  text-align: center;
+}
+
+@media screen and (max-width: 600px) {
+  .container {
+    font-size: 14px;
+  }
+  .poster {
+    margin: auto;
+    width: auto;
+    max-height: 10.8em;
+  }
+
+  .info {
+    grid-template-columns: 1fr;
+  }
+}