✨ feat: add documentation to code

public/static/cookies.js

@@ -1,4 +1,7 @@
-// After the settings page finishes loading 
+// This function is executed when any page on the website finsihes loading and
+// this function retrieves the cookies if it is present on the user's machine. 
+// If it is available then the saved cookies is display in the cookies tab 
+// otherwise an appropriate message is displayed if it is not available.
 document.addEventListener(
   'DOMContentLoaded',
   () => {

public/static/settings.js

@@ -1,3 +1,5 @@
+// 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')
@@ -8,6 +10,8 @@ function toggleAllSelection() {
     )
 }
 
+// This function adds the functionality to sidebar buttons to only show settings 
+// related to that tab.
 function setActiveTab(current_tab) {
   document
     .querySelectorAll('.tab')
@@ -21,6 +25,8 @@ function setActiveTab(current_tab) {
     .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.
 function setClientSettings() {
   let cookie_dictionary = new Object()
   document.querySelectorAll('select').forEach((select_tag) => {
@@ -51,6 +57,10 @@ function setClientSettings() {
   }, 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 
+// 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() {
   let cookie = decodeURIComponent(document.cookie)
 

public/static/themes/simple.css

@@ -302,6 +302,7 @@ footer {
   width: 80%;
 }
 
+/* Styles for the settings page */
 .settings_container {
   display: flex;
   justify-content: space-around;
@@ -435,6 +436,7 @@ footer {
   margin: 0;
 }
 
+/* Styles for the toggle button */
 /* The switch - the box around the slider */
 .switch {
   position: relative;