diff --git a/app.ts b/app.ts
new file mode 100644
index 00000000..39cf078e
--- /dev/null
+++ b/app.ts
@@ -0,0 +1,354 @@
+/// <reference path="./interfaces/has-format-method.ts" />
+/// <reference path="./classes/table-heading-string.ts" />
+/// <reference path="./classes/render-table-headings.ts" />
+/// <reference path="./classes/render-table-rows.ts" />
+/// <reference path="./classes/get-column-headings.ts" />
+
+// Global variable
+let timeOut: ReturnType<typeof setTimeout>;
+
+/**
+   * This event executes two funtions immediately after the page loads
+   * @function HFM.getColumnHeadings This is a function that gets the column headings from the back-end
+   * @function getRecordCount() This is a function that gets the number of records in the back-end then runs a function to create the initial page
+*/
+window.onload = () => {
+  HFM.getColumnsHeadings();
+  getRecordCount();
+};
+
+/**
+   * This event listens for the resizing of the window
+   * @function clearTimeout This function clears the setTimeout global variable
+   * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords
+   * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type
+   * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID and is used as the first parameter of getRecords function
+   * @param toIDElement This parameter holds the HTML paragraph element with ID #toID and is used as the second parameter of getRecords function
+   * @function getRecords This function is used to get all the records withing the ID parameters specified
+*/
+window.addEventListener("resize", () => {
+  clearTimeout(timeOut);
+
+  let numofrecords = document.querySelector(
+    "#numofrecords"
+  ) as HTMLParagraphElement;
+  let totalNumofRecords = Number(numofrecords.innerHTML) - 1;
+
+  let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement;
+  let toIDElement = document.querySelector("#toID") as HTMLParagraphElement;
+  getRecords(Number(fromIDElement.innerHTML), Number(toIDElement.innerHTML), totalNumofRecords);
+});
+
+/**
+   * This event listens for a click on the left arrow
+   * @function clearTimeout This function clears the setTimeout global variable
+   * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords
+   * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type
+   * @param numOfRows This parameter holds the value of the total number of rows required on a page
+   * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID and is used as the first parameter of getRecords function
+   * @param toIDElement This parameter holds the HTML paragraph element with ID #toID and is used as the second parameter of getRecords function
+   * @param fromID This parameter holds the value in fromIDElement parameter as a type Number
+   * @param toID This parameter holds the value in toIDElement parameter as a type Number
+   * @function getRecords This function is used to get all the records withing the ID parameters specified
+*/
+$("#leftarrow").on("click", () => {
+  clearTimeout(timeOut);
+
+  let numofrecords = document.querySelector(
+    "#numofrecords"
+  ) as HTMLParagraphElement;
+  let totalNumofRecords = Number(numofrecords.innerHTML) - 1;
+  let numOfRows = getNumOfRows();
+
+  let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement;
+  let toIDElement = document.querySelector("#toID") as HTMLParagraphElement;
+  let fromID = Number(fromIDElement.innerHTML);
+  let toID = Number(toIDElement.innerHTML);
+
+  if ((fromID < numOfRows && fromID > 0) || fromID === 0) {
+    fromID = 0;
+    toID = numOfRows - 1;
+  } else {
+    fromID = fromID - (numOfRows - 1);
+    toID = toID - (numOfRows - 1);
+  }
+
+  getRecords(fromID, toID, totalNumofRecords);
+});
+
+/**
+   * This event listens for a click on the right arrow
+   * @function clearTimeout This function clears the setTimeout global variable
+   * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords
+   * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type
+   * @param numOfRows This parameter holds the value of the total number of rows required on a page
+   * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID and is used as the first parameter of getRecords function
+   * @param toIDElement This parameter holds the HTML paragraph element with ID #toID and is used as the second parameter of getRecords function
+   * @param fromID This parameter holds the value in fromIDElement parameter as a type Number
+   * @param toID This parameter holds the value in toIDElement parameter as a type Number
+   * @function getRecords This function is used to get all the records withing the ID parameters specified
+*/
+$("#rightarrow").on("click", () => {
+  clearTimeout(timeOut);
+
+  let numofrecords = document.querySelector(
+    "#numofrecords"
+  ) as HTMLParagraphElement;
+  let totalNumofRecords = Number(numofrecords.innerHTML) - 1;
+  let numOfRows = getNumOfRows();
+
+  let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement;
+  let toIDElement = document.querySelector("#toID") as HTMLParagraphElement;
+  let fromID = Number(fromIDElement.innerHTML);
+  let toID = Number(toIDElement.innerHTML);
+
+  if (
+    (fromID > totalNumofRecords - (numOfRows - 1) * 2 &&
+      fromID < totalNumofRecords) ||
+    toID === totalNumofRecords
+  ) {
+    fromID = totalNumofRecords - (numOfRows - 1);
+    toID = totalNumofRecords;
+  } else {
+    fromID = fromID + (numOfRows - 1);
+    toID = toID + (numOfRows - 1);
+  }
+
+  getRecords(fromID, toID, totalNumofRecords);
+});
+
+/**
+   * This event listens for a click on the submit button in the form
+   * @function clearTimeout This function clears the setTimeout global variable
+   * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords
+   * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type
+   * @param numOfRows This parameter holds the value of the total number of rows required on a page
+   * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID
+   * @param toIDElement This parameter holds the HTML paragraph element with ID #toID
+   * @param fromID This parameter holds the value in fromIDElement parameter as a type Number and is used as the first parameter of getRecords function
+   * @param toID This parameter holds the value in toIDElement parameter as a type Number and is used as the second parameter of getRecords function
+   * @param startFromIDElement This parameter holds the HTML paragraph element with ID #startFromIDElement
+   * @param startFrom This parameter holds the value in startFromIDElement parameter as a type Number and used to set the starting ID for getting list of records
+   * @function getRecords This function is used to get all the records withing the ID parameters specified
+*/
+$("#submit").on("click", () => {
+  clearTimeout(timeOut);
+
+  let numofrecords = document.querySelector(
+    "#numofrecords"
+  ) as HTMLParagraphElement;
+  let totalNumofRecords = Number(numofrecords.innerHTML) - 1;
+  let numOfRows = getNumOfRows();
+
+  let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement;
+  let toIDElement = document.querySelector("#toID") as HTMLParagraphElement;
+  let fromID = Number(fromIDElement.innerHTML);
+  let toID = Number(toIDElement.innerHTML);
+
+  let startFromIDElement = document.querySelector("#startfrom"
+) as HTMLInputElement;
+  let startFrom = startFromIDElement.valueAsNumber;
+
+  if (totalNumofRecords <= numOfRows) {
+    alert("This page shows all the records available");
+    return;
+  } else {
+    if (startFrom < 0 || startFrom > totalNumofRecords - (numOfRows - 1)) {
+      alert(
+        "The acceptable range is between 0 and " +
+          (totalNumofRecords - (numOfRows - 1))
+      );
+      return;
+    } else if (isNaN(startFrom)) {
+      alert("You have not set a value to submit.");
+      return;
+    }
+  }
+
+  fromID = startFrom;
+  toID = fromID + (numOfRows - 1);
+
+  getRecords(fromID, toID, totalNumofRecords);
+});
+
+/**
+   * This event listens for a click on the 'Go to Start' button to go to the beginning of the data-set
+   * @function clearTimeout This function clears the setTimeout global variable
+   * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords
+   * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type
+   * @param numOfRows This parameter holds the value of the total number of rows required on a page
+   * @param fromID This parameter holds the value 0 and is used as the first parameter of getRecords function
+   * @param toID This parameter holds the value of numOfRows and is used as the second parameter of getRecords function
+   * @function getRecords This function is used to get all the records withing the ID parameters specified
+*/
+$("#gotostart").on("click", () => {
+  clearTimeout(timeOut);
+
+  let numofrecords = document.querySelector(
+    "#numofrecords"
+  ) as HTMLParagraphElement;
+  let totalNumofRecords = Number(numofrecords.innerHTML) - 1;
+  let numOfRows = getNumOfRows();
+
+  let fromID = 0;
+  let toID = numOfRows;
+
+  getRecords(fromID, toID, totalNumofRecords);
+});
+
+/**
+   * This event listens for a click on the 'Go to End' button to go to the end of the data-set
+   * @function clearTimeout This function clears the setTimeout global variable
+   * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords
+   * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type
+   * @param numOfRows This parameter holds the value of the total number of rows required on a page
+   * @param fromID This parameter holds the value ID that starts the last page of the dataset and is used as the first parameter of getRecords function
+   * @param toID This parameter holds the value of totalNumofRecords and is used as the second parameter of getRecords function
+   * @function getRecords This function is used to get all the records withing the ID parameters specified
+*/
+$("#gotoend").on("click", () => {
+  clearTimeout(timeOut);
+
+  let numofrecords = document.querySelector(
+    "#numofrecords"
+  ) as HTMLParagraphElement;
+  let totalNumofRecords = Number(numofrecords.innerHTML) - 1;
+  let numOfRows = getNumOfRows();
+
+  let fromID = totalNumofRecords - (numOfRows - 1);
+  let toID = totalNumofRecords;
+
+  getRecords(fromID, toID, totalNumofRecords);
+});
+
+/**
+   * This function is used to create the initial page of the data
+   * @function clearTimeout This function clears the setTimeout global variable
+   * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID
+   * @param toIDElement This parameter holds the HTML paragraph element with ID #toID
+   * @param fromID This parameter holds the value in fromIDElement parameter as a type Number and is used as the first parameter of getRecords function
+   * @param toID This parameter holds the value in toIDElement parameter as a type Number and is used as the second parameter of getRecords function
+   * @param numOfRows This parameter holds the value of the total number of rows required on a page and is the first parameter in the createInitialPage function
+   * @param totalNumofRecords This parameter is the total number of records in the back-end and is the second parameter in the createInitialPage function
+   * @function getRecords This function is used to get all the records withing the ID parameters specified
+*/
+function createInitialPage(numOfRows: number, totalNumofRecords: number) {
+  clearTimeout(timeOut);
+
+  let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement;
+  let toIDElement = document.querySelector("#toID") as HTMLParagraphElement;
+
+  let fromID = Number(fromIDElement.innerHTML);
+  let toID = Number(toIDElement.innerHTML);
+
+  if (totalNumofRecords <= numOfRows) {
+    fromID = 0;
+    toID = totalNumofRecords;
+  } else if (fromID > totalNumofRecords - (numOfRows - 1)) {
+    fromID = totalNumofRecords - (numOfRows - 1);
+    toID = fromID + (numOfRows - 1);
+  } else {
+    fromID = fromID;
+    toID = fromID + (numOfRows - 1);
+  }
+
+  fromIDElement.innerHTML = fromID.toString();
+  toIDElement.innerHTML = toID.toString();
+
+  getRecords(fromID, toID, totalNumofRecords);
+}
+
+/**
+   * This function is used to return the number of rows required to fill the window
+   * @return This returns the calculated number of rows required on the current window size
+*/
+function getNumOfRows() {
+  return Math.round(window.innerHeight / 33);
+}
+
+/**
+   * This function is used to get the records to fill the window and present them in the browser
+   * @param numOfRows This parameter holds the value of the total number of rows required on a page and is the first parameter in the getRecords function
+   * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID
+   * @param toIDElement This parameter holds the HTML paragraph element with ID #toID
+   * @param fromID This parameter holds the value in fromIDElement parameter as a type Number and is used as the first parameter of clickTimeout function
+   * @param toID This parameter holds the value in toIDElement parameter as a type Number and is used as the second parameter of clickTimeout function
+   * @param totalNumofRecords This parameter is the total number of records in the back-end and is the second parameter in the getRecords function
+   * @function clickTimeout This function creates a setTimeout which collects data from the back-end and presents it in the front-end
+*/
+function getRecords(fromID: number, toID: number, totalNumofRecords: number) {
+  let numOfRows = getNumOfRows();
+  let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement;
+  let toIDElement = document.querySelector("#toID") as HTMLParagraphElement;
+
+  if (totalNumofRecords <= numOfRows) {
+    fromID = 0;
+    toID = totalNumofRecords;
+  } else {
+    if (fromID > totalNumofRecords - (numOfRows - 1)) {
+      fromID = totalNumofRecords - (numOfRows - 1);
+      toID = fromID + (numOfRows - 1);
+    } else {
+      fromID = fromID;
+      toID = fromID + (numOfRows - 1);
+    }
+  }
+
+  fromIDElement.innerHTML = fromID.toString();
+  toIDElement.innerHTML = toID.toString();
+
+  if (fromID != 1 || toID != totalNumofRecords) {
+    clearTimeout(timeOut);
+  }
+
+  clickTimeout(fromID, toID);
+}
+
+/**
+   * This function is used to get the total number of records in the back-end and to create the initial page of the data-set
+   * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords
+   * @function getNumOfRows This function gets the number of rows required on the current window and is the first parameter in the createInitial Page function
+   * @param totalNumofRecords This parameter is the total number of records in the back-end and is the second parameter in the createInitialPage function
+   * @function createInitialPage This function creates a setTimeout which collects data from the back-end and presents it in the front-end
+*/
+function getRecordCount() {
+  fetch("/recordCount")
+    .then((res) => res.text())
+    .then((value) => {
+      let numofrecords = document.querySelector(
+        "#numofrecords"
+      ) as HTMLParagraphElement;
+      numofrecords.innerHTML = value;
+      let totalNumofRecords = Number(value) - 1;
+      createInitialPage(getNumOfRows(), totalNumofRecords);
+    })
+    .catch((err) => console.log(err));
+}
+
+/**
+   * This function creates the setTimeout for fetching the records from the back-end and renders the data to the front-end
+   * @param timeOut This parameter holds the setTimeout to be created and is a global variable
+   * @param startfrom This parameter holds the HTML input element at ID #startfrom in the form
+   * @param fromID This parameter is the start ID value of the data to be fetched and is the first parameter of the clickTimeout function 
+   * @param toID This parameter is the end ID value of the data to be fetched and is the second parameter of the clickTimeout function 
+   * @param emptyTable This parameter holds the HTML DIV element with ID #records and is used to clear the records table when fetching new records
+   * @method HFM.RenderTableRows is a method of type interface that renders the records to the HTML DOM 
+   * @return This returns the timeout with the records to be fetched 
+*/
+function clickTimeout(fromID: number, toID: number) {
+  timeOut = setTimeout(() => {
+    let startfrom = document.querySelector("#startfrom") as HTMLInputElement;
+    startfrom.value = "";
+
+    fetch("/records?from=" + fromID + "&to=" + toID)
+      .then((res) => res.text())
+      .then((recordsStr) => {
+        let emptyTable = document.querySelector("#records") as HTMLDivElement;
+        emptyTable.innerHTML = "";
+
+        new HFM.RenderTableRows(recordsStr);
+      })
+      .catch((err) => console.log(err));
+  }, 200);
+  return timeOut;
+}
diff --git a/classes/get-column-headings.js b/classes/get-column-headings.js
new file mode 100644
index 00000000..d2790bd7
--- /dev/null
+++ b/classes/get-column-headings.js
@@ -0,0 +1,20 @@
+"use strict";
+/// <reference path="../interfaces/has-format-method.ts" />
+var HFM;
+(function (HFM) {
+    /**
+       * This function is used to fetch the column headings from the back-end
+       * @param hd This parameter holds the HTML DIV element with ID #headings
+       * @param interfaceHeading This parameter is of type interface and holds the method for rendering the headings to the HTML DOM
+       * @method HFM.TableHeadingString This method is for rendering the headings to the HTML DOM
+    */
+    function getColumnsHeadings() {
+        fetch("/columns").then(function (res) { return res.text(); }).then(function (headingsStr) {
+            var hd = new HFM.RenderTableHeading(document.querySelector('#headings'));
+            var interfaceHeading = new HFM.TableHeadingString(headingsStr);
+            hd.constructTableHeadings(interfaceHeading);
+        }).catch(function (err) { return console.log(err); });
+    }
+    HFM.getColumnsHeadings = getColumnsHeadings;
+})(HFM || (HFM = {}));
+//# sourceMappingURL=get-column-headings.js.map
\ No newline at end of file
diff --git a/classes/get-column-headings.js.map b/classes/get-column-headings.js.map
new file mode 100644
index 00000000..5cdb22b7
--- /dev/null
+++ b/classes/get-column-headings.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"get-column-headings.js","sourceRoot":"","sources":["get-column-headings.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAcZ;AAdD,WAAU,GAAG;IACT;;;;;MAKE;IACF,SAAgB,kBAAkB;QAC9B,KAAK,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC,CAAC,IAAI,CAAC,UAAC,WAAW;YACvD,IAAI,EAAE,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC,CAAC;YAC3F,IAAI,gBAAgB,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;YAC/D,EAAE,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAhB,CAAgB,CAAC,CAAC;IACtC,CAAC;IANe,sBAAkB,qBAMjC,CAAA;AACL,CAAC,EAdS,GAAG,KAAH,GAAG,QAcZ"}
\ No newline at end of file
diff --git a/classes/get-column-headings.ts b/classes/get-column-headings.ts
new file mode 100644
index 00000000..60c84bad
--- /dev/null
+++ b/classes/get-column-headings.ts
@@ -0,0 +1,17 @@
+/// <reference path="../interfaces/has-format-method.ts" />
+
+namespace HFM {
+    /**
+       * This function is used to fetch the column headings from the back-end
+       * @param hd This parameter holds the HTML DIV element with ID #headings
+       * @param interfaceHeading This parameter is of type interface and holds the method for rendering the headings to the HTML DOM
+       * @method HFM.TableHeadingString This method is for rendering the headings to the HTML DOM
+    */
+    export function getColumnsHeadings() {
+        fetch("/columns").then(res => res.text()).then((headingsStr) => {
+            let hd = new HFM.RenderTableHeading(document.querySelector('#headings') as HTMLDivElement);
+            let interfaceHeading = new HFM.TableHeadingString(headingsStr);		
+            hd.constructTableHeadings(interfaceHeading);	
+        }).catch(err => console.log(err));
+    }
+}
\ No newline at end of file
diff --git a/classes/render-table-headings.js b/classes/render-table-headings.js
new file mode 100644
index 00000000..1275138d
--- /dev/null
+++ b/classes/render-table-headings.js
@@ -0,0 +1,24 @@
+"use strict";
+/// <reference path="../interfaces/has-format-method.ts" />
+var HFM;
+(function (HFM) {
+    /**
+       * This class is used to inject the created html string containing the headings into the DOM
+       * @param div This parameter holds the created div element which contaings the headings html string to be injected into the HTML DOM
+    */
+    var RenderTableHeading = /** @class */ (function () {
+        function RenderTableHeading(container) {
+            this.container = container;
+        }
+        RenderTableHeading.prototype.constructTableHeadings = function (hd) {
+            var div = document.createElement('div');
+            div.innerHTML = hd.internalFormat();
+            div.className = "tablecell";
+            div.style.gridTemplateColumns = "repeat(" + hd.arrayLength() + ", 1fr)";
+            this.container.append(div);
+        };
+        return RenderTableHeading;
+    }());
+    HFM.RenderTableHeading = RenderTableHeading;
+})(HFM || (HFM = {}));
+//# sourceMappingURL=render-table-headings.js.map
\ No newline at end of file
diff --git a/classes/render-table-headings.js.map b/classes/render-table-headings.js.map
new file mode 100644
index 00000000..2e6d1dc0
--- /dev/null
+++ b/classes/render-table-headings.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"render-table-headings.js","sourceRoot":"","sources":["render-table-headings.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAiBZ;AAjBD,WAAU,GAAG;IACT;;;MAGE;IACF;QACI,4BAAsB,SAAyB;YAAzB,cAAS,GAAT,SAAS,CAAgB;QAAG,CAAC;QAEnD,mDAAsB,GAAtB,UAAuB,EAAmB;YACtC,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC;YACpC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,EAAE,CAAC,WAAW,EAAE,GAAC,QAAQ,CAAC;YAEpE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC/B,CAAC;QACL,yBAAC;IAAD,CAAC,AAXD,IAWC;IAXY,sBAAkB,qBAW9B,CAAA;AACL,CAAC,EAjBS,GAAG,KAAH,GAAG,QAiBZ"}
\ No newline at end of file
diff --git a/classes/render-table-headings.ts b/classes/render-table-headings.ts
new file mode 100644
index 00000000..61d8edef
--- /dev/null
+++ b/classes/render-table-headings.ts
@@ -0,0 +1,20 @@
+/// <reference path="../interfaces/has-format-method.ts" />
+
+namespace HFM {
+    /**
+       * This class is used to inject the created html string containing the headings into the DOM 
+       * @param div This parameter holds the created div element which contaings the headings html string to be injected into the HTML DOM
+    */
+    export class RenderTableHeading {
+        constructor(  private container: HTMLDivElement) {}
+        
+        constructTableHeadings(hd: HasFormatMethod) {
+            let div = document.createElement('div');
+            div.innerHTML = hd.internalFormat();
+            div.className = "tablecell";
+            div.style.gridTemplateColumns = "repeat("+hd.arrayLength()+", 1fr)";
+
+            this.container.append(div);
+        }
+    }
+}
\ No newline at end of file
diff --git a/classes/render-table-rows.js b/classes/render-table-rows.js
new file mode 100644
index 00000000..643646df
--- /dev/null
+++ b/classes/render-table-rows.js
@@ -0,0 +1,54 @@
+"use strict";
+/// <reference path="../interfaces/has-format-method.ts" />
+var HFM;
+(function (HFM) {
+    /**
+       * This class is used to create and render the html string containing the rows of records into the DOM
+       * @param returnStr This parameter holds formatted html string containing the rows of records to be injected into the DOM
+       * @param arrLength This parameter holds length of the array containing the rows of the records
+       * @param records This parameter holds the HTML DIV element with the ID #records
+       * @param navigation This parameter holds the HTML DIV element with the ID #navigation
+       * @param myArr This parameter is the array of the parsed string of records fetched from the back-end
+       * @param headings This parameter holds the HTML DIV element with the ID #headings and is used to edit the style of the headings
+       * @param div This parameter is the created div holding the html rows to be injected into the HTML DOM
+       * @function arrayLength This function returns the length of the array of rows to be rendered. This length is used in styling the grid
+       * @function internalFormat This function returns the formatted html string containing all the rows of records
+    */
+    var RenderTableRows = /** @class */ (function () {
+        function RenderTableRows(recordsStr) {
+            this.returnStr = "";
+            this.arrLength = 0;
+            var records = document.querySelector('#records');
+            var navigation = document.querySelector('#navigation');
+            var myArr = JSON.parse(recordsStr);
+            records.style.display = "grid";
+            records.style.gridTemplateRows = "repeat(auto-fill, " + (100 / (myArr.length + 2)) + "%)";
+            records.style.height = "100%";
+            navigation.style.height = (100 / (myArr.length + 2)) + "%";
+            var headings = document.querySelector('#headings');
+            headings.style.height = 100 / (myArr.length + 2) + "%";
+            for (var i = 0; i < myArr.length; i++) {
+                for (var j = 0; j < myArr[i].length; j++) {
+                    this.arrLength = myArr[i].length;
+                    this.returnStr +=
+                        "<div><p>" + myArr[i][j] + "</p></div>";
+                }
+                var div = document.createElement('div');
+                div.innerHTML = this.returnStr;
+                div.className = "tablecell";
+                div.style.gridTemplateColumns = "repeat(" + this.arrLength + ", 1fr)";
+                records.append(div);
+                this.returnStr = "";
+            }
+        }
+        RenderTableRows.prototype.arrayLength = function () {
+            return this.arrLength;
+        };
+        RenderTableRows.prototype.internalFormat = function () {
+            return this.returnStr;
+        };
+        return RenderTableRows;
+    }());
+    HFM.RenderTableRows = RenderTableRows;
+})(HFM || (HFM = {}));
+//# sourceMappingURL=render-table-rows.js.map
\ No newline at end of file
diff --git a/classes/render-table-rows.js.map b/classes/render-table-rows.js.map
new file mode 100644
index 00000000..c5c939e9
--- /dev/null
+++ b/classes/render-table-rows.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"render-table-rows.js","sourceRoot":"","sources":["render-table-rows.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAqDZ;AArDD,WAAU,GAAG;IACT;;;;;;;;;;;MAWE;IACF;QAII,yBAAa,UAAkB;YAHvB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;YACnE,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;YACzE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAEnC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,GAAC,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC;YAClF,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YACrD,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC;YACrE,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YAEjD,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAC5B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;oBAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;oBACjC,IAAI,CAAC,SAAS;wBACV,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;iBAC3C;gBAED,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;gBAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;gBAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;gBAClE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACpB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;aACvB;QACL,CAAC;QAED,qCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,wCAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,sBAAC;IAAD,CAAC,AAvCD,IAuCC;IAvCY,mBAAe,kBAuC3B,CAAA;AACL,CAAC,EArDS,GAAG,KAAH,GAAG,QAqDZ"}
\ No newline at end of file
diff --git a/classes/render-table-rows.ts b/classes/render-table-rows.ts
new file mode 100644
index 00000000..a8172f1b
--- /dev/null
+++ b/classes/render-table-rows.ts
@@ -0,0 +1,56 @@
+/// <reference path="../interfaces/has-format-method.ts" />
+
+namespace HFM {
+    /**
+       * This class is used to create and render the html string containing the rows of records into the DOM
+       * @param returnStr This parameter holds formatted html string containing the rows of records to be injected into the DOM
+       * @param arrLength This parameter holds length of the array containing the rows of the records
+       * @param records This parameter holds the HTML DIV element with the ID #records
+       * @param navigation This parameter holds the HTML DIV element with the ID #navigation
+       * @param myArr This parameter is the array of the parsed string of records fetched from the back-end
+       * @param headings This parameter holds the HTML DIV element with the ID #headings and is used to edit the style of the headings
+       * @param div This parameter is the created div holding the html rows to be injected into the HTML DOM
+       * @function arrayLength This function returns the length of the array of rows to be rendered. This length is used in styling the grid
+       * @function internalFormat This function returns the formatted html string containing all the rows of records
+    */
+    export class RenderTableRows implements HasFormatMethod {
+        private returnStr = "";
+        private arrLength = 0;
+        
+        constructor( recordsStr: string ){
+            let records = document.querySelector('#records') as HTMLDivElement;			
+            let navigation = document.querySelector('#navigation') as HTMLDivElement;	
+            let myArr = JSON.parse(recordsStr);											
+
+            records.style.display = "grid";
+            records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)";
+            records.style.height = "100%";
+            navigation.style.height = (100/(myArr.length+2))+"%";
+            let headings = document.querySelector('#headings') as HTMLDivElement;
+            headings.style.height = 100/(myArr.length+2)+"%";
+            
+            for(let i=0;i<myArr.length;i++) {
+                for(let j=0;j<myArr[i].length;j++) {
+                    this.arrLength = myArr[i].length;
+                    this.returnStr += 
+                        "<div><p>"+myArr[i][j]+"</p></div>";
+                }
+
+                let div = document.createElement('div');
+                div.innerHTML = this.returnStr;
+                div.className = "tablecell";
+                div.style.gridTemplateColumns = "repeat("+this.arrLength+", 1fr)";
+                records.append(div);
+                this.returnStr = "";
+            }
+        }
+
+        arrayLength() {
+            return this.arrLength;
+        }
+
+        internalFormat() {
+            return this.returnStr;
+        }
+    }
+}
\ No newline at end of file
diff --git a/classes/table-heading-string.js b/classes/table-heading-string.js
new file mode 100644
index 00000000..7e480585
--- /dev/null
+++ b/classes/table-heading-string.js
@@ -0,0 +1,34 @@
+"use strict";
+/// <reference path="../interfaces/has-format-method.ts" />
+var HFM;
+(function (HFM) {
+    /**
+       * This class is used to create the html string containing the column headings of the grid
+       * @param returnStr This parameter holds formatted html string containing the column headings to be injected into the DOM
+       * @param arrLength This parameter holds length of the array containing the column headings
+       * @param myArr This parameter is the array of the parsed string of headings fetched from the back-end
+       * @function arrayLength This function returns the length of the array of headings to be rendered
+       * @function internalFormat This function returns the formatted html string containing all the column headings
+    */
+    var TableHeadingString = /** @class */ (function () {
+        function TableHeadingString(headingsStr) {
+            this.returnStr = "";
+            this.arrLength = 0;
+            var myArr = JSON.parse(headingsStr);
+            this.arrLength = myArr.length;
+            for (var i = 0; i < myArr.length; i++) {
+                this.returnStr +=
+                    "<div><p><b>" + myArr[i] + "</b></p></div>";
+            }
+        }
+        TableHeadingString.prototype.arrayLength = function () {
+            return this.arrLength;
+        };
+        TableHeadingString.prototype.internalFormat = function () {
+            return this.returnStr;
+        };
+        return TableHeadingString;
+    }());
+    HFM.TableHeadingString = TableHeadingString;
+})(HFM || (HFM = {}));
+//# sourceMappingURL=table-heading-string.js.map
\ No newline at end of file
diff --git a/classes/table-heading-string.js.map b/classes/table-heading-string.js.map
new file mode 100644
index 00000000..b971c57b
--- /dev/null
+++ b/classes/table-heading-string.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"table-heading-string.js","sourceRoot":"","sources":["table-heading-string.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CA+BZ;AA/BD,WAAU,GAAG;IACT;;;;;;;MAOE;IACF;QAII,4BAAa,WAAmB;YAHxB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE9B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;gBAC3B,IAAI,CAAC,SAAS;oBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;aAC3C;QACL,CAAC;QAED,wCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,2CAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,yBAAC;IAAD,CAAC,AArBD,IAqBC;IArBY,sBAAkB,qBAqB9B,CAAA;AACL,CAAC,EA/BS,GAAG,KAAH,GAAG,QA+BZ"}
\ No newline at end of file
diff --git a/classes/table-heading-string.ts b/classes/table-heading-string.ts
new file mode 100644
index 00000000..eb0d4db4
--- /dev/null
+++ b/classes/table-heading-string.ts
@@ -0,0 +1,34 @@
+/// <reference path="../interfaces/has-format-method.ts" />
+
+namespace HFM {
+    /**
+       * This class is used to create the html string containing the column headings of the grid
+       * @param returnStr This parameter holds formatted html string containing the column headings to be injected into the DOM
+       * @param arrLength This parameter holds length of the array containing the column headings
+       * @param myArr This parameter is the array of the parsed string of headings fetched from the back-end
+       * @function arrayLength This function returns the length of the array of headings to be rendered
+       * @function internalFormat This function returns the formatted html string containing all the column headings
+    */
+    export class TableHeadingString implements HasFormatMethod {
+        private returnStr = "";
+        private arrLength = 0;
+
+        constructor( headingsStr: string){
+            let myArr = JSON.parse(headingsStr);
+            this.arrLength = myArr.length;
+
+            for(let i=0;i<myArr.length;i++){
+                this.returnStr += 
+                "<div><p><b>"+myArr[i]+"</b></p></div>";
+            }
+        }
+
+        arrayLength() {
+            return this.arrLength;
+        }
+        
+        internalFormat() {
+            return this.returnStr;
+        }
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index add5e736..c2ff9cb8 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,54 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<title>JS Onboard Project</title>
-	<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
-</head>
+	<head>
+		<title>JS Onboard Project</title>
+		<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
+		<script type="module" src="app.js" defer></script>
+		<script type="text/javascript" src="interfaces/has-format-method.js"></script>
+		<script type="text/javascript" src="classes/render-table-headings.js"></script>
+		<script type="text/javascript" src="classes/table-heading-string.js"></script>
+		<script type="text/javascript" src="classes/get-column-headings.js"></script>
+		<script type="text/javascript" src="classes/render-table-rows.js"></script>
+		<link rel="stylesheet" href="main.css">
+	</head>
+	<body>
+		<!-- This section contains all the navigation tools of the grid -->
+		<div id="navigation" class="navigation">
+			
+			<!-- This div contains the buttons to navigate directly to the beginning or the end of the entire data-set  -->
+			<div class="filters">
+				<button class="button" id="gotostart">Go to Start</button>
+				<button class="button" id="gotoend">Go to End</button>
+			</div>
 
-<body>
-	<p>Hello</p>
-</body>
+			<!-- This div contains the form for navigating to the specified ID in the form as the start ID of the records showing -->
+			<div id="form" class="form">
+				<label>Start from ID: </label>
+				<input type="number" pattern="^[0-9]$" class="startfrom" id="startfrom" name="startfrom" placeholder="0" autofocus />
+				<input type="submit" class="submit" id="submit" value="Submit" />
+			</div>
 
+			<!-- This div contains the section for navigating left and right pages through the data -->
+			<div class="pagination">
+				<svg id="leftarrow" class="arrow" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm3 5.753l-6.44 5.247 6.44 5.263-.678.737-7.322-6 7.335-6 .665.753z"/></svg>
+				<div id="values" class="values">
+					<p id="fromID" name="fromID"></p>
+					<p>-</p>
+					<p id="toID" name="toID"></p>
+					<p>of</p>
+					<p id="numofrecords" name="numofrecords"></p>
+				</div>
+				<svg id="rightarrow" class="arrow" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm-3 5.753l6.44 5.247-6.44 5.263.678.737 7.322-6-7.335-6-.665.753z"/></svg>
+			</div>
+		</div>
+
+		<!-- This div contains the table with the column headings and the records  -->
+		<div id="app">
+			<div id="table" class="table">
+				<div id="headings" class="headings"></div>
+				<div id="records" class="records"></div>
+			</div>
+		</div>
+	</body>
 </html>
 
diff --git a/insomnia.json b/insomnia.json
new file mode 100644
index 00000000..a788b1ba
--- /dev/null
+++ b/insomnia.json
@@ -0,0 +1 @@
+{"_type":"export","__export_format":4,"__export_date":"2021-06-04T14:32:35.741Z","__export_source":"insomnia.desktop.app:v2021.3.0","resources":[{"_id":"req_793626d03d9a4855a0e43789b99dedce","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622726392537,"created":1622724938157,"url":"http://localhost:2050/recordCount","name":"Get total number of records","description":"","method":"GET","body":{},"parameters":[],"headers":[],"authentication":{},"metaSortKey":-1622724938157,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","parentId":null,"modified":1622724911220,"created":1622724911220,"name":"Insomnia","description":"","scope":"collection","_type":"workspace"},{"_id":"req_d2a590d8909a4c8cb4a33bbbe8cc1fb9","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622725188186,"created":1622725175632,"url":"http://localhost:2050/columns","name":"Get column names","description":"","method":"GET","body":{},"parameters":[],"headers":[],"authentication":{},"metaSortKey":-1622725175632,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_7a3c0dd6ef5a4d07979903682033220d","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622726356062,"created":1622725214424,"url":"http://localhost:2050/records?from=1&to=5","name":"Get records","description":"","method":"GET","body":{},"parameters":[],"headers":[],"authentication":{},"metaSortKey":-1622725214424,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_aa92d9a7c25b49f78db09c5c9c2b24ea","parentId":"fld_df4ebe53e5744811b044c162781f7e14","modified":1617131691128,"created":1612883491096,"url":"http://localhost:8080/api/v1/profiles/","name":"Profile","description":"","method":"GET","body":{},"parameters":[],"headers":[{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_8873d172580d401eb8c63fb01669423c"}],"authentication":{},"metaSortKey":-1613153032280.5,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_df4ebe53e5744811b044c162781f7e14","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1617132156400,"created":1617131675575,"name":"profile","description":"","environment":{},"environmentPropertyOrder":null,"metaSortKey":-1617132110767,"_type":"request_group"},{"_id":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","parentId":null,"modified":1612883376390,"created":1612883376390,"name":"TallyClerk","description":"","scope":"collection","_type":"workspace"},{"_id":"req_7af60eca965d49e980ae84080f98b2ed","parentId":"fld_df4ebe53e5744811b044c162781f7e14","modified":1617131682096,"created":1612883620409,"url":"{{ _.base_url }}/profiles","name":"Profile","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"firstname","value":"John","type":"text","id":"pair_ee13f6de52cf45ccb8e8fe4e41e7425f"},{"name":"lastname","value":"Penrose","type":"text","id":"pair_c1bc59a752f242d38ae960223c0134d4"},{"name":"email","value":"johnpenrose@gmail.com","type":"text","id":"pair_a65954cc612041d5b1f3d7dcc18efa3b"},{"name":"mobile","value":"072 123 4567","type":"text","id":"pair_eb07b9faa96f4a6aafa7e0bfc0ab1ca7"},{"name":"address","value":"Klein Welgemoed II, Protea Valley, Cape Town, 7530","type":"text","id":"pair_cde454fcef734e5f836e5e77567e2458"},{"name":"password","value":"asdfASDF1234!@#$","type":"text","id":"pair_7488a2f8c72d4087917e4ba15d0c6cd5"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613153032293,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_35f8f6596bbe4793966c3cc2ac845ef9","parentId":"fld_df4ebe53e5744811b044c162781f7e14","modified":1617131686764,"created":1615985345425,"url":"{{ _.base_url }}/sessions","name":"sessions","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"email","value":"johnpenrose@gmail.com","type":"text","id":"pair_a65954cc612041d5b1f3d7dcc18efa3b"},{"name":"password","value":"asdfASDF1234!@#$","type":"text","id":"pair_7488a2f8c72d4087917e4ba15d0c6cd5"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_e6ff682203a549dd82eb97192a60a9f6"}],"authentication":{},"metaSortKey":-1613153032268,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_894143e66e294d0d82cc96397a9947de","parentId":"fld_df4ebe53e5744811b044c162781f7e14","modified":1617131688755,"created":1615985528266,"url":"{{ _.base_url }}/sessions","name":"sessions","description":"","method":"DELETE","body":{},"parameters":[],"headers":[{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613153032255.5,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_c342846e1fc34004b62751a3de24e333","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1620136595180,"created":1612892982121,"url":"{{ _.base_url }}/companies","name":"company","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"email","value":"anderson@abc.co.za","description":"","id":"pair_02cacba1c6ea4790b3d896805286e9ba"},{"name":"companyname","value":"Ghi Roofing","description":"","id":"pair_e8673b879ccc4e4a85bd624939326bc6"},{"name":"companyadd","value":"Louwtjie Rothman St, Goodwood, Cape Town, 7463","description":"","id":"pair_ff0ad8df6216425cb976e7c2cc4bd5d8"},{"name":"enterprisenumber","value":"1234/123456/12","description":"","id":"pair_cc83928534ee43ed9de4ed1d44941ce3"},{"name":"phonenumber","value":"0123456789","description":"","id":"pair_ae8b5eac585549768f3da304905ecb38"},{"name":"category","value":"roofing","description":"","id":"pair_5ce3448980db4b11804b21997e483f65"},{"name":"description","value":"We do roofing","description":"","id":"pair_79f1edaf94bf4a7aacae422f775618d7"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613152788604,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_73187212bf01472d86f006e8e0e92024","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1617131742142,"created":1617131737419,"name":"company","description":"","environment":{},"environmentPropertyOrder":null,"metaSortKey":-1612972408111.5,"_type":"request_group"},{"_id":"req_dcc36b4ed987467aa51f24571ee0fd0b","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1620145367073,"created":1613155044093,"url":"{{ _.base_url }}/companies/{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}/items","name":"costing 1","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"item_uc","value":"{% response 'body', 'req_ffc87b2c8015437cb7c56902be791211', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_86a270a176a94703a51ea95794d18978"},{"name":"cost","value":"100","description":"","id":"pair_a991e7bfc4394e85b6d15510c578ef6c"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_575fec52d20b4b2fa555f914a14e2f18"}],"authentication":{},"metaSortKey":-1613152788504,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_d7c3e22fc1d042cdb2d1397856fc178e","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1617131748432,"created":1615974394919,"url":"{{ _.base_url }}/companies","name":"company","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613152788554,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_ee8894df86604108aea3c054ace8e15d","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1617133205212,"created":1617132847696,"url":"{{ _.base_url }}/companies/{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}/items","name":"costing 2","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"item_uc","value":"{% response 'body', 'req_273cc72968c8460cbdd1e4b071f5c873', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_86a270a176a94703a51ea95794d18978"},{"name":"cost","value":"200","description":"","id":"pair_a991e7bfc4394e85b6d15510c578ef6c"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_575fec52d20b4b2fa555f914a14e2f18"}],"authentication":{},"metaSortKey":-1606447390003,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_8836b44527294aec868eb0b18be6f56b","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1620145394476,"created":1620145375196,"url":"{{ _.base_url }}/companies/{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}/items","name":"costing 3","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"item_uc","value":"{% response 'body', 'req_16d6ba6286604a96bf85e5da8a195a9e', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_86a270a176a94703a51ea95794d18978"},{"name":"cost","value":"200","description":"","id":"pair_a991e7bfc4394e85b6d15510c578ef6c"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_575fec52d20b4b2fa555f914a14e2f18"}],"authentication":{},"metaSortKey":-1603094690752.5,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_868e4c1a40564853ac3c97decb1f74f3","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1621364008426,"created":1621363766523,"url":"{{ _.base_url }}/blockouts","name":"blockouts","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"startdate","value":"2021-01-05","description":"","id":"pair_02cacba1c6ea4790b3d896805286e9ba"},{"name":"enddate","value":"2021-01-06","description":"","id":"pair_e8673b879ccc4e4a85bd624939326bc6"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613152788579,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_4678b0ffe73443b1a2252ede31f73142","parentId":"fld_64a801672d1c42109d6f085c510c2337","modified":1617131804738,"created":1617088716700,"url":"{{ _.base_url }}/companies/{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}/items","name":"list items","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_575fec52d20b4b2fa555f914a14e2f18"}],"authentication":{},"metaSortKey":-1613153032143,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_64a801672d1c42109d6f085c510c2337","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1617131824934,"created":1617131767451,"name":"internal","description":"","environment":{},"environmentPropertyOrder":null,"metaSortKey":-1612972408061.5,"_type":"request_group"},{"_id":"req_37035a2bbf4a4a66a490c1e34420237d","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132125698,"created":1613151845982,"url":"{{ _.base_url }}/projects","name":"Project","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"name","value":"Renovation","description":"","id":"pair_d7290485aac1477287e6e75c709b7734"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_be8e5220b9ed40aa98c55cce0cd179e4"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"}],"authentication":{},"metaSortKey":-1613153032311.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_4c1d8c280ab74805921ee31d51358cbf","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1617132110717,"created":1617132110717,"name":"project","description":"","environment":{},"environmentPropertyOrder":null,"metaSortKey":-1617132110717,"_type":"request_group"},{"_id":"req_011fe5e03a574c7bbe6465817ca03d19","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1620145758014,"created":1613153391987,"url":"{{ _.base_url }}/projects/{% response 'body', 'req_37035a2bbf4a4a66a490c1e34420237d', 'b64::JC51Yw==::46b', 'never', 60 %}/companies","name":"service","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"company_uc","value":"{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_c733d6ba6233422ea98faf25e2c60f77"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_05ff60a17e0b4e1a96713d98e373d528"}],"authentication":{},"metaSortKey":-1613153032286.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_bc8d4f6d7dac4aeda705b57ab72f20e1","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132963008,"created":1613154912252,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}/costings","name":"quantity 1","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"costing_uc","value":"{% response 'body', 'req_dcc36b4ed987467aa51f24571ee0fd0b', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_444f797c4cfe4a87bd08a0c05e6de65d"},{"name":"quantity","value":"100","description":"","id":"pair_5ec0c437a1a4429aa853a9237bf40002"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_76059dd6643d4e52acdbd888a455e162"}],"authentication":{},"metaSortKey":-1613153032111.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_4fcfe457293a4cbb95540da0d7e1380c","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132138132,"created":1613913012178,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}","name":"service","description":"","method":"DELETE","body":{"mimeType":"application/x-www-form-urlencoded","params":[]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_05ff60a17e0b4e1a96713d98e373d528"}],"authentication":{},"metaSortKey":-1613153032161.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_e6d0e44f08c541dfbb2a49d44c2ba097","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132144499,"created":1614714515100,"url":"{{ _.base_url }}/quantities","name":"quantities","description":"","method":"PUT","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"quantity","value":"200","description":"","id":"pair_5ec0c437a1a4429aa853a9237bf40002"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_76059dd6643d4e52acdbd888a455e162"}],"authentication":{},"metaSortKey":-1613153032061.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_9ff82e9640814ad88573130f053506cb","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1619635081866,"created":1615307983285,"url":"{{ _.base_url }}/projects/{% response 'body', 'req_37035a2bbf4a4a66a490c1e34420237d', 'b64::JC51Yw==::46b', 'never', 60 %}/services","name":"services","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"","value":"","description":"","id":"pair_03ef03c3c6404be29f1f772202b322f1"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_05ff60a17e0b4e1a96713d98e373d528"}],"authentication":{},"metaSortKey":-1613153032211.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_ee63e195680d4baabf1af4255ef8e827","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132123912,"created":1615973596300,"url":"{{ _.base_url }}/projects","name":"Project","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"name","value":"Renovation","description":"","id":"pair_d7290485aac1477287e6e75c709b7734","disabled":true}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_be8e5220b9ed40aa98c55cce0cd179e4"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Set-Cooki","value":"","description":"","id":"pair_6490ab7a4337402ea0ffc1cac87ef49c","disabled":true}],"authentication":{},"metaSortKey":-1613153032261.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_90054ae39119457c9eef69fcfbef9b65","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132149667,"created":1617088738145,"url":"{{ _.base_url }}/companies/{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}/selecteditems","name":"list selected items","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_575fec52d20b4b2fa555f914a14e2f18"}],"authentication":{},"metaSortKey":-1613153032011.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_0108b1fd915241f989e4ef49865b93f7","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132985186,"created":1617132970826,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}/costings","name":"quantity 2","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"costing_uc","value":"{% response 'body', 'req_ee8894df86604108aea3c054ace8e15d', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_444f797c4cfe4a87bd08a0c05e6de65d"},{"name":"quantity","value":"100","description":"","id":"pair_5ec0c437a1a4429aa853a9237bf40002"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_76059dd6643d4e52acdbd888a455e162"}],"authentication":{},"metaSortKey":-1613153032086.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_39a96c75bba34428bf1c5fb27cb32511","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1621361106208,"created":1619634158996,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}?data=availability&month=Jan2021","name":"availability","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"","value":"","description":"","id":"pair_03ef03c3c6404be29f1f772202b322f1"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_05ff60a17e0b4e1a96713d98e373d528"}],"authentication":{},"metaSortKey":-1613153032202.375,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_26e1945464594235a0cbf82a43822259","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1619635097582,"created":1619635067769,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}","name":"service","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"","value":"","description":"","id":"pair_03ef03c3c6404be29f1f772202b322f1"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_05ff60a17e0b4e1a96713d98e373d528"}],"authentication":{},"metaSortKey":-1613153032207.0625,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_e0270f2f3758469c9f7724cdabc7c99a","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1620145423013,"created":1620145411974,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}/costings","name":"quantity 3","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"costing_uc","value":"{% response 'body', 'req_8836b44527294aec868eb0b18be6f56b', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_444f797c4cfe4a87bd08a0c05e6de65d"},{"name":"quantity","value":"100","description":"","id":"pair_5ec0c437a1a4429aa853a9237bf40002"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_76059dd6643d4e52acdbd888a455e162"}],"authentication":{},"metaSortKey":-1613153032074.25,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_ffc87b2c8015437cb7c56902be791211","parentId":"fld_fc89480973234853990b3954b2979fb0","modified":1617132639811,"created":1613153080089,"url":"{{ _.base_url }}/items","name":"paint ext wls gnd","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"description","value":"painting, exterior walls, ground floor","description":"","id":"pair_02cacba1c6ea4790b3d896805286e9ba"},{"name":"unit","value":"m^2","description":"","id":"pair_e8673b879ccc4e4a85bd624939326bc6"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613153032193,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_fc89480973234853990b3954b2979fb0","parentId":"fld_64a801672d1c42109d6f085c510c2337","modified":1617132591387,"created":1617132582454,"name":"items","description":"","environment":{},"environmentPropertyOrder":null,"metaSortKey":-1613153032243,"_type":"request_group"},{"_id":"req_273cc72968c8460cbdd1e4b071f5c873","parentId":"fld_fc89480973234853990b3954b2979fb0","modified":1617132667717,"created":1617132656220,"url":"{{ _.base_url }}/items","name":"paint ext wls 1st","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"description","value":"painting, exterior walls, first floor","description":"","id":"pair_02cacba1c6ea4790b3d896805286e9ba"},{"name":"unit","value":"m^2","description":"","id":"pair_e8673b879ccc4e4a85bd624939326bc6"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613153032177.375,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_16d6ba6286604a96bf85e5da8a195a9e","parentId":"fld_fc89480973234853990b3954b2979fb0","modified":1620145291684,"created":1620145274828,"url":"{{ _.base_url }}/items","name":"roof tiling","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"description","value":"roof tiling","description":"","id":"pair_02cacba1c6ea4790b3d896805286e9ba"},{"name":"unit","value":"m^2","description":"","id":"pair_e8673b879ccc4e4a85bd624939326bc6"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613153032169.5625,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"env_895e4edd2e2ad1bb8147f8ec5902b0ec78234c9d","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622724911255,"created":1622724911255,"name":"Base Environment","data":{},"dataPropertyOrder":null,"color":null,"isPrivate":false,"metaSortKey":1622724911255,"_type":"environment"},{"_id":"jar_895e4edd2e2ad1bb8147f8ec5902b0ec78234c9d","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622724911256,"created":1622724911256,"name":"Default Jar","cookies":[],"_type":"cookie_jar"},{"_id":"spc_60cc33b633cb4510b9b9e42345bcb9eb","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622724911220,"created":1622724911220,"fileName":"Insomnia","contents":"","contentType":"yaml","_type":"api_spec"},{"_id":"env_425a01f1334a4980820823391def5843","parentId":"env_895e4edd2e2ad1bb8147f8ec5902b0ec78234c9d","modified":1622817097884,"created":1622817097884,"name":"New Environment","data":{},"dataPropertyOrder":null,"color":null,"isPrivate":false,"metaSortKey":1622817097885,"_type":"environment"},{"_id":"env_1f93f4fd57afa96edc0dbcf41ebc64b0ddea7d13","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1612883376434,"created":1612883376434,"name":"Base Environment","data":{},"dataPropertyOrder":null,"color":null,"isPrivate":false,"metaSortKey":1612883376435,"_type":"environment"},{"_id":"jar_1f93f4fd57afa96edc0dbcf41ebc64b0ddea7d13","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1621364024569,"created":1612883376437,"name":"Default Jar","cookies":[{"key":"session","value":"210a826efaa0513a9fe9afacf58e6ea5cb3ce943","expires":"2021-12-04T18:53:44.000Z","domain":"localhost","path":"/","httpOnly":true,"extensions":["SameSite=Strict"],"hostOnly":true,"creation":"2021-05-04T13:30:17.172Z","lastAccessed":"2021-05-18T18:53:44.568Z","id":"4934613451701435"}],"_type":"cookie_jar"},{"_id":"spc_82f5e6a762f148fab4f6eeb08dbaa239","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1612883376394,"created":1612883376394,"fileName":"TallyClerk","contents":"","contentType":"yaml","_type":"api_spec"},{"_id":"env_2a8d522be1294fb0b749e1ccd4c4b226","parentId":"env_1f93f4fd57afa96edc0dbcf41ebc64b0ddea7d13","modified":1613912264701,"created":1612883856562,"name":"Development","data":{"base_url":"{{ _.protocol }}://{{ _.domain }}:{{ _.port }}{{ _.path }}","protocol":"http","domain":"localhost","port":"8080","path":"/api/v1","user_agent":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","project_uc":"er","service_uc":"yt","item_uc":"bg"},"dataPropertyOrder":{"&":["base_url","protocol","domain","port","path","user_agent","project_uc","service_uc","item_uc"]},"color":"#ff0000","isPrivate":false,"metaSortKey":1612883856562,"_type":"environment"}]}
\ No newline at end of file
diff --git a/interfaces/has-format-method.js b/interfaces/has-format-method.js
new file mode 100644
index 00000000..8112ba8d
--- /dev/null
+++ b/interfaces/has-format-method.js
@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=has-format-method.js.map
\ No newline at end of file
diff --git a/interfaces/has-format-method.js.map b/interfaces/has-format-method.js.map
new file mode 100644
index 00000000..95529066
--- /dev/null
+++ b/interfaces/has-format-method.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"has-format-method.js","sourceRoot":"","sources":["has-format-method.ts"],"names":[],"mappings":""}
\ No newline at end of file
diff --git a/interfaces/has-format-method.ts b/interfaces/has-format-method.ts
new file mode 100644
index 00000000..1cf66633
--- /dev/null
+++ b/interfaces/has-format-method.ts
@@ -0,0 +1,11 @@
+namespace HFM {
+    /**
+       * This interface is used to confirm the methods for rendering the headings and columns have both the arrayLength and internalFormat methods
+       * @function arrayLength This function returns the length of the array created in the methods for fetching the columns and headings
+       * @function internalFormat This function returns the formated string to be injected into the HTML DOM for the final grid
+    */
+    export interface HasFormatMethod {
+        arrayLength(): number;
+        internalFormat(): string;
+    }
+}
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 00000000..ba842641
--- /dev/null
+++ b/main.css
@@ -0,0 +1,182 @@
+html,body {
+  height: 100%;
+  background-color: black;
+  color: white;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  margin: 0px;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+body::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+body {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.navigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 4%;
+}
+
+.filters {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.filters .button {
+  font-size: 14px;
+  color: white;
+  background-color: #00b77a;
+  border-radius: 6px;
+  border-color: #00b77a;
+  margin-left: 5px;
+  height: 90%;
+  cursor: pointer;
+}
+
+.form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.form label {
+  font-size: 14px;
+}
+
+.form .startfrom {
+  color: white;
+  text-align: center;
+  width: 70px;
+  padding: 5px;
+  margin-left: 5px;
+  border-width: 0 0 thin 0;
+  outline: none;
+  background-color: black;
+}
+
+.form .submit {
+  font-size: 14px;
+  color: white;
+  background-color: #00b77a;
+  border-radius: 6px;
+  border-color: #00b77a;
+  margin-left: 5px;
+  height: 90%;
+  cursor: pointer;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.pagination svg {
+  padding-left: 10px;
+  padding-right: 10px;
+  fill: white;
+}
+
+.pagination .values {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.pagination .values p {
+  font-size: 14px;
+  padding-left: 5px;
+}
+
+.pagination .arrow {
+  cursor: pointer;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+#app .table {
+  border-style: solid;
+  border-width: thin;
+  width: 100%;
+  height: 100%;
+}
+
+#app .table .headings .tablecell {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  border-style: solid;
+  border-width: thin 0px 0px 0px;
+}
+
+#app .table .records .tablecell {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  border-style: solid;
+  border-width: thin 0px 0px 0px;
+}
+
+#app .table .headings .tablecell > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-style: solid;
+  border-width: 0 thin 0 thin;
+}
+
+#app .table .records .tablecell > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-style: solid;
+  border-width: 0 thin 0 thin;
+}
+
+#app .table .headings .tablecell > div p{
+  font-size: 10px;
+  margin: 0px;
+  padding: 0px;
+}
+
+#app .table .records .tablecell > div p{
+  font-size: 10px;
+  margin: 0px;
+  padding: 0px;
+}
+
+::-webkit-input-placeholder { /* Edge */
+  color: #d5d5d5;
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: #d5d5d5;
+}
+
+::placeholder {
+  color: #d5d5d5;
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..7d907a1e
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,101 @@
+{
+  "name": "onboard-javascript",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@types/jquery": "^3.5.5",
+        "http": "^0.0.1-security",
+        "tsc": "^2.0.3",
+        "typescript": "^4.3.4"
+      },
+      "devDependencies": {
+        "@types/node": "^15.12.1"
+      }
+    },
+    "node_modules/@types/jquery": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz",
+      "integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==",
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "15.12.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.1.tgz",
+      "integrity": "sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==",
+      "dev": true
+    },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
+    },
+    "node_modules/http": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/http/-/http-0.0.1-security.tgz",
+      "integrity": "sha512-RnDvP10Ty9FxqOtPZuxtebw1j4L/WiqNMDtuc1YMH1XQm5TgDRaR1G9u8upL6KD1bXHSp9eSXo/ED+8Q7FAr+g=="
+    },
+    "node_modules/tsc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsc/-/tsc-2.0.3.tgz",
+      "integrity": "sha512-SN+9zBUtrpUcOpaUO7GjkEHgWtf22c7FKbKCA4e858eEM7Qz86rRDpgOU2lBIDf0fLCsEg65ms899UMUIB2+Ow==",
+      "bin": {
+        "tsc": "bin/tsc"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
+      "integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    }
+  },
+  "dependencies": {
+    "@types/jquery": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz",
+      "integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==",
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
+    "@types/node": {
+      "version": "15.12.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.1.tgz",
+      "integrity": "sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==",
+      "dev": true
+    },
+    "@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
+    },
+    "http": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/http/-/http-0.0.1-security.tgz",
+      "integrity": "sha512-RnDvP10Ty9FxqOtPZuxtebw1j4L/WiqNMDtuc1YMH1XQm5TgDRaR1G9u8upL6KD1bXHSp9eSXo/ED+8Q7FAr+g=="
+    },
+    "tsc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsc/-/tsc-2.0.3.tgz",
+      "integrity": "sha512-SN+9zBUtrpUcOpaUO7GjkEHgWtf22c7FKbKCA4e858eEM7Qz86rRDpgOU2lBIDf0fLCsEg65ms899UMUIB2+Ow=="
+    },
+    "typescript": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
+      "integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..61d763fe
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "onboard-javascript",
+  "version": "1.0.0",
+  "description": "onboarding",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/geraldtivatyi/onboard-javascript.git"
+  },
+  "author": "Gerald",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/geraldtivatyi/onboard-javascript/issues"
+  },
+  "homepage": "https://github.com/geraldtivatyi/onboard-javascript#readme",
+  "dependencies": {
+    "@types/jquery": "^3.5.5",
+    "http": "^0.0.1-security",
+    "tsc": "^2.0.3",
+    "typescript": "^4.3.4"
+  },
+  "devDependencies": {
+    "@types/node": "^15.12.1"
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index dbf43618..08486fac 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,7 @@
 		"lib": [
 			"dom",
 			"es2016"
-		],
+		]
 	},
 	"include": [
 		"./**/*.ts"