Hover effect idea

ideas/sample.txt

@@ -5,4 +5,7 @@ Every time when we enter some title in addItem bar we have to remove previously
 Just like the filters in Add box we can also add those filters in search box. That is preveting blanck search,displaying success or error messages on screen
 
 
-We can Add a option for search -"Search by" option  which give option to user search by title or author(or something else)
+We can Add a option for search -"Search by" option  which give option to user search by title or author(or something else)
+
+
+We can add hover effects on buttons and input bars

pages/index.html

@@ -31,7 +31,15 @@
         <a href="index.html" class="navbar-brand"><h1>Libook</h1></a>
       </div>
       <form action="#" class="form-inline">
-        <input id="search-text" name= "search-text" type="text" class="form-control" placeholder="Search">
+        <div id="filter">
+          <div class="searchBy ">Search By</div>
+          <div class="drop-content">
+            <p id="drop-title">Title</p>
+            <p id="drop-author">Author</p>
+          </div>
+
+        </div> 
+        <input id="search-text" name= "search-text" type="text" class="form-control ml-2 " placeholder="Search Title">
         <button id="search-btn" class="btn btn-outline-success ml-2" type="submit">Search</button>
       </form>
     </div>

scripts/index.js

@@ -6,9 +6,12 @@ const searchBtn = document.getElementById("search-btn");
 const searchTxt = document.getElementById("search-text");
 const titles = document.getElementById("titles");
 const titleMessage = document.getElementById("title-message");
+const filter=document.getElementById("filter");
 addBtn.addEventListener('click', handleAdd);
 searchBtn.addEventListener('click',handleSearch);
+filter.addEventListener('click',handleFilter);
 let i = localStorage.length;
+var type;
 
 
 updateList();
@@ -82,19 +85,45 @@ function handleEmpty(elem) {
         if(elem===addDetails) elem.placeholder="Enter Summary";
     }
 }
+function handleFilter(e){
+    e.preventDefault();
+    var by,splitby;
+    by=e.target.id;
+    splitby=by.split('-');
+    type=(splitby[1]);
+    if(type==='title')
+        searchTxt.placeholder='Search Title';
+    else if(type==='author')
+        searchTxt.placeholder='Search Author';
+
+}
 
 function handleSearch(e){
     e.preventDefault();
+    if(!type)
+        type='title';
     var str = searchTxt.value;
     var arr = new Array();
     for(let j = 0; j < localStorage.length; j++){
         var key=localStorage.key(j);
         try {
-            var str2=(JSON.parse(localStorage.getItem(key))).title;
+            console.log(type);
+            var str1=(JSON.parse(localStorage.getItem(key))).title;
+            var str2=(JSON.parse(localStorage.getItem(key))).author; 
             var re = new RegExp(str,"gi");
-            if(re.test(str2)){
-                arr.push(str2);
+            if(type==='title')
+            {
+                if(re.test(str1)){
+                    arr.push(str1);
+                }
             }
+            else
+            {
+                if (re.test(str2)){
+                    arr.push(str1);
+                }
+            }
+
         } catch (error){
             console.log(error);
         }

styles/index.css

@@ -14,11 +14,45 @@ footer {
     min-height: 100vh;
 }
 
-
 .active {
     border: 1px solid #ff0000 !important;
 }
 
+#filter {
+    position: relative;
+    display: inline-block;
+    border-width: 1px 1px 1px 1px;
+    border-color: #43494d;
+    border-style: solid;
+    border-radius: 6%;
+    padding: 5px 4px 5px 4px;
+    color: #43494d;
+    cursor: pointer;
+}
 
+.drop-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    padding: 12px 16px;
+    z-index: 5;
+}
 
+#filter:hover .drop-content {
+    display: block;
+    margin-top: 8px;
+    margin-left: -6px;
+}
+
+.drop-content p {
+    color: black;
+    text-decoration: none;
+    display: block;
+    padding: 12px 16px;
+}
 
+.drop-content p:hover {
+    background-color: #e9ecef;
+}