From a967e12ef446783f4ec13553cbd746a4d3bdab07 Mon Sep 17 00:00:00 2001
From: hamda <hamda.baashe44@gmail.com>
Date: Sun, 4 Dec 2022 19:40:32 +0000
Subject: [PATCH] Done the tv-api

---
 index.html | 18 ++++++------------
 script.js  | 41 +++++++++++++++++++++++++++++++++++++++++
 style.css  | 20 +++++++++++++++++---
 3 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 4ab20ee..867048d 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,7 @@
             <button id="search">Search</button>
         </div>
       </div>
-      
+      <div class="container">
       <div class="movies-section">
         <div class="movie-card">
           <div class="movie-image">
@@ -47,17 +47,11 @@
 
           <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>
-    </div>
+    
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
index 12d5a38..ea83bf4 100644
--- a/script.js
+++ b/script.js
@@ -1 +1,42 @@
 //code
+
+document.getElementById("search").addEventListener('click',()=>{
+      
+   let movie = document.querySelector(".search-box").value
+
+fetch(`https://api.tvmaze.com/search/shows?q=${movie}`)
+.then((res)=>{
+    return res.json()
+})
+.then((data)=>{
+    
+
+   for(let i = 0; i < data.length; i++){
+    
+  let Div1 = document.createElement("div")
+  Div1.classList.add("movies-section")
+  let main = document.querySelector(".main")
+  main.appendChild(Div1)
+  let container = document.querySelector(".container")
+  container.appendChild(Div1)
+  let Div2 = document.createElement("div")
+  Div2.classList.add("movie-card")
+ Div1.appendChild(Div2)
+ let Div3 = document.createElement("div")
+  Div3.classList.add("movie-image")
+ Div2.appendChild(Div3)
+ let img = document.createElement("img")
+ Div3.appendChild(img)
+ img.src = data[i].show.image.medium
+
+  
+ let h3 = document.createElement("H3")
+  h3.classList.add("movie-heading")
+  h3.innerHTML = data[i].show.name;
+ Div2.appendChild(h3)
+ 
+   }
+
+})
+})
+
diff --git a/style.css b/style.css
index 7859aa5..bb5de8d 100644
--- a/style.css
+++ b/style.css
@@ -60,19 +60,30 @@
   background: black;
   color: white;
   min-height: 100vh;
+  
+}
+.container{
+display: flex;
+flex-wrap: wrap;
+margin: 0px 50px;
+justify-content: center;
+  
 }
 
 .movies-section {
-  display: flex;
-  margin: 15px 50px;
+  display: grid;
+ 
+  margin: 15px -3px;
+  
 }
 
 .movie-card {
-  margin: 0px 10px;
+  margin: 0px 2px;
 }
 
 .movie-image {
   height: 250px;
+  width: 200px;
 }
 
 .movie-image img {
@@ -83,3 +94,6 @@
   font-weight: bold;
   color: red;
 }
+button{
+  cursor: pointer;
+}