creation of search and make the website responsive

MIT.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ushindi Gedeon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/index.css

@@ -6,7 +6,11 @@ body {
 }
 
 header {
-  width: auto;
+  position: fixed;
+  background-color: #fff;
+  width: 100%;
+  padding-top: 10%;
+  margin-top: -10%;
   box-shadow:
     rgba(50, 50, 93, 0.25) 0 30px 60px -12px,
     rgba(0, 0, 0, 0.3) 0 18px 36px -18px;
@@ -22,34 +26,79 @@ header {
 }
 
 .img-brand {
-  width: 100px;
-  height: 80px;
+  width: 2rem;
+  height: 2rem;
   border: 2px solid cadetblue;
   border-radius: 50% 50%;
   margin: 5px 5px;
   padding: 5px 5px;
 }
 
+a {
+  text-decoration: none;
+  color: teal;
+}
+
+.humburger {
+  display: none;
+}
+
 .nav-items {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 10px;
   margin: 0 auto;
   list-style: none;
+  margin-right: 0%;
 }
 
-a {
-  text-decoration: none;
-  color: teal;
+.trending {
+  background-color: rgb(172, 167, 167);
+  border: solid 1px transparent;
+  color: #333;
+  font-weight: 600;
+  border-radius: 0.5rem;
+}
+
+.trending a {
+  color: #fff;
 }
 
 .nav-item {
   margin-right: 10px;
+  padding: 10px;
+}
+
+.nav-item a:hover {
+  color: red;
+}
+
+.trending a:hover {
+  color: #fff;
+}
+
+.trending:hover {
+  border: solid 1px red;
+  background-color: lightcoral;
 }
 
 h1 {
   color: blue;
+  padding-top: 7%;
+  margin-bottom: 0;
+  font-size: 1rem;
+}
+
+.search-engine {
+  height: 2rem;
+  width: 20%;
+}
+
+.search-btn {
+  height: 2.3rem;
+  border: none;
+  margin-right: 5%;
 }
 
 #count {
@@ -61,6 +110,7 @@ h1 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   animation: mymove 3s infinite;
+  padding-bottom: 5%;
 }
 
 article {
@@ -69,6 +119,7 @@ article {
   flex-direction: column;
   align-items: center;
   margin: 0.3rem;
+  border-radius: 1rem;
 }
 
 @keyframes mymove {
@@ -78,7 +129,9 @@ article {
 
 article img {
   width: 70%;
+  border-radius: 0.5rem;
   height: 65%;
+  margin-top: 3%;
 }
 
 .likes img {
@@ -87,7 +140,7 @@ article img {
 }
 
 article img:hover {
-  transform: rotate(3deg);
+  transform: rotate(1deg);
   transition: all ease-out 1s;
 }
 
@@ -100,13 +153,15 @@ article p {
 }
 
 article button {
-  background-color: brown;
+  background-color: rgba(79, 79, 221, 0.568);
   height: 3rem;
   color: #fff;
+  border-radius: 0.4rem;
+  border: solid transparent;
 }
 
 article button:hover {
-  background-color: rgb(182, 96, 96);
+  background-color: rgba(79, 79, 221, 0.219);
   color: #fff;
 }
 
@@ -277,6 +332,15 @@ span {
   cursor: pointer;
 }
 
+footer {
+  height: 10vh;
+  color: white;
+  background-color: #333;
+  font-size: 0.8rem;
+  font-family: 'Times New Roman', Times, serif;
+  padding-top: 3%;
+}
+
 /* ===============(MEDUIM SCREENS)==================== */
 
 @media screen and (max-width: 1000px) {
@@ -295,4 +359,33 @@ span {
     grid-template-columns: 1fr;
     animation: mymove 3s infinite;
   }
+
+  .header {
+    /* margin-top: -3%; */
+    position: initial;
+    width: 100%;
+    margin-bottom: -7%;
+  }
+
+  .nav-items {
+    display: none;
+  }
+
+  .search-engine {
+    width: 46%;
+    margin-left: 10%;
+  }
+
+  .img-brand {
+    margin-top: 8%;
+    width: 10%;
+    height: 10%;
+    display: none;
+  }
+
+  .humburger {
+    display: flex;
+    width: 80%;
+    height: 80%;
+  }
 }

src/modules/footer.js

@@ -4,6 +4,6 @@ const body = document.querySelector('body');
 const footer = document.createElement('footer');
 body.append(footer);
 
-footer.innerHTML = '<h4>Created by Microverse under the CC license</h4>';
+footer.innerHTML = '<div class="license">© Copyrights 2022, Created by <a href="https://github.com/GedeonTS">Gedeon</a> and <a href="https://github.com/Lembani">Lembani</a> under the MIT license</div>';
 
 export default footer;

src/modules/header.js

@@ -5,12 +5,15 @@ const nav = () => {
   const navElement = `
   <nav class="main-nav">
     <a class="brand" href="#">
+    <img class="humburger" src="https://img.icons8.com/external-febrian-hidayat-flat-febrian-hidayat/64/000000/external-hamburger-ui-essential-febrian-hidayat-flat-febrian-hidayat.png"/>
     <img src="${logo}" class="img-brand" alt="Movie Website logo">
     </a>
     <ul class="nav-items">
       <li class="nav-item"><a href="#" class="navlink">Home</a></li>
+      <li class="nav-item trending"><a href="#" class="navlink">Trending</a></li>
       <li class="nav-item"><a href="#" class="navlink">Categories</a></li>
     </ul>
+    <input type="text" class="search-engine" placeholder="search.."><button class="search-btn" type="submit"><img src="https://img.icons8.com/material-sharp/24/000000/search.png"/></button>
   </nav>
   `;
   headerElement.innerHTML = navElement;

src/modules/likeFeature.js

@@ -5,7 +5,7 @@ const liking = async () => {
   const allMovies = await fetchAll();
 
   const likesBtn = document.querySelectorAll('.likeBtn');
-  const spans = document.querySelectorAll('span');
+  const spans = document.querySelectorAll('#likes-status');
   likesBtn.forEach((a, i) => {
     let h = JSON.parse(spans[i].innerHTML);
 

src/modules/middleSection.js

@@ -147,7 +147,7 @@ const movies = async () => {
         <img src="${movie.image.medium}" alt="${movie.name}">
         <h5>${movie.name}<h5/>
         <a class="likes"><img class="likeBtn" src="https://img.icons8.com/material-outlined/24/000000/filled-like.png" >
-          <p><span>${assignLike}</span>likes</p>
+          <p><span id="likes-status">${assignLike}</span>likes</p>
         </a>
         <button class="comment-btn" type="button" id="${arr.indexOf(movie)}">comments</button>
         <button type="button">reservations</button>