diff --git a/index.html b/index.html
index 4ab20ee..b5110ce 100644
--- a/index.html
+++ b/index.html
@@ -31,33 +31,15 @@
        <div class="search-section">
         Search for your favorite shows
         <div>
-            <input class="search-box" type="text" placeholder="Search" />
+            <input id="input_search" class="search-box" type="text" placeholder="Search" />
             <button id="search">Search</button>
         </div>
       </div>
       
       <div class="movies-section">
-        <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 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>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
index 12d5a38..d764d0b 100644
--- a/script.js
+++ b/script.js
@@ -1 +1,47 @@
-//code
+  //code
+
+let search = document.querySelector("#search");
+
+search.addEventListener("click",()=>{
+
+    let input =document.querySelector("#input_search").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++){
+    
+    let movies_section = document.querySelector(".movies-section");
+    let new_movie_card = document.createElement("div");
+    let new_movie_image = document.createElement("div");
+    let new_h3 = document.createElement("h3");
+    let new_image = document.createElement("img");
+     
+    new_movie_card.classList.add("movie-card")
+    new_movie_image.classList.add("movie-image")
+    new_h3.classList.add("movie-heading")
+
+    // append the child with their parent elemnets
+    movies_section.appendChild(new_movie_card)
+    new_movie_card.appendChild(new_movie_image);
+    new_movie_card.appendChild(new_h3)
+    new_movie_image.appendChild(new_image)
+
+    // creating the  src attribue
+     new_image.setAttribute("src" , data[i].show.image.medium)
+    
+     new_h3.innerHTML=data[i].show.name
+    
+    }
+
+    })
+    .catch(()=>{
+        console.log("Error!")
+    })
+    
+})
diff --git a/style.css b/style.css
index 7859aa5..5a6e37b 100644
--- a/style.css
+++ b/style.css
@@ -65,6 +65,7 @@
 .movies-section {
   display: flex;
   margin: 15px 50px;
+  flex-wrap: wrap;
 }
 
 .movie-card {