Adding a button to download in a .pdf file the generated password

index.html

@@ -62,7 +62,11 @@ <h4 id="how">How To Use:</h4>
                     <div id="random-password"></div>
                 </div>
                 <button class="copy button" type ="button" onClick="copyToClip()"> Copy to Clipboard </button>
+                <button class="download button" type="button" onClick="downloadPassword()">
+                    Download Password
+                </button>
             </div>
+
             <div id="password-strength-container">
                 <div class="input-container">
                     <input type="password" id="password-test" placeholder="Type password here"><span id="password-toggle">show</span>
@@ -77,4 +81,6 @@ <h4 id="how">How To Use:</h4>
     </div>
 </body>
 <script src="index.js"></script>
+<!-- parallax/jsPDF -->
+<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
 </html>

index.js

@@ -208,3 +208,26 @@ passwordToggle.onclick = function() {
 //function strengthenPassword() {
 //    var value = passwordTest.value.trim();
 //}
+
+
+// use of jsPDF to generate a .pdf file with the
+// generated password
+function downloadPassword() {
+  window.jsPDF = window.jspdf.jsPDF;
+  var generatedPass = document.getElementById("random-password").innerHTML;
+  var pdfGenerator = new jsPDF();
+
+  if (generatedPass === "" || generatedPass === undefined) {
+    alert("Please Generate a Password!");
+  } else {
+    try {
+      pdfGenerator.setFontSize(12);
+      pdfGenerator.text("The generated password is:", 20, 20);
+      pdfGenerator.setFont("undefined", "bold");
+      pdfGenerator.text(generatedPass, 20, 30);
+      pdfGenerator.save("password.pdf");
+    } catch (err) {
+      alert("AN ERROR OCCURRED!");
+    }
+  }
+}

main.css

@@ -224,3 +224,11 @@ input[type="number"] {
     width: 100%;
   }
 }
+
+.button.download {
+  background-color: powderblue;
+  color: black;
+}
+.button.download:hover {
+  background-color: #b6e4eb;
+}