style and add functionality to download buttons

_layouts/download.html

@@ -23,9 +23,31 @@ layout: default
           with the {{ page.name }}
         </p>
         <div>
-          *dropdown here*
-          *download button here*
+          <label class="language-select">
+            <select>
+              {% for language in page.files %}
+              <option value="{{ language[1] }}">
+                {% case language[0] %}
+                  {% when 'en' %}
+                    ENGLISH
+                  {% when 'de' %}
+                    GERMAN
+                  {% when 'fil' %}
+                    FILIPINO
+                  {% when 'fr' %}
+                    FRENCH
+                  {% when 'es' %}
+                    SPANISH
+                {% endcase %}
+              </option>
+              {% endfor %}
+            </select>
+          </label>
+          <a class="download-button" href="{{ page.files.en }}">DOWNLOAD NOW <i class="fas fa-download"></i></a>
+          <div class="clear"></div>
       </div>
     </div>
   </div>
 </div>
+
+<script src="/assets/javascript/download.js"></script>

assets/javascript/download.js

@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded',function() {
+  var languageSelect = document.querySelector(".language-select select");
+  languageSelect.onchange=languageSelectHandler;
+},false);
+
+function languageSelectHandler(event) {
+    document.querySelector(".download-button").href = event.target.value;
+}

assets/javascript/downloads.js

@@ -1,17 +1,19 @@
-var searchElement = document.getElementById("search");
+document.addEventListener('DOMContentLoaded',function() {
+  var searchElement = document.getElementById("search");
 
-searchElement.addEventListener('keyup', function(event) {
-  var regex = new RegExp(searchElement.value, "gi");
+  searchElement.addEventListener('keyup', function(event) {
+    var regex = new RegExp(searchElement.value, "gi");
 
-  var i, downloads = document.getElementsByClassName("download");
-  for (i = 0; i < downloads.length; i++) {
-    download = downloads[i];
-    var id = download.dataset.id;
+    var i, downloads = document.getElementsByClassName("download");
+    for (i = 0; i < downloads.length; i++) {
+      download = downloads[i];
+      var id = download.dataset.id;
 
-    if (id.match(regex)) {
-      download.style.display = 'block';
-    } else {
-      download.style.display = 'none';
+      if (id.match(regex)) {
+        download.style.display = 'block';
+      } else {
+        download.style.display = 'none';
+      }
     }
-  }
+  });
 });

assets/sass/base/_base.scss

@@ -5,3 +5,7 @@ body  {
 a {
   text-decoration: none;
 }
+
+.clear {
+  clear: both;
+}

assets/sass/base/_variables.scss

@@ -1,3 +1,5 @@
+$purple: #652f8f;
+
 // derived from bootstrap variables
 
 // Extra small screen / phone

assets/sass/pages/_download.scss

@@ -42,7 +42,78 @@
     }
 
     .download {
+      .language-select {
+        float: left;
+        margin-right: 10px;
+        border-radius: 5px;
+        border: 2px solid $purple;
+        overflow: hidden;
+        height: 45px;
+        width: 200px;
+        position: relative;
+        display: block;
+      }
 
+      select{
+        height: 45px;
+        padding: 5px;
+        border: 0;
+        font-size: 16px;
+        width: 200px;
+       -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+      }
+      .language-select:after {
+        content: "\f0dc";
+        font-family: 'Font Awesome 5 Free';
+        font-weight: 900;
+        color: $purple;
+        padding: 15px 8px;
+        position: absolute; right: 0; top: 0;
+        background: #fff;
+        z-index: 1;
+        text-align: center;
+        width: 15%;
+        height: 100%;
+        pointer-events: none;
+        box-sizing: border-box;
+      }
+
+      a {
+        float: left;
+        padding: 15px 37px 15px 37px;
+        color: #fff;
+        border-radius: 5px;
+        border: none;
+        background-color: $purple;
+
+        i {
+          padding-left: 10px;
+        }
+      }
     }
   }
 }
+
+@media (max-width: $screen-lg) {
+  #download-page .download-section {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: $screen-md) {
+  #download-page .download-section {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .language-select {
+    margin-bottom: 10px;
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  #download-page .download-section {
+    grid-template-columns: 1fr;
+  }
+}