tv-appi-project-by-Buushe

index.html

@@ -31,13 +31,14 @@
        <div class="search-section">
         Search for your favorite shows
         <div>
-            <input class="search-box" type="text" placeholder="Search" />
+            <input class="search-box" id="searchinput" type="text" placeholder="Search" />
             <button id="search">Search</button>
         </div>
       </div>
 
       <div class="movies-section">
-        <div class="movie-card">
+
+        <!-- <div class="movie-card">
           <div class="movie-image">
             <img
               src="https://i.pinimg.com/originals/a2/34/75/a234753b69e3bd27b7f1d448956c38af.jpg"
@@ -46,18 +47,9 @@
           </div>
 
           <h3 class="movie-heading">Breaking Bad</h3>
-        </div>
-        <div class="movie-card">
-          <div class="movie-image">
-            <img
-              src="https://i.pinimg.com/originals/a2/34/75/a234753b69e3bd27b7f1d448956c38af.jpg"
-              alt="movie"
-            />
-          </div>
-
-          <h3 class="movie-heading">Breaking Bad</h3>
-        </div>
+        </div> -->
       </div>
     </div>
+    <script src="script.js"></script>
   </body>
 </html>

script.js

@@ -1 +1,47 @@
-//code
+let search = document.querySelector("#search");
+
+search.addEventListener("click",()=>{
+
+    let input =document.querySelector("#searchinput").value;
+
+    fetch(`https://api.tvmaze.com/search/shows?q=${input}`)
+    .then((res)=>{
+        return res.json();
+    })
+    .then((data)=>{
+
+        //starting the for loop 
+
+        for(let i = 0; i< data.length;i++){
+            // console.log(data[i].show.name)
+
+       let moviesection  =   document.querySelector(".movies-section")
+
+
+       let movieCard = document.createElement("div")
+        movieCard.classList.add(".movie-card")
+
+      let  movieimage = document.createElement("div")
+        movieimage.classList.add(".movie-image")
+
+    let    newimage = document.createElement("img")
+     let   h3 = document.createElement("h3")
+        h3.classList.add(".movie-heading")
+
+            moviesection.appendChild(movieCard)
+            movieCard.appendChild(movieimage)
+            movieCard.appendChild(h3)
+            movieimage.appendChild(newimage)
+            newimage.setAttribute("src" , data[i].show.image.medium)
+        //    image.src = data[i].show.image.medium
+
+           h3.innerHTML = data[i].show.name
+
+    }
+
+    })
+    .catch(()=>{
+        console.log("Error!")
+    })
+
+})

style.css

@@ -64,6 +64,7 @@
 
 .movies-section {
   display: flex;
+  flex-wrap: wrap;
   margin: 15px 50px;
 }