Added a download button (#2312)

* Added a Download button next to the Copy to Clipboard button in the UI

* fixed download button and passed all test cases

* Update js/bin/js-beautify.js

* Update index.html

* Update index.html

* Update web/common-function.js

Co-authored-by: Liam Newman <bitwiseman@gmail.com>

* Update web/common-function.js

---------

Co-authored-by: Liam Newman <bitwiseman@gmail.com>

index.html

@@ -97,6 +97,7 @@
     <div class="buttons-box">
       <button class="submit"><strong>Beautify Code</strong> <em>(ctrl&#8209;enter)</em></button>
       <button class="control" type="button" onclick="copyText()"><strong>Copy to Clipboard</strong></button>
+      <button class="control" type="button" onclick="downloadBeautifiedCode()"><strong>Download</strong></button>
       <button class="control" type="button" onclick="selectAll()"><strong>Select All</strong></button>
       <button class="control" type="button" onclick="clearAll()"><strong>Clear</strong></button>
       <input type="file" onchange="changeToFileContent(this)">

web/common-function.js

@@ -150,6 +150,40 @@ function unpacker_filter(source) {
   return leading_comments + source;
 }
 
+/* exported downloadBeautifiedCode */
+function downloadBeautifiedCode() {
+  var content = the.editor ? the.editor.getValue() : $('#source').val();
+
+  // Getting the selected language to determine the file extension
+  var language = $('#language').val();
+  var fileExtension = "txt"; // Default extension
+
+  // Setting the  file extension based on the selected language
+  if (language === 'html') {
+    fileExtension = 'html';
+  } else if (language === 'css') {
+    fileExtension = 'css';
+  } else if (language === 'js') {
+    fileExtension = 'js';
+  }
+
+  // Creating a Blob object with the content
+  var blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+
+  // Creating a temporary anchor element to trigger the download
+  var link = document.createElement("a");
+  link.href = URL.createObjectURL(blob);
+  try {
+    link.download = "beautified." + fileExtension; // Dynamic file name based on extension
+
+    // Triggering the download
+    link.click();
+  } finally {
+    // Cleanup
+    URL.revokeObjectURL(link.href);
+  }
+}
+
 
 function beautify() {
   if (the.beautify_in_progress) {

web/onload.js

@@ -55,4 +55,6 @@ $(function() {
   $('#additional-options').change(beautify);
 
 
+
+
 });