finish search Box

README.md

@@ -14,7 +14,7 @@ In this repo you will find some given express server configured to make some bas
    - [x] Show list of requests below the form. (API: GET -> `/video-request`)
    - [x] Vote up and down on each request. (API: PUT -> `/video-request/vote`)
    - [x] Sorting options `new first` the default one, and `top voted first`.
-   - [ ] Search box to search for vide requests.
+   - [x] Search box to search for vide requests.
    - [ ] Client-side validation for the fields with \* as required and for the email field, topic title should be max 100 length.
    - [ ] Add signup/login form with email.
    - [ ] Make votes unique so no one could cheat, using unique user, enhance the voting experience.

index.html

@@ -93,13 +93,24 @@
       </div>
       <hr />
       <h1 class="mb-4">List of requested videos</h1>
-      <div class="d-flex">
+      <div class="d-flex justify-content-between">
         <div class="form-group">
-          <label for="sortList">Sort By</label>
-          <select class="form-control" id="sortList">
-            <option data-list-sort-by-new> new first</option>
-            <option data-list-sort-by-votes> top voted first</option>
-          </select>
+          <button class="btn btn-primary" data-list-sort-by-new>
+            Sort By New First
+          </button>
+          <button class="btn btn-primary" data-list-sort-by-votes>
+            Sort By Top Voted First
+          </button>
+        </div>
+        <div class="form-group">
+          <input
+            type="text"
+            name="search"
+            id="search"
+            placeholder="Search For Video Title"
+            class="form-control"
+            data-search-for-video
+          />
         </div>
       </div>
       <div id="listOfRequests">

script.js

@@ -2,9 +2,23 @@ const videoForm = document.querySelector("[data-video-form-request]");
 const videoRequestsContainer = document.getElementById("listOfRequests");
 const sortByVotesBtn = document.querySelector("[data-list-sort-by-votes]");
 const sortByNewBtn = document.querySelector("[data-list-sort-by-new]");
+const searchForVideo = document.querySelector("[data-search-for-video]");
+
+//  search section
+
+searchForVideo.addEventListener("keyup", () => {
+  let videoTitleValue = searchForVideo.value.toUpperCase();
+  for (let video of videoRequestsContainer.children) {
+    let videoTitle = video.querySelector("h3").textContent;
+    if (videoTitle.toUpperCase().indexOf(videoTitleValue) > -1) {
+      video.style.display = "";
+    } else {
+      video.style.display = "none";
+    }
+  }
+});
 
 // sort btn section
-
 sortByVotesBtn.addEventListener("click", () => {
   render("sortByVotes");
 });