20210812

dev-mdsohagmiya · Sep 13, 2021 · b95574f · b95574f
1 parent d4c96e7
commit b95574f
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
           <div class="row ">
               <div class="col-xl-10 col-lg-10 col-md-8 col-7">
                 <form action="">
-                    <input  class="form-control w-100" type="text" placeholder="Search">
+                    <input  class="form-control w-100" type="text" placeholder="Search title">
                 </form>
               </div>
               <div class="col-xl-2 col-lg-2 col-md-4 col-5 ">

diff --git a/main.js b/main.js
@@ -3,6 +3,13 @@ const form = document.querySelector("form")
 const button = document.querySelector("button")
 const input = document.querySelector("input")
 input.value=""
+// button.addEventListener("click",()=>{
+//  console.log(input.value.toUpperCase())
+//  if(input.value == input.value.toUpperCase()){
+//      console.log("uppercase")
+//  }
+// })
+
 blog_data.forEach((e)=>{
     let card = `
     <div class="col-xl-6 col-lg-6 col-12 blog-items col-width">
@@ -29,6 +36,36 @@ blog_data.forEach((e)=>{
     `
 mainRow.insertAdjacentHTML("beforeend",card)
 
+input.addEventListener("input",()=>{
+
+    if(input.value == ""){
+        mainRow.value = ""
+        let card = `
+        <div class="col-xl-6 col-lg-6 col-12 blog-items col-width">
+        <div class="card col-margin p-2">
+         <div class="row">
+           <div class="col-xl-5 col-lg-5 col-md-5 col-12">
+               <h5 class=" title mt-2"> <small>${e.title}</small></h5>
+               <small class="dec ">${e.dec}</small>
+           <br>   <a style="color: gray;" href="#">Read more</a>
+                    
+                  <div class="mb-3">  <b class="mt-2 d-inline-block ">Writing by:</b> <span>${e.writingBy}</span> <span class="w-n py-2">@${e.writingBy}</span>
+                  </div>
+                                        
+            </div>
+           <div class="col-xl-7 col-lg-7 col-md-7 col-12 text-center ">
+               <img class="img-thumbnail img mt-3" src="${e.img}" alt="">
+             <br>
+           </div>
+       </div>
+        </div>
+           
+        </div>
+        
+        `
+    mainRow.insertAdjacentHTML("beforeend",card)
+    }
+})
 
 })
 form.addEventListener("submit",(e)=>{
@@ -37,10 +74,41 @@ form.addEventListener("submit",(e)=>{
 
 
 button.addEventListener("click",()=>{
+    mainRow.innerHTML = ""
     blog_data.forEach((e)=>{
-        eValue  = e.title
-      if(eValue.includes(input.value)){
+       let eValue  = e.title.toLowerCase()
+       let inputValue = input.value.toLowerCase()
+      if(eValue.includes(inputValue)){
           console.log(eValue)
+
+          let card1 = `
+          <div class="col-xl-6 col-lg-6 col-12 blog-items col-width">
+          <div class="card col-margin p-2">
+           <div class="row">
+             <div class="col-xl-5 col-lg-5 col-md-5 col-12">
+                 <h5 class=" title mt-2"> <small>${e.title}</small></h5>
+                 <small class="dec ">${e.dec}</small>
+             <br>   <a style="color: gray;" href="#">Read more</a>
+                      
+                    <div class="mb-3">  <b class="mt-2 d-inline-block ">Writing by:</b> <span>${e.writingBy}</span> <span class="w-n py-2">@${e.writingBy}</span>
+                    </div>
+                                          
+              </div>
+             <div class="col-xl-7 col-lg-7 col-md-7 col-12 text-center ">
+                 <img class="img-thumbnail img mt-3" src="${e.img}" alt="">
+               <br>
+             </div>
+         </div>
+          </div>
+             
+          </div>
+          
+          `
+      mainRow.insertAdjacentHTML("beforeend",card1)
+      }
+      if(!eValue.includes(inputValue)){
+            console.log("title not fount")
       }
     })
-})
+})
+