Add dropdown filter so that users can filter by time period (years)

app.js

@@ -5,6 +5,9 @@ $(document).ready(function () {
   // This array will store all the genre filter options
   var genreFilters = [];
 
+  // This array will store year options
+  const yearOptions = [];
+
   // Create a variable for the emoji cards.
   var emojiCard = "";
 
@@ -31,6 +34,13 @@ $(document).ready(function () {
   // Add the filters from the genres.md file
   addFilterFromGenres(genreFilters, initGenreFilter);
 
+  // Render years filter from data.js
+  // renderYearsFilter();
+  for (let i in emojiItems) {
+    let year = emojiItems[i].year
+  }
+
+
   // Append the emoji card variable, which has all of the emoji cards to the initial variable we created that was for the container to hold the cards.
   emojiCardContainer.html(emojiCard);
 
@@ -40,6 +50,7 @@ $(document).ready(function () {
   // Add the count of number of shows/movies to the footer.
   $("footer span").append(emojiItems.length);
 
+  applySelect2();
 
   // Display movies and show in a random order, the random order will refresh on page reload. This function is used above before the cards are rendered on the page.
   function shuffle(array) {
@@ -112,6 +123,7 @@ $(document).ready(function () {
     }
   }
 
+
   /**
    * This function will make an ajax request to read the genres.md file and add filters to the genre filters array
    */
@@ -155,19 +167,42 @@ $(document).ready(function () {
       var text = genreFilters[i].replace(/-/g, " ");
       text = text.charAt(0).toUpperCase() + text.slice(1);
 
-      // Add an option to the genre filter element
+      // Adds an option to the genre filter element
       genreFilterElement.append($("<option>", {
         value: genreFilters[i],
         text: text,
+        // addClass: "dropdown",
       }));
     }
 
+    // Toggles filter arrow
+    genreFilterElement.click(function() {
+      toggleFilterArrow();
+    });
+
     // Handle change events of the genre filter element
     genreFilterElement.change(function (event) {
       handleGenreFilterChange(event.target.value);
+      // toggles filter arrow
+      toggleFilterArrow();
     });
   }
 
+  /**
+   * Helper functions
+   */
+  // Handles the change of filter select arrow
+  function toggleFilterArrow() {
+    $(".filters-options").toggleClass("select-arrow-active");
+  };
+
+  function applySelect2() {
+    $("select").select2({
+      theme: "flat"
+    });
+  }
+
+
   /**
    * Handle the change events of the genre filter select dropdown
    * @param {string} filter The genre filter to add

index.html

@@ -19,6 +19,8 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
         integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css?family=Kreon:700|Open+Sans:400,700&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="select2-flat-theme.css">
     <link rel="stylesheet" href="main.css">
     <link rel="icon" href="favicon.ico" type="image/gif" sizes="16x16">
 </head>
@@ -49,6 +51,14 @@ <h2>A listing of books depicted through emojis. <img draggable="false" class="em
                     <option value="show-all" selected>All genres</option>
                 </select>
             </div>
+            <div class="filters-heading">
+                Filter By Years:
+            </div>
+            <div class="filters-options">
+                <select name="year-filter" id="year-filter">
+                    <option value="show-all" selected>All years</option>
+                </select>
+            </div>
         </section>
         <section id="books"></section>
         <section id="message"></section>
@@ -58,6 +68,7 @@ <h2>A listing of books depicted through emojis. <img draggable="false" class="em
     </main>
     <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
     <script src="data.js"></script>
     <script src="app.js"></script>
 </body>

main.css

@@ -92,17 +92,13 @@ h2 {
   max-width: 1000px;
   margin: 20px auto 40px auto;
   padding: 10px;
-  font-size: 25px;
+  font-size: 20px;
   color: white;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
 }
 
-.filters-heading {
-  padding-right: 5px;
-}
-
 .filters-options {
   padding: 0 10px;
   position: relative;
@@ -116,27 +112,73 @@ h2 {
   -moz-appearance: none;
 }
 
-#genre-filter {
-  border-radius: 0;
-  border: 0;
-  padding: 10px 20px;
-  background-color: white;
-  position: relative;
+.select2-container--flat {
+  border-radius: 0.5em;
+  border: 0px;
+  height: 35px;
+  color: #222222;
+  background: #fff;  
 }
 
-.filters-options:after {
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    content: "\f0dc";
-    display: inline-block;
-    font-style: normal;
-    font-variant: normal;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    color: #3c3a4a;
-    position: absolute;
-    right: 17px;
-    top: 8px;
+.select2-container .select2-selection--single .select2-selection__rendered {
+  width: 100%;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.select2-selection__arrow {
+  height: 26px;
+  position: absolute;
+  top: 1px;
+  right: 2px;
+  width: 20px;
+}
+
+b {
+  border-color: #AE74FF transparent transparent transparent;
+  top: 60%;
+  border-style: solid;
+  border-width: 8px 7px 0 7px;
+  height: 0;
+  left: 50%;
+  margin-left: -10px;
+  margin-top: -2px;
+  position: absolute;
+  width: 0;
+}
+
+.select2-container--open .select2-selection__arrow {  
+  transform: rotate(180deg);
+  margin-top: 7px;
+  margin-right: 5px;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+}
+
+.select2-container .select2-dropdown--below {
+  margin-top: 5px;
+  border-radius: 0.5em;
+  padding: 4px;
+  z-index: 10000;
+  border: transparent;
+}
+
+.select2-results__option--highlighted[aria-selected] {
+  background: #AE74FF !important;
+  color: #fff;
+  border-radius: 0.5em;
+}
+
+.select2-results__option[aria-selected=true] {
+  background: #5e20b4;
+  color: #fff;
+  opacity: 0.8;
+  border-radius: 0.5em;
+}
+
+span.select2-search input{
+  font-size: 25px;
+  height: 35px !important;
 }
 
 @media screen and (max-width: 460px) {