Add files via upload

tucecifci · Aug 8, 2024 · bc1187d · bc1187d
1 parent a841c0c
commit bc1187d
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,56 @@
+const searchInput = document.querySelector("#searchInput");
+const searchButton = document.querySelector("#searchButton");
+const moviesContainer = document.querySelector("#movies");
+let sortAscending = true;
+
+searchButton.addEventListener("click", function () {
+  const query = searchInput.value;
+  searchMovies(query);
+});
+function searchMovies(query) {
+  const apiKey = "befb4c19dd0617e7560221c0a7d21d93";
+  const url = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${query}
+  `;
+  fetch(url)
+    .then((res) => res.json())
+    .then((data) => {
+      const movies = data.results;
+      // console.log(movies);
+      displayMovies(movies);
+    })
+    .catch((err) => console.log(err));
+}
+
+function displayMovies(movies) {
+  moviesContainer.innerHTML = "";
+  searchInput.value = "";
+  //bunu yapmamızın sebebi html içeriğini temizlemek için kullanıyoruz, ikinci bi arama yapıldığında tamamen sıfırdan yapması için yani çıkan sonuçlar üst üste binmesin diye.
+  movies.forEach((movie) => {
+    // const poster = movie.poster_path;
+    // console.log(poster);
+    const movieItems = document.createElement("div"); // bunu gelecek olan film bilgisini göstermesi için oluşturuyoruz.
+    movieItems.classList.add("movie"); // burada da ona bi classlist atıyoruz ki gelen film özelliklerini css ile düzenliyoruz
+
+    const moviePoster = movie.poster_path
+      ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
+      : "no_image_available.png"; //resim yoksa sayfanın daha düzenli gözükmesini sağlıyor- if'li uzun kullanım yerine ternary olarak yapıldı
+    // console.log(moviePoster); burada img linkleri geldi
+
+    // const movieText = movie.title;
+    const movieText = `
+    <img src="${moviePoster}" alt="${movie.title}">
+    <h3>${movie.title}</h3>
+    <p>${movie.release_date}</p>
+    `;
+
+    movieItems.innerHTML = movieText;
+    //Bu satır, movieItems adında oluşturulmuş olan HTML div elemanının içeriğini ayarlar. movieText değişkeni, filmle ilgili dinamik olarak oluşturulan HTML içeriğini içerir.Bu kod, movieItems elemanına movieText değişkenindeki HTML içeriğini ekler, böylece filmle ilgili görseller ve bilgiler bu div içinde görünür.
+    moviesContainer.appendChild(movieItems);
+    // Bu işlem, movieItems elemanının DOM'da görünmesini sağlar. Bu kod, moviesContainer elemanına movieItems elemanını ekler. Böylece, movieItems içinde oluşturulan HTML içeriği moviesContainer içinde görünür ve sayfada doğru şekilde yer alır.
+  });
+}
+searchInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    searchMovies(searchInput.value);
+  }
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Movie Search App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Movie Search App</h1>
+        <input type="text" id="searchInput" placeholder="Search for a movie...">
+        <button id="searchButton">Search</button>
+        <!-- <button id="sort-button">Sort by Release Date</button> -->
+        <div id="movies"></div>
+    </div>
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,61 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    text-align: center;
+}
+
+#searchInput {
+    padding: 10px;
+    width: 300px;
+}
+
+#searchButton {
+    padding: 10px 20px;
+    margin-left: 10px;
+}
+
+#movies {
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    /* çıkan sonuç çok olduğunda resimler input'u kapatıyordu, bu sebeple aşağıdaki kodlar yazıldı */
+    overflow-y: auto;
+    max-height: 700px;
+    max-width: 100%;
+}
+
+/* after js */
+.movie {
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    margin: 10px;
+    padding: 10px;
+    width: 200px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.movie img {
+    width: 100%;
+    border-radius: 5px;
+}
+
+.movie h3 {
+    font-size: 18px;
+    margin: 10px 0 0 0;
+}
+
+.movie p {
+    font-size: 14px;
+    color: #555;
+}