scalereal · mr-meetpatel · Jul 8, 2022 · Jul 8, 2022 · Jul 8, 2022 · Jul 8, 2022
diff --git a/MovieNotFound.png b/MovieNotFound.png
diff --git a/index.html b/index.html
@@ -2,12 +2,45 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta http-equiv="X-UA-Compatible" content="" t="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Rubik:wght@600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>Book Ticket</title>
   </head>
+
   <body>
-    <div id="app"></div>
-    <script type="module" src="/main.js"></script>
+    <header class="header">
+      <h1 class="heading">Book Tickets</h1>
+      <form class="form" method="post">
+        <input
+          type="text"
+          class="search-bar"
+          placeholder="search"
+          onfocus="this.placeholder=''"
+          onblur="this.placeholder='search'"
+        />
+      </form>
+    </header>
+    <div id="app">
+      <div class="movie-card"></div>
+    </div>
+    <div class="no-movie-found">
+      <div class="no-result">
+        <h2 class="section-item">
+          Sorry, there is no result for keyword you searched.
+        </h2>
+        <img
+          class="section-img"
+          src="MovieNotFound.png"
+          alt="result not found"
+        />
+      </div>
+    </div>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
+    <script type="module" src="./main.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,6 +1,83 @@
-import './style.css'
+import axios from "axios";
+const key = "f9d119ddc9f2ae7c8b2c34f1d5910a87";
+const api = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${key}`;
+const imgUrl = "https://image.tmdb.org/t/p/w500";
+const searchUrl = `https://api.themoviedb.org/3/search/movie?api_key=${key}`;
+const app = document.querySelector("#app");
+const movieData = document.querySelector(".movie-card");
+const movieSearch = document.querySelector(".search-bar");
+const errorDiv = document.querySelector(".no-movie-found");
+let query = "";
 
-document.querySelector('#app').innerHTML = `
-  <h1>Hello Vite!</h1>
-  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
-`
+async function getMovieFromApi(query) {
+  const url = query === "" ? api : searchUrl + "&query=" + query;
+  const response = await axios.get(url);
+  const movieData = response.data.results.slice(0, 15);
+  if (movieData.length) {
+    app.style.display = "block";
+    showMovieData(movieData);
+    errorDiv.style.display = "none";
+  } else {
+    app.style.display = "none";
+    errorDiv.style.display = "block";
+  }
+}
+
+getMovieFromApi(query);
+
+movieSearch.addEventListener("keyup", (event) => {
+  event.preventDefault();
+  query = event.target.value;
+  getMovieFromApi(query);
+});
+
+const showMovieData = (data) => {
+  let count = 0;
+  data.forEach((movie) => {
+    const { poster_path, title } = movie;
+    const div = document.createElement("div");
+    div.classList.add("card");
+
+    if (poster_path != null) {
+      let imgData = document.createElement(`img`);
+      imgData.src = imgUrl + poster_path;
+      imgData.alt = title;
+
+      let h3Data = document.createElement(`h3`);
+      h3Data.classList.add("card-item");
+
+      if (title.length > 16) {
+        h3Data.innerText = title.substring(0, 17) + "...";
+      } else {
+        h3Data.innerText = title;
+      }
+      let buttonData = document.createElement(`button`);
+      buttonData.classList.add("btn");
+      buttonData.innerText = "Read More";
+      div.appendChild(imgData);
+      div.appendChild(h3Data);
+      div.appendChild(buttonData);
+    } else {
+      let imgData = document.createElement(`img`);
+      imgData.src = "http://via.placeholder.com/1080x1580";
+      imgData.alt = title;
+
+      let h3Data = document.createElement(`h3`);
+      h3Data.classList.add("card-item");
+      if (title.length > 16) {
+        h3Data.innerText = title.substring(0, 17) + "...";
+      } else {
+        h3Data.innerText = title;
+      }
+      let buttonData = document.createElement(`button`);
+      buttonData.classList.add("btn");
+      buttonData.innerText = "Read More";
+
+      div.appendChild(imgData);
+      div.appendChild(h3Data);
+      div.appendChild(buttonData);
+    }
+
+    movieData.appendChild(div);
+  });
+};
diff --git a/package.json b/package.json
@@ -8,6 +8,10 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "jest": "^28.1.2",
     "vite": "^2.9.9"
+  },
+  "dependencies": {
+    "axios": "^0.27.2"
   }
-}
+}
diff --git a/search.png b/search.png
diff --git a/style.css b/style.css
@@ -1,8 +1,184 @@
+:root {
+  --light-grey: #626262;
+  --white: #ffffff;
+}
+* {
+  margin: 0;
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.heading {
+  font-family: "Roboto Mono";
+  font-size: 48px;
+  font-weight: 400;
+  margin: 12px 0 15px 0;
+}
+
+input[type="text"] {
+  font-family: "Rubik";
+  padding-left: 20px;
+  font-weight: 400;
+  font-size: 16px;
+}
+
+.search-bar {
+  height: 43px;
+  width: 300px;
+  border: 1px solid var(--light-grey);
+  background: url("search.png");
+  background-repeat: no-repeat;
+  background-position: right;
+  background-position: calc(100% - 10px) center;
+}
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  margin: 66px auto 149px auto;
+  max-width: 1200px;
+}
+
+.movie-card {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: 48px 75px;
+}
+
+.card img {
+  height: 374px;
+  width: 350px;
+  border-radius: 20px;
+  opacity: 1;
+  box-shadow: 0px 10px 20px 5px rgb(0 0 0 / 25%);
+}
+
+.card:hover::after{
+  opacity: 60%;
+  background-color: #626262;
+}
+
+.card::after{
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  transition: 250ms ease-out;
+  border-radius: 20px;
+}
+
+.card {
+  position: relative;
+}
+
+.card:hover button {
+  display: block;
+  opacity: 1;
+  z-index: 3;
+}
+
+.card:hover h3 {
+  display: block;
+  opacity: 1;
+  z-index: 3;
+}
+.card-item {
+  position: absolute;
+  left: 31.43%;
+  top: 42.51%;
+  color: var(--white);
+  font-family: "Rubik";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  text-align: center;
+  width: 122px;
+  height: 56px;
+  display: none;
+}
+
+.btn {
+  position: absolute;
+  left: 29.43%;
+  top: 76.74%;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  background: #352c9a;
+  border: none;
+  display: none;
+  color: var(--white);
+  height: 37px;
+  width: 125px;
+  font-family: "Rubik";
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.btn:hover {
+  background-color: #724fd8;
+}
+
+.btn:active {
+  background-color: #724fdf;
+  text-decoration: underline;
+}
+
+.btn:disabled {
+  background-color: var(--light-grey);
+}
+
+.no-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.no-result img {
+  max-width: 500px;
+  width: 100%;
+}
+
+.section-item {
+  margin-top: 96px;
+  margin-bottom: 48px;
+  font-family: "Rubik";
+  font-size: 32px;
+}
+
+@media (max-width: 767px) {
+  .section-img {
+    width: 400px;
+    height: 360px;
+
+    margin: 24px auto 81px auto;
+  }
+  .section-item {
+    font-size: 30px;
+    text-align: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .heading {
+    font-size: 36px;
+  }
+  .card img {
+    width: 300px;
+    height: 320px;
+    margin: 24px 30px 24px 30px;
+  }
+
+  .btn {
+    width: 125px;
+    height: 37px;
+  }
+  .section-item {
+    font-size: 20px;
+    text-align: center;
+  }
 }