From ad2404b3d088d7bbfca198946ca7cb2a31e115b3 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Fri, 11 Aug 2023 14:51:05 +0200
Subject: [PATCH 01/33] update

---
 app.ts            | 257 ++++++++++++++++++++++++++++++++++++++++++++++
 index.html        |  28 ++++-
 package-lock.json |  27 +++++
 package.json      |  27 +++++
 style.css         |  92 +++++++++++++++++
 5 files changed, 430 insertions(+), 1 deletion(-)
 create mode 100644 app.ts
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 style.css

diff --git a/app.ts b/app.ts
new file mode 100644
index 00000000..e2a965f3
--- /dev/null
+++ b/app.ts
@@ -0,0 +1,257 @@
+
+async function fetchRecordCount(): Promise<number> {
+  try {
+    const recordCount = await fetch(`http://192.168.4.133:2050/recordCount`);
+   
+    if (!recordCount.ok) {
+      throw new Error('Failed to fetch record count');
+    }
+    const data = await recordCount.json()
+    return data;
+
+  } catch (error) {
+    console.error('Error fetching the record count:', error);
+    throw error;
+  }
+
+
+
+}
+
+
+
+
+function fetchColumns(): void {
+  fetch("http://192.168.4.133:2050/columns")
+    .then((response: Response) => {
+
+      return response.json() as Promise<string[]>;
+    })
+    .then((columns: string[]) => {
+      const colArray = columns;
+      console.log(colArray);
+
+      for (let c = 0; c < colArray.length; c++) {
+        $(".head").append(`<th>${colArray[c]}</th>`);
+      }
+    })
+
+}
+
+fetchColumns();
+
+async function fetchRecords(): Promise<any[][]> {
+  try {
+  let count: number = await fetchRecordCount() - 1;
+  const response = await fetch(`http://192.168.4.133:2050/records?from=0&to=35`);
+
+      if (!response.ok) {
+        throw new Error("Sorry, there's a problem in the network");
+      }
+      const records = await response.json();
+      return records;
+  
+      
+    }catch(error) {
+      console.error("Error fetching records:", error);
+      throw error;
+    }
+  }
+  
+
+
+
+
+fetchRecords()
+
+async function displayRecords(): Promise<void> {
+try{
+  const recArray: any[][] = await fetchRecords();
+
+  for (let r = 0; r <35; r++) {
+    $("tbody").append(`<tr class="row"></tr>`);
+    const lastRow = $(".row:last"); 
+    for (let i = 0; i < recArray[r].length; i++) {
+      lastRow.append(`<td>${recArray[r][i]}</td>`);
+     
+      
+    } 
+  }
+}catch(error){
+  console.error("Error displaying records:", error);
+}
+}
+displayRecords()
+
+
+
+async function rightArrow(): Promise<void> {
+  let count: number = await fetchRecordCount() - 1;
+  console.log(count);
+  const firstRow = document.querySelector("#recordsTable tbody");
+  console.log(firstRow)
+  if (firstRow) {
+    const cells = firstRow.querySelectorAll("td");
+    const firstRecord: string[] = [];
+    cells.forEach((cell) => {
+      firstRecord.push(cell.textContent || "");
+    });
+    console.log("First Record:", firstRecord[0]);
+
+
+    const firstID = parseFloat(firstRecord[0]);
+    console.log(firstID)
+
+    if (0 <= firstID && firstID <= (count - 35)) {
+      let clearTable = document.querySelector('tbody') as HTMLTableSectionElement | null;
+      if (clearTable) {
+        clearTable.innerHTML = "";
+
+        let firstRecord = + firstID + 35
+        let lastRecord = + firstRecord + 34
+
+        fetch(`http://192.168.4.133:2050/records?from=${firstRecord}&to=${lastRecord}`)
+          .then((response: Response) => {
+
+            if (!response.ok) {
+              throw new Error("Sorry, there's a problem in the network");
+            }
+            return response.json() as Promise<any[]>;
+          })
+          .then((records: any[]) => {
+            const recArray = records;
+            console.log(recArray);
+
+            for (let r = 0; r <35; r++) {
+              $("tbody").append(`<tr class="row"></tr>`);
+              const lastRow = $(".row:last"); 
+              for (let i = 0; i < recArray[r].length; i++) {
+                lastRow.append(`<td>${recArray[r][i]}</td>`);
+               
+                
+              } 
+            }
+          })
+          .catch((error) => {
+            console.error("Error fetching records:", error);
+          });
+
+      }
+    }
+  }
+}
+
+async function leftArrow(): Promise<void> {
+  let count: number = await fetchRecordCount() - 1;
+  console.log(count);
+  const firstRow = document.querySelector("#recordsTable tbody");
+  console.log(firstRow)
+  if (firstRow) {
+    const cells = firstRow.querySelectorAll("td");
+    const firstRecord: string[] = [];
+    cells.forEach((cell) => {
+      firstRecord.push(cell.textContent || "");
+    });
+   
+
+
+    const firstID = parseFloat(firstRecord[0]);
+    
+
+    if (35 <= firstID && firstID <= (count)) {
+      let clearTable = document.querySelector('tbody') as HTMLTableSectionElement | null;
+      if (clearTable) {
+        clearTable.innerHTML = "";
+
+        let firstRecord = firstID - 35
+       
+        let lastRecord =firstRecord + 34
+      
+        
+
+        fetch(`http://192.168.4.133:2050/records?from=${firstRecord}&to=${lastRecord}`)
+          .then((response: Response) => {
+
+            if (!response.ok) {
+              throw new Error("Sorry, there's a problem in the network");
+            }
+            return response.json() as Promise<any[]>;
+          })
+          .then((records: any[]) => {
+            const recArray = records;
+            console.log(recArray);
+
+            for (let r = 0; r <35; r++) {
+              $("tbody").append(`<tr class="row"></tr>`);
+              const lastRow = $(".row:last"); 
+              for (let i = 0; i < recArray[r].length; i++) {
+                lastRow.append(`<td>${recArray[r][i]}</td>`);
+               
+                
+              } 
+            }
+          })
+          .catch((error) => {
+            console.error("Error fetching records:", error);
+          });
+
+      }
+    }
+  }
+}
+
+
+
+
+$('#searchInput').on('keyup',async () => {
+  const inputValue = $('#searchInput').val() as string;
+  console.log(inputValue);
+  
+
+  if(!inputValue.length){
+    displayRecords()
+  }
+  const recArray: any[] = await fetchRecords();
+  
+
+  let filter = recArray.filter((item)=>{
+    for (let i = 0; i < item.length; i++) {
+      if (item[i].toLowerCase().includes(inputValue.toLowerCase())) {
+        return true; 
+       
+      }
+      
+    }
+    return false; 
+    });
+    const tbody = $("tbody");
+    tbody.empty(); 
+  
+    for (let r = 0; r < 35 && r < filter.length; r++) {
+      const row = $('<tr class="row"></tr>');
+      for (let i = 0; i < filter[r].length; i++) {
+        row.append(`<td>${filter[r][i]}</td>`);
+      }
+      tbody.append(row);
+    }
+  
+  })
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+ 
+  
+  
+ 
+
+
+
+
diff --git a/index.html b/index.html
index add5e736..9fd1b027 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,36 @@
 <head>
 	<title>JS Onboard Project</title>
 	<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
+	<link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-	<p>Hello</p>
+	
+	<h1 class="heading">OnBoard-Javascript</h1>
+	<div class="search-container">
+		<form id="searchForm">
+			<input type="text" id="searchInput" placeholder="Search.." name="search">
+		  </form>
+	</div>
+
+
+	<table id="recordsTable">
+		<thead>
+		  <tr class="head">
+		  </tr>
+		</thead>
+		
+		<tbody>
+			
+		</tbody>
+
+	<div class="showRecords">
+    <button onclick="rightArrow()" class="arrow-right"></button>
+	<div id="page"> 1 - 35 Records per Page</div>
+    <button onclick="leftArrow()" class="arrow-left"></button>
+    </div>
+	  
+	<script src="app.js"></script>
 </body>
 
 </html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..af2563bc
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,27 @@
+{
+  "name": "onboard-javascript",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/jquery": {
+      "version": "3.5.16",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz",
+      "integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==",
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
+    "@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
+    },
+    "typescript": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
+      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+      "dev": true
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..a1a024bf
--- /dev/null
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "onboard-javascript",
+  "version": "1.0.0",
+  "description": "This is a JavaScript project for all new developers to complete before venturing into our web frontend codebase.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc -p .",
+    "start": "npm run build -- -w"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ThokozaniNqwili/onboard-javascript.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ThokozaniNqwili/onboard-javascript/issues"
+  },
+  "homepage": "https://github.com/ThokozaniNqwili/onboard-javascript#readme",
+  "devDependencies": {
+    "typescript": "^3.8.3"
+  },
+  "dependencies": {
+    "@types/jquery": "^3.5.16"
+  }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..47760400
--- /dev/null
+++ b/style.css
@@ -0,0 +1,92 @@
+body{
+  overflow: hidden;
+  background-color: #f7e7ce;
+}
+table{
+    width: 100%;
+    table-layout: fixed;
+  
+}
+table, th, td {
+    border: 1px solid #4B3832;
+    border-collapse: collapse;
+    text-align: center; 
+    color: black;
+}
+
+td:hover{
+    color: #97694F;
+  }
+
+.heading  {
+   text-align: center;
+   text-decoration: underline;
+   color: #4B3832;
+   
+}
+
+.showRecords{
+
+  transform: translate(49rem, -0.5rem);
+  position: absolute;
+  bottom: 0px;
+  padding: 1rem;
+ 
+
+}
+.showRecords #page{
+  display: inline-block;
+  font-size: 1.2rem;
+
+}
+
+
+.arrow-right,
+.arrow-left{
+  border: none;
+  background-color: transparent;
+
+}
+
+.arrow-right,
+.arrow-left{
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  border-top: 10px solid #4B3832;
+  border-left: 10px solid #4B3832;
+  
+  
+ 
+}
+
+.arrow-right,
+.arrow-left:hover {
+  color: #97694F;
+}
+
+.arrow-right{
+ transform: rotate(135deg);
+ float: right;
+
+
+}
+
+.arrow-left{
+ transform: rotate(-45deg);
+ float: left;
+}
+
+.search-container {
+  float: right;
+}
+.search-container input[type=text] {
+  padding: 6px;
+  margin-bottom: 3px;
+  font-size: 17px;
+  border: 2px solid #4B3832;
+  background-color: #f7e7ce;
+ 
+}
+
+

From 575b160a26d1fa2b17cfc10785835e46ce5a1556 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Fri, 11 Aug 2023 16:03:17 +0200
Subject: [PATCH 02/33] update

---
 app.ts     | 244 +++++++++++++++++++++++++++++++----------------------
 index.html |   3 +-
 2 files changed, 147 insertions(+), 100 deletions(-)

diff --git a/app.ts b/app.ts
index e2a965f3..0b53c873 100644
--- a/app.ts
+++ b/app.ts
@@ -2,7 +2,7 @@
 async function fetchRecordCount(): Promise<number> {
   try {
     const recordCount = await fetch(`http://192.168.4.133:2050/recordCount`);
-   
+
     if (!recordCount.ok) {
       throw new Error('Failed to fetch record count');
     }
@@ -42,22 +42,22 @@ fetchColumns();
 
 async function fetchRecords(): Promise<any[][]> {
   try {
-  let count: number = await fetchRecordCount() - 1;
-  const response = await fetch(`http://192.168.4.133:2050/records?from=0&to=35`);
+    let count: number = await fetchRecordCount() - 1;
+    const response = await fetch(`http://192.168.4.133:2050/records?from=0&to=35`);
 
-      if (!response.ok) {
-        throw new Error("Sorry, there's a problem in the network");
-      }
-      const records = await response.json();
-      return records;
-  
-      
-    }catch(error) {
-      console.error("Error fetching records:", error);
-      throw error;
+    if (!response.ok) {
+      throw new Error("Sorry, there's a problem in the network");
     }
+    const records = await response.json();
+    return records;
+
+
+  } catch (error) {
+    console.error("Error fetching records:", error);
+    throw error;
   }
-  
+}
+
 
 
 
@@ -65,48 +65,48 @@ async function fetchRecords(): Promise<any[][]> {
 fetchRecords()
 
 async function displayRecords(): Promise<void> {
-try{
-  const recArray: any[][] = await fetchRecords();
-
-  for (let r = 0; r <35; r++) {
-    $("tbody").append(`<tr class="row"></tr>`);
-    const lastRow = $(".row:last"); 
-    for (let i = 0; i < recArray[r].length; i++) {
-      lastRow.append(`<td>${recArray[r][i]}</td>`);
-     
-      
-    } 
+  try {
+    const recArray: any[][] = await fetchRecords();
+
+    for (let r = 0; r < 35; r++) {
+      $("tbody").append(`<tr class="row"></tr>`);
+      const lastRow = $(".row:last");
+      for (let i = 0; i < recArray[r].length; i++) {
+        lastRow.append(`<td>${recArray[r][i]}</td>`);
+
+
+      }
+    }
+  } catch (error) {
+    console.error("Error displaying records:", error);
   }
-}catch(error){
-  console.error("Error displaying records:", error);
-}
 }
 displayRecords()
 
 
 
 async function rightArrow(): Promise<void> {
+  let searchValue = $('#searchInput').val() as string
+  
   let count: number = await fetchRecordCount() - 1;
-  console.log(count);
+
   const firstRow = document.querySelector("#recordsTable tbody");
-  console.log(firstRow)
+
   if (firstRow) {
     const cells = firstRow.querySelectorAll("td");
     const firstRecord: string[] = [];
     cells.forEach((cell) => {
       firstRecord.push(cell.textContent || "");
     });
-    console.log("First Record:", firstRecord[0]);
-
 
     const firstID = parseFloat(firstRecord[0]);
-    console.log(firstID)
+
 
     if (0 <= firstID && firstID <= (count - 35)) {
       let clearTable = document.querySelector('tbody') as HTMLTableSectionElement | null;
       if (clearTable) {
         clearTable.innerHTML = "";
-
+ 
         let firstRecord = + firstID + 35
         let lastRecord = + firstRecord + 34
 
@@ -120,17 +120,38 @@ async function rightArrow(): Promise<void> {
           })
           .then((records: any[]) => {
             const recArray = records;
-            console.log(recArray);
-
-            for (let r = 0; r <35; r++) {
-              $("tbody").append(`<tr class="row"></tr>`);
-              const lastRow = $(".row:last"); 
-              for (let i = 0; i < recArray[r].length; i++) {
-                lastRow.append(`<td>${recArray[r][i]}</td>`);
-               
-                
-              } 
-            }
+            if (searchValue) {
+
+              let filter = recArray.filter((item) => {
+                for (let i = 0; i < item.length; i++) {
+                  if (item[i].toLowerCase().includes(searchValue.toLowerCase())) {
+                    return true;
+
+                  }
+
+                }
+                return false;
+              });
+              const tbody = $("tbody");
+              tbody.empty();
+
+              for (let r = 0; r < 35 && r < filter.length; r++) {
+                const row = $('<tr class="row"></tr>');
+                for (let i = 0; i < filter[r].length; i++) {
+                  row.append(`<td>${filter[r][i]}</td>`);
+                }
+                tbody.append(row);
+              }
+
+            } else for (let r = 0; r < 35; r++) {
+                $("tbody").append(`<tr class="row"></tr>`);
+                const lastRow = $(".row:last");
+                for (let i = 0; i < recArray[r].length; i++) {
+                  lastRow.append(`<td>${recArray[r][i]}</td>`);
+
+
+                }
+              }
           })
           .catch((error) => {
             console.error("Error fetching records:", error);
@@ -142,21 +163,22 @@ async function rightArrow(): Promise<void> {
 }
 
 async function leftArrow(): Promise<void> {
+  let searchValue = $('#searchInput').val() as string
   let count: number = await fetchRecordCount() - 1;
-  console.log(count);
+ 
   const firstRow = document.querySelector("#recordsTable tbody");
-  console.log(firstRow)
+ 
   if (firstRow) {
     const cells = firstRow.querySelectorAll("td");
     const firstRecord: string[] = [];
     cells.forEach((cell) => {
       firstRecord.push(cell.textContent || "");
     });
-   
+
 
 
     const firstID = parseFloat(firstRecord[0]);
-    
+
 
     if (35 <= firstID && firstID <= (count)) {
       let clearTable = document.querySelector('tbody') as HTMLTableSectionElement | null;
@@ -164,10 +186,10 @@ async function leftArrow(): Promise<void> {
         clearTable.innerHTML = "";
 
         let firstRecord = firstID - 35
-       
-        let lastRecord =firstRecord + 34
-      
-        
+
+        let lastRecord = firstRecord + 34
+
+
 
         fetch(`http://192.168.4.133:2050/records?from=${firstRecord}&to=${lastRecord}`)
           .then((response: Response) => {
@@ -179,17 +201,41 @@ async function leftArrow(): Promise<void> {
           })
           .then((records: any[]) => {
             const recArray = records;
-            console.log(recArray);
-
-            for (let r = 0; r <35; r++) {
-              $("tbody").append(`<tr class="row"></tr>`);
-              const lastRow = $(".row:last"); 
-              for (let i = 0; i < recArray[r].length; i++) {
-                lastRow.append(`<td>${recArray[r][i]}</td>`);
-               
-                
-              } 
-            }
+           
+            if (searchValue) {
+
+              let filter = recArray.filter((item) => {
+                for (let i = 0; i < item.length; i++) {
+                  if (item[i].toLowerCase().includes(searchValue.toLowerCase())) {
+                    return true;
+
+                  }
+
+                }
+                return false;
+              });
+              const tbody = $("tbody");
+              tbody.empty();
+
+              for (let r = 0; r < 35 && r < filter.length; r++) {
+                const row = $('<tr class="row"></tr>');
+                for (let i = 0; i < filter[r].length; i++) {
+                  row.append(`<td>${filter[r][i]}</td>`);
+                }
+                tbody.append(row);
+              }
+
+            } else for (let r = 0; r < 35; r++) {
+                $("tbody").append(`<tr class="row"></tr>`);
+                const lastRow = $(".row:last");
+                for (let i = 0; i < recArray[r].length; i++) {
+                  lastRow.append(`<td>${recArray[r][i]}</td>`);
+
+
+                }
+              }
+
+           
           })
           .catch((error) => {
             console.error("Error fetching records:", error);
@@ -203,54 +249,54 @@ async function leftArrow(): Promise<void> {
 
 
 
-$('#searchInput').on('keyup',async () => {
+$('#searchInput').on('keyup', async () => {
   const inputValue = $('#searchInput').val() as string;
-  console.log(inputValue);
-  
 
-  if(!inputValue.length){
+
+
+  if (!inputValue.length) {
     displayRecords()
   }
   const recArray: any[] = await fetchRecords();
-  
 
-  let filter = recArray.filter((item)=>{
+
+  let filter = recArray.filter((item) => {
     for (let i = 0; i < item.length; i++) {
       if (item[i].toLowerCase().includes(inputValue.toLowerCase())) {
-        return true; 
-       
+        return true;
+
       }
-      
+
     }
-    return false; 
-    });
-    const tbody = $("tbody");
-    tbody.empty(); 
-  
-    for (let r = 0; r < 35 && r < filter.length; r++) {
-      const row = $('<tr class="row"></tr>');
-      for (let i = 0; i < filter[r].length; i++) {
-        row.append(`<td>${filter[r][i]}</td>`);
-      }
-      tbody.append(row);
+    return false;
+  });
+  const tbody = $("tbody");
+  tbody.empty();
+
+  for (let r = 0; r < 35 && r < filter.length; r++) {
+    const row = $('<tr class="row"></tr>');
+    for (let i = 0; i < filter[r].length; i++) {
+      row.append(`<td>${filter[r][i]}</td>`);
     }
-  
-  })
+    tbody.append(row);
+  }
+
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-  
-  
-  
-  
-  
-  
-  
-  
-  
 
- 
-  
-  
- 
 
 
 
diff --git a/index.html b/index.html
index 9fd1b027..a90e7522 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,8 @@
 	<h1 class="heading">OnBoard-Javascript</h1>
 	<div class="search-container">
 		<form id="searchForm">
-			<input type="text" id="searchInput" placeholder="Search.." name="search">
+			<input type="text" id="searchInput" placeholder="Search.." name="search" autocomplete="off">
+			
 		  </form>
 	</div>
 

From 038f93e58b5c591c43dcea937653a1bf7aa6ceed Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 15 Aug 2023 15:38:23 +0200
Subject: [PATCH 03/33] update

---
 app.ts     | 246 ++++++++++++++++++++++-------------------------------
 index.html |  23 +++--
 style.css  |  84 +++++++++++++++---
 3 files changed, 192 insertions(+), 161 deletions(-)

diff --git a/app.ts b/app.ts
index 0b53c873..d6d17fcb 100644
--- a/app.ts
+++ b/app.ts
@@ -2,20 +2,15 @@
 async function fetchRecordCount(): Promise<number> {
   try {
     const recordCount = await fetch(`http://192.168.4.133:2050/recordCount`);
-
     if (!recordCount.ok) {
       throw new Error('Failed to fetch record count');
     }
     const data = await recordCount.json()
     return data;
-
   } catch (error) {
     console.error('Error fetching the record count:', error);
     throw error;
   }
-
-
-
 }
 
 
@@ -24,59 +19,59 @@ async function fetchRecordCount(): Promise<number> {
 function fetchColumns(): void {
   fetch("http://192.168.4.133:2050/columns")
     .then((response: Response) => {
-
       return response.json() as Promise<string[]>;
     })
     .then((columns: string[]) => {
       const colArray = columns;
       console.log(colArray);
-
       for (let c = 0; c < colArray.length; c++) {
         $(".head").append(`<th>${colArray[c]}</th>`);
       }
     })
-
 }
-
 fetchColumns();
 
 async function fetchRecords(): Promise<any[][]> {
   try {
     let count: number = await fetchRecordCount() - 1;
-    const response = await fetch(`http://192.168.4.133:2050/records?from=0&to=35`);
-
+    const response = await fetch(`http://192.168.4.133:2050/records?from=0&to=${count}`);
     if (!response.ok) {
       throw new Error("Sorry, there's a problem in the network");
     }
     const records = await response.json();
     return records;
-
-
   } catch (error) {
     console.error("Error fetching records:", error);
     throw error;
   }
 }
-
-
-
-
-
 fetchRecords()
 
 async function displayRecords(): Promise<void> {
   try {
-    const recArray: any[][] = await fetchRecords();
-
-    for (let r = 0; r < 35; r++) {
-      $("tbody").append(`<tr class="row"></tr>`);
-      const lastRow = $(".row:last");
-      for (let i = 0; i < recArray[r].length; i++) {
-        lastRow.append(`<td>${recArray[r][i]}</td>`);
-
-
-      }
-    }
+    $('#loader').show()
+    fetch(`http://192.168.4.133:2050/records?from=0&to=19`)
+      .then((response: Response) => {
+
+        if (!response.ok) {
+          throw new Error("Sorry, there's a problem in the network");
+        }
+        return response.json() as Promise<any[]>;
+      })
+      .then((records: any[]) => {
+        const recArray = records;
+        $('#loader').hide()
+
+        for (let r = 0; r < 20; r++) {
+          $("tbody").append(`<tr class="row"></tr>`);
+          const lastRow = $(".row:last");
+          for (let i = 0; i < recArray[r].length; i++) {
+            lastRow.append(`<td>${recArray[r][i]}</td>`);
+          }
+        }
+        $('#page').empty()
+        $('#page').append(`Showing record: 1 - 19`)
+      })
   } catch (error) {
     console.error("Error displaying records:", error);
   }
@@ -85,31 +80,73 @@ displayRecords()
 
 
 
-async function rightArrow(): Promise<void> {
-  let searchValue = $('#searchInput').val() as string
-  
-  let count: number = await fetchRecordCount() - 1;
+$('.btnSearch').on('click', async (event: any) => {
+  event.preventDefault()
+  console.log('hello')
+  const inputValue = $('#searchInput').val() as number;
+  if (isNaN(inputValue)) {
+    alert(`${inputValue} is not a number`);
+    $('#searchInput').val('')
+
+  } else {
+
+    const firstNumber = Math.floor(inputValue / 10) * 10;
+    const lastNumber = firstNumber + 19
+    const tbody = $("tbody");
+    tbody.empty();
+    $('#page').empty();
+    try {
+      $('#loader').show()
+      fetch(`http://192.168.4.133:2050/records?from=${firstNumber}&to=${lastNumber}`)
+        .then((response: Response) => {
+
+          if (!response.ok) {
+            throw new Error("Sorry, there's a problem in the network");
+          }
+          return response.json() as Promise<any[]>;
+        })
+        .then((records: any[]) => {
+          const recArray = records;
+          $('#loader').hide()
+
+          for (let r = 0; r < 20; r++) {
+            $("tbody").append(`<tr class="row"></tr>`);
+            const lastRow = $(".row:last");
+            for (let i = 0; i < recArray[r].length; i++) {
+              lastRow.append(`<td>${recArray[r][i]}</td>`);
+            }
+          }
+          $('#page').empty()
+          $('#page').append(`Showing record: ${firstNumber} - ${lastNumber}`)
+        })
+    } catch (error) {
+      console.error("Error displaying records:", error);
+    }
+  }
+})
+
 
-  const firstRow = document.querySelector("#recordsTable tbody");
 
+async function rightArrow(): Promise<void> {
+  const firstRow = document.querySelector("#recordsTable tbody");
   if (firstRow) {
     const cells = firstRow.querySelectorAll("td");
     const firstRecord: string[] = [];
     cells.forEach((cell) => {
       firstRecord.push(cell.textContent || "");
     });
-
     const firstID = parseFloat(firstRecord[0]);
-
-
-    if (0 <= firstID && firstID <= (count - 35)) {
+    if (0 <= firstID) {
       let clearTable = document.querySelector('tbody') as HTMLTableSectionElement | null;
       if (clearTable) {
         clearTable.innerHTML = "";
- 
-        let firstRecord = + firstID + 35
-        let lastRecord = + firstRecord + 34
 
+        let firstRecord = + firstID + 20
+        let lastRecord = + firstRecord + 19
+        $('#page').empty()
+        $('#page').append(`Showing record: ${firstRecord} - ${lastRecord}`)
+
+        $('#loader').show()
         fetch(`http://192.168.4.133:2050/records?from=${firstRecord}&to=${lastRecord}`)
           .then((response: Response) => {
 
@@ -120,38 +157,17 @@ async function rightArrow(): Promise<void> {
           })
           .then((records: any[]) => {
             const recArray = records;
-            if (searchValue) {
-
-              let filter = recArray.filter((item) => {
-                for (let i = 0; i < item.length; i++) {
-                  if (item[i].toLowerCase().includes(searchValue.toLowerCase())) {
-                    return true;
-
-                  }
-
-                }
-                return false;
-              });
-              const tbody = $("tbody");
-              tbody.empty();
-
-              for (let r = 0; r < 35 && r < filter.length; r++) {
-                const row = $('<tr class="row"></tr>');
-                for (let i = 0; i < filter[r].length; i++) {
-                  row.append(`<td>${filter[r][i]}</td>`);
-                }
-                tbody.append(row);
-              }
+            $('#loader').hide()
 
-            } else for (let r = 0; r < 35; r++) {
-                $("tbody").append(`<tr class="row"></tr>`);
-                const lastRow = $(".row:last");
-                for (let i = 0; i < recArray[r].length; i++) {
-                  lastRow.append(`<td>${recArray[r][i]}</td>`);
+            for (let r = 0; r < 20; r++) {
+              $("tbody").append(`<tr class="row"></tr>`);
+              const lastRow = $(".row:last");
+              for (let i = 0; i < recArray[r].length; i++) {
+                lastRow.append(`<td>${recArray[r][i]}</td>`);
 
 
-                }
               }
+            }
           })
           .catch((error) => {
             console.error("Error fetching records:", error);
@@ -165,32 +181,27 @@ async function rightArrow(): Promise<void> {
 async function leftArrow(): Promise<void> {
   let searchValue = $('#searchInput').val() as string
   let count: number = await fetchRecordCount() - 1;
- 
+
   const firstRow = document.querySelector("#recordsTable tbody");
- 
+
   if (firstRow) {
     const cells = firstRow.querySelectorAll("td");
     const firstRecord: string[] = [];
     cells.forEach((cell) => {
       firstRecord.push(cell.textContent || "");
     });
-
-
-
     const firstID = parseFloat(firstRecord[0]);
-
-
-    if (35 <= firstID && firstID <= (count)) {
+    if (20 <= firstID && firstID <= (count)) {
       let clearTable = document.querySelector('tbody') as HTMLTableSectionElement | null;
       if (clearTable) {
         clearTable.innerHTML = "";
 
-        let firstRecord = firstID - 35
-
-        let lastRecord = firstRecord + 34
-
-
+        let firstRecord = firstID - 20
 
+        let lastRecord = firstRecord + 19
+        $('#page').empty()
+        $('#page').append(`Showing record: ${firstRecord} - ${lastRecord}`)
+        $('#loader').show()
         fetch(`http://192.168.4.133:2050/records?from=${firstRecord}&to=${lastRecord}`)
           .then((response: Response) => {
 
@@ -201,41 +212,20 @@ async function leftArrow(): Promise<void> {
           })
           .then((records: any[]) => {
             const recArray = records;
-           
-            if (searchValue) {
-
-              let filter = recArray.filter((item) => {
-                for (let i = 0; i < item.length; i++) {
-                  if (item[i].toLowerCase().includes(searchValue.toLowerCase())) {
-                    return true;
-
-                  }
-
-                }
-                return false;
-              });
-              const tbody = $("tbody");
-              tbody.empty();
-
-              for (let r = 0; r < 35 && r < filter.length; r++) {
-                const row = $('<tr class="row"></tr>');
-                for (let i = 0; i < filter[r].length; i++) {
-                  row.append(`<td>${filter[r][i]}</td>`);
-                }
-                tbody.append(row);
-              }
+            $('#loader').hide()
 
-            } else for (let r = 0; r < 35; r++) {
-                $("tbody").append(`<tr class="row"></tr>`);
-                const lastRow = $(".row:last");
-                for (let i = 0; i < recArray[r].length; i++) {
-                  lastRow.append(`<td>${recArray[r][i]}</td>`);
+
+            for (let r = 0; r < 20; r++) {
+              $("tbody").append(`<tr class="row"></tr>`);
+              const lastRow = $(".row:last");
+              for (let i = 0; i < recArray[r].length; i++) {
+                lastRow.append(`<td>${recArray[r][i]}</td>`);
 
 
-                }
               }
+            }
+
 
-           
           })
           .catch((error) => {
             console.error("Error fetching records:", error);
@@ -249,39 +239,7 @@ async function leftArrow(): Promise<void> {
 
 
 
-$('#searchInput').on('keyup', async () => {
-  const inputValue = $('#searchInput').val() as string;
-
-
-
-  if (!inputValue.length) {
-    displayRecords()
-  }
-  const recArray: any[] = await fetchRecords();
-
-
-  let filter = recArray.filter((item) => {
-    for (let i = 0; i < item.length; i++) {
-      if (item[i].toLowerCase().includes(inputValue.toLowerCase())) {
-        return true;
-
-      }
-
-    }
-    return false;
-  });
-  const tbody = $("tbody");
-  tbody.empty();
-
-  for (let r = 0; r < 35 && r < filter.length; r++) {
-    const row = $('<tr class="row"></tr>');
-    for (let i = 0; i < filter[r].length; i++) {
-      row.append(`<td>${filter[r][i]}</td>`);
-    }
-    tbody.append(row);
-  }
 
-})
 
 
 
diff --git a/index.html b/index.html
index a90e7522..676864c3 100644
--- a/index.html
+++ b/index.html
@@ -7,16 +7,27 @@
 </head>
 
 <body>
-	
+	<div id="loader" ></div>
 	<h1 class="heading">OnBoard-Javascript</h1>
+
+
 	<div class="search-container">
 		<form id="searchForm">
 			<input type="text" id="searchInput" placeholder="Search.." name="search" autocomplete="off">
-			
+			<button class="btnSearch" type="submit">Submit</button>	
 		  </form>
 	</div>
+	
+
+	<div class="showRecords">
+		<button onclick="rightArrow()" class="arrow-right"></button>
+		<div id="page"></div>
+		<button onclick="leftArrow()" class="arrow-left"></button>
+		</div>
+
 
 
+    <div class="tableRecords">
 	<table id="recordsTable">
 		<thead>
 		  <tr class="head">
@@ -26,12 +37,10 @@ <h1 class="heading">OnBoard-Javascript</h1>
 		<tbody>
 			
 		</tbody>
-
-	<div class="showRecords">
-    <button onclick="rightArrow()" class="arrow-right"></button>
-	<div id="page"> 1 - 35 Records per Page</div>
-    <button onclick="leftArrow()" class="arrow-left"></button>
+	</table>
     </div>
+	
+	
 	  
 	<script src="app.js"></script>
 </body>
diff --git a/style.css b/style.css
index 47760400..18d75114 100644
--- a/style.css
+++ b/style.css
@@ -1,19 +1,47 @@
 body{
   overflow: hidden;
   background-color: #f7e7ce;
+  padding: 0;
+  margin: 0;
+}
+.tableRecords{
+ 
+  height: 90vh;
+  position: absolute;
+  display: flex;
+  
+
+}
+
+
+.header{
+  display: block;
 }
 table{
     width: 100%;
     table-layout: fixed;
-  
+    flex-shrink: 0.2;
+   
+   
+   
+    
+    
 }
 table, th, td {
     border: 1px solid #4B3832;
     border-collapse: collapse;
     text-align: center; 
     color: black;
+    
+}
+.tableRecords thead .head {
+  position: sticky;
+  background-color: #97694F;
+  border: 2px solid black;
+  top:0;
 }
 
+
 td:hover{
     color: #97694F;
   }
@@ -23,14 +51,16 @@ td:hover{
    text-decoration: underline;
    color: #4B3832;
    
+   
 }
 
 .showRecords{
 
-  transform: translate(49rem, -0.5rem);
+  /* transform: translate(49rem, -0.5rem); */
   position: absolute;
-  bottom: 0px;
   padding: 1rem;
+  right: 0;
+  top: 1.2%;
  
 
 }
@@ -51,10 +81,10 @@ td:hover{
 .arrow-right,
 .arrow-left{
   display: inline-block;
-  width: 30px;
-  height: 30px;
-  border-top: 10px solid #4B3832;
-  border-left: 10px solid #4B3832;
+  width: 25px;
+  height: 25px;
+  border-top: 5px solid #4B3832;
+  border-left: 5px solid #4B3832;
   
   
  
@@ -78,15 +108,49 @@ td:hover{
 }
 
 .search-container {
-  float: right;
+  float: left;
+  position: absolute;
+  top: 2.15%;
+
+
 }
 .search-container input[type=text] {
   padding: 6px;
-  margin-bottom: 3px;
-  font-size: 17px;
+  font-size: 1rem;
   border: 2px solid #4B3832;
   background-color: #f7e7ce;
  
 }
+.btnSearch{
+  font-size: 1rem;
+  border: 2px solid #4B3832;
+  padding: 6px;
+  background-color:#97694F ;
+  color: #f7e7ce;
+} 
+#loader{
+  position: absolute;
+  left: 50%;
+  margin-left: -50px;
+  top: 50%;
+  margin-top: -50px;
+  border: calc(200px / 10) solid #97694F;
+  border-top: 20px solid #4B3832;
+  border-radius: 100%;
+  display:none;
+  width: 100px;
+  height: 100px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 
 

From 30785ac40852016eb4a138fac6829b82ed768178 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Fri, 18 Aug 2023 14:01:07 +0200
Subject: [PATCH 04/33] update

---
 app.ts    | 327 ++++++++++++++++++++++++++++--------------------------
 style.css |  17 ++-
 2 files changed, 184 insertions(+), 160 deletions(-)

diff --git a/app.ts b/app.ts
index d6d17fcb..ce257c18 100644
--- a/app.ts
+++ b/app.ts
@@ -1,7 +1,13 @@
+var firstNumber: number = 0;
+console.log
+var lastNumber: number;
+console.log
+
+
 
 async function fetchRecordCount(): Promise<number> {
   try {
-    const recordCount = await fetch(`http://192.168.4.133:2050/recordCount`);
+    const recordCount = await fetch(`http://localhost:2050/recordCount`);
     if (!recordCount.ok) {
       throw new Error('Failed to fetch record count');
     }
@@ -17,13 +23,13 @@ async function fetchRecordCount(): Promise<number> {
 
 
 function fetchColumns(): void {
-  fetch("http://192.168.4.133:2050/columns")
+  fetch("http://localhost:2050/columns")
     .then((response: Response) => {
       return response.json() as Promise<string[]>;
     })
     .then((columns: string[]) => {
       const colArray = columns;
-      console.log(colArray);
+
       for (let c = 0; c < colArray.length; c++) {
         $(".head").append(`<th>${colArray[c]}</th>`);
       }
@@ -31,47 +37,96 @@ function fetchColumns(): void {
 }
 fetchColumns();
 
-async function fetchRecords(): Promise<any[][]> {
-  try {
-    let count: number = await fetchRecordCount() - 1;
-    const response = await fetch(`http://192.168.4.133:2050/records?from=0&to=${count}`);
-    if (!response.ok) {
-      throw new Error("Sorry, there's a problem in the network");
-    }
-    const records = await response.json();
-    return records;
-  } catch (error) {
-    console.error("Error fetching records:", error);
-    throw error;
+
+
+async function adjustRowsByScreenHeight(): Promise<number> {
+  $('#loader').show()
+  const tableBody = document.querySelector('.tableRecords tbody') as HTMLElement;
+  const rowHeight = 30
+  const maxRows = Math.floor(tableBody.clientHeight / rowHeight);
+  
+  return maxRows;
+
+}
+
+async function fetchRecords(from: number, to: number): Promise<any[]> {
+
+  const response = await fetch(`http://localhost:2050/records?from=${from}&to=${to}`);
+  if (!response.ok) {
+    throw new Error("Sorry, there's a problem with the network");
   }
+
+  return response.json();
+
 }
-fetchRecords()
+
+
+$(window).on('resize', async (event: any) => {
+  event.preventDefault()
+  $('#page').empty();
+  // const count: number = await fetchRecordCount() - 1;
+  // const calculatedRows = await adjustRowsByScreenHeight();
+
+  // console.log(firstNumber)
+  // console.log(lastNumber)
+  // if (firstNumber < 0) {
+  //   firstNumber = 0;
+  // }
+
+  // if (lastNumber > count) {
+  //   lastNumber = count;
+  // } else {
+  //   lastNumber = firstNumber + (calculatedRows-1);
+  // }
+
+  await displayRecords();
+
+})
 
 async function displayRecords(): Promise<void> {
   try {
     $('#loader').show()
-    fetch(`http://192.168.4.133:2050/records?from=0&to=19`)
-      .then((response: Response) => {
+    const calculatedRows = await adjustRowsByScreenHeight();
+    const inputValue = $('#searchInput').val() as number;
+  
 
-        if (!response.ok) {
-          throw new Error("Sorry, there's a problem in the network");
-        }
-        return response.json() as Promise<any[]>;
-      })
-      .then((records: any[]) => {
-        const recArray = records;
-        $('#loader').hide()
-
-        for (let r = 0; r < 20; r++) {
-          $("tbody").append(`<tr class="row"></tr>`);
-          const lastRow = $(".row:last");
-          for (let i = 0; i < recArray[r].length; i++) {
-            lastRow.append(`<td>${recArray[r][i]}</td>`);
-          }
+    if (!lastNumber) {
+      lastNumber = firstNumber + (calculatedRows - 1);
+    }
+    if (firstNumber < 0) {
+      firstNumber = 0;
+    }
+    if (lastNumber >= 999999) {
+      lastNumber = 999999;
+    }else{
+      lastNumber = firstNumber + (calculatedRows - 1);
+    }
+
+    const records = await fetchRecords(firstNumber, lastNumber);
+    const tbody = $("tbody");
+    tbody.empty();
+    for (let r = 0; r < records.length; r++) {
+      $("tbody").append(`<tr class="row"></tr>`);
+      const lastRow = $(".row:last");
+      for (let i = 0; i < records[r].length; i++) {
+        lastRow.append(`<td>${records[r][i]}</td>`);
+
+       
+
+      } 
+      if(records[r].includes(inputValue)){
+          console.log(records[r]);
+          lastRow.css('background-color', '#DDC0B4'); 
+        
         }
-        $('#page').empty()
-        $('#page').append(`Showing record: 1 - 19`)
-      })
+      tbody.append(lastRow);
+
+    }
+  
+    $('#page').empty();
+    $('#page').append(`Showing record: ${firstNumber} - ${lastNumber}`);
+    $('#loader').hide()
+
   } catch (error) {
     console.error("Error displaying records:", error);
   }
@@ -79,110 +134,81 @@ async function displayRecords(): Promise<void> {
 displayRecords()
 
 
+async function updateRecordsAndResize(inputValue: number) {
+  const count: number = await fetchRecordCount() - 1;
+
+  if (isNaN(inputValue) || inputValue > count) {
+    alert(`${inputValue} is not a number within the range`);
+    $('#searchInput').val('');
+    return;
+  }
+
+  // Calculate a range of numbers around the inputValue
+  const range = await adjustRowsByScreenHeight(); // Adjust this value to control the range size
+  firstNumber = Math.max(0, inputValue - Math.floor(range / inputValue));
+  console.log(firstNumber);
+
+  lastNumber = Math.min(count, firstNumber + range - 1);
+  console.log(lastNumber);
+ 
+ 
+
+  await adjustRowsByScreenHeight();
+
+  await displayRecords();
+}
+
 
 $('.btnSearch').on('click', async (event: any) => {
-  event.preventDefault()
-  console.log('hello')
+  event.preventDefault();
   const inputValue = $('#searchInput').val() as number;
-  if (isNaN(inputValue)) {
-    alert(`${inputValue} is not a number`);
-    $('#searchInput').val('')
+  console.log(inputValue)
 
-  } else {
-
-    const firstNumber = Math.floor(inputValue / 10) * 10;
-    const lastNumber = firstNumber + 19
-    const tbody = $("tbody");
-    tbody.empty();
-    $('#page').empty();
-    try {
-      $('#loader').show()
-      fetch(`http://192.168.4.133:2050/records?from=${firstNumber}&to=${lastNumber}`)
-        .then((response: Response) => {
-
-          if (!response.ok) {
-            throw new Error("Sorry, there's a problem in the network");
-          }
-          return response.json() as Promise<any[]>;
-        })
-        .then((records: any[]) => {
-          const recArray = records;
-          $('#loader').hide()
-
-          for (let r = 0; r < 20; r++) {
-            $("tbody").append(`<tr class="row"></tr>`);
-            const lastRow = $(".row:last");
-            for (let i = 0; i < recArray[r].length; i++) {
-              lastRow.append(`<td>${recArray[r][i]}</td>`);
-            }
-          }
-          $('#page').empty()
-          $('#page').append(`Showing record: ${firstNumber} - ${lastNumber}`)
-        })
-    } catch (error) {
-      console.error("Error displaying records:", error);
-    }
-  }
-})
 
+  await updateRecordsAndResize(inputValue);
+});
 
 
 async function rightArrow(): Promise<void> {
-  const firstRow = document.querySelector("#recordsTable tbody");
-  if (firstRow) {
-    const cells = firstRow.querySelectorAll("td");
-    const firstRecord: string[] = [];
+  const lastRow = document.querySelector("#recordsTable tbody .row:last-child");
+  let count: number = await fetchRecordCount() - 1;
+
+
+  if (lastRow) {
+    const cells = lastRow.querySelectorAll("td");
+    const lastRecord: string[] = [];
     cells.forEach((cell) => {
-      firstRecord.push(cell.textContent || "");
+      lastRecord.push(cell.textContent || "");
     });
-    const firstID = parseFloat(firstRecord[0]);
-    if (0 <= firstID) {
-      let clearTable = document.querySelector('tbody') as HTMLTableSectionElement | null;
-      if (clearTable) {
-        clearTable.innerHTML = "";
-
-        let firstRecord = + firstID + 20
-        let lastRecord = + firstRecord + 19
-        $('#page').empty()
-        $('#page').append(`Showing record: ${firstRecord} - ${lastRecord}`)
-
-        $('#loader').show()
-        fetch(`http://192.168.4.133:2050/records?from=${firstRecord}&to=${lastRecord}`)
-          .then((response: Response) => {
-
-            if (!response.ok) {
-              throw new Error("Sorry, there's a problem in the network");
-            }
-            return response.json() as Promise<any[]>;
-          })
-          .then((records: any[]) => {
-            const recArray = records;
-            $('#loader').hide()
-
-            for (let r = 0; r < 20; r++) {
-              $("tbody").append(`<tr class="row"></tr>`);
-              const lastRow = $(".row:last");
-              for (let i = 0; i < recArray[r].length; i++) {
-                lastRow.append(`<td>${recArray[r][i]}</td>`);
-
-
-              }
-            }
-          })
-          .catch((error) => {
-            console.error("Error fetching records:", error);
-          });
+    const lastID = parseFloat(lastRecord[0]);
+    console.log(lastID);
+
+    if (0 <= lastID && lastID <= (count)) {
+      const tbody = $("tbody");
+      tbody.empty();
+
+      firstNumber = lastID + 1;
+
+      const calculatedRows = await adjustRowsByScreenHeight();
+
+      lastNumber = firstNumber + (calculatedRows - 1)
+
+      await adjustRowsByScreenHeight();
+      await displayRecords();
 
-      }
     }
+
   }
 }
 
+
+
 async function leftArrow(): Promise<void> {
-  let searchValue = $('#searchInput').val() as string
+
   let count: number = await fetchRecordCount() - 1;
 
-  const firstRow = document.querySelector("#recordsTable tbody");
+
+  const firstRow = document.querySelector("#recordsTable tbody .row:first-child");
 
   if (firstRow) {
     const cells = firstRow.querySelectorAll("td");
@@ -191,49 +217,28 @@ async function leftArrow(): Promise<void> {
       firstRecord.push(cell.textContent || "");
     });
     const firstID = parseFloat(firstRecord[0]);
-    if (20 <= firstID && firstID <= (count)) {
-      let clearTable = document.querySelector('tbody') as HTMLTableSectionElement | null;
-      if (clearTable) {
-        clearTable.innerHTML = "";
+    console.log(firstID)
 
-        let firstRecord = firstID - 20
 
-        let lastRecord = firstRecord + 19
-        $('#page').empty()
-        $('#page').append(`Showing record: ${firstRecord} - ${lastRecord}`)
-        $('#loader').show()
-        fetch(`http://192.168.4.133:2050/records?from=${firstRecord}&to=${lastRecord}`)
-          .then((response: Response) => {
+    const tbody = $("tbody");
+    tbody.empty();
 
-            if (!response.ok) {
-              throw new Error("Sorry, there's a problem in the network");
-            }
-            return response.json() as Promise<any[]>;
-          })
-          .then((records: any[]) => {
-            const recArray = records;
-            $('#loader').hide()
+    const calculatedRows = await adjustRowsByScreenHeight();
+    console.log(calculatedRows);
 
+    firstNumber = firstID - (calculatedRows + 1)
+    console.log(firstRecord);
 
-            for (let r = 0; r < 20; r++) {
-              $("tbody").append(`<tr class="row"></tr>`);
-              const lastRow = $(".row:last");
-              for (let i = 0; i < recArray[r].length; i++) {
-                lastRow.append(`<td>${recArray[r][i]}</td>`);
 
+    lastNumber = firstNumber + (calculatedRows)
+    console.log(lastNumber);
 
-              }
-            }
+    await adjustRowsByScreenHeight();
 
+    await displayRecords();
+  }
 
-          })
-          .catch((error) => {
-            console.error("Error fetching records:", error);
-          });
 
-      }
-    }
-  }
 }
 
 
@@ -251,6 +256,18 @@ async function leftArrow(): Promise<void> {
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
diff --git a/style.css b/style.css
index 18d75114..45ffc769 100644
--- a/style.css
+++ b/style.css
@@ -5,12 +5,16 @@ body{
   margin: 0;
 }
 .tableRecords{
- 
-  height: 90vh;
+
   position: absolute;
   display: flex;
-  
-
+ 
+}
+.tableRecords tbody{
+   height: 85vh;
+}
+#recordsTable tbody .row td {
+  height: 1rem;
 }
 
 
@@ -20,7 +24,8 @@ body{
 table{
     width: 100%;
     table-layout: fixed;
-    flex-shrink: 0.2;
+  
+    margin-bottom: 5%;
    
    
    
@@ -44,6 +49,7 @@ table, th, td {
 
 td:hover{
     color: #97694F;
+    background-color:#DDC0B4;
   }
 
 .heading  {
@@ -54,6 +60,7 @@ td:hover{
    
 }
 
+
 .showRecords{
 
   /* transform: translate(49rem, -0.5rem); */

From 96682be3d35b264ff881ef059d614908d4554383 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Wed, 23 Aug 2023 11:39:47 +0200
Subject: [PATCH 05/33] update

---
 app.ts     | 176 +++++++++++++++++++----------------------------------
 index.html |   9 ++-
 style.css  |  65 ++++++++++++--------
 3 files changed, 109 insertions(+), 141 deletions(-)

diff --git a/app.ts b/app.ts
index ce257c18..f3177c27 100644
--- a/app.ts
+++ b/app.ts
@@ -1,9 +1,8 @@
+import { ajax, css } from "jquery";
 var firstNumber: number = 0;
-console.log
 var lastNumber: number;
-console.log
-
-
+var inputValue: number | null = null;
+var calculatedRows: number | null = null;
 
 async function fetchRecordCount(): Promise<number> {
   try {
@@ -19,9 +18,6 @@ async function fetchRecordCount(): Promise<number> {
   }
 }
 
-
-
-
 function fetchColumns(): void {
   fetch("http://localhost:2050/columns")
     .then((response: Response) => {
@@ -35,20 +31,33 @@ function fetchColumns(): void {
       }
     })
 }
-fetchColumns();
-
-
+fetchColumns()
 
 async function adjustRowsByScreenHeight(): Promise<number> {
-  $('#loader').show()
-  const tableBody = document.querySelector('.tableRecords tbody') as HTMLElement;
-  const rowHeight = 30
-  const maxRows = Math.floor(tableBody.clientHeight / rowHeight);
-  
+ 
+  let tableBody = (document.querySelector('.tableRecords tbody') as HTMLElement)?.clientHeight;
+  let rowHeight = 50;
+  let maxRows = Math.floor(tableBody / rowHeight);
   return maxRows;
 
 }
 
+let resizeTimeout: number;
+$(window).on('resize', async () => {
+  clearTimeout(resizeTimeout);
+  resizeTimeout = setTimeout(async () => {
+     $('#loader').show()
+    calculatedRows = await adjustRowsByScreenHeight();
+   
+    if (inputValue !== null) {
+      await updateRecordsAndResize(inputValue);
+    }
+     await displayRecords()
+     $('#loader').hide();
+   
+  }, 500);
+  })
+
 async function fetchRecords(from: number, to: number): Promise<any[]> {
 
   const response = await fetch(`http://localhost:2050/records?from=${from}&to=${to}`);
@@ -57,51 +66,30 @@ async function fetchRecords(from: number, to: number): Promise<any[]> {
   }
 
   return response.json();
-
 }
 
-
-$(window).on('resize', async (event: any) => {
-  event.preventDefault()
-  $('#page').empty();
-  // const count: number = await fetchRecordCount() - 1;
-  // const calculatedRows = await adjustRowsByScreenHeight();
-
-  // console.log(firstNumber)
-  // console.log(lastNumber)
-  // if (firstNumber < 0) {
-  //   firstNumber = 0;
-  // }
-
-  // if (lastNumber > count) {
-  //   lastNumber = count;
-  // } else {
-  //   lastNumber = firstNumber + (calculatedRows-1);
-  // }
-
-  await displayRecords();
-
-})
-
 async function displayRecords(): Promise<void> {
   try {
     $('#loader').show()
-    const calculatedRows = await adjustRowsByScreenHeight();
-    const inputValue = $('#searchInput').val() as number;
+    calculatedRows = await adjustRowsByScreenHeight();
   
-
+    
+    const inputValue = $('#searchInput').val() as number;
     if (!lastNumber) {
       lastNumber = firstNumber + (calculatedRows - 1);
     }
-    if (firstNumber < 0) {
+    if (firstNumber < 0 ) {
       firstNumber = 0;
     }
+    
     if (lastNumber >= 999999) {
       lastNumber = 999999;
+      firstNumber = lastNumber - (calculatedRows-1)
+     
     }else{
       lastNumber = firstNumber + (calculatedRows - 1);
-    }
-
+    } 
+    console.log(firstNumber,lastNumber)
     const records = await fetchRecords(firstNumber, lastNumber);
     const tbody = $("tbody");
     tbody.empty();
@@ -110,70 +98,52 @@ async function displayRecords(): Promise<void> {
       const lastRow = $(".row:last");
       for (let i = 0; i < records[r].length; i++) {
         lastRow.append(`<td>${records[r][i]}</td>`);
-
-       
-
       } 
       if(records[r].includes(inputValue)){
-          console.log(records[r]);
-          lastRow.css('background-color', '#DDC0B4'); 
-        
-        }
+      
+      lastRow.css('background-color', '#DDC0B4'); 
+      
+      }
       tbody.append(lastRow);
-
-    }
-  
     $('#page').empty();
     $('#page').append(`Showing record: ${firstNumber} - ${lastNumber}`);
     $('#loader').hide()
-
+    }
   } catch (error) {
     console.error("Error displaying records:", error);
   }
 }
 displayRecords()
 
-
 async function updateRecordsAndResize(inputValue: number) {
   const count: number = await fetchRecordCount() - 1;
-
-  if (isNaN(inputValue) || inputValue > count) {
-    alert(`${inputValue} is not a number within the range`);
+  if (inputValue < 0 || inputValue > count) {
+    $('.modal').css('display','block')
+    $('.modal-content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`)
     $('#searchInput').val('');
     return;
   }
-
-  // Calculate a range of numbers around the inputValue
-  const range = await adjustRowsByScreenHeight(); // Adjust this value to control the range size
-  firstNumber = Math.max(0, inputValue - Math.floor(range / inputValue));
-  console.log(firstNumber);
-
-  lastNumber = Math.min(count, firstNumber + range - 1);
-  console.log(lastNumber);
- 
- 
-
-  await adjustRowsByScreenHeight();
-
+  calculatedRows = await adjustRowsByScreenHeight(); 
+  const quarterRange = Math.floor(calculatedRows / 2);
+  firstNumber = Math.max(0, inputValue - quarterRange);
+  lastNumber = Math.min(count, firstNumber + (calculatedRows - 1));
   await displayRecords();
 }
 
+$('#closeModalBtn').on("click", () => {
+  $('.modal').css('display','none')
+});
 
 $('.btnSearch').on('click', async (event: any) => {
   event.preventDefault();
-  const inputValue = $('#searchInput').val() as number;
-  console.log(inputValue)
-
-
+  inputValue = $('#searchInput').val() as number;
   await updateRecordsAndResize(inputValue);
 });
 
-
 async function rightArrow(): Promise<void> {
+  $('#searchInput').val('');
   const lastRow = document.querySelector("#recordsTable tbody .row:last-child");
   let count: number = await fetchRecordCount() - 1;
-
-
   if (lastRow) {
     const cells = lastRow.querySelectorAll("td");
     const lastRecord: string[] = [];
@@ -181,35 +151,26 @@ async function rightArrow(): Promise<void> {
       lastRecord.push(cell.textContent || "");
     });
     const lastID = parseFloat(lastRecord[0]);
-    console.log(lastID);
-
     if (0 <= lastID && lastID <= (count)) {
+      
       const tbody = $("tbody");
       tbody.empty();
-
       firstNumber = lastID + 1;
-
-      const calculatedRows = await adjustRowsByScreenHeight();
-
+      calculatedRows = await adjustRowsByScreenHeight();
       lastNumber = firstNumber + (calculatedRows - 1)
-
-      await adjustRowsByScreenHeight();
       await displayRecords();
-
+    }else{
+      $('.arrow-right').css('display','none')
     }
-
+   
+    
   }
 }
 
-
-
 async function leftArrow(): Promise<void> {
-
+  $('#searchInput').val('');
   let count: number = await fetchRecordCount() - 1;
-
-
   const firstRow = document.querySelector("#recordsTable tbody .row:first-child");
-
   if (firstRow) {
     const cells = firstRow.querySelectorAll("td");
     const firstRecord: string[] = [];
@@ -217,29 +178,18 @@ async function leftArrow(): Promise<void> {
       firstRecord.push(cell.textContent || "");
     });
     const firstID = parseFloat(firstRecord[0]);
-    console.log(firstID)
-
-
     const tbody = $("tbody");
     tbody.empty();
-
     const calculatedRows = await adjustRowsByScreenHeight();
-    console.log(calculatedRows);
-
-    firstNumber = firstID - (calculatedRows + 1)
-    console.log(firstRecord);
-
-
-    lastNumber = firstNumber + (calculatedRows)
-    console.log(lastNumber);
-
-    await adjustRowsByScreenHeight();
-
+    lastNumber = firstID - 1;
+    firstNumber = lastNumber - (calculatedRows-1)
     await displayRecords();
-  }
+    
+}
+}
+
 
 
-}
 
 
 
diff --git a/index.html b/index.html
index 676864c3..94de68b1 100644
--- a/index.html
+++ b/index.html
@@ -9,11 +9,16 @@
 <body>
 	<div id="loader" ></div>
 	<h1 class="heading">OnBoard-Javascript</h1>
-
+	<div id="modal" class="modal">
+        <div class="modal-content">
+            <span id="closeModalBtn" class="close">&times;</span>
+            <p></p>
+        </div>
+    </div>
 
 	<div class="search-container">
 		<form id="searchForm">
-			<input type="text" id="searchInput" placeholder="Search.." name="search" autocomplete="off">
+			<input type="number" id="searchInput" placeholder="Search.." name="search" autocomplete="off">
 			<button class="btnSearch" type="submit">Submit</button>	
 		  </form>
 	</div>
diff --git a/style.css b/style.css
index 45ffc769..a43c7451 100644
--- a/style.css
+++ b/style.css
@@ -8,13 +8,15 @@ body{
 
   position: absolute;
   display: flex;
- 
-}
-.tableRecords tbody{
-   height: 85vh;
+  height: 95vh;
 }
-#recordsTable tbody .row td {
-  height: 1rem;
+/* .tableRecords tbody{
+  height: 80%;
+  flex-shrink: 1;
+  
+} */
+tbody .row td{
+  height: 1.5rem;
 }
 
 
@@ -24,12 +26,7 @@ body{
 table{
     width: 100%;
     table-layout: fixed;
-  
-    margin-bottom: 5%;
-   
-   
-   
-    
+    margin-bottom: 5% ;
     
 }
 table, th, td {
@@ -68,21 +65,15 @@ td:hover{
   padding: 1rem;
   right: 0;
   top: 1.2%;
- 
-
 }
 .showRecords #page{
   display: inline-block;
   font-size: 1.2rem;
-
 }
-
-
 .arrow-right,
 .arrow-left{
   border: none;
   background-color: transparent;
-
 }
 
 .arrow-right,
@@ -92,9 +83,6 @@ td:hover{
   height: 25px;
   border-top: 5px solid #4B3832;
   border-left: 5px solid #4B3832;
-  
-  
- 
 }
 
 .arrow-right,
@@ -105,8 +93,6 @@ td:hover{
 .arrow-right{
  transform: rotate(135deg);
  float: right;
-
-
 }
 
 .arrow-left{
@@ -118,10 +104,8 @@ td:hover{
   float: left;
   position: absolute;
   top: 2.15%;
-
-
 }
-.search-container input[type=text] {
+.search-container input[type=number] {
   padding: 6px;
   font-size: 1rem;
   border: 2px solid #4B3832;
@@ -148,6 +132,8 @@ td:hover{
   width: 100px;
   height: 100px;
   animation: spin 2s linear infinite;
+  background-color: #f7e7ce;
+  
 }
 
 @keyframes spin {
@@ -158,6 +144,33 @@ td:hover{
     transform: rotate(360deg);
   }
 }
+.modal {
+  display: none;
+  position: fixed;
+  transform:translateX(50%);
+  z-index: 1;
+  top: 0;
+  width: 50%;
+  background-color: #f7e7ce;
+  border: 1px solid #4B3832;
+}
+
+.modal-content {
+  background-color: #4B3832;
+  margin: 1rem;
+  padding: 2rem;
+  border: 1px solid #DDC0B4;
+  color: #f7e7ce;
+  font-size: 1.5rem;
+}
+
+.close {
+  float: right;
+  font-size: rem;
+  font-weight: bold;
+  cursor: pointer;
+}
+
 
 
 

From e28719102e87606f56b64ab4282aca8fef36c063 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Fri, 25 Aug 2023 13:20:38 +0200
Subject: [PATCH 06/33] update

---
 app.ts     | 192 ++++++++++++++++++++++++++++-------------------------
 index.html |  10 +--
 style.css  |  39 ++++-------
 3 files changed, 119 insertions(+), 122 deletions(-)

diff --git a/app.ts b/app.ts
index f3177c27..8a06275b 100644
--- a/app.ts
+++ b/app.ts
@@ -1,10 +1,10 @@
 import { ajax, css } from "jquery";
 var firstNumber: number = 0;
 var lastNumber: number;
-var inputValue: number | null = null;
 var calculatedRows: number | null = null;
+var count: number | null = null;
 
-async function fetchRecordCount(): Promise<number> {
+async function fetchRecordCount(): Promise<number> { // fetches the number of records from the server
   try {
     const recordCount = await fetch(`http://localhost:2050/recordCount`);
     if (!recordCount.ok) {
@@ -18,96 +18,110 @@ async function fetchRecordCount(): Promise<number> {
   }
 }
 
-function fetchColumns(): void {
+function fetchColumns(): void { //fetches the different columns headings from server
   fetch("http://localhost:2050/columns")
     .then((response: Response) => {
       return response.json() as Promise<string[]>;
     })
     .then((columns: string[]) => {
-      const colArray = columns;
+      const colArray = columns; // assigns the columns to an array
 
       for (let c = 0; c < colArray.length; c++) {
-        $(".head").append(`<th>${colArray[c]}</th>`);
+        $(".head").append(`<th>${colArray[c]}</th>`); // creates a single column for each heading
       }
     })
 }
 fetchColumns()
 
-async function adjustRowsByScreenHeight(): Promise<number> {
- 
-  let tableBody = (document.querySelector('.tableRecords tbody') as HTMLElement)?.clientHeight;
-  let rowHeight = 50;
-  let maxRows = Math.floor(tableBody / rowHeight);
-  return maxRows;
-
+async function adjustRowsByScreenHeight(): Promise<number> { // calculates the number of rows that can fit the screen
+  const screenHeight = window.innerHeight; // calculates screen height
+  const availableHeight = screenHeight - 105 // subtracts the space used from the screeen
+  let rowHeight = 35
+  if(availableHeight <= 0){
+  return 0;
+  }else{
+    let maxRows = Math.floor(availableHeight / rowHeight) ;
+    return maxRows; // returns the maximum rows that can fit into screen
+  }
 }
 
 let resizeTimeout: number;
 $(window).on('resize', async () => {
-  clearTimeout(resizeTimeout);
+  clearTimeout(resizeTimeout); // cancel previously schedule Timeout
+
   resizeTimeout = setTimeout(async () => {
-     $('#loader').show()
-    calculatedRows = await adjustRowsByScreenHeight();
-   
-    if (inputValue !== null) {
-      await updateRecordsAndResize(inputValue);
+    $('#loader').show()
+    calculatedRows = await adjustRowsByScreenHeight(); // to recalcualte the number of max rows
+    await displayRecords() 
+
+    let inputValue = $('#searchInput').val() ; // priotizes the search input value if available
+    if (inputValue !== '') {
+      await updateRecordsAndResize(Number(inputValue))
     }
-     await displayRecords()
-     $('#loader').hide();
-   
+    $('#loader').hide();
   }, 500);
-  })
-
-async function fetchRecords(from: number, to: number): Promise<any[]> {
+})
 
+async function fetchRecords(from: number, to: number): Promise<any[]> { // fetches records from specified number to a certain number
   const response = await fetch(`http://localhost:2050/records?from=${from}&to=${to}`);
   if (!response.ok) {
     throw new Error("Sorry, there's a problem with the network");
   }
-
   return response.json();
 }
 
-async function displayRecords(): Promise<void> {
+async function displayRecords(): Promise<void> { //displays records from firstNumber to lastNumber
   try {
     $('#loader').show()
+    count = await fetchRecordCount() - 1;
     calculatedRows = await adjustRowsByScreenHeight();
-  
-    
     const inputValue = $('#searchInput').val() as number;
+    if(calculatedRows === 0){
+      lastNumber = firstNumber
+       
+      }
     if (!lastNumber) {
       lastNumber = firstNumber + (calculatedRows - 1);
     }
-    if (firstNumber < 0 ) {
+    if (firstNumber < 0) {
       firstNumber = 0;
+      lastNumber = firstNumber + (calculatedRows - 1);
     }
-    
-    if (lastNumber >= 999999) {
-      lastNumber = 999999;
-      firstNumber = lastNumber - (calculatedRows-1)
-     
-    }else{
+    else {
       lastNumber = firstNumber + (calculatedRows - 1);
-    } 
-    console.log(firstNumber,lastNumber)
-    const records = await fetchRecords(firstNumber, lastNumber);
+    }
+
+    let records;
+    if(lastNumber <= count && lastNumber >= 0){
+      records = await fetchRecords(firstNumber, lastNumber);
+      $('#page').empty();
+      $('#page').append(`Showing record: ${firstNumber} - ${lastNumber}`); // changes the record range showing
+      $('#loader').hide()
+    }else{
+      firstNumber = count - (calculatedRows-1)
+      lastNumber = count;
+      records = await fetchRecords(firstNumber, count);
+      $('#page').empty();
+      $('#page').append(`Showing record: ${firstNumber} - ${count}`);
+      $('#loader').hide()
+     
+    }
+   
+   
     const tbody = $("tbody");
     tbody.empty();
     for (let r = 0; r < records.length; r++) {
-      $("tbody").append(`<tr class="row"></tr>`);
+      $("tbody").append(`<tr class="row"></tr>`); // creates row for each record
       const lastRow = $(".row:last");
       for (let i = 0; i < records[r].length; i++) {
-        lastRow.append(`<td>${records[r][i]}</td>`);
-      } 
-      if(records[r].includes(inputValue)){
-      
-      lastRow.css('background-color', '#DDC0B4'); 
-      
+        lastRow.append(`<td>${records[r][i]}</td>`); //assign each record to their column in a specified row
+      }
+      if (records[r].includes(inputValue)) {
+
+        lastRow.css('background-color', '#DDC0B4'); // hightlights the searched row
+
       }
       tbody.append(lastRow);
-    $('#page').empty();
-    $('#page').append(`Showing record: ${firstNumber} - ${lastNumber}`);
-    $('#loader').hide()
     }
   } catch (error) {
     console.error("Error displaying records:", error);
@@ -115,77 +129,73 @@ async function displayRecords(): Promise<void> {
 }
 displayRecords()
 
-async function updateRecordsAndResize(inputValue: number) {
-  const count: number = await fetchRecordCount() - 1;
-  if (inputValue < 0 || inputValue > count) {
-    $('.modal').css('display','block')
-    $('.modal-content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`)
-    $('#searchInput').val('');
+async function updateRecordsAndResize(inputValue: number) { // calulates the range of records according to the search input
+  count = await fetchRecordCount() - 1;
+  if (inputValue < 0 || inputValue > count) { // check if the search input 
+    $('.modal').css('display', 'block') //opens modal if search input is not within range
+    $('.modal-content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`) 
+    $('#searchInput').val(''); // empties search bar
     return;
   }
-  calculatedRows = await adjustRowsByScreenHeight(); 
-  const quarterRange = Math.floor(calculatedRows / 2);
+  calculatedRows = await adjustRowsByScreenHeight();
+  const quarterRange = Math.floor(calculatedRows / 2); // divides the calculated max rows in half 
+  
   firstNumber = Math.max(0, inputValue - quarterRange);
   lastNumber = Math.min(count, firstNumber + (calculatedRows - 1));
   await displayRecords();
 }
-
 $('#closeModalBtn').on("click", () => {
-  $('.modal').css('display','none')
+  $('.modal').css('display', 'none') // closes modal
 });
-
 $('.btnSearch').on('click', async (event: any) => {
   event.preventDefault();
-  inputValue = $('#searchInput').val() as number;
-  await updateRecordsAndResize(inputValue);
+  let inputValue = $('#searchInput').val() as number;
+  await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
+  
 });
 
-async function rightArrow(): Promise<void> {
-  $('#searchInput').val('');
-  const lastRow = document.querySelector("#recordsTable tbody .row:last-child");
-  let count: number = await fetchRecordCount() - 1;
-  if (lastRow) {
+async function rightArrow(): Promise<void> { // moves records to the next list 
+  $('#searchInput').val('')
+  const lastRow = document.querySelector("#recordsTable tbody .row:last-child"); // retrieves the last row
+  count = await fetchRecordCount() - 1;
+  if (lastRow) { // checks if the last row exists
     const cells = lastRow.querySelectorAll("td");
     const lastRecord: string[] = [];
     cells.forEach((cell) => {
       lastRecord.push(cell.textContent || "");
     });
-    const lastID = parseFloat(lastRecord[0]);
-    if (0 <= lastID && lastID <= (count)) {
-      
+    const lastID = parseFloat(lastRecord[0]); // determines te value in the last row
+    if (0 <= lastID && lastID <= (count)) { // checks if the last value is within range
       const tbody = $("tbody");
-      tbody.empty();
-      firstNumber = lastID + 1;
+      tbody.empty(); // empties the table
+      firstNumber = lastID + 1; // calculates the first number of the page
       calculatedRows = await adjustRowsByScreenHeight();
-      lastNumber = firstNumber + (calculatedRows - 1)
-      await displayRecords();
-    }else{
-      $('.arrow-right').css('display','none')
+      lastNumber = firstNumber + (calculatedRows - 1) // calculates the first number of the page
+      await displayRecords(); // display the new records
     }
-   
-    
   }
 }
 
-async function leftArrow(): Promise<void> {
-  $('#searchInput').val('');
-  let count: number = await fetchRecordCount() - 1;
-  const firstRow = document.querySelector("#recordsTable tbody .row:first-child");
-  if (firstRow) {
+async function leftArrow(): Promise<void> { // moves records to the previous list 
+  $('#searchInput').val('')
+  count = await fetchRecordCount() - 1;
+  const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); // retrieves the first row
+  if (firstRow) { // checks if the first row exists
     const cells = firstRow.querySelectorAll("td");
     const firstRecord: string[] = [];
     cells.forEach((cell) => {
       firstRecord.push(cell.textContent || "");
     });
-    const firstID = parseFloat(firstRecord[0]);
-    const tbody = $("tbody");
-    tbody.empty();
-    const calculatedRows = await adjustRowsByScreenHeight();
-    lastNumber = firstID - 1;
-    firstNumber = lastNumber - (calculatedRows-1)
-    await displayRecords();
-    
-}
+    const firstID = parseFloat(firstRecord[0]); // determines te value in the first row
+    if (0 <= firstID && firstID <= (count)) { // checks if the first value is within range
+      const tbody = $("tbody");
+      tbody.empty(); // empties the table
+      const calculatedRows = await adjustRowsByScreenHeight();
+      lastNumber = firstID - 1; // calculates the last number of the page
+      firstNumber = lastNumber - (calculatedRows - 1) // uses the last number to calculate
+      await displayRecords();
+    }
+  }
 }
 
 
diff --git a/index.html b/index.html
index 94de68b1..571fc4fb 100644
--- a/index.html
+++ b/index.html
@@ -22,17 +22,19 @@ <h1 class="heading">OnBoard-Javascript</h1>
 			<button class="btnSearch" type="submit">Submit</button>	
 		  </form>
 	</div>
-	
 
 	<div class="showRecords">
 		<button onclick="rightArrow()" class="arrow-right"></button>
 		<div id="page"></div>
 		<button onclick="leftArrow()" class="arrow-left"></button>
 		</div>
+	
+	
 
+	
 
 
-    <div class="tableRecords">
+  
 	<table id="recordsTable">
 		<thead>
 		  <tr class="head">
@@ -43,9 +45,7 @@ <h1 class="heading">OnBoard-Javascript</h1>
 			
 		</tbody>
 	</table>
-    </div>
-	
-	
+ 
 	  
 	<script src="app.js"></script>
 </body>
diff --git a/style.css b/style.css
index a43c7451..96db0c4c 100644
--- a/style.css
+++ b/style.css
@@ -4,39 +4,32 @@ body{
   padding: 0;
   margin: 0;
 }
-.tableRecords{
 
-  position: absolute;
-  display: flex;
-  height: 95vh;
-}
-/* .tableRecords tbody{
-  height: 80%;
-  flex-shrink: 1;
-  
-} */
+
+
 tbody .row td{
-  height: 1.5rem;
+  padding: 0.5rem;
 }
 
 
-.header{
-  display: block;
-}
+
 table{
     width: 100%;
     table-layout: fixed;
-    margin-bottom: 5% ;
     
+   
 }
 table, th, td {
     border: 1px solid #4B3832;
     border-collapse: collapse;
     text-align: center; 
+    min-height: 1rem;
+
     color: black;
     
+    
 }
-.tableRecords thead .head {
+#recordsTable thead .head {
   position: sticky;
   background-color: #97694F;
   border: 2px solid black;
@@ -53,18 +46,12 @@ td:hover{
    text-align: center;
    text-decoration: underline;
    color: #4B3832;
-   
-   
 }
-
-
 .showRecords{
-
-  /* transform: translate(49rem, -0.5rem); */
-  position: absolute;
-  padding: 1rem;
+  top: 0.8%;
   right: 0;
-  top: 1.2%;
+  padding: 1rem;
+  position: absolute;
 }
 .showRecords #page{
   display: inline-block;
@@ -101,7 +88,7 @@ td:hover{
 }
 
 .search-container {
-  float: left;
+  left:0;
   position: absolute;
   top: 2.15%;
 }

From b4e7f57cffd9cc0361e2da6ad9755401988152d9 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Mon, 28 Aug 2023 10:09:07 +0200
Subject: [PATCH 07/33] format change

---
 app.ts | 359 +++++++++++++++++++++++++--------------------------------
 1 file changed, 160 insertions(+), 199 deletions(-)

diff --git a/app.ts b/app.ts
index 8a06275b..748b82a3 100644
--- a/app.ts
+++ b/app.ts
@@ -5,234 +5,195 @@ var calculatedRows: number | null = null;
 var count: number | null = null;
 
 async function fetchRecordCount(): Promise<number> { // fetches the number of records from the server
-  try {
-    const recordCount = await fetch(`http://localhost:2050/recordCount`);
-    if (!recordCount.ok) {
-      throw new Error('Failed to fetch record count');
-    }
-    const data = await recordCount.json()
-    return data;
-  } catch (error) {
-    console.error('Error fetching the record count:', error);
-    throw error;
-  }
+	try {
+		const recordCount = await fetch(`http://localhost:2050/recordCount`);
+		if (!recordCount.ok) {
+			throw new Error('Failed to fetch record count');
+		}
+		const data = await recordCount.json()
+		return data;
+	} catch (error) {
+		console.error('Error fetching the record count:', error);
+		throw error;
+	}
 }
 
 function fetchColumns(): void { //fetches the different columns headings from server
-  fetch("http://localhost:2050/columns")
-    .then((response: Response) => {
-      return response.json() as Promise<string[]>;
-    })
-    .then((columns: string[]) => {
-      const colArray = columns; // assigns the columns to an array
-
-      for (let c = 0; c < colArray.length; c++) {
-        $(".head").append(`<th>${colArray[c]}</th>`); // creates a single column for each heading
-      }
-    })
+	fetch("http://localhost:2050/columns")
+		.then((response: Response) => {
+			return response.json() as Promise<string[]>;
+		})
+		.then((columns: string[]) => {
+			const colArray = columns; // assigns the columns to an array
+
+			for (let c = 0; c < colArray.length; c++) {
+				$(".head").append(`<th>${colArray[c]}</th>`); // creates a single column for each heading
+			}
+		})
 }
 fetchColumns()
 
 async function adjustRowsByScreenHeight(): Promise<number> { // calculates the number of rows that can fit the screen
-  const screenHeight = window.innerHeight; // calculates screen height
-  const availableHeight = screenHeight - 105 // subtracts the space used from the screeen
-  let rowHeight = 35
-  if(availableHeight <= 0){
-  return 0;
-  }else{
-    let maxRows = Math.floor(availableHeight / rowHeight) ;
-    return maxRows; // returns the maximum rows that can fit into screen
-  }
+	const screenHeight = window.innerHeight; // calculates screen height
+	const availableHeight = screenHeight - 105 // subtracts the space used from the screeen
+	let rowHeight = 35
+	if (availableHeight <= 0) {
+		return 0;
+	} else {
+		let maxRows = Math.floor(availableHeight / rowHeight);
+		return maxRows; // returns the maximum rows that can fit into screen
+	}
 }
 
 let resizeTimeout: number;
 $(window).on('resize', async () => {
-  clearTimeout(resizeTimeout); // cancel previously schedule Timeout
-
-  resizeTimeout = setTimeout(async () => {
-    $('#loader').show()
-    calculatedRows = await adjustRowsByScreenHeight(); // to recalcualte the number of max rows
-    await displayRecords() 
-
-    let inputValue = $('#searchInput').val() ; // priotizes the search input value if available
-    if (inputValue !== '') {
-      await updateRecordsAndResize(Number(inputValue))
-    }
-    $('#loader').hide();
-  }, 500);
+	clearTimeout(resizeTimeout); // cancel previously schedule Timeout
+
+	resizeTimeout = setTimeout(async () => {
+		$('#loader').show()
+		calculatedRows = await adjustRowsByScreenHeight(); // to recalcualte the number of max rows
+		await displayRecords()
+
+		let inputValue = $('#searchInput').val(); // priotizes the search input value if available
+		if (inputValue !== '') {
+			await updateRecordsAndResize(Number(inputValue))
+		}
+		$('#loader').hide();
+	}, 500);
 })
 
 async function fetchRecords(from: number, to: number): Promise<any[]> { // fetches records from specified number to a certain number
-  const response = await fetch(`http://localhost:2050/records?from=${from}&to=${to}`);
-  if (!response.ok) {
-    throw new Error("Sorry, there's a problem with the network");
-  }
-  return response.json();
+	const response = await fetch(`http://localhost:2050/records?from=${from}&to=${to}`);
+	if (!response.ok) {
+		throw new Error("Sorry, there's a problem with the network");
+	}
+	return response.json();
 }
 
 async function displayRecords(): Promise<void> { //displays records from firstNumber to lastNumber
-  try {
-    $('#loader').show()
-    count = await fetchRecordCount() - 1;
-    calculatedRows = await adjustRowsByScreenHeight();
-    const inputValue = $('#searchInput').val() as number;
-    if(calculatedRows === 0){
-      lastNumber = firstNumber
-       
-      }
-    if (!lastNumber) {
-      lastNumber = firstNumber + (calculatedRows - 1);
-    }
-    if (firstNumber < 0) {
-      firstNumber = 0;
-      lastNumber = firstNumber + (calculatedRows - 1);
-    }
-    else {
-      lastNumber = firstNumber + (calculatedRows - 1);
-    }
-
-    let records;
-    if(lastNumber <= count && lastNumber >= 0){
-      records = await fetchRecords(firstNumber, lastNumber);
-      $('#page').empty();
-      $('#page').append(`Showing record: ${firstNumber} - ${lastNumber}`); // changes the record range showing
-      $('#loader').hide()
-    }else{
-      firstNumber = count - (calculatedRows-1)
-      lastNumber = count;
-      records = await fetchRecords(firstNumber, count);
-      $('#page').empty();
-      $('#page').append(`Showing record: ${firstNumber} - ${count}`);
-      $('#loader').hide()
-     
-    }
-   
-   
-    const tbody = $("tbody");
-    tbody.empty();
-    for (let r = 0; r < records.length; r++) {
-      $("tbody").append(`<tr class="row"></tr>`); // creates row for each record
-      const lastRow = $(".row:last");
-      for (let i = 0; i < records[r].length; i++) {
-        lastRow.append(`<td>${records[r][i]}</td>`); //assign each record to their column in a specified row
-      }
-      if (records[r].includes(inputValue)) {
-
-        lastRow.css('background-color', '#DDC0B4'); // hightlights the searched row
-
-      }
-      tbody.append(lastRow);
-    }
-  } catch (error) {
-    console.error("Error displaying records:", error);
-  }
+	try {
+		$('#loader').show()
+		count = await fetchRecordCount() - 1;
+		calculatedRows = await adjustRowsByScreenHeight();
+		const inputValue = $('#searchInput').val() as number;
+		if (calculatedRows === 0) {
+			lastNumber = firstNumber
+
+		}
+		if (!lastNumber) {
+			lastNumber = firstNumber + (calculatedRows - 1);
+		}
+		if (firstNumber < 0) {
+			firstNumber = 0;
+			lastNumber = firstNumber + (calculatedRows - 1);
+		}
+		else {
+			lastNumber = firstNumber + (calculatedRows - 1);
+		}
+
+		let records;
+		if (lastNumber <= count && lastNumber >= 0) {
+			records = await fetchRecords(firstNumber, lastNumber);
+			$('#page').empty();
+			$('#page').append(`Showing record: ${firstNumber} - ${lastNumber}`); // changes the record range showing
+			$('#loader').hide()
+		} else {
+			firstNumber = count - (calculatedRows - 1)
+			lastNumber = count;
+			records = await fetchRecords(firstNumber, count);
+			$('#page').empty();
+			$('#page').append(`Showing record: ${firstNumber} - ${count}`);
+			$('#loader').hide()
+
+		}
+
+
+		const tbody = $("tbody");
+		tbody.empty();
+		for (let r = 0; r < records.length; r++) {
+			$("tbody").append(`<tr class="row"></tr>`); // creates row for each record
+			const lastRow = $(".row:last");
+			for (let i = 0; i < records[r].length; i++) {
+				lastRow.append(`<td>${records[r][i]}</td>`); //assign each record to their column in a specified row
+			}
+			if (records[r].includes(inputValue)) {
+
+				lastRow.css('background-color', '#DDC0B4'); // hightlights the searched row
+
+			}
+			tbody.append(lastRow);
+		}
+	} catch (error) {
+		console.error("Error displaying records:", error);
+	}
 }
 displayRecords()
 
 async function updateRecordsAndResize(inputValue: number) { // calulates the range of records according to the search input
-  count = await fetchRecordCount() - 1;
-  if (inputValue < 0 || inputValue > count) { // check if the search input 
-    $('.modal').css('display', 'block') //opens modal if search input is not within range
-    $('.modal-content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`) 
-    $('#searchInput').val(''); // empties search bar
-    return;
-  }
-  calculatedRows = await adjustRowsByScreenHeight();
-  const quarterRange = Math.floor(calculatedRows / 2); // divides the calculated max rows in half 
-  
-  firstNumber = Math.max(0, inputValue - quarterRange);
-  lastNumber = Math.min(count, firstNumber + (calculatedRows - 1));
-  await displayRecords();
+	count = await fetchRecordCount() - 1;
+	if (inputValue < 0 || inputValue > count) { // check if the search input 
+		$('.modal').css('display', 'block') //opens modal if search input is not within range
+		$('.modal-content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`)
+		$('#searchInput').val(''); // empties search bar
+		return;
+	}
+	calculatedRows = await adjustRowsByScreenHeight();
+	const quarterRange = Math.floor(calculatedRows / 2); // divides the calculated max rows in half 
+
+	firstNumber = Math.max(0, inputValue - quarterRange);
+	lastNumber = Math.min(count, firstNumber + (calculatedRows - 1));
+	await displayRecords();
 }
 $('#closeModalBtn').on("click", () => {
-  $('.modal').css('display', 'none') // closes modal
+	$('.modal').css('display', 'none') // closes modal
 });
 $('.btnSearch').on('click', async (event: any) => {
-  event.preventDefault();
-  let inputValue = $('#searchInput').val() as number;
-  await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
-  
+	event.preventDefault();
+	let inputValue = $('#searchInput').val() as number;
+	await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
+
 });
 
 async function rightArrow(): Promise<void> { // moves records to the next list 
-  $('#searchInput').val('')
-  const lastRow = document.querySelector("#recordsTable tbody .row:last-child"); // retrieves the last row
-  count = await fetchRecordCount() - 1;
-  if (lastRow) { // checks if the last row exists
-    const cells = lastRow.querySelectorAll("td");
-    const lastRecord: string[] = [];
-    cells.forEach((cell) => {
-      lastRecord.push(cell.textContent || "");
-    });
-    const lastID = parseFloat(lastRecord[0]); // determines te value in the last row
-    if (0 <= lastID && lastID <= (count)) { // checks if the last value is within range
-      const tbody = $("tbody");
-      tbody.empty(); // empties the table
-      firstNumber = lastID + 1; // calculates the first number of the page
-      calculatedRows = await adjustRowsByScreenHeight();
-      lastNumber = firstNumber + (calculatedRows - 1) // calculates the first number of the page
-      await displayRecords(); // display the new records
-    }
-  }
+	$('#searchInput').val('')
+	const lastRow = document.querySelector("#recordsTable tbody .row:last-child"); // retrieves the last row
+	count = await fetchRecordCount() - 1;
+	if (lastRow) { // checks if the last row exists
+		const cells = lastRow.querySelectorAll("td");
+		const lastRecord: string[] = [];
+		cells.forEach((cell) => {
+			lastRecord.push(cell.textContent || "");
+		});
+		const lastID = parseFloat(lastRecord[0]); // determines te value in the last row
+		if (0 <= lastID && lastID <= (count)) { // checks if the last value is within range
+			const tbody = $("tbody");
+			tbody.empty(); // empties the table
+			firstNumber = lastID + 1; // calculates the first number of the page
+			calculatedRows = await adjustRowsByScreenHeight();
+			lastNumber = firstNumber + (calculatedRows - 1) // calculates the first number of the page
+			await displayRecords(); // display the new records
+		}
+	}
 }
 
 async function leftArrow(): Promise<void> { // moves records to the previous list 
-  $('#searchInput').val('')
-  count = await fetchRecordCount() - 1;
-  const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); // retrieves the first row
-  if (firstRow) { // checks if the first row exists
-    const cells = firstRow.querySelectorAll("td");
-    const firstRecord: string[] = [];
-    cells.forEach((cell) => {
-      firstRecord.push(cell.textContent || "");
-    });
-    const firstID = parseFloat(firstRecord[0]); // determines te value in the first row
-    if (0 <= firstID && firstID <= (count)) { // checks if the first value is within range
-      const tbody = $("tbody");
-      tbody.empty(); // empties the table
-      const calculatedRows = await adjustRowsByScreenHeight();
-      lastNumber = firstID - 1; // calculates the last number of the page
-      firstNumber = lastNumber - (calculatedRows - 1) // uses the last number to calculate
-      await displayRecords();
-    }
-  }
+	$('#searchInput').val('')
+	count = await fetchRecordCount() - 1;
+	const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); // retrieves the first row
+	if (firstRow) { // checks if the first row exists
+		const cells = firstRow.querySelectorAll("td");
+		const firstRecord: string[] = [];
+		cells.forEach((cell) => {
+			firstRecord.push(cell.textContent || "");
+		});
+		const firstID = parseFloat(firstRecord[0]); // determines te value in the first row
+		if (0 <= firstID && firstID <= (count)) { // checks if the first value is within range
+			const tbody = $("tbody");
+			tbody.empty(); // empties the table
+			const calculatedRows = await adjustRowsByScreenHeight();
+			lastNumber = firstID - 1; // calculates the last number of the page
+			firstNumber = lastNumber - (calculatedRows - 1) // uses the last number to calculate
+			await displayRecords();
+		}
+	}
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

From 1f6c3a3300db7456248bf8f2f74437ca47d97986 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Mon, 28 Aug 2023 13:10:43 +0200
Subject: [PATCH 08/33] review changes

---
 app.ts | 68 ++++++++++++++++++++++------------------------------------
 1 file changed, 26 insertions(+), 42 deletions(-)

diff --git a/app.ts b/app.ts
index 748b82a3..c40bcfc0 100644
--- a/app.ts
+++ b/app.ts
@@ -1,10 +1,9 @@
 import { ajax, css } from "jquery";
-var firstNumber: number = 0;
-var lastNumber: number;
-var calculatedRows: number | null = null;
-var count: number | null = null;
+let firstNumber: number = 0;
+let lastNumber: number = 0;
 
-async function fetchRecordCount(): Promise<number> { // fetches the number of records from the server
+
+async function fetchRecordCount(): Promise<number> {
 	try {
 		const recordCount = await fetch(`http://localhost:2050/recordCount`);
 		if (!recordCount.ok) {
@@ -18,42 +17,38 @@ async function fetchRecordCount(): Promise<number> { // fetches the number of re
 	}
 }
 
-function fetchColumns(): void { //fetches the different columns headings from server
+function fetchColumns(): void {
 	fetch("http://localhost:2050/columns")
 		.then((response: Response) => {
 			return response.json() as Promise<string[]>;
 		})
 		.then((columns: string[]) => {
-			const colArray = columns; // assigns the columns to an array
+			const colArray = columns;
 
 			for (let c = 0; c < colArray.length; c++) {
-				$(".head").append(`<th>${colArray[c]}</th>`); // creates a single column for each heading
+				$(".head").append(`<th>${colArray[c]}</th>`);
 			}
 		})
 }
 fetchColumns()
 
-async function adjustRowsByScreenHeight(): Promise<number> { // calculates the number of rows that can fit the screen
-	const screenHeight = window.innerHeight; // calculates screen height
+function adjustRowsByScreenHeight() {
+	const screenHeight = window.innerHeight;
 	const availableHeight = screenHeight - 105 // subtracts the space used from the screeen
 	let rowHeight = 35
 	if (availableHeight <= 0) {
 		return 0;
 	} else {
 		let maxRows = Math.floor(availableHeight / rowHeight);
-		return maxRows; // returns the maximum rows that can fit into screen
+		return maxRows;
 	}
 }
 
-let resizeTimeout: number;
 $(window).on('resize', async () => {
-	clearTimeout(resizeTimeout); // cancel previously schedule Timeout
-
+	let resizeTimeout: number;
 	resizeTimeout = setTimeout(async () => {
 		$('#loader').show()
-		calculatedRows = await adjustRowsByScreenHeight(); // to recalcualte the number of max rows
 		await displayRecords()
-
 		let inputValue = $('#searchInput').val(); // priotizes the search input value if available
 		if (inputValue !== '') {
 			await updateRecordsAndResize(Number(inputValue))
@@ -62,7 +57,7 @@ $(window).on('resize', async () => {
 	}, 500);
 })
 
-async function fetchRecords(from: number, to: number): Promise<any[]> { // fetches records from specified number to a certain number
+async function fetchRecords(from: number, to: number): Promise<any[]> {
 	const response = await fetch(`http://localhost:2050/records?from=${from}&to=${to}`);
 	if (!response.ok) {
 		throw new Error("Sorry, there's a problem with the network");
@@ -70,27 +65,21 @@ async function fetchRecords(from: number, to: number): Promise<any[]> { // fetch
 	return response.json();
 }
 
-async function displayRecords(): Promise<void> { //displays records from firstNumber to lastNumber
+async function displayRecords(): Promise<void> {
 	try {
 		$('#loader').show()
-		count = await fetchRecordCount() - 1;
-		calculatedRows = await adjustRowsByScreenHeight();
+		let count = await fetchRecordCount() - 1;
+		let calculatedRows = adjustRowsByScreenHeight();
 		const inputValue = $('#searchInput').val() as number;
 		if (calculatedRows === 0) {
 			lastNumber = firstNumber
-
-		}
-		if (!lastNumber) {
-			lastNumber = firstNumber + (calculatedRows - 1);
 		}
 		if (firstNumber < 0) {
 			firstNumber = 0;
 			lastNumber = firstNumber + (calculatedRows - 1);
-		}
-		else {
+		} else {
 			lastNumber = firstNumber + (calculatedRows - 1);
 		}
-
 		let records;
 		if (lastNumber <= count && lastNumber >= 0) {
 			records = await fetchRecords(firstNumber, lastNumber);
@@ -104,10 +93,7 @@ async function displayRecords(): Promise<void> { //displays records from firstNu
 			$('#page').empty();
 			$('#page').append(`Showing record: ${firstNumber} - ${count}`);
 			$('#loader').hide()
-
 		}
-
-
 		const tbody = $("tbody");
 		tbody.empty();
 		for (let r = 0; r < records.length; r++) {
@@ -117,9 +103,7 @@ async function displayRecords(): Promise<void> { //displays records from firstNu
 				lastRow.append(`<td>${records[r][i]}</td>`); //assign each record to their column in a specified row
 			}
 			if (records[r].includes(inputValue)) {
-
 				lastRow.css('background-color', '#DDC0B4'); // hightlights the searched row
-
 			}
 			tbody.append(lastRow);
 		}
@@ -129,35 +113,35 @@ async function displayRecords(): Promise<void> { //displays records from firstNu
 }
 displayRecords()
 
-async function updateRecordsAndResize(inputValue: number) { // calulates the range of records according to the search input
-	count = await fetchRecordCount() - 1;
+async function updateRecordsAndResize(inputValue: number) {
+	let count = await fetchRecordCount() - 1;
 	if (inputValue < 0 || inputValue > count) { // check if the search input 
 		$('.modal').css('display', 'block') //opens modal if search input is not within range
 		$('.modal-content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`)
 		$('#searchInput').val(''); // empties search bar
 		return;
 	}
-	calculatedRows = await adjustRowsByScreenHeight();
+	let calculatedRows = adjustRowsByScreenHeight();
 	const quarterRange = Math.floor(calculatedRows / 2); // divides the calculated max rows in half 
-
 	firstNumber = Math.max(0, inputValue - quarterRange);
 	lastNumber = Math.min(count, firstNumber + (calculatedRows - 1));
 	await displayRecords();
 }
+
 $('#closeModalBtn').on("click", () => {
 	$('.modal').css('display', 'none') // closes modal
 });
+
 $('.btnSearch').on('click', async (event: any) => {
 	event.preventDefault();
 	let inputValue = $('#searchInput').val() as number;
 	await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
-
 });
 
-async function rightArrow(): Promise<void> { // moves records to the next list 
+async function rightArrow(): Promise<void> {
 	$('#searchInput').val('')
 	const lastRow = document.querySelector("#recordsTable tbody .row:last-child"); // retrieves the last row
-	count = await fetchRecordCount() - 1;
+	let count = await fetchRecordCount() - 1;
 	if (lastRow) { // checks if the last row exists
 		const cells = lastRow.querySelectorAll("td");
 		const lastRecord: string[] = [];
@@ -169,16 +153,16 @@ async function rightArrow(): Promise<void> { // moves records to the next list
 			const tbody = $("tbody");
 			tbody.empty(); // empties the table
 			firstNumber = lastID + 1; // calculates the first number of the page
-			calculatedRows = await adjustRowsByScreenHeight();
+			let calculatedRows = await adjustRowsByScreenHeight();
 			lastNumber = firstNumber + (calculatedRows - 1) // calculates the first number of the page
 			await displayRecords(); // display the new records
 		}
 	}
 }
 
-async function leftArrow(): Promise<void> { // moves records to the previous list 
+async function leftArrow(): Promise<void> {
 	$('#searchInput').val('')
-	count = await fetchRecordCount() - 1;
+	let count = await fetchRecordCount() - 1;
 	const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); // retrieves the first row
 	if (firstRow) { // checks if the first row exists
 		const cells = firstRow.querySelectorAll("td");

From eef44e5cd8096dc375f4edb2ef10bd61ad5b8f98 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 29 Aug 2023 08:17:00 +0200
Subject: [PATCH 09/33] update requested changes

---
 app.ts | 131 ++++++++++++++++++++++++++++++++-------------------------
 1 file changed, 73 insertions(+), 58 deletions(-)

diff --git a/app.ts b/app.ts
index c40bcfc0..72d1accb 100644
--- a/app.ts
+++ b/app.ts
@@ -1,48 +1,59 @@
 import { ajax, css } from "jquery";
-let firstNumber: number = 0;
-let lastNumber: number = 0;
-
+let firstNumber = 0;
+let lastNumber = 0;
+let backend: string = "http://localhost:2050";
 
 async function fetchRecordCount(): Promise<number> {
 	try {
-		const recordCount = await fetch(`http://localhost:2050/recordCount`);
-		if (!recordCount.ok) {
+		const response = await fetch(`${backend}/recordCount`);
+		if (!response.ok) {
 			throw new Error('Failed to fetch record count');
 		}
-		const data = await recordCount.json()
-		return data;
+		return response.json()
 	} catch (error) {
 		console.error('Error fetching the record count:', error);
 		throw error;
-	}
-}
+	};
+};
 
-function fetchColumns(): void {
-	fetch("http://localhost:2050/columns")
-		.then((response: Response) => {
-			return response.json() as Promise<string[]>;
-		})
-		.then((columns: string[]) => {
-			const colArray = columns;
+async function fetchColumns(): Promise<string[]> {
+	try {
+		const response = await fetch(`${backend}/columns`);
+		if (!response.ok) {
+			throw new Error('Failed to fetch columns');
+		}
+		const jsonText = await response.text();
+		const columns: string[] = await JSON.parse(jsonText);
+		return columns
+	} catch (error) {
+		console.error('Error fetching columns', error)
+		throw error
+	};
+};
 
-			for (let c = 0; c < colArray.length; c++) {
-				$(".head").append(`<th>${colArray[c]}</th>`);
-			}
-		})
-}
-fetchColumns()
+async function createTable() {
+	try {
+		const columns = await fetchColumns()
+		for (const col of columns) {
+			$(".head").append(`<th>${col}</th>`);
+		}
+	} catch (error) {
+		console.error('Error creating table', error)
+	};
+};
+createTable()
 
 function adjustRowsByScreenHeight() {
 	const screenHeight = window.innerHeight;
-	const availableHeight = screenHeight - 105 // subtracts the space used from the screeen
-	let rowHeight = 35
+	const availableHeight = screenHeight - 105; // subtracts the space used from the screeen
+	let rowHeight = 35;
 	if (availableHeight <= 0) {
 		return 0;
 	} else {
 		let maxRows = Math.floor(availableHeight / rowHeight);
 		return maxRows;
-	}
-}
+	};
+};
 
 $(window).on('resize', async () => {
 	let resizeTimeout: number;
@@ -55,15 +66,20 @@ $(window).on('resize', async () => {
 		}
 		$('#loader').hide();
 	}, 500);
-})
+});
 
 async function fetchRecords(from: number, to: number): Promise<any[]> {
-	const response = await fetch(`http://localhost:2050/records?from=${from}&to=${to}`);
-	if (!response.ok) {
-		throw new Error("Sorry, there's a problem with the network");
+	try {
+		const response = await fetch(`${backend}/records?from=${from}&to=${to}`);
+		if (!response.ok) {
+			throw new Error("Sorry, there's a problem with the network");
+		}
+		return response.json();
+	} catch (error) {
+		console.error('Error fetching records from server', error);
+		throw error
 	}
-	return response.json();
-}
+};
 
 async function displayRecords(): Promise<void> {
 	try {
@@ -73,8 +89,7 @@ async function displayRecords(): Promise<void> {
 		const inputValue = $('#searchInput').val() as number;
 		if (calculatedRows === 0) {
 			lastNumber = firstNumber
-		}
-		if (firstNumber < 0) {
+		} else if (firstNumber < 0) {
 			firstNumber = 0;
 			lastNumber = firstNumber + (calculatedRows - 1);
 		} else {
@@ -93,24 +108,24 @@ async function displayRecords(): Promise<void> {
 			$('#page').empty();
 			$('#page').append(`Showing record: ${firstNumber} - ${count}`);
 			$('#loader').hide()
-		}
+		};
 		const tbody = $("tbody");
 		tbody.empty();
-		for (let r = 0; r < records.length; r++) {
+		for (const record of records) {
 			$("tbody").append(`<tr class="row"></tr>`); // creates row for each record
 			const lastRow = $(".row:last");
-			for (let i = 0; i < records[r].length; i++) {
-				lastRow.append(`<td>${records[r][i]}</td>`); //assign each record to their column in a specified row
+			for (const value of record) {
+				lastRow.append(`<td>${value}</td>`); // assign each record to their column in a specified row
 			}
-			if (records[r].includes(inputValue)) {
-				lastRow.css('background-color', '#DDC0B4'); // hightlights the searched row
+			if (record.includes(inputValue)) {
+				lastRow.css('background-color', '#DDC0B4'); // highlights the searched row
 			}
-			tbody.append(lastRow);
+			$("tbody").append(lastRow);
 		}
 	} catch (error) {
 		console.error("Error displaying records:", error);
-	}
-}
+	};
+};
 displayRecords()
 
 async function updateRecordsAndResize(inputValue: number) {
@@ -126,7 +141,7 @@ async function updateRecordsAndResize(inputValue: number) {
 	firstNumber = Math.max(0, inputValue - quarterRange);
 	lastNumber = Math.min(count, firstNumber + (calculatedRows - 1));
 	await displayRecords();
-}
+};
 
 $('#closeModalBtn').on("click", () => {
 	$('.modal').css('display', 'none') // closes modal
@@ -144,21 +159,21 @@ async function rightArrow(): Promise<void> {
 	let count = await fetchRecordCount() - 1;
 	if (lastRow) { // checks if the last row exists
 		const cells = lastRow.querySelectorAll("td");
-		const lastRecord: string[] = [];
-		cells.forEach((cell) => {
+		const lastRecord = [];
+		for (const cell of Array.from(cells)) {
 			lastRecord.push(cell.textContent || "");
-		});
+		}
 		const lastID = parseFloat(lastRecord[0]); // determines te value in the last row
 		if (0 <= lastID && lastID <= (count)) { // checks if the last value is within range
 			const tbody = $("tbody");
 			tbody.empty(); // empties the table
 			firstNumber = lastID + 1; // calculates the first number of the page
-			let calculatedRows = await adjustRowsByScreenHeight();
+			let calculatedRows = adjustRowsByScreenHeight();
 			lastNumber = firstNumber + (calculatedRows - 1) // calculates the first number of the page
 			await displayRecords(); // display the new records
-		}
-	}
-}
+		};
+	};
+};
 
 async function leftArrow(): Promise<void> {
 	$('#searchInput').val('')
@@ -166,18 +181,18 @@ async function leftArrow(): Promise<void> {
 	const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); // retrieves the first row
 	if (firstRow) { // checks if the first row exists
 		const cells = firstRow.querySelectorAll("td");
-		const firstRecord: string[] = [];
-		cells.forEach((cell) => {
+		const firstRecord = [];
+		for (const cell of Array.from(cells)) {
 			firstRecord.push(cell.textContent || "");
-		});
+		}
 		const firstID = parseFloat(firstRecord[0]); // determines te value in the first row
 		if (0 <= firstID && firstID <= (count)) { // checks if the first value is within range
 			const tbody = $("tbody");
 			tbody.empty(); // empties the table
-			const calculatedRows = await adjustRowsByScreenHeight();
+			const calculatedRows = adjustRowsByScreenHeight();
 			lastNumber = firstID - 1; // calculates the last number of the page
 			firstNumber = lastNumber - (calculatedRows - 1) // uses the last number to calculate
 			await displayRecords();
-		}
-	}
-}
+		};
+	};
+};

From 097c7c1b0ccb6cf214b6993987205863585ba8c6 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 29 Aug 2023 08:37:53 +0200
Subject: [PATCH 10/33] update requested changes, index and style

---
 index.html | 18 +-----------------
 style.css  | 31 ++-----------------------------
 2 files changed, 3 insertions(+), 46 deletions(-)

diff --git a/index.html b/index.html
index 571fc4fb..73656c61 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,8 @@
 	<title>JS Onboard Project</title>
 	<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
 	<link rel="stylesheet" href="style.css">
+	<script src="app.js"></script>
 </head>
-
 <body>
 	<div id="loader" ></div>
 	<h1 class="heading">OnBoard-Javascript</h1>
@@ -15,40 +15,24 @@ <h1 class="heading">OnBoard-Javascript</h1>
             <p></p>
         </div>
     </div>
-
 	<div class="search-container">
 		<form id="searchForm">
 			<input type="number" id="searchInput" placeholder="Search.." name="search" autocomplete="off">
 			<button class="btnSearch" type="submit">Submit</button>	
 		  </form>
 	</div>
-
 	<div class="showRecords">
 		<button onclick="rightArrow()" class="arrow-right"></button>
 		<div id="page"></div>
 		<button onclick="leftArrow()" class="arrow-left"></button>
 		</div>
-	
-	
-
-	
-
-
-  
 	<table id="recordsTable">
 		<thead>
 		  <tr class="head">
 		  </tr>
 		</thead>
-		
 		<tbody>
-			
 		</tbody>
 	</table>
- 
-	  
-	<script src="app.js"></script>
 </body>
-
 </html>
-
diff --git a/style.css b/style.css
index 96db0c4c..d41f2d10 100644
--- a/style.css
+++ b/style.css
@@ -4,30 +4,19 @@ body{
   padding: 0;
   margin: 0;
 }
-
-
-
 tbody .row td{
   padding: 0.5rem;
 }
-
-
-
 table{
     width: 100%;
     table-layout: fixed;
-    
-   
 }
 table, th, td {
     border: 1px solid #4B3832;
     border-collapse: collapse;
     text-align: center; 
     min-height: 1rem;
-
-    color: black;
-    
-    
+    color: black;   
 }
 #recordsTable thead .head {
   position: sticky;
@@ -35,13 +24,10 @@ table, th, td {
   border: 2px solid black;
   top:0;
 }
-
-
 td:hover{
     color: #97694F;
     background-color:#DDC0B4;
-  }
-
+}
 .heading  {
    text-align: center;
    text-decoration: underline;
@@ -62,7 +48,6 @@ td:hover{
   border: none;
   background-color: transparent;
 }
-
 .arrow-right,
 .arrow-left{
   display: inline-block;
@@ -71,22 +56,18 @@ td:hover{
   border-top: 5px solid #4B3832;
   border-left: 5px solid #4B3832;
 }
-
 .arrow-right,
 .arrow-left:hover {
   color: #97694F;
 }
-
 .arrow-right{
  transform: rotate(135deg);
  float: right;
 }
-
 .arrow-left{
  transform: rotate(-45deg);
  float: left;
 }
-
 .search-container {
   left:0;
   position: absolute;
@@ -120,9 +101,7 @@ td:hover{
   height: 100px;
   animation: spin 2s linear infinite;
   background-color: #f7e7ce;
-  
 }
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -141,7 +120,6 @@ td:hover{
   background-color: #f7e7ce;
   border: 1px solid #4B3832;
 }
-
 .modal-content {
   background-color: #4B3832;
   margin: 1rem;
@@ -150,14 +128,9 @@ td:hover{
   color: #f7e7ce;
   font-size: 1.5rem;
 }
-
 .close {
   float: right;
   font-size: rem;
   font-weight: bold;
   cursor: pointer;
 }
-
-
-
-

From 3e38dff34e11c4c8826ce617f4c5f809efb50168 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 29 Aug 2023 11:44:50 +0200
Subject: [PATCH 11/33] update search

---
 app.ts     | 17 +++++++++++------
 index.html |  6 +++---
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app.ts b/app.ts
index 72d1accb..56e1a90d 100644
--- a/app.ts
+++ b/app.ts
@@ -132,25 +132,30 @@ async function updateRecordsAndResize(inputValue: number) {
 	let count = await fetchRecordCount() - 1;
 	if (inputValue < 0 || inputValue > count) { // check if the search input 
 		$('.modal').css('display', 'block') //opens modal if search input is not within range
-		$('.modal-content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`)
+		$('.content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`)
 		$('#searchInput').val(''); // empties search bar
 		return;
 	}
 	let calculatedRows = adjustRowsByScreenHeight();
-	const quarterRange = Math.floor(calculatedRows / 2); // divides the calculated max rows in half 
-	firstNumber = Math.max(0, inputValue - quarterRange);
+	const halfRange = Math.floor(calculatedRows / 2); // divides the calculated max rows in half 
+	firstNumber = Math.max(0, inputValue - halfRange);
 	lastNumber = Math.min(count, firstNumber + (calculatedRows - 1));
 	await displayRecords();
 };
 
 $('#closeModalBtn').on("click", () => {
+	$('.content').empty()
 	$('.modal').css('display', 'none') // closes modal
 });
 
-$('.btnSearch').on('click', async (event: any) => {
+$('#btnSearch').on("click", async (event) => {
 	event.preventDefault();
-	let inputValue = $('#searchInput').val() as number;
-	await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
+	try {
+		let inputValue = $('#searchInput').val() as number;
+		await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
+	} catch (error) {
+		console.error('An error occurred:', error);
+	}
 });
 
 async function rightArrow(): Promise<void> {
diff --git a/index.html b/index.html
index 73656c61..acc00c9c 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 	<title>JS Onboard Project</title>
 	<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
 	<link rel="stylesheet" href="style.css">
-	<script src="app.js"></script>
+	<script src="app.js" defer></script>
 </head>
 <body>
 	<div id="loader" ></div>
@@ -12,13 +12,13 @@ <h1 class="heading">OnBoard-Javascript</h1>
 	<div id="modal" class="modal">
         <div class="modal-content">
             <span id="closeModalBtn" class="close">&times;</span>
-            <p></p>
+            <p class="content"></p>
         </div>
     </div>
 	<div class="search-container">
 		<form id="searchForm">
 			<input type="number" id="searchInput" placeholder="Search.." name="search" autocomplete="off">
-			<button class="btnSearch" type="submit">Submit</button>	
+			<button id="btnSearch" class="btnSearch" type="submit">Submit</button>	
 		  </form>
 	</div>
 	<div class="showRecords">

From 3c23cb2af3921a5e6d8a5001b87dbcb4ab0a18f5 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Wed, 30 Aug 2023 08:19:11 +0200
Subject: [PATCH 12/33] first push 30/08

---
 app.ts     |  70 +++++++-------
 index.html |  27 +++---
 style.css  | 265 +++++++++++++++++++++++++++++------------------------
 3 files changed, 194 insertions(+), 168 deletions(-)

diff --git a/app.ts b/app.ts
index 56e1a90d..bb34b137 100644
--- a/app.ts
+++ b/app.ts
@@ -3,6 +3,24 @@ let firstNumber = 0;
 let lastNumber = 0;
 let backend: string = "http://localhost:2050";
 
+window.onload = () => {
+	createTable();
+	displayRecords();
+	$('#btnSearch').on("click", async (event) => {
+		event.preventDefault();
+		try {
+			let inputValue = $('#searchInput').val() as number;
+			await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
+		} catch (error) {
+			throw new Error('An error occurred')
+		}
+	});
+	$('#closeModalBtn').on("click", () => {
+		$('.content').empty()
+		$('.modal').css('display', 'none') // closes modal
+	});
+}
+
 async function fetchRecordCount(): Promise<number> {
 	try {
 		const response = await fetch(`${backend}/recordCount`);
@@ -11,8 +29,7 @@ async function fetchRecordCount(): Promise<number> {
 		}
 		return response.json()
 	} catch (error) {
-		console.error('Error fetching the record count:', error);
-		throw error;
+		throw new Error('Error fetching the record count')
 	};
 };
 
@@ -26,22 +43,20 @@ async function fetchColumns(): Promise<string[]> {
 		const columns: string[] = await JSON.parse(jsonText);
 		return columns
 	} catch (error) {
-		console.error('Error fetching columns', error)
-		throw error
+		throw new Error('Error fetching columns')
 	};
 };
 
 async function createTable() {
 	try {
-		const columns = await fetchColumns()
+		const columns = await fetchColumns();
 		for (const col of columns) {
 			$(".head").append(`<th>${col}</th>`);
 		}
 	} catch (error) {
-		console.error('Error creating table', error)
+		throw new Error('Error creating table');
 	};
 };
-createTable()
 
 function adjustRowsByScreenHeight() {
 	const screenHeight = window.innerHeight;
@@ -76,14 +91,13 @@ async function fetchRecords(from: number, to: number): Promise<any[]> {
 		}
 		return response.json();
 	} catch (error) {
-		console.error('Error fetching records from server', error);
-		throw error
+		throw new Error('Error fetching records from server');
 	}
 };
 
 async function displayRecords(): Promise<void> {
 	try {
-		$('#loader').show()
+		$('#loader').show();
 		let count = await fetchRecordCount() - 1;
 		let calculatedRows = adjustRowsByScreenHeight();
 		const inputValue = $('#searchInput').val() as number;
@@ -100,14 +114,14 @@ async function displayRecords(): Promise<void> {
 			records = await fetchRecords(firstNumber, lastNumber);
 			$('#page').empty();
 			$('#page').append(`Showing record: ${firstNumber} - ${lastNumber}`); // changes the record range showing
-			$('#loader').hide()
+			$('#loader').hide();
 		} else {
-			firstNumber = count - (calculatedRows - 1)
+			firstNumber = count - (calculatedRows - 1);
 			lastNumber = count;
 			records = await fetchRecords(firstNumber, count);
 			$('#page').empty();
 			$('#page').append(`Showing record: ${firstNumber} - ${count}`);
-			$('#loader').hide()
+			$('#loader').hide();
 		};
 		const tbody = $("tbody");
 		tbody.empty();
@@ -123,16 +137,15 @@ async function displayRecords(): Promise<void> {
 			$("tbody").append(lastRow);
 		}
 	} catch (error) {
-		console.error("Error displaying records:", error);
+		throw new Error('Error displaying records')
 	};
 };
-displayRecords()
 
 async function updateRecordsAndResize(inputValue: number) {
 	let count = await fetchRecordCount() - 1;
 	if (inputValue < 0 || inputValue > count) { // check if the search input 
-		$('.modal').css('display', 'block') //opens modal if search input is not within range
-		$('.content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`)
+		$('.modal').css('display', 'block');//opens modal if search input is not within range
+		$('.content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`);
 		$('#searchInput').val(''); // empties search bar
 		return;
 	}
@@ -143,23 +156,8 @@ async function updateRecordsAndResize(inputValue: number) {
 	await displayRecords();
 };
 
-$('#closeModalBtn').on("click", () => {
-	$('.content').empty()
-	$('.modal').css('display', 'none') // closes modal
-});
-
-$('#btnSearch').on("click", async (event) => {
-	event.preventDefault();
-	try {
-		let inputValue = $('#searchInput').val() as number;
-		await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
-	} catch (error) {
-		console.error('An error occurred:', error);
-	}
-});
-
 async function rightArrow(): Promise<void> {
-	$('#searchInput').val('')
+	$('#searchInput').val('');
 	const lastRow = document.querySelector("#recordsTable tbody .row:last-child"); // retrieves the last row
 	let count = await fetchRecordCount() - 1;
 	if (lastRow) { // checks if the last row exists
@@ -174,14 +172,14 @@ async function rightArrow(): Promise<void> {
 			tbody.empty(); // empties the table
 			firstNumber = lastID + 1; // calculates the first number of the page
 			let calculatedRows = adjustRowsByScreenHeight();
-			lastNumber = firstNumber + (calculatedRows - 1) // calculates the first number of the page
+			lastNumber = firstNumber + (calculatedRows - 1);// calculates the first number of the page
 			await displayRecords(); // display the new records
 		};
 	};
 };
 
 async function leftArrow(): Promise<void> {
-	$('#searchInput').val('')
+	$('#searchInput').val('');
 	let count = await fetchRecordCount() - 1;
 	const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); // retrieves the first row
 	if (firstRow) { // checks if the first row exists
@@ -196,7 +194,7 @@ async function leftArrow(): Promise<void> {
 			tbody.empty(); // empties the table
 			const calculatedRows = adjustRowsByScreenHeight();
 			lastNumber = firstID - 1; // calculates the last number of the page
-			firstNumber = lastNumber - (calculatedRows - 1) // uses the last number to calculate
+			firstNumber = lastNumber - (calculatedRows - 1); // uses the last number to calculate
 			await displayRecords();
 		};
 	};
diff --git a/index.html b/index.html
index acc00c9c..c7e9ef00 100644
--- a/index.html
+++ b/index.html
@@ -1,38 +1,41 @@
 <!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>
 	<link rel="stylesheet" href="style.css">
-	<script src="app.js" defer></script>
+	<script src="/app.js" ></script>
 </head>
+
 <body>
-	<div id="loader" ></div>
+	<div id="loader"></div>
 	<h1 class="heading">OnBoard-Javascript</h1>
 	<div id="modal" class="modal">
-        <div class="modal-content">
-            <span id="closeModalBtn" class="close">&times;</span>
-            <p class="content"></p>
-        </div>
-    </div>
+		<div class="modal-content">
+			<span id="closeModalBtn" class="close">&times;</span>
+			<p class="content"></p>
+		</div>
+	</div>
 	<div class="search-container">
 		<form id="searchForm">
 			<input type="number" id="searchInput" placeholder="Search.." name="search" autocomplete="off">
-			<button id="btnSearch" class="btnSearch" type="submit">Submit</button>	
-		  </form>
+			<button id="btnSearch" class="btnSearch" >Submit</button>
+		</form>
 	</div>
 	<div class="showRecords">
 		<button onclick="rightArrow()" class="arrow-right"></button>
 		<div id="page"></div>
 		<button onclick="leftArrow()" class="arrow-left"></button>
-		</div>
+	</div>
 	<table id="recordsTable">
 		<thead>
-		  <tr class="head">
-		  </tr>
+			<tr class="head">
+			</tr>
 		</thead>
 		<tbody>
 		</tbody>
 	</table>
 </body>
+
 </html>
diff --git a/style.css b/style.css
index d41f2d10..590d170b 100644
--- a/style.css
+++ b/style.css
@@ -1,136 +1,161 @@
-body{
-  overflow: hidden;
-  background-color: #f7e7ce;
-  padding: 0;
-  margin: 0;
-}
-tbody .row td{
-  padding: 0.5rem;
-}
-table{
-    width: 100%;
-    table-layout: fixed;
-}
-table, th, td {
-    border: 1px solid #4B3832;
-    border-collapse: collapse;
-    text-align: center; 
-    min-height: 1rem;
-    color: black;   
-}
+body {
+	overflow: hidden;
+	background-color: #f7e7ce;
+	padding: 0;
+	margin: 0;
+}
+
+tbody .row td {
+	padding: 0.5rem;
+}
+
+table {
+	width: 100%;
+	table-layout: fixed;
+}
+
+table,
+th,
+td {
+	border: 1px solid #4B3832;
+	border-collapse: collapse;
+	text-align: center;
+	min-height: 1rem;
+	color: black;
+}
+
 #recordsTable thead .head {
-  position: sticky;
-  background-color: #97694F;
-  border: 2px solid black;
-  top:0;
-}
-td:hover{
-    color: #97694F;
-    background-color:#DDC0B4;
-}
-.heading  {
-   text-align: center;
-   text-decoration: underline;
-   color: #4B3832;
-}
-.showRecords{
-  top: 0.8%;
-  right: 0;
-  padding: 1rem;
-  position: absolute;
-}
-.showRecords #page{
-  display: inline-block;
-  font-size: 1.2rem;
-}
-.arrow-right,
-.arrow-left{
-  border: none;
-  background-color: transparent;
-}
+	position: sticky;
+	background-color: #97694F;
+	border: 2px solid black;
+	top: 0;
+}
+
+td:hover {
+	color: #97694F;
+	background-color: #DDC0B4;
+}
+
+.heading {
+	text-align: center;
+	text-decoration: underline;
+	color: #4B3832;
+}
+
+.showRecords {
+	top: 0.8%;
+	right: 0;
+	padding: 1rem;
+	position: absolute;
+}
+
+.showRecords #page {
+	display: inline-block;
+	font-size: 1.2rem;
+}
+
 .arrow-right,
-.arrow-left{
-  display: inline-block;
-  width: 25px;
-  height: 25px;
-  border-top: 5px solid #4B3832;
-  border-left: 5px solid #4B3832;
+.arrow-left {
+	border: none;
+	background-color: transparent;
 }
+
 .arrow-right,
+.arrow-left {
+	display: inline-block;
+	width: 25px;
+	height: 25px;
+	border-top: 5px solid #4B3832;
+	border-left: 5px solid #4B3832;
+}
+
+.arrow-right:hover,
 .arrow-left:hover {
-  color: #97694F;
+	color: black;
+	
 }
-.arrow-right{
- transform: rotate(135deg);
- float: right;
+
+.arrow-right {
+	transform: rotate(135deg);
+	float: right;
 }
-.arrow-left{
- transform: rotate(-45deg);
- float: left;
+
+.arrow-left {
+	transform: rotate(-45deg);
+	float: left;
 }
+
 .search-container {
-  left:0;
-  position: absolute;
-  top: 2.15%;
+	left: 0;
+	position: absolute;
+	top: 2.15%;
 }
+
 .search-container input[type=number] {
-  padding: 6px;
-  font-size: 1rem;
-  border: 2px solid #4B3832;
-  background-color: #f7e7ce;
- 
-}
-.btnSearch{
-  font-size: 1rem;
-  border: 2px solid #4B3832;
-  padding: 6px;
-  background-color:#97694F ;
-  color: #f7e7ce;
-} 
-#loader{
-  position: absolute;
-  left: 50%;
-  margin-left: -50px;
-  top: 50%;
-  margin-top: -50px;
-  border: calc(200px / 10) solid #97694F;
-  border-top: 20px solid #4B3832;
-  border-radius: 100%;
-  display:none;
-  width: 100px;
-  height: 100px;
-  animation: spin 2s linear infinite;
-  background-color: #f7e7ce;
-}
+	padding: 6px;
+	font-size: 1rem;
+	border: 2px solid #4B3832;
+	background-color: #f7e7ce;
+
+}
+
+.btnSearch {
+	font-size: 1rem;
+	border: 2px solid #4B3832;
+	padding: 6px;
+	background-color: #97694F;
+	color: #f7e7ce;
+}
+
+#loader {
+	position: absolute;
+	left: 50%;
+	margin-left: -50px;
+	top: 50%;
+	margin-top: -50px;
+	border: calc(200px / 10) solid #97694F;
+	border-top: 20px solid #4B3832;
+	border-radius: 100%;
+	display: none;
+	width: 100px;
+	height: 100px;
+	animation: spin 2s linear infinite;
+	background-color: #f7e7ce;
+}
+
 @keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
 .modal {
-  display: none;
-  position: fixed;
-  transform:translateX(50%);
-  z-index: 1;
-  top: 0;
-  width: 50%;
-  background-color: #f7e7ce;
-  border: 1px solid #4B3832;
-}
+	display: none;
+	position: fixed;
+	transform: translateX(50%);
+	z-index: 1;
+	top: 0;
+	width: 50%;
+	background-color: #f7e7ce;
+	border: 1px solid #4B3832;
+}
+
 .modal-content {
-  background-color: #4B3832;
-  margin: 1rem;
-  padding: 2rem;
-  border: 1px solid #DDC0B4;
-  color: #f7e7ce;
-  font-size: 1.5rem;
-}
+	background-color: #4B3832;
+	margin: 1rem;
+	padding: 2rem;
+	border: 1px solid #DDC0B4;
+	color: #f7e7ce;
+	font-size: 1.5rem;
+}
+
 .close {
-  float: right;
-  font-size: rem;
-  font-weight: bold;
-  cursor: pointer;
+	float: right;
+	font-size: rem;
+	font-weight: bold;
+	cursor: pointer;
 }

From d8792ca2c41f19f57c069bec0eef0a7ddaa4664f Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Wed, 30 Aug 2023 12:17:43 +0200
Subject: [PATCH 13/33] onclick

---
 app.ts     | 8 +++++++-
 index.html | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app.ts b/app.ts
index bb34b137..d4daa28d 100644
--- a/app.ts
+++ b/app.ts
@@ -19,7 +19,13 @@ window.onload = () => {
 		$('.content').empty()
 		$('.modal').css('display', 'none') // closes modal
 	});
-}
+	$('.arrow-right').on('click', () => {
+		rightArrow();
+	});	
+	$('.arrow-left').on('click', () => {
+		leftArrow();
+	});
+};
 
 async function fetchRecordCount(): Promise<number> {
 	try {
diff --git a/index.html b/index.html
index c7e9ef00..21b3407b 100644
--- a/index.html
+++ b/index.html
@@ -24,9 +24,9 @@ <h1 class="heading">OnBoard-Javascript</h1>
 		</form>
 	</div>
 	<div class="showRecords">
-		<button onclick="rightArrow()" class="arrow-right"></button>
+		<button class="arrow-right"></button>
 		<div id="page"></div>
-		<button onclick="leftArrow()" class="arrow-left"></button>
+		<button class="arrow-left"></button>
 	</div>
 	<table id="recordsTable">
 		<thead>

From 55837eb76737e82fe37850762026f73d5240b6e4 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Wed, 30 Aug 2023 15:35:08 +0200
Subject: [PATCH 14/33] last push 30/08

---
 app.ts     | 39 +++++++++++++++++++++++++--------------
 index.html |  2 +-
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/app.ts b/app.ts
index d4daa28d..3b563acd 100644
--- a/app.ts
+++ b/app.ts
@@ -8,12 +8,8 @@ window.onload = () => {
 	displayRecords();
 	$('#btnSearch').on("click", async (event) => {
 		event.preventDefault();
-		try {
-			let inputValue = $('#searchInput').val() as number;
-			await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
-		} catch (error) {
-			throw new Error('An error occurred')
-		}
+		let inputValue = $('#searchInput').val() as number;
+		await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
 	});
 	$('#closeModalBtn').on("click", () => {
 		$('.content').empty()
@@ -21,10 +17,21 @@ window.onload = () => {
 	});
 	$('.arrow-right').on('click', () => {
 		rightArrow();
-	});	
+	});
 	$('.arrow-left').on('click', () => {
 		leftArrow();
 	});
+	$('#searchInput').on('keydown', (event) => {
+		if (event.key === 'e' || event.key === 'E') {
+			event.preventDefault();
+		};
+	});
+	$('#searchInput').on('input', (event) => {
+		const inputValue = $('#searchInput').val() as string;
+		if (inputValue.includes('.')) {
+			$('#searchInput').val(inputValue.replace('.', ' '));
+		};
+	});
 };
 
 async function fetchRecordCount(): Promise<number> {
@@ -58,7 +65,7 @@ async function createTable() {
 		const columns = await fetchColumns();
 		for (const col of columns) {
 			$(".head").append(`<th>${col}</th>`);
-		}
+		};
 	} catch (error) {
 		throw new Error('Error creating table');
 	};
@@ -98,7 +105,7 @@ async function fetchRecords(from: number, to: number): Promise<any[]> {
 		return response.json();
 	} catch (error) {
 		throw new Error('Error fetching records from server');
-	}
+	};
 };
 
 async function displayRecords(): Promise<void> {
@@ -114,7 +121,7 @@ async function displayRecords(): Promise<void> {
 			lastNumber = firstNumber + (calculatedRows - 1);
 		} else {
 			lastNumber = firstNumber + (calculatedRows - 1);
-		}
+		};
 		let records;
 		if (lastNumber <= count && lastNumber >= 0) {
 			records = await fetchRecords(firstNumber, lastNumber);
@@ -143,7 +150,7 @@ async function displayRecords(): Promise<void> {
 			$("tbody").append(lastRow);
 		}
 	} catch (error) {
-		throw new Error('Error displaying records')
+		throw new Error('Error displaying records');
 	};
 };
 
@@ -154,7 +161,7 @@ async function updateRecordsAndResize(inputValue: number) {
 		$('.content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`);
 		$('#searchInput').val(''); // empties search bar
 		return;
-	}
+	};
 	let calculatedRows = adjustRowsByScreenHeight();
 	const halfRange = Math.floor(calculatedRows / 2); // divides the calculated max rows in half 
 	firstNumber = Math.max(0, inputValue - halfRange);
@@ -163,6 +170,7 @@ async function updateRecordsAndResize(inputValue: number) {
 };
 
 async function rightArrow(): Promise<void> {
+	$('.arrow-right').css('display', 'none')
 	$('#searchInput').val('');
 	const lastRow = document.querySelector("#recordsTable tbody .row:last-child"); // retrieves the last row
 	let count = await fetchRecordCount() - 1;
@@ -171,7 +179,7 @@ async function rightArrow(): Promise<void> {
 		const lastRecord = [];
 		for (const cell of Array.from(cells)) {
 			lastRecord.push(cell.textContent || "");
-		}
+		};
 		const lastID = parseFloat(lastRecord[0]); // determines te value in the last row
 		if (0 <= lastID && lastID <= (count)) { // checks if the last value is within range
 			const tbody = $("tbody");
@@ -180,11 +188,13 @@ async function rightArrow(): Promise<void> {
 			let calculatedRows = adjustRowsByScreenHeight();
 			lastNumber = firstNumber + (calculatedRows - 1);// calculates the first number of the page
 			await displayRecords(); // display the new records
+			$('.arrow-right').css('display', 'inline-block')
 		};
 	};
 };
 
 async function leftArrow(): Promise<void> {
+	$('.arrow-left').css('display', 'none')
 	$('#searchInput').val('');
 	let count = await fetchRecordCount() - 1;
 	const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); // retrieves the first row
@@ -193,7 +203,7 @@ async function leftArrow(): Promise<void> {
 		const firstRecord = [];
 		for (const cell of Array.from(cells)) {
 			firstRecord.push(cell.textContent || "");
-		}
+		};
 		const firstID = parseFloat(firstRecord[0]); // determines te value in the first row
 		if (0 <= firstID && firstID <= (count)) { // checks if the first value is within range
 			const tbody = $("tbody");
@@ -202,6 +212,7 @@ async function leftArrow(): Promise<void> {
 			lastNumber = firstID - 1; // calculates the last number of the page
 			firstNumber = lastNumber - (calculatedRows - 1); // uses the last number to calculate
 			await displayRecords();
+			$('.arrow-left').css('display', 'inline-block')
 		};
 	};
 };
diff --git a/index.html b/index.html
index 21b3407b..b7cd038b 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@ <h1 class="heading">OnBoard-Javascript</h1>
 	<div class="search-container">
 		<form id="searchForm">
 			<input type="number" id="searchInput" placeholder="Search.." name="search" autocomplete="off">
-			<button id="btnSearch" class="btnSearch" >Submit</button>
+			<button id="btnSearch" class="btnSearch" type="submit" >Submit</button>
 		</form>
 	</div>
 	<div class="showRecords">

From 10b0d4086e03e7fcc17f9c50745a995b671dbe51 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 5 Sep 2023 08:12:37 +0200
Subject: [PATCH 15/33] 09/05

---
 app.ts     | 360 ++++++++++++++++++++++++++++++-----------------------
 index.html |   5 +-
 style.css  |  34 +++--
 3 files changed, 227 insertions(+), 172 deletions(-)

diff --git a/app.ts b/app.ts
index 3b563acd..e3dcad8d 100644
--- a/app.ts
+++ b/app.ts
@@ -1,75 +1,70 @@
 import { ajax, css } from "jquery";
-let firstNumber = 0;
-let lastNumber = 0;
-let backend: string = "http://localhost:2050";
+class GlobalVariables {
+	firstNumber = 0;
+	lastNumber = 0;
+	backend = "http://localhost:2050";
 
-window.onload = () => {
-	createTable();
-	displayRecords();
-	$('#btnSearch').on("click", async (event) => {
-		event.preventDefault();
-		let inputValue = $('#searchInput').val() as number;
-		await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
-	});
-	$('#closeModalBtn').on("click", () => {
-		$('.content').empty()
-		$('.modal').css('display', 'none') // closes modal
-	});
-	$('.arrow-right').on('click', () => {
-		rightArrow();
-	});
-	$('.arrow-left').on('click', () => {
-		leftArrow();
-	});
-	$('#searchInput').on('keydown', (event) => {
-		if (event.key === 'e' || event.key === 'E') {
-			event.preventDefault();
-		};
-	});
-	$('#searchInput').on('input', (event) => {
-		const inputValue = $('#searchInput').val() as string;
-		if (inputValue.includes('.')) {
-			$('#searchInput').val(inputValue.replace('.', ' '));
-		};
-	});
-};
+	async fetchRecordCount(): Promise<number> {
+		return fetch(`${this.backend}/recordCount`)
+			.then((res) => {
+				if (!res.ok) {
+					throw 'Failed to fetch record count';
+				}
+				return res.json();
+			})
+			.catch((err) => {
+				throw 'Error fetching the record count: ' + err;
+			});
+	}
 
-async function fetchRecordCount(): Promise<number> {
-	try {
-		const response = await fetch(`${backend}/recordCount`);
-		if (!response.ok) {
-			throw new Error('Failed to fetch record count');
-		}
-		return response.json()
-	} catch (error) {
-		throw new Error('Error fetching the record count')
-	};
-};
+	async fetchColumns(): Promise<string[]> {
+		return fetch(`${this.backend}/columns`)
+			.then(res => {
+				if (!res.ok) {
+					throw 'Failed to fetch columns';
+				}
+				return res.json();
+			}).catch(err => {
+				throw 'Error fetching columns' + err;
+			})
+	}
 
-async function fetchColumns(): Promise<string[]> {
-	try {
-		const response = await fetch(`${backend}/columns`);
-		if (!response.ok) {
-			throw new Error('Failed to fetch columns');
-		}
-		const jsonText = await response.text();
-		const columns: string[] = await JSON.parse(jsonText);
-		return columns
-	} catch (error) {
-		throw new Error('Error fetching columns')
-	};
-};
+	async fetchRecords(from: number, to: number): Promise<any[]> {
+		return fetch(`${this.backend}/records?from=${from}&to=${to}`)
+			.then(res => {
+				if (!res.ok) {
+					throw "Sorry, there's a problem with the network";
+				}
+				return res.json();
+			}).catch(err => {
+				throw 'Error fetching records from server ' + err;
+			});
+	}
+}
+
+const globalVars = new GlobalVariables();
+let recordCount: number;
+
+globalVars.fetchRecordCount()
+	.then((count) => {
+		recordCount = count - 1; // Assign the fetched count to the global variable
+		displayRecords(recordCount);
+	})
+	.catch(err => {
+		throw 'Error fetching record count' + err;
+	})
 
 async function createTable() {
-	try {
-		const columns = await fetchColumns();
-		for (const col of columns) {
-			$(".head").append(`<th>${col}</th>`);
-		};
-	} catch (error) {
-		throw new Error('Error creating table');
-	};
-};
+	return globalVars.fetchColumns()
+		.then(columns => {
+			for (const col of columns) {
+				$(".head").append(`<th>${col}</th>`);
+			}
+		})
+		.catch(err => {
+			throw 'Error creating table' + err;
+		})
+}
 
 function adjustRowsByScreenHeight() {
 	const screenHeight = window.innerHeight;
@@ -80,123 +75,141 @@ function adjustRowsByScreenHeight() {
 	} else {
 		let maxRows = Math.floor(availableHeight / rowHeight);
 		return maxRows;
-	};
-};
+	}
+}
 
 $(window).on('resize', async () => {
 	let resizeTimeout: number;
 	resizeTimeout = setTimeout(async () => {
-		$('#loader').show()
-		await displayRecords()
+		$('#loader').show();
+		await displayRecords(recordCount);
 		let inputValue = $('#searchInput').val(); // priotizes the search input value if available
 		if (inputValue !== '') {
-			await updateRecordsAndResize(Number(inputValue))
+			await updateRecordsAndResize(Number(inputValue));
 		}
 		$('#loader').hide();
-	}, 500);
-});
-
-async function fetchRecords(from: number, to: number): Promise<any[]> {
-	try {
-		const response = await fetch(`${backend}/records?from=${from}&to=${to}`);
-		if (!response.ok) {
-			throw new Error("Sorry, there's a problem with the network");
-		}
-		return response.json();
-	} catch (error) {
-		throw new Error('Error fetching records from server');
-	};
-};
+	}, 500)
+})
 
-async function displayRecords(): Promise<void> {
-	try {
-		$('#loader').show();
-		let count = await fetchRecordCount() - 1;
-		let calculatedRows = adjustRowsByScreenHeight();
-		const inputValue = $('#searchInput').val() as number;
-		if (calculatedRows === 0) {
-			lastNumber = firstNumber
-		} else if (firstNumber < 0) {
-			firstNumber = 0;
-			lastNumber = firstNumber + (calculatedRows - 1);
-		} else {
-			lastNumber = firstNumber + (calculatedRows - 1);
-		};
-		let records;
-		if (lastNumber <= count && lastNumber >= 0) {
-			records = await fetchRecords(firstNumber, lastNumber);
-			$('#page').empty();
-			$('#page').append(`Showing record: ${firstNumber} - ${lastNumber}`); // changes the record range showing
-			$('#loader').hide();
+async function displayRecords(recordCount: number): Promise<void> {
+	$('#loader').show();
+	let calculatedRows = adjustRowsByScreenHeight();
+	const inputValue = $('#searchInput').val() as number;
+	if (calculatedRows === 0) {
+		globalVars.lastNumber = globalVars.firstNumber;
+	} else if (globalVars.firstNumber < 0) {
+		globalVars.firstNumber = 0;
+		globalVars.lastNumber = globalVars.firstNumber + (calculatedRows - 1);
+	} else {
+		globalVars.lastNumber = globalVars.firstNumber + (calculatedRows - 1);
+	}
+	if (globalVars.firstNumber === 0) {
+		$('.arrow-left').hide();
+	} else {
+		$('.arrow-left').show();
+	}
+	if (globalVars.lastNumber >= recordCount) {
+		$('.arrow-right').hide();
+	} else {
+		$('.arrow-right').show();
+	}
+	if (!isNaN(globalVars.firstNumber) && !isNaN(globalVars.lastNumber) && !isNaN(recordCount) && !isNaN(calculatedRows)) {
+		if (globalVars.lastNumber <= recordCount && globalVars.lastNumber >= 0) {
+			return globalVars
+				.fetchRecords(globalVars.firstNumber, globalVars.lastNumber)
+				.then((records) => {
+					$('#page').empty();
+					$('#page').append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
+					$('#loader').hide();
+					const tbody = $("tbody");
+					tbody.empty();
+					for (const record of records) {
+						$("tbody").append(`<tr class="row"></tr>`); // creates row for each record
+						const lastRow = $(".row:last");
+						for (const value of record) {
+							lastRow.append(`<td>${value}</td>`); // assign each record to their column in a specified row
+						}
+						if (record.includes(inputValue)) {
+							lastRow.css('background-color', '#DDC0B4'); // highlights the searched row
+						}
+						$("tbody").append(lastRow);
+					}
+				})
+				.catch((err) => {
+					throw 'Error fetching records' + err;
+				});
 		} else {
-			firstNumber = count - (calculatedRows - 1);
-			lastNumber = count;
-			records = await fetchRecords(firstNumber, count);
-			$('#page').empty();
-			$('#page').append(`Showing record: ${firstNumber} - ${count}`);
-			$('#loader').hide();
-		};
-		const tbody = $("tbody");
-		tbody.empty();
-		for (const record of records) {
-			$("tbody").append(`<tr class="row"></tr>`); // creates row for each record
-			const lastRow = $(".row:last");
-			for (const value of record) {
-				lastRow.append(`<td>${value}</td>`); // assign each record to their column in a specified row
-			}
-			if (record.includes(inputValue)) {
-				lastRow.css('background-color', '#DDC0B4'); // highlights the searched row
-			}
-			$("tbody").append(lastRow);
+			globalVars.firstNumber = recordCount - (calculatedRows - 1);
+			globalVars.lastNumber = recordCount;
+			return globalVars
+				.fetchRecords(globalVars.firstNumber, recordCount)
+				.then((records) => {
+					$('#page').empty();
+					$('#page').append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
+					$('#loader').hide();
+					const tbody = $("tbody");
+					tbody.empty();
+					for (const record of records) {
+						$("tbody").append(`<tr class="row"></tr>`); // creates row for each record
+						const lastRow = $(".row:last");
+						for (const value of record) {
+							lastRow.append(`<td>${value}</td>`); // assign each record to their column in a specified row
+						}
+						if (record.includes(inputValue)) {
+							lastRow.css('background-color', '#DDC0B4'); // highlights the searched row
+						}
+						$("tbody").append(lastRow);
+						$('#loader').hide();
+					}
+				})
+				.catch((err) => {
+					throw 'Error fetching records' + err;
+				})
 		}
-	} catch (error) {
-		throw new Error('Error displaying records');
-	};
-};
+	} else {
+		throw new Error("Invalid numeric values detected.");
+	}
+}
 
 async function updateRecordsAndResize(inputValue: number) {
-	let count = await fetchRecordCount() - 1;
-	if (inputValue < 0 || inputValue > count) { // check if the search input 
+	if (inputValue < 0 || inputValue > recordCount) { // check if the search input 
 		$('.modal').css('display', 'block');//opens modal if search input is not within range
-		$('.content').append(`<p>${inputValue} is not a number within the range.Please try a different number</p>`);
+		$('.content').append(`<p>${inputValue} is not a number within the range. Please try a different number</p>`);
 		$('#searchInput').val(''); // empties search bar
-		return;
-	};
+		return
+	}
 	let calculatedRows = adjustRowsByScreenHeight();
 	const halfRange = Math.floor(calculatedRows / 2); // divides the calculated max rows in half 
-	firstNumber = Math.max(0, inputValue - halfRange);
-	lastNumber = Math.min(count, firstNumber + (calculatedRows - 1));
-	await displayRecords();
-};
+	globalVars.firstNumber = Math.max(0, inputValue - halfRange);
+	globalVars.lastNumber = Math.min(recordCount, globalVars.firstNumber + (calculatedRows - 1));
+	await displayRecords(recordCount);
+}
 
 async function rightArrow(): Promise<void> {
-	$('.arrow-right').css('display', 'none')
+	$('#page').empty();
 	$('#searchInput').val('');
 	const lastRow = document.querySelector("#recordsTable tbody .row:last-child"); // retrieves the last row
-	let count = await fetchRecordCount() - 1;
 	if (lastRow) { // checks if the last row exists
 		const cells = lastRow.querySelectorAll("td");
 		const lastRecord = [];
 		for (const cell of Array.from(cells)) {
 			lastRecord.push(cell.textContent || "");
-		};
+		}
 		const lastID = parseFloat(lastRecord[0]); // determines te value in the last row
-		if (0 <= lastID && lastID <= (count)) { // checks if the last value is within range
+		if (0 <= lastID && lastID <= (recordCount)) { // checks if the last value is within range
 			const tbody = $("tbody");
 			tbody.empty(); // empties the table
-			firstNumber = lastID + 1; // calculates the first number of the page
+			globalVars.firstNumber = lastID + 1; // calculates the first number of the page
 			let calculatedRows = adjustRowsByScreenHeight();
-			lastNumber = firstNumber + (calculatedRows - 1);// calculates the first number of the page
-			await displayRecords(); // display the new records
-			$('.arrow-right').css('display', 'inline-block')
-		};
-	};
-};
+			globalVars.lastNumber = globalVars.firstNumber + (calculatedRows - 1);// calculates the first number of the page
+			await displayRecords(recordCount); // display the new records
+		}
+	}
+}
 
 async function leftArrow(): Promise<void> {
-	$('.arrow-left').css('display', 'none')
+	$('#page').empty();
 	$('#searchInput').val('');
-	let count = await fetchRecordCount() - 1;
 	const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); // retrieves the first row
 	if (firstRow) { // checks if the first row exists
 		const cells = firstRow.querySelectorAll("td");
@@ -205,14 +218,45 @@ async function leftArrow(): Promise<void> {
 			firstRecord.push(cell.textContent || "");
 		};
 		const firstID = parseFloat(firstRecord[0]); // determines te value in the first row
-		if (0 <= firstID && firstID <= (count)) { // checks if the first value is within range
+		if (0 <= firstID && firstID <= (recordCount)) { // checks if the first value is within range
 			const tbody = $("tbody");
 			tbody.empty(); // empties the table
 			const calculatedRows = adjustRowsByScreenHeight();
-			lastNumber = firstID - 1; // calculates the last number of the page
-			firstNumber = lastNumber - (calculatedRows - 1); // uses the last number to calculate
-			await displayRecords();
-			$('.arrow-left').css('display', 'inline-block')
-		};
-	};
-};
+			globalVars.lastNumber = firstID - 1; // calculates the last number of the page
+			globalVars.firstNumber = globalVars.lastNumber - (calculatedRows - 1); // uses the last number to calculate
+			await displayRecords(recordCount);
+		}
+	}
+}
+
+window.onload = () => {
+	createTable();
+	displayRecords(recordCount);
+	$('#btnSearch').on("click", async (event) => {
+		event.preventDefault();
+		let inputValue = $('#searchInput').val() as number;
+		$('#page').empty();
+		await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
+	})
+	$('#closeModalBtn').on("click", () => {
+		$('.content').empty();
+		$('.modal').css('display', 'none'); // closes modal
+	})
+	$('.arrow-right').on('click', () => {
+		rightArrow();
+	})
+	$('.arrow-left').on('click', () => {
+		leftArrow();
+	})
+	$('#searchInput').on('keydown', (event) => {
+		if (event.key === 'e' || event.key === 'E') {
+			event.preventDefault();
+		}
+	})
+	$('#searchInput').on('input', (event) => {
+		const inputValue = $('#searchInput').val() as string;
+		if (inputValue.includes('.')) {
+			$('#searchInput').val(inputValue.replace('.', ''));
+		}
+	})
+}
diff --git a/index.html b/index.html
index b7cd038b..c2879fd4 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,9 @@
 </head>
 
 <body>
-	<div id="loader"></div>
+	<div id="loader">
+		<div class="loader-spinner"></div>
+	  </div>
 	<h1 class="heading">OnBoard-Javascript</h1>
 	<div id="modal" class="modal">
 		<div class="modal-content">
@@ -36,6 +38,7 @@ <h1 class="heading">OnBoard-Javascript</h1>
 		<tbody>
 		</tbody>
 	</table>
+
 </body>
 
 </html>
diff --git a/style.css b/style.css
index 590d170b..5ba89838 100644
--- a/style.css
+++ b/style.css
@@ -109,19 +109,27 @@ td:hover {
 
 #loader {
 	position: absolute;
-	left: 50%;
-	margin-left: -50px;
-	top: 50%;
-	margin-top: -50px;
-	border: calc(200px / 10) solid #97694F;
-	border-top: 20px solid #4B3832;
-	border-radius: 100%;
-	display: none;
-	width: 100px;
-	height: 100px;
-	animation: spin 2s linear infinite;
-	background-color: #f7e7ce;
-}
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color:#f7e7ce;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 9999;
+  }
+  
+.loader-spinner {
+  border: calc(200px / 10) solid #97694F;
+  border-top: 20px solid #4B3832;
+  border-radius: 100%;
+  width: 100px;
+  height: 100px;
+  animation: spin 2s linear infinite;
+  background-color: #f7e7ce;
+  }
+  
 
 @keyframes spin {
 	0% {

From 11ea6c463c29279b0ad91b4da2da0e2a4beb20ee Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 5 Sep 2023 09:01:31 +0200
Subject: [PATCH 16/33] update

---
 app.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app.ts b/app.ts
index e3dcad8d..caa86950 100644
--- a/app.ts
+++ b/app.ts
@@ -14,7 +14,7 @@ class GlobalVariables {
 			})
 			.catch((err) => {
 				throw 'Error fetching the record count: ' + err;
-			});
+			})
 	}
 
 	async fetchColumns(): Promise<string[]> {
@@ -38,12 +38,12 @@ class GlobalVariables {
 				return res.json();
 			}).catch(err => {
 				throw 'Error fetching records from server ' + err;
-			});
+			})
 	}
 }
 
 const globalVars = new GlobalVariables();
-let recordCount: number;
+let recordCount:number;
 
 globalVars.fetchRecordCount()
 	.then((count) => {
@@ -66,7 +66,7 @@ async function createTable() {
 		})
 }
 
-function adjustRowsByScreenHeight() {
+const adjustRowsByScreenHeight = ():number => {
 	const screenHeight = window.innerHeight;
 	const availableHeight = screenHeight - 105; // subtracts the space used from the screeen
 	let rowHeight = 35;

From 2b53415224ee79b5299e89e7fa40e2dc99bc4179 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 5 Sep 2023 11:58:14 +0200
Subject: [PATCH 17/33] update

---
 app.ts | 136 +++++++++++++++++++++++++++++++++++----------------------
 1 file changed, 83 insertions(+), 53 deletions(-)

diff --git a/app.ts b/app.ts
index caa86950..280795b8 100644
--- a/app.ts
+++ b/app.ts
@@ -3,8 +3,9 @@ class GlobalVariables {
 	firstNumber = 0;
 	lastNumber = 0;
 	backend = "http://localhost:2050";
-
-	async fetchRecordCount(): Promise<number> {
+	resizeTimeout = 0;
+    //fetches the number of records from localhost
+	fetchRecordCount(): Promise<number> {
 		return fetch(`${this.backend}/recordCount`)
 			.then((res) => {
 				if (!res.ok) {
@@ -16,8 +17,8 @@ class GlobalVariables {
 				throw 'Error fetching the record count: ' + err;
 			})
 	}
-
-	async fetchColumns(): Promise<string[]> {
+    //fetches columns from localhost
+	fetchColumns(): Promise<string[]> {
 		return fetch(`${this.backend}/columns`)
 			.then(res => {
 				if (!res.ok) {
@@ -28,8 +29,8 @@ class GlobalVariables {
 				throw 'Error fetching columns' + err;
 			})
 	}
-
-	async fetchRecords(from: number, to: number): Promise<any[]> {
+    //fetches records from localhost
+	fetchRecords(from: number, to: number): Promise<any[]> {
 		return fetch(`${this.backend}/records?from=${from}&to=${to}`)
 			.then(res => {
 				if (!res.ok) {
@@ -43,18 +44,19 @@ class GlobalVariables {
 }
 
 const globalVars = new GlobalVariables();
-let recordCount:number;
+let recordCount: number;
 
 globalVars.fetchRecordCount()
 	.then((count) => {
-		recordCount = count - 1; // Assign the fetched count to the global variable
+		// Assign the fetched count to the variable
+		recordCount = count - 1; 
 		displayRecords(recordCount);
 	})
 	.catch(err => {
 		throw 'Error fetching record count' + err;
 	})
-
-async function createTable() {
+//Initializes the table head
+function createTable() {
 	return globalVars.fetchColumns()
 		.then(columns => {
 			for (const col of columns) {
@@ -65,10 +67,12 @@ async function createTable() {
 			throw 'Error creating table' + err;
 		})
 }
-
-const adjustRowsByScreenHeight = ():number => {
+//calculates the number of rows that can fit the screen
+const adjustRowsByScreenHeight = (): number => {
+	//retrieves screen height
 	const screenHeight = window.innerHeight;
-	const availableHeight = screenHeight - 105; // subtracts the space used from the screeen
+	//subtracts the space used from the screeen
+	const availableHeight = screenHeight - 105; 
 	let rowHeight = 35;
 	if (availableHeight <= 0) {
 		return 0;
@@ -77,24 +81,25 @@ const adjustRowsByScreenHeight = ():number => {
 		return maxRows;
 	}
 }
-
-$(window).on('resize', async () => {
-	let resizeTimeout: number;
-	resizeTimeout = setTimeout(async () => {
-		$('#loader').show();
+//calls to re-display records when screen is adjusted
+$(window).on('resize', () => {
+	clearTimeout(globalVars.resizeTimeout);
+	globalVars.resizeTimeout = setTimeout(async () => {
 		await displayRecords(recordCount);
-		let inputValue = $('#searchInput').val(); // priotizes the search input value if available
+		// priotizes the search input value if available
+		let inputValue = $('#searchInput').val(); 
 		if (inputValue !== '') {
 			await updateRecordsAndResize(Number(inputValue));
 		}
-		$('#loader').hide();
-	}, 500)
+	}, 250)
+	
 })
-
+//display records from first to last number
 async function displayRecords(recordCount: number): Promise<void> {
 	$('#loader').show();
 	let calculatedRows = adjustRowsByScreenHeight();
 	const inputValue = $('#searchInput').val() as number;
+	const tbody = $("tbody");
 	if (calculatedRows === 0) {
 		globalVars.lastNumber = globalVars.firstNumber;
 	} else if (globalVars.firstNumber < 0) {
@@ -121,23 +126,25 @@ async function displayRecords(recordCount: number): Promise<void> {
 					$('#page').empty();
 					$('#page').append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
 					$('#loader').hide();
-					const tbody = $("tbody");
 					tbody.empty();
 					for (const record of records) {
-						$("tbody").append(`<tr class="row"></tr>`); // creates row for each record
+						// creates row for each record
+						$("tbody").append(`<tr class="row"></tr>`);
 						const lastRow = $(".row:last");
 						for (const value of record) {
-							lastRow.append(`<td>${value}</td>`); // assign each record to their column in a specified row
+							// assign each record to their column in a specified row
+							lastRow.append(`<td>${value}</td>`); 
 						}
 						if (record.includes(inputValue)) {
-							lastRow.css('background-color', '#DDC0B4'); // highlights the searched row
+							// highlights the searched row
+							lastRow.css('background-color', '#DDC0B4'); 
 						}
 						$("tbody").append(lastRow);
 					}
 				})
 				.catch((err) => {
 					throw 'Error fetching records' + err;
-				});
+				})
 		} else {
 			globalVars.firstNumber = recordCount - (calculatedRows - 1);
 			globalVars.lastNumber = recordCount;
@@ -147,16 +154,18 @@ async function displayRecords(recordCount: number): Promise<void> {
 					$('#page').empty();
 					$('#page').append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
 					$('#loader').hide();
-					const tbody = $("tbody");
 					tbody.empty();
 					for (const record of records) {
-						$("tbody").append(`<tr class="row"></tr>`); // creates row for each record
+						// creates row for each record
+						$("tbody").append(`<tr class="row"></tr>`); 
 						const lastRow = $(".row:last");
 						for (const value of record) {
-							lastRow.append(`<td>${value}</td>`); // assign each record to their column in a specified row
+							//assign each record to their column in a specified row
+							lastRow.append(`<td>${value}</td>`); 
 						}
 						if (record.includes(inputValue)) {
-							lastRow.css('background-color', '#DDC0B4'); // highlights the searched row
+							//highlights the searched row
+							lastRow.css('background-color', '#DDC0B4'); 
 						}
 						$("tbody").append(lastRow);
 						$('#loader').hide();
@@ -172,14 +181,18 @@ async function displayRecords(recordCount: number): Promise<void> {
 }
 
 async function updateRecordsAndResize(inputValue: number) {
-	if (inputValue < 0 || inputValue > recordCount) { // check if the search input 
-		$('.modal').css('display', 'block');//opens modal if search input is not within range
+	//check if the search input 
+	if (inputValue < 0 || inputValue > recordCount) { 
+		//opens modal if search input is not within range
+		$('.modal').css('display', 'block');
 		$('.content').append(`<p>${inputValue} is not a number within the range. Please try a different number</p>`);
-		$('#searchInput').val(''); // empties search bar
+		//empties search bar
+		$('#searchInput').val(''); 
 		return
 	}
 	let calculatedRows = adjustRowsByScreenHeight();
-	const halfRange = Math.floor(calculatedRows / 2); // divides the calculated max rows in half 
+	//divides the calculated max rows in half 
+	const halfRange = Math.floor(calculatedRows / 2); 
 	globalVars.firstNumber = Math.max(0, inputValue - halfRange);
 	globalVars.lastNumber = Math.min(recordCount, globalVars.firstNumber + (calculatedRows - 1));
 	await displayRecords(recordCount);
@@ -188,21 +201,29 @@ async function updateRecordsAndResize(inputValue: number) {
 async function rightArrow(): Promise<void> {
 	$('#page').empty();
 	$('#searchInput').val('');
-	const lastRow = document.querySelector("#recordsTable tbody .row:last-child"); // retrieves the last row
-	if (lastRow) { // checks if the last row exists
+	//retrieves the last row
+	const lastRow = document.querySelector("#recordsTable tbody .row:last-child"); 
+	// checks if the last row exists
+	if (lastRow) { 
 		const cells = lastRow.querySelectorAll("td");
 		const lastRecord = [];
 		for (const cell of Array.from(cells)) {
 			lastRecord.push(cell.textContent || "");
 		}
-		const lastID = parseFloat(lastRecord[0]); // determines te value in the last row
-		if (0 <= lastID && lastID <= (recordCount)) { // checks if the last value is within range
+        //determines te value in the last row
+		const lastID = parseFloat(lastRecord[0]); 
+		// checks if the last value is within range
+		if (0 <= lastID && lastID <= (recordCount)) { 
 			const tbody = $("tbody");
-			tbody.empty(); // empties the table
-			globalVars.firstNumber = lastID + 1; // calculates the first number of the page
+			//empties the table
+			tbody.empty(); 
+			//calculates the first number of the page
+			globalVars.firstNumber = lastID + 1; 
 			let calculatedRows = adjustRowsByScreenHeight();
-			globalVars.lastNumber = globalVars.firstNumber + (calculatedRows - 1);// calculates the first number of the page
-			await displayRecords(recordCount); // display the new records
+			// calculates the last number of the page
+			globalVars.lastNumber = globalVars.firstNumber + (calculatedRows - 1);
+			//display the new records
+			await displayRecords(recordCount); 
 		}
 	}
 }
@@ -210,20 +231,27 @@ async function rightArrow(): Promise<void> {
 async function leftArrow(): Promise<void> {
 	$('#page').empty();
 	$('#searchInput').val('');
-	const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); // retrieves the first row
-	if (firstRow) { // checks if the first row exists
+	//retrieves the first row
+	const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); 
+	//checks if the first row exists
+	if (firstRow) { 
 		const cells = firstRow.querySelectorAll("td");
 		const firstRecord = [];
 		for (const cell of Array.from(cells)) {
 			firstRecord.push(cell.textContent || "");
-		};
-		const firstID = parseFloat(firstRecord[0]); // determines te value in the first row
-		if (0 <= firstID && firstID <= (recordCount)) { // checks if the first value is within range
+		}
+		//determines te value in the first row
+		const firstID = parseFloat(firstRecord[0]); 
+		//checks if the first value is within range
+		if (0 <= firstID && firstID <= (recordCount)) { 
 			const tbody = $("tbody");
-			tbody.empty(); // empties the table
+			//empties the table
+			tbody.empty(); 
 			const calculatedRows = adjustRowsByScreenHeight();
-			globalVars.lastNumber = firstID - 1; // calculates the last number of the page
-			globalVars.firstNumber = globalVars.lastNumber - (calculatedRows - 1); // uses the last number to calculate
+			//calculates the last number of the page
+			globalVars.lastNumber = firstID - 1; 
+			//uses the last number to calculate first number
+			globalVars.firstNumber = globalVars.lastNumber - (calculatedRows - 1); 
 			await displayRecords(recordCount);
 		}
 	}
@@ -236,11 +264,13 @@ window.onload = () => {
 		event.preventDefault();
 		let inputValue = $('#searchInput').val() as number;
 		$('#page').empty();
-		await updateRecordsAndResize(inputValue); // calls to calculate the range once button is clicked
+		//calls to calculate the range once button is clicked
+		await updateRecordsAndResize(inputValue); 
 	})
 	$('#closeModalBtn').on("click", () => {
 		$('.content').empty();
-		$('.modal').css('display', 'none'); // closes modal
+		//closes modal
+		$('.modal').css('display', 'none'); 
 	})
 	$('.arrow-right').on('click', () => {
 		rightArrow();

From c15fe4c103b66ca520a5e29f7a0d797049b2d274 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Wed, 6 Sep 2023 16:25:58 +0200
Subject: [PATCH 18/33] 09/06

---
 app.ts | 79 ++++++++++++++++++++++++++++++++--------------------------
 1 file changed, 44 insertions(+), 35 deletions(-)

diff --git a/app.ts b/app.ts
index 280795b8..2a320a94 100644
--- a/app.ts
+++ b/app.ts
@@ -4,39 +4,48 @@ class GlobalVariables {
 	lastNumber = 0;
 	backend = "http://localhost:2050";
 	resizeTimeout = 0;
-    //fetches the number of records from localhost
+	//fetches the number of records from localhost
 	fetchRecordCount(): Promise<number> {
 		return fetch(`${this.backend}/recordCount`)
 			.then((res) => {
 				if (!res.ok) {
 					throw 'Failed to fetch record count';
 				}
-				return res.json();
+				return res.text();
+			})
+			.then((data) => {
+				return JSON.parse(data);
 			})
 			.catch((err) => {
 				throw 'Error fetching the record count: ' + err;
 			})
 	}
-    //fetches columns from localhost
+	//fetches columns from localhost
 	fetchColumns(): Promise<string[]> {
 		return fetch(`${this.backend}/columns`)
 			.then(res => {
 				if (!res.ok) {
 					throw 'Failed to fetch columns';
 				}
-				return res.json();
+				return res.text();
+			})
+			.then((data) => {
+				return JSON.parse(data);
 			}).catch(err => {
 				throw 'Error fetching columns' + err;
 			})
 	}
-    //fetches records from localhost
+	//fetches records from localhost
 	fetchRecords(from: number, to: number): Promise<any[]> {
 		return fetch(`${this.backend}/records?from=${from}&to=${to}`)
 			.then(res => {
 				if (!res.ok) {
 					throw "Sorry, there's a problem with the network";
 				}
-				return res.json();
+				return res.text();
+			})
+			.then((data) => {
+				return JSON.parse(data);
 			}).catch(err => {
 				throw 'Error fetching records from server ' + err;
 			})
@@ -49,7 +58,7 @@ let recordCount: number;
 globalVars.fetchRecordCount()
 	.then((count) => {
 		// Assign the fetched count to the variable
-		recordCount = count - 1; 
+		recordCount = count - 1;
 		displayRecords(recordCount);
 	})
 	.catch(err => {
@@ -72,7 +81,7 @@ const adjustRowsByScreenHeight = (): number => {
 	//retrieves screen height
 	const screenHeight = window.innerHeight;
 	//subtracts the space used from the screeen
-	const availableHeight = screenHeight - 105; 
+	const availableHeight = screenHeight - 105;
 	let rowHeight = 35;
 	if (availableHeight <= 0) {
 		return 0;
@@ -87,12 +96,12 @@ $(window).on('resize', () => {
 	globalVars.resizeTimeout = setTimeout(async () => {
 		await displayRecords(recordCount);
 		// priotizes the search input value if available
-		let inputValue = $('#searchInput').val(); 
+		let inputValue = $('#searchInput').val();
 		if (inputValue !== '') {
 			await updateRecordsAndResize(Number(inputValue));
 		}
 	}, 250)
-	
+
 })
 //display records from first to last number
 async function displayRecords(recordCount: number): Promise<void> {
@@ -133,11 +142,11 @@ async function displayRecords(recordCount: number): Promise<void> {
 						const lastRow = $(".row:last");
 						for (const value of record) {
 							// assign each record to their column in a specified row
-							lastRow.append(`<td>${value}</td>`); 
+							lastRow.append(`<td>${value}</td>`);
 						}
 						if (record.includes(inputValue)) {
 							// highlights the searched row
-							lastRow.css('background-color', '#DDC0B4'); 
+							lastRow.css('background-color', '#DDC0B4');
 						}
 						$("tbody").append(lastRow);
 					}
@@ -157,15 +166,15 @@ async function displayRecords(recordCount: number): Promise<void> {
 					tbody.empty();
 					for (const record of records) {
 						// creates row for each record
-						$("tbody").append(`<tr class="row"></tr>`); 
+						$("tbody").append(`<tr class="row"></tr>`);
 						const lastRow = $(".row:last");
 						for (const value of record) {
 							//assign each record to their column in a specified row
-							lastRow.append(`<td>${value}</td>`); 
+							lastRow.append(`<td>${value}</td>`);
 						}
 						if (record.includes(inputValue)) {
 							//highlights the searched row
-							lastRow.css('background-color', '#DDC0B4'); 
+							lastRow.css('background-color', '#DDC0B4');
 						}
 						$("tbody").append(lastRow);
 						$('#loader').hide();
@@ -182,17 +191,17 @@ async function displayRecords(recordCount: number): Promise<void> {
 
 async function updateRecordsAndResize(inputValue: number) {
 	//check if the search input 
-	if (inputValue < 0 || inputValue > recordCount) { 
+	if (inputValue < 0 || inputValue > recordCount) {
 		//opens modal if search input is not within range
 		$('.modal').css('display', 'block');
 		$('.content').append(`<p>${inputValue} is not a number within the range. Please try a different number</p>`);
 		//empties search bar
-		$('#searchInput').val(''); 
+		$('#searchInput').val('');
 		return
 	}
 	let calculatedRows = adjustRowsByScreenHeight();
 	//divides the calculated max rows in half 
-	const halfRange = Math.floor(calculatedRows / 2); 
+	const halfRange = Math.floor(calculatedRows / 2);
 	globalVars.firstNumber = Math.max(0, inputValue - halfRange);
 	globalVars.lastNumber = Math.min(recordCount, globalVars.firstNumber + (calculatedRows - 1));
 	await displayRecords(recordCount);
@@ -202,28 +211,28 @@ async function rightArrow(): Promise<void> {
 	$('#page').empty();
 	$('#searchInput').val('');
 	//retrieves the last row
-	const lastRow = document.querySelector("#recordsTable tbody .row:last-child"); 
+	const lastRow = document.querySelector("#recordsTable tbody .row:last-child");
 	// checks if the last row exists
-	if (lastRow) { 
+	if (lastRow) {
 		const cells = lastRow.querySelectorAll("td");
 		const lastRecord = [];
 		for (const cell of Array.from(cells)) {
 			lastRecord.push(cell.textContent || "");
 		}
-        //determines te value in the last row
-		const lastID = parseFloat(lastRecord[0]); 
+		//determines te value in the last row
+		const lastID = parseFloat(lastRecord[0]);
 		// checks if the last value is within range
-		if (0 <= lastID && lastID <= (recordCount)) { 
+		if (0 <= lastID && lastID <= (recordCount)) {
 			const tbody = $("tbody");
 			//empties the table
-			tbody.empty(); 
+			tbody.empty();
 			//calculates the first number of the page
-			globalVars.firstNumber = lastID + 1; 
+			globalVars.firstNumber = lastID + 1;
 			let calculatedRows = adjustRowsByScreenHeight();
 			// calculates the last number of the page
 			globalVars.lastNumber = globalVars.firstNumber + (calculatedRows - 1);
 			//display the new records
-			await displayRecords(recordCount); 
+			await displayRecords(recordCount);
 		}
 	}
 }
@@ -232,26 +241,26 @@ async function leftArrow(): Promise<void> {
 	$('#page').empty();
 	$('#searchInput').val('');
 	//retrieves the first row
-	const firstRow = document.querySelector("#recordsTable tbody .row:first-child"); 
+	const firstRow = document.querySelector("#recordsTable tbody .row:first-child");
 	//checks if the first row exists
-	if (firstRow) { 
+	if (firstRow) {
 		const cells = firstRow.querySelectorAll("td");
 		const firstRecord = [];
 		for (const cell of Array.from(cells)) {
 			firstRecord.push(cell.textContent || "");
 		}
 		//determines te value in the first row
-		const firstID = parseFloat(firstRecord[0]); 
+		const firstID = parseFloat(firstRecord[0]);
 		//checks if the first value is within range
-		if (0 <= firstID && firstID <= (recordCount)) { 
+		if (0 <= firstID && firstID <= (recordCount)) {
 			const tbody = $("tbody");
 			//empties the table
-			tbody.empty(); 
+			tbody.empty();
 			const calculatedRows = adjustRowsByScreenHeight();
 			//calculates the last number of the page
-			globalVars.lastNumber = firstID - 1; 
+			globalVars.lastNumber = firstID - 1;
 			//uses the last number to calculate first number
-			globalVars.firstNumber = globalVars.lastNumber - (calculatedRows - 1); 
+			globalVars.firstNumber = globalVars.lastNumber - (calculatedRows - 1);
 			await displayRecords(recordCount);
 		}
 	}
@@ -265,12 +274,12 @@ window.onload = () => {
 		let inputValue = $('#searchInput').val() as number;
 		$('#page').empty();
 		//calls to calculate the range once button is clicked
-		await updateRecordsAndResize(inputValue); 
+		await updateRecordsAndResize(inputValue);
 	})
 	$('#closeModalBtn').on("click", () => {
 		$('.content').empty();
 		//closes modal
-		$('.modal').css('display', 'none'); 
+		$('.modal').css('display', 'none');
 	})
 	$('.arrow-right').on('click', () => {
 		rightArrow();

From 90d744baf04176c5d69dbd27d2fe71088880904b Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Fri, 8 Sep 2023 09:04:17 +0200
Subject: [PATCH 19/33] 09/08

---
 app.ts     | 10 +++++-----
 index.html |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app.ts b/app.ts
index 2a320a94..65b8e469 100644
--- a/app.ts
+++ b/app.ts
@@ -101,7 +101,6 @@ $(window).on('resize', () => {
 			await updateRecordsAndResize(Number(inputValue));
 		}
 	}, 250)
-
 })
 //display records from first to last number
 async function displayRecords(recordCount: number): Promise<void> {
@@ -124,16 +123,17 @@ async function displayRecords(recordCount: number): Promise<void> {
 	}
 	if (globalVars.lastNumber >= recordCount) {
 		$('.arrow-right').hide();
+		
 	} else {
 		$('.arrow-right').show();
 	}
+	// $('#page').empty().append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
 	if (!isNaN(globalVars.firstNumber) && !isNaN(globalVars.lastNumber) && !isNaN(recordCount) && !isNaN(calculatedRows)) {
 		if (globalVars.lastNumber <= recordCount && globalVars.lastNumber >= 0) {
 			return globalVars
 				.fetchRecords(globalVars.firstNumber, globalVars.lastNumber)
 				.then((records) => {
-					$('#page').empty();
-					$('#page').append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
+					$('#page').empty().append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
 					$('#loader').hide();
 					tbody.empty();
 					for (const record of records) {
@@ -160,8 +160,7 @@ async function displayRecords(recordCount: number): Promise<void> {
 			return globalVars
 				.fetchRecords(globalVars.firstNumber, recordCount)
 				.then((records) => {
-					$('#page').empty();
-					$('#page').append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
+					$('#page').empty().append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
 					$('#loader').hide();
 					tbody.empty();
 					for (const record of records) {
@@ -195,6 +194,7 @@ async function updateRecordsAndResize(inputValue: number) {
 		//opens modal if search input is not within range
 		$('.modal').css('display', 'block');
 		$('.content').append(`<p>${inputValue} is not a number within the range. Please try a different number</p>`);
+		$('#page').empty().append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
 		//empties search bar
 		$('#searchInput').val('');
 		return
diff --git a/index.html b/index.html
index c2879fd4..f5f78f03 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
 	<div id="loader">
 		<div class="loader-spinner"></div>
 	  </div>
-	<h1 class="heading">OnBoard-Javascript</h1>
+	<h1 class="heading">Javascript Project</h1>
 	<div id="modal" class="modal">
 		<div class="modal-content">
 			<span id="closeModalBtn" class="close">&times;</span>

From 2361a8438326157534f589ebb99886c1c0fcb941 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Mon, 11 Sep 2023 12:00:57 +0200
Subject: [PATCH 20/33] 11/09

---
 app.ts    | 316 ++++++++++++++++++++++++------------------------------
 style.css |  26 +++--
 2 files changed, 152 insertions(+), 190 deletions(-)

diff --git a/app.ts b/app.ts
index 65b8e469..aa886103 100644
--- a/app.ts
+++ b/app.ts
@@ -1,86 +1,73 @@
 import { ajax, css } from "jquery";
-class GlobalVariables {
-	firstNumber = 0;
-	lastNumber = 0;
-	backend = "http://localhost:2050";
-	resizeTimeout = 0;
-	//fetches the number of records from localhost
+
+class Myclass {
+	firstNumber: number = 0;
+	lastNumber: number = 0;
+	backend: string = "http://localhost:2050";
+	resizeTimeout: number = 0;
+
+	/** fetches the number of records from backend */
 	fetchRecordCount(): Promise<number> {
 		return fetch(`${this.backend}/recordCount`)
-			.then((res) => {
+			.then(res => {
 				if (!res.ok) {
 					throw 'Failed to fetch record count';
 				}
-				return res.text();
-			})
-			.then((data) => {
-				return JSON.parse(data);
+				return res.json();
 			})
-			.catch((err) => {
+			.catch(err => {
 				throw 'Error fetching the record count: ' + err;
-			})
+			});
 	}
-	//fetches columns from localhost
+
+	/** fetches columns from backend */
 	fetchColumns(): Promise<string[]> {
 		return fetch(`${this.backend}/columns`)
 			.then(res => {
 				if (!res.ok) {
 					throw 'Failed to fetch columns';
 				}
-				return res.text();
+				return res.json();
 			})
-			.then((data) => {
-				return JSON.parse(data);
-			}).catch(err => {
+			.catch(err => {
 				throw 'Error fetching columns' + err;
-			})
+			});
 	}
-	//fetches records from localhost
+
+	/** fetches records from backend */
 	fetchRecords(from: number, to: number): Promise<any[]> {
 		return fetch(`${this.backend}/records?from=${from}&to=${to}`)
 			.then(res => {
 				if (!res.ok) {
 					throw "Sorry, there's a problem with the network";
 				}
-				return res.text();
+				return res.json();
 			})
-			.then((data) => {
-				return JSON.parse(data);
-			}).catch(err => {
+			.catch(err => {
 				throw 'Error fetching records from server ' + err;
-			})
+			});
 	}
 }
 
-const globalVars = new GlobalVariables();
-let recordCount: number;
+const myClass = new Myclass();
 
-globalVars.fetchRecordCount()
-	.then((count) => {
-		// Assign the fetched count to the variable
-		recordCount = count - 1;
-		displayRecords(recordCount);
-	})
-	.catch(err => {
-		throw 'Error fetching record count' + err;
-	})
-//Initializes the table head
-function createTable() {
-	return globalVars.fetchColumns()
+/** Initializes the table head */
+function createTable():Promise<string[]> {
+	return myClass.fetchColumns()
 		.then(columns => {
 			for (const col of columns) {
 				$(".head").append(`<th>${col}</th>`);
 			}
+			return columns
 		})
 		.catch(err => {
 			throw 'Error creating table' + err;
-		})
+		});
 }
-//calculates the number of rows that can fit the screen
-const adjustRowsByScreenHeight = (): number => {
-	//retrieves screen height
+
+/** calculates the number of rows that can fit the screen */
+const calculatingRows = (): number => {
 	const screenHeight = window.innerHeight;
-	//subtracts the space used from the screeen
 	const availableHeight = screenHeight - 105;
 	let rowHeight = 35;
 	if (availableHeight <= 0) {
@@ -89,213 +76,190 @@ const adjustRowsByScreenHeight = (): number => {
 		let maxRows = Math.floor(availableHeight / rowHeight);
 		return maxRows;
 	}
+};
+
+/** calls to re-display records when screen is adjusted */
+function handleResize(recordCount: number) {
+	$(window).on('resize', () => {
+		clearTimeout(myClass.resizeTimeout);
+		myClass.resizeTimeout = setTimeout(async () => {
+			displayRecords(recordCount)
+			let inputValue = $('#searchInput').val();
+			if (inputValue !== '') {
+				await searchRecordsAndResize(recordCount);
+			}
+		}, 250);
+	});
 }
-//calls to re-display records when screen is adjusted
-$(window).on('resize', () => {
-	clearTimeout(globalVars.resizeTimeout);
-	globalVars.resizeTimeout = setTimeout(async () => {
-		await displayRecords(recordCount);
-		// priotizes the search input value if available
-		let inputValue = $('#searchInput').val();
-		if (inputValue !== '') {
-			await updateRecordsAndResize(Number(inputValue));
-		}
-	}, 250)
-})
-//display records from first to last number
+
+/** display records that fit the screen */
 async function displayRecords(recordCount: number): Promise<void> {
 	$('#loader').show();
-	let calculatedRows = adjustRowsByScreenHeight();
 	const inputValue = $('#searchInput').val() as number;
-	const tbody = $("tbody");
-	if (calculatedRows === 0) {
-		globalVars.lastNumber = globalVars.firstNumber;
-	} else if (globalVars.firstNumber < 0) {
-		globalVars.firstNumber = 0;
-		globalVars.lastNumber = globalVars.firstNumber + (calculatedRows - 1);
+	const calculatedRows = calculatingRows();
+	const { firstNumber, lastNumber } = calculateFirstAndLastNumbers(calculatedRows, recordCount);
+	updateArrowVisibility(firstNumber, lastNumber, recordCount);
+	const records = await fetchAndDisplayRecords(firstNumber, lastNumber, inputValue);
+	$('#page').empty().append(`Showing record: ${firstNumber} - ${lastNumber}`);
+	$('#loader').hide();
+}
+
+function calculateFirstAndLastNumbers(calculatedRows: number, recordCount: number) {
+	let firstNumber, lastNumber;
+	 if (myClass.firstNumber < 0 || myClass.firstNumber > recordCount) {
+		firstNumber = 0;
 	} else {
-		globalVars.lastNumber = globalVars.firstNumber + (calculatedRows - 1);
+		firstNumber = myClass.firstNumber;
+	}
+	lastNumber = firstNumber + calculatedRows - 1;
+	if (lastNumber >= recordCount) {
+		lastNumber = recordCount;
+		firstNumber = lastNumber - (calculatedRows - 1)
 	}
-	if (globalVars.firstNumber === 0) {
+	return { firstNumber, lastNumber };
+}
+
+function updateArrowVisibility(firstNumber: number, lastNumber: number, recordCount: number) {
+	if (firstNumber === 0) {
 		$('.arrow-left').hide();
 	} else {
 		$('.arrow-left').show();
 	}
-	if (globalVars.lastNumber >= recordCount) {
+
+	if (lastNumber >= recordCount) {
 		$('.arrow-right').hide();
-		
 	} else {
 		$('.arrow-right').show();
 	}
-	// $('#page').empty().append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
-	if (!isNaN(globalVars.firstNumber) && !isNaN(globalVars.lastNumber) && !isNaN(recordCount) && !isNaN(calculatedRows)) {
-		if (globalVars.lastNumber <= recordCount && globalVars.lastNumber >= 0) {
-			return globalVars
-				.fetchRecords(globalVars.firstNumber, globalVars.lastNumber)
-				.then((records) => {
-					$('#page').empty().append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
-					$('#loader').hide();
-					tbody.empty();
-					for (const record of records) {
-						// creates row for each record
-						$("tbody").append(`<tr class="row"></tr>`);
-						const lastRow = $(".row:last");
-						for (const value of record) {
-							// assign each record to their column in a specified row
-							lastRow.append(`<td>${value}</td>`);
-						}
-						if (record.includes(inputValue)) {
-							// highlights the searched row
-							lastRow.css('background-color', '#DDC0B4');
-						}
-						$("tbody").append(lastRow);
-					}
-				})
-				.catch((err) => {
-					throw 'Error fetching records' + err;
-				})
-		} else {
-			globalVars.firstNumber = recordCount - (calculatedRows - 1);
-			globalVars.lastNumber = recordCount;
-			return globalVars
-				.fetchRecords(globalVars.firstNumber, recordCount)
-				.then((records) => {
-					$('#page').empty().append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
-					$('#loader').hide();
-					tbody.empty();
-					for (const record of records) {
-						// creates row for each record
-						$("tbody").append(`<tr class="row"></tr>`);
-						const lastRow = $(".row:last");
-						for (const value of record) {
-							//assign each record to their column in a specified row
-							lastRow.append(`<td>${value}</td>`);
-						}
-						if (record.includes(inputValue)) {
-							//highlights the searched row
-							lastRow.css('background-color', '#DDC0B4');
-						}
-						$("tbody").append(lastRow);
-						$('#loader').hide();
-					}
-				})
-				.catch((err) => {
-					throw 'Error fetching records' + err;
-				})
+}
+
+async function fetchAndDisplayRecords(firstNumber: number, lastNumber: number, inputValue: number) {
+	const records = await myClass.fetchRecords(firstNumber, lastNumber);
+	const tbody = $("tbody");
+	tbody.empty();
+	for (const record of records) {
+		/** creates row for each record*/ 
+		$("tbody").append(`<tr class="row"></tr>`);
+		const lastRow = $(".row:last");
+		for (const value of record) {
+			/** assign each record to their column in a specified row */
+			lastRow.append(`<td>${value}</td>`);
 		}
-	} else {
-		throw new Error("Invalid numeric values detected.");
+		if (record.includes(inputValue)) {
+			/** highlights the searched row */
+			lastRow.css('background-color', '#DDC0B4');
+		}
+		$("tbody").append(lastRow);
 	}
+	return records;
 }
 
-async function updateRecordsAndResize(inputValue: number) {
-	//check if the search input 
+/** recalculates the record range that includes inputValue */
+async function searchRecordsAndResize(recordCount: number): Promise<void> {
+	let inputValue = $('#searchInput').val() as number;
 	if (inputValue < 0 || inputValue > recordCount) {
-		//opens modal if search input is not within range
 		$('.modal').css('display', 'block');
 		$('.content').append(`<p>${inputValue} is not a number within the range. Please try a different number</p>`);
-		$('#page').empty().append(`Showing record: ${globalVars.firstNumber} - ${globalVars.lastNumber}`);
-		//empties search bar
+		$('#page').empty().append(`Showing record: ${myClass.firstNumber} - ${myClass.lastNumber}`);
 		$('#searchInput').val('');
-		return
 	}
-	let calculatedRows = adjustRowsByScreenHeight();
-	//divides the calculated max rows in half 
+	let calculatedRows = calculatingRows();
+	/** divides the calculated max rows in half*/
 	const halfRange = Math.floor(calculatedRows / 2);
-	globalVars.firstNumber = Math.max(0, inputValue - halfRange);
-	globalVars.lastNumber = Math.min(recordCount, globalVars.firstNumber + (calculatedRows - 1));
+	myClass.firstNumber = Math.max(0, inputValue - halfRange);
+	myClass.lastNumber = Math.min(recordCount, myClass.firstNumber + (calculatedRows - 1));
 	await displayRecords(recordCount);
 }
 
-async function rightArrow(): Promise<void> {
+/** Navigates to the next set of records */
+async function rightArrow(recordCount: number): Promise<void> {
 	$('#page').empty();
 	$('#searchInput').val('');
-	//retrieves the last row
+	/** retrieves the last row */
 	const lastRow = document.querySelector("#recordsTable tbody .row:last-child");
-	// checks if the last row exists
+	/** checks if the last row exists */
 	if (lastRow) {
 		const cells = lastRow.querySelectorAll("td");
 		const lastRecord = [];
 		for (const cell of Array.from(cells)) {
 			lastRecord.push(cell.textContent || "");
 		}
-		//determines te value in the last row
+		/** determines te value in the last row */
 		const lastID = parseFloat(lastRecord[0]);
-		// checks if the last value is within range
+		/** checks if the last value is within range */
 		if (0 <= lastID && lastID <= (recordCount)) {
 			const tbody = $("tbody");
-			//empties the table
 			tbody.empty();
-			//calculates the first number of the page
-			globalVars.firstNumber = lastID + 1;
-			let calculatedRows = adjustRowsByScreenHeight();
-			// calculates the last number of the page
-			globalVars.lastNumber = globalVars.firstNumber + (calculatedRows - 1);
-			//display the new records
+			/** calculates the first number of the page */
+			myClass.firstNumber = lastID + 1;
+			let calculatedRows = calculatingRows();
+			/** calculates the last number of the page */
+			myClass.lastNumber = myClass.firstNumber + (calculatedRows - 1);
 			await displayRecords(recordCount);
 		}
 	}
 }
 
-async function leftArrow(): Promise<void> {
+async function leftArrow(recordCount: number): Promise<void> {
 	$('#page').empty();
 	$('#searchInput').val('');
-	//retrieves the first row
+	/** retrieves the first row */
 	const firstRow = document.querySelector("#recordsTable tbody .row:first-child");
-	//checks if the first row exists
 	if (firstRow) {
 		const cells = firstRow.querySelectorAll("td");
 		const firstRecord = [];
 		for (const cell of Array.from(cells)) {
 			firstRecord.push(cell.textContent || "");
 		}
-		//determines te value in the first row
+		/** determines te value in the first row */
 		const firstID = parseFloat(firstRecord[0]);
-		//checks if the first value is within range
 		if (0 <= firstID && firstID <= (recordCount)) {
 			const tbody = $("tbody");
-			//empties the table
 			tbody.empty();
-			const calculatedRows = adjustRowsByScreenHeight();
-			//calculates the last number of the page
-			globalVars.lastNumber = firstID - 1;
-			//uses the last number to calculate first number
-			globalVars.firstNumber = globalVars.lastNumber - (calculatedRows - 1);
+			const calculatedRows = calculatingRows();
+			myClass.lastNumber = firstID - 1;
+			myClass.firstNumber = myClass.lastNumber - (calculatedRows - 1);
 			await displayRecords(recordCount);
 		}
 	}
 }
 
 window.onload = () => {
+	myClass.fetchRecordCount()
+		.then(count => {
+			let recordCount: number = count - 1;
+			displayRecords(recordCount);
+			handleResize(recordCount)
+			searchRecordsAndResize(recordCount)
+			$('#btnSearch').on("click", (event) => {
+				event.preventDefault();
+				$('#page').empty();
+				searchRecordsAndResize(recordCount);
+			});
+			$('.arrow-right').on('click', () => {
+				rightArrow(recordCount);
+			});
+			$('.arrow-left').on('click', () => {
+				leftArrow(recordCount);
+			});
+		})
+		.catch(err => {
+			throw new Error('Error fetching record count' + err);
+		});
 	createTable();
-	displayRecords(recordCount);
-	$('#btnSearch').on("click", async (event) => {
-		event.preventDefault();
-		let inputValue = $('#searchInput').val() as number;
-		$('#page').empty();
-		//calls to calculate the range once button is clicked
-		await updateRecordsAndResize(inputValue);
-	})
 	$('#closeModalBtn').on("click", () => {
 		$('.content').empty();
-		//closes modal
 		$('.modal').css('display', 'none');
-	})
-	$('.arrow-right').on('click', () => {
-		rightArrow();
-	})
-	$('.arrow-left').on('click', () => {
-		leftArrow();
-	})
+	});
 	$('#searchInput').on('keydown', (event) => {
 		if (event.key === 'e' || event.key === 'E') {
 			event.preventDefault();
 		}
-	})
+	});
 	$('#searchInput').on('input', (event) => {
 		const inputValue = $('#searchInput').val() as string;
 		if (inputValue.includes('.')) {
 			$('#searchInput').val(inputValue.replace('.', ''));
 		}
-	})
+	});
 }
diff --git a/style.css b/style.css
index 5ba89838..913aef27 100644
--- a/style.css
+++ b/style.css
@@ -72,7 +72,7 @@ td:hover {
 .arrow-right:hover,
 .arrow-left:hover {
 	color: black;
-	
+
 }
 
 .arrow-right {
@@ -113,23 +113,21 @@ td:hover {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background-color:#f7e7ce;
+	background-color: #f7e7ce;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	z-index: 9999;
-  }
-  
+}
+
 .loader-spinner {
-  border: calc(200px / 10) solid #97694F;
-  border-top: 20px solid #4B3832;
-  border-radius: 100%;
-  width: 100px;
-  height: 100px;
-  animation: spin 2s linear infinite;
-  background-color: #f7e7ce;
-  }
-  
+	border: 20px solid #97694F;
+	border-top: 20px solid #4B3832;
+	border-radius: 100%;
+	width: 100px;
+	height: 100px;
+	animation: spin 2s linear infinite;
+	background-color: #f7e7ce;
+}
 
 @keyframes spin {
 	0% {

From eeb1c817bd123942848ca6991cf62d6843e77851 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 12 Sep 2023 09:41:51 +0200
Subject: [PATCH 21/33] 12/09

---
 app.ts         | 161 +++++++++++++++++++------------------------------
 index.html     |   1 +
 myClass.js     |  50 +++++++++++++++
 myClass.js.map |   1 +
 myClass.ts     |  48 +++++++++++++++
 style.css      |   1 +
 6 files changed, 164 insertions(+), 98 deletions(-)
 create mode 100644 myClass.js
 create mode 100644 myClass.js.map
 create mode 100644 myClass.ts

diff --git a/app.ts b/app.ts
index aa886103..670f92bb 100644
--- a/app.ts
+++ b/app.ts
@@ -1,64 +1,15 @@
 import { ajax, css } from "jquery";
 
-class Myclass {
-	firstNumber: number = 0;
-	lastNumber: number = 0;
-	backend: string = "http://localhost:2050";
-	resizeTimeout: number = 0;
-
-	/** fetches the number of records from backend */
-	fetchRecordCount(): Promise<number> {
-		return fetch(`${this.backend}/recordCount`)
-			.then(res => {
-				if (!res.ok) {
-					throw 'Failed to fetch record count';
-				}
-				return res.json();
-			})
-			.catch(err => {
-				throw 'Error fetching the record count: ' + err;
-			});
-	}
-
-	/** fetches columns from backend */
-	fetchColumns(): Promise<string[]> {
-		return fetch(`${this.backend}/columns`)
-			.then(res => {
-				if (!res.ok) {
-					throw 'Failed to fetch columns';
-				}
-				return res.json();
-			})
-			.catch(err => {
-				throw 'Error fetching columns' + err;
-			});
-	}
-
-	/** fetches records from backend */
-	fetchRecords(from: number, to: number): Promise<any[]> {
-		return fetch(`${this.backend}/records?from=${from}&to=${to}`)
-			.then(res => {
-				if (!res.ok) {
-					throw "Sorry, there's a problem with the network";
-				}
-				return res.json();
-			})
-			.catch(err => {
-				throw 'Error fetching records from server ' + err;
-			});
-	}
-}
-
 const myClass = new Myclass();
 
 /** Initializes the table head */
-function createTable():Promise<string[]> {
+function createTable(): Promise<string[]> {
 	return myClass.fetchColumns()
 		.then(columns => {
 			for (const col of columns) {
 				$(".head").append(`<th>${col}</th>`);
 			}
-			return columns
+			return columns;
 		})
 		.catch(err => {
 			throw 'Error creating table' + err;
@@ -82,31 +33,41 @@ const calculatingRows = (): number => {
 function handleResize(recordCount: number) {
 	$(window).on('resize', () => {
 		clearTimeout(myClass.resizeTimeout);
-		myClass.resizeTimeout = setTimeout(async () => {
+		myClass.resizeTimeout = setTimeout(() => {
 			displayRecords(recordCount)
-			let inputValue = $('#searchInput').val();
-			if (inputValue !== '') {
-				await searchRecordsAndResize(recordCount);
-			}
+				.then(() => {
+					let inputValue = $('#searchInput').val();
+					if (inputValue !== '') {
+						return searchRecordsAndResize(recordCount);
+					}
+				})
+				.catch(err => {
+					throw new Error('Error occured while resizing' + err);
+				});
 		}, 250);
 	});
 }
 
 /** display records that fit the screen */
-async function displayRecords(recordCount: number): Promise<void> {
+function displayRecords(recordCount: number): Promise<any[]> {
 	$('#loader').show();
 	const inputValue = $('#searchInput').val() as number;
 	const calculatedRows = calculatingRows();
 	const { firstNumber, lastNumber } = calculateFirstAndLastNumbers(calculatedRows, recordCount);
 	updateArrowVisibility(firstNumber, lastNumber, recordCount);
-	const records = await fetchAndDisplayRecords(firstNumber, lastNumber, inputValue);
-	$('#page').empty().append(`Showing record: ${firstNumber} - ${lastNumber}`);
-	$('#loader').hide();
+	return fetchAndDisplayRecords(firstNumber, lastNumber, inputValue)
+		.then(records => {
+			$('#page').empty().append(`Showing record: ${firstNumber} - ${lastNumber}`);
+			$('#loader').hide();
+			return records;
+		}).catch(err => {
+			throw new Error('Error displaying records' + err);
+		});
 }
 
 function calculateFirstAndLastNumbers(calculatedRows: number, recordCount: number) {
 	let firstNumber, lastNumber;
-	 if (myClass.firstNumber < 0 || myClass.firstNumber > recordCount) {
+	if (myClass.firstNumber < 0 || myClass.firstNumber > recordCount) {
 		firstNumber = 0;
 	} else {
 		firstNumber = myClass.firstNumber;
@@ -114,7 +75,7 @@ function calculateFirstAndLastNumbers(calculatedRows: number, recordCount: numbe
 	lastNumber = firstNumber + calculatedRows - 1;
 	if (lastNumber >= recordCount) {
 		lastNumber = recordCount;
-		firstNumber = lastNumber - (calculatedRows - 1)
+		firstNumber = lastNumber - (calculatedRows - 1);
 	}
 	return { firstNumber, lastNumber };
 }
@@ -133,46 +94,52 @@ function updateArrowVisibility(firstNumber: number, lastNumber: number, recordCo
 	}
 }
 
-async function fetchAndDisplayRecords(firstNumber: number, lastNumber: number, inputValue: number) {
-	const records = await myClass.fetchRecords(firstNumber, lastNumber);
-	const tbody = $("tbody");
-	tbody.empty();
-	for (const record of records) {
-		/** creates row for each record*/ 
-		$("tbody").append(`<tr class="row"></tr>`);
-		const lastRow = $(".row:last");
-		for (const value of record) {
-			/** assign each record to their column in a specified row */
-			lastRow.append(`<td>${value}</td>`);
-		}
-		if (record.includes(inputValue)) {
-			/** highlights the searched row */
-			lastRow.css('background-color', '#DDC0B4');
-		}
-		$("tbody").append(lastRow);
-	}
-	return records;
+function fetchAndDisplayRecords(firstNumber: number, lastNumber: number, inputValue: number) {
+	return myClass.fetchRecords(firstNumber, lastNumber)
+		.then(records => {
+			const tbody = $("tbody");
+			tbody.empty();
+			for (const record of records) {
+				/** creates row for each record*/
+				$("tbody").append(`<tr class="row"></tr>`);
+				const lastRow = $(".row:last");
+				for (const value of record) {
+					/** assign each record to their column in a specified row */
+					lastRow.append(`<td>${value}</td>`);
+				}
+				if (record.includes(inputValue)) {
+					/** highlights the searched row */
+					lastRow.css('background-color', '#DDC0B4');
+				}
+				$("tbody").append(lastRow);
+			}
+			return records;
+		})
+		.catch(err => {
+			throw new Error('Error fetching records' + err);
+		});
 }
 
 /** recalculates the record range that includes inputValue */
-async function searchRecordsAndResize(recordCount: number): Promise<void> {
+function searchRecordsAndResize(recordCount: number) {
 	let inputValue = $('#searchInput').val() as number;
 	if (inputValue < 0 || inputValue > recordCount) {
 		$('.modal').css('display', 'block');
 		$('.content').append(`<p>${inputValue} is not a number within the range. Please try a different number</p>`);
 		$('#page').empty().append(`Showing record: ${myClass.firstNumber} - ${myClass.lastNumber}`);
 		$('#searchInput').val('');
+		return;
 	}
 	let calculatedRows = calculatingRows();
 	/** divides the calculated max rows in half*/
 	const halfRange = Math.floor(calculatedRows / 2);
 	myClass.firstNumber = Math.max(0, inputValue - halfRange);
 	myClass.lastNumber = Math.min(recordCount, myClass.firstNumber + (calculatedRows - 1));
-	await displayRecords(recordCount);
+	displayRecords(recordCount);
 }
 
 /** Navigates to the next set of records */
-async function rightArrow(recordCount: number): Promise<void> {
+function rightArrow(recordCount: number) {
 	$('#page').empty();
 	$('#searchInput').val('');
 	/** retrieves the last row */
@@ -187,20 +154,19 @@ async function rightArrow(recordCount: number): Promise<void> {
 		/** determines te value in the last row */
 		const lastID = parseFloat(lastRecord[0]);
 		/** checks if the last value is within range */
-		if (0 <= lastID && lastID <= (recordCount)) {
-			const tbody = $("tbody");
-			tbody.empty();
+		if (0 <= lastID && lastID <= recordCount) {
+			$("tbody").empty();
 			/** calculates the first number of the page */
 			myClass.firstNumber = lastID + 1;
 			let calculatedRows = calculatingRows();
 			/** calculates the last number of the page */
 			myClass.lastNumber = myClass.firstNumber + (calculatedRows - 1);
-			await displayRecords(recordCount);
+			displayRecords(recordCount);
 		}
 	}
 }
 
-async function leftArrow(recordCount: number): Promise<void> {
+function leftArrow(recordCount: number) {
 	$('#page').empty();
 	$('#searchInput').val('');
 	/** retrieves the first row */
@@ -213,24 +179,24 @@ async function leftArrow(recordCount: number): Promise<void> {
 		}
 		/** determines te value in the first row */
 		const firstID = parseFloat(firstRecord[0]);
-		if (0 <= firstID && firstID <= (recordCount)) {
-			const tbody = $("tbody");
-			tbody.empty();
+		if (0 <= firstID && firstID <= recordCount) {
+			$("tbody").empty();
 			const calculatedRows = calculatingRows();
 			myClass.lastNumber = firstID - 1;
 			myClass.firstNumber = myClass.lastNumber - (calculatedRows - 1);
-			await displayRecords(recordCount);
+			displayRecords(recordCount);
 		}
 	}
 }
 
 window.onload = () => {
+	createTable();
 	myClass.fetchRecordCount()
 		.then(count => {
 			let recordCount: number = count - 1;
 			displayRecords(recordCount);
-			handleResize(recordCount)
-			searchRecordsAndResize(recordCount)
+			handleResize(recordCount);
+			searchRecordsAndResize(recordCount);
 			$('#btnSearch').on("click", (event) => {
 				event.preventDefault();
 				$('#page').empty();
@@ -244,9 +210,8 @@ window.onload = () => {
 			});
 		})
 		.catch(err => {
-			throw new Error('Error fetching record count' + err);
+			throw new Error('Error fetching record' + err);
 		});
-	createTable();
 	$('#closeModalBtn').on("click", () => {
 		$('.content').empty();
 		$('.modal').css('display', 'none');
@@ -256,7 +221,7 @@ window.onload = () => {
 			event.preventDefault();
 		}
 	});
-	$('#searchInput').on('input', (event) => {
+	$('#searchInput').on('input', () => {
 		const inputValue = $('#searchInput').val() as string;
 		if (inputValue.includes('.')) {
 			$('#searchInput').val(inputValue.replace('.', ''));
diff --git a/index.html b/index.html
index f5f78f03..0171159f 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
 	<title>JS Onboard Project</title>
 	<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
 	<link rel="stylesheet" href="style.css">
+	<script src="/myClass.js" ></script>
 	<script src="/app.js" ></script>
 </head>
 
diff --git a/myClass.js b/myClass.js
new file mode 100644
index 00000000..7c2a1bee
--- /dev/null
+++ b/myClass.js
@@ -0,0 +1,50 @@
+"use strict";
+var Myclass = /** @class */ (function () {
+    function Myclass() {
+        this.firstNumber = 0;
+        this.lastNumber = 0;
+        this.backend = "http://localhost:2050";
+        this.resizeTimeout = 0;
+    }
+    /** fetches the number of records from backend */
+    Myclass.prototype.fetchRecordCount = function () {
+        return fetch(this.backend + "/recordCount")
+            .then(function (res) {
+            if (!res.ok) {
+                throw 'Failed to fetch record count';
+            }
+            return res.json();
+        })
+            .catch(function (err) {
+            throw 'Error fetching the record count: ' + err;
+        });
+    };
+    /** fetches columns from backend */
+    Myclass.prototype.fetchColumns = function () {
+        return fetch(this.backend + "/columns")
+            .then(function (res) {
+            if (!res.ok) {
+                throw 'Failed to fetch columns';
+            }
+            return res.json();
+        })
+            .catch(function (err) {
+            throw 'Error fetching columns' + err;
+        });
+    };
+    /** fetches records from backend */
+    Myclass.prototype.fetchRecords = function (from, to) {
+        return fetch(this.backend + "/records?from=" + from + "&to=" + to)
+            .then(function (res) {
+            if (!res.ok) {
+                throw "Sorry, there's a problem with the network";
+            }
+            return res.json();
+        })
+            .catch(function (err) {
+            throw 'Error fetching records from server ' + err;
+        });
+    };
+    return Myclass;
+}());
+//# sourceMappingURL=myClass.js.map
\ No newline at end of file
diff --git a/myClass.js.map b/myClass.js.map
new file mode 100644
index 00000000..f374af5c
--- /dev/null
+++ b/myClass.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"myClass.js","sourceRoot":"","sources":["myClass.ts"],"names":[],"mappings":";AAAA;IAAA;QACC,gBAAW,GAAW,CAAC,CAAC;QACxB,eAAU,GAAW,CAAC,CAAC;QACvB,YAAO,GAAW,uBAAuB,CAAC;QAC1C,kBAAa,GAAW,CAAC,CAAC;IA2C3B,CAAC;IAzCA,iDAAiD;IACjD,kCAAgB,GAAhB;QACC,OAAO,KAAK,CAAI,IAAI,CAAC,OAAO,iBAAc,CAAC;aACzC,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE;gBACZ,MAAM,8BAA8B,CAAC;aACrC;YACD,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;QACnB,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,GAAG;YACT,MAAM,mCAAmC,GAAG,GAAG,CAAC;QACjD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mCAAmC;IACnC,8BAAY,GAAZ;QACC,OAAO,KAAK,CAAI,IAAI,CAAC,OAAO,aAAU,CAAC;aACrC,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE;gBACZ,MAAM,yBAAyB,CAAC;aAChC;YACD,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;QACnB,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,GAAG;YACT,MAAM,wBAAwB,GAAG,GAAG,CAAC;QACtC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mCAAmC;IACnC,8BAAY,GAAZ,UAAa,IAAY,EAAE,EAAU;QACpC,OAAO,KAAK,CAAI,IAAI,CAAC,OAAO,sBAAiB,IAAI,YAAO,EAAI,CAAC;aAC3D,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE;gBACZ,MAAM,2CAA2C,CAAC;aAClD;YACD,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;QACnB,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,GAAG;YACT,MAAM,qCAAqC,GAAG,GAAG,CAAC;QACnD,CAAC,CAAC,CAAC;IACL,CAAC;IACF,cAAC;AAAD,CAAC,AA/CD,IA+CC"}
\ No newline at end of file
diff --git a/myClass.ts b/myClass.ts
new file mode 100644
index 00000000..5be01ae9
--- /dev/null
+++ b/myClass.ts
@@ -0,0 +1,48 @@
+class Myclass {
+	firstNumber: number = 0;
+	lastNumber: number = 0;
+	backend: string = "http://localhost:2050";
+	resizeTimeout: number = 0;
+
+	/** fetches the number of records from backend */
+	fetchRecordCount(): Promise<number> {
+		return fetch(`${this.backend}/recordCount`)
+			.then(res => {
+				if (!res.ok) {
+					throw 'Failed to fetch record count';
+				}
+				return res.json();
+			})
+			.catch(err => {
+				throw 'Error fetching the record count: ' + err;
+			});
+	}
+
+	/** fetches columns from backend */
+	fetchColumns(): Promise<string[]> {
+		return fetch(`${this.backend}/columns`)
+			.then(res => {
+				if (!res.ok) {
+					throw 'Failed to fetch columns';
+				}
+				return res.json();
+			})
+			.catch(err => {
+				throw 'Error fetching columns' + err;
+			});
+	}
+
+	/** fetches records from backend */
+	fetchRecords(from: number, to: number): Promise<any[]> {
+		return fetch(`${this.backend}/records?from=${from}&to=${to}`)
+			.then(res => {
+				if (!res.ok) {
+					throw "Sorry, there's a problem with the network";
+				}
+				return res.json();
+			})
+			.catch(err => {
+				throw 'Error fetching records from server ' + err;
+			});
+	}
+}
diff --git a/style.css b/style.css
index 913aef27..005b98b1 100644
--- a/style.css
+++ b/style.css
@@ -117,6 +117,7 @@ td:hover {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	z-index: 1;
 }
 
 .loader-spinner {

From 9580c600822cab9f130d2c9a2b8e555f29aa939f Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Fri, 15 Sep 2023 12:30:54 +0200
Subject: [PATCH 22/33] 15/09

---
 .gitignore                   |   2 +
 app.ts                       | 429 ++++++++++++++++++-----------------
 myClass.ts => dataManager.ts |  24 +-
 index.html                   |   6 +-
 myClass.js                   |  50 ----
 myClass.js.map               |   1 -
 6 files changed, 246 insertions(+), 266 deletions(-)
 rename myClass.ts => dataManager.ts (63%)
 delete mode 100644 myClass.js
 delete mode 100644 myClass.js.map

diff --git a/.gitignore b/.gitignore
index 0872c36c..1d1dcfd9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 /node_modules
 app.js
 app.js.map
+dataManager.js
+dataManager.js.map
diff --git a/app.ts b/app.ts
index 670f92bb..6886c957 100644
--- a/app.ts
+++ b/app.ts
@@ -1,230 +1,253 @@
 import { ajax, css } from "jquery";
 
-const myClass = new Myclass();
-
-/** Initializes the table head */
-function createTable(): Promise<string[]> {
-	return myClass.fetchColumns()
-		.then(columns => {
-			for (const col of columns) {
-				$(".head").append(`<th>${col}</th>`);
-			}
-			return columns;
-		})
-		.catch(err => {
-			throw 'Error creating table' + err;
-		});
-}
+class RecordManager {
+	firstNumber: number;
+	lastNumber: number;
+	recordCount: number;
 
-/** calculates the number of rows that can fit the screen */
-const calculatingRows = (): number => {
-	const screenHeight = window.innerHeight;
-	const availableHeight = screenHeight - 105;
-	let rowHeight = 35;
-	if (availableHeight <= 0) {
-		return 0;
-	} else {
-		let maxRows = Math.floor(availableHeight / rowHeight);
-		return maxRows;
+	constructor() {
+		this.firstNumber = 0;
+		this.lastNumber = 0;
+		this.recordCount = 0;
+		this.initialize();
 	}
-};
-
-/** calls to re-display records when screen is adjusted */
-function handleResize(recordCount: number) {
-	$(window).on('resize', () => {
-		clearTimeout(myClass.resizeTimeout);
-		myClass.resizeTimeout = setTimeout(() => {
-			displayRecords(recordCount)
-				.then(() => {
-					let inputValue = $('#searchInput').val();
-					if (inputValue !== '') {
-						return searchRecordsAndResize(recordCount);
-					}
-				})
-				.catch(err => {
-					throw new Error('Error occured while resizing' + err);
-				});
-		}, 250);
-	});
-}
 
-/** display records that fit the screen */
-function displayRecords(recordCount: number): Promise<any[]> {
-	$('#loader').show();
-	const inputValue = $('#searchInput').val() as number;
-	const calculatedRows = calculatingRows();
-	const { firstNumber, lastNumber } = calculateFirstAndLastNumbers(calculatedRows, recordCount);
-	updateArrowVisibility(firstNumber, lastNumber, recordCount);
-	return fetchAndDisplayRecords(firstNumber, lastNumber, inputValue)
-		.then(records => {
-			$('#page').empty().append(`Showing record: ${firstNumber} - ${lastNumber}`);
-			$('#loader').hide();
-			return records;
-		}).catch(err => {
-			throw new Error('Error displaying records' + err);
-		});
-}
+	initialize() {
+		this.createTableHeader();
+		dataManager.fetchRecordCount()
+			.then(count => {
+				this.recordCount = count - 1;
+				this.updateAndDisplayRecords();
+				this.recordEventHandlers();
+				this.handleResize();
+			})
+			.catch(err => {
+				alert('Error fetching and displaying the table records, reload the page');
+				throw err;
+			});
+	}
 
-function calculateFirstAndLastNumbers(calculatedRows: number, recordCount: number) {
-	let firstNumber, lastNumber;
-	if (myClass.firstNumber < 0 || myClass.firstNumber > recordCount) {
-		firstNumber = 0;
-	} else {
-		firstNumber = myClass.firstNumber;
+	/** Initializes the table head */
+	createTableHeader() {
+		return dataManager.fetchColumns()
+			.then(columns => {
+				for (const col of columns) {
+					$(".head").append(`<th>${col}</th>`);
+				}
+			})
+			.catch(err => {
+				alert('Error creating table heading');
+				throw err;
+			});
 	}
-	lastNumber = firstNumber + calculatedRows - 1;
-	if (lastNumber >= recordCount) {
-		lastNumber = recordCount;
-		firstNumber = lastNumber - (calculatedRows - 1);
+
+	/** calculates the number of rows that can fit the screen */
+	calculatingRows(): number {
+		const screenHeight = window.innerHeight;
+		const availableHeight = screenHeight - 105;
+		let rowHeight = 35;
+		if (availableHeight <= 0) {
+			return 0;
+		} else {
+			let maxRows = Math.floor(availableHeight / rowHeight);
+			return maxRows;
+		}
 	}
-	return { firstNumber, lastNumber };
-}
 
-function updateArrowVisibility(firstNumber: number, lastNumber: number, recordCount: number) {
-	if (firstNumber === 0) {
-		$('.arrow-left').hide();
-	} else {
-		$('.arrow-left').show();
+	/** fetching records that fit the screen */
+	updateAndDisplayRecords(): Promise<void> {
+		const inputValue = <string>($('#searchInput').val());
+		let errorMessage = '';
+		if (inputValue !== '') {
+		  errorMessage = 'Failed to search, reload the page and search again';
+		  $('#loader').show();
+		  this.searchRecordsAndResize();
+		} else {
+		  errorMessage = 'Error to fetch and display records, reload the page';
+		  $('#loader').show();
+		}
+		this.calculateFirstAndLastNumbers();
+		this.updateArrowVisibility();
+		return this.fetchAndDisplayRecords()
+		  .then(() => {
+			$('#loader').hide();
+		  })
+		  .catch(err => {
+			alert(errorMessage);
+			throw err;
+		  });
+	  }	  
+
+	/** Calculates the firstNumber and lastNumber */
+	calculateFirstAndLastNumbers() {
+		let rowsPerPage = this.calculatingRows();
+		if (this.firstNumber < 0) {
+			this.firstNumber = 0;
+		} else {
+			this.firstNumber = this.firstNumber;
+		}
+		this.lastNumber = this.firstNumber + (rowsPerPage - 1);
+		if (this.lastNumber >= this.recordCount) {
+			this.firstNumber = this.recordCount - (rowsPerPage - 1);
+			this.lastNumber = this.recordCount;
+		}
 	}
 
-	if (lastNumber >= recordCount) {
-		$('.arrow-right').hide();
-	} else {
-		$('.arrow-right').show();
+	updateArrowVisibility() {
+		if (this.firstNumber === 0) {
+			$('.arrow-left').hide();
+		} else {
+			$('.arrow-left').show();
+		}
+		if (this.lastNumber >= this.recordCount) {
+			$('.arrow-right').hide();
+		} else {
+			$('.arrow-right').show();
+		}
 	}
-}
 
-function fetchAndDisplayRecords(firstNumber: number, lastNumber: number, inputValue: number) {
-	return myClass.fetchRecords(firstNumber, lastNumber)
-		.then(records => {
-			const tbody = $("tbody");
-			tbody.empty();
-			for (const record of records) {
-				/** creates row for each record*/
-				$("tbody").append(`<tr class="row"></tr>`);
-				const lastRow = $(".row:last");
-				for (const value of record) {
-					/** assign each record to their column in a specified row */
-					lastRow.append(`<td>${value}</td>`);
+	fetchAndDisplayRecords(): Promise<void> {
+		return dataManager.fetchRecords(this.firstNumber, this.lastNumber)
+			.then(records => {
+				const inputValue = <string>($('#searchInput').val());
+				$("#tableBody").empty();
+				for (const record of records) {
+					// creates row for each record
+					$("tbody").append(`<tr class="row"></tr>`);
+					const lastRow = $(".row:last");
+					for (const value of record) {
+						// assign each record to their column in a specified row
+						lastRow.append(`<td>${value}</td>`);
+						if (value === inputValue) {
+							// highlights the searched row 
+							lastRow.css('background-color', '#DDC0B4');
+						}
+					}
+					$("tbody").append(lastRow);
 				}
-				if (record.includes(inputValue)) {
-					/** highlights the searched row */
-					lastRow.css('background-color', '#DDC0B4');
+				$('#page').empty().append(`Showing record: ${this.firstNumber} - ${this.lastNumber}`);
+				$('#loader').hide();
+			})
+			.catch(err => {
+				alert('Error while displaying records, reload the page');
+				throw err;
+			});
+	}
+
+	/** recalculates the record range that includes inputValue fromm user */
+	searchRecordsAndResize() {
+		let inputValue = <number>($('#searchInput').val());
+		console.log(inputValue, this.recordCount);
+		if (inputValue < 0 || inputValue > this.recordCount) {
+			$('.modal').css('display', 'block');
+			$('.content').append(`<p>${inputValue} is not a number within the range. Please try a different number</p>`);
+			$('#page').empty().append(`Showing record: ${this.firstNumber} - ${this.lastNumber}`);
+			$('#searchInput').val('');
+			return;
+		}
+		let calculatedRows = this.calculatingRows();
+		// divides the calculated max rows in half
+		const halfRange = Math.floor(calculatedRows / 2);
+		this.firstNumber = Math.max(0, inputValue - halfRange);
+		this.lastNumber = Math.min(this.recordCount, this.firstNumber + (calculatedRows - 1));
+	}
+
+	/** Navigates to the next set of records */
+	rightArrow() {
+		$('#searchInput').val('');
+		// retrieves the last row
+		const lastRow = document.querySelector("#recordsTable tbody .row:last-child");
+		// checks if the last row exists 
+		if (lastRow) {
+			const cells = lastRow.querySelectorAll("td");
+			if (cells.length > 0) {
+				// Get the value of the first cell 
+				const lastID = parseFloat(cells[0].textContent || "");
+				// checks if the last value is within range 
+				if (0 <= lastID && lastID <= this.recordCount) {
+					// calculates the first number of the page 
+					this.firstNumber = lastID + 1;
+					const calculatedRows = this.calculatingRows();
+					// calculates the last number of the page 
+					this.lastNumber = this.firstNumber + (calculatedRows - 1);
 				}
-				$("tbody").append(lastRow);
 			}
-			return records;
-		})
-		.catch(err => {
-			throw new Error('Error fetching records' + err);
-		});
-}
+		}
+		this.updateAndDisplayRecords();
+	}
 
-/** recalculates the record range that includes inputValue */
-function searchRecordsAndResize(recordCount: number) {
-	let inputValue = $('#searchInput').val() as number;
-	if (inputValue < 0 || inputValue > recordCount) {
-		$('.modal').css('display', 'block');
-		$('.content').append(`<p>${inputValue} is not a number within the range. Please try a different number</p>`);
-		$('#page').empty().append(`Showing record: ${myClass.firstNumber} - ${myClass.lastNumber}`);
+	leftArrow() {
 		$('#searchInput').val('');
-		return;
+		// retrieves the first row 
+		const firstRow = document.querySelector("#recordsTable tbody .row:first-child");
+		if (firstRow) {
+			const cells = firstRow.querySelectorAll("td");
+			if (cells.length > 0) {
+				const firstID = parseFloat(cells[0].textContent || "");
+				if (0 <= firstID && firstID <= this.recordCount) {
+					const calculatedRows = this.calculatingRows();
+					this.lastNumber = firstID - 1;
+					this.firstNumber = this.lastNumber - (calculatedRows - 1);
+				}
+			}
+		}
+		this.updateAndDisplayRecords();
 	}
-	let calculatedRows = calculatingRows();
-	/** divides the calculated max rows in half*/
-	const halfRange = Math.floor(calculatedRows / 2);
-	myClass.firstNumber = Math.max(0, inputValue - halfRange);
-	myClass.lastNumber = Math.min(recordCount, myClass.firstNumber + (calculatedRows - 1));
-	displayRecords(recordCount);
-}
 
-/** Navigates to the next set of records */
-function rightArrow(recordCount: number) {
-	$('#page').empty();
-	$('#searchInput').val('');
-	/** retrieves the last row */
-	const lastRow = document.querySelector("#recordsTable tbody .row:last-child");
-	/** checks if the last row exists */
-	if (lastRow) {
-		const cells = lastRow.querySelectorAll("td");
-		const lastRecord = [];
-		for (const cell of Array.from(cells)) {
-			lastRecord.push(cell.textContent || "");
-		}
-		/** determines te value in the last row */
-		const lastID = parseFloat(lastRecord[0]);
-		/** checks if the last value is within range */
-		if (0 <= lastID && lastID <= recordCount) {
-			$("tbody").empty();
-			/** calculates the first number of the page */
-			myClass.firstNumber = lastID + 1;
-			let calculatedRows = calculatingRows();
-			/** calculates the last number of the page */
-			myClass.lastNumber = myClass.firstNumber + (calculatedRows - 1);
-			displayRecords(recordCount);
-		}
+	/** calls to re-display records when screen is adjusted */
+	handleResize() {
+		let resizeTimeout: number;
+		$(window).on('resize', () => {
+			clearTimeout(resizeTimeout);
+			resizeTimeout = setTimeout(() => {
+				$('#loader').show();
+				this.updateAndDisplayRecords()
+					.then(() => {
+						$('#loader').hide();
+					})
+					.catch(err => {
+						alert('Error occurred while resizing, reload the page');
+						$('#loader').hide();
+						throw err;
+					});
+			}, 250);
+		});
 	}
-}
 
-function leftArrow(recordCount: number) {
-	$('#page').empty();
-	$('#searchInput').val('');
-	/** retrieves the first row */
-	const firstRow = document.querySelector("#recordsTable tbody .row:first-child");
-	if (firstRow) {
-		const cells = firstRow.querySelectorAll("td");
-		const firstRecord = [];
-		for (const cell of Array.from(cells)) {
-			firstRecord.push(cell.textContent || "");
-		}
-		/** determines te value in the first row */
-		const firstID = parseFloat(firstRecord[0]);
-		if (0 <= firstID && firstID <= recordCount) {
-			$("tbody").empty();
-			const calculatedRows = calculatingRows();
-			myClass.lastNumber = firstID - 1;
-			myClass.firstNumber = myClass.lastNumber - (calculatedRows - 1);
-			displayRecords(recordCount);
-		}
+	recordEventHandlers() {
+		$('#btnSearch').on('click', (event) => {
+			event.preventDefault();
+			this.updateAndDisplayRecords();
+		});
+
+		$('.arrow-right').on('click', () => {
+			this.rightArrow();
+		});
+
+		$('.arrow-left').on('click', () => {
+			this.leftArrow();
+		});
+
+		$('#closeModalBtn').on("click", () => {
+			$('.content').empty();
+			$('.modal').css('display', 'none');
+		});
+
+		$('#searchInput').on('keydown', (event) => {
+			if (event.key === 'e' || event.key === 'E') {
+				event.preventDefault();
+			}
+		});
+
+		$('#searchInput').on('input', () => {
+			const inputValue = <string>$('#searchInput').val();
+			if (inputValue.includes('.')) {
+				$('#searchInput').val(inputValue.replace('.', ''));
+			}
+		});
 	}
 }
 
 window.onload = () => {
-	createTable();
-	myClass.fetchRecordCount()
-		.then(count => {
-			let recordCount: number = count - 1;
-			displayRecords(recordCount);
-			handleResize(recordCount);
-			searchRecordsAndResize(recordCount);
-			$('#btnSearch').on("click", (event) => {
-				event.preventDefault();
-				$('#page').empty();
-				searchRecordsAndResize(recordCount);
-			});
-			$('.arrow-right').on('click', () => {
-				rightArrow(recordCount);
-			});
-			$('.arrow-left').on('click', () => {
-				leftArrow(recordCount);
-			});
-		})
-		.catch(err => {
-			throw new Error('Error fetching record' + err);
-		});
-	$('#closeModalBtn').on("click", () => {
-		$('.content').empty();
-		$('.modal').css('display', 'none');
-	});
-	$('#searchInput').on('keydown', (event) => {
-		if (event.key === 'e' || event.key === 'E') {
-			event.preventDefault();
-		}
-	});
-	$('#searchInput').on('input', () => {
-		const inputValue = $('#searchInput').val() as string;
-		if (inputValue.includes('.')) {
-			$('#searchInput').val(inputValue.replace('.', ''));
-		}
-	});
+	new RecordManager();
 }
diff --git a/myClass.ts b/dataManager.ts
similarity index 63%
rename from myClass.ts
rename to dataManager.ts
index 5be01ae9..dde555f2 100644
--- a/myClass.ts
+++ b/dataManager.ts
@@ -1,17 +1,23 @@
-class Myclass {
-	firstNumber: number = 0;
-	lastNumber: number = 0;
-	backend: string = "http://localhost:2050";
-	resizeTimeout: number = 0;
+class dataManager {
+	// firstNumber: number = 0;
+	// lastNumber: number = 0;
+	static backend: string = "http://localhost:2050";
+	// resizeTimeout: number = 0;
 
 	/** fetches the number of records from backend */
-	fetchRecordCount(): Promise<number> {
+	static fetchRecordCount(): Promise<number> {
 		return fetch(`${this.backend}/recordCount`)
 			.then(res => {
 				if (!res.ok) {
 					throw 'Failed to fetch record count';
 				}
-				return res.json();
+				return res.json()
+			})
+			.then(totalRecords => {
+				if(typeof totalRecords !== 'number'){
+					throw new Error('Invalid response format');
+				}
+				return totalRecords;
 			})
 			.catch(err => {
 				throw 'Error fetching the record count: ' + err;
@@ -19,7 +25,7 @@ class Myclass {
 	}
 
 	/** fetches columns from backend */
-	fetchColumns(): Promise<string[]> {
+	static fetchColumns(): Promise<string[]> {
 		return fetch(`${this.backend}/columns`)
 			.then(res => {
 				if (!res.ok) {
@@ -33,7 +39,7 @@ class Myclass {
 	}
 
 	/** fetches records from backend */
-	fetchRecords(from: number, to: number): Promise<any[]> {
+	static fetchRecords(from: number, to: number): Promise<string[]> {
 		return fetch(`${this.backend}/records?from=${from}&to=${to}`)
 			.then(res => {
 				if (!res.ok) {
diff --git a/index.html b/index.html
index 0171159f..3437bc90 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,8 @@
 	<title>JS Onboard Project</title>
 	<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
 	<link rel="stylesheet" href="style.css">
-	<script src="/myClass.js" ></script>
-	<script src="/app.js" ></script>
+	<script src="dataManager.js" ></script>
+	<script src="app.js" ></script>
 </head>
 
 <body>
@@ -36,7 +36,7 @@ <h1 class="heading">Javascript Project</h1>
 			<tr class="head">
 			</tr>
 		</thead>
-		<tbody>
+		<tbody id="tableBody">
 		</tbody>
 	</table>
 
diff --git a/myClass.js b/myClass.js
deleted file mode 100644
index 7c2a1bee..00000000
--- a/myClass.js
+++ /dev/null
@@ -1,50 +0,0 @@
-"use strict";
-var Myclass = /** @class */ (function () {
-    function Myclass() {
-        this.firstNumber = 0;
-        this.lastNumber = 0;
-        this.backend = "http://localhost:2050";
-        this.resizeTimeout = 0;
-    }
-    /** fetches the number of records from backend */
-    Myclass.prototype.fetchRecordCount = function () {
-        return fetch(this.backend + "/recordCount")
-            .then(function (res) {
-            if (!res.ok) {
-                throw 'Failed to fetch record count';
-            }
-            return res.json();
-        })
-            .catch(function (err) {
-            throw 'Error fetching the record count: ' + err;
-        });
-    };
-    /** fetches columns from backend */
-    Myclass.prototype.fetchColumns = function () {
-        return fetch(this.backend + "/columns")
-            .then(function (res) {
-            if (!res.ok) {
-                throw 'Failed to fetch columns';
-            }
-            return res.json();
-        })
-            .catch(function (err) {
-            throw 'Error fetching columns' + err;
-        });
-    };
-    /** fetches records from backend */
-    Myclass.prototype.fetchRecords = function (from, to) {
-        return fetch(this.backend + "/records?from=" + from + "&to=" + to)
-            .then(function (res) {
-            if (!res.ok) {
-                throw "Sorry, there's a problem with the network";
-            }
-            return res.json();
-        })
-            .catch(function (err) {
-            throw 'Error fetching records from server ' + err;
-        });
-    };
-    return Myclass;
-}());
-//# sourceMappingURL=myClass.js.map
\ No newline at end of file
diff --git a/myClass.js.map b/myClass.js.map
deleted file mode 100644
index f374af5c..00000000
--- a/myClass.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"myClass.js","sourceRoot":"","sources":["myClass.ts"],"names":[],"mappings":";AAAA;IAAA;QACC,gBAAW,GAAW,CAAC,CAAC;QACxB,eAAU,GAAW,CAAC,CAAC;QACvB,YAAO,GAAW,uBAAuB,CAAC;QAC1C,kBAAa,GAAW,CAAC,CAAC;IA2C3B,CAAC;IAzCA,iDAAiD;IACjD,kCAAgB,GAAhB;QACC,OAAO,KAAK,CAAI,IAAI,CAAC,OAAO,iBAAc,CAAC;aACzC,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE;gBACZ,MAAM,8BAA8B,CAAC;aACrC;YACD,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;QACnB,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,GAAG;YACT,MAAM,mCAAmC,GAAG,GAAG,CAAC;QACjD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mCAAmC;IACnC,8BAAY,GAAZ;QACC,OAAO,KAAK,CAAI,IAAI,CAAC,OAAO,aAAU,CAAC;aACrC,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE;gBACZ,MAAM,yBAAyB,CAAC;aAChC;YACD,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;QACnB,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,GAAG;YACT,MAAM,wBAAwB,GAAG,GAAG,CAAC;QACtC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mCAAmC;IACnC,8BAAY,GAAZ,UAAa,IAAY,EAAE,EAAU;QACpC,OAAO,KAAK,CAAI,IAAI,CAAC,OAAO,sBAAiB,IAAI,YAAO,EAAI,CAAC;aAC3D,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE;gBACZ,MAAM,2CAA2C,CAAC;aAClD;YACD,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;QACnB,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,GAAG;YACT,MAAM,qCAAqC,GAAG,GAAG,CAAC;QACnD,CAAC,CAAC,CAAC;IACL,CAAC;IACF,cAAC;AAAD,CAAC,AA/CD,IA+CC"}
\ No newline at end of file

From cc6a0dd869a1dddc20d1652464b2eedb65175a63 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Fri, 15 Sep 2023 15:18:16 +0200
Subject: [PATCH 23/33] 15/09

---
 app.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app.ts b/app.ts
index 6886c957..ea8a9e09 100644
--- a/app.ts
+++ b/app.ts
@@ -137,7 +137,6 @@ class RecordManager {
 	/** recalculates the record range that includes inputValue fromm user */
 	searchRecordsAndResize() {
 		let inputValue = <number>($('#searchInput').val());
-		console.log(inputValue, this.recordCount);
 		if (inputValue < 0 || inputValue > this.recordCount) {
 			$('.modal').css('display', 'block');
 			$('.content').append(`<p>${inputValue} is not a number within the range. Please try a different number</p>`);

From f18872b4938a374799e01178b1c2867acc00d6ec Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Mon, 18 Sep 2023 10:17:45 +0200
Subject: [PATCH 24/33] 18/09

---
 dataManager.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/dataManager.ts b/dataManager.ts
index dde555f2..9c36b13e 100644
--- a/dataManager.ts
+++ b/dataManager.ts
@@ -1,8 +1,5 @@
 class dataManager {
-	// firstNumber: number = 0;
-	// lastNumber: number = 0;
 	static backend: string = "http://localhost:2050";
-	// resizeTimeout: number = 0;
 
 	/** fetches the number of records from backend */
 	static fetchRecordCount(): Promise<number> {

From 24aba760c6a97f0f3c479e7d229ff23df6a7890d Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Mon, 18 Sep 2023 10:31:22 +0200
Subject: [PATCH 25/33] 18/09

---
 app.ts         | 2 +-
 dataManager.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app.ts b/app.ts
index ea8a9e09..fca90272 100644
--- a/app.ts
+++ b/app.ts
@@ -45,7 +45,7 @@ class RecordManager {
 	calculatingRows(): number {
 		const screenHeight = window.innerHeight;
 		const availableHeight = screenHeight - 105;
-		let rowHeight = 35;
+		const rowHeight = 35;
 		if (availableHeight <= 0) {
 			return 0;
 		} else {
diff --git a/dataManager.ts b/dataManager.ts
index 9c36b13e..72e2be22 100644
--- a/dataManager.ts
+++ b/dataManager.ts
@@ -8,7 +8,7 @@ class dataManager {
 				if (!res.ok) {
 					throw 'Failed to fetch record count';
 				}
-				return res.json()
+				return res.json();
 			})
 			.then(totalRecords => {
 				if(typeof totalRecords !== 'number'){

From 2e7e23d57aa6c7f36a6ac571a3d1c234d32f87bc Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 26 Sep 2023 10:45:50 +0200
Subject: [PATCH 26/33] 26/09

---
 app.ts    | 94 ++++++++++++++++++-------------------------------------
 style.css | 46 +++++++++++++++++++++------
 2 files changed, 66 insertions(+), 74 deletions(-)

diff --git a/app.ts b/app.ts
index fca90272..2291a557 100644
--- a/app.ts
+++ b/app.ts
@@ -42,7 +42,7 @@ class RecordManager {
 	}
 
 	/** calculates the number of rows that can fit the screen */
-	calculatingRows(): number {
+	getNumberOfCalculatingRows(): number {
 		const screenHeight = window.innerHeight;
 		const availableHeight = screenHeight - 105;
 		const rowHeight = 35;
@@ -56,35 +56,24 @@ class RecordManager {
 
 	/** fetching records that fit the screen */
 	updateAndDisplayRecords(): Promise<void> {
-		const inputValue = <string>($('#searchInput').val());
-		let errorMessage = '';
-		if (inputValue !== '') {
-		  errorMessage = 'Failed to search, reload the page and search again';
-		  $('#loader').show();
-		  this.searchRecordsAndResize();
-		} else {
-		  errorMessage = 'Error to fetch and display records, reload the page';
-		  $('#loader').show();
-		}
+		$('#loader').show();
 		this.calculateFirstAndLastNumbers();
 		this.updateArrowVisibility();
 		return this.fetchAndDisplayRecords()
-		  .then(() => {
-			$('#loader').hide();
-		  })
-		  .catch(err => {
-			alert(errorMessage);
-			throw err;
-		  });
-	  }	  
+			.then(() => {
+				$('#loader').hide();
+			})
+			.catch(err => {
+				alert('Error to fetch and display records, reload the page');
+				throw err;
+			});
+	}
 
 	/** Calculates the firstNumber and lastNumber */
 	calculateFirstAndLastNumbers() {
-		let rowsPerPage = this.calculatingRows();
+		let rowsPerPage = this.getNumberOfCalculatingRows();
 		if (this.firstNumber < 0) {
 			this.firstNumber = 0;
-		} else {
-			this.firstNumber = this.firstNumber;
 		}
 		this.lastNumber = this.firstNumber + (rowsPerPage - 1);
 		if (this.lastNumber >= this.recordCount) {
@@ -144,7 +133,7 @@ class RecordManager {
 			$('#searchInput').val('');
 			return;
 		}
-		let calculatedRows = this.calculatingRows();
+		let calculatedRows = this.getNumberOfCalculatingRows();
 		// divides the calculated max rows in half
 		const halfRange = Math.floor(calculatedRows / 2);
 		this.firstNumber = Math.max(0, inputValue - halfRange);
@@ -152,43 +141,24 @@ class RecordManager {
 	}
 
 	/** Navigates to the next set of records */
-	rightArrow() {
+	navigateToNextPage() {
 		$('#searchInput').val('');
-		// retrieves the last row
-		const lastRow = document.querySelector("#recordsTable tbody .row:last-child");
-		// checks if the last row exists 
-		if (lastRow) {
-			const cells = lastRow.querySelectorAll("td");
-			if (cells.length > 0) {
-				// Get the value of the first cell 
-				const lastID = parseFloat(cells[0].textContent || "");
-				// checks if the last value is within range 
-				if (0 <= lastID && lastID <= this.recordCount) {
-					// calculates the first number of the page 
-					this.firstNumber = lastID + 1;
-					const calculatedRows = this.calculatingRows();
-					// calculates the last number of the page 
-					this.lastNumber = this.firstNumber + (calculatedRows - 1);
-				}
-			}
+		if (0 <= this.lastNumber && this.lastNumber <= this.recordCount) {
+			// calculates the first number of the page 
+			this.firstNumber = this.lastNumber + 1;
+			const calculatedRows = this.getNumberOfCalculatingRows();
+			// calculates the last number of the page 
+			this.lastNumber = this.firstNumber + (calculatedRows - 1);
 		}
 		this.updateAndDisplayRecords();
 	}
 
-	leftArrow() {
+	navigateToPreviousPage() {
 		$('#searchInput').val('');
-		// retrieves the first row 
-		const firstRow = document.querySelector("#recordsTable tbody .row:first-child");
-		if (firstRow) {
-			const cells = firstRow.querySelectorAll("td");
-			if (cells.length > 0) {
-				const firstID = parseFloat(cells[0].textContent || "");
-				if (0 <= firstID && firstID <= this.recordCount) {
-					const calculatedRows = this.calculatingRows();
-					this.lastNumber = firstID - 1;
-					this.firstNumber = this.lastNumber - (calculatedRows - 1);
-				}
-			}
+		if (0 <= this.firstNumber && this.firstNumber <= this.recordCount) {
+			const calculatedRows = this.getNumberOfCalculatingRows();
+			this.lastNumber = this.firstNumber - 1;
+			this.firstNumber = this.lastNumber - (calculatedRows - 1);
 		}
 		this.updateAndDisplayRecords();
 	}
@@ -216,15 +186,16 @@ class RecordManager {
 	recordEventHandlers() {
 		$('#btnSearch').on('click', (event) => {
 			event.preventDefault();
+			this.searchRecordsAndResize();
 			this.updateAndDisplayRecords();
 		});
 
 		$('.arrow-right').on('click', () => {
-			this.rightArrow();
+			this.navigateToNextPage();
 		});
 
 		$('.arrow-left').on('click', () => {
-			this.leftArrow();
+			this.navigateToPreviousPage();
 		});
 
 		$('#closeModalBtn').on("click", () => {
@@ -232,16 +203,11 @@ class RecordManager {
 			$('.modal').css('display', 'none');
 		});
 
-		$('#searchInput').on('keydown', (event) => {
-			if (event.key === 'e' || event.key === 'E') {
-				event.preventDefault();
-			}
-		});
-
 		$('#searchInput').on('input', () => {
 			const inputValue = <string>$('#searchInput').val();
-			if (inputValue.includes('.')) {
-				$('#searchInput').val(inputValue.replace('.', ''));
+			if (inputValue !== undefined) {
+				let sanitizedValue = inputValue.replace(/[^0-9]/g, '');
+				$('#searchInput').val(sanitizedValue);
 			}
 		});
 	}
diff --git a/style.css b/style.css
index 005b98b1..53fbecf5 100644
--- a/style.css
+++ b/style.css
@@ -6,7 +6,7 @@ body {
 }
 
 tbody .row td {
-	padding: 0.5rem;
+	padding: 8px;
 }
 
 table {
@@ -20,8 +20,8 @@ td {
 	border: 1px solid #4B3832;
 	border-collapse: collapse;
 	text-align: center;
-	min-height: 1rem;
 	color: black;
+	white-space: normal;
 }
 
 #recordsTable thead .head {
@@ -45,13 +45,13 @@ td:hover {
 .showRecords {
 	top: 0.8%;
 	right: 0;
-	padding: 1rem;
+	padding: 16px;
 	position: absolute;
 }
 
 .showRecords #page {
 	display: inline-block;
-	font-size: 1.2rem;
+	font-size: 19px;
 }
 
 .arrow-right,
@@ -93,14 +93,14 @@ td:hover {
 
 .search-container input[type=number] {
 	padding: 6px;
-	font-size: 1rem;
+	font-size: 16px;
 	border: 2px solid #4B3832;
 	background-color: #f7e7ce;
 
 }
 
 .btnSearch {
-	font-size: 1rem;
+	font-size: 16px;
 	border: 2px solid #4B3832;
 	padding: 6px;
 	background-color: #97694F;
@@ -153,16 +153,42 @@ td:hover {
 
 .modal-content {
 	background-color: #4B3832;
-	margin: 1rem;
-	padding: 2rem;
+	margin: 16px;
+	padding: 32px;
 	border: 1px solid #DDC0B4;
 	color: #f7e7ce;
-	font-size: 1.5rem;
+	font-size: 24px;
 }
 
 .close {
 	float: right;
-	font-size: rem;
+	font-size: 16px;
 	font-weight: bold;
 	cursor: pointer;
 }
+
+@media only screen and (max-width: 1071px) {
+    .heading {
+      scale: 0.9;
+    }
+	
+    .showRecords {
+       scale: 0.9;
+    }
+
+	.search-container{
+		scale: 0.9;
+	}
+
+	td {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    td:hover {
+        overflow: visible;
+        white-space: normal;
+        text-overflow: unset;
+    }
+}

From 0d8a9d4f2d6a6ef56ba4ce5e0a5cf758993c9bb9 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 26 Sep 2023 14:45:45 +0200
Subject: [PATCH 27/33] update

---
 app.ts    | 16 +++---------
 style.css | 78 ++++++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/app.ts b/app.ts
index 2291a557..0861c5ce 100644
--- a/app.ts
+++ b/app.ts
@@ -126,13 +126,6 @@ class RecordManager {
 	/** recalculates the record range that includes inputValue fromm user */
 	searchRecordsAndResize() {
 		let inputValue = <number>($('#searchInput').val());
-		if (inputValue < 0 || inputValue > this.recordCount) {
-			$('.modal').css('display', 'block');
-			$('.content').append(`<p>${inputValue} is not a number within the range. Please try a different number</p>`);
-			$('#page').empty().append(`Showing record: ${this.firstNumber} - ${this.lastNumber}`);
-			$('#searchInput').val('');
-			return;
-		}
 		let calculatedRows = this.getNumberOfCalculatingRows();
 		// divides the calculated max rows in half
 		const halfRange = Math.floor(calculatedRows / 2);
@@ -166,10 +159,14 @@ class RecordManager {
 	/** calls to re-display records when screen is adjusted */
 	handleResize() {
 		let resizeTimeout: number;
+		let inputValue = <string>($('#searchInput').val());
 		$(window).on('resize', () => {
 			clearTimeout(resizeTimeout);
 			resizeTimeout = setTimeout(() => {
 				$('#loader').show();
+				if (inputValue !== '') {
+					this.searchRecordsAndResize();
+				}
 				this.updateAndDisplayRecords()
 					.then(() => {
 						$('#loader').hide();
@@ -198,11 +195,6 @@ class RecordManager {
 			this.navigateToPreviousPage();
 		});
 
-		$('#closeModalBtn').on("click", () => {
-			$('.content').empty();
-			$('.modal').css('display', 'none');
-		});
-
 		$('#searchInput').on('input', () => {
 			const inputValue = <string>$('#searchInput').val();
 			if (inputValue !== undefined) {
diff --git a/style.css b/style.css
index 53fbecf5..79d9fa0e 100644
--- a/style.css
+++ b/style.css
@@ -40,18 +40,19 @@ td:hover {
 	text-align: center;
 	text-decoration: underline;
 	color: #4B3832;
+	padding: 0px 16px;
 }
 
 .showRecords {
-	top: 0.8%;
+	top: 0;
 	right: 0;
-	padding: 16px;
+	padding: 22px;
 	position: absolute;
 }
 
 .showRecords #page {
 	display: inline-block;
-	font-size: 19px;
+	font-size: 20px;
 }
 
 .arrow-right,
@@ -72,7 +73,6 @@ td:hover {
 .arrow-right:hover,
 .arrow-left:hover {
 	color: black;
-
 }
 
 .arrow-right {
@@ -88,7 +88,8 @@ td:hover {
 .search-container {
 	left: 0;
 	position: absolute;
-	top: 2.15%;
+	top: 0;
+	padding: 16px;
 }
 
 .search-container input[type=number] {
@@ -168,27 +169,56 @@ td:hover {
 }
 
 @media only screen and (max-width: 1071px) {
-    .heading {
-      scale: 0.9;
-    }
-	
-    .showRecords {
-       scale: 0.9;
-    }
-
-	.search-container{
+	.heading {
+		scale: 0.9;
+	}
+
+	.showRecords {
+		scale: 0.9;
+	}
+
+	.search-container {
 		scale: 0.9;
 	}
 
 	td {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    td:hover {
-        overflow: visible;
-        white-space: normal;
-        text-overflow: unset;
-    }
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	td:hover {
+		overflow: visible;
+		white-space: normal;
+		text-overflow: unset;
+	}
+}
+
+@media only screen and (max-width: 900px) {
+	.heading {
+		scale: 0.8;
+	}
+
+	.showRecords {
+		scale: 0.8;
+	}
+
+	.search-container {
+		scale: 0.8;
+	}
+}
+
+@media only screen and (max-width: 770px) {
+	.heading {
+		scale: 0.6;
+		margin-top: 40px;
+	}
+
+	.showRecords {
+		scale: 0.7;
+	}
+
+	.search-container {
+		scale: 0.7;
+	}
 }

From 2313df45a6561bea247954ba195b4a1cee4c2993 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Wed, 27 Sep 2023 08:41:46 +0200
Subject: [PATCH 28/33] update

---
 app.ts    | 2 +-
 style.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app.ts b/app.ts
index 0861c5ce..261e0e9c 100644
--- a/app.ts
+++ b/app.ts
@@ -44,7 +44,7 @@ class RecordManager {
 	/** calculates the number of rows that can fit the screen */
 	getNumberOfCalculatingRows(): number {
 		const screenHeight = window.innerHeight;
-		const availableHeight = screenHeight - 105;
+		const availableHeight = screenHeight - 110;
 		const rowHeight = 35;
 		if (availableHeight <= 0) {
 			return 0;
diff --git a/style.css b/style.css
index 79d9fa0e..e2104ade 100644
--- a/style.css
+++ b/style.css
@@ -168,7 +168,7 @@ td:hover {
 	cursor: pointer;
 }
 
-@media only screen and (max-width: 1071px) {
+@media only screen and (max-width: 1330px) {
 	.heading {
 		scale: 0.9;
 	}

From 817249c74fb30842a2edf8bc1dd9929aaa65efcf Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Thu, 28 Sep 2023 08:38:58 +0200
Subject: [PATCH 29/33] 09/28

---
 app.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app.ts b/app.ts
index 261e0e9c..1df4d2be 100644
--- a/app.ts
+++ b/app.ts
@@ -126,11 +126,15 @@ class RecordManager {
 	/** recalculates the record range that includes inputValue fromm user */
 	searchRecordsAndResize() {
 		let inputValue = <number>($('#searchInput').val());
-		let calculatedRows = this.getNumberOfCalculatingRows();
+		if(inputValue >= 0 && inputValue <= this.recordCount){
+			let calculatedRows = this.getNumberOfCalculatingRows();
 		// divides the calculated max rows in half
 		const halfRange = Math.floor(calculatedRows / 2);
 		this.firstNumber = Math.max(0, inputValue - halfRange);
 		this.lastNumber = Math.min(this.recordCount, this.firstNumber + (calculatedRows - 1));
+		}else{
+			alert('Input value must be between 0 and 999999.');
+		}
 	}
 
 	/** Navigates to the next set of records */

From cb7c3ea592e9ecb2e744fddaf05ea9a72a693619 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Mon, 2 Oct 2023 08:53:24 +0200
Subject: [PATCH 30/33] 10/02

---
 app.ts         | 63 ++++++++++++++++++++++++++++----------------------
 dataManager.ts | 17 +++++++-------
 index.html     |  2 +-
 3 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/app.ts b/app.ts
index 1df4d2be..bdae46c3 100644
--- a/app.ts
+++ b/app.ts
@@ -1,20 +1,20 @@
-import { ajax, css } from "jquery";
-
 class RecordManager {
 	firstNumber: number;
 	lastNumber: number;
 	recordCount: number;
+	data: dataManager;
 
 	constructor() {
+		this.data = new dataManager();
 		this.firstNumber = 0;
 		this.lastNumber = 0;
 		this.recordCount = 0;
-		this.initialize();
 	}
 
 	initialize() {
-		this.createTableHeader();
-		dataManager.fetchRecordCount()
+		let promiseArray: Promise<void>[] = [];
+		promiseArray.push(this.createTableHeader());
+		let recordCountPromise = this.data.fetchRecordCount()
 			.then(count => {
 				this.recordCount = count - 1;
 				this.updateAndDisplayRecords();
@@ -22,14 +22,15 @@ class RecordManager {
 				this.handleResize();
 			})
 			.catch(err => {
-				alert('Error fetching and displaying the table records, reload the page');
-				throw err;
+				throw new Error('Error fetching and displaying the table records, reload the page' + err);
 			});
+		promiseArray.push(recordCountPromise);
+		return Promise.all(promiseArray);
 	}
 
 	/** Initializes the table head */
-	createTableHeader() {
-		return dataManager.fetchColumns()
+	createTableHeader(): Promise<void> {
+		return this.data.fetchColumns()
 			.then(columns => {
 				for (const col of columns) {
 					$(".head").append(`<th>${col}</th>`);
@@ -37,7 +38,6 @@ class RecordManager {
 			})
 			.catch(err => {
 				alert('Error creating table heading');
-				throw err;
 			});
 	}
 
@@ -65,7 +65,6 @@ class RecordManager {
 			})
 			.catch(err => {
 				alert('Error to fetch and display records, reload the page');
-				throw err;
 			});
 	}
 
@@ -96,7 +95,7 @@ class RecordManager {
 	}
 
 	fetchAndDisplayRecords(): Promise<void> {
-		return dataManager.fetchRecords(this.firstNumber, this.lastNumber)
+		return this.data.fetchRecords(this.firstNumber, this.lastNumber)
 			.then(records => {
 				const inputValue = <string>($('#searchInput').val());
 				$("#tableBody").empty();
@@ -118,22 +117,21 @@ class RecordManager {
 				$('#loader').hide();
 			})
 			.catch(err => {
-				alert('Error while displaying records, reload the page');
-				throw err;
+				alert('Error while displaying records, reload the page'+ err);
 			});
 	}
 
 	/** recalculates the record range that includes inputValue fromm user */
 	searchRecordsAndResize() {
 		let inputValue = <number>($('#searchInput').val());
-		if(inputValue >= 0 && inputValue <= this.recordCount){
+		if (inputValue >= 0 && inputValue <= this.recordCount) {
 			let calculatedRows = this.getNumberOfCalculatingRows();
-		// divides the calculated max rows in half
-		const halfRange = Math.floor(calculatedRows / 2);
-		this.firstNumber = Math.max(0, inputValue - halfRange);
-		this.lastNumber = Math.min(this.recordCount, this.firstNumber + (calculatedRows - 1));
-		}else{
-			alert('Input value must be between 0 and 999999.');
+			// divides the calculated max rows in half
+			const halfRange = Math.floor(calculatedRows / 2);
+			this.firstNumber = Math.max(0, inputValue - halfRange);
+			this.lastNumber = Math.min(this.recordCount, this.firstNumber + (calculatedRows - 1));
+		} else {
+			alert(`Input value must be between 0 and ${this.recordCount}`);
 		}
 	}
 
@@ -147,7 +145,11 @@ class RecordManager {
 			// calculates the last number of the page 
 			this.lastNumber = this.firstNumber + (calculatedRows - 1);
 		}
-		this.updateAndDisplayRecords();
+		return this.updateAndDisplayRecords()
+			.catch(err => {
+				alert('Error to fetch and display records, reload the page' + err);
+			});
+
 	}
 
 	navigateToPreviousPage() {
@@ -157,7 +159,10 @@ class RecordManager {
 			this.lastNumber = this.firstNumber - 1;
 			this.firstNumber = this.lastNumber - (calculatedRows - 1);
 		}
-		this.updateAndDisplayRecords();
+		return this.updateAndDisplayRecords()
+			.catch(err => {
+				alert('Error to fetch and display records, reload the page' + err);
+			});
 	}
 
 	/** calls to re-display records when screen is adjusted */
@@ -176,9 +181,8 @@ class RecordManager {
 						$('#loader').hide();
 					})
 					.catch(err => {
-						alert('Error occurred while resizing, reload the page');
+						alert('Error occurred while resizing, reload the page' + err);
 						$('#loader').hide();
-						throw err;
 					});
 			}, 250);
 		});
@@ -188,7 +192,10 @@ class RecordManager {
 		$('#btnSearch').on('click', (event) => {
 			event.preventDefault();
 			this.searchRecordsAndResize();
-			this.updateAndDisplayRecords();
+			return this.updateAndDisplayRecords()
+				.catch(err => {
+					alert('Error to fetch and display records, reload the page' + err);
+				});
 		});
 
 		$('.arrow-right').on('click', () => {
@@ -210,5 +217,7 @@ class RecordManager {
 }
 
 window.onload = () => {
-	new RecordManager();
+	const record = new RecordManager();
+	record.initialize();
+	console.log('Application loaded');
 }
diff --git a/dataManager.ts b/dataManager.ts
index 72e2be22..f768dc1e 100644
--- a/dataManager.ts
+++ b/dataManager.ts
@@ -1,20 +1,21 @@
 class dataManager {
-	static backend: string = "http://localhost:2050";
+	backend: string = "http://localhost:2050";
 
-	/** fetches the number of records from backend */
-	static fetchRecordCount(): Promise<number> {
+	/** fcetches the number of records from backend */
+	fetchRecordCount(): Promise<number> {
 		return fetch(`${this.backend}/recordCount`)
 			.then(res => {
 				if (!res.ok) {
 					throw 'Failed to fetch record count';
 				}
-				return res.json();
+				return res.text();
 			})
 			.then(totalRecords => {
-				if(typeof totalRecords !== 'number'){
+				const value = parseInt(totalRecords, 10);
+				if (isNaN(value)) {
 					throw new Error('Invalid response format');
 				}
-				return totalRecords;
+				return value;
 			})
 			.catch(err => {
 				throw 'Error fetching the record count: ' + err;
@@ -22,7 +23,7 @@ class dataManager {
 	}
 
 	/** fetches columns from backend */
-	static fetchColumns(): Promise<string[]> {
+	fetchColumns(): Promise<string[]> {
 		return fetch(`${this.backend}/columns`)
 			.then(res => {
 				if (!res.ok) {
@@ -36,7 +37,7 @@ class dataManager {
 	}
 
 	/** fetches records from backend */
-	static fetchRecords(from: number, to: number): Promise<string[]> {
+	fetchRecords(from: number, to: number): Promise<string[]> {
 		return fetch(`${this.backend}/records?from=${from}&to=${to}`)
 			.then(res => {
 				if (!res.ok) {
diff --git a/index.html b/index.html
index 3437bc90..ddbd683e 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
 <body>
 	<div id="loader">
 		<div class="loader-spinner"></div>
-	  </div>
+	</div>
 	<h1 class="heading">Javascript Project</h1>
 	<div id="modal" class="modal">
 		<div class="modal-content">

From f8204e96d9b3e7ee2c27a66aedb177c0f744b868 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Mon, 2 Oct 2023 09:52:51 +0200
Subject: [PATCH 31/33] updates

---
 app.ts         | 10 ++++------
 dataManager.ts |  2 +-
 index.html     |  1 -
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/app.ts b/app.ts
index bdae46c3..0ef36750 100644
--- a/app.ts
+++ b/app.ts
@@ -37,7 +37,7 @@ class RecordManager {
 				}
 			})
 			.catch(err => {
-				alert('Error creating table heading');
+				alert('Error creating table heading'+ err);
 			});
 	}
 
@@ -64,7 +64,7 @@ class RecordManager {
 				$('#loader').hide();
 			})
 			.catch(err => {
-				alert('Error to fetch and display records, reload the page');
+				alert('Error to fetch and display records, reload the page'+ err);
 			});
 	}
 
@@ -149,7 +149,6 @@ class RecordManager {
 			.catch(err => {
 				alert('Error to fetch and display records, reload the page' + err);
 			});
-
 	}
 
 	navigateToPreviousPage() {
@@ -209,8 +208,8 @@ class RecordManager {
 		$('#searchInput').on('input', () => {
 			const inputValue = <string>$('#searchInput').val();
 			if (inputValue !== undefined) {
-				let sanitizedValue = inputValue.replace(/[^0-9]/g, '');
-				$('#searchInput').val(sanitizedValue);
+				let correctValue = inputValue.replace(/[^0-9]/g, '');
+				$('#searchInput').val(correctValue);
 			}
 		});
 	}
@@ -219,5 +218,4 @@ class RecordManager {
 window.onload = () => {
 	const record = new RecordManager();
 	record.initialize();
-	console.log('Application loaded');
 }
diff --git a/dataManager.ts b/dataManager.ts
index f768dc1e..2802233a 100644
--- a/dataManager.ts
+++ b/dataManager.ts
@@ -1,7 +1,7 @@
 class dataManager {
 	backend: string = "http://localhost:2050";
 
-	/** fcetches the number of records from backend */
+	/** fetches the number of records from backend */
 	fetchRecordCount(): Promise<number> {
 		return fetch(`${this.backend}/recordCount`)
 			.then(res => {
diff --git a/index.html b/index.html
index ddbd683e..d4d78172 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,6 @@ <h1 class="heading">Javascript Project</h1>
 		<tbody id="tableBody">
 		</tbody>
 	</table>
-
 </body>
 
 </html>

From 249611bf31d252e29762e573657f1d5e4dc60c46 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Tue, 3 Oct 2023 08:53:35 +0200
Subject: [PATCH 32/33] 03/10

---
 app.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app.ts b/app.ts
index 0ef36750..509d150c 100644
--- a/app.ts
+++ b/app.ts
@@ -37,7 +37,7 @@ class RecordManager {
 				}
 			})
 			.catch(err => {
-				alert('Error creating table heading'+ err);
+				alert('Error creating table heading' + err);
 			});
 	}
 
@@ -64,7 +64,7 @@ class RecordManager {
 				$('#loader').hide();
 			})
 			.catch(err => {
-				alert('Error to fetch and display records, reload the page'+ err);
+				alert('Error to fetch and display records, reload the page' + err);
 			});
 	}
 
@@ -117,7 +117,7 @@ class RecordManager {
 				$('#loader').hide();
 			})
 			.catch(err => {
-				alert('Error while displaying records, reload the page'+ err);
+				alert('Error while displaying records, reload the page' + err);
 			});
 	}
 
@@ -167,12 +167,11 @@ class RecordManager {
 	/** calls to re-display records when screen is adjusted */
 	handleResize() {
 		let resizeTimeout: number;
-		let inputValue = <string>($('#searchInput').val());
 		$(window).on('resize', () => {
 			clearTimeout(resizeTimeout);
 			resizeTimeout = setTimeout(() => {
 				$('#loader').show();
-				if (inputValue !== '') {
+				if ($('#searchInput').val() !== '') {
 					this.searchRecordsAndResize();
 				}
 				this.updateAndDisplayRecords()

From 7a4b0e2bd1375daf002caa0d460226c58ee70f70 Mon Sep 17 00:00:00 2001
From: ThokozaniNqwili <simthokozile@gmail.com>
Date: Thu, 5 Oct 2023 08:51:59 +0200
Subject: [PATCH 33/33] 04/10

---
 index.html | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/index.html b/index.html
index d4d78172..4c609647 100644
--- a/index.html
+++ b/index.html
@@ -14,12 +14,6 @@
 		<div class="loader-spinner"></div>
 	</div>
 	<h1 class="heading">Javascript Project</h1>
-	<div id="modal" class="modal">
-		<div class="modal-content">
-			<span id="closeModalBtn" class="close">&times;</span>
-			<p class="content"></p>
-		</div>
-	</div>
 	<div class="search-container">
 		<form id="searchForm">
 			<input type="number" id="searchInput" placeholder="Search.." name="search" autocomplete="off">