implemented an ability to download notes as DOCX file.

index.html

@@ -77,6 +77,7 @@
             <div id="iconDropdown" class="dropdown-menu">
               <li><a class="dropdown-item" id="downloadNotesPlain">Download as plain text</a></li>
               <li><a class="dropdown-item" id="downloadNotesPdf">Download as PDF</a></li>
+              <li><a class="dropdown-item" id="downloadNotesDocx">Download as DOCX</a></li>
             </div>
           </span>
           <span>
@@ -210,7 +211,7 @@ <h4 class="modal-title custom-modal-title">Notepad — Offline capable</h4>
                 <li><b>Full-screen mode</b> for a distraction-free writing experience.</li>
                 <li><b>Optimal line length</b> for better reading experience.</li>
                 <li><b>Floating window</b> (in supported browsers) to effectively take notes across other apps.</li>
-                <li>Download notes as <b>PDF</b> or <b>plain text</b>.</li>
+                <li>Download notes as <b>plain text</b>, <b>PDF</b>, and <b>DOCX</b>.</li>
                 <li>Ability to play <b>ambient noise</b>—coffee shop, rain, fireside, etc.—to help you focus.</li>
                 <li>It's proudly <a href="https://github.com/amitmerchant1990/notepad" target="_blank">open-source</a>!</li>
               </ul>
@@ -260,6 +261,11 @@ <h4 class="modal-title custom-modal-title">Notepad — Offline capable</h4>
             </div>
 
             <div id="changelog" class="container tab-pane fade">
+              <h4>2nd Dec, 2024</h3>
+              <ul>
+                <li>Implemented an ability to download the notes as a <b>DOCX</b> file.</li>
+              </ul>
+
               <h4>1st Dec, 2024</h3>
               <ul>
                 <li>Implemented a ambient noise player to help you focus. You can mix and match the following noises currently: <b>Coffee Shop</b>, <b>Rain</b>, <b>Fireside</b> and <b>White Noise</b>.</li>
@@ -689,6 +695,7 @@ <h4 class="modal-title custom-modal-title">
   <script src="js/libraries/bootstrap.min.js"></script>
   <script src="js/libraries/sweetalert2.all.min.js"></script>
   <script src="js/libraries/jspdf.umd.min.js"></script>
+  <script src="js/libraries/docx.min.js"></script>
   <script src="js/utils.js"></script>
   <script src="js/selector.js"></script>
   <script src="js/app.js"></script>

js/app.js

@@ -54,7 +54,7 @@ The app serves the following features:
 - Light-weight - Loads almost instantly.
 - Full-screen mode for a distraction-free writing experience.
 - Floating window (in supported browsers) to effectively take notes across other apps.
-- Download notes as PDF or plain text.
+- Download notes as plain text, PDF, and DOCX file.
 - Ability to play ambient noise to help you focus.
 - It's proudly open-source!
 
@@ -208,6 +208,13 @@ there's a small donate button in the About section.
 		exportNotesAsPDF(note.value, getPdfFileName());
 	});
 
+	notepad.downloadNotesDocx.click(function (e) {
+		const textToWrite = note.value;
+		const fileNameToSaveAs = getDocxFileName();
+
+		exportNotesAsDocx(textToWrite, fileNameToSaveAs);
+	});
+
 	// Close dropdown if clicked outside
 	$(document).on('click', function () {
 		$('#iconDropdown').removeClass('show');

js/selector.js

@@ -33,6 +33,7 @@ function selector() {
             moreTools: selectById('moreTools'),
             downloadNotesPlain: selectById('downloadNotesPlain'),
             downloadNotesPdf: selectById('downloadNotesPdf'),
+            downloadNotesDocx: selectById('downloadNotesDocx'),
             fontSize: selectById('fontSize'),
             fontWeight: selectById('fontWeight'),
             installApp: selectById('installApp'),

js/utils.js

@@ -6,6 +6,10 @@ function getPdfFileName() {
     return 'Notes-' + getCurrentDate() + '.pdf';
 }
 
+function getDocxFileName() {
+    return 'Notes-' + getCurrentDate() + '.docx';
+}
+
 function getCurrentDate() {
     const currentDate = new Date();
 
@@ -262,4 +266,30 @@ function exportNotesAsPDF(textToWrite, fileNameToSaveAs) {
     });
 
     pdf.save(fileNameToSaveAs);
+}
+
+function exportNotesAsDocx(textToWrite, fileNameToSaveAs) {
+    const doc = new docx.Document({
+        sections: [{
+            properties: {},
+            children: [
+                new docx.Paragraph({
+                    children: [
+                        new docx.TextRun({
+                            text: textToWrite,
+                        }),
+                    ],
+                }),
+            ],
+        }]
+    });
+
+    docx.Packer.toBlob(doc).then(blob => {
+        const downloadLink = document.createElement('a');
+        downloadLink.href = window.URL.createObjectURL(blob);
+        downloadLink.download = fileNameToSaveAs;
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+    });
 }