Added a little bit of JS code to enable people to select multiple lan…

…guages
ykdojo · Dec 8, 2018 · d6cd571 · d6cd571
1 parent 01c0195
commit d6cd571
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/templates/base.html b/templates/base.html
@@ -16,10 +16,9 @@
   </head>
 
   <body>
+    <script src="static/js/core/jquery.min.js" type="text/javascript"></script>
     {% block content %}
     {% endblock content %}
-    <!--   Core JS Files   -->
-    <script src="static/js/core/jquery.min.js" type="text/javascript"></script>
     <script src="static/js/core/popper.min.js" type="text/javascript"></script>
     <script src="static/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
     <script src="static/js/plugins/moment.min.js"></script>

diff --git a/templates/login.html b/templates/login.html
@@ -29,6 +29,44 @@ <h3>Select your languages</h3>
       <p></p>
     </div>
   </div>
+  <script>
+    let languageList = ['English', 'Japanese'];
+
+    // given learningOrFluent, the new id for the selection element,
+    // and a new language list, this generates and returns a new HTML snippet
+    // for language selection.
+    function generateSelectHTML(learningOrFluent, id, newLanguageList){
+      let languageListHTML = '';
+      newLanguageList.forEach(language => {
+        languageListHTML += `<option>${language}</option>`
+      });
+      let selectHTML = 
+        `<select class="custom-select ed-select" id="${learningOrFluent}${id}">
+          <option>Select Additional Language (if any)</option>
+          ${languageListHTML}
+        </select>`;
+      return selectHTML;
+    }
+
+    function attachSelectionListner(learningOrFluent){
+      $(`#${learningOrFluent}1`).on('change', function(){
+        let selectedLanguage = this.value;
+
+        // make a deep copy of languageList
+        let newLanguageList = JSON.parse(JSON.stringify(languageList));
+        // remove selectedLanguage from the new list
+        let i = newLanguageList.indexOf(selectedLanguage);
+        newLanguageList.splice(i, 1);
+
+        let selectHTML = generateSelectHTML(learningOrFluent, 2, newLanguageList);
+        $(`#${learningOrFluent}-select`).append(selectHTML);
+      });
+    };
+
+    ['learning', 'fluent'].forEach(learningOrFluent => {
+      attachSelectionListner(learningOrFluent);
+    });
+  </script>
   {% else %}
   <div class="container">
     <div class="card col-lg-6 col-md-6 ml-auto mr-auto">