finished tv-api project

index.html

@@ -27,15 +27,14 @@
     </header>
     <!-- navigation -->
     <div class="main">
-
-       <div class="search-section">
+      <div class="search-section">
         Search for your favorite shows
         <div>
-            <input class="search-box" type="text" placeholder="Search" />
-            <button id="search">Search</button>
+          <input 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">
@@ -50,6 +49,7 @@ <h3 class="movie-heading">Breaking Bad</h3>
         <div class="movie-card">
           <div class="movie-image">
             <img
+              class="img"
               src="https://i.pinimg.com/originals/a2/34/75/a234753b69e3bd27b7f1d448956c38af.jpg"
               alt="movie"
             />
@@ -59,5 +59,7 @@ <h3 class="movie-heading">Breaking Bad</h3>
         </div>
       </div>
     </div>
+
+    <script src="./script.js"></script>
   </body>
 </html>

script.js

@@ -1 +1,40 @@
-//code
+
+
+// https://api.tvmaze.com/search/shows?q=girls
+
+document.querySelector('#search').addEventListener('click',() => {
+  let Film = document.querySelector('.search-box').value;
+   let newFilm = Film
+  fetch(`https://api.tvmaze.com/search/shows?q=${newFilm}`)
+  .then((movie) =>{
+  return movie.json();
+  })
+  .then((data) =>{
+   console.log(data)
+
+    for(let i=0; i< data.length; i++){
+      let movieCard = document.createElement('div');
+      movieCard.classList.add('movie-card');
+      document.querySelector('.movies-section').appendChild(movieCard);
+
+      let movieContainer= document.createElement('div');
+      movieContainer.classList.add('movie-image');
+      movieCard.appendChild(movieContainer);
+
+      let movieImg = document.createElement('img');
+      movieImg.src = data[i].show.image.medium;
+      movieContainer.appendChild(movieImg);
+
+      let title = document.createElement('h3');
+      title.classList.add('movie-heading')
+      title.innerHTML = data[i].show.name
+      movieCard.appendChild(title);
+    }
+  })  
+  })
+
+
+
+
+  // console.log(data[0].show.image.medium);
+    // data[i].show.name;

style.css

@@ -49,6 +49,7 @@
 }
 
 #search{
+  cursor: pointer;
     background: red;
     border:none;
     padding:7px 12px;
@@ -64,11 +65,15 @@
 
 .movies-section {
   display: flex;
-  margin: 15px 50px;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 5px;
+  /* margin: 15px 30px; */
 }
 
 .movie-card {
-  margin: 0px 10px;
+  margin: 0px 4px;
+  border: 4px solid red;
 }
 
 .movie-image {
@@ -81,5 +86,7 @@
 
 .movie-heading {
   font-weight: bold;
-  color: red;
+  color: rgb(90, 5, 5);
 }
+
+