fix: added documentation to the code.

assets/js/script.js

@@ -1,5 +1,15 @@
+/**
+
+Attaches an event listener to the submit event of a form.
+On submission, fetches the text from a specified file in the user's Github repository and passes it along with the form data to another function.
+@param {event} e - The form submission event.
+@returns {undefined}
+*/
+
 document.getElementById("record-form").onsubmit = (e) => {
   e.preventDefault();
+
+  // Get the form and form data
   var form = document.getElementById("record-form");
   title = form.title.value
   aim = form.aim.value
@@ -19,6 +29,16 @@ document.getElementById("record-form").onsubmit = (e) => {
   });
 }
 
+/**
+
+This function generates a formatted LaTeX code based on provided title, aim, and data.
+If custom LaTeX code exists in localStorage, it will be used instead of the default one.
+* @param {string} title - The title of the program.
+* @param {string} aim - The aim of the program.
+* @param {string} data - The program code.
+* @returns {void}
+*/
+
 function getFormat(title, aim, data) {
   let code = '';
 
@@ -56,7 +76,7 @@ function getFormat(title, aim, data) {
   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%`;
   }
 
-  // Replace variables with values
+  // Replace all variables with values
   code = code.replace(/\${title}/g, title);
   code = code.replace(/\${aim}/g, aim);
   code = code.replace(/\${data}/g, data);
@@ -73,55 +93,59 @@ document.getElementById("copy-icon").onclick = () => {
   setTimeout(() => {
     document.getElementById("copy-icon").innerHTML = `<i class="bi bi-clipboard text-white h6"></i>`;
   }, 1400);
-  // alert("Copied to Clipboard");
 }
 
+// clears the LaTeX code.
 document.getElementById("clear-icon").onclick = () => {
   document.getElementById("output").value = "";
 }
 
+// Get the clear-form button and resets the form.
 const clearButton = document.getElementById("form-clear-button");
-
 clearButton.addEventListener("click", () => {
   const form = document.getElementById("record-form");
   form.reset();
 });
 
-const settingsButton = document.getElementById("settings-icon");
 
+/**
+Adds an event listener to the "settings" button, which displays a modal containing advanced settings
+If the device is mobile, a toast message is displayed to indicate that the advanced settings may not be accessible
+If the user has previously saved custom latex code, the code is loaded into the appropriate form fields
+*/
+const settingsButton = document.getElementById("settings-icon");
 settingsButton.addEventListener("click", () => {
-
   const isMobile = navigator.userAgent.match(/Mobi/);
 
-  // If the device is mobile, log a message to the console
+  // If the device is mobile, display a toast message to indicate that advanced settings may not be accessible
   if (isMobile) {
     console.log('This is a mobile device');
     const toastLiveExample = document.getElementById('liveToast')
     document.getElementById("toast-content").innerHTML = "Please note that advanced settings can only be accessed on a PC. If you are using a mobile device or tablet, you may not be able to access these settings."
     const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
     toastBootstrap.show()
   } else {
-  // Get the modal element
-  const myModal = document.getElementById('staticBackdrop');
-
-  // Show the modal using the Bootstrap JavaScript API
-  const modal = new bootstrap.Modal(myModal);
-  modal.show();  
-
-  if(localStorage.getItem("custom_latex") !== null){
-    // myItemKey exists in localStorage
-    var form = document.getElementById("custom-latex");
-    form.latex_custom.value = localStorage.getItem("custom_latex")
-    form.use_custom_code.value = localStorage.getItem("use_custom_code")
-  }
+    // Get the modal element
+    const myModal = document.getElementById('staticBackdrop');
+    
+    // Show the modal using the Bootstrap JavaScript API
+    const modal = new bootstrap.Modal(myModal);
+    modal.show();  
+
+    if(localStorage.getItem("custom_latex") !== null){
+      // myItemKey exists in localStorage
+      var form = document.getElementById("custom-latex");
+      form.latex_custom.value = localStorage.getItem("custom_latex")
+      form.use_custom_code.value = localStorage.getItem("use_custom_code")
+    }
 }});
 
 
 document.getElementById("custom-latex").onsubmit = (e) => {
   e.preventDefault();
 
+  // Get the modal alert element and define a function to append alert messages
   modalAlert = document.getElementById("modalAlert")
-
   const appendAlert = (message, type) => {
     modalAlert.innerHTML = [
       `<div class="alert alert-${type} alert-dismissible" role="alert">`,
@@ -131,13 +155,14 @@ document.getElementById("custom-latex").onsubmit = (e) => {
     ].join('')
   }
 
+  // Get the form element and validate the custom LaTeX code input
   const form = document.getElementById("custom-latex");
-
   if (form.use_custom_code.value !== "false" && form.latex_custom.value === ""){
     appendAlert("Custom Latex Code can not be enabled with Latex Code being Empty","info")
     return
   }
 
+  // Define the available variables that can be used in the LaTeX code
   available_variables = ['${title}','${aim}','${data}']
 
   //extracting the variables out of the latex code.
@@ -150,19 +175,24 @@ document.getElementById("custom-latex").onsubmit = (e) => {
   try {
     const invalid_variables = user_variables.filter(match => !available_variables.includes(match));
     if (invalid_variables.length === 0) {
-      //saving the custom code, when there are no invalid variables
+      // If there are no invalid variables found, save the custom LaTeX code and the custom code flag to local storage
       localStorage.setItem("custom_latex",form.latex_custom.value);
       localStorage.setItem("use_custom_code",form.use_custom_code.value);
       appendAlert('Settings saved successfully', 'success');
     } else {
+      // If there are invalid variables found, display an alert message with the invalid variables
       appendAlert(`Invalid variables found ${invalid_variables}`, 'warning');
     }   
   } catch (error) {
-    console.log(error)
+    console.log(error) // Log any errors to the console
   }
-
 }
 
+/**
+ * Inserts a variable at the current cursor position in a textarea.
+ *
+ * @param {string} variableName - The name of the variable to insert.
+ */
 function insertVariable(variableName) {
   var textarea = document.getElementById("latex_custom");
   var cursorPosition = textarea.selectionStart;