js/passwordGenerator.js

@@ -0,0 +1,29 @@
+var passwordGenerator = (function() {
+  return {
+    generatePassword: function (options) {
+      var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXTZ";
+      var lowercase = "abcdefghiklmnopqrstuvwxyz";
+      var numbers = "0123456789";
+      var punct = ".,-/#!$%^&*;:{}=-_`~()]";
+      var candidates = '';
+      if (options.includeUppercaseChars) {
+        candidates += uppercase;
+      }
+      if (options.includeLowercaseChars) {
+        candidates += lowercase;
+      }
+      if (options.includeNumbers) {
+        candidates += numbers;
+      }
+      if (options.includePunctuationChars) {
+        candidates += punct;
+      }
+      var result = "";
+      for (var i = 0; i < options.passwordLength; i++) {
+        var randomNum = Math.floor(Math.random() * candidates.length);
+        result += candidates.substring(randomNum, randomNum + 1);
+      }
+      return result;
+    }
+  };
+})();

password.html

@@ -30,31 +30,31 @@
         <div class="input-group">
           <input type="text" class="form-control" id="password-input" readonly>
           <span class="input-group-btn">
-            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-refresh"></span>          Generate Another</button>
+            <button class="btn btn-default" id="generate-password-button" type="button"><span class="glyphicon glyphicon-refresh"></span>          Generate Another</button>
           </span>
         </div>
       </div>
       <div class="form-group">
         <label>Password Length:</label>
-        <select class="form-control">
+        <select id="password-length" class="form-control">
-          <option value="">4</option>
+          <option value="4">4</option>
         </select>
       </div>
       <div class="form-group collapse" id="advancedOptions">
         <label>
-          <input type="checkbox" checked>
+          <input type="checkbox" id="include-uppercase-chars-checkbox" checked>
           Upper-case
         </label>
         <label>
-          <input type="checkbox" checked>
+          <input type="checkbox" id="include-lowercase-chars-checkbox" checked>
           Lower-case
         </label>
         <label>
-          <input type="checkbox" checked>
+          <input type="checkbox" id="include-digits-checkbox" checked>
           Digits
         </label>
         <label>
-          <input type="checkbox">
+          <input type="checkbox" id="include-special-chars-checkbox">
           Special
         </label>
       </div>
@@ -65,10 +65,28 @@
   </div>
   <script src="js/jquery-1.11.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
+  <script src="js/passwordGenerator.js"></script>
   <script>
-    $(function() {
+    (function() {
-      $("#password-input").val("Password123");
+      'use strict';
-    });
+      function getOptions() {
+        return {
+          passwordLength: $("#password-length").val(),
+          includeUppercaseChars: $("#include-uppercase-chars-checkbox").is(":checked"),
+          includeLowercaseChars: $("#include-lowercase-chars-checkbox").is(":checked"),
+          includeNumbers: $("#include-digits-checkbox").is(":checked"),
+          includePunctuationChars: $("#include-special-chars-checkbox").is(":checked"),
+        }
+      };
+      function outputGeneratedPassword() {
+        var password = passwordGenerator.generatePassword(getOptions());
+        $("#password-input").val(password);
+      }
+      $(function() {
+          outputGeneratedPassword();
+          $("#generate-password-button").click(outputGeneratedPassword);
+      });
+    }());
   </script>
 </body>
 </html>