thinkswell · AdyaTech · Jan 29, 2026
diff --git a/Movie app/AdyaTech/images/nobody.jpg b/Movie app/AdyaTech/images/nobody.jpg
diff --git a/Movie app/AdyaTech/index.html b/Movie app/AdyaTech/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script
+      src="https://kit.fontawesome.com/1935d064dd.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <section class="main">
+      <header>
+        <h1>The Movie App</h1>
+        <form action="" id="form">
+          <input type="text" class="search" placeholder="Search..." />
+        </form>
+      </header>
+      <div class="container movies-container">
+        <p>List Movies</p>
+        <div class="movies">
+          <!-- <div class="movie">
+            <img src="./images/nobody.jpg" alt="" />
+
+            <div class="details">
+              <h2 class="title">Nobody</h2>
+              <p class="rate">Rating: <span class="rating">8.5</span></p>
+              <p class="overview">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. A nemo
+                quis dicta facilis ea sapiente sint molestiae et autem nobis
+                maxime sed neque placeat, consectetur iste mollitia? Neque,
+                nihil repellendus? Lorem ipsum dolor sit amet consectetur
+                adipisicing elit. A nemo quis dicta facilis ea sapiente sint
+                molestiae et autem nobis maxime sed neque placeat, consectetur
+                iste mollitia? Neque, nihil repellendus?
+              </p>
+            </div>
+          </div> -->
+        </div>
+      </div>
+    </section>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Movie app/AdyaTech/script.js b/Movie app/AdyaTech/script.js
@@ -0,0 +1,57 @@
+const apiURL =
+  "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";
+
+const searchAPI =
+  "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";
+
+const imgPATH = "https://image.tmdb.org/t/p/w1280";
+
+let moviesDiv = document.querySelector(".movies");
+let form = document.querySelector("form");
+let input = document.querySelector(".search");
+
+getMovies(apiURL);
+
+async function getMovies(url) {
+  const res = await fetch(url);
+  const data = await res.json();
+
+  console.log(data.results);
+  displayMovies(data.results);
+}
+
+// Display Movies
+function displayMovies(movies) {
+  moviesDiv.innerHTML = "";
+
+  movies.forEach((movie) => {
+    const div = document.createElement("div");
+    div.classList.add("movie");
+    div.innerHTML = `
+        <img src="${imgPATH + movie.poster_path}" alt="" />
+
+        <div class="details">
+          <h2 class="title">${movie.title}</h2>
+          <p class="rate">Rating: <span class="rating">${
+            movie.vote_average
+          }</span></p>
+          <p class="overview">
+            ${movie.overview}
+          </p>
+        </div>
+        `;
+    moviesDiv.appendChild(div);
+  });
+}
+
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+  moviesDiv.innerHTML = "";
+
+  const inputVal = input.value;
+
+  if (inputVal) {
+    getMovies(searchAPI + inputVal);
+    input.value = "";
+  }
+});
diff --git a/Movie app/AdyaTech/styles.css b/Movie app/AdyaTech/styles.css
@@ -0,0 +1,170 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+
+:root {
+  --white: #fff;
+  --black: #1c2b2d;
+  --blue: #31326f;
+  --light-blue: #005490;
+  --color-primary: #9d0191;
+  --color-sec: #db6400;
+  --color-grey: #eee;
+  --color-dark-grey: #222831;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 10px;
+}
+
+body {
+  font-family: "Open Sans", sans-serif;
+}
+
+p {
+  font-size: 1.6rem;
+  line-height: 1.5;
+}
+
+img {
+  width: 30%;
+}
+
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* Start Here */
+body {
+  background: var(--color-dark-grey);
+}
+
+.main {
+  width: 100%;
+  display: flex;
+}
+
+header {
+  display: fixed;
+  top: 0;
+  left: 0;
+  background: #14120a;
+  padding: 2rem;
+  color: var(--white);
+  text-align: center;
+  min-height: 100%;
+  padding-bottom: 100%;
+}
+
+header h1 {
+  font-size: 2.5rem;
+}
+
+header input {
+  border: none;
+  outline: none;
+  background: transparent;
+  border-bottom: 1px solid var(--white);
+  margin: 2rem 0;
+  color: var(--white);
+  font-size: 1.6rem;
+  padding: 3px;
+}
+
+.movies-container {
+  padding: 2rem;
+}
+
+.movies-container > p {
+  font-size: 2rem;
+  color: var(--white);
+  margin-bottom: 2rem;
+}
+
+.movies {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.movie {
+  display: flex;
+  background: var(--color-grey);
+  padding: 1rem;
+  width: 40rem;
+  border-radius: 3px;
+  margin: 0 2rem 2rem 0;
+}
+
+.movie img {
+  width: 35%;
+}
+
+.details {
+  padding: 0 1rem;
+}
+
+.details h2 {
+  font-size: 2rem;
+  font-weight: 400;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid #ccc;
+}
+
+.details p.rate {
+  font-weight: 600;
+}
+
+.rating {
+  background: var(--color-sec);
+  padding: 0 3px;
+  border-radius: 3px;
+  color: var(--white);
+}
+
+.overview {
+  font-size: 1.2rem;
+  width: 100%;
+  height: 135px;
+  overflow-y: auto;
+}
+
+.overview::-webkit-scrollbar {
+  height: 5px;
+  width: 4px;
+  border: 1px solid #d5d5d5;
+  background: #d5d5d5;
+}
+
+.overview::-webkit-scrollbar-track {
+  --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+.overview::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary);
+  outline: 1px solid #eee;
+}
+
+@media screen and (max-width: 600px) {
+  .main {
+    flex-direction: column;
+  }
+
+  header {
+    padding: 2rem;
+  }
+
+  .movie {
+    padding: 5px;
+    width: 32rem;
+    margin: 5px 0;
+  }
+}