api

index.html

@@ -36,6 +36,7 @@
         </div>
       </div>
 
+
       <div class="movies-section">
         <div class="movie-card">
           <div class="movie-image">
@@ -59,5 +60,8 @@ <h3 class="movie-heading">Breaking Bad</h3>
         </div>
       </div>
     </div>
+
+    <script src="script.js"></script>
+
   </body>
 </html>

script.js

@@ -1 +1,45 @@
 //code
+
+
+// let Newel =document.createElement("movie-card")
+//  Newel.appendChild(movie-card);
+
+document.querySelector('#search').addEventListener('click', () =>{
+
+  let Film = document.querySelector(".search-box").value
+  let Films = Film  ;
+ console.log(Film)
+  fetch( `https://api.tvmaze.com/search/shows?q=${Film}`)
+  .then((movie) =>{
+   return movie.json()
+  })
+  .then((data) => {
+    console.log(data)
+
+  for( let i = 0; i < data.length; i++){
+   let newmovie = document.createElement('div');
+   newmovie.classList.add('movie-card');
+
+
+   console.log(data[i].show.image.medium)
+   let imgcontainer = document.createElement('div');
+   imgcontainer.classList.add('movie-image')
+
+  console.log(data[i].show.name)
+
+   let pic = document.createElement('img');
+   pic.src = data[i].show.image.medium;
+   imgcontainer.appendChild(pic);
+   newmovie.appendChild(imgcontainer);
+
+  let Mtitle = document.createElement('h3');
+      Mtitle.classList.add('movie-heading')
+      Mtitle.innerText = data[i].show.name;
+      newmovie.appendChild(Mtitle)
+      document.querySelector('.movies-section').appendChild(newmovie);
+
+
+  }
+  })
+
+})

style.css

@@ -22,16 +22,29 @@
 .nav li {
   list-style: none;
   padding: 0px 6px;
+
+}
+.nav li:hover{
+  color: rgb(229, 255, 0);
+  font-size: 20px;
+
+
+
 }
 
 .logo {
   height: 30px;
 }
+.logo :hover{
+  background-color: antiquewhite;
+  size: 20px;
+}
 
 .avatar {
   height: 60px;
 }
 
+
 .search-section {
   display: flex;
   flex-direction: column;
@@ -49,11 +62,16 @@
 }
 
 #search{
-    background: red;
-    border:none;
+    background: rgb(255, 0, 0);
+
     padding:7px 12px;
     color:white;
     font-size:14px
+
+}
+#search:hover{
+  border-radius: 6em 4em;
+
 }
 
 .main {
@@ -65,6 +83,7 @@
 .movies-section {
   display: flex;
   margin: 15px 50px;
+  flex-wrap: wrap;
 }
 
 .movie-card {
@@ -83,3 +102,16 @@
   font-weight: bold;
   color: red;
 }
+.search-box{
+  box-shadow: #fff;
+  border-radius: 5px;
+}
+
+.search-box:hover{
+  border-radius: 8px;
+  border: 1.5px dotted rgb(0, 217, 255);
+  background-color: rgb(34, 34, 34);
+  color: rgb(255, 255, 255);
+  font-size: ;
+
+}