From 31ecc9256387136d0fcff7faad1d3c9160382897 Mon Sep 17 00:00:00 2001
From: "Abdirahman Mohamed (Buushe)" <79105703+Buushe@users.noreply.github.com>
Date: Tue, 6 Dec 2022 03:47:09 +0600
Subject: [PATCH] tv-appi-project-by-Buushe

---
 index.html | 18 +++++-------------
 script.js  | 48 +++++++++++++++++++++++++++++++++++++++++++++++-
 style.css  |  1 +
 3 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 4ab20ee..03dc90e 100644
--- a/index.html
+++ b/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>
diff --git a/script.js b/script.js
index 12d5a38..a9755c7 100644
--- a/script.js
+++ b/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!")
+    })
+    
+})
\ No newline at end of file
diff --git a/style.css b/style.css
index 7859aa5..9100757 100644
--- a/style.css
+++ b/style.css
@@ -64,6 +64,7 @@
 
 .movies-section {
   display: flex;
+  flex-wrap: wrap;
   margin: 15px 50px;
 }