Add comments and docstrings to the code

public/static/settings.js

@@ -1,5 +1,7 @@
-// This function handles the toggling of selections of all upstream search engines 
+/**
-// options in the settings page under the tab engines.
+ * This function handles the toggling of selections of all upstream search engines 
+ * options in the settings page under the tab engines.
+ */
 function toggleAllSelection() {
   document
     .querySelectorAll('.engine')
@@ -10,25 +12,36 @@ function toggleAllSelection() {
     )
 }
 
-// This function adds the functionality to sidebar buttons to only show settings 
+/**
-// related to that tab.
+ * This function adds the functionality to sidebar buttons to only show settings 
+ * related to that tab.
+ * @param {HTMLElement} current_tab - The current tab that was clicked.
+ */
 function setActiveTab(current_tab) {
+  // Remove the active class from all tabs and buttons
   document
     .querySelectorAll('.tab')
     .forEach((tab) => tab.classList.remove('active'))
   document
     .querySelectorAll('.btn')
     .forEach((tab) => tab.classList.remove('active'))
+
+  // Add the active class to the current tab and its corresponding settings
   current_tab.classList.add('active')
   document
     .querySelector(`.${current_tab.innerText.toLowerCase().replace(' ', '_')}`)
     .classList.add('active')
 }
 
-// This function adds the functionality to save all the user selected preferences
+/**
-// to be saved in a cookie on the users machine.
+ * This function adds the functionality to save all the user selected preferences
+ * to be saved in a cookie on the users machine.
+ */
 function setClientSettings() {
+  // Create an object to store the user's preferences
   let cookie_dictionary = new Object()
+
+  // Loop through all select tags and add their values to the cookie dictionary
   document.querySelectorAll('select').forEach((select_tag) => {
     if (select_tag.name === 'themes') {
       cookie_dictionary['theme'] = select_tag.value
@@ -36,6 +49,8 @@ function setClientSettings() {
       cookie_dictionary['colorscheme'] = select_tag.value
     }
   })
+
+  // Loop through all engine checkboxes and add their values to the cookie dictionary
   let engines = []
   document.querySelectorAll('.engine').forEach((engine_checkbox) => {
     if (engine_checkbox.checked === true) {
@@ -43,33 +58,44 @@ function setClientSettings() {
     }
   })
   cookie_dictionary['engines'] = engines
+
+  // Set the expiration date for the cookie to 1 year from the current date
   let expiration_date = new Date()
   expiration_date.setFullYear(expiration_date.getFullYear() + 1)
+
+  // Save the cookie to the user's machine
   document.cookie = `appCookie=${JSON.stringify(
     cookie_dictionary
   )}; expires=${expiration_date.toUTCString()}`
 
+  // Display a success message to the user
   document.querySelector('.message').innerText =
     '✅ The settings have been saved sucessfully!!'
 
+  // Clear the success message after 10 seconds
   setTimeout(() => {
     document.querySelector('.message').innerText = ''
   }, 10000)
 }
 
-// This functions gets the saved cookies if it is present on the user's machine If it 
+/**
-// is available then it is parsed and converted to an object which is then used to 
+ * This functions gets the saved cookies if it is present on the user's machine If it 
-// retrieve the preferences that the user had selected previously and is then loaded in the 
+ * is available then it is parsed and converted to an object which is then used to 
-// website otherwise the function does nothing and the default server side settings are loaded.
+ * retrieve the preferences that the user had selected previously and is then loaded in the 
+ * website otherwise the function does nothing and the default server side settings are loaded.
+ */
 function getClientSettings() {
+  // Get the appCookie from the user's machine
   let cookie = decodeURIComponent(document.cookie)
 
+  // If the cookie is not empty, parse it and use it to set the user's preferences
   if (cookie !== '') {
     let cookie_value = decodeURIComponent(document.cookie)
       .split(';')
       .map((item) => item.split('='))
       .reduce((acc, [_, v]) => (acc = JSON.parse(v)) && acc, {})
 
+    // Loop through all link tags and update their href values to match the user's preferences
     let links = Array.from(document.querySelectorAll('link')).forEach(
       (item) => {
         if (item.href.includes('static/themes')) {