adding search bar for project page, and dropdown list on archive page.

archive.html

@@ -102,16 +102,9 @@
       <main class="mdl-layout__content">
         <div class="nwoc-content">
           <h3>Archive</h3>
-          <ul>
-            <li><a href="#2019">2019</a></li>
-            <li><a href="#2018">2018</a></li>
-            <li><a href="#2017">2017</a></li>
-            <li><a href="#previous-sponsors">Previous Sponsors</a></li>
-          </ul>
-
-          <a id="2019"></a>
-          <h3>2019</h3>
-
+          <div class="archive">
+          <details>
+            <summary>2019</summary>
           <div class="mdl-grid mdl-grid--no-spacing">
             <div class="mdl-cell mdl-cell--6-col">
               <div class="nwoc-repo-card">
@@ -549,11 +542,10 @@ <h3>2019</h3>
               </div>
             </div>
           </div>
+          </details>
 
-
-          <a id="2018"></a>
-          <h3>2018</h3>
-
+          <details>
+            <summary>2018</summary>
           <div class="mdl-grid mdl-grid--no-spacing">
             <div class="mdl-cell mdl-cell--6-col">
               <div class="nwoc-repo-card">
@@ -1060,10 +1052,11 @@ <h3>2018</h3>
               </div>
             </div>
           </div>
-
-          <a id="2017"></a>
-          <h3>2017</h3>
+          </details>
 
+
+          <details>
+            <summary>2017</summary>
           <div class="mdl-grid mdl-grid--no-spacing">
             <div class="mdl-cell mdl-cell--6-col">
               <div class="nwoc-repo-card">
@@ -1304,14 +1297,17 @@ <h3>2017</h3>
                 </ul>
               </div>
             </div>
-
+            
           </div>
+          </details>
 
-          <a id="previous-sponsors"></a>
-          <h3>Previous Sponsors</h3>
+          <details>
+            <summary>Previous Sponsors</summary>
           <a href="https://github.com/" target="_blank"><img class="nwoc-current-sponsors" src="/images/GitHub_Logo_custom.png"/></a>
           <a href="https://www.jetbrains.com/" target="_blank"><img class="nwoc-current-sponsors" src="/images/jetbrains-variant-1.png"/></a>
           <a href="https://www.digitalocean.com/" target="_blank"><img class="nwoc-current-sponsors" src="/images/DO_Logo_Vertical_Blue.png"/></a>
+          </details>
+          </div>
         </div>
         <footer>
             <svg viewBox="0 0 120 28">
@@ -1415,4 +1411,4 @@ <h3>Previous Sponsors</h3>
 }
 </script>
 
-</html>
+</html>

index.html

@@ -115,11 +115,11 @@
           <p>NWoC (NJACK Winter of Code) is a program by NJACK (The Official Computer Science Club of IIT Patna) that
             helps students understand the paradigm of Open Source contribution and gives them real world software
             development experience.
-          <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
+          <!-- <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
             <a href="https://docs.google.com/forms/d/e/1FAIpQLSdA1dAV8ywtVNenm26nfEXfp07jfLWDxcz8PkQF8hwZGTIHfg/viewform?usp=sf_link"
               target="_blank" class="mdl-snackbar__text" style="text-decoration: none;"></a>
             <button class="mdl-snackbar__action" type="button"></button>
-          </div>
+          </div> -->
           </p>
         </div>
         <div class="nwoc-header-sponsors">
@@ -502,7 +502,7 @@ <h4>Tell your friends about NWoC</h4>
   });
 
 </script>
-<script>
+<!-- <script>
   (function () {
     'use strict';
     var snackbarContainer = document.querySelector('#demo-snackbar-example');
@@ -522,7 +522,7 @@ <h4>Tell your friends about NWoC</h4>
     });
 
   }());
-</script>
+</script> -->
 <script>
 //Get the button
 var mybutton = document.getElementById("myBtn");

projects.html

@@ -107,6 +107,8 @@ <h3>NWoC 2020 Projects</h3>
 
          <p style="text-align:justify">These are the selected projects for NWoC 2020. Please refer to the project Readme to get the Communication Channel Link of the project to be in touch with the mentor. Make sure to visit the <a href="https://github.com/NJACKWinterOfCode/Get-Started-NWoC20" target="_blank">Getting Started</a> repository to know the important rules and guidelines that you need to follow.</p>
 
+         <input type="search" name="searchBar" id="searchBar" onkeyup="mysearchFunction()" placeholder="Search for tags (like:html,css,web)">
+
           <div class="mdl-grid mdl-grid--no-spacing">
             <div class="mdl-cell mdl-cell--6-col">
               <div class="nwoc-repo-card">
@@ -708,4 +710,23 @@ <h3>NWoC 2020 Projects</h3>
   document.documentElement.scrollTop = 0;
 }
 </script>
-</html>
+<script type="text/javascript">
+  function mysearchFunction() {
+    let input = document.getElementById('searchBar').value;
+    input = input.toUpperCase();
+    let repoCard = document.getElementsByClassName('nwoc-repo-card');
+    let card = document.getElementsByClassName('mdl-cell--6-col');
+    let list = document.getElementsByClassName('repo-stats');
+    // console.log(card);
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].innerHTML.toUpperCase().includes(input)) {
+        repoCard[i].style.display = "";
+        card[i].style.display = "";
+      } else {
+        repoCard[i].style.display = "none";
+        card[i].style.display = "none";
+      }
+    }
+  } 
+</script>
+</html>

style.css

@@ -301,8 +301,22 @@ a {
   margin-right: 30px;
   margin-bottom: 30px;
 }
+/* Search Bar */
+#searchBar{
+  background-color: white;
+  border: none;
+  border: 2px solid #a6d2ff;
+  display:block;
+  width: 95%;
+  margin: 20px auto;
+  padding: 8px;
+  font-size: 14px;
+  outline: none;
+  box-shadow: 6px 6px 3px #45889b;
+}
 
 .nwoc-repo-card {
+  display: block;
   margin-bottom: 10px;
   padding: 18px;
   max-width: 328px;
@@ -311,6 +325,13 @@ a {
   border-radius: 5px;
   position: relative;
   box-shadow: 5px 7px 8px rgb(65 159 159);
+  transform: scale(.99);
+  transition: all .2s ease-in-out;
+}
+
+.nwoc-repo-card:hover{
+  box-shadow: 8px 10px 12px rgb(65 159 159);
+  transform: scale(1);
 }
 
 .nwoc-repo-card .repo-title {
@@ -364,6 +385,30 @@ a {
   margin: 0 auto;
 }
 
+/* Archive Page Start Her*/
+details summary::-webkit-details-marker {
+  display:none;
+}
+
+.archive summary{
+  width: 30%;
+  margin-bottom: 12px;
+  padding: 8px;
+  outline: none;
+  cursor: pointer;
+  font-size: 16px;
+  background-color: #b9ebfa;
+  box-shadow: 4px 3px 4px #a3cbf2;
+  transform: scale(.98);
+  transition: all .3s ease;
+}
+
+.archive summary:hover{
+  transform: scale(1.05);
+  background-color: #9ee1f9;
+  box-shadow: 5px 6px 8px #a3cbf2;
+}
+
 /* Contact Page Start Here */
 .nwoc-contact {
   width: 160px;