Merge pull request #32 from GedeonTS/searchbar

creation of search bar
GedeonTS · May 24, 2022 · dd19f1e · dd19f1e
2 parents 3b2586e + d3992b6
commit dd19f1e
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 15 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Movie Website</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-<script defer src="/movie-website/main.js"></script></head>
+<script defer src="main.js"></script></head>
 <body>
   <div class="comment-modal hide-modal" id="commentModal"></div>
   <header class="header"></header>

diff --git a/dist/main.js b/dist/main.js
diff --git a/src/index.css b/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;
 }
 
@@ -276,3 +331,61 @@ span {
 .sub-comment-btn:hover {
   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) {
+  #middle {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    animation: mymove 3s infinite;
+  }
+}
+
+/* ===============(SMALL SCREENS)==================== */
+
+@media screen and (max-width: 500px) {
+  #middle {
+    display: grid;
+    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%;
+  }
+}
diff --git a/src/modules/footer.js b/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;
diff --git a/src/modules/header.js b/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;

diff --git a/src/modules/likeFeature.js b/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);
 

diff --git a/src/modules/middleSection.js b/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>

diff --git a/webpack.config.js b/webpack.config.js
@@ -7,7 +7,7 @@ module.exports = {
   output: {
     filename: 'main.js',
     path: path.resolve(__dirname, 'dist'),
-    publicPath: '/movie-website/',
+    publicPath: '',
   },
   module: {
     rules: [