From 3a4e4629dfe391f702a2d4ed79d8ba8622553f8e Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Mon, 14 Aug 2023 09:06:21 +0200
Subject: [PATCH 01/40] update

---
 app.ts            | 222 ++++++++++++++++++++++++++++++++++++++++++++++
 index.html        |  35 +++++++-
 package-lock.json |  29 ++++++
 package.json      |  27 ++++++
 style.css         | 154 ++++++++++++++++++++++++++++++++
 5 files changed, 463 insertions(+), 4 deletions(-)
 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..c51f26b7
--- /dev/null
+++ b/app.ts
@@ -0,0 +1,222 @@
+window.onload = () => {
+
+  let api: string = "http://localhost:2050/";
+
+  // This function  will handle retrieving the records from the api
+  async function getRecords(fromID: number, toID: number): Promise<Array<Array<string>>> {
+    try {
+      const data = await fetch(`${api}records?from=${fromID}&to=${toID}`);
+      const records: Array<Array<string>> = await data.json();
+      console.log(fromID, toID);
+      return records;
+
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  // This function  will handle retrieving the columns from the api
+  async function getColumns(): Promise<Array<string>> {
+    try {
+      const data = await fetch(`${api}columns`);
+      const columns: Array<string> = await data.json();
+      return columns;
+
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  // This function  will handle retrieving the record count from the api
+  async function getRecordCount(): Promise<number> {
+    try {
+      const data = await fetch(`${api}recordCount`);
+      const count: number = await data.json();
+      return count;
+
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+ 
+  // This function will loop through and display the appropriate columns in the correct order.
+  async function showColumns(): Promise<void> {
+    try {
+      $(".head-row").empty();
+      let columns = await getColumns();
+      for (let i = 0; i < columns.length; i++) {
+        $("thead").append(`<th>${columns[i]}</th>`);
+      }
+
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+  showColumns();
+
+  // This function will loop through and display the records on the table.
+  async function showRecords(fromID: number, toID: number): Promise<void> {
+    try {
+      $("tbody").empty();
+      let records = await getRecords(fromID, toID);
+      for (let i = 0; i < records.length; i++) {
+        $("tbody").append(`<tr class="body-row">`);
+        for (let n = 0; n < records[i].length; n++) {
+          $(".body-row:last-child").append(`<td>${records[i][n]}</td>`);
+        }
+        $("tbody").append(`</tr>`);
+      }
+
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+  showRecords(1, 20);
+
+  // The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
+  async function pageNumbers(start: number, end: number): Promise<void> {
+    try {
+      let count: number = await getRecordCount();
+      let stringCount = count.toLocaleString().replace(/,/g, " ");
+      $(".pagination").append(`<a class="prev">&laquo;</a>`);
+      for (let i = start; i <= end; i++) {
+        console.log(start, end);
+        $(".pagination").append(
+          `<a id="${i}" class="pagination-item">${i}</a>`
+        );
+      }
+      $(".pagination").append(`<a class="next">&raquo;</a>`);
+
+      // Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
+      $(".pagination-item").on("click", function (): void {
+        let pageNumber: any = $(this).attr("id");
+        let toID = parseInt(pageNumber) * 20;
+        let fromID: number = toID - 19;
+        $(".pagination-item").removeClass("active");
+        $(this).addClass("active");
+        showRecords(fromID, toID);
+        $(".results").empty();
+        $(".results").append(
+          `Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
+        );
+      });
+
+      // Adding a click event to the next button of the pagination.
+      $(".next").on("click", function () {
+        $(".pagination").fadeOut("fast", function () {
+          start = start + 20;
+          end = end + 20;
+          $(".pagination").empty();
+          pageNumbers(start, end);
+          $(".pagination").fadeIn("fast");
+        });
+      });
+
+      // Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
+      if (start == 1) {
+        $(".prev").css({ display: "none" });
+      } else {
+        $(".prev").on("click", function () {
+          $(".pagination").fadeOut("fast", function () {
+            start = start - 20;
+            end = end - 20;
+            $(".pagination").empty();
+            pageNumbers(start, end);
+            $(".pagination").fadeIn("fast");
+          });
+        });
+      }
+
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+  pageNumbers(1, 20);
+
+  // This function handles returning the records and also doing the filter on the returned records for the search.
+  async function searchArrays(keyword: string): Promise<Array<Array<string>>> {
+    try {
+      
+      let data = await fetch(`${api}records?from=1&to=9999`);
+      const arrayOfArrays: Array<Array<string>> = await data.json();
+      return arrayOfArrays.filter((arr): boolean => {
+        if(keyword !== ""){
+          console.log(typeof keyword)
+          for (let i = 0; i < 11; i++) {
+            const elementMatches = arr[i].toLowerCase().includes(keyword.toLowerCase());
+            if (elementMatches) {
+              console.log
+              return true;
+            }
+          };
+        } else {
+          $(".results").empty();
+          $(".results").append(`Can't leave search field empty`);    
+        }
+        return false;
+      });
+
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  // The following is the search function that will be attached the on click.
+  // In the function the filtered that is returned and looped through to replace the current data in the table and also highlighting where the keyword is similar to the results.
+  async function searchResultsDisplay(event: any): Promise<void> {
+    try {
+      event.preventDefault();
+      let keyword: string = $(".search-input").val() as 
+      string;
+      keyword = keyword.toLowerCase();
+      let searchResult: Array<Array<string>> = await searchArrays(keyword);
+      console.log(searchResult, keyword);
+      if(keyword !== '') {
+        $(".results").css({'background-color': 'initial', 'color': 'initial'})
+        $("tbody").empty();
+        $(".results").empty();
+        $(".results").append(`${searchResult.length} RESULTS FOR "${keyword}"`).css({'color': '#A1AFC2'});
+      } else {
+        $("tbody").empty();
+        $(".results").empty().append(`Search field requires a value`).css({'background-color': 'red', 'color': 'white'})
+      }
+
+      for (let i = 0; i < searchResult.length; i++) {
+        let newRow = $('<tr class="body-row"></tr>');
+        for (let n = 0; n < searchResult[i].length; n++) {
+          let recordValue = searchResult[i][n];
+          let lowercasedRecordValue = recordValue.toLowerCase();
+          let $span = $(`<span class="highlight ${lowercasedRecordValue}">${recordValue}</span>`);
+          newRow.append(`<td></td>`).find("td:last").append($span);
+        }
+        $("tbody").append(newRow);
+      }
+
+      // Loop through all <span> elements after appending them to the table
+      $("span").each(function () {
+        const lowercasedID: string = $(this).text().toLowerCase();
+        if (lowercasedID.includes(keyword)) {
+          $(this).css({ "background-color": "#FFFF00", "color": "black" });
+        } else {
+          $(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
+        }
+      });
+
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  };
+
+  // Attach click event to the search button using jQuery
+  $(".search-btn").on("click", searchResultsDisplay);
+
+};
+
+ 
\ No newline at end of file
diff --git a/index.html b/index.html
index add5e736..fd456e5d 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,40 @@
 <!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>
+    <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>JavaScript Onboarding Project</h1>
+    <div class="heading">
+        <p class="results">Displaying ID's 1 - 20 out of 1 000 000</p>
+        <form id="search-form" class="search-form">
+            <input class="search-input" type="text" placeholder="Search a record" required >
+            <button type="submit" class="search-btn">Search</button>
+        </form>
+    </div>
+    <div class="table-container">
+        <table class="table">
+            <thead>
+            </thead>
+            <tbody>
+                <tr class="head-row">
+            </tbody>
+            </tr>
+        </table>
+    </div>
+    <div class="wrapper">
+        <div class="pagination">
+        </div>
+    </div>
+<script src="./app.js"></script>
 </body>
 
+ 
+
 </html>
 
+ 
+
+ 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..f5a47be3
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,29 @@
+{
+  "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==",
+      "dev": true,
+      "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==",
+      "dev": true
+    },
+    "typescript": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.2.tgz",
+      "integrity": "sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==",
+      "dev": true
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..c49b9901
--- /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",
+  "dependencies": {},
+  "devDependencies": {
+    "@types/jquery": "^3.5.16",
+    "typescript": "^3.9.2"
+  },
+  "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/MaxTF141/onboard-javascript.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/MaxTF141/onboard-javascript/issues"
+  },
+  "homepage": "https://github.com/MaxTF141/onboard-javascript#readme"
+}
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..f9e8129c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,154 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600&display=swap');
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+ 
+body {
+    background-color: #141A27;
+    background-attachment: fixed;
+}
+ 
+body::-webkit-scrollbar {
+    display: none;
+}
+ 
+h1 {
+    text-align: center;
+    font-family: 'Atma', cursive;
+    font-size: 40px;
+    color: #4DD2C6;
+}
+ 
+.results {
+    font-family: 'Atma', cursive;
+    font-weight: 500;
+    font-size: 30px;
+    color: #A1AFC2;
+}
+ 
+.heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+}
+ 
+.table-container {
+    max-height: 75vh;
+    overflow-y: auto;
+    border: 1px solid #4DD2C6;
+    /* box-shadow: inset 0px 0px 33px -7px rgba(255, 255, 255, 0.363); */
+}
+ 
+.table-container::-webkit-scrollbar {
+    display: none;
+}
+ 
+table {
+    width: 100%;
+    /* padding: 6px; */
+    /* background-color: #ffffff1f; */
+    table-layout: fixed;
+}
+ 
+th {
+    /* border-bottom: 1px solid #3b3b3b; */
+    font-family: 'Atma', cursive;
+    font-size: 20px;
+    border-bottom: 0.5px solid #4DD2C6;
+    border-right: 0.5px solid #4DD2C6;
+    color: #4DD2C6;
+}
+
+thead {
+    position: sticky;
+    top: 0;
+    border: 1px solid #4DD2C6 !important;
+    background-color: #141A27;
+    border: 1px solid white !important;
+}
+ 
+.body-row td {
+    text-align: center;
+    font-family: 'Atma', cursive;
+    color: #A1AFC2;
+    font-weight: 500;
+}
+
+.search-input {
+    height: 30px;
+    width: 180px;
+    border: 0px;
+    background-color: #ffffff36;
+    color: white;
+    font-family: 'Atma', cursive;
+    letter-spacing: 2px;
+    padding-left: 10px;
+}
+ 
+input:focus{
+    outline: 0px solid black;
+    outline-offset:3px;
+}
+ 
+.search-btn {
+    height: 30px;
+    border: 0px;
+    margin-left: -4px;
+    padding: 0px 5px;
+    background-color: #4DD2C6;
+    color: black;
+}
+ 
+.search-form {
+    display: flex;
+}
+ 
+.wrapper {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+ 
+.pagination {
+    display: flex;
+    justify-content: center;
+    padding: 30px 0px;
+}
+ 
+.pagination a {
+    text-decoration: none;
+    color: black;
+    padding: 9px;
+    border: 0px solid #3b3b3b;
+    margin: 3px;
+    background-color: #ffffff36;
+    box-shadow: inset 0px 0px 20px -10px rgba(255, 255, 255, 0.438);
+
+}
+ 
+.pagination a:hover {
+    color: white;
+    background-color: #4DD2C6;
+    border:0px solid #4DD2C6 ;
+}
+ 
+.active {
+    color: #4DD2C6 !important;
+    /* background-color: #af79e6; */
+    border: 1px solid #4DD2C6 !important;  
+}
+
+.next, .prev {
+    color: #4DD2C6 !important;
+}
+
+.next:hover, .prev:hover {
+    color: white !important;
+}
\ No newline at end of file

From 8a555a7b0796372a8bbf139831a7f5ccde4cecfb Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Mon, 14 Aug 2023 16:49:31 +0200
Subject: [PATCH 02/40] Fixed the table filling the entire screen and started
 on the search. This time by ID.

---
 index.html |  15 +++++---
 style.css  | 104 ++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 97 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index fd456e5d..e26cf0fe 100644
--- a/index.html
+++ b/index.html
@@ -6,13 +6,18 @@
     <link rel="stylesheet" href="./style.css">
 </head>
 <body>
-    <h1>JavaScript Onboarding Project</h1>
+    <h1 class="header">JavaScript Onboarding Project</h1>
     <div class="heading">
         <p class="results">Displaying ID's 1 - 20 out of 1 000 000</p>
-        <form id="search-form" class="search-form">
-            <input class="search-input" type="text" placeholder="Search a record" required >
-            <button type="submit" class="search-btn">Search</button>
-        </form>
+        <div class="search-container">
+            <form id="search-form" class="search-form">
+                <input class="search-input" type="number" placeholder="Search a record" required >
+                <button type="submit" class="search-btn">Search</button>
+            </form>
+            <div class="results-box">
+                <p>1 - 20</p>
+            </div>
+        </div>
     </div>
     <div class="table-container">
         <table class="table">
diff --git a/style.css b/style.css
index f9e8129c..f2e7b4a0 100644
--- a/style.css
+++ b/style.css
@@ -11,6 +11,7 @@
 body {
     background-color: #141A27;
     background-attachment: fixed;
+    height: 100vh;
 }
  
 body::-webkit-scrollbar {
@@ -20,14 +21,14 @@ body::-webkit-scrollbar {
 h1 {
     text-align: center;
     font-family: 'Atma', cursive;
-    font-size: 40px;
+    font-size: 2.5rem;
     color: #4DD2C6;
 }
  
 .results {
     font-family: 'Atma', cursive;
     font-weight: 500;
-    font-size: 30px;
+    font-size: 2rem;
     color: #A1AFC2;
 }
  
@@ -39,35 +40,42 @@ h1 {
 }
  
 .table-container {
-    max-height: 75vh;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    height: 80vh; /* Use full viewport height */
     border: 1px solid #4DD2C6;
-    /* box-shadow: inset 0px 0px 33px -7px rgba(255, 255, 255, 0.363); */
-}
+    box-sizing: border-box;
+    padding: 20px; /* Add some padding for a bit of breathing room */
+    overflow: hidden; /* Hide any overflowing content */
+  }
  
 .table-container::-webkit-scrollbar {
     display: none;
 }
  
 table {
-    width: 100%;
-    /* padding: 6px; */
-    /* background-color: #ffffff1f; */
-    table-layout: fixed;
-}
+    flex-grow: 1; /* Allow the table to expand within the container */
+    width: 100%; /* Take full width of the container */
+    border-collapse: collapse;
+    table-layout: fixed; /* Use a fixed layout to prevent column widths from changing */
+  }
  
 th {
     /* border-bottom: 1px solid #3b3b3b; */
     font-family: 'Atma', cursive;
-    font-size: 20px;
-    border-bottom: 0.5px solid #4DD2C6;
-    border-right: 0.5px solid #4DD2C6;
+    font-size: 1rem;
+    border: 0.5px solid #4DD2C6;
+    /* border-right: 0.5px solid #4DD2C6; */
     color: #4DD2C6;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-height: 10px; 
+    padding: 2px;
 }
 
 thead {
-    position: sticky;
-    top: 0;
+    /* position: sticky; */
+    /* top: 0; */
     border: 1px solid #4DD2C6 !important;
     background-color: #141A27;
     border: 1px solid white !important;
@@ -78,6 +86,10 @@ thead {
     font-family: 'Atma', cursive;
     color: #A1AFC2;
     font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-height: 10px; 
+    padding: 2px;
 }
 
 .search-input {
@@ -119,7 +131,7 @@ input:focus{
 .pagination {
     display: flex;
     justify-content: center;
-    padding: 30px 0px;
+    /* padding-top: 30px; */
 }
  
 .pagination a {
@@ -151,4 +163,62 @@ input:focus{
 
 .next:hover, .prev:hover {
     color: white !important;
+}
+
+.header {
+    height: 5vh;
+}
+.heading {
+    height: 5vh;
+}
+.table-container {
+    height: 80vh;
+}
+.wrapper {
+    height: 10vh;
+    display: flex;
+    align-items: center;
+}
+
+/* .pagination {
+    margin: auto 0px;    
+} */
+
+.table-container {
+  display: flex;
+  flex-direction: column;
+  height: 80vh; /* Use full viewport height */
+  box-sizing: border-box;
+  padding: 20px; /* Add some padding for a bit of breathing room */
+  overflow: hidden; /* Hide any overflowing content */
+}
+
+table {
+  flex-grow: 2; /* Allow the table to expand within the container */
+  width: 100%; /* Take full width of the container */
+  border-collapse: collapse;
+  table-layout: fixed; /* Use a fixed layout to prevent column widths from changing */
+}
+
+th, td {
+  padding: 0.2px; /* Reduced padding for cells */
+  text-align: center;
+  /* border-bottom: 1px solid #ddd; */
+  white-space: nowrap; /* Prevent line breaks within cells */
+  /* overflow: hidden;  */
+  text-overflow: ellipsis; /* Show ellipsis (...) for content that overflows */
+  max-height: fit-content; /* Set a small maximum height for cells */
+  /* font-size: 10px;  */
+}
+
+.search-container {
+    position: relative;
+}
+
+.results-box {
+    width: 228.23px;
+    height: 50px;
+    background-color: white;
+    position: absolute;
+    top: 189;
 }
\ No newline at end of file

From 75dc47aef3a2b2327dddf45eebd500ad4c6a3ea2 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Tue, 15 Aug 2023 16:55:26 +0200
Subject: [PATCH 03/40] Added a new function that can load records based on the
 screen size. Removed my global search function and inserted functionality to
 only search by id.

---
 app.ts     | 183 ++++++++++++++++++++++++++++++-----------------------
 index.html |  10 ++-
 style.css  |   7 ++
 3 files changed, 116 insertions(+), 84 deletions(-)

diff --git a/app.ts b/app.ts
index c51f26b7..35289ef6 100644
--- a/app.ts
+++ b/app.ts
@@ -1,6 +1,10 @@
 window.onload = () => {
 
   let api: string = "http://localhost:2050/";
+  let isFunctionRunning = false;
+  console.log(isFunctionRunning);
+  
+
 
   // This function  will handle retrieving the records from the api
   async function getRecords(fromID: number, toID: number): Promise<Array<Array<string>>> {
@@ -60,21 +64,39 @@ window.onload = () => {
 
   // This function will loop through and display the records on the table.
   async function showRecords(fromID: number, toID: number): Promise<void> {
+    console.log(isFunctionRunning);
+    
+    if (isFunctionRunning) {
+      return;
+    }
+    isFunctionRunning = true;
     try {
       $("tbody").empty();
       let records = await getRecords(fromID, toID);
+      $('.results').empty().append(`Displaying ID's ${fromID} - ${toID}`)
       for (let i = 0; i < records.length; i++) {
         $("tbody").append(`<tr class="body-row">`);
         for (let n = 0; n < records[i].length; n++) {
-          $(".body-row:last-child").append(`<td>${records[i][n]}</td>`);
+          $(".body-row:last-child").append(`<td><span>${records[i][n]}</span></td>`);
         }
         $("tbody").append(`</tr>`);
       }
-
+      
+      let inputNumber: string = $('.search-input').val() as string
+      $("span").each(function () {
+        const lowercasedID: string = $(this).text() as string; 
+        if (lowercasedID == inputNumber) {
+          $(this).css({ "background-color": "#FFFF00", "color": "black" });
+        } else {
+          $(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
+        }
+      });
+      
     } catch (error) {
       console.error(error);
       throw error;
     }
+    isFunctionRunning = false;
   }
   showRecords(1, 20);
 
@@ -93,10 +115,12 @@ window.onload = () => {
       $(".pagination").append(`<a class="next">&raquo;</a>`);
 
       // Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
-      $(".pagination-item").on("click", function (): void {
+
+      $(".pagination-item").on("click", async function dynamicPagination(): Promise<Array<number>>{
+        let maxRecords: number = await adjustDisplayedRecords() 
         let pageNumber: any = $(this).attr("id");
-        let toID = parseInt(pageNumber) * 20;
-        let fromID: number = toID - 19;
+        let toID = parseInt(pageNumber) * maxRecords;
+        let fromID: number = toID - (maxRecords - 1);
         $(".pagination-item").removeClass("active");
         $(this).addClass("active");
         showRecords(fromID, toID);
@@ -104,20 +128,27 @@ window.onload = () => {
         $(".results").append(
           `Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
         );
+        return [fromID, toID]
       });
 
       // Adding a click event to the next button of the pagination.
-      $(".next").on("click", function () {
-        $(".pagination").fadeOut("fast", function () {
+      $(".next").on("click", async function () {
+        if (isFunctionRunning) {
+          return;
+        }
+        isFunctionRunning = true
           start = start + 20;
           end = end + 20;
           $(".pagination").empty();
-          pageNumbers(start, end);
-          $(".pagination").fadeIn("fast");
-        });
+          await pageNumbers(start, end);
       });
+      isFunctionRunning = false
 
       // Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
+      if(isFunctionRunning) {
+        return;
+      }
+      isFunctionRunning = true
       if (start == 1) {
         $(".prev").css({ display: "none" });
       } else {
@@ -131,6 +162,7 @@ window.onload = () => {
           });
         });
       }
+      isFunctionRunning = false
 
     } catch (error) {
       console.error(error);
@@ -139,83 +171,78 @@ window.onload = () => {
   }
   pageNumbers(1, 20);
 
-  // This function handles returning the records and also doing the filter on the returned records for the search.
-  async function searchArrays(keyword: string): Promise<Array<Array<string>>> {
-    try {
-      
-      let data = await fetch(`${api}records?from=1&to=9999`);
-      const arrayOfArrays: Array<Array<string>> = await data.json();
-      return arrayOfArrays.filter((arr): boolean => {
-        if(keyword !== ""){
-          console.log(typeof keyword)
-          for (let i = 0; i < 11; i++) {
-            const elementMatches = arr[i].toLowerCase().includes(keyword.toLowerCase());
-            if (elementMatches) {
-              console.log
-              return true;
-            }
-          };
-        } else {
-          $(".results").empty();
-          $(".results").append(`Can't leave search field empty`);    
-        }
-        return false;
-      });
-
-    } catch (error) {
-      console.error(error);
-      throw error;
+  async function resultsRange(event: any) {
+    if (isFunctionRunning) {
+      return;
     }
-  }
-
-  // The following is the search function that will be attached the on click.
-  // In the function the filtered that is returned and looped through to replace the current data in the table and also highlighting where the keyword is similar to the results.
-  async function searchResultsDisplay(event: any): Promise<void> {
-    try {
-      event.preventDefault();
-      let keyword: string = $(".search-input").val() as 
-      string;
-      keyword = keyword.toLowerCase();
-      let searchResult: Array<Array<string>> = await searchArrays(keyword);
-      console.log(searchResult, keyword);
-      if(keyword !== '') {
-        $(".results").css({'background-color': 'initial', 'color': 'initial'})
-        $("tbody").empty();
-        $(".results").empty();
-        $(".results").append(`${searchResult.length} RESULTS FOR "${keyword}"`).css({'color': '#A1AFC2'});
-      } else {
-        $("tbody").empty();
-        $(".results").empty().append(`Search field requires a value`).css({'background-color': 'red', 'color': 'white'})
-      }
-
-      for (let i = 0; i < searchResult.length; i++) {
-        let newRow = $('<tr class="body-row"></tr>');
-        for (let n = 0; n < searchResult[i].length; n++) {
-          let recordValue = searchResult[i][n];
-          let lowercasedRecordValue = recordValue.toLowerCase();
-          let $span = $(`<span class="highlight ${lowercasedRecordValue}">${recordValue}</span>`);
-          newRow.append(`<td></td>`).find("td:last").append($span);
-        }
-        $("tbody").append(newRow);
-      }
-
-      // Loop through all <span> elements after appending them to the table
+    isFunctionRunning = true;
+    event.preventDefault();
+    let inputNumber: string = $('.search-input').val() as string
+    let inputNumberInt = parseInt(inputNumber);
+    if(inputNumber !== '') {
+      let end:number = Math.ceil(inputNumberInt / 20) * 20;
+      let start: number = end - 19;
+      if(inputNumberInt < 1000000) {
+        if(end === 1000000){
+          end = end - 1;
+        } else null
+        $('.results-box').remove()
+        $('.search-container').append(`
+                                      <div class="results-box">
+                                        <p class="results-select">${start} - ${end}</p>
+                                      </div>
+                                      `)
+        $('.results-box').on('click', resultsSelect)
+
+        // Loop through all <span> elements after appending them to the search container
       $("span").each(function () {
-        const lowercasedID: string = $(this).text().toLowerCase();
-        if (lowercasedID.includes(keyword)) {
-          $(this).css({ "background-color": "#FFFF00", "color": "black" });
+        const lowercasedID: string = $(this).text() as string; 
+        if (lowercasedID == inputNumber) {
+          $(this).css({ "background-colovoidr": "#FFFF00", "color": "black" });
         } else {
           $(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
         }
       });
 
-    } catch (error) {
-      console.error("Error fetching data:", error);
+        } else {
+          $('.results-box').remove()
+        }
+      } else {
+        $('.results-box').remove()
+      }
+      isFunctionRunning = false;
     }
-  };
-
   // Attach click event to the search button using jQuery
-  $(".search-btn").on("click", searchResultsDisplay);
+  
+  async function resultsSelect() {
+    if (isFunctionRunning) {
+      return;
+    }
+    isFunctionRunning = true;
+    let idRange = $('.results-select').text();
+    let rangeArray = null
+    rangeArray = idRange.split('-');
+    $('.results-box').remove()
+    let start = parseInt(rangeArray[0])
+    let end = parseInt(rangeArray[1])
+    isFunctionRunning = false;
+    await showRecords(start, end)
+  }
+  
+  $(".search-input").on("keyup", resultsRange);
+
+  async function adjustDisplayedRecords(): Promise<number> {
+    const screenHeight = $(window).height();
+    const maxRecords = Math.floor(screenHeight / 45);
+    $('tbody').empty()
+    console.log( maxRecords);
+    
+    await showRecords(1, maxRecords) 
+    return maxRecords
+  } 
+  
+  $(window).on('resize', adjustDisplayedRecords);
+  // $(document).ready(adjustDisplayedRecords);
 
 };
 
diff --git a/index.html b/index.html
index e26cf0fe..ac0091e6 100644
--- a/index.html
+++ b/index.html
@@ -9,14 +9,12 @@
     <h1 class="header">JavaScript Onboarding Project</h1>
     <div class="heading">
         <p class="results">Displaying ID's 1 - 20 out of 1 000 000</p>
-        <div class="search-container">
+        <div class="search-container" id="search-container">
             <form id="search-form" class="search-form">
-                <input class="search-input" type="number" placeholder="Search a record" required >
-                <button type="submit" class="search-btn">Search</button>
+                <input class="search-input" type="number" placeholder="Search a record by ID" required >
+                <button class="search-btn">Search</button>
             </form>
-            <div class="results-box">
-                <p>1 - 20</p>
-            </div>
+            
         </div>
     </div>
     <div class="table-container">
diff --git a/style.css b/style.css
index f2e7b4a0..3485470c 100644
--- a/style.css
+++ b/style.css
@@ -221,4 +221,11 @@ th, td {
     background-color: white;
     position: absolute;
     top: 189;
+}
+
+.results-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
 }
\ No newline at end of file

From 476cad9e263281d4490eb236c7789cb6741abcf9 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Wed, 16 Aug 2023 11:45:31 +0200
Subject: [PATCH 04/40] Updated functionality to display number of records
 according to height. Updated pagination so it can work with the
 adjustDisplayedRecords function.

---
 app.ts     | 59 ++++++++++++++++++++++++++++++++++--------------------
 index.html |  8 ++------
 style.css  | 45 +++++++++++++++++++++++++++--------------
 3 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/app.ts b/app.ts
index 35289ef6..40fbdbc8 100644
--- a/app.ts
+++ b/app.ts
@@ -2,7 +2,9 @@ window.onload = () => {
 
   let api: string = "http://localhost:2050/";
   let isFunctionRunning = false;
-  console.log(isFunctionRunning);
+  let currentPage = 1;
+  let currentFromID = 1;
+  let currentToID = 20;
   
 
 
@@ -11,7 +13,6 @@ window.onload = () => {
     try {
       const data = await fetch(`${api}records?from=${fromID}&to=${toID}`);
       const records: Array<Array<string>> = await data.json();
-      console.log(fromID, toID);
       return records;
 
     } catch (error) {
@@ -64,16 +65,17 @@ window.onload = () => {
 
   // This function will loop through and display the records on the table.
   async function showRecords(fromID: number, toID: number): Promise<void> {
-    console.log(isFunctionRunning);
-    
     if (isFunctionRunning) {
       return;
     }
     isFunctionRunning = true;
     try {
       $("tbody").empty();
+      loader()
       let records = await getRecords(fromID, toID);
-      $('.results').empty().append(`Displaying ID's ${fromID} - ${toID}`)
+      let count: number = await getRecordCount();
+      let stringCount = count.toLocaleString().replace(/,/g, " ");
+      $('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`)
       for (let i = 0; i < records.length; i++) {
         $("tbody").append(`<tr class="body-row">`);
         for (let n = 0; n < records[i].length; n++) {
@@ -107,7 +109,6 @@ window.onload = () => {
       let stringCount = count.toLocaleString().replace(/,/g, " ");
       $(".pagination").append(`<a class="prev">&laquo;</a>`);
       for (let i = start; i <= end; i++) {
-        console.log(start, end);
         $(".pagination").append(
           `<a id="${i}" class="pagination-item">${i}</a>`
         );
@@ -117,7 +118,9 @@ window.onload = () => {
       // Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
 
       $(".pagination-item").on("click", async function dynamicPagination(): Promise<Array<number>>{
-        let maxRecords: number = await adjustDisplayedRecords() 
+        currentPage = parseInt($(this).attr("id") as any);
+        let maxRecords = await adjustDisplayedRecords();
+        // let maxRecords: number = await adjustDisplayedRecords() 
         let pageNumber: any = $(this).attr("id");
         let toID = parseInt(pageNumber) * maxRecords;
         let fromID: number = toID - (maxRecords - 1);
@@ -171,6 +174,7 @@ window.onload = () => {
   }
   pageNumbers(1, 20);
 
+  // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
   async function resultsRange(event: any) {
     if (isFunctionRunning) {
       return;
@@ -194,11 +198,11 @@ window.onload = () => {
                                       `)
         $('.results-box').on('click', resultsSelect)
 
-        // Loop through all <span> elements after appending them to the search container
+        // Loop through all <span> elements after appending them to the search container and highlighting the specific is that was searched. 
       $("span").each(function () {
         const lowercasedID: string = $(this).text() as string; 
         if (lowercasedID == inputNumber) {
-          $(this).css({ "background-colovoidr": "#FFFF00", "color": "black" });
+          $(this).css({ "background-color": "#FFFF00", "color": "black" });
         } else {
           $(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
         }
@@ -212,8 +216,9 @@ window.onload = () => {
       }
       isFunctionRunning = false;
     }
-  // Attach click event to the search button using jQuery
-  
+    $(".search-input").on("keyup", resultsRange);
+
+  // After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
   async function resultsSelect() {
     if (isFunctionRunning) {
       return;
@@ -227,22 +232,32 @@ window.onload = () => {
     let end = parseInt(rangeArray[1])
     isFunctionRunning = false;
     await showRecords(start, end)
+    const screenHeight = $(window).height();
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 45);
+    currentPage = Math.floor(end / maxRecords)
   }
-  
-  $(".search-input").on("keyup", resultsRange);
 
+  // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
   async function adjustDisplayedRecords(): Promise<number> {
     const screenHeight = $(window).height();
-    const maxRecords = Math.floor(screenHeight / 45);
-    $('tbody').empty()
-    console.log( maxRecords);
-    
-    await showRecords(1, maxRecords) 
-    return maxRecords
-  } 
-  
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 45);
+    currentFromID = (currentPage - 1) * maxRecords + 1;
+    currentToID = currentPage * maxRecords;
+    $("tbody").empty();
+    await showRecords(currentFromID, currentToID);
+    return maxRecords;
+  }
   $(window).on('resize', adjustDisplayedRecords);
-  // $(document).ready(adjustDisplayedRecords);
+
+  // Just a loader to display when the table is empty and records is being fetched. 
+  function loader() {
+    let content = $('tbody').text();
+    if(content == '') {
+      $('.results').append('<div class="loader"></div>')
+    } else {
+      $('.loader').css({'display': 'none'})
+    }
+  }
 
 };
 
diff --git a/index.html b/index.html
index ac0091e6..ef3152ba 100644
--- a/index.html
+++ b/index.html
@@ -8,13 +8,9 @@
 <body>
     <h1 class="header">JavaScript Onboarding Project</h1>
     <div class="heading">
-        <p class="results">Displaying ID's 1 - 20 out of 1 000 000</p>
+        <p class="results"></p>
         <div class="search-container" id="search-container">
-            <form id="search-form" class="search-form">
-                <input class="search-input" type="number" placeholder="Search a record by ID" required >
-                <button class="search-btn">Search</button>
-            </form>
-            
+                <input class="search-input" type="number" placeholder="Search a record by ID" min="1" max="999999" required >            
         </div>
     </div>
     <div class="table-container">
diff --git a/style.css b/style.css
index 3485470c..bd2656a1 100644
--- a/style.css
+++ b/style.css
@@ -108,19 +108,6 @@ input:focus{
     outline-offset:3px;
 }
  
-.search-btn {
-    height: 30px;
-    border: 0px;
-    margin-left: -4px;
-    padding: 0px 5px;
-    background-color: #4DD2C6;
-    color: black;
-}
- 
-.search-form {
-    display: flex;
-}
- 
 .wrapper {
     position: fixed;
     bottom: 0;
@@ -216,7 +203,7 @@ th, td {
 }
 
 .results-box {
-    width: 228.23px;
+    width: 180px;
     height: 50px;
     background-color: white;
     position: absolute;
@@ -228,4 +215,32 @@ th, td {
     justify-content: center;
     align-items: center;
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+a {
+    cursor: pointer;
+}
+
+.loader {
+    border: 4px solid #4DD2C6;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border-right-color: transparent;
+    animation: rot 1s linear infinite;
+    box-shadow: 0px 0px 20px #4DD2C6 inset;
+    position: fixed;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    /* transform: translate(-50%, 0); */
+  }
+  
+  @keyframes rot {
+    100% {
+      transform: rotate(360deg);
+      
+    }
+  }
\ No newline at end of file

From b11aad3cdb96d737d7c141420620c5dc5d59290d Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Wed, 16 Aug 2023 17:00:14 +0200
Subject: [PATCH 05/40] Fixed resizing issue by putting a debounce delay on the
 window resize.

---
 .vscode/launch.json | 15 ++++++++++++++
 .vscode/tasks.json  | 15 ++++++++++++++
 app.ts              | 30 +++++++++++++++++++++++++---
 index.html          |  2 +-
 style.css           | 48 ++++++++++++++++++++-------------------------
 5 files changed, 79 insertions(+), 31 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 .vscode/tasks.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..2ba986f6
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 00000000..32a6e4c0
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,15 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "typescript",
+			"tsconfig": "tsconfig.json",
+			"option": "watch",
+			"problemMatcher": [
+				"$tsc-watch"
+			],
+			"group": "build",
+			"label": "tsc: watch - tsconfig.json"
+		}
+	]
+}
\ No newline at end of file
diff --git a/app.ts b/app.ts
index 40fbdbc8..f580a1c6 100644
--- a/app.ts
+++ b/app.ts
@@ -11,6 +11,7 @@ window.onload = () => {
   // This function  will handle retrieving the records from the api
   async function getRecords(fromID: number, toID: number): Promise<Array<Array<string>>> {
     try {
+      console.log(fromID, toID)
       const data = await fetch(`${api}records?from=${fromID}&to=${toID}`);
       const records: Array<Array<string>> = await data.json();
       return records;
@@ -70,10 +71,12 @@ window.onload = () => {
     }
     isFunctionRunning = true;
     try {
+      console.log(fromID, toID)
       $("tbody").empty();
       loader()
       let records = await getRecords(fromID, toID);
       let count: number = await getRecordCount();
+      console.log(records)
       let stringCount = count.toLocaleString().replace(/,/g, " ");
       $('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`)
       for (let i = 0; i < records.length; i++) {
@@ -233,21 +236,42 @@ window.onload = () => {
     isFunctionRunning = false;
     await showRecords(start, end)
     const screenHeight = $(window).height();
-    const maxRecords = Math.floor(parseInt(screenHeight as any) / 45);
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 50);
     currentPage = Math.floor(end / maxRecords)
   }
 
   // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
   async function adjustDisplayedRecords(): Promise<number> {
+
     const screenHeight = $(window).height();
-    const maxRecords = Math.floor(parseInt(screenHeight as any) / 45);
+    console.log(screenHeight);    
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 50);
     currentFromID = (currentPage - 1) * maxRecords + 1;
     currentToID = currentPage * maxRecords;
+    console.log(currentFromID, currentToID);   
     $("tbody").empty();
     await showRecords(currentFromID, currentToID);
     return maxRecords;
   }
-  $(window).on('resize', adjustDisplayedRecords);
+
+  let resizeTimer: ReturnType<typeof setTimeout>;
+
+$(window).on('resize', () => {
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(async () => {
+    const maxRecords: number = await adjustDisplayedRecords();
+
+    // Example: Update a visual indicator based on the maxRecords value.
+    if (maxRecords > 10) {
+      $('.indicator').text('Many records displayed');
+    } else {
+      $('.indicator').text('Few records displayed');
+    }
+
+    // Perform other TypeScript-specific actions based on the maxRecords value.
+
+  }, 200);
+});
 
   // Just a loader to display when the table is empty and records is being fetched. 
   function loader() {
diff --git a/index.html b/index.html
index ef3152ba..3fd505fd 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@ <h1 class="header">JavaScript Onboarding Project</h1>
     <div class="heading">
         <p class="results"></p>
         <div class="search-container" id="search-container">
-                <input class="search-input" type="number" placeholder="Search a record by ID" min="1" max="999999" required >            
+            <input class="search-input" type="number" placeholder="Search a record by ID" min="1" max="999999" required >            
         </div>
     </div>
     <div class="table-container">
diff --git a/style.css b/style.css
index bd2656a1..a5bec323 100644
--- a/style.css
+++ b/style.css
@@ -42,11 +42,11 @@ h1 {
 .table-container {
     display: flex;
     flex-direction: column;
-    height: 80vh; /* Use full viewport height */
+    height: 80vh; 
     border: 1px solid #4DD2C6;
     box-sizing: border-box;
-    padding: 20px; /* Add some padding for a bit of breathing room */
-    overflow: hidden; /* Hide any overflowing content */
+    padding: 20px; 
+    overflow: hidden; 
   }
  
 .table-container::-webkit-scrollbar {
@@ -54,18 +54,16 @@ h1 {
 }
  
 table {
-    flex-grow: 1; /* Allow the table to expand within the container */
-    width: 100%; /* Take full width of the container */
+    flex-grow: 1;
+    width: 100%; 
     border-collapse: collapse;
-    table-layout: fixed; /* Use a fixed layout to prevent column widths from changing */
+    table-layout: fixed; 
   }
  
 th {
-    /* border-bottom: 1px solid #3b3b3b; */
     font-family: 'Atma', cursive;
     font-size: 1rem;
     border: 0.5px solid #4DD2C6;
-    /* border-right: 0.5px solid #4DD2C6; */
     color: #4DD2C6;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -140,7 +138,6 @@ input:focus{
  
 .active {
     color: #4DD2C6 !important;
-    /* background-color: #af79e6; */
     border: 1px solid #4DD2C6 !important;  
 }
 
@@ -167,35 +164,28 @@ input:focus{
     align-items: center;
 }
 
-/* .pagination {
-    margin: auto 0px;    
-} */
-
 .table-container {
   display: flex;
   flex-direction: column;
-  height: 80vh; /* Use full viewport height */
+  height: 80vh; 
   box-sizing: border-box;
-  padding: 20px; /* Add some padding for a bit of breathing room */
-  overflow: hidden; /* Hide any overflowing content */
+  padding: 20px; 
+  overflow: hidden; 
 }
 
 table {
-  flex-grow: 2; /* Allow the table to expand within the container */
-  width: 100%; /* Take full width of the container */
+  flex-grow: 2;
+  width: 100%;
   border-collapse: collapse;
-  table-layout: fixed; /* Use a fixed layout to prevent column widths from changing */
+  table-layout: fixed; 
 }
 
 th, td {
-  padding: 0.2px; /* Reduced padding for cells */
+  padding: 0.2px; 
   text-align: center;
-  /* border-bottom: 1px solid #ddd; */
-  white-space: nowrap; /* Prevent line breaks within cells */
-  /* overflow: hidden;  */
-  text-overflow: ellipsis; /* Show ellipsis (...) for content that overflows */
-  max-height: fit-content; /* Set a small maximum height for cells */
-  /* font-size: 10px;  */
+  white-space: nowrap; 
+  text-overflow: ellipsis; 
+  max-height: fit-content; 
 }
 
 .search-container {
@@ -235,7 +225,11 @@ a {
     right: 0;
     top: 0;
     bottom: 0;
-    /* transform: translate(-50%, 0); */
+  }
+
+  .results-select {
+    font-family: 'Atma', cursive;
+    font-size: 1.4rem;
   }
   
   @keyframes rot {

From 6d8b8807cbf2ef5f1a975ea30a06d1d02b9bc96f Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Thu, 17 Aug 2023 16:59:56 +0200
Subject: [PATCH 06/40] updated my pagination in relation to the search
 function

---
 app.ts | 81 ++++++++++++++++++++++++++++------------------------------
 1 file changed, 39 insertions(+), 42 deletions(-)

diff --git a/app.ts b/app.ts
index f580a1c6..cb5996c7 100644
--- a/app.ts
+++ b/app.ts
@@ -1,8 +1,7 @@
-window.onload = () => {
-
   let api: string = "http://localhost:2050/";
   let isFunctionRunning = false;
   let currentPage = 1;
+  let lastPage = currentPage + 9
   let currentFromID = 1;
   let currentToID = 20;
   
@@ -62,7 +61,6 @@ window.onload = () => {
       throw error;
     }
   }
-  showColumns();
 
   // This function will loop through and display the records on the table.
   async function showRecords(fromID: number, toID: number): Promise<void> {
@@ -76,7 +74,6 @@ window.onload = () => {
       loader()
       let records = await getRecords(fromID, toID);
       let count: number = await getRecordCount();
-      console.log(records)
       let stringCount = count.toLocaleString().replace(/,/g, " ");
       $('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`)
       for (let i = 0; i < records.length; i++) {
@@ -103,11 +100,11 @@ window.onload = () => {
     }
     isFunctionRunning = false;
   }
-  showRecords(1, 20);
 
   // The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
   async function pageNumbers(start: number, end: number): Promise<void> {
     try {
+      $('.pagination').empty();
       let count: number = await getRecordCount();
       let stringCount = count.toLocaleString().replace(/,/g, " ");
       $(".pagination").append(`<a class="prev">&laquo;</a>`);
@@ -117,9 +114,8 @@ window.onload = () => {
         );
       }
       $(".pagination").append(`<a class="next">&raquo;</a>`);
-
+      
       // Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
-
       $(".pagination-item").on("click", async function dynamicPagination(): Promise<Array<number>>{
         currentPage = parseInt($(this).attr("id") as any);
         let maxRecords = await adjustDisplayedRecords();
@@ -127,6 +123,10 @@ window.onload = () => {
         let pageNumber: any = $(this).attr("id");
         let toID = parseInt(pageNumber) * maxRecords;
         let fromID: number = toID - (maxRecords - 1);
+        if(fromID >= count || toID >= count) {
+          toID = count - 1 ;
+          fromID = toID - maxRecords
+        }
         $(".pagination-item").removeClass("active");
         $(this).addClass("active");
         showRecords(fromID, toID);
@@ -143,8 +143,9 @@ window.onload = () => {
           return;
         }
         isFunctionRunning = true
-          start = start + 20;
-          end = end + 20;
+        console.log(end)
+          start = start + 10;
+          end = end + 10;
           $(".pagination").empty();
           await pageNumbers(start, end);
       });
@@ -160,8 +161,8 @@ window.onload = () => {
       } else {
         $(".prev").on("click", function () {
           $(".pagination").fadeOut("fast", function () {
-            start = start - 20;
-            end = end - 20;
+            start = start - 10;
+            end = end - 10;
             $(".pagination").empty();
             pageNumbers(start, end);
             $(".pagination").fadeIn("fast");
@@ -169,13 +170,13 @@ window.onload = () => {
         });
       }
       isFunctionRunning = false
+      console.log(currentPage)
 
     } catch (error) {
       console.error(error);
       throw error;
     }
   }
-  pageNumbers(1, 20);
 
   // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
   async function resultsRange(event: any) {
@@ -187,8 +188,14 @@ window.onload = () => {
     let inputNumber: string = $('.search-input').val() as string
     let inputNumberInt = parseInt(inputNumber);
     if(inputNumber !== '') {
-      let end:number = Math.ceil(inputNumberInt / 20) * 20;
-      let start: number = end - 19;
+      const screenHeight = $(window).height();
+      const maxRecords = Math.floor(parseInt(screenHeight as any) / 45) - 1;
+      let end:number = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
+      if(end > 1000000) {
+        end = 1000000
+      }
+      let start: number = (end - maxRecords + 1);
+      currentPage = Math.floor(end / maxRecords)
       if(inputNumberInt < 1000000) {
         if(end === 1000000){
           end = end - 1;
@@ -200,23 +207,13 @@ window.onload = () => {
                                       </div>
                                       `)
         $('.results-box').on('click', resultsSelect)
-
-        // Loop through all <span> elements after appending them to the search container and highlighting the specific is that was searched. 
-      $("span").each(function () {
-        const lowercasedID: string = $(this).text() as string; 
-        if (lowercasedID == inputNumber) {
-          $(this).css({ "background-color": "#FFFF00", "color": "black" });
-        } else {
-          $(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
-        }
-      });
-
         } else {
           $('.results-box').remove()
         }
       } else {
         $('.results-box').remove()
       }
+      
       isFunctionRunning = false;
     }
     $(".search-input").on("keyup", resultsRange);
@@ -236,19 +233,22 @@ window.onload = () => {
     isFunctionRunning = false;
     await showRecords(start, end)
     const screenHeight = $(window).height();
-    const maxRecords = Math.floor(parseInt(screenHeight as any) / 50);
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 45) - 1;
     currentPage = Math.floor(end / maxRecords)
+    let newEnd = Math.ceil(Math.floor(end / maxRecords) / 10) * 10;
+    console.log(end, newEnd)
+    let newStart = newEnd - 9
+    await pageNumbers(newStart, newEnd)
+    console.log(newStart, newEnd)
   }
 
   // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
   async function adjustDisplayedRecords(): Promise<number> {
-
     const screenHeight = $(window).height();
-    console.log(screenHeight);    
-    const maxRecords = Math.floor(parseInt(screenHeight as any) / 50);
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 45) - 1;
     currentFromID = (currentPage - 1) * maxRecords + 1;
     currentToID = currentPage * maxRecords;
-    console.log(currentFromID, currentToID);   
+    console.log(currentPage)
     $("tbody").empty();
     await showRecords(currentFromID, currentToID);
     return maxRecords;
@@ -256,22 +256,12 @@ window.onload = () => {
 
   let resizeTimer: ReturnType<typeof setTimeout>;
 
-$(window).on('resize', () => {
+ function resize() {
   clearTimeout(resizeTimer);
   resizeTimer = setTimeout(async () => {
     const maxRecords: number = await adjustDisplayedRecords();
-
-    // Example: Update a visual indicator based on the maxRecords value.
-    if (maxRecords > 10) {
-      $('.indicator').text('Many records displayed');
-    } else {
-      $('.indicator').text('Few records displayed');
-    }
-
-    // Perform other TypeScript-specific actions based on the maxRecords value.
-
   }, 200);
-});
+}
 
   // Just a loader to display when the table is empty and records is being fetched. 
   function loader() {
@@ -283,6 +273,13 @@ $(window).on('resize', () => {
     }
   }
 
+  
+  
+window.onload = () => {
+  showColumns();
+  adjustDisplayedRecords();
+  pageNumbers(1, 10);
+  $(window).on('resize', resize);
 };
 
  
\ No newline at end of file

From ecf387cceed5066b4b158cbcaebed0c3b2c9b9f6 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Fri, 18 Aug 2023 16:12:31 +0200
Subject: [PATCH 07/40] During resizing this version of the project change the
 start and end of records displayed. It depends on the screen height and the
 page.

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

diff --git a/app.ts b/app.ts
index cb5996c7..66547c63 100644
--- a/app.ts
+++ b/app.ts
@@ -2,6 +2,7 @@
   let isFunctionRunning = false;
   let currentPage = 1;
   let lastPage = currentPage + 9
+  let firstPage = 1
   let currentFromID = 1;
   let currentToID = 20;
   
@@ -108,6 +109,7 @@
       let count: number = await getRecordCount();
       let stringCount = count.toLocaleString().replace(/,/g, " ");
       $(".pagination").append(`<a class="prev">&laquo;</a>`);
+      
       for (let i = start; i <= end; i++) {
         $(".pagination").append(
           `<a id="${i}" class="pagination-item">${i}</a>`
@@ -123,7 +125,7 @@
         let pageNumber: any = $(this).attr("id");
         let toID = parseInt(pageNumber) * maxRecords;
         let fromID: number = toID - (maxRecords - 1);
-        if(fromID >= count || toID >= count) {
+        if(fromID > count || toID > count) {
           toID = count - 1 ;
           fromID = toID - maxRecords
         }
@@ -144,33 +146,36 @@
         }
         isFunctionRunning = true
         console.log(end)
-          start = start + 10;
           end = end + 10;
+          start = end - 9;
           $(".pagination").empty();
           await pageNumbers(start, end);
+          isFunctionRunning = false
       });
-      isFunctionRunning = false
 
       // Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
-      if(isFunctionRunning) {
-        return;
-      }
-      isFunctionRunning = true
-      if (start == 1) {
-        $(".prev").css({ display: "none" });
-      } else {
-        $(".prev").on("click", function () {
+      $(".prev").on("click", function () {
+        if(isFunctionRunning) {
+          return;
+        }
+        isFunctionRunning = true
           $(".pagination").fadeOut("fast", function () {
+            console.log(start, end)
             start = start - 10;
-            end = end - 10;
+            end = start + 9;
             $(".pagination").empty();
             pageNumbers(start, end);
             $(".pagination").fadeIn("fast");
           });
+          isFunctionRunning = false
         });
+
+      if (start == 1 ) {
+        $(".prev").css({ display: "none" });
+      } 
+      if(end == currentPage){
+        $(".next").css({ display: "none" });
       }
-      isFunctionRunning = false
-      console.log(currentPage)
 
     } catch (error) {
       console.error(error);
@@ -228,27 +233,50 @@
     let rangeArray = null
     rangeArray = idRange.split('-');
     $('.results-box').remove()
-    let start = parseInt(rangeArray[0])
-    let end = parseInt(rangeArray[1])
+    let startID = parseInt(rangeArray[0])
+    let endID = parseInt(rangeArray[1])
     isFunctionRunning = false;
-    await showRecords(start, end)
+    await showRecords(startID, endID)
     const screenHeight = $(window).height();
     const maxRecords = Math.floor(parseInt(screenHeight as any) / 45) - 1;
-    currentPage = Math.floor(end / maxRecords)
-    let newEnd = Math.ceil(Math.floor(end / maxRecords) / 10) * 10;
-    console.log(end, newEnd)
-    let newStart = newEnd - 9
-    await pageNumbers(newStart, newEnd)
-    console.log(newStart, newEnd)
+    currentPage = Math.floor(endID / maxRecords)
+    let pageEnd = Math.ceil(Math.floor(endID / maxRecords) / 10) * 10;
+    let pageStart = pageEnd - 9
+
+    console.log('currentPage: ' + currentPage + ', end: ' + endID + ', pageEnd: ' + pageEnd)
+    if(endID == 999999) {
+      console.log(maxRecords)
+        startID = ((currentPage - 1) * maxRecords) + 1;
+        endID = 9999999
+        console.log(currentPage)
+        pageEnd = currentPage
+    }
+
+    await pageNumbers(pageStart, pageEnd)
+    console.log(pageStart, pageEnd)
   }
 
   // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
   async function adjustDisplayedRecords(): Promise<number> {
     const screenHeight = $(window).height();
     const maxRecords = Math.floor(parseInt(screenHeight as any) / 45) - 1;
-    currentFromID = (currentPage - 1) * maxRecords + 1;
+    
+    let inputNumber = $('.search-input').val() as string
+    let length = inputNumber.length as number;
+    console.log(length)
+    if(length > 0) {
+      let inputNumberInt = parseInt(inputNumber)
+      let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
+      console.log(newCurrentPage)
+      currentPage = newCurrentPage
+    }
     currentToID = currentPage * maxRecords;
-    console.log(currentPage)
+    if(currentToID > 999999) {
+      currentToID = 999999
+    }
+    currentFromID = (currentPage - 1) * maxRecords + 1;
+    
+
     $("tbody").empty();
     await showRecords(currentFromID, currentToID);
     return maxRecords;
diff --git a/index.html b/index.html
index 3fd505fd..8b6501fc 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="./style.css">
 </head>
 <body>
-    <h1 class="header">JavaScript Onboarding Project</h1>
+    <!-- <h1 class="header">JavaScript Onboarding Project</h1> -->
     <div class="heading">
         <p class="results"></p>
         <div class="search-container" id="search-container">

From 441ca1d06bc755bde9c8ffae47aa61f8f38a7edf Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Fri, 18 Aug 2023 17:01:05 +0200
Subject: [PATCH 08/40] updated. When adjusting height the first record of the
 page stays the same.

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

diff --git a/app.ts b/app.ts
index 66547c63..8336fb59 100644
--- a/app.ts
+++ b/app.ts
@@ -75,6 +75,7 @@
       loader()
       let records = await getRecords(fromID, toID);
       let count: number = await getRecordCount();
+      count = count - 1
       let stringCount = count.toLocaleString().replace(/,/g, " ");
       $('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`)
       for (let i = 0; i < records.length; i++) {
@@ -125,6 +126,8 @@
         let pageNumber: any = $(this).attr("id");
         let toID = parseInt(pageNumber) * maxRecords;
         let fromID: number = toID - (maxRecords - 1);
+        currentFromID = fromID;
+        console.log(fromID)
         if(fromID > count || toID > count) {
           toID = count - 1 ;
           fromID = toID - maxRecords
@@ -200,7 +203,7 @@
         end = 1000000
       }
       let start: number = (end - maxRecords + 1);
-      currentPage = Math.floor(end / maxRecords)
+      currentPage = Math.ceil(end / maxRecords)
       if(inputNumberInt < 1000000) {
         if(end === 1000000){
           end = end - 1;
@@ -268,13 +271,13 @@
       let inputNumberInt = parseInt(inputNumber)
       let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
       console.log(newCurrentPage)
-      currentPage = newCurrentPage
+      // currentPage = newCurrentPage
     }
-    currentToID = currentPage * maxRecords;
+     currentToID = currentFromID + maxRecords;
     if(currentToID > 999999) {
       currentToID = 999999
     }
-    currentFromID = (currentPage - 1) * maxRecords + 1;
+    // currentFromID = (currentPage - 1) * maxRecords + 1;
     
 
     $("tbody").empty();
@@ -305,8 +308,8 @@
   
 window.onload = () => {
   showColumns();
-  adjustDisplayedRecords();
   pageNumbers(1, 10);
+  adjustDisplayedRecords();
   $(window).on('resize', resize);
 };
 

From c948341da7da3e0a18677b541e5b045bfbe4faec Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Mon, 21 Aug 2023 17:03:44 +0200
Subject: [PATCH 09/40] update

---
 app.ts | 103 +++++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 71 insertions(+), 32 deletions(-)

diff --git a/app.ts b/app.ts
index 66547c63..bf35a80c 100644
--- a/app.ts
+++ b/app.ts
@@ -69,6 +69,10 @@
       return;
     }
     isFunctionRunning = true;
+    let inputNumber: string = $('.search-input').val() as string
+    if(inputNumber == "") {
+      currentFromID = fromID
+    } 
     try {
       console.log(fromID, toID)
       $("tbody").empty();
@@ -89,7 +93,7 @@
       $("span").each(function () {
         const lowercasedID: string = $(this).text() as string; 
         if (lowercasedID == inputNumber) {
-          $(this).css({ "background-color": "#FFFF00", "color": "black" });
+          $(this).css({ "background-color": "#FFFF00", "color": "black  " });
         } else {
           $(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
         }
@@ -108,6 +112,7 @@
       $('.pagination').empty();
       let count: number = await getRecordCount();
       let stringCount = count.toLocaleString().replace(/,/g, " ");
+      console.log(start, end )
       $(".pagination").append(`<a class="prev">&laquo;</a>`);
       
       for (let i = start; i <= end; i++) {
@@ -120,14 +125,16 @@
       // Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
       $(".pagination-item").on("click", async function dynamicPagination(): Promise<Array<number>>{
         currentPage = parseInt($(this).attr("id") as any);
-        let maxRecords = await adjustDisplayedRecords();
-        // let maxRecords: number = await adjustDisplayedRecords() 
+        const screenHeight = $(window).height();
+        const maxRecords = Math.floor(parseInt(screenHeight as any) / 60) - 1;
         let pageNumber: any = $(this).attr("id");
-        let toID = parseInt(pageNumber) * maxRecords;
-        let fromID: number = toID - (maxRecords - 1);
+        let toID = (parseInt(pageNumber) * maxRecords + 1);
+        let fromID: number = toID - (maxRecords);
         if(fromID > count || toID > count) {
           toID = count - 1 ;
           fromID = toID - maxRecords
+          console.log(fromID, toID)
+          currentFromID = fromID
         }
         $(".pagination-item").removeClass("active");
         $(this).addClass("active");
@@ -140,6 +147,7 @@
       });
 
       // Adding a click event to the next button of the pagination.
+      console.log(start, end )
       $(".next").on("click", async function () {
         if (isFunctionRunning) {
           return;
@@ -173,10 +181,20 @@
       if (start == 1 ) {
         $(".prev").css({ display: "none" });
       } 
-      if(end == currentPage){
+      console.log(currentToID)
+      if(currentToID == 999999){
         $(".next").css({ display: "none" });
       }
 
+      $(".pagination-item").each(function () {
+        let elementID = $(this).attr('id') as string;
+        let currentPageString: string = currentPage.toString();
+        console.log(elementID, currentPageString )   
+        if (elementID == currentPageString) {
+          $(this).addClass('active')
+        } 
+      });
+
     } catch (error) {
       console.error(error);
       throw error;
@@ -194,10 +212,11 @@
     let inputNumberInt = parseInt(inputNumber);
     if(inputNumber !== '') {
       const screenHeight = $(window).height();
-      const maxRecords = Math.floor(parseInt(screenHeight as any) / 45) - 1;
+      const maxRecords = Math.floor(parseInt(screenHeight as any) / 60) - 1;
       let end:number = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
       if(end > 1000000) {
-        end = 1000000
+        end = 999999
+        currentToID = end
       }
       let start: number = (end - maxRecords + 1);
       currentPage = Math.floor(end / maxRecords)
@@ -237,21 +256,22 @@
     let endID = parseInt(rangeArray[1])
     isFunctionRunning = false;
     await showRecords(startID, endID)
+    console.log(startID, endID)
     const screenHeight = $(window).height();
-    const maxRecords = Math.floor(parseInt(screenHeight as any) / 45) - 1;
-    currentPage = Math.floor(endID / maxRecords)
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 60) - 1;
+    currentPage = Math.ceil(endID / maxRecords)
     let pageEnd = Math.ceil(Math.floor(endID / maxRecords) / 10) * 10;
     let pageStart = pageEnd - 9
-
+    
     console.log('currentPage: ' + currentPage + ', end: ' + endID + ', pageEnd: ' + pageEnd)
     if(endID == 999999) {
       console.log(maxRecords)
-        startID = ((currentPage - 1) * maxRecords) + 1;
-        endID = 9999999
-        console.log(currentPage)
-        pageEnd = currentPage
+      startID = ((currentPage - 1) * maxRecords) + 1;
+      endID = 9999999
+      console.log(currentPage)
+      pageEnd = currentPage
     }
-
+    
     await pageNumbers(pageStart, pageEnd)
     console.log(pageStart, pageEnd)
   }
@@ -259,26 +279,45 @@
   // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
   async function adjustDisplayedRecords(): Promise<number> {
     const screenHeight = $(window).height();
-    const maxRecords = Math.floor(parseInt(screenHeight as any) / 45) - 1;
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 60) - 1;
     
     let inputNumber = $('.search-input').val() as string
     let length = inputNumber.length as number;
-    console.log(length)
-    if(length > 0) {
-      let inputNumberInt = parseInt(inputNumber)
-      let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
+    let inputNumberInt = parseInt(inputNumber)
+
+    if(inputNumber == '') {
+      console.log('empty')
+      console.log(currentFromID, currentToID)
+      currentToID = currentFromID + maxRecords;
+      let newCurrentPage = Math.ceil(currentFromID / maxRecords)
       console.log(newCurrentPage)
       currentPage = newCurrentPage
-    }
-    currentToID = currentPage * maxRecords;
-    if(currentToID > 999999) {
-      currentToID = 999999
-    }
-    currentFromID = (currentPage - 1) * maxRecords + 1;
-    
 
-    $("tbody").empty();
-    await showRecords(currentFromID, currentToID);
+    } else {
+      console.log('content')
+      if(length > 0) {
+        let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
+        currentToID = newCurrentPage * maxRecords;
+        console.log('newCurrentPage: ' + newCurrentPage, ' ')
+        console.log(newCurrentPage)
+        currentPage = newCurrentPage
+        currentFromID = (currentPage - 1) * maxRecords + 1;
+        
+      }
+      if(currentToID > 999999) {
+        currentToID = 999999
+      }
+      
+    
+    }
+    console.log(currentFromID, currentToID)
+      $("tbody").empty();
+      await showRecords(currentFromID, currentToID);
+      let pageEnd = Math.ceil(Math.floor(currentToID / maxRecords) / 10) * 10;
+      let pageStart = pageEnd - 9
+      await pageNumbers(pageStart, pageEnd);
+      console.log(currentFromID, currentToID)
+      
     return maxRecords;
   }
 
@@ -288,7 +327,7 @@
   clearTimeout(resizeTimer);
   resizeTimer = setTimeout(async () => {
     const maxRecords: number = await adjustDisplayedRecords();
-  }, 200);
+  }, 750);
 }
 
   // Just a loader to display when the table is empty and records is being fetched. 
@@ -305,8 +344,8 @@
   
 window.onload = () => {
   showColumns();
+  // pageNumbers(1, 10);
   adjustDisplayedRecords();
-  pageNumbers(1, 10);
   $(window).on('resize', resize);
 };
 

From 090f7cdb1310f8eb6e1bcc60968178699453b780 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Tue, 22 Aug 2023 17:02:43 +0200
Subject: [PATCH 10/40] updated

---
 app.ts     | 160 +++++++++++++++++++++++++++++------------------------
 index.html |   5 +-
 style.css  |   8 ++-
 3 files changed, 96 insertions(+), 77 deletions(-)

diff --git a/app.ts b/app.ts
index b5b3ea5a..8701116f 100644
--- a/app.ts
+++ b/app.ts
@@ -1,13 +1,11 @@
 let api: string = "http://localhost:2050/";
 let isFunctionRunning = false;
 let currentPage = 1;
-let lastPage = currentPage + 9
 let firstPage = 1
+let lastPage = firstPage + 9
 let currentFromID = 1;
 let currentToID = 20;
 
-
-
 // This function  will handle retrieving the records from the api
 async function getRecords(fromID: number, toID: number): Promise<Array<Array<string>>> {
   try {
@@ -77,6 +75,10 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
     console.log(fromID, toID)
     $("tbody").empty();
     loader()
+    currentToID = toID
+    if(toID > 999999){
+      toID = 999999
+    }
     let records = await getRecords(fromID, toID);
     let count: number = await getRecordCount();
     let stringCount = count.toLocaleString().replace(/,/g, " ");
@@ -98,6 +100,13 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
         $(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
       }
     });
+    console.log(currentToID)
+    const screenHeight = $(window).height();
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
+    let condition = Math.ceil(999999 / maxRecords)
+    if(condition > fromID && condition < toID){
+      $(".next").css({ display: "none" });
+    }
     
   } catch (error) {
     console.error(error);
@@ -109,27 +118,38 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 // The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
 async function pageNumbers(start: number, end: number): Promise<void> {
   try {
+    console.log(currentToID)
     $('.pagination').empty();
     let count: number = await getRecordCount();
     let stringCount = count.toLocaleString().replace(/,/g, " ");
-    console.log(start, end )
-    $(".pagination").append(`<a class="prev">&laquo;</a>`);
-    
+    const screenHeight = $(window).height();
+    let maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
+    let condition = Math.floor(999999 / maxRecords)
+    console.log('start: ',start,'end: ', end, 'condition: ', condition, 'maxRecords: ', maxRecords )
+    if(condition <= end && condition >= start) {
+      end = condition
+      $(".next").css({ display: "none" });
+    } else $(".next").css({ display: "block" });
+    firstPage = start;
+    lastPage = end;
     for (let i = start; i <= end; i++) {
       $(".pagination").append(
         `<a id="${i}" class="pagination-item">${i}</a>`
       );
     }
-    $(".pagination").append(`<a class="next">&raquo;</a>`);
-    
+    if (firstPage === 1 ) {
+      $(".prev").css({ display: "none" });
+    } else $(".prev").css({ display: "block" });
+
+
     // Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
     $(".pagination-item").on("click", async function dynamicPagination(): Promise<Array<number>>{
       currentPage = parseInt($(this).attr("id") as any);
       const screenHeight = $(window).height();
-      const maxRecords = Math.floor(parseInt(screenHeight as any) / 60) - 1;
+      const maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
       let pageNumber: any = $(this).attr("id");
-      let toID = (parseInt(pageNumber) * maxRecords + 1);
-      let fromID: number = toID - (maxRecords);
+      let fromID = Math.ceil(pageNumber * maxRecords - (maxRecords - 1) )
+      let toID = fromID + (maxRecords - 1)
       if(fromID > count || toID > count) {
         toID = count - 1 ;
         fromID = toID - maxRecords
@@ -143,64 +163,55 @@ async function pageNumbers(start: number, end: number): Promise<void> {
       $(".results").append(
         `Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
       );
+      console.log(currentToID)
       return [fromID, toID]
     });
 
+    $(".pagination-item").each(function () {
+      let elementID = $(this).attr('id') as string;
+      let currentPageString: string = currentPage.toString();
+      // console.log(elementID, currentPageString )   
+      if (elementID == currentPageString) {
+        $(this).addClass('active')
+      } 
+    });
+
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+
     // Adding a click event to the next button of the pagination.
-    console.log(start, end )
+    // console.log(start, end )
     $(".next").on("click", async function () {
       if (isFunctionRunning) {
         return;
       }
       isFunctionRunning = true
-      console.log(end)
-        end = end + 10;
-        start = end - 9;
-        $(".pagination").empty();
-        await pageNumbers(start, end);
-        isFunctionRunning = false
+      console.log('start: ', firstPage, 'end:', lastPage)
+      lastPage = lastPage + 10;
+      firstPage = lastPage - 9;
+      $(".pagination").empty();
+      await pageNumbers(firstPage, lastPage);
+      isFunctionRunning = false
     });
 
     // Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
-    $(".prev").on("click", function () {
+    $(".prev").on("click",async function () {
       if(isFunctionRunning) {
         return;
       }
       isFunctionRunning = true
-        $(".pagination").fadeOut("fast", function () {
-          console.log(start, end)
-          start = start - 10;
-          end = start + 9;
-          $(".pagination").empty();
-          pageNumbers(start, end);
-          $(".pagination").fadeIn("fast");
-        });
-        isFunctionRunning = false
-      });
-
-    if (start == 1 ) {
-      $(".prev").css({ display: "none" });
-    } 
-    console.log(currentToID)
-    if(currentToID == 999999){
-      $(".next").css({ display: "none" });
-    }
-
-    $(".pagination-item").each(function () {
-      let elementID = $(this).attr('id') as string;
-      let currentPageString: string = currentPage.toString();
-      console.log(elementID, currentPageString )   
-      if (elementID == currentPageString) {
-        $(this).addClass('active')
-      } 
+      console.log('start: ', firstPage, 'end:', lastPage)
+      firstPage = firstPage - 9;
+      lastPage = firstPage + 10;
+      $(".pagination").empty();
+      await pageNumbers(firstPage, lastPage);
+      isFunctionRunning = false
     });
 
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
-}
-
 // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
 async function resultsRange(event: any) {
   if (isFunctionRunning) {
@@ -212,16 +223,16 @@ async function resultsRange(event: any) {
   let inputNumberInt = parseInt(inputNumber);
   if(inputNumber !== '') {
     const screenHeight = $(window).height();
-    const maxRecords = Math.floor(parseInt(screenHeight as any) / 60) - 1;
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
     let end:number = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
     if(end > 1000000) {
       end = 999999
       currentToID = end
     }
-    let start: number = (end - maxRecords + 1);
-    currentPage = Math.floor(end / maxRecords)
-    if(inputNumberInt < 1000000) {
-      if(end === 1000000){
+    let start: number = (end - (maxRecords - 1));
+    currentPage = Math.floor(end / maxRecords);
+    if(inputNumberInt < 1000000 && inputNumberInt > 0) {
+      if(end === 1000000){  
         end = end - 1;
       } else null
       $('.results-box').remove()
@@ -233,6 +244,11 @@ async function resultsRange(event: any) {
       $('.results-box').on('click', resultsSelect)
       } else {
         $('.results-box').remove()
+        $('.search-container').append(`
+                                    <div class="results-box">
+                                      <p class="message">Can't search negative values or records larger than 999 999 !!!</p>
+                                    </div>
+                                    `)
       }
     } else {
       $('.results-box').remove()
@@ -255,48 +271,50 @@ async function resultsSelect() {
   let startID = parseInt(rangeArray[0])
   let endID = parseInt(rangeArray[1])
   isFunctionRunning = false;
-  await showRecords(startID, endID)
   console.log(startID, endID)
   const screenHeight = $(window).height();
-  const maxRecords = Math.floor(parseInt(screenHeight as any) / 60) - 1;
-  currentPage = Math.ceil(endID / maxRecords)
-  let pageEnd = Math.ceil(Math.floor(endID / maxRecords) / 10) * 10;
+  const maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
+  currentPage = Math.floor(endID / maxRecords)
+  let pageEnd = Math.ceil(currentPage / 10) * 10;
   let pageStart = pageEnd - 9
   
   console.log('currentPage: ' + currentPage + ', end: ' + endID + ', pageEnd: ' + pageEnd)
   if(endID == 999999) {
     console.log(maxRecords)
     startID = ((currentPage - 1) * maxRecords) + 1;
-    endID = 9999999
+    endID = 999999
     console.log(currentPage)
-    pageEnd = currentPage
+    firstPage = pageStart;
+    lastPage = pageEnd
   }
   
   await pageNumbers(pageStart, pageEnd)
   console.log(pageStart, pageEnd)
+  await showRecords(startID, endID)
+
 }
 
 // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
 async function adjustDisplayedRecords(): Promise<number> {
   const screenHeight = $(window).height();
-  const maxRecords = Math.floor(parseInt(screenHeight as any) / 60) - 1;
+  const maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
   
   let inputNumber = $('.search-input').val() as string
   let length = inputNumber.length as number;
   let inputNumberInt = parseInt(inputNumber)
 
   if(inputNumber == '') {
-    console.log('empty')
     console.log(currentFromID, currentToID)
-    currentToID = currentFromID + maxRecords;
+    currentToID = currentFromID + (maxRecords - 1);
     let newCurrentPage = Math.ceil(currentFromID / maxRecords)
     console.log(newCurrentPage)
     currentPage = newCurrentPage
-
   } else {
-    console.log('content')
     if(length > 0) {
       let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
+      if(currentToID > 999999) {
+        currentToID = 999999
+      }
       currentToID = newCurrentPage * maxRecords;
       console.log('newCurrentPage: ' + newCurrentPage, ' ')
       console.log(newCurrentPage)
@@ -304,17 +322,14 @@ async function adjustDisplayedRecords(): Promise<number> {
       currentFromID = (currentPage - 1) * maxRecords + 1;
       
     }
-    if(currentToID > 999999) {
-      currentToID = 999999
-    }
-    
-  
   }
   console.log(currentFromID, currentToID)
     $("tbody").empty();
     await showRecords(currentFromID, currentToID);
     let pageEnd = Math.ceil(Math.floor(currentToID / maxRecords) / 10) * 10;
     let pageStart = pageEnd - 9
+    firstPage = pageStart;
+    lastPage = pageEnd
     await pageNumbers(pageStart, pageEnd);
     console.log(currentFromID, currentToID)
     
@@ -341,7 +356,6 @@ function loader() {
 }
 
 
-
 window.onload = () => {
 showColumns();
 // pageNumbers(1, 10);
diff --git a/index.html b/index.html
index 8b6501fc..2b075541 100644
--- a/index.html
+++ b/index.html
@@ -24,14 +24,15 @@
         </table>
     </div>
     <div class="wrapper">
+        <a class="prev">&laquo;</a>
         <div class="pagination">
+
         </div>
+        <a class="next">&raquo;</a>
     </div>
 <script src="./app.js"></script>
 </body>
 
- 
-
 </html>
 
  
diff --git a/style.css b/style.css
index a5bec323..ac4d06c9 100644
--- a/style.css
+++ b/style.css
@@ -119,7 +119,7 @@ input:focus{
     /* padding-top: 30px; */
 }
  
-.pagination a {
+ a {
     text-decoration: none;
     color: black;
     padding: 9px;
@@ -137,7 +137,7 @@ input:focus{
 }
  
 .active {
-    color: #4DD2C6 !important;
+    color: white !important;
     border: 1px solid #4DD2C6 !important;  
 }
 
@@ -207,6 +207,10 @@ th, td {
     cursor: pointer;
 }
 
+.message {
+    text-align: center;
+}
+
 a {
     cursor: pointer;
 }

From 9005d4593527a0d32a4a635cde197ddb426ee750 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Wed, 23 Aug 2023 17:00:51 +0200
Subject: [PATCH 11/40] Fixed my last value's page and the pagination when
 going back and forth page rows. App doesn't crash when resizing too low.

---
 app.ts | 79 +++++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/app.ts b/app.ts
index 8701116f..ef798e54 100644
--- a/app.ts
+++ b/app.ts
@@ -68,6 +68,12 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
   }
   isFunctionRunning = true;
   let inputNumber: string = $('.search-input').val() as string
+  const screenHeight = $(window).height();
+  const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+  let condition = Math.ceil(999999 / maxRecords) + 1
+  if((condition - 1) == currentPage){
+    fromID = (condition - 2) * maxRecords + 1
+  }
   if(inputNumber == "") {
     currentFromID = fromID
   } 
@@ -101,10 +107,8 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
       }
     });
     console.log(currentToID)
-    const screenHeight = $(window).height();
-    const maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
-    let condition = Math.ceil(999999 / maxRecords)
-    if(condition > fromID && condition < toID){
+
+    if(condition >= fromID && condition <= toID){
       $(".next").css({ display: "none" });
     }
     
@@ -118,18 +122,23 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 // The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
 async function pageNumbers(start: number, end: number): Promise<void> {
   try {
-    console.log(currentToID)
     $('.pagination').empty();
     let count: number = await getRecordCount();
     let stringCount = count.toLocaleString().replace(/,/g, " ");
     const screenHeight = $(window).height();
-    let maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
-    let condition = Math.floor(999999 / maxRecords)
+    let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+    let condition = Math.floor(999999 / maxRecords) + 1;
     console.log('start: ',start,'end: ', end, 'condition: ', condition, 'maxRecords: ', maxRecords )
     if(condition <= end && condition >= start) {
-      end = condition
+      if(999999 % maxRecords === 0){
+        console.log(condition - 1)
+        end = (condition - 1)
+      } else end = condition
       $(".next").css({ display: "none" });
     } else $(".next").css({ display: "block" });
+    if(start < 1) {
+      start = 1
+    }
     firstPage = start;
     lastPage = end;
     for (let i = start; i <= end; i++) {
@@ -144,12 +153,15 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 
     // Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
     $(".pagination-item").on("click", async function dynamicPagination(): Promise<Array<number>>{
+      $('.search-input').val('')
       currentPage = parseInt($(this).attr("id") as any);
       const screenHeight = $(window).height();
-      const maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
+      const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
       let pageNumber: any = $(this).attr("id");
       let fromID = Math.ceil(pageNumber * maxRecords - (maxRecords - 1) )
       let toID = fromID + (maxRecords - 1)
+
+      
       if(fromID > count || toID > count) {
         toID = count - 1 ;
         fromID = toID - maxRecords
@@ -175,11 +187,12 @@ async function pageNumbers(start: number, end: number): Promise<void> {
         $(this).addClass('active')
       } 
     });
-
+    
   } catch (error) {
     console.error(error);
     throw error;
   }
+  isFunctionRunning = false
 }
 
 
@@ -191,9 +204,10 @@ async function pageNumbers(start: number, end: number): Promise<void> {
       }
       isFunctionRunning = true
       console.log('start: ', firstPage, 'end:', lastPage)
-      lastPage = lastPage + 10;
-      firstPage = lastPage - 9;
+      firstPage = lastPage + 1;
+      lastPage = firstPage + 9;
       $(".pagination").empty();
+      console.log(firstPage, lastPage)
       await pageNumbers(firstPage, lastPage);
       isFunctionRunning = false
     });
@@ -205,11 +219,12 @@ async function pageNumbers(start: number, end: number): Promise<void> {
       }
       isFunctionRunning = true
       console.log('start: ', firstPage, 'end:', lastPage)
-      firstPage = firstPage - 9;
-      lastPage = firstPage + 10;
+      lastPage = firstPage - 1;
+      firstPage = lastPage - 9;
+      console.log(firstPage, lastPage)
       $(".pagination").empty();
       await pageNumbers(firstPage, lastPage);
-      isFunctionRunning = false
+      // isFunctionRunning = false
     });
 
 // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
@@ -223,7 +238,7 @@ async function resultsRange(event: any) {
   let inputNumberInt = parseInt(inputNumber);
   if(inputNumber !== '') {
     const screenHeight = $(window).height();
-    const maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
+    const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
     let end:number = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
     if(end > 1000000) {
       end = 999999
@@ -273,8 +288,8 @@ async function resultsSelect() {
   isFunctionRunning = false;
   console.log(startID, endID)
   const screenHeight = $(window).height();
-  const maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
-  currentPage = Math.floor(endID / maxRecords)
+  const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+  currentPage = Math.ceil(endID / maxRecords)
   let pageEnd = Math.ceil(currentPage / 10) * 10;
   let pageStart = pageEnd - 9
   
@@ -296,8 +311,11 @@ async function resultsSelect() {
 
 // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
 async function adjustDisplayedRecords(): Promise<number> {
-  const screenHeight = $(window).height();
-  const maxRecords = Math.floor(parseInt(screenHeight as any) / 60);
+  let screenHeight = $(window).height() as number;
+  if(screenHeight < 68) {
+    screenHeight = 68
+  }
+  let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
   
   let inputNumber = $('.search-input').val() as string
   let length = inputNumber.length as number;
@@ -307,7 +325,7 @@ async function adjustDisplayedRecords(): Promise<number> {
     console.log(currentFromID, currentToID)
     currentToID = currentFromID + (maxRecords - 1);
     let newCurrentPage = Math.ceil(currentFromID / maxRecords)
-    console.log(newCurrentPage)
+    console.log(newCurrentPage, currentPage)
     currentPage = newCurrentPage
   } else {
     if(length > 0) {
@@ -317,21 +335,20 @@ async function adjustDisplayedRecords(): Promise<number> {
       }
       currentToID = newCurrentPage * maxRecords;
       console.log('newCurrentPage: ' + newCurrentPage, ' ')
-      console.log(newCurrentPage)
+      console.log(currentPage, newCurrentPage)
       currentPage = newCurrentPage
       currentFromID = (currentPage - 1) * maxRecords + 1;
-      
     }
   }
   console.log(currentFromID, currentToID)
-    $("tbody").empty();
-    await showRecords(currentFromID, currentToID);
-    let pageEnd = Math.ceil(Math.floor(currentToID / maxRecords) / 10) * 10;
-    let pageStart = pageEnd - 9
-    firstPage = pageStart;
-    lastPage = pageEnd
-    await pageNumbers(pageStart, pageEnd);
-    console.log(currentFromID, currentToID)
+  let pageEnd = Math.ceil(Math.floor(currentToID / maxRecords) / 10) * 10;
+  let pageStart = pageEnd - 9
+  firstPage = pageStart;
+  lastPage = pageEnd
+  console.log(currentFromID, currentToID)
+  $("tbody").empty();
+  await showRecords(currentFromID, currentToID);
+  await pageNumbers(pageStart, pageEnd);
     
   return maxRecords;
 }

From 86fb0dd1021cf8da6e98bbf89ca0a967377531d4 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Thu, 24 Aug 2023 15:17:25 +0200
Subject: [PATCH 12/40] Fixed my paginapages when resizing and starting id's on
 smaller numbers. Finished with all the functionalities.

---
 app.ts | 63 +++++++++++++++++++++++++---------------------------------
 1 file changed, 27 insertions(+), 36 deletions(-)

diff --git a/app.ts b/app.ts
index ef798e54..abf5f80a 100644
--- a/app.ts
+++ b/app.ts
@@ -5,11 +5,12 @@ let firstPage = 1
 let lastPage = firstPage + 9
 let currentFromID = 1;
 let currentToID = 20;
+let difference = 0
+
 
 // This function  will handle retrieving the records from the api
 async function getRecords(fromID: number, toID: number): Promise<Array<Array<string>>> {
   try {
-    console.log(fromID, toID)
     const data = await fetch(`${api}records?from=${fromID}&to=${toID}`);
     const records: Array<Array<string>> = await data.json();
     return records;
@@ -74,16 +75,17 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
   if((condition - 1) == currentPage){
     fromID = (condition - 2) * maxRecords + 1
   }
-  if(inputNumber == "") {
-    currentFromID = fromID
-  } 
+  // if(inputNumber == "") {
+  //   currentFromID = fromID
+  // } 
   try {
-    console.log(fromID, toID)
     $("tbody").empty();
     loader()
     currentToID = toID
     if(toID > 999999){
       toID = 999999
+    } else if(currentPage == 1) {
+      fromID = 1
     }
     let records = await getRecords(fromID, toID);
     let count: number = await getRecordCount();
@@ -106,7 +108,6 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
         $(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
       }
     });
-    console.log(currentToID)
 
     if(condition >= fromID && condition <= toID){
       $(".next").css({ display: "none" });
@@ -128,10 +129,8 @@ async function pageNumbers(start: number, end: number): Promise<void> {
     const screenHeight = $(window).height();
     let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
     let condition = Math.floor(999999 / maxRecords) + 1;
-    console.log('start: ',start,'end: ', end, 'condition: ', condition, 'maxRecords: ', maxRecords )
     if(condition <= end && condition >= start) {
       if(999999 % maxRecords === 0){
-        console.log(condition - 1)
         end = (condition - 1)
       } else end = condition
       $(".next").css({ display: "none" });
@@ -158,16 +157,22 @@ async function pageNumbers(start: number, end: number): Promise<void> {
       const screenHeight = $(window).height();
       const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
       let pageNumber: any = $(this).attr("id");
-      let fromID = Math.ceil(pageNumber * maxRecords - (maxRecords - 1) )
+      let fromID = Math.ceil(pageNumber * maxRecords - (maxRecords - 1));
+      if(difference > 0 && difference < maxRecords){
+        fromID = fromID + difference
+      }
+      if(currentPage === 1) {
+        currentFromID = 1
+      }
       let toID = fromID + (maxRecords - 1)
 
       
       if(fromID > count || toID > count) {
         toID = count - 1 ;
         fromID = toID - maxRecords
-        console.log(fromID, toID)
         currentFromID = fromID
       }
+      currentFromID = fromID
       $(".pagination-item").removeClass("active");
       $(this).addClass("active");
       showRecords(fromID, toID);
@@ -175,14 +180,12 @@ async function pageNumbers(start: number, end: number): Promise<void> {
       $(".results").append(
         `Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
       );
-      console.log(currentToID)
       return [fromID, toID]
     });
 
     $(".pagination-item").each(function () {
       let elementID = $(this).attr('id') as string;
       let currentPageString: string = currentPage.toString();
-      // console.log(elementID, currentPageString )   
       if (elementID == currentPageString) {
         $(this).addClass('active')
       } 
@@ -197,17 +200,14 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 
 
     // Adding a click event to the next button of the pagination.
-    // console.log(start, end )
     $(".next").on("click", async function () {
       if (isFunctionRunning) {
         return;
       }
       isFunctionRunning = true
-      console.log('start: ', firstPage, 'end:', lastPage)
       firstPage = lastPage + 1;
       lastPage = firstPage + 9;
       $(".pagination").empty();
-      console.log(firstPage, lastPage)
       await pageNumbers(firstPage, lastPage);
       isFunctionRunning = false
     });
@@ -218,10 +218,8 @@ async function pageNumbers(start: number, end: number): Promise<void> {
         return;
       }
       isFunctionRunning = true
-      console.log('start: ', firstPage, 'end:', lastPage)
       lastPage = firstPage - 1;
       firstPage = lastPage - 9;
-      console.log(firstPage, lastPage)
       $(".pagination").empty();
       await pageNumbers(firstPage, lastPage);
       // isFunctionRunning = false
@@ -286,25 +284,20 @@ async function resultsSelect() {
   let startID = parseInt(rangeArray[0])
   let endID = parseInt(rangeArray[1])
   isFunctionRunning = false;
-  console.log(startID, endID)
   const screenHeight = $(window).height();
   const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
   currentPage = Math.ceil(endID / maxRecords)
   let pageEnd = Math.ceil(currentPage / 10) * 10;
   let pageStart = pageEnd - 9
   
-  console.log('currentPage: ' + currentPage + ', end: ' + endID + ', pageEnd: ' + pageEnd)
   if(endID == 999999) {
-    console.log(maxRecords)
     startID = ((currentPage - 1) * maxRecords) + 1;
     endID = 999999
-    console.log(currentPage)
     firstPage = pageStart;
     lastPage = pageEnd
   }
   
   await pageNumbers(pageStart, pageEnd)
-  console.log(pageStart, pageEnd)
   await showRecords(startID, endID)
 
 }
@@ -322,11 +315,14 @@ async function adjustDisplayedRecords(): Promise<number> {
   let inputNumberInt = parseInt(inputNumber)
 
   if(inputNumber == '') {
-    console.log(currentFromID, currentToID)
+    let newCurrentPage = Math.ceil(currentFromID / maxRecords);
+    if(newCurrentPage === 1) {
+      currentFromID = 1
+    } 
     currentToID = currentFromID + (maxRecords - 1);
-    let newCurrentPage = Math.ceil(currentFromID / maxRecords)
-    console.log(newCurrentPage, currentPage)
-    currentPage = newCurrentPage
+    currentPage = newCurrentPage;
+    let originalID = (Math.floor(maxRecords * currentPage) - (maxRecords - 1))
+    difference = currentFromID - originalID
   } else {
     if(length > 0) {
       let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
@@ -334,22 +330,17 @@ async function adjustDisplayedRecords(): Promise<number> {
         currentToID = 999999
       }
       currentToID = newCurrentPage * maxRecords;
-      console.log('newCurrentPage: ' + newCurrentPage, ' ')
-      console.log(currentPage, newCurrentPage)
       currentPage = newCurrentPage
       currentFromID = (currentPage - 1) * maxRecords + 1;
     }
   }
-  console.log(currentFromID, currentToID)
   let pageEnd = Math.ceil(Math.floor(currentToID / maxRecords) / 10) * 10;
-  let pageStart = pageEnd - 9
+  let pageStart = pageEnd - 9;
   firstPage = pageStart;
-  lastPage = pageEnd
-  console.log(currentFromID, currentToID)
+  lastPage = pageEnd;
   $("tbody").empty();
   await showRecords(currentFromID, currentToID);
   await pageNumbers(pageStart, pageEnd);
-    
   return maxRecords;
 }
 
@@ -357,9 +348,9 @@ let resizeTimer: ReturnType<typeof setTimeout>;
 
 function resize() {
 clearTimeout(resizeTimer);
-resizeTimer = setTimeout(async () => {
-  const maxRecords: number = await adjustDisplayedRecords();
-}, 750);
+  resizeTimer = setTimeout(async () => {
+      const maxRecords: number = await adjustDisplayedRecords();
+  }, 800);
 }
 
 // Just a loader to display when the table is empty and records is being fetched. 

From 3b5990fa11d5893b8433c4cd6cbdc8e81688f553 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Mon, 28 Aug 2023 10:10:36 +0200
Subject: [PATCH 13/40] Formatted

---
 .vscode/launch.json |  14 +-
 app.ts              | 609 ++++++++++++++++++++++----------------------
 package-lock.json   |   6 +-
 package.json        |   2 +-
 tsconfig.json       |   1 +
 5 files changed, 316 insertions(+), 316 deletions(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 2ba986f6..4089e2fb 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1,15 +1,15 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
         {
             "type": "chrome",
             "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
+            "name": "Debug in Chrome",
+            "url": "http://localhost:2050/",
+            "webRoot": "${workspaceFolder}",
+            "sourceMapPathOverrides": {
+                "webpack:///./*": "${webRoot}/*"
+            }
         }
     ]
-}
\ No newline at end of file
+}
diff --git a/app.ts b/app.ts
index abf5f80a..be2641c4 100644
--- a/app.ts
+++ b/app.ts
@@ -10,364 +10,363 @@ let difference = 0
 
 // This function  will handle retrieving the records from the api
 async function getRecords(fromID: number, toID: number): Promise<Array<Array<string>>> {
-  try {
-    const data = await fetch(`${api}records?from=${fromID}&to=${toID}`);
-    const records: Array<Array<string>> = await data.json();
-    return records;
-
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
+	try {
+		const data = await fetch(`${api}records?from=${fromID}&to=${toID}`);
+		const records: Array<Array<string>> = await data.json();
+		return records;
+
+	} catch (error) {
+		console.error(error);
+		throw error;
+	}
 }
 
 // This function  will handle retrieving the columns from the api
 async function getColumns(): Promise<Array<string>> {
-  try {
-    const data = await fetch(`${api}columns`);
-    const columns: Array<string> = await data.json();
-    return columns;
-
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
+	try {
+		const data = await fetch(`${api}columns`);
+		const columns: Array<string> = await data.json();
+		return columns;
+
+	} catch (error) {
+		console.error(error);
+		throw error;
+	}
 }
 
 // This function  will handle retrieving the record count from the api
 async function getRecordCount(): Promise<number> {
-  try {
-    const data = await fetch(`${api}recordCount`);
-    const count: number = await data.json();
-    return count;
-
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
+	try {
+		const data = await fetch(`${api}recordCount`);
+		const count: number = await data.json();
+		return count;
+
+	} catch (error) {
+		console.error(error);
+		throw error;
+	}
 }
 
 // This function will loop through and display the appropriate columns in the correct order.
 async function showColumns(): Promise<void> {
-  try {
-    $(".head-row").empty();
-    let columns = await getColumns();
-    for (let i = 0; i < columns.length; i++) {
-      $("thead").append(`<th>${columns[i]}</th>`);
-    }
-
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
+	try {
+		$(".head-row").empty();
+		let columns = await getColumns();
+		for (let i = 0; i < columns.length; i++) {
+			$("thead").append(`<th>${columns[i]}</th>`);
+		}
+
+	} catch (error) {
+		console.error(error);
+		throw error;
+	}
 }
 
 // This function will loop through and display the records on the table.
 async function showRecords(fromID: number, toID: number): Promise<void> {
-  if (isFunctionRunning) {
-    return;
-  }
-  isFunctionRunning = true;
-  let inputNumber: string = $('.search-input').val() as string
-  const screenHeight = $(window).height();
-  const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-  let condition = Math.ceil(999999 / maxRecords) + 1
-  if((condition - 1) == currentPage){
-    fromID = (condition - 2) * maxRecords + 1
-  }
-  // if(inputNumber == "") {
-  //   currentFromID = fromID
-  // } 
-  try {
-    $("tbody").empty();
-    loader()
-    currentToID = toID
-    if(toID > 999999){
-      toID = 999999
-    } else if(currentPage == 1) {
-      fromID = 1
-    }
-    let records = await getRecords(fromID, toID);
-    let count: number = await getRecordCount();
-    let stringCount = count.toLocaleString().replace(/,/g, " ");
-    $('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`)
-    for (let i = 0; i < records.length; i++) {
-      $("tbody").append(`<tr class="body-row">`);
-      for (let n = 0; n < records[i].length; n++) {
-        $(".body-row:last-child").append(`<td><span>${records[i][n]}</span></td>`);
-      }
-      $("tbody").append(`</tr>`);
-    }
-    
-    let inputNumber: string = $('.search-input').val() as string
-    $("span").each(function () {
-      const lowercasedID: string = $(this).text() as string; 
-      if (lowercasedID == inputNumber) {
-        $(this).css({ "background-color": "#FFFF00", "color": "black  " });
-      } else {
-        $(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
-      }
-    });
-
-    if(condition >= fromID && condition <= toID){
-      $(".next").css({ display: "none" });
-    }
-    
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
-  isFunctionRunning = false;
+	if (isFunctionRunning) {
+		return;
+	}
+	isFunctionRunning = true;
+	let inputNumber: string = $('.search-input').val() as string
+	const screenHeight = $(window).height();
+	const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+	let condition = Math.ceil(999999 / maxRecords) + 1
+	if ((condition - 1) == currentPage) {
+		fromID = (condition - 2) * maxRecords + 1
+	}
+	// if(inputNumber == "") {
+	//   currentFromID = fromID
+	// } 
+	try {
+		$("tbody").empty();
+		loader()
+		currentToID = toID
+		if (toID > 999999) {
+			toID = 999999
+		} else if (currentPage == 1) {
+			fromID = 1
+		}
+		let records = await getRecords(fromID, toID);
+		let count: number = await getRecordCount();
+		let stringCount = count.toLocaleString().replace(/,/g, " ");
+		$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`)
+		for (let i = 0; i < records.length; i++) {
+			$("tbody").append(`<tr class="body-row">`);
+			for (let n = 0; n < records[i].length; n++) {
+				$(".body-row:last-child").append(`<td><span>${records[i][n]}</span></td>`);
+			}
+			$("tbody").append(`</tr>`);
+		}
+
+		let inputNumber: string = $('.search-input').val() as string
+		$("span").each(function () {
+			const lowercasedID: string = $(this).text() as string;
+			if (lowercasedID == inputNumber) {
+				$(this).css({ "background-color": "#FFFF00", "color": "black  " });
+			} else {
+				$(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
+			}
+		});
+
+		if (condition >= fromID && condition <= toID) {
+			$(".next").css({ display: "none" });
+		}
+
+	} catch (error) {
+		console.error(error);
+		throw error;
+	}
+	isFunctionRunning = false;
 }
 
 // The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
 async function pageNumbers(start: number, end: number): Promise<void> {
-  try {
-    $('.pagination').empty();
-    let count: number = await getRecordCount();
-    let stringCount = count.toLocaleString().replace(/,/g, " ");
-    const screenHeight = $(window).height();
-    let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-    let condition = Math.floor(999999 / maxRecords) + 1;
-    if(condition <= end && condition >= start) {
-      if(999999 % maxRecords === 0){
-        end = (condition - 1)
-      } else end = condition
-      $(".next").css({ display: "none" });
-    } else $(".next").css({ display: "block" });
-    if(start < 1) {
-      start = 1
-    }
-    firstPage = start;
-    lastPage = end;
-    for (let i = start; i <= end; i++) {
-      $(".pagination").append(
-        `<a id="${i}" class="pagination-item">${i}</a>`
-      );
-    }
-    if (firstPage === 1 ) {
-      $(".prev").css({ display: "none" });
-    } else $(".prev").css({ display: "block" });
-
-
-    // Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
-    $(".pagination-item").on("click", async function dynamicPagination(): Promise<Array<number>>{
-      $('.search-input').val('')
-      currentPage = parseInt($(this).attr("id") as any);
-      const screenHeight = $(window).height();
-      const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-      let pageNumber: any = $(this).attr("id");
-      let fromID = Math.ceil(pageNumber * maxRecords - (maxRecords - 1));
-      if(difference > 0 && difference < maxRecords){
-        fromID = fromID + difference
-      }
-      if(currentPage === 1) {
-        currentFromID = 1
-      }
-      let toID = fromID + (maxRecords - 1)
-
-      
-      if(fromID > count || toID > count) {
-        toID = count - 1 ;
-        fromID = toID - maxRecords
-        currentFromID = fromID
-      }
-      currentFromID = fromID
-      $(".pagination-item").removeClass("active");
-      $(this).addClass("active");
-      showRecords(fromID, toID);
-      $(".results").empty();
-      $(".results").append(
-        `Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
-      );
-      return [fromID, toID]
-    });
-
-    $(".pagination-item").each(function () {
-      let elementID = $(this).attr('id') as string;
-      let currentPageString: string = currentPage.toString();
-      if (elementID == currentPageString) {
-        $(this).addClass('active')
-      } 
-    });
-    
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
-  isFunctionRunning = false
+	try {
+		$('.pagination').empty();
+		let count: number = await getRecordCount();
+		let stringCount = count.toLocaleString().replace(/,/g, " ");
+		const screenHeight = $(window).height();
+		let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+		let condition = Math.floor(999999 / maxRecords) + 1;
+		if (condition <= end && condition >= start) {
+			if (999999 % maxRecords === 0) {
+				end = (condition - 1)
+			} else end = condition
+			$(".next").css({ display: "none" });
+		} else $(".next").css({ display: "block" });
+		if (start < 1) {
+			start = 1
+		}
+		firstPage = start;
+		lastPage = end;
+		for (let i = start; i <= end; i++) {
+			$(".pagination").append(
+				`<a id="${i}" class="pagination-item">${i}</a>`
+			);
+		}
+		if (firstPage === 1) {
+			$(".prev").css({ display: "none" });
+		} else $(".prev").css({ display: "block" });
+
+
+		// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
+		$(".pagination-item").on("click", async function dynamicPagination(): Promise<Array<number>> {
+			$('.search-input').val('')
+			currentPage = parseInt($(this).attr("id") as any);
+			const screenHeight = $(window).height();
+			const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+			let pageNumber: any = $(this).attr("id");
+			let fromID = Math.ceil(pageNumber * maxRecords - (maxRecords - 1));
+			if (difference > 0 && difference < maxRecords) {
+				fromID = fromID + difference
+			}
+			if (currentPage === 1) {
+				currentFromID = 1
+			}
+			let toID = fromID + (maxRecords - 1)
+
+
+			if (fromID > count || toID > count) {
+				toID = count - 1;
+				fromID = toID - maxRecords
+				currentFromID = fromID
+			}
+			currentFromID = fromID
+			$(".pagination-item").removeClass("active");
+			$(this).addClass("active");
+			showRecords(fromID, toID);
+			$(".results").empty();
+			$(".results").append(
+				`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
+			);
+			return [fromID, toID]
+		});
+
+		$(".pagination-item").each(function () {
+			let elementID = $(this).attr('id') as string;
+			let currentPageString: string = currentPage.toString();
+			if (elementID == currentPageString) {
+				$(this).addClass('active')
+			}
+		});
+
+	} catch (error) {
+		console.error(error);
+		throw error;
+	}
+	isFunctionRunning = false
 }
 
 
-    // Adding a click event to the next button of the pagination.
-    $(".next").on("click", async function () {
-      if (isFunctionRunning) {
-        return;
-      }
-      isFunctionRunning = true
-      firstPage = lastPage + 1;
-      lastPage = firstPage + 9;
-      $(".pagination").empty();
-      await pageNumbers(firstPage, lastPage);
-      isFunctionRunning = false
-    });
-
-    // Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
-    $(".prev").on("click",async function () {
-      if(isFunctionRunning) {
-        return;
-      }
-      isFunctionRunning = true
-      lastPage = firstPage - 1;
-      firstPage = lastPage - 9;
-      $(".pagination").empty();
-      await pageNumbers(firstPage, lastPage);
-      // isFunctionRunning = false
-    });
+// Adding a click event to the next button of the pagination.
+$(".next").on("click", async function () {
+	if (isFunctionRunning) {
+		return;
+	}
+	isFunctionRunning = true
+	firstPage = lastPage + 1;
+	lastPage = firstPage + 9;
+	$(".pagination").empty();
+	await pageNumbers(firstPage, lastPage);
+	isFunctionRunning = false
+});
+
+// Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
+$(".prev").on("click", async function () {
+	if (isFunctionRunning) {
+		return;
+	}
+	isFunctionRunning = true
+	lastPage = firstPage - 1;
+	firstPage = lastPage - 9;
+	$(".pagination").empty();
+	await pageNumbers(firstPage, lastPage);
+	// isFunctionRunning = false
+});
 
 // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
 async function resultsRange(event: any) {
-  if (isFunctionRunning) {
-    return;
-  }
-  isFunctionRunning = true;
-  event.preventDefault();
-  let inputNumber: string = $('.search-input').val() as string
-  let inputNumberInt = parseInt(inputNumber);
-  if(inputNumber !== '') {
-    const screenHeight = $(window).height();
-    const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-    let end:number = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
-    if(end > 1000000) {
-      end = 999999
-      currentToID = end
-    }
-    let start: number = (end - (maxRecords - 1));
-    currentPage = Math.floor(end / maxRecords);
-    if(inputNumberInt < 1000000 && inputNumberInt > 0) {
-      if(end === 1000000){  
-        end = end - 1;
-      } else null
-      $('.results-box').remove()
-      $('.search-container').append(`
+	if (isFunctionRunning) {
+		return;
+	}
+	isFunctionRunning = true;
+	event.preventDefault();
+	let inputNumber: string = $('.search-input').val() as string
+	let inputNumberInt = parseInt(inputNumber);
+	if (inputNumber !== '') {
+		const screenHeight = $(window).height();
+		const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+		let end: number = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
+		if (end > 1000000) {
+			end = 999999
+			currentToID = end
+		}
+		let start: number = (end - (maxRecords - 1));
+		currentPage = Math.floor(end / maxRecords);
+		if (inputNumberInt < 1000000 && inputNumberInt > 0) {
+			if (end === 1000000) {
+				end = end - 1;
+			} else null
+			$('.results-box').remove()
+			$('.search-container').append(`
                                     <div class="results-box">
                                       <p class="results-select">${start} - ${end}</p>
                                     </div>
                                     `)
-      $('.results-box').on('click', resultsSelect)
-      } else {
-        $('.results-box').remove()
-        $('.search-container').append(`
+			$('.results-box').on('click', resultsSelect)
+		} else {
+			$('.results-box').remove()
+			$('.search-container').append(`
                                     <div class="results-box">
                                       <p class="message">Can't search negative values or records larger than 999 999 !!!</p>
                                     </div>
                                     `)
-      }
-    } else {
-      $('.results-box').remove()
-    }
-    
-    isFunctionRunning = false;
-  }
-  $(".search-input").on("keyup", resultsRange);
+		}
+	} else {
+		$('.results-box').remove()
+	}
+
+	isFunctionRunning = false;
+}
+$(".search-input").on("keyup", resultsRange);
 
 // After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
 async function resultsSelect() {
-  if (isFunctionRunning) {
-    return;
-  }
-  isFunctionRunning = true;
-  let idRange = $('.results-select').text();
-  let rangeArray = null
-  rangeArray = idRange.split('-');
-  $('.results-box').remove()
-  let startID = parseInt(rangeArray[0])
-  let endID = parseInt(rangeArray[1])
-  isFunctionRunning = false;
-  const screenHeight = $(window).height();
-  const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-  currentPage = Math.ceil(endID / maxRecords)
-  let pageEnd = Math.ceil(currentPage / 10) * 10;
-  let pageStart = pageEnd - 9
-  
-  if(endID == 999999) {
-    startID = ((currentPage - 1) * maxRecords) + 1;
-    endID = 999999
-    firstPage = pageStart;
-    lastPage = pageEnd
-  }
-  
-  await pageNumbers(pageStart, pageEnd)
-  await showRecords(startID, endID)
+	if (isFunctionRunning) {
+		return;
+	}
+	isFunctionRunning = true;
+	let idRange = $('.results-select').text();
+	let rangeArray = null
+	rangeArray = idRange.split('-');
+	$('.results-box').remove()
+	let startID = parseInt(rangeArray[0])
+	let endID = parseInt(rangeArray[1])
+	isFunctionRunning = false;
+	const screenHeight = $(window).height();
+	const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+	currentPage = Math.ceil(endID / maxRecords)
+	let pageEnd = Math.ceil(currentPage / 10) * 10;
+	let pageStart = pageEnd - 9
+
+	if (endID == 999999) {
+		startID = ((currentPage - 1) * maxRecords) + 1;
+		endID = 999999
+		firstPage = pageStart;
+		lastPage = pageEnd
+	}
+
+	await pageNumbers(pageStart, pageEnd)
+	await showRecords(startID, endID)
 
 }
 
 // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
 async function adjustDisplayedRecords(): Promise<number> {
-  let screenHeight = $(window).height() as number;
-  if(screenHeight < 68) {
-    screenHeight = 68
-  }
-  let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-  
-  let inputNumber = $('.search-input').val() as string
-  let length = inputNumber.length as number;
-  let inputNumberInt = parseInt(inputNumber)
-
-  if(inputNumber == '') {
-    let newCurrentPage = Math.ceil(currentFromID / maxRecords);
-    if(newCurrentPage === 1) {
-      currentFromID = 1
-    } 
-    currentToID = currentFromID + (maxRecords - 1);
-    currentPage = newCurrentPage;
-    let originalID = (Math.floor(maxRecords * currentPage) - (maxRecords - 1))
-    difference = currentFromID - originalID
-  } else {
-    if(length > 0) {
-      let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
-      if(currentToID > 999999) {
-        currentToID = 999999
-      }
-      currentToID = newCurrentPage * maxRecords;
-      currentPage = newCurrentPage
-      currentFromID = (currentPage - 1) * maxRecords + 1;
-    }
-  }
-  let pageEnd = Math.ceil(Math.floor(currentToID / maxRecords) / 10) * 10;
-  let pageStart = pageEnd - 9;
-  firstPage = pageStart;
-  lastPage = pageEnd;
-  $("tbody").empty();
-  await showRecords(currentFromID, currentToID);
-  await pageNumbers(pageStart, pageEnd);
-  return maxRecords;
+	let screenHeight = $(window).height() as number;
+	if (screenHeight < 68) {
+		screenHeight = 68
+	}
+	let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+
+	let inputNumber = $('.search-input').val() as string
+	let length = inputNumber.length as number;
+	let inputNumberInt = parseInt(inputNumber)
+
+	if (inputNumber == '') {
+		let newCurrentPage = Math.ceil(currentFromID / maxRecords);
+		if (newCurrentPage === 1) {
+			currentFromID = 1
+		}
+		currentToID = currentFromID + (maxRecords - 1);
+		currentPage = newCurrentPage;
+		let originalID = (Math.floor(maxRecords * currentPage) - (maxRecords - 1))
+		difference = currentFromID - originalID
+	} else {
+		if (length > 0) {
+			let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
+			if (currentToID > 999999) {
+				currentToID = 999999
+			}
+			currentToID = newCurrentPage * maxRecords;
+			currentPage = newCurrentPage
+			currentFromID = (currentPage - 1) * maxRecords + 1;
+		}
+	}
+	let pageEnd = Math.ceil(Math.floor(currentToID / maxRecords) / 10) * 10;
+	let pageStart = pageEnd - 9;
+	firstPage = pageStart;
+	lastPage = pageEnd;
+	$("tbody").empty();
+	await showRecords(currentFromID, currentToID);
+	await pageNumbers(pageStart, pageEnd);
+	return maxRecords;
 }
 
 let resizeTimer: ReturnType<typeof setTimeout>;
 
 function resize() {
-clearTimeout(resizeTimer);
-  resizeTimer = setTimeout(async () => {
-      const maxRecords: number = await adjustDisplayedRecords();
-  }, 800);
+	clearTimeout(resizeTimer);
+	resizeTimer = setTimeout(async () => {
+		const maxRecords: number = await adjustDisplayedRecords();
+	}, 800);
 }
 
 // Just a loader to display when the table is empty and records is being fetched. 
 function loader() {
-  let content = $('tbody').text();
-  if(content == '') {
-    $('.results').append('<div class="loader"></div>')
-  } else {
-    $('.loader').css({'display': 'none'})
-  }
+	let content = $('tbody').text();
+	if (content == '') {
+		$('.results').append('<div class="loader"></div>')
+	} else {
+		$('.loader').css({ 'display': 'none' })
+	}
 }
 
 
 window.onload = () => {
-showColumns();
-// pageNumbers(1, 10);
-adjustDisplayedRecords();
-$(window).on('resize', resize);
+	showColumns();
+	// pageNumbers(1, 10);
+	adjustDisplayedRecords();
+	$(window).on('resize', resize);
 };
-
diff --git a/package-lock.json b/package-lock.json
index f5a47be3..25290ab4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,9 +5,9 @@
   "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==",
+      "version": "3.5.17",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.17.tgz",
+      "integrity": "sha512-U40tNEAGSTZ7R1OC6kGkD7f4TKW5DoVx6jd9kTB9mo5truFMi1m9Yohnw9kl1WpTPvDdj7zAw38LfCHSqnk5kA==",
       "dev": true,
       "requires": {
         "@types/sizzle": "*"
diff --git a/package.json b/package.json
index c49b9901..8e32a541 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "dependencies": {},
   "devDependencies": {
-    "@types/jquery": "^3.5.16",
+    "@types/jquery": "^3.5.17",
     "typescript": "^3.9.2"
   },
   "scripts": {
diff --git a/tsconfig.json b/tsconfig.json
index dbf43618..09ff608c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,7 @@
 			"dom",
 			"es2016"
 		],
+		"types": ["jquery"],
 	},
 	"include": [
 		"./**/*.ts"

From db01e42d0e77286cace13d20d1b78b62926cfb9f Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Mon, 28 Aug 2023 16:55:04 +0200
Subject: [PATCH 14/40] Almost done with the requested changes

---
 app.ts | 188 +++++++++++++++++++++++++++++----------------------------
 1 file changed, 96 insertions(+), 92 deletions(-)

diff --git a/app.ts b/app.ts
index be2641c4..99451324 100644
--- a/app.ts
+++ b/app.ts
@@ -1,4 +1,4 @@
-let api: string = "http://localhost:2050/";
+const api: string = "http://localhost:2050/";
 let isFunctionRunning = false;
 let currentPage = 1;
 let firstPage = 1
@@ -7,29 +7,27 @@ let currentFromID = 1;
 let currentToID = 20;
 let difference = 0
 
-
 // This function  will handle retrieving the records from the api
-async function getRecords(fromID: number, toID: number): Promise<Array<Array<string>>> {
+async function getRecords(fromID: number, toID: number): Promise<string[][]> {
 	try {
-		const data = await fetch(`${api}records?from=${fromID}&to=${toID}`);
-		const records: Array<Array<string>> = await data.json();
+		const response = await fetch(`${api}records?from=${fromID}&to=${toID}`);
+		const data = await response.text();
+		const records: string[][] = JSON.parse(data)
 		return records;
-
 	} catch (error) {
-		console.error(error);
 		throw error;
 	}
 }
 
 // This function  will handle retrieving the columns from the api
-async function getColumns(): Promise<Array<string>> {
+async function getColumns(): Promise<string[]> {
 	try {
-		const data = await fetch(`${api}columns`);
-		const columns: Array<string> = await data.json();
+		const response = await fetch(`${api}columns`);
+		const data = await response.text()
+		const columns: string[] = JSON.parse(data);
 		return columns;
 
 	} catch (error) {
-		console.error(error);
 		throw error;
 	}
 }
@@ -37,12 +35,12 @@ async function getColumns(): Promise<Array<string>> {
 // This function  will handle retrieving the record count from the api
 async function getRecordCount(): Promise<number> {
 	try {
-		const data = await fetch(`${api}recordCount`);
-		const count: number = await data.json();
+		const response = await fetch(`${api}recordCount`);
+		const data = await response.text();
+		const count: number = JSON.parse(data);
 		return count;
 
 	} catch (error) {
-		console.error(error);
 		throw error;
 	}
 }
@@ -57,7 +55,6 @@ async function showColumns(): Promise<void> {
 		}
 
 	} catch (error) {
-		console.error(error);
 		throw error;
 	}
 }
@@ -67,28 +64,24 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 	if (isFunctionRunning) {
 		return;
 	}
-	isFunctionRunning = true;
-	let inputNumber: string = $('.search-input').val() as string
-	const screenHeight = $(window).height();
-	const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-	let condition = Math.ceil(999999 / maxRecords) + 1
-	if ((condition - 1) == currentPage) {
-		fromID = (condition - 2) * maxRecords + 1
-	}
-	// if(inputNumber == "") {
-	//   currentFromID = fromID
-	// } 
 	try {
+		let count: number = (await getRecordCount()) - 1;
+		isFunctionRunning = true;
+		let inputNumber: string = input();
+		const maxRecords: number = recordsPerPage();
+		let condition = Math.ceil(count / maxRecords) + 1
+		if ((condition - 1) == currentPage) {
+			fromID = (condition - 2) * maxRecords + 1
+		}
 		$("tbody").empty();
 		loader()
 		currentToID = toID
-		if (toID > 999999) {
-			toID = 999999
+		if (toID > count) {
+			toID = count
 		} else if (currentPage == 1) {
 			fromID = 1
 		}
 		let records = await getRecords(fromID, toID);
-		let count: number = await getRecordCount();
 		let stringCount = count.toLocaleString().replace(/,/g, " ");
 		$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`)
 		for (let i = 0; i < records.length; i++) {
@@ -99,7 +92,6 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 			$("tbody").append(`</tr>`);
 		}
 
-		let inputNumber: string = $('.search-input').val() as string
 		$("span").each(function () {
 			const lowercasedID: string = $(this).text() as string;
 			if (lowercasedID == inputNumber) {
@@ -114,7 +106,6 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 		}
 
 	} catch (error) {
-		console.error(error);
 		throw error;
 	}
 	isFunctionRunning = false;
@@ -124,17 +115,18 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 async function pageNumbers(start: number, end: number): Promise<void> {
 	try {
 		$('.pagination').empty();
-		let count: number = await getRecordCount();
+		let count: number = (await getRecordCount()) - 1;
 		let stringCount = count.toLocaleString().replace(/,/g, " ");
-		const screenHeight = $(window).height();
-		let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-		let condition = Math.floor(999999 / maxRecords) + 1;
+		let maxRecords = recordsPerPage();
+		let condition = Math.floor(count / maxRecords) + 1;
 		if (condition <= end && condition >= start) {
-			if (999999 % maxRecords === 0) {
+			if (count % maxRecords === 0) {
 				end = (condition - 1)
 			} else end = condition
 			$(".next").css({ display: "none" });
-		} else $(".next").css({ display: "block" });
+		} else {
+			$(".next").css({ display: "block" });
+		}
 		if (start < 1) {
 			start = 1
 		}
@@ -147,17 +139,16 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 		}
 		if (firstPage === 1) {
 			$(".prev").css({ display: "none" });
-		} else $(".prev").css({ display: "block" });
-
+		} else {
+			$(".prev").css({ display: "block" });
+		}
 
 		// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
 		$(".pagination-item").on("click", async function dynamicPagination(): Promise<Array<number>> {
 			$('.search-input').val('')
 			currentPage = parseInt($(this).attr("id") as any);
-			const screenHeight = $(window).height();
-			const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-			let pageNumber: any = $(this).attr("id");
-			let fromID = Math.ceil(pageNumber * maxRecords - (maxRecords - 1));
+			const maxRecords = recordsPerPage();
+			let fromID = Math.ceil(currentPage * maxRecords - (maxRecords - 1));
 			if (difference > 0 && difference < maxRecords) {
 				fromID = fromID + difference
 			}
@@ -167,8 +158,8 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 			let toID = fromID + (maxRecords - 1)
 
 
-			if (fromID > count || toID > count) {
-				toID = count - 1;
+			if (fromID > count + 1 || toID > count + 1) {
+				toID = count;
 				fromID = toID - maxRecords
 				currentFromID = fromID
 			}
@@ -192,7 +183,6 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 		});
 
 	} catch (error) {
-		console.error(error);
 		throw error;
 	}
 	isFunctionRunning = false
@@ -222,7 +212,7 @@ $(".prev").on("click", async function () {
 	firstPage = lastPage - 9;
 	$(".pagination").empty();
 	await pageNumbers(firstPage, lastPage);
-	// isFunctionRunning = false
+	isFunctionRunning = false
 });
 
 // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
@@ -232,14 +222,14 @@ async function resultsRange(event: any) {
 	}
 	isFunctionRunning = true;
 	event.preventDefault();
-	let inputNumber: string = $('.search-input').val() as string
+	let count = await getRecordCount() - 1;
+	let inputNumber: string = input();
 	let inputNumberInt = parseInt(inputNumber);
 	if (inputNumber !== '') {
-		const screenHeight = $(window).height();
-		const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+		const maxRecords = recordsPerPage();
 		let end: number = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
-		if (end > 1000000) {
-			end = 999999
+		if (end > (count + 1)) {
+			end = count
 			currentToID = end
 		}
 		let start: number = (end - (maxRecords - 1));
@@ -277,71 +267,76 @@ async function resultsSelect() {
 		return;
 	}
 	isFunctionRunning = true;
+	let count: number = await getRecordCount() - 1;
 	let idRange = $('.results-select').text();
 	let rangeArray = null
 	rangeArray = idRange.split('-');
 	$('.results-box').remove()
 	let startID = parseInt(rangeArray[0])
 	let endID = parseInt(rangeArray[1])
-	isFunctionRunning = false;
-	const screenHeight = $(window).height();
-	const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+	let maxRecords = recordsPerPage();
 	currentPage = Math.ceil(endID / maxRecords)
 	let pageEnd = Math.ceil(currentPage / 10) * 10;
 	let pageStart = pageEnd - 9
 
-	if (endID == 999999) {
+	if (endID == count) {
 		startID = ((currentPage - 1) * maxRecords) + 1;
-		endID = 999999
+		endID = count
 		firstPage = pageStart;
 		lastPage = pageEnd
 	}
 
 	await pageNumbers(pageStart, pageEnd)
 	await showRecords(startID, endID)
+	isFunctionRunning = false;
 
 }
 
 // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
 async function adjustDisplayedRecords(): Promise<number> {
-	let screenHeight = $(window).height() as number;
-	if (screenHeight < 68) {
-		screenHeight = 68
-	}
-	let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+	try {
+		let screenHeight = $(window).height() as number;
+		if (screenHeight < 68) {
+			screenHeight = 68
+		}
+		let count: number = await getRecordCount() - 1;
+		let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
 
-	let inputNumber = $('.search-input').val() as string
-	let length = inputNumber.length as number;
-	let inputNumberInt = parseInt(inputNumber)
+		let inputNumber = input();
+		let length = inputNumber.length as number;
+		let inputNumberInt = parseInt(inputNumber)
 
-	if (inputNumber == '') {
-		let newCurrentPage = Math.ceil(currentFromID / maxRecords);
-		if (newCurrentPage === 1) {
-			currentFromID = 1
-		}
-		currentToID = currentFromID + (maxRecords - 1);
-		currentPage = newCurrentPage;
-		let originalID = (Math.floor(maxRecords * currentPage) - (maxRecords - 1))
-		difference = currentFromID - originalID
-	} else {
-		if (length > 0) {
-			let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
-			if (currentToID > 999999) {
-				currentToID = 999999
+		if (inputNumber == '') {
+			let newCurrentPage = Math.ceil(currentFromID / maxRecords);
+			if (newCurrentPage === 1) {
+				currentFromID = 1
+			}
+			currentToID = currentFromID + (maxRecords - 1);
+			currentPage = newCurrentPage;
+			let originalID = (Math.floor(maxRecords * currentPage) - (maxRecords - 1))
+			difference = currentFromID - originalID
+		} else {
+			if (length > 0) {
+				let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
+				if (currentToID > count) {
+					currentToID = count
+				}
+				currentToID = newCurrentPage * maxRecords;
+				currentPage = newCurrentPage
+				currentFromID = (currentPage - 1) * maxRecords + 1;
 			}
-			currentToID = newCurrentPage * maxRecords;
-			currentPage = newCurrentPage
-			currentFromID = (currentPage - 1) * maxRecords + 1;
 		}
+		let pageEnd = Math.ceil(Math.floor(currentToID / maxRecords) / 10) * 10;
+		let pageStart = pageEnd - 9;
+		firstPage = pageStart;
+		lastPage = pageEnd;
+		$("tbody").empty();
+		await showRecords(currentFromID, currentToID);
+		await pageNumbers(pageStart, pageEnd);
+		return maxRecords;
+	} catch (error) {
+		throw error;
 	}
-	let pageEnd = Math.ceil(Math.floor(currentToID / maxRecords) / 10) * 10;
-	let pageStart = pageEnd - 9;
-	firstPage = pageStart;
-	lastPage = pageEnd;
-	$("tbody").empty();
-	await showRecords(currentFromID, currentToID);
-	await pageNumbers(pageStart, pageEnd);
-	return maxRecords;
 }
 
 let resizeTimer: ReturnType<typeof setTimeout>;
@@ -349,7 +344,7 @@ let resizeTimer: ReturnType<typeof setTimeout>;
 function resize() {
 	clearTimeout(resizeTimer);
 	resizeTimer = setTimeout(async () => {
-		const maxRecords: number = await adjustDisplayedRecords();
+		await adjustDisplayedRecords();
 	}, 800);
 }
 
@@ -363,10 +358,19 @@ function loader() {
 	}
 }
 
+function recordsPerPage(): number {
+	const screenHeight = $(window).height();
+	const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+	return maxRecords;
+}
+
+function input(): string {
+	let inputNumber: string = $('.search-input').val() as string;
+	return inputNumber; 99
+}
 
 window.onload = () => {
 	showColumns();
-	// pageNumbers(1, 10);
 	adjustDisplayedRecords();
 	$(window).on('resize', resize);
 };

From 2764976a9da524fe64a39fd66d1318a2a1573f30 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Tue, 29 Aug 2023 16:56:39 +0200
Subject: [PATCH 15/40] Restructured my global variables and changed it to
 properties.

---
 app.ts     | 210 ++++++++++++++++++++++++++++-------------------------
 index.html |  18 ++---
 2 files changed, 119 insertions(+), 109 deletions(-)

diff --git a/app.ts b/app.ts
index 99451324..1c9ff6e0 100644
--- a/app.ts
+++ b/app.ts
@@ -1,18 +1,25 @@
-const api: string = "http://localhost:2050/";
+const globals = globalInitializer();
 let isFunctionRunning = false;
-let currentPage = 1;
-let firstPage = 1
-let lastPage = firstPage + 9
-let currentFromID = 1;
-let currentToID = 20;
-let difference = 0
+
+// The following would handle all the variable properties that is being changed a lot
+function globalInitializer() {
+	return {
+		api: "http://localhost:2050/",
+		currentPage: 1,
+		firstPage: 1,
+		lastPage: 10,
+		currentFromID: 1,
+		currentToID: 20,
+		difference: 0,
+	}
+}
 
 // This function  will handle retrieving the records from the api
 async function getRecords(fromID: number, toID: number): Promise<string[][]> {
 	try {
-		const response = await fetch(`${api}records?from=${fromID}&to=${toID}`);
+		const response = await fetch(`${globals.api}records?from=${fromID}&to=${toID}`);
 		const data = await response.text();
-		const records: string[][] = JSON.parse(data)
+		const records = JSON.parse(data)
 		return records;
 	} catch (error) {
 		throw error;
@@ -22,11 +29,10 @@ async function getRecords(fromID: number, toID: number): Promise<string[][]> {
 // This function  will handle retrieving the columns from the api
 async function getColumns(): Promise<string[]> {
 	try {
-		const response = await fetch(`${api}columns`);
+		const response = await fetch(`${globals.api}columns`);
 		const data = await response.text()
-		const columns: string[] = JSON.parse(data);
+		const columns = JSON.parse(data);
 		return columns;
-
 	} catch (error) {
 		throw error;
 	}
@@ -35,11 +41,10 @@ async function getColumns(): Promise<string[]> {
 // This function  will handle retrieving the record count from the api
 async function getRecordCount(): Promise<number> {
 	try {
-		const response = await fetch(`${api}recordCount`);
+		const response = await fetch(`${globals.api}recordCount`);
 		const data = await response.text();
-		const count: number = JSON.parse(data);
+		const count = JSON.parse(data);
 		return count;
-
 	} catch (error) {
 		throw error;
 	}
@@ -53,7 +58,6 @@ async function showColumns(): Promise<void> {
 		for (let i = 0; i < columns.length; i++) {
 			$("thead").append(`<th>${columns[i]}</th>`);
 		}
-
 	} catch (error) {
 		throw error;
 	}
@@ -64,21 +68,21 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 	if (isFunctionRunning) {
 		return;
 	}
+	isFunctionRunning = true;
 	try {
-		let count: number = (await getRecordCount()) - 1;
-		isFunctionRunning = true;
-		let inputNumber: string = input();
-		const maxRecords: number = recordsPerPage();
+		let count = (await getRecordCount()) - 1;
+		let inputNumber = input();
+		const maxRecords = recordsPerPage();
 		let condition = Math.ceil(count / maxRecords) + 1
-		if ((condition - 1) == currentPage) {
+		if ((condition - 1) == globals.currentPage) {
 			fromID = (condition - 2) * maxRecords + 1
 		}
 		$("tbody").empty();
 		loader()
-		currentToID = toID
+		globals.currentToID = toID
 		if (toID > count) {
 			toID = count
-		} else if (currentPage == 1) {
+		} else if (globals.currentPage == 1) {
 			fromID = 1
 		}
 		let records = await getRecords(fromID, toID);
@@ -93,7 +97,7 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 		}
 
 		$("span").each(function () {
-			const lowercasedID: string = $(this).text() as string;
+			const lowercasedID = $(this).text();
 			if (lowercasedID == inputNumber) {
 				$(this).css({ "background-color": "#FFFF00", "color": "black  " });
 			} else {
@@ -104,7 +108,6 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 		if (condition >= fromID && condition <= toID) {
 			$(".next").css({ display: "none" });
 		}
-
 	} catch (error) {
 		throw error;
 	}
@@ -115,12 +118,12 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 async function pageNumbers(start: number, end: number): Promise<void> {
 	try {
 		$('.pagination').empty();
-		let count: number = (await getRecordCount()) - 1;
+		let count = (await getRecordCount()) - 1;
 		let stringCount = count.toLocaleString().replace(/,/g, " ");
 		let maxRecords = recordsPerPage();
 		let condition = Math.floor(count / maxRecords) + 1;
 		if (condition <= end && condition >= start) {
-			if (count % maxRecords === 0) {
+			if (999999 % maxRecords === 0) {
 				end = (condition - 1)
 			} else end = condition
 			$(".next").css({ display: "none" });
@@ -130,30 +133,34 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 		if (start < 1) {
 			start = 1
 		}
-		firstPage = start;
-		lastPage = end;
+		globals.firstPage = start;
+		globals.lastPage = end
 		for (let i = start; i <= end; i++) {
 			$(".pagination").append(
 				`<a id="${i}" class="pagination-item">${i}</a>`
 			);
 		}
-		if (firstPage === 1) {
+		if (globals.firstPage === 1) {
 			$(".prev").css({ display: "none" });
 		} else {
 			$(".prev").css({ display: "block" });
 		}
 
 		// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
-		$(".pagination-item").on("click", async function dynamicPagination(): Promise<Array<number>> {
+		$(".pagination-item").on("click", async function dynamicPagination() {
+			if (isFunctionRunning) {
+				return;
+			}
+			isFunctionRunning = true;
 			$('.search-input').val('')
-			currentPage = parseInt($(this).attr("id") as any);
+			globals.currentPage = parseInt($(this).attr("id") as any);
 			const maxRecords = recordsPerPage();
-			let fromID = Math.ceil(currentPage * maxRecords - (maxRecords - 1));
-			if (difference > 0 && difference < maxRecords) {
-				fromID = fromID + difference
+			let fromID = Math.ceil(globals.currentPage * maxRecords - (maxRecords - 1));
+			if (globals.difference > 0 && globals.difference < maxRecords) {
+				fromID = fromID + globals.difference
 			}
-			if (currentPage === 1) {
-				currentFromID = 1
+			if (globals.currentPage === 1) {
+				globals.currentFromID = 1
 			}
 			let toID = fromID + (maxRecords - 1)
 
@@ -161,12 +168,13 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 			if (fromID > count + 1 || toID > count + 1) {
 				toID = count;
 				fromID = toID - maxRecords
-				currentFromID = fromID
+				globals.currentFromID = fromID
 			}
-			currentFromID = fromID
+			globals.currentFromID = fromID
 			$(".pagination-item").removeClass("active");
 			$(this).addClass("active");
-			showRecords(fromID, toID);
+			isFunctionRunning = false
+			await showRecords(fromID, toID);
 			$(".results").empty();
 			$(".results").append(
 				`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
@@ -176,7 +184,7 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 
 		$(".pagination-item").each(function () {
 			let elementID = $(this).attr('id') as string;
-			let currentPageString: string = currentPage.toString();
+			let currentPageString = globals.currentPage.toString();
 			if (elementID == currentPageString) {
 				$(this).addClass('active')
 			}
@@ -186,34 +194,33 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 		throw error;
 	}
 	isFunctionRunning = false
-}
-
 
-// Adding a click event to the next button of the pagination.
-$(".next").on("click", async function () {
-	if (isFunctionRunning) {
-		return;
-	}
-	isFunctionRunning = true
-	firstPage = lastPage + 1;
-	lastPage = firstPage + 9;
-	$(".pagination").empty();
-	await pageNumbers(firstPage, lastPage);
-	isFunctionRunning = false
-});
-
-// Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
-$(".prev").on("click", async function () {
-	if (isFunctionRunning) {
-		return;
-	}
-	isFunctionRunning = true
-	lastPage = firstPage - 1;
-	firstPage = lastPage - 9;
-	$(".pagination").empty();
-	await pageNumbers(firstPage, lastPage);
-	isFunctionRunning = false
-});
+	// Adding a click event to the next button of the pagination.
+	$(".next").on("click", async function () {
+		if (isFunctionRunning) {
+			return;
+		}
+		isFunctionRunning = true
+		globals.firstPage = globals.lastPage + 1;
+		globals.lastPage = globals.firstPage + 9;
+		$(".pagination").empty();
+		await pageNumbers(globals.firstPage, globals.lastPage);
+		isFunctionRunning = false
+	});
+
+	// Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
+	$(".prev").on("click", async function () {
+		if (isFunctionRunning) {
+			return;
+		}
+		isFunctionRunning = true
+		globals.lastPage = globals.firstPage - 1;
+		globals.firstPage = globals.lastPage - 9;
+		$(".pagination").empty();
+		await pageNumbers(globals.firstPage, globals.lastPage);
+		isFunctionRunning = false
+	});
+}
 
 // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
 async function resultsRange(event: any) {
@@ -223,17 +230,17 @@ async function resultsRange(event: any) {
 	isFunctionRunning = true;
 	event.preventDefault();
 	let count = await getRecordCount() - 1;
-	let inputNumber: string = input();
+	let inputNumber = input();
 	let inputNumberInt = parseInt(inputNumber);
 	if (inputNumber !== '') {
 		const maxRecords = recordsPerPage();
-		let end: number = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
+		let end = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
 		if (end > (count + 1)) {
 			end = count
-			currentToID = end
+			globals.currentToID = end
 		}
-		let start: number = (end - (maxRecords - 1));
-		currentPage = Math.floor(end / maxRecords);
+		let start = (end - (maxRecords - 1));
+		globals.currentPage = Math.floor(end / maxRecords);
 		if (inputNumberInt < 1000000 && inputNumberInt > 0) {
 			if (end === 1000000) {
 				end = end - 1;
@@ -259,7 +266,6 @@ async function resultsRange(event: any) {
 
 	isFunctionRunning = false;
 }
-$(".search-input").on("keyup", resultsRange);
 
 // After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
 async function resultsSelect() {
@@ -267,7 +273,7 @@ async function resultsSelect() {
 		return;
 	}
 	isFunctionRunning = true;
-	let count: number = await getRecordCount() - 1;
+	let count = await getRecordCount() - 1;
 	let idRange = $('.results-select').text();
 	let rangeArray = null
 	rangeArray = idRange.split('-');
@@ -275,15 +281,15 @@ async function resultsSelect() {
 	let startID = parseInt(rangeArray[0])
 	let endID = parseInt(rangeArray[1])
 	let maxRecords = recordsPerPage();
-	currentPage = Math.ceil(endID / maxRecords)
-	let pageEnd = Math.ceil(currentPage / 10) * 10;
+	globals.currentPage = Math.ceil(endID / maxRecords)
+	let pageEnd = Math.ceil(globals.currentPage / 10) * 10;
 	let pageStart = pageEnd - 9
 
 	if (endID == count) {
-		startID = ((currentPage - 1) * maxRecords) + 1;
+		startID = ((globals.currentPage - 1) * maxRecords) + 1;
 		endID = count
-		firstPage = pageStart;
-		lastPage = pageEnd
+		globals.firstPage = pageStart;
+		globals.lastPage = pageEnd
 	}
 
 	await pageNumbers(pageStart, pageEnd)
@@ -299,7 +305,7 @@ async function adjustDisplayedRecords(): Promise<number> {
 		if (screenHeight < 68) {
 			screenHeight = 68
 		}
-		let count: number = await getRecordCount() - 1;
+		let count = await getRecordCount() - 1;
 		let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
 
 		let inputNumber = input();
@@ -307,31 +313,31 @@ async function adjustDisplayedRecords(): Promise<number> {
 		let inputNumberInt = parseInt(inputNumber)
 
 		if (inputNumber == '') {
-			let newCurrentPage = Math.ceil(currentFromID / maxRecords);
+			let newCurrentPage = Math.ceil(globals.currentFromID / maxRecords);
 			if (newCurrentPage === 1) {
-				currentFromID = 1
+				globals.currentFromID = 1
 			}
-			currentToID = currentFromID + (maxRecords - 1);
-			currentPage = newCurrentPage;
-			let originalID = (Math.floor(maxRecords * currentPage) - (maxRecords - 1))
-			difference = currentFromID - originalID
+			globals.currentToID = globals.currentFromID + (maxRecords - 1);
+			globals.currentPage = newCurrentPage;
+			let originalID = (Math.floor(maxRecords * globals.currentPage) - (maxRecords - 1))
+			globals.difference = globals.currentFromID - originalID
 		} else {
 			if (length > 0) {
 				let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
-				if (currentToID > count) {
-					currentToID = count
+				if (globals.currentToID > count) {
+					globals.currentToID = count
 				}
-				currentToID = newCurrentPage * maxRecords;
-				currentPage = newCurrentPage
-				currentFromID = (currentPage - 1) * maxRecords + 1;
+				globals.currentToID = newCurrentPage * maxRecords;
+				globals.currentPage = newCurrentPage
+				globals.currentFromID = (globals.currentPage - 1) * maxRecords + 1;
 			}
 		}
-		let pageEnd = Math.ceil(Math.floor(currentToID / maxRecords) / 10) * 10;
+		let pageEnd = Math.ceil(Math.floor(globals.currentToID / maxRecords) / 10) * 10;
 		let pageStart = pageEnd - 9;
-		firstPage = pageStart;
-		lastPage = pageEnd;
+		globals.firstPage = pageStart;
+		globals.lastPage = pageEnd;
 		$("tbody").empty();
-		await showRecords(currentFromID, currentToID);
+		await showRecords(globals.currentFromID, globals.currentToID);
 		await pageNumbers(pageStart, pageEnd);
 		return maxRecords;
 	} catch (error) {
@@ -339,13 +345,13 @@ async function adjustDisplayedRecords(): Promise<number> {
 	}
 }
 
+// Calls the function to resize with a timeout added for precision
 let resizeTimer: ReturnType<typeof setTimeout>;
-
 function resize() {
 	clearTimeout(resizeTimer);
 	resizeTimer = setTimeout(async () => {
 		await adjustDisplayedRecords();
-	}, 800);
+	}, 250);
 }
 
 // Just a loader to display when the table is empty and records is being fetched. 
@@ -358,19 +364,23 @@ function loader() {
 	}
 }
 
+// Calculate how many records should be displayed on the screen height
 function recordsPerPage(): number {
 	const screenHeight = $(window).height();
 	const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
 	return maxRecords;
 }
 
+// Retrieve the input value while a value is in the search bar
 function input(): string {
-	let inputNumber: string = $('.search-input').val() as string;
-	return inputNumber; 99
+	let inputNumber = $('.search-input').val() as string;
+	return inputNumber;
 }
 
+// First function that runs when the  web app is started
 window.onload = () => {
 	showColumns();
+	$(".search-input").on("keyup", resultsRange);
 	adjustDisplayedRecords();
 	$(window).on('resize', resize);
 };
diff --git a/index.html b/index.html
index 2b075541..09633ced 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>JS Onboard Project</title>
+	<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>
@@ -10,7 +10,7 @@
     <div class="heading">
         <p class="results"></p>
         <div class="search-container" id="search-container">
-            <input class="search-input" type="number" placeholder="Search a record by ID" min="1" max="999999" required >            
+			<input class="search-input" type="number" placeholder="Search a record by ID" min="1" max="999999" required >            
         </div>
     </div>
     <div class="table-container">
@@ -18,19 +18,19 @@
             <thead>
             </thead>
             <tbody>
-                <tr class="head-row">
+				<tr class="head-row">
             </tbody>
-            </tr>
-        </table>
+		</tr>
+	</table>
     </div>
     <div class="wrapper">
-        <a class="prev">&laquo;</a>
+		<a class="prev">&laquo;</a>
         <div class="pagination">
-
-        </div>
+			
+		</div>
         <a class="next">&raquo;</a>
     </div>
-<script src="./app.js"></script>
+	<script src="./app.js"></script>
 </body>
 
 </html>

From df647ea3a13ef972b3554a01ea31e6e209ac5c42 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Wed, 30 Aug 2023 08:40:38 +0200
Subject: [PATCH 16/40] Added semicolons

---
 app.ts | 173 +++++++++++++++++++++++++++++----------------------------
 1 file changed, 88 insertions(+), 85 deletions(-)

diff --git a/app.ts b/app.ts
index 1c9ff6e0..c848c451 100644
--- a/app.ts
+++ b/app.ts
@@ -11,32 +11,33 @@ function globalInitializer() {
 		currentFromID: 1,
 		currentToID: 20,
 		difference: 0,
-	}
-}
+	};
+};
+
 
 // This function  will handle retrieving the records from the api
 async function getRecords(fromID: number, toID: number): Promise<string[][]> {
 	try {
 		const response = await fetch(`${globals.api}records?from=${fromID}&to=${toID}`);
 		const data = await response.text();
-		const records = JSON.parse(data)
+		const records = JSON.parse(data);
 		return records;
 	} catch (error) {
 		throw error;
-	}
+	};
 }
 
 // This function  will handle retrieving the columns from the api
 async function getColumns(): Promise<string[]> {
 	try {
 		const response = await fetch(`${globals.api}columns`);
-		const data = await response.text()
+		const data = await response.text();
 		const columns = JSON.parse(data);
 		return columns;
 	} catch (error) {
 		throw error;
-	}
-}
+	};
+};
 
 // This function  will handle retrieving the record count from the api
 async function getRecordCount(): Promise<number> {
@@ -47,8 +48,9 @@ async function getRecordCount(): Promise<number> {
 		return count;
 	} catch (error) {
 		throw error;
+		;
 	}
-}
+};
 
 // This function will loop through and display the appropriate columns in the correct order.
 async function showColumns(): Promise<void> {
@@ -60,8 +62,8 @@ async function showColumns(): Promise<void> {
 		}
 	} catch (error) {
 		throw error;
-	}
-}
+	};
+};
 
 // This function will loop through and display the records on the table.
 async function showRecords(fromID: number, toID: number): Promise<void> {
@@ -75,19 +77,19 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 		const maxRecords = recordsPerPage();
 		let condition = Math.ceil(count / maxRecords) + 1
 		if ((condition - 1) == globals.currentPage) {
-			fromID = (condition - 2) * maxRecords + 1
+			fromID = (condition - 2) * maxRecords + 1;
 		}
 		$("tbody").empty();
-		loader()
-		globals.currentToID = toID
+		loader();
+		globals.currentToID = toID;
 		if (toID > count) {
-			toID = count
+			toID = count;
 		} else if (globals.currentPage == 1) {
-			fromID = 1
+			fromID = 1;
 		}
 		let records = await getRecords(fromID, toID);
 		let stringCount = count.toLocaleString().replace(/,/g, " ");
-		$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`)
+		$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`);
 		for (let i = 0; i < records.length; i++) {
 			$("tbody").append(`<tr class="body-row">`);
 			for (let n = 0; n < records[i].length; n++) {
@@ -102,7 +104,7 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 				$(this).css({ "background-color": "#FFFF00", "color": "black  " });
 			} else {
 				$(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
-			}
+			};
 		});
 
 		if (condition >= fromID && condition <= toID) {
@@ -124,17 +126,19 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 		let condition = Math.floor(count / maxRecords) + 1;
 		if (condition <= end && condition >= start) {
 			if (999999 % maxRecords === 0) {
-				end = (condition - 1)
-			} else end = condition
+				end = (condition - 1);
+			} else {
+				end = condition;
+			};
 			$(".next").css({ display: "none" });
 		} else {
 			$(".next").css({ display: "block" });
 		}
 		if (start < 1) {
-			start = 1
-		}
+			start = 1;
+		};
 		globals.firstPage = start;
-		globals.lastPage = end
+		globals.lastPage = end;
 		for (let i = start; i <= end; i++) {
 			$(".pagination").append(
 				`<a id="${i}" class="pagination-item">${i}</a>`
@@ -144,68 +148,68 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 			$(".prev").css({ display: "none" });
 		} else {
 			$(".prev").css({ display: "block" });
-		}
+		};
 
 		// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
 		$(".pagination-item").on("click", async function dynamicPagination() {
 			if (isFunctionRunning) {
 				return;
-			}
+			};
 			isFunctionRunning = true;
-			$('.search-input').val('')
+			$('.search-input').val('');
 			globals.currentPage = parseInt($(this).attr("id") as any);
 			const maxRecords = recordsPerPage();
 			let fromID = Math.ceil(globals.currentPage * maxRecords - (maxRecords - 1));
 			if (globals.difference > 0 && globals.difference < maxRecords) {
-				fromID = fromID + globals.difference
-			}
+				fromID = fromID + globals.difference;
+			};
 			if (globals.currentPage === 1) {
-				globals.currentFromID = 1
-			}
-			let toID = fromID + (maxRecords - 1)
+				globals.currentFromID = 1;
+			};
+			let toID = fromID + (maxRecords - 1);
 
 
 			if (fromID > count + 1 || toID > count + 1) {
 				toID = count;
-				fromID = toID - maxRecords
-				globals.currentFromID = fromID
-			}
-			globals.currentFromID = fromID
+				fromID = toID - maxRecords;
+				globals.currentFromID = fromID;
+			};
+			globals.currentFromID = fromID;
 			$(".pagination-item").removeClass("active");
 			$(this).addClass("active");
-			isFunctionRunning = false
+			isFunctionRunning = false;
 			await showRecords(fromID, toID);
 			$(".results").empty();
 			$(".results").append(
 				`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
 			);
-			return [fromID, toID]
+			return [fromID, toID];
 		});
 
 		$(".pagination-item").each(function () {
 			let elementID = $(this).attr('id') as string;
 			let currentPageString = globals.currentPage.toString();
 			if (elementID == currentPageString) {
-				$(this).addClass('active')
-			}
+				$(this).addClass('active');
+			};
 		});
 
 	} catch (error) {
 		throw error;
 	}
-	isFunctionRunning = false
+	isFunctionRunning = false;
 
 	// Adding a click event to the next button of the pagination.
 	$(".next").on("click", async function () {
 		if (isFunctionRunning) {
 			return;
 		}
-		isFunctionRunning = true
+		isFunctionRunning = true;
 		globals.firstPage = globals.lastPage + 1;
 		globals.lastPage = globals.firstPage + 9;
 		$(".pagination").empty();
 		await pageNumbers(globals.firstPage, globals.lastPage);
-		isFunctionRunning = false
+		isFunctionRunning = false;
 	});
 
 	// Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
@@ -213,12 +217,12 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 		if (isFunctionRunning) {
 			return;
 		}
-		isFunctionRunning = true
+		isFunctionRunning = true;
 		globals.lastPage = globals.firstPage - 1;
 		globals.firstPage = globals.lastPage - 9;
 		$(".pagination").empty();
 		await pageNumbers(globals.firstPage, globals.lastPage);
-		isFunctionRunning = false
+		isFunctionRunning = false;
 	});
 }
 
@@ -236,33 +240,33 @@ async function resultsRange(event: any) {
 		const maxRecords = recordsPerPage();
 		let end = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
 		if (end > (count + 1)) {
-			end = count
-			globals.currentToID = end
-		}
+			end = count;
+			globals.currentToID = end;
+		};
 		let start = (end - (maxRecords - 1));
 		globals.currentPage = Math.floor(end / maxRecords);
 		if (inputNumberInt < 1000000 && inputNumberInt > 0) {
 			if (end === 1000000) {
 				end = end - 1;
 			} else null
-			$('.results-box').remove()
+			$('.results-box').remove();
 			$('.search-container').append(`
                                     <div class="results-box">
                                       <p class="results-select">${start} - ${end}</p>
                                     </div>
-                                    `)
-			$('.results-box').on('click', resultsSelect)
+                                    `);
+			$('.results-box').on('click', resultsSelect);
 		} else {
-			$('.results-box').remove()
+			$('.results-box').remove();
 			$('.search-container').append(`
                                     <div class="results-box">
                                       <p class="message">Can't search negative values or records larger than 999 999 !!!</p>
                                     </div>
-                                    `)
-		}
+                                    `);
+		};
 	} else {
-		$('.results-box').remove()
-	}
+		$('.results-box').remove();
+	};
 
 	isFunctionRunning = false;
 }
@@ -271,30 +275,30 @@ async function resultsRange(event: any) {
 async function resultsSelect() {
 	if (isFunctionRunning) {
 		return;
-	}
+	};
 	isFunctionRunning = true;
 	let count = await getRecordCount() - 1;
 	let idRange = $('.results-select').text();
-	let rangeArray = null
+	let rangeArray = null;
 	rangeArray = idRange.split('-');
-	$('.results-box').remove()
-	let startID = parseInt(rangeArray[0])
-	let endID = parseInt(rangeArray[1])
+	$('.results-box').remove();
+	let startID = parseInt(rangeArray[0]);
+	let endID = parseInt(rangeArray[1]);
 	let maxRecords = recordsPerPage();
-	globals.currentPage = Math.ceil(endID / maxRecords)
+	globals.currentPage = Math.ceil(endID / maxRecords);
 	let pageEnd = Math.ceil(globals.currentPage / 10) * 10;
-	let pageStart = pageEnd - 9
+	let pageStart = pageEnd - 9;
 
 	if (endID == count) {
 		startID = ((globals.currentPage - 1) * maxRecords) + 1;
-		endID = count
+		endID = count;
 		globals.firstPage = pageStart;
-		globals.lastPage = pageEnd
-	}
+		globals.lastPage = pageEnd;
+	};
 
-	await pageNumbers(pageStart, pageEnd)
-	await showRecords(startID, endID)
-	isFunctionRunning = false;
+	await pageNumbers(pageStart, pageEnd);
+	await showRecords(startID, endID);
+	isFunctionRunning = false;;
 
 }
 
@@ -303,32 +307,31 @@ async function adjustDisplayedRecords(): Promise<number> {
 	try {
 		let screenHeight = $(window).height() as number;
 		if (screenHeight < 68) {
-			screenHeight = 68
-		}
+			screenHeight = 68;
+		};
 		let count = await getRecordCount() - 1;
 		let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-
 		let inputNumber = input();
 		let length = inputNumber.length as number;
-		let inputNumberInt = parseInt(inputNumber)
+		let inputNumberInt = parseInt(inputNumber);
 
 		if (inputNumber == '') {
 			let newCurrentPage = Math.ceil(globals.currentFromID / maxRecords);
 			if (newCurrentPage === 1) {
-				globals.currentFromID = 1
-			}
+				globals.currentFromID = 1;
+			};
 			globals.currentToID = globals.currentFromID + (maxRecords - 1);
 			globals.currentPage = newCurrentPage;
 			let originalID = (Math.floor(maxRecords * globals.currentPage) - (maxRecords - 1))
-			globals.difference = globals.currentFromID - originalID
+			globals.difference = globals.currentFromID - originalID;
 		} else {
 			if (length > 0) {
-				let newCurrentPage = Math.ceil(inputNumberInt / maxRecords)
+				let newCurrentPage = Math.ceil(inputNumberInt / maxRecords);
 				if (globals.currentToID > count) {
-					globals.currentToID = count
-				}
+					globals.currentToID = count;
+				};
 				globals.currentToID = newCurrentPage * maxRecords;
-				globals.currentPage = newCurrentPage
+				globals.currentPage = newCurrentPage;
 				globals.currentFromID = (globals.currentPage - 1) * maxRecords + 1;
 			}
 		}
@@ -342,8 +345,8 @@ async function adjustDisplayedRecords(): Promise<number> {
 		return maxRecords;
 	} catch (error) {
 		throw error;
-	}
-}
+	};
+};
 
 // Calls the function to resize with a timeout added for precision
 let resizeTimer: ReturnType<typeof setTimeout>;
@@ -358,24 +361,24 @@ function resize() {
 function loader() {
 	let content = $('tbody').text();
 	if (content == '') {
-		$('.results').append('<div class="loader"></div>')
+		$('.results').append('<div class="loader"></div>');
 	} else {
 		$('.loader').css({ 'display': 'none' })
-	}
-}
+	};
+};
 
 // Calculate how many records should be displayed on the screen height
 function recordsPerPage(): number {
 	const screenHeight = $(window).height();
 	const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
 	return maxRecords;
-}
+};
 
 // Retrieve the input value while a value is in the search bar
 function input(): string {
 	let inputNumber = $('.search-input').val() as string;
 	return inputNumber;
-}
+};
 
 // First function that runs when the  web app is started
 window.onload = () => {

From f8f8d24a9de6802bdd5707867faa45a39708b10f Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Wed, 30 Aug 2023 16:57:40 +0200
Subject: [PATCH 17/40] updated the search input to not take letter and symbols

---
 app.ts | 37 ++++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/app.ts b/app.ts
index c848c451..333e1f4f 100644
--- a/app.ts
+++ b/app.ts
@@ -14,7 +14,6 @@ function globalInitializer() {
 	};
 };
 
-
 // This function  will handle retrieving the records from the api
 async function getRecords(fromID: number, toID: number): Promise<string[][]> {
 	try {
@@ -226,16 +225,23 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 	});
 }
 
+$('.search-input').on('keydown', function (event) {
+	if (event.key === 'e' || event.key === 'E' || event.key === '.') {
+		event.preventDefault();
+	}
+});
+
 // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
-async function resultsRange(event: any) {
+$(".search-input").on("input", async function (this: HTMLInputElement, event: any) {
 	if (isFunctionRunning) {
 		return;
 	}
 	isFunctionRunning = true;
 	event.preventDefault();
 	let count = await getRecordCount() - 1;
+	// $(this).val($(this).val()!.replace(/[eE]/g, ''));
 	let inputNumber = input();
-	let inputNumberInt = parseInt(inputNumber);
+	let inputNumberInt: any = parseInt(inputNumber);
 	if (inputNumber !== '') {
 		const maxRecords = recordsPerPage();
 		let end = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
@@ -248,35 +254,35 @@ async function resultsRange(event: any) {
 		if (inputNumberInt < 1000000 && inputNumberInt > 0) {
 			if (end === 1000000) {
 				end = end - 1;
-			} else null
+			} else null;
 			$('.results-box').remove();
 			$('.search-container').append(`
-                                    <div class="results-box">
-                                      <p class="results-select">${start} - ${end}</p>
-                                    </div>
-                                    `);
+				<div class="results-box">
+					<p class="results-select">${start} - ${end}</p>
+				</div>`);
 			$('.results-box').on('click', resultsSelect);
 		} else {
 			$('.results-box').remove();
 			$('.search-container').append(`
-                                    <div class="results-box">
-                                      <p class="message">Can't search negative values or records larger than 999 999 !!!</p>
-                                    </div>
-                                    `);
+				<div class="results-box">
+					<p class="message">Invalid Input!</p>
+				</div>`);
 		};
 	} else {
 		$('.results-box').remove();
 	};
 
 	isFunctionRunning = false;
-}
+})
+
 
 // After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
-async function resultsSelect() {
+async function resultsSelect(event: any) {
 	if (isFunctionRunning) {
 		return;
 	};
 	isFunctionRunning = true;
+	console.log(event.key)
 	let count = await getRecordCount() - 1;
 	let idRange = $('.results-select').text();
 	let rangeArray = null;
@@ -302,6 +308,8 @@ async function resultsSelect() {
 
 }
 
+
+
 // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
 async function adjustDisplayedRecords(): Promise<number> {
 	try {
@@ -383,7 +391,6 @@ function input(): string {
 // First function that runs when the  web app is started
 window.onload = () => {
 	showColumns();
-	$(".search-input").on("keyup", resultsRange);
 	adjustDisplayedRecords();
 	$(window).on('resize', resize);
 };

From 44b81a716fdfddf229fb7864259274507a7b5d60 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Thu, 31 Aug 2023 16:53:24 +0200
Subject: [PATCH 18/40] Added user only allowing to type letters it the search
 bar and a enter function when wanting to search.

---
 app.ts | 49 +++++++++++++++++++++++++------------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/app.ts b/app.ts
index 333e1f4f..c042823b 100644
--- a/app.ts
+++ b/app.ts
@@ -43,7 +43,8 @@ async function getRecordCount(): Promise<number> {
 	try {
 		const response = await fetch(`${globals.api}recordCount`);
 		const data = await response.text();
-		const count = JSON.parse(data);
+		let count = JSON.parse(data);
+		count = count - 1;
 		return count;
 	} catch (error) {
 		throw error;
@@ -71,19 +72,17 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 	}
 	isFunctionRunning = true;
 	try {
-		let count = (await getRecordCount()) - 1;
+		let count = (await getRecordCount());
 		let inputNumber = input();
 		const maxRecords = recordsPerPage();
-		let condition = Math.ceil(count / maxRecords) + 1
-		if ((condition - 1) == globals.currentPage) {
-			fromID = (condition - 2) * maxRecords + 1;
-		}
+		let condition = Math.ceil(count / maxRecords)
 		$("tbody").empty();
 		loader();
 		globals.currentToID = toID;
-		if (toID > count) {
+		if (toID >= count) {
 			toID = count;
-		} else if (globals.currentPage == 1) {
+			fromID = toID - (maxRecords - 1);
+		} else if (globals.currentPage === 1) {
 			fromID = 1;
 		}
 		let records = await getRecords(fromID, toID);
@@ -119,7 +118,7 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 async function pageNumbers(start: number, end: number): Promise<void> {
 	try {
 		$('.pagination').empty();
-		let count = (await getRecordCount()) - 1;
+		let count = (await getRecordCount());
 		let stringCount = count.toLocaleString().replace(/,/g, " ");
 		let maxRecords = recordsPerPage();
 		let condition = Math.floor(count / maxRecords) + 1;
@@ -178,10 +177,10 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 			$(this).addClass("active");
 			isFunctionRunning = false;
 			await showRecords(fromID, toID);
-			$(".results").empty();
-			$(".results").append(
-				`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
-			);
+			// $(".results").empty();
+			// $(".results").append(
+			// 	`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
+			// );
 			return [fromID, toID];
 		});
 
@@ -225,9 +224,13 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 	});
 }
 
-$('.search-input').on('keydown', function (event) {
-	if (event.key === 'e' || event.key === 'E' || event.key === '.') {
-		event.preventDefault();
+$('.search-input').on('keydown', function (e) {
+	if (e.key === 'e'|| e.key ===  'E'|| e.key ===  '.' || e.key ===  '+' || e.key ===  '*'|| e.key ===  '-'){
+		e.preventDefault();
+	}
+	if (e.key === 'Enter') {
+		$('.results-box').trigger('click')
+		e.key
 	}
 });
 
@@ -238,8 +241,7 @@ $(".search-input").on("input", async function (this: HTMLInputElement, event: an
 	}
 	isFunctionRunning = true;
 	event.preventDefault();
-	let count = await getRecordCount() - 1;
-	// $(this).val($(this).val()!.replace(/[eE]/g, ''));
+	let count = await getRecordCount();
 	let inputNumber = input();
 	let inputNumberInt: any = parseInt(inputNumber);
 	if (inputNumber !== '') {
@@ -275,7 +277,6 @@ $(".search-input").on("input", async function (this: HTMLInputElement, event: an
 	isFunctionRunning = false;
 })
 
-
 // After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
 async function resultsSelect(event: any) {
 	if (isFunctionRunning) {
@@ -283,7 +284,7 @@ async function resultsSelect(event: any) {
 	};
 	isFunctionRunning = true;
 	console.log(event.key)
-	let count = await getRecordCount() - 1;
+	let count = await getRecordCount();
 	let idRange = $('.results-select').text();
 	let rangeArray = null;
 	rangeArray = idRange.split('-');
@@ -295,7 +296,7 @@ async function resultsSelect(event: any) {
 	let pageEnd = Math.ceil(globals.currentPage / 10) * 10;
 	let pageStart = pageEnd - 9;
 
-	if (endID == count) {
+	if (endID === count) {
 		startID = ((globals.currentPage - 1) * maxRecords) + 1;
 		endID = count;
 		globals.firstPage = pageStart;
@@ -317,13 +318,13 @@ async function adjustDisplayedRecords(): Promise<number> {
 		if (screenHeight < 68) {
 			screenHeight = 68;
 		};
-		let count = await getRecordCount() - 1;
+		let count = await getRecordCount();
 		let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
 		let inputNumber = input();
 		let length = inputNumber.length as number;
 		let inputNumberInt = parseInt(inputNumber);
 
-		if (inputNumber == '') {
+		if (inputNumber === '') {
 			let newCurrentPage = Math.ceil(globals.currentFromID / maxRecords);
 			if (newCurrentPage === 1) {
 				globals.currentFromID = 1;
@@ -368,7 +369,7 @@ function resize() {
 // Just a loader to display when the table is empty and records is being fetched. 
 function loader() {
 	let content = $('tbody').text();
-	if (content == '') {
+	if (content === '') {
 		$('.results').append('<div class="loader"></div>');
 	} else {
 		$('.loader').css({ 'display': 'none' })

From ab121b86a0bb7500e4bfd5db604ef2ee828e82da Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Fri, 1 Sep 2023 08:41:22 +0200
Subject: [PATCH 19/40] Small changes

---
 app.ts | 64 ++++++++++++++++++++++++++--------------------------------
 1 file changed, 29 insertions(+), 35 deletions(-)

diff --git a/app.ts b/app.ts
index c042823b..b0830383 100644
--- a/app.ts
+++ b/app.ts
@@ -24,7 +24,7 @@ async function getRecords(fromID: number, toID: number): Promise<string[][]> {
 	} catch (error) {
 		throw error;
 	};
-}
+};
 
 // This function  will handle retrieving the columns from the api
 async function getColumns(): Promise<string[]> {
@@ -49,7 +49,7 @@ async function getRecordCount(): Promise<number> {
 	} catch (error) {
 		throw error;
 		;
-	}
+	};
 };
 
 // This function will loop through and display the appropriate columns in the correct order.
@@ -75,7 +75,7 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 		let count = (await getRecordCount());
 		let inputNumber = input();
 		const maxRecords = recordsPerPage();
-		let condition = Math.ceil(count / maxRecords)
+		let condition = Math.ceil(count / maxRecords);
 		$("tbody").empty();
 		loader();
 		globals.currentToID = toID;
@@ -84,7 +84,7 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 			fromID = toID - (maxRecords - 1);
 		} else if (globals.currentPage === 1) {
 			fromID = 1;
-		}
+		};
 		let records = await getRecords(fromID, toID);
 		let stringCount = count.toLocaleString().replace(/,/g, " ");
 		$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`);
@@ -94,7 +94,7 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 				$(".body-row:last-child").append(`<td><span>${records[i][n]}</span></td>`);
 			}
 			$("tbody").append(`</tr>`);
-		}
+		};
 
 		$("span").each(function () {
 			const lowercasedID = $(this).text();
@@ -107,12 +107,12 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 
 		if (condition >= fromID && condition <= toID) {
 			$(".next").css({ display: "none" });
-		}
+		};
 	} catch (error) {
 		throw error;
 	}
 	isFunctionRunning = false;
-}
+};
 
 // The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
 async function pageNumbers(start: number, end: number): Promise<void> {
@@ -131,7 +131,7 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 			$(".next").css({ display: "none" });
 		} else {
 			$(".next").css({ display: "block" });
-		}
+		};
 		if (start < 1) {
 			start = 1;
 		};
@@ -141,7 +141,7 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 			$(".pagination").append(
 				`<a id="${i}" class="pagination-item">${i}</a>`
 			);
-		}
+		};
 		if (globals.firstPage === 1) {
 			$(".prev").css({ display: "none" });
 		} else {
@@ -165,8 +165,6 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 				globals.currentFromID = 1;
 			};
 			let toID = fromID + (maxRecords - 1);
-
-
 			if (fromID > count + 1 || toID > count + 1) {
 				toID = count;
 				fromID = toID - maxRecords;
@@ -177,10 +175,6 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 			$(this).addClass("active");
 			isFunctionRunning = false;
 			await showRecords(fromID, toID);
-			// $(".results").empty();
-			// $(".results").append(
-			// 	`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`
-			// );
 			return [fromID, toID];
 		});
 
@@ -201,7 +195,7 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 	$(".next").on("click", async function () {
 		if (isFunctionRunning) {
 			return;
-		}
+		};
 		isFunctionRunning = true;
 		globals.firstPage = globals.lastPage + 1;
 		globals.lastPage = globals.firstPage + 9;
@@ -214,7 +208,7 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 	$(".prev").on("click", async function () {
 		if (isFunctionRunning) {
 			return;
-		}
+		};
 		isFunctionRunning = true;
 		globals.lastPage = globals.firstPage - 1;
 		globals.firstPage = globals.lastPage - 9;
@@ -222,23 +216,23 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 		await pageNumbers(globals.firstPage, globals.lastPage);
 		isFunctionRunning = false;
 	});
-}
+};
 
+// Event listener to prevent some characters to be entered in the input
 $('.search-input').on('keydown', function (e) {
 	if (e.key === 'e'|| e.key ===  'E'|| e.key ===  '.' || e.key ===  '+' || e.key ===  '*'|| e.key ===  '-'){
 		e.preventDefault();
 	}
 	if (e.key === 'Enter') {
 		$('.results-box').trigger('click')
-		e.key
-	}
+	};
 });
 
 // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
 $(".search-input").on("input", async function (this: HTMLInputElement, event: any) {
 	if (isFunctionRunning) {
 		return;
-	}
+	};
 	isFunctionRunning = true;
 	event.preventDefault();
 	let count = await getRecordCount();
@@ -275,7 +269,7 @@ $(".search-input").on("input", async function (this: HTMLInputElement, event: an
 	};
 
 	isFunctionRunning = false;
-})
+});
 
 // After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
 async function resultsSelect(event: any) {
@@ -283,7 +277,6 @@ async function resultsSelect(event: any) {
 		return;
 	};
 	isFunctionRunning = true;
-	console.log(event.key)
 	let count = await getRecordCount();
 	let idRange = $('.results-select').text();
 	let rangeArray = null;
@@ -295,24 +288,25 @@ async function resultsSelect(event: any) {
 	globals.currentPage = Math.ceil(endID / maxRecords);
 	let pageEnd = Math.ceil(globals.currentPage / 10) * 10;
 	let pageStart = pageEnd - 9;
-
 	if (endID === count) {
 		startID = ((globals.currentPage - 1) * maxRecords) + 1;
 		endID = count;
 		globals.firstPage = pageStart;
 		globals.lastPage = pageEnd;
 	};
-
 	await pageNumbers(pageStart, pageEnd);
 	await showRecords(startID, endID);
-	isFunctionRunning = false;;
-
-}
+	isFunctionRunning = false;
+};
 
 
 
 // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
-async function adjustDisplayedRecords(): Promise<number> {
+async function adjustDisplayedRecords() {
+	if(isFunctionRunning){
+		return;
+	}
+	isFunctionRunning = true;
 	try {
 		let screenHeight = $(window).height() as number;
 		if (screenHeight < 68) {
@@ -323,7 +317,6 @@ async function adjustDisplayedRecords(): Promise<number> {
 		let inputNumber = input();
 		let length = inputNumber.length as number;
 		let inputNumberInt = parseInt(inputNumber);
-
 		if (inputNumber === '') {
 			let newCurrentPage = Math.ceil(globals.currentFromID / maxRecords);
 			if (newCurrentPage === 1) {
@@ -331,7 +324,7 @@ async function adjustDisplayedRecords(): Promise<number> {
 			};
 			globals.currentToID = globals.currentFromID + (maxRecords - 1);
 			globals.currentPage = newCurrentPage;
-			let originalID = (Math.floor(maxRecords * globals.currentPage) - (maxRecords - 1))
+			let originalID = (Math.floor(maxRecords * globals.currentPage) - (maxRecords - 1));
 			globals.difference = globals.currentFromID - originalID;
 		} else {
 			if (length > 0) {
@@ -342,13 +335,14 @@ async function adjustDisplayedRecords(): Promise<number> {
 				globals.currentToID = newCurrentPage * maxRecords;
 				globals.currentPage = newCurrentPage;
 				globals.currentFromID = (globals.currentPage - 1) * maxRecords + 1;
-			}
-		}
+			};
+		};
 		let pageEnd = Math.ceil(Math.floor(globals.currentToID / maxRecords) / 10) * 10;
 		let pageStart = pageEnd - 9;
 		globals.firstPage = pageStart;
 		globals.lastPage = pageEnd;
 		$("tbody").empty();
+		isFunctionRunning = false;
 		await showRecords(globals.currentFromID, globals.currentToID);
 		await pageNumbers(pageStart, pageEnd);
 		return maxRecords;
@@ -364,7 +358,7 @@ function resize() {
 	resizeTimer = setTimeout(async () => {
 		await adjustDisplayedRecords();
 	}, 250);
-}
+};
 
 // Just a loader to display when the table is empty and records is being fetched. 
 function loader() {
@@ -372,7 +366,7 @@ function loader() {
 	if (content === '') {
 		$('.results').append('<div class="loader"></div>');
 	} else {
-		$('.loader').css({ 'display': 'none' })
+		$('.loader').css({ 'display': 'none' });
 	};
 };
 

From 0f4c00b26be935c3abb97197b4aef23df78b5d58 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Mon, 4 Sep 2023 10:04:19 +0200
Subject: [PATCH 20/40] Added a Class and are handling all my api calls in the
 Class. And did all other requested changes.

---
 app.ts | 173 ++++++++++++++++++++++++++++-----------------------------
 1 file changed, 84 insertions(+), 89 deletions(-)

diff --git a/app.ts b/app.ts
index b0830383..e8d978cb 100644
--- a/app.ts
+++ b/app.ts
@@ -4,7 +4,6 @@ let isFunctionRunning = false;
 // The following would handle all the variable properties that is being changed a lot
 function globalInitializer() {
 	return {
-		api: "http://localhost:2050/",
 		currentPage: 1,
 		firstPage: 1,
 		lastPage: 10,
@@ -12,67 +11,64 @@ function globalInitializer() {
 		currentToID: 20,
 		difference: 0,
 	};
-};
+}
 
-// This function  will handle retrieving the records from the api
-async function getRecords(fromID: number, toID: number): Promise<string[][]> {
-	try {
-		const response = await fetch(`${globals.api}records?from=${fromID}&to=${toID}`);
-		const data = await response.text();
-		const records = JSON.parse(data);
-		return records;
-	} catch (error) {
-		throw error;
-	};
-};
+class ApiManager {
+	private mainUrl: string;
+	constructor(mainUrl: string) {
+		this.mainUrl = mainUrl;
+	}
+	private async fetchJson(mainUrl: string): Promise<any> {
+		try {
+			const response = await fetch(mainUrl);
+			const data = JSON.parse(await response.text());
+			return data;
+		} catch (error) {
+			throw error;
+		}
+	}
+	// This function  will handle retrieving the records from the api
+	getRecords(fromID: number, toID: number): Promise<string[][]> {
+		const url = `${this.mainUrl}records?from=${fromID}&to=${toID}`;
+		return this.fetchJson(url);
+	}
 
-// This function  will handle retrieving the columns from the api
-async function getColumns(): Promise<string[]> {
-	try {
-		const response = await fetch(`${globals.api}columns`);
-		const data = await response.text();
-		const columns = JSON.parse(data);
-		return columns;
-	} catch (error) {
-		throw error;
-	};
-};
+	// This function  will handle retrieving the columns from the api
+	getColumns(): Promise<string[]> {
+		const url = `${this.mainUrl}columns`;
+		return this.fetchJson(url);
+	}
 
-// This function  will handle retrieving the record count from the api
-async function getRecordCount(): Promise<number> {
-	try {
-		const response = await fetch(`${globals.api}recordCount`);
-		const data = await response.text();
-		let count = JSON.parse(data);
-		count = count - 1;
-		return count;
-	} catch (error) {
-		throw error;
-		;
-	};
-};
+	// This function  will handle retrieving the record count from the api
+	getRecordCount(): Promise<number> {
+		const url = `${this.mainUrl}recordCount`;
+		return this.fetchJson(url);
+	}
+}
+const apiManager = new ApiManager("http://localhost:2050/");
 
 // This function will loop through and display the appropriate columns in the correct order.
 async function showColumns(): Promise<void> {
 	try {
 		$(".head-row").empty();
-		let columns = await getColumns();
+		let columns = await apiManager.getColumns();
 		for (let i = 0; i < columns.length; i++) {
 			$("thead").append(`<th>${columns[i]}</th>`);
 		}
 	} catch (error) {
 		throw error;
-	};
-};
+	}
+}
 
 // This function will loop through and display the records on the table.
 async function showRecords(fromID: number, toID: number): Promise<void> {
 	if (isFunctionRunning) {
+		isFunctionRunning = false;
 		return;
 	}
 	isFunctionRunning = true;
 	try {
-		let count = (await getRecordCount());
+		let count = await apiManager.getRecordCount();
 		let inputNumber = input();
 		const maxRecords = recordsPerPage();
 		let condition = Math.ceil(count / maxRecords);
@@ -85,7 +81,7 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 		} else if (globals.currentPage === 1) {
 			fromID = 1;
 		};
-		let records = await getRecords(fromID, toID);
+		let records = await apiManager.getRecords(fromID, toID);
 		let stringCount = count.toLocaleString().replace(/,/g, " ");
 		$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`);
 		for (let i = 0; i < records.length; i++) {
@@ -102,23 +98,23 @@ async function showRecords(fromID: number, toID: number): Promise<void> {
 				$(this).css({ "background-color": "#FFFF00", "color": "black  " });
 			} else {
 				$(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
-			};
+			}
 		});
 
 		if (condition >= fromID && condition <= toID) {
 			$(".next").css({ display: "none" });
-		};
+		}
 	} catch (error) {
 		throw error;
 	}
 	isFunctionRunning = false;
-};
+}
 
 // The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
 async function pageNumbers(start: number, end: number): Promise<void> {
 	try {
 		$('.pagination').empty();
-		let count = (await getRecordCount());
+		let count = await apiManager.getRecordCount();
 		let stringCount = count.toLocaleString().replace(/,/g, " ");
 		let maxRecords = recordsPerPage();
 		let condition = Math.floor(count / maxRecords) + 1;
@@ -127,32 +123,32 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 				end = (condition - 1);
 			} else {
 				end = condition;
-			};
+			}
 			$(".next").css({ display: "none" });
 		} else {
 			$(".next").css({ display: "block" });
-		};
+		}
 		if (start < 1) {
 			start = 1;
-		};
+		}
 		globals.firstPage = start;
 		globals.lastPage = end;
 		for (let i = start; i <= end; i++) {
 			$(".pagination").append(
 				`<a id="${i}" class="pagination-item">${i}</a>`
 			);
-		};
+		}
 		if (globals.firstPage === 1) {
 			$(".prev").css({ display: "none" });
 		} else {
 			$(".prev").css({ display: "block" });
-		};
+		}
 
 		// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
 		$(".pagination-item").on("click", async function dynamicPagination() {
 			if (isFunctionRunning) {
 				return;
-			};
+			}
 			isFunctionRunning = true;
 			$('.search-input').val('');
 			globals.currentPage = parseInt($(this).attr("id") as any);
@@ -160,16 +156,16 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 			let fromID = Math.ceil(globals.currentPage * maxRecords - (maxRecords - 1));
 			if (globals.difference > 0 && globals.difference < maxRecords) {
 				fromID = fromID + globals.difference;
-			};
+			}
 			if (globals.currentPage === 1) {
 				globals.currentFromID = 1;
-			};
+			}
 			let toID = fromID + (maxRecords - 1);
 			if (fromID > count + 1 || toID > count + 1) {
 				toID = count;
 				fromID = toID - maxRecords;
 				globals.currentFromID = fromID;
-			};
+			}
 			globals.currentFromID = fromID;
 			$(".pagination-item").removeClass("active");
 			$(this).addClass("active");
@@ -183,7 +179,7 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 			let currentPageString = globals.currentPage.toString();
 			if (elementID == currentPageString) {
 				$(this).addClass('active');
-			};
+			}
 		});
 
 	} catch (error) {
@@ -195,7 +191,7 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 	$(".next").on("click", async function () {
 		if (isFunctionRunning) {
 			return;
-		};
+		}
 		isFunctionRunning = true;
 		globals.firstPage = globals.lastPage + 1;
 		globals.lastPage = globals.firstPage + 9;
@@ -208,7 +204,7 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 	$(".prev").on("click", async function () {
 		if (isFunctionRunning) {
 			return;
-		};
+		}
 		isFunctionRunning = true;
 		globals.lastPage = globals.firstPage - 1;
 		globals.firstPage = globals.lastPage - 9;
@@ -216,26 +212,26 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 		await pageNumbers(globals.firstPage, globals.lastPage);
 		isFunctionRunning = false;
 	});
-};
+}
 
 // Event listener to prevent some characters to be entered in the input
 $('.search-input').on('keydown', function (e) {
-	if (e.key === 'e'|| e.key ===  'E'|| e.key ===  '.' || e.key ===  '+' || e.key ===  '*'|| e.key ===  '-'){
+	if (e.key === 'e' || e.key === 'E' || e.key === '.' || e.key === '+' || e.key === '*' || e.key === '-') {
 		e.preventDefault();
 	}
 	if (e.key === 'Enter') {
-		$('.results-box').trigger('click')
-	};
+		$('.results-box').trigger('click');
+	}
 });
 
 // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
 $(".search-input").on("input", async function (this: HTMLInputElement, event: any) {
 	if (isFunctionRunning) {
 		return;
-	};
+	}
 	isFunctionRunning = true;
 	event.preventDefault();
-	let count = await getRecordCount();
+	let count = await apiManager.getRecordCount();
 	let inputNumber = input();
 	let inputNumberInt: any = parseInt(inputNumber);
 	if (inputNumber !== '') {
@@ -244,13 +240,15 @@ $(".search-input").on("input", async function (this: HTMLInputElement, event: an
 		if (end > (count + 1)) {
 			end = count;
 			globals.currentToID = end;
-		};
+		}
 		let start = (end - (maxRecords - 1));
 		globals.currentPage = Math.floor(end / maxRecords);
 		if (inputNumberInt < 1000000 && inputNumberInt > 0) {
 			if (end === 1000000) {
 				end = end - 1;
-			} else null;
+			} else {
+				null;
+			}
 			$('.results-box').remove();
 			$('.search-container').append(`
 				<div class="results-box">
@@ -263,10 +261,10 @@ $(".search-input").on("input", async function (this: HTMLInputElement, event: an
 				<div class="results-box">
 					<p class="message">Invalid Input!</p>
 				</div>`);
-		};
+		}
 	} else {
 		$('.results-box').remove();
-	};
+	}
 
 	isFunctionRunning = false;
 });
@@ -275,9 +273,9 @@ $(".search-input").on("input", async function (this: HTMLInputElement, event: an
 async function resultsSelect(event: any) {
 	if (isFunctionRunning) {
 		return;
-	};
+	}
 	isFunctionRunning = true;
-	let count = await getRecordCount();
+	let count = await apiManager.getRecordCount();
 	let idRange = $('.results-select').text();
 	let rangeArray = null;
 	rangeArray = idRange.split('-');
@@ -293,17 +291,14 @@ async function resultsSelect(event: any) {
 		endID = count;
 		globals.firstPage = pageStart;
 		globals.lastPage = pageEnd;
-	};
+	}
 	await pageNumbers(pageStart, pageEnd);
 	await showRecords(startID, endID);
-	isFunctionRunning = false;
-};
-
-
+}
 
 // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
 async function adjustDisplayedRecords() {
-	if(isFunctionRunning){
+	if (isFunctionRunning) {
 		return;
 	}
 	isFunctionRunning = true;
@@ -311,8 +306,8 @@ async function adjustDisplayedRecords() {
 		let screenHeight = $(window).height() as number;
 		if (screenHeight < 68) {
 			screenHeight = 68;
-		};
-		let count = await getRecordCount();
+		}
+		let count = await apiManager.getRecordCount();
 		let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
 		let inputNumber = input();
 		let length = inputNumber.length as number;
@@ -321,7 +316,7 @@ async function adjustDisplayedRecords() {
 			let newCurrentPage = Math.ceil(globals.currentFromID / maxRecords);
 			if (newCurrentPage === 1) {
 				globals.currentFromID = 1;
-			};
+			}
 			globals.currentToID = globals.currentFromID + (maxRecords - 1);
 			globals.currentPage = newCurrentPage;
 			let originalID = (Math.floor(maxRecords * globals.currentPage) - (maxRecords - 1));
@@ -331,11 +326,11 @@ async function adjustDisplayedRecords() {
 				let newCurrentPage = Math.ceil(inputNumberInt / maxRecords);
 				if (globals.currentToID > count) {
 					globals.currentToID = count;
-				};
+				}
 				globals.currentToID = newCurrentPage * maxRecords;
 				globals.currentPage = newCurrentPage;
 				globals.currentFromID = (globals.currentPage - 1) * maxRecords + 1;
-			};
+			}
 		};
 		let pageEnd = Math.ceil(Math.floor(globals.currentToID / maxRecords) / 10) * 10;
 		let pageStart = pageEnd - 9;
@@ -348,8 +343,8 @@ async function adjustDisplayedRecords() {
 		return maxRecords;
 	} catch (error) {
 		throw error;
-	};
-};
+	}
+}
 
 // Calls the function to resize with a timeout added for precision
 let resizeTimer: ReturnType<typeof setTimeout>;
@@ -358,7 +353,7 @@ function resize() {
 	resizeTimer = setTimeout(async () => {
 		await adjustDisplayedRecords();
 	}, 250);
-};
+}
 
 // Just a loader to display when the table is empty and records is being fetched. 
 function loader() {
@@ -367,25 +362,25 @@ function loader() {
 		$('.results').append('<div class="loader"></div>');
 	} else {
 		$('.loader').css({ 'display': 'none' });
-	};
-};
+	}
+}
 
 // Calculate how many records should be displayed on the screen height
 function recordsPerPage(): number {
 	const screenHeight = $(window).height();
 	const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
 	return maxRecords;
-};
+}
 
 // Retrieve the input value while a value is in the search bar
 function input(): string {
 	let inputNumber = $('.search-input').val() as string;
 	return inputNumber;
-};
+}
 
 // First function that runs when the  web app is started
 window.onload = () => {
 	showColumns();
 	adjustDisplayedRecords();
 	$(window).on('resize', resize);
-};
+}

From 088d73bf81ef583b537a1a067efbfb6515b9e480 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Wed, 6 Sep 2023 16:56:27 +0200
Subject: [PATCH 21/40] Moved my class to a seperate file and replaced try,
 catch with .then() and .catch()

---
 apiManager.js     |  28 +++
 apiManager.js.map |   1 +
 apiManager.ts     |  30 +++
 app.ts            | 544 +++++++++++++++++++++++-----------------------
 index.html        |   3 +-
 5 files changed, 334 insertions(+), 272 deletions(-)
 create mode 100644 apiManager.js
 create mode 100644 apiManager.js.map
 create mode 100644 apiManager.ts

diff --git a/apiManager.js b/apiManager.js
new file mode 100644
index 00000000..4d1e7694
--- /dev/null
+++ b/apiManager.js
@@ -0,0 +1,28 @@
+var ApiManager = /** @class */ (function () {
+    function ApiManager(mainUrl) {
+        this.mainUrl = mainUrl;
+    }
+    ApiManager.prototype.fetchJson = function (mainUrl) {
+        return fetch(mainUrl)
+            .then(function (res) { return res.text(); })
+            .then(function (data) { return JSON.parse(data); })
+            .catch(function (err) {
+            throw err;
+        });
+    };
+    // This function  will handle retrieving the records from the api
+    ApiManager.prototype.getRecords = function (fromID, toID) {
+        return this.fetchJson(this.mainUrl + "records?from=" + fromID + "&to=" + toID);
+    };
+    // This function  will handle retrieving the columns from the api
+    ApiManager.prototype.getColumns = function () {
+        return this.fetchJson(this.mainUrl + "columns");
+    };
+    // This function  will handle retrieving the record count from the api
+    ApiManager.prototype.getRecordCount = function () {
+        return this.fetchJson(this.mainUrl + "recordCount");
+    };
+    return ApiManager;
+}());
+export { ApiManager };
+//# sourceMappingURL=apiManager.js.map
\ No newline at end of file
diff --git a/apiManager.js.map b/apiManager.js.map
new file mode 100644
index 00000000..66745660
--- /dev/null
+++ b/apiManager.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"apiManager.js","sourceRoot":"","sources":["apiManager.ts"],"names":[],"mappings":"AAAA;IAEC,oBAAY,OAAe;QAC1B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACxB,CAAC;IAEO,8BAAS,GAAjB,UAAkB,OAAe;QAChC,OAAO,KAAK,CAAC,OAAO,CAAC;aACnB,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC;aACvB,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAhB,CAAgB,CAAC;aAC9B,KAAK,CAAC,UAAC,GAAG;YACV,MAAM,GAAG,CAAA;QACV,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,iEAAiE;IACjE,+BAAU,GAAV,UAAW,MAAc,EAAE,IAAY;QACtC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,qBAAgB,MAAM,YAAO,IAAM,CAAC,CAAC;IAC3E,CAAC;IAED,iEAAiE;IACjE,+BAAU,GAAV;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,YAAS,CAAC,CAAC;IACjD,CAAC;IAED,sEAAsE;IACtE,mCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,gBAAa,CAAC,CAAC;IACrD,CAAC;IACF,iBAAC;AAAD,CAAC,AA7BD,IA6BC"}
\ No newline at end of file
diff --git a/apiManager.ts b/apiManager.ts
new file mode 100644
index 00000000..71d075b5
--- /dev/null
+++ b/apiManager.ts
@@ -0,0 +1,30 @@
+export class ApiManager {
+	private mainUrl: string;
+	constructor(mainUrl: string) {
+		this.mainUrl = mainUrl;
+	}
+
+	private fetchJson(mainUrl: string): Promise<any> {
+		return fetch(mainUrl)
+			.then(res => res.text())
+			.then(data => JSON.parse(data))
+			.catch((err) => {
+				throw err
+			})
+	}
+
+	// This function  will handle retrieving the records from the api
+	getRecords(fromID: number, toID: number): Promise<string[][]> {
+		return this.fetchJson(`${this.mainUrl}records?from=${fromID}&to=${toID}`);
+	}
+
+	// This function  will handle retrieving the columns from the api
+	getColumns(): Promise<string[]> {
+		return this.fetchJson(`${this.mainUrl}columns`);
+	}
+
+	// This function  will handle retrieving the record count from the api
+	getRecordCount(): Promise<number> {
+		return this.fetchJson(`${this.mainUrl}recordCount`);
+	}
+}
diff --git a/app.ts b/app.ts
index e8d978cb..f5b0bf71 100644
--- a/app.ts
+++ b/app.ts
@@ -1,4 +1,6 @@
+import { ApiManager } from "./apiManager.js";
 const globals = globalInitializer();
+const apiManager = new ApiManager("http://localhost:2050/");
 let isFunctionRunning = false;
 
 // The following would handle all the variable properties that is being changed a lot
@@ -13,206 +15,180 @@ function globalInitializer() {
 	};
 }
 
-class ApiManager {
-	private mainUrl: string;
-	constructor(mainUrl: string) {
-		this.mainUrl = mainUrl;
-	}
-	private async fetchJson(mainUrl: string): Promise<any> {
-		try {
-			const response = await fetch(mainUrl);
-			const data = JSON.parse(await response.text());
-			return data;
-		} catch (error) {
-			throw error;
-		}
-	}
-	// This function  will handle retrieving the records from the api
-	getRecords(fromID: number, toID: number): Promise<string[][]> {
-		const url = `${this.mainUrl}records?from=${fromID}&to=${toID}`;
-		return this.fetchJson(url);
-	}
-
-	// This function  will handle retrieving the columns from the api
-	getColumns(): Promise<string[]> {
-		const url = `${this.mainUrl}columns`;
-		return this.fetchJson(url);
-	}
-
-	// This function  will handle retrieving the record count from the api
-	getRecordCount(): Promise<number> {
-		const url = `${this.mainUrl}recordCount`;
-		return this.fetchJson(url);
-	}
-}
-const apiManager = new ApiManager("http://localhost:2050/");
 
 // This function will loop through and display the appropriate columns in the correct order.
-async function showColumns(): Promise<void> {
-	try {
-		$(".head-row").empty();
-		let columns = await apiManager.getColumns();
-		for (let i = 0; i < columns.length; i++) {
-			$("thead").append(`<th>${columns[i]}</th>`);
-		}
-	} catch (error) {
-		throw error;
-	}
+function showColumns(): Promise<void> {
+	$(".head-row").empty();
+	return apiManager.getColumns()
+		.then((columns) => {
+			for (let i = 0; i < columns.length; i++) {
+				$("thead").append(`<th>${columns[i]}</th>`);
+			}
+		})
 }
 
 // This function will loop through and display the records on the table.
-async function showRecords(fromID: number, toID: number): Promise<void> {
+function showRecords(fromID: number, toID: number): Promise<void> {
 	if (isFunctionRunning) {
 		isFunctionRunning = false;
-		return;
+		return Promise.resolve(undefined);;
 	}
 	isFunctionRunning = true;
-	try {
-		let count = await apiManager.getRecordCount();
-		let inputNumber = input();
-		const maxRecords = recordsPerPage();
-		let condition = Math.ceil(count / maxRecords);
-		$("tbody").empty();
-		loader();
-		globals.currentToID = toID;
-		if (toID >= count) {
-			toID = count;
-			fromID = toID - (maxRecords - 1);
-		} else if (globals.currentPage === 1) {
-			fromID = 1;
-		};
-		let records = await apiManager.getRecords(fromID, toID);
-		let stringCount = count.toLocaleString().replace(/,/g, " ");
-		$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`);
-		for (let i = 0; i < records.length; i++) {
-			$("tbody").append(`<tr class="body-row">`);
-			for (let n = 0; n < records[i].length; n++) {
-				$(".body-row:last-child").append(`<td><span>${records[i][n]}</span></td>`);
-			}
-			$("tbody").append(`</tr>`);
-		};
+	let condition: number;
+	let inputNumber: string;
+	let stringCount: string;
+	return apiManager.getRecordCount()
+		.then((count) => {
+			inputNumber = input();
+			const maxRecords = recordsPerPage();
+			condition = Math.ceil(count / maxRecords);
+			$("tbody").empty();
+			loader();
+			globals.currentToID = toID;
+			if (toID >= count) {
+				toID = count;
+				fromID = toID - (maxRecords - 1);
+			} else if (globals.currentPage === 1) {
+				fromID = 1;
+			};
+			stringCount = count.toLocaleString().replace(/,/g, " ");
+			return apiManager.getRecords(fromID, toID);
+		})
+		.then((records) => {
+			$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`);
+			for (let i = 0; i < records.length; i++) {
+				$("tbody").append(`<tr class="body-row">`);
+				for (let n = 0; n < records[i].length; n++) {
+					$(".body-row:last-child").append(`<td><span>${records[i][n]}</span></td>`);
+				}
+				$("tbody").append(`</tr>`);
+			};
 
-		$("span").each(function () {
-			const lowercasedID = $(this).text();
-			if (lowercasedID == inputNumber) {
-				$(this).css({ "background-color": "#FFFF00", "color": "black  " });
-			} else {
-				$(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
-			}
-		});
+			$("span").each(function () {
+				const lowercasedID = $(this).text();
+				if (lowercasedID == inputNumber) {
+					$(this).css({ "background-color": "#FFFF00", "color": "black  " });
+				} else {
+					$(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
+				}
+			});
 
-		if (condition >= fromID && condition <= toID) {
-			$(".next").css({ display: "none" });
-		}
-	} catch (error) {
-		throw error;
-	}
-	isFunctionRunning = false;
+			if (condition >= fromID && condition <= toID) {
+				$(".next").css({ display: "none" });
+			}
+			isFunctionRunning = false;
+		})
+		.catch((error) => {
+			throw error;
+		})
 }
 
 // The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
 async function pageNumbers(start: number, end: number): Promise<void> {
-	try {
-		$('.pagination').empty();
-		let count = await apiManager.getRecordCount();
-		let stringCount = count.toLocaleString().replace(/,/g, " ");
-		let maxRecords = recordsPerPage();
-		let condition = Math.floor(count / maxRecords) + 1;
-		if (condition <= end && condition >= start) {
-			if (999999 % maxRecords === 0) {
-				end = (condition - 1);
+	return apiManager.getRecordCount()
+		.then((count) => {
+			$('.pagination').empty();
+			let stringCount = count.toLocaleString().replace(/,/g, " ");
+			let maxRecords = recordsPerPage();
+			let condition = Math.floor(count / maxRecords) + 1;
+			if (condition <= end && condition >= start) {
+				if (999999 % maxRecords === 0) {
+					end = (condition - 1);
+				} else {
+					end = condition;
+				}
+				$(".next").css({ display: "none" });
 			} else {
-				end = condition;
+				$(".next").css({ display: "block" });
 			}
-			$(".next").css({ display: "none" });
-		} else {
-			$(".next").css({ display: "block" });
-		}
-		if (start < 1) {
-			start = 1;
-		}
-		globals.firstPage = start;
-		globals.lastPage = end;
-		for (let i = start; i <= end; i++) {
-			$(".pagination").append(
-				`<a id="${i}" class="pagination-item">${i}</a>`
-			);
-		}
-		if (globals.firstPage === 1) {
-			$(".prev").css({ display: "none" });
-		} else {
-			$(".prev").css({ display: "block" });
-		}
-
-		// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
-		$(".pagination-item").on("click", async function dynamicPagination() {
-			if (isFunctionRunning) {
-				return;
-			}
-			isFunctionRunning = true;
-			$('.search-input').val('');
-			globals.currentPage = parseInt($(this).attr("id") as any);
-			const maxRecords = recordsPerPage();
-			let fromID = Math.ceil(globals.currentPage * maxRecords - (maxRecords - 1));
-			if (globals.difference > 0 && globals.difference < maxRecords) {
-				fromID = fromID + globals.difference;
+			if (start < 1) {
+				start = 1;
 			}
-			if (globals.currentPage === 1) {
-				globals.currentFromID = 1;
+			globals.firstPage = start;
+			globals.lastPage = end;
+			for (let i = start; i <= end; i++) {
+				$(".pagination").append(
+					`<a id="${i}" class="pagination-item">${i}</a>`
+				);
 			}
-			let toID = fromID + (maxRecords - 1);
-			if (fromID > count + 1 || toID > count + 1) {
-				toID = count;
-				fromID = toID - maxRecords;
-				globals.currentFromID = fromID;
+			if (globals.firstPage === 1) {
+				$(".prev").css({ display: "none" });
+			} else {
+				$(".prev").css({ display: "block" });
 			}
-			globals.currentFromID = fromID;
-			$(".pagination-item").removeClass("active");
-			$(this).addClass("active");
 			isFunctionRunning = false;
-			await showRecords(fromID, toID);
-			return [fromID, toID];
-		});
-
-		$(".pagination-item").each(function () {
-			let elementID = $(this).attr('id') as string;
-			let currentPageString = globals.currentPage.toString();
-			if (elementID == currentPageString) {
-				$(this).addClass('active');
-			}
-		});
+			return count;
+		})
+		.then((count) => {
+			// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
+			$(".pagination-item").on("click", async function dynamicPagination() {
+				if (isFunctionRunning) {
+					return;
+				}
+				isFunctionRunning = true;
+				$('.search-input').val('');
+				globals.currentPage = parseInt($(this).attr("id") as any);
+				const maxRecords = recordsPerPage();
+				let fromID = Math.ceil(globals.currentPage * maxRecords - (maxRecords - 1));
+				if (globals.difference > 0 && globals.difference < maxRecords) {
+					fromID = fromID + globals.difference;
+				}
+				if (globals.currentPage === 1) {
+					globals.currentFromID = 1;
+				}
+				let toID = fromID + (maxRecords - 1);
+				if (fromID > count + 1 || toID > count + 1) {
+					toID = count;
+					fromID = toID - maxRecords;
+					globals.currentFromID = fromID;
+				}
+				globals.currentFromID = fromID;
+				$(".pagination-item").removeClass("active");
+				$(this).addClass("active");
+				isFunctionRunning = false;
+				await showRecords(fromID, toID);
+				return [fromID, toID];
+			});
+		})
+		.then(() => {
+			$(".pagination-item").each(function () {
+				let elementID = $(this).attr('id') as string;
+				let currentPageString = globals.currentPage.toString();
+				if (elementID == currentPageString) {
+					$(this).addClass('active');
+				}
+			});
+		})
+		.catch((error) => {
+			throw error;
+		})
+}
 
-	} catch (error) {
-		throw error;
+// Adding a click event to the next button of the pagination.
+$(".next").on("click", function () {
+	if (isFunctionRunning) {
+		return;
 	}
+	isFunctionRunning = true;
+	globals.firstPage = globals.lastPage + 1;
+	globals.lastPage = globals.firstPage + 9;
+	$(".pagination").empty();
+	pageNumbers(globals.firstPage, globals.lastPage);
 	isFunctionRunning = false;
+});
 
-	// Adding a click event to the next button of the pagination.
-	$(".next").on("click", async function () {
-		if (isFunctionRunning) {
-			return;
-		}
-		isFunctionRunning = true;
-		globals.firstPage = globals.lastPage + 1;
-		globals.lastPage = globals.firstPage + 9;
-		$(".pagination").empty();
-		await pageNumbers(globals.firstPage, globals.lastPage);
-		isFunctionRunning = false;
-	});
-
-	// Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
-	$(".prev").on("click", async function () {
-		if (isFunctionRunning) {
-			return;
-		}
-		isFunctionRunning = true;
-		globals.lastPage = globals.firstPage - 1;
-		globals.firstPage = globals.lastPage - 9;
-		$(".pagination").empty();
-		await pageNumbers(globals.firstPage, globals.lastPage);
-		isFunctionRunning = false;
-	});
-}
+// Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
+$(".prev").on("click", function () {
+	if (isFunctionRunning) {
+		return;
+	}
+	isFunctionRunning = true;
+	globals.lastPage = globals.firstPage - 1;
+	globals.firstPage = globals.lastPage - 9;
+	$(".pagination").empty();
+	pageNumbers(globals.firstPage, globals.lastPage);
+	isFunctionRunning = false;
+});
 
 // Event listener to prevent some characters to be entered in the input
 $('.search-input').on('keydown', function (e) {
@@ -225,125 +201,151 @@ $('.search-input').on('keydown', function (e) {
 });
 
 // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
-$(".search-input").on("input", async function (this: HTMLInputElement, event: any) {
+$(".search-input").on("input", function (this: HTMLInputElement, event: any) {
 	if (isFunctionRunning) {
 		return;
 	}
 	isFunctionRunning = true;
 	event.preventDefault();
-	let count = await apiManager.getRecordCount();
-	let inputNumber = input();
-	let inputNumberInt: any = parseInt(inputNumber);
-	if (inputNumber !== '') {
-		const maxRecords = recordsPerPage();
-		let end = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
-		if (end > (count + 1)) {
-			end = count;
-			globals.currentToID = end;
-		}
-		let start = (end - (maxRecords - 1));
-		globals.currentPage = Math.floor(end / maxRecords);
-		if (inputNumberInt < 1000000 && inputNumberInt > 0) {
-			if (end === 1000000) {
-				end = end - 1;
+	return apiManager.getRecordCount()
+		.then((count) => {
+			let inputNumber = input();
+			let inputNumberInt: any = parseInt(inputNumber);
+			if (inputNumber !== '') {
+				const maxRecords = recordsPerPage();
+				let end = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
+				if (end > (count + 1)) {
+					end = count;
+					globals.currentToID = end;
+				}
+				let start = (end - (maxRecords - 1));
+				globals.currentPage = Math.floor(end / maxRecords);
+				if (inputNumberInt < 1000000 && inputNumberInt > 0) {
+					if (end === 1000000) {
+						end = end - 1;
+					} else {
+						null;
+					}
+					$('.results-box').remove();
+					$('.search-container').append(`
+						<div class="results-box">
+							<p class="results-select">${start} - ${end}</p>
+						</div>`);
+					$('.results-box').on('click', resultsSelect);
+				} else {
+					$('.results-box').remove();
+					$('.search-container').append(`
+						<div class="results-box">
+							<p class="message">Invalid Input!</p>
+						</div>`);
+				}
 			} else {
-				null;
+				$('.results-box').remove();
 			}
-			$('.results-box').remove();
-			$('.search-container').append(`
-				<div class="results-box">
-					<p class="results-select">${start} - ${end}</p>
-				</div>`);
-			$('.results-box').on('click', resultsSelect);
-		} else {
-			$('.results-box').remove();
-			$('.search-container').append(`
-				<div class="results-box">
-					<p class="message">Invalid Input!</p>
-				</div>`);
-		}
-	} else {
-		$('.results-box').remove();
-	}
 
-	isFunctionRunning = false;
-});
+			isFunctionRunning = false;
+		})
+		.catch((error) => {
+			throw error;
+		})
+})
 
 // After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
-async function resultsSelect(event: any) {
+function resultsSelect(event: any) {
 	if (isFunctionRunning) {
 		return;
 	}
 	isFunctionRunning = true;
-	let count = await apiManager.getRecordCount();
-	let idRange = $('.results-select').text();
-	let rangeArray = null;
-	rangeArray = idRange.split('-');
-	$('.results-box').remove();
-	let startID = parseInt(rangeArray[0]);
-	let endID = parseInt(rangeArray[1]);
-	let maxRecords = recordsPerPage();
-	globals.currentPage = Math.ceil(endID / maxRecords);
-	let pageEnd = Math.ceil(globals.currentPage / 10) * 10;
-	let pageStart = pageEnd - 9;
-	if (endID === count) {
-		startID = ((globals.currentPage - 1) * maxRecords) + 1;
-		endID = count;
-		globals.firstPage = pageStart;
-		globals.lastPage = pageEnd;
-	}
-	await pageNumbers(pageStart, pageEnd);
-	await showRecords(startID, endID);
+	let startID: number;
+	let endID: number;
+	let pageEnd: number;
+	let pageStart: number;
+	return apiManager.getRecordCount()
+		.then((count) => {
+			let idRange = $('.results-select').text();
+			let rangeArray = null;
+			rangeArray = idRange.split('-');
+			$('.results-box').remove();
+			startID = parseInt(rangeArray[0]);
+			endID = parseInt(rangeArray[1]);
+			let maxRecords = recordsPerPage();
+			globals.currentPage = Math.ceil(endID / maxRecords);
+			pageEnd = Math.ceil(globals.currentPage / 10) * 10;
+			pageStart = pageEnd - 9;
+			if (endID === count) {
+				startID = ((globals.currentPage - 1) * maxRecords) + 1;
+				endID = count;
+				globals.firstPage = pageStart;
+				globals.lastPage = pageEnd;
+			}
+		})
+		.then(() => {
+			return pageNumbers(pageStart, pageEnd);
+		})
+		.then(() => {
+			return showRecords(startID, endID);
+		})
+		.catch((error) => {
+			throw error;
+		})
 }
 
 // When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
-async function adjustDisplayedRecords() {
+function adjustDisplayedRecords() {
 	if (isFunctionRunning) {
 		return;
 	}
 	isFunctionRunning = true;
-	try {
-		let screenHeight = $(window).height() as number;
-		if (screenHeight < 68) {
-			screenHeight = 68;
-		}
-		let count = await apiManager.getRecordCount();
-		let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-		let inputNumber = input();
-		let length = inputNumber.length as number;
-		let inputNumberInt = parseInt(inputNumber);
-		if (inputNumber === '') {
-			let newCurrentPage = Math.ceil(globals.currentFromID / maxRecords);
-			if (newCurrentPage === 1) {
-				globals.currentFromID = 1;
-			}
-			globals.currentToID = globals.currentFromID + (maxRecords - 1);
-			globals.currentPage = newCurrentPage;
-			let originalID = (Math.floor(maxRecords * globals.currentPage) - (maxRecords - 1));
-			globals.difference = globals.currentFromID - originalID;
-		} else {
-			if (length > 0) {
-				let newCurrentPage = Math.ceil(inputNumberInt / maxRecords);
-				if (globals.currentToID > count) {
-					globals.currentToID = count;
+	let screenHeight = $(window).height() as number;
+	if (screenHeight < 68) {
+		screenHeight = 68;
+	}
+	let maxRecords: number;
+	let pageStart: number;
+	let pageEnd: number;
+	return apiManager.getRecordCount()
+		.then((count) => {
+			let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+			let inputNumber = input();
+			let length = inputNumber.length as number;
+			let inputNumberInt = parseInt(inputNumber);
+			if (inputNumber === '') {
+				let newCurrentPage = Math.ceil(globals.currentFromID / maxRecords);
+				if (newCurrentPage === 1) {
+					globals.currentFromID = 1;
 				}
-				globals.currentToID = newCurrentPage * maxRecords;
+				globals.currentToID = globals.currentFromID + (maxRecords - 1);
 				globals.currentPage = newCurrentPage;
-				globals.currentFromID = (globals.currentPage - 1) * maxRecords + 1;
-			}
-		};
-		let pageEnd = Math.ceil(Math.floor(globals.currentToID / maxRecords) / 10) * 10;
-		let pageStart = pageEnd - 9;
-		globals.firstPage = pageStart;
-		globals.lastPage = pageEnd;
-		$("tbody").empty();
-		isFunctionRunning = false;
-		await showRecords(globals.currentFromID, globals.currentToID);
-		await pageNumbers(pageStart, pageEnd);
-		return maxRecords;
-	} catch (error) {
-		throw error;
-	}
+				let originalID = (Math.floor(maxRecords * globals.currentPage) - (maxRecords - 1));
+				globals.difference = globals.currentFromID - originalID;
+			} else {
+				if (length > 0) {
+					let newCurrentPage = Math.ceil(inputNumberInt / maxRecords);
+					if (globals.currentToID > count) {
+						globals.currentToID = count;
+					}
+					globals.currentToID = newCurrentPage * maxRecords;
+					globals.currentPage = newCurrentPage;
+					globals.currentFromID = (globals.currentPage - 1) * maxRecords + 1;
+				}
+			};
+			pageEnd = Math.ceil(Math.floor(globals.currentToID / maxRecords) / 10) * 10;
+			pageStart = pageEnd - 9;
+			globals.firstPage = pageStart;
+			globals.lastPage = pageEnd;
+			$("tbody").empty();
+			isFunctionRunning = false;
+			return showRecords(globals.currentFromID, globals.currentToID);
+		})
+		.then(() => {
+			return pageNumbers(pageStart, pageEnd);
+		})
+		.then(() => {
+			return maxRecords;
+		})
+		.catch((error) => {
+			throw error;
+		})
 }
 
 // Calls the function to resize with a timeout added for precision
diff --git a/index.html b/index.html
index 09633ced..e76203c7 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,8 @@
 		</div>
         <a class="next">&raquo;</a>
     </div>
-	<script src="./app.js"></script>
+	<script type="module" src="./app.js"></script>
+	<script type="module" src="./apiManager.js"></script>
 </body>
 
 </html>

From 975bc2437007efeeec0044ad445440b4a09122f6 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Thu, 7 Sep 2023 11:58:29 +0200
Subject: [PATCH 22/40] Update

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

diff --git a/app.ts b/app.ts
index f5b0bf71..184e96ed 100644
--- a/app.ts
+++ b/app.ts
@@ -15,7 +15,6 @@ function globalInitializer() {
 	};
 }
 
-
 // This function will loop through and display the appropriate columns in the correct order.
 function showColumns(): Promise<void> {
 	$(".head-row").empty();
@@ -84,7 +83,7 @@ function showRecords(fromID: number, toID: number): Promise<void> {
 }
 
 // The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
-async function pageNumbers(start: number, end: number): Promise<void> {
+function pageNumbers(start: number, end: number): Promise<void> {
 	return apiManager.getRecordCount()
 		.then((count) => {
 			$('.pagination').empty();
@@ -121,7 +120,7 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 		})
 		.then((count) => {
 			// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
-			$(".pagination-item").on("click", async function dynamicPagination() {
+			$(".pagination-item").on("click", function dynamicPagination() {
 				if (isFunctionRunning) {
 					return;
 				}
@@ -146,8 +145,10 @@ async function pageNumbers(start: number, end: number): Promise<void> {
 				$(".pagination-item").removeClass("active");
 				$(this).addClass("active");
 				isFunctionRunning = false;
-				await showRecords(fromID, toID);
-				return [fromID, toID];
+				return showRecords(fromID, toID)
+				.catch((error) => {
+					throw error;
+				})
 			});
 		})
 		.then(() => {
@@ -242,7 +243,6 @@ $(".search-input").on("input", function (this: HTMLInputElement, event: any) {
 			} else {
 				$('.results-box').remove();
 			}
-
 			isFunctionRunning = false;
 		})
 		.catch((error) => {
@@ -352,8 +352,8 @@ function adjustDisplayedRecords() {
 let resizeTimer: ReturnType<typeof setTimeout>;
 function resize() {
 	clearTimeout(resizeTimer);
-	resizeTimer = setTimeout(async () => {
-		await adjustDisplayedRecords();
+	resizeTimer = setTimeout(() => {
+		adjustDisplayedRecords();
 	}, 250);
 }
 

From 3fb7c442d945bd7ba907013a67fb0b11ccf4ed94 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Mon, 11 Sep 2023 16:49:11 +0200
Subject: [PATCH 23/40] update

---
 .gitignore        |   2 +
 ApiManager.js     |  34 +++++
 ApiManager.js.map |   1 +
 apiManager.js     |  22 +--
 apiManager.js.map |   2 +-
 apiManager.ts     |  22 +--
 app.ts            |  45 +++---
 index.html        |  55 ++++----
 package-lock.json |   7 +-
 package.json      |   7 +-
 style.css         | 346 +++++++++++++++++++++++-----------------------
 tsconfig.json     |   1 -
 12 files changed, 295 insertions(+), 249 deletions(-)
 create mode 100644 ApiManager.js
 create mode 100644 ApiManager.js.map

diff --git a/.gitignore b/.gitignore
index 0872c36c..34e0c259 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 /node_modules
 app.js
 app.js.map
+apiManager.js
+apiManager.js.map
diff --git a/ApiManager.js b/ApiManager.js
new file mode 100644
index 00000000..0990d652
--- /dev/null
+++ b/ApiManager.js
@@ -0,0 +1,34 @@
+"use strict";
+var ApiManager = /** @class */ (function () {
+    function ApiManager(mainUrl) {
+        this.mainUrl = mainUrl;
+    }
+    ApiManager.prototype.fetchJson = function (mainUrl) {
+        return fetch(mainUrl)
+            .then(function (res) {
+            if (res.ok) {
+                return res.json();
+            }
+            else {
+                throw new Error("HTTP error! Status: " + res.status);
+            }
+        })
+            .catch(function (error) {
+            throw new Error("Fetch failed: " + error);
+        });
+    };
+    /** Retrieves records from the api */
+    ApiManager.prototype.getRecords = function (fromID, toID) {
+        return this.fetchJson(this.mainUrl + "records?from=" + fromID + "&to=" + toID);
+    };
+    /** Retrieves columns from the api */
+    ApiManager.prototype.getColumns = function () {
+        return this.fetchJson(this.mainUrl + "columns");
+    };
+    /** Retrieves the number of records there are */
+    ApiManager.prototype.getRecordCount = function () {
+        return this.fetchJson(this.mainUrl + "recordCount");
+    };
+    return ApiManager;
+}());
+//# sourceMappingURL=ApiManager.js.map
\ No newline at end of file
diff --git a/ApiManager.js.map b/ApiManager.js.map
new file mode 100644
index 00000000..3c983737
--- /dev/null
+++ b/ApiManager.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"ApiManager.js","sourceRoot":"","sources":["ApiManager.ts"],"names":[],"mappings":";AAAA;IAGC,oBAAY,OAAe;QAC1B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACxB,CAAC;IAEO,8BAAS,GAAjB,UAAkB,OAAe;QAChC,OAAO,KAAK,CAAC,OAAO,CAAC;aACnB,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,GAAG,CAAC,EAAE,EAAE;gBACX,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;aAClB;iBAAM;gBACN,MAAM,IAAI,KAAK,CAAC,yBAAuB,GAAG,CAAC,MAAQ,CAAC,CAAC;aACrD;QACF,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,KAAK;YACX,MAAM,IAAI,KAAK,CAAC,mBAAiB,KAAO,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qCAAqC;IACrC,+BAAU,GAAV,UAAW,MAAc,EAAE,IAAY;QACtC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,qBAAgB,MAAM,YAAO,IAAM,CAAC,CAAC;IAC3E,CAAC;IAED,qCAAqC;IACrC,+BAAU,GAAV;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,YAAS,CAAC,CAAC;IACjD,CAAC;IAED,gDAAgD;IAChD,mCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,gBAAa,CAAC,CAAC;IACrD,CAAC;IACF,iBAAC;AAAD,CAAC,AAnCD,IAmCC"}
\ No newline at end of file
diff --git a/apiManager.js b/apiManager.js
index 4d1e7694..7a643444 100644
--- a/apiManager.js
+++ b/apiManager.js
@@ -1,28 +1,34 @@
+"use strict";
 var ApiManager = /** @class */ (function () {
     function ApiManager(mainUrl) {
         this.mainUrl = mainUrl;
     }
     ApiManager.prototype.fetchJson = function (mainUrl) {
         return fetch(mainUrl)
-            .then(function (res) { return res.text(); })
-            .then(function (data) { return JSON.parse(data); })
-            .catch(function (err) {
-            throw err;
+            .then(function (res) {
+            if (res.ok) {
+                return res.json();
+            }
+            else {
+                throw new Error("HTTP error! Status: " + res.status);
+            }
+        })
+            .catch(function (error) {
+            throw new Error("Fetch failed: " + error);
         });
     };
-    // This function  will handle retrieving the records from the api
+    /** Retrieves records from the api */
     ApiManager.prototype.getRecords = function (fromID, toID) {
         return this.fetchJson(this.mainUrl + "records?from=" + fromID + "&to=" + toID);
     };
-    // This function  will handle retrieving the columns from the api
+    /** Retrieves columns from the api */
     ApiManager.prototype.getColumns = function () {
         return this.fetchJson(this.mainUrl + "columns");
     };
-    // This function  will handle retrieving the record count from the api
+    /** Retrieves the number of records there are */
     ApiManager.prototype.getRecordCount = function () {
         return this.fetchJson(this.mainUrl + "recordCount");
     };
     return ApiManager;
 }());
-export { ApiManager };
 //# sourceMappingURL=apiManager.js.map
\ No newline at end of file
diff --git a/apiManager.js.map b/apiManager.js.map
index 66745660..3fab8b3c 100644
--- a/apiManager.js.map
+++ b/apiManager.js.map
@@ -1 +1 @@
-{"version":3,"file":"apiManager.js","sourceRoot":"","sources":["apiManager.ts"],"names":[],"mappings":"AAAA;IAEC,oBAAY,OAAe;QAC1B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACxB,CAAC;IAEO,8BAAS,GAAjB,UAAkB,OAAe;QAChC,OAAO,KAAK,CAAC,OAAO,CAAC;aACnB,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC;aACvB,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAhB,CAAgB,CAAC;aAC9B,KAAK,CAAC,UAAC,GAAG;YACV,MAAM,GAAG,CAAA;QACV,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,iEAAiE;IACjE,+BAAU,GAAV,UAAW,MAAc,EAAE,IAAY;QACtC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,qBAAgB,MAAM,YAAO,IAAM,CAAC,CAAC;IAC3E,CAAC;IAED,iEAAiE;IACjE,+BAAU,GAAV;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,YAAS,CAAC,CAAC;IACjD,CAAC;IAED,sEAAsE;IACtE,mCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,gBAAa,CAAC,CAAC;IACrD,CAAC;IACF,iBAAC;AAAD,CAAC,AA7BD,IA6BC"}
\ No newline at end of file
+{"version":3,"file":"apiManager.js","sourceRoot":"","sources":["apiManager.ts"],"names":[],"mappings":";AAAA;IAGC,oBAAY,OAAe;QAC1B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACxB,CAAC;IAEO,8BAAS,GAAjB,UAAkB,OAAe;QAChC,OAAO,KAAK,CAAC,OAAO,CAAC;aACnB,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,GAAG,CAAC,EAAE,EAAE;gBACX,OAAO,GAAG,CAAC,IAAI,EAAE,CAAA;aACjB;iBAAM;gBACN,MAAM,IAAI,KAAK,CAAC,yBAAuB,GAAG,CAAC,MAAQ,CAAC,CAAA;aACpD;QACF,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,KAAK;YACX,MAAM,IAAI,KAAK,CAAC,mBAAiB,KAAO,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qCAAqC;IACrC,+BAAU,GAAV,UAAW,MAAc,EAAE,IAAY;QACtC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,qBAAgB,MAAM,YAAO,IAAM,CAAC,CAAC;IAC3E,CAAC;IAED,qCAAqC;IACrC,+BAAU,GAAV;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,YAAS,CAAC,CAAC;IACjD,CAAC;IAED,gDAAgD;IAChD,mCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,gBAAa,CAAC,CAAC;IACrD,CAAC;IACF,iBAAC;AAAD,CAAC,AAnCD,IAmCC"}
\ No newline at end of file
diff --git a/apiManager.ts b/apiManager.ts
index 71d075b5..cac7ebd6 100644
--- a/apiManager.ts
+++ b/apiManager.ts
@@ -1,29 +1,35 @@
-export class ApiManager {
+class ApiManager {
 	private mainUrl: string;
+
 	constructor(mainUrl: string) {
 		this.mainUrl = mainUrl;
 	}
 
 	private fetchJson(mainUrl: string): Promise<any> {
 		return fetch(mainUrl)
-			.then(res => res.text())
-			.then(data => JSON.parse(data))
-			.catch((err) => {
-				throw err
+			.then(res => {
+				if (res.ok) {
+					return res.json()
+				} else {
+					throw new Error(`HTTP error! Status: ${res.status}`)
+				}
 			})
+			.catch(error => {
+				throw new Error(`Fetch failed: ${error}`);
+			});
 	}
 
-	// This function  will handle retrieving the records from the api
+	/** Retrieves records from the api */
 	getRecords(fromID: number, toID: number): Promise<string[][]> {
 		return this.fetchJson(`${this.mainUrl}records?from=${fromID}&to=${toID}`);
 	}
 
-	// This function  will handle retrieving the columns from the api
+	/** Retrieves columns from the api */
 	getColumns(): Promise<string[]> {
 		return this.fetchJson(`${this.mainUrl}columns`);
 	}
 
-	// This function  will handle retrieving the record count from the api
+	/** Retrieves the number of records there are */
 	getRecordCount(): Promise<number> {
 		return this.fetchJson(`${this.mainUrl}recordCount`);
 	}
diff --git a/app.ts b/app.ts
index 184e96ed..91129679 100644
--- a/app.ts
+++ b/app.ts
@@ -1,8 +1,22 @@
-import { ApiManager } from "./apiManager.js";
 const globals = globalInitializer();
 const apiManager = new ApiManager("http://localhost:2050/");
 let isFunctionRunning = false;
 
+// class DataHandler {
+// 	constructor() {
+// 		this.initialize = {
+// 			currentPage: 1,
+// 			firstPage: 1,
+// 			lastPage: 10,
+// 			currentFromID: 1,
+// 			currentToID: 20,
+// 			difference: 0,
+// 		};
+// 		this.apiManager = new ApiManager("http://localhost:2050/");
+// 		this.isFunctionRunning = false
+// 	}
+// }
+
 // The following would handle all the variable properties that is being changed a lot
 function globalInitializer() {
 	return {
@@ -146,9 +160,9 @@ function pageNumbers(start: number, end: number): Promise<void> {
 				$(this).addClass("active");
 				isFunctionRunning = false;
 				return showRecords(fromID, toID)
-				.catch((error) => {
-					throw error;
-				})
+					.catch((error) => {
+						throw error;
+					})
 			});
 		})
 		.then(() => {
@@ -167,28 +181,18 @@ function pageNumbers(start: number, end: number): Promise<void> {
 
 // Adding a click event to the next button of the pagination.
 $(".next").on("click", function () {
-	if (isFunctionRunning) {
-		return;
-	}
-	isFunctionRunning = true;
 	globals.firstPage = globals.lastPage + 1;
 	globals.lastPage = globals.firstPage + 9;
 	$(".pagination").empty();
 	pageNumbers(globals.firstPage, globals.lastPage);
-	isFunctionRunning = false;
 });
 
 // Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
 $(".prev").on("click", function () {
-	if (isFunctionRunning) {
-		return;
-	}
-	isFunctionRunning = true;
 	globals.lastPage = globals.firstPage - 1;
 	globals.firstPage = globals.lastPage - 9;
 	$(".pagination").empty();
 	pageNumbers(globals.firstPage, globals.lastPage);
-	isFunctionRunning = false;
 });
 
 // Event listener to prevent some characters to be entered in the input
@@ -203,10 +207,6 @@ $('.search-input').on('keydown', function (e) {
 
 // In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
 $(".search-input").on("input", function (this: HTMLInputElement, event: any) {
-	if (isFunctionRunning) {
-		return;
-	}
-	isFunctionRunning = true;
 	event.preventDefault();
 	return apiManager.getRecordCount()
 		.then((count) => {
@@ -243,7 +243,6 @@ $(".search-input").on("input", function (this: HTMLInputElement, event: any) {
 			} else {
 				$('.results-box').remove();
 			}
-			isFunctionRunning = false;
 		})
 		.catch((error) => {
 			throw error;
@@ -252,10 +251,7 @@ $(".search-input").on("input", function (this: HTMLInputElement, event: any) {
 
 // After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
 function resultsSelect(event: any) {
-	if (isFunctionRunning) {
-		return;
-	}
-	isFunctionRunning = true;
+	$('.results-select').prop('disabled', true)
 	let startID: number;
 	let endID: number;
 	let pageEnd: number;
@@ -285,6 +281,9 @@ function resultsSelect(event: any) {
 		.then(() => {
 			return showRecords(startID, endID);
 		})
+		.then(() => {
+			$('.results-select').prop('disabled', false)
+		})
 		.catch((error) => {
 			throw error;
 		})
diff --git a/index.html b/index.html
index e76203c7..4d761359 100644
--- a/index.html
+++ b/index.html
@@ -1,41 +1,38 @@
 <!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 type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
+	<link rel="stylesheet" href="./style.css">
+	<script defer src="./apiManager.js"></script>
+	<script defer src="./app.js"></script>
 </head>
+
 <body>
-    <!-- <h1 class="header">JavaScript Onboarding Project</h1> -->
-    <div class="heading">
-        <p class="results"></p>
-        <div class="search-container" id="search-container">
-			<input class="search-input" type="number" placeholder="Search a record by ID" min="1" max="999999" required >            
-        </div>
-    </div>
-    <div class="table-container">
-        <table class="table">
-            <thead>
-            </thead>
-            <tbody>
+	<div class="heading">
+		<p class="results"></p>
+		<div class="search-container" id="search-container">
+			<input class="search-input" type="number" placeholder="Search a record by ID" min="1" max="999999" required>
+		</div>
+	</div>
+	<div class="table-container">
+		<table class="table">
+			<thead>
+			</thead>
+			<tbody>
 				<tr class="head-row">
-            </tbody>
-		</tr>
-	</table>
-    </div>
-    <div class="wrapper">
+			</tbody>
+			</tr>
+		</table>
+	</div>
+	<div class="wrapper">
 		<a class="prev">&laquo;</a>
-        <div class="pagination">
-			
+		<div class="pagination">
+
 		</div>
-        <a class="next">&raquo;</a>
-    </div>
-	<script type="module" src="./app.js"></script>
-	<script type="module" src="./apiManager.js"></script>
+		<a class="next">&raquo;</a>
+	</div>
 </body>
 
 </html>
-
- 
-
- 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 25290ab4..f1ae52be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,10 +20,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "3.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.2.tgz",
-      "integrity": "sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==",
-      "dev": true
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
+      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w=="
     }
   }
 }
diff --git a/package.json b/package.json
index 8e32a541..b8b0f798 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,11 @@
   "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",
-  "dependencies": {},
+  "dependencies": {
+    "typescript": "^3.8.3"
+  },
   "devDependencies": {
-    "@types/jquery": "^3.5.17",
-    "typescript": "^3.9.2"
+    "@types/jquery": "^3.5.17"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
diff --git a/style.css b/style.css
index ac4d06c9..f5013010 100644
--- a/style.css
+++ b/style.css
@@ -1,244 +1,246 @@
-
-@import url('https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600&display=swap');
 *,
 *::before,
 *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
- 
+
 body {
-    background-color: #141A27;
-    background-attachment: fixed;
-    height: 100vh;
+	background-color: #141A27;
+	background-attachment: fixed;
+	height: 100vh;
 }
- 
+
 body::-webkit-scrollbar {
-    display: none;
+	display: none;
 }
- 
+
 h1 {
-    text-align: center;
-    font-family: 'Atma', cursive;
-    font-size: 2.5rem;
-    color: #4DD2C6;
+	text-align: center;
+	font-family: 'Atma', cursive;
+	font-size: 2.5rem;
+	color: #4DD2C6;
 }
- 
+
 .results {
-    font-family: 'Atma', cursive;
-    font-weight: 500;
-    font-size: 2rem;
-    color: #A1AFC2;
+	font-family: monospace;
+	font-weight: 500;
+	font-size: 2rem;
+	color: #A1AFC2;
 }
- 
+
 .heading {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 2rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem 2rem;
 }
- 
+
 .table-container {
-    display: flex;
-    flex-direction: column;
-    height: 80vh; 
-    border: 1px solid #4DD2C6;
-    box-sizing: border-box;
-    padding: 20px; 
-    overflow: hidden; 
-  }
- 
+	display: flex;
+	flex-direction: column;
+	height: 80vh;
+	border: 1px solid #4DD2C6;
+	box-sizing: border-box;
+	padding: 20px;
+	overflow: hidden;
+}
+
 .table-container::-webkit-scrollbar {
-    display: none;
+	display: none;
 }
- 
+
 table {
-    flex-grow: 1;
-    width: 100%; 
-    border-collapse: collapse;
-    table-layout: fixed; 
-  }
- 
+	flex-grow: 1;
+	width: 100%;
+	border-collapse: collapse;
+	table-layout: fixed;
+}
+
 th {
-    font-family: 'Atma', cursive;
-    font-size: 1rem;
-    border: 0.5px solid #4DD2C6;
-    color: #4DD2C6;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-height: 10px; 
-    padding: 2px;
+	font-family: 'Atma', cursive;
+	font-size: 1rem;
+	border: 0.5px solid #4DD2C6;
+	color: #4DD2C6;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-height: 10px;
+	padding: 2px;
 }
 
 thead {
-    /* position: sticky; */
-    /* top: 0; */
-    border: 1px solid #4DD2C6 !important;
-    background-color: #141A27;
-    border: 1px solid white !important;
+	border: 1px solid #4DD2C6 !important;
+	background-color: #141A27;
+	border: 1px solid white !important;
 }
- 
+
 .body-row td {
-    text-align: center;
-    font-family: 'Atma', cursive;
-    color: #A1AFC2;
-    font-weight: 500;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-height: 10px; 
-    padding: 2px;
+	text-align: center;
+	font-family: 'Atma', cursive;
+	color: #A1AFC2;
+	font-weight: 500;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-height: 10px;
+	padding: 2px;
 }
 
 .search-input {
-    height: 30px;
-    width: 180px;
-    border: 0px;
-    background-color: #ffffff36;
-    color: white;
-    font-family: 'Atma', cursive;
-    letter-spacing: 2px;
-    padding-left: 10px;
-}
- 
-input:focus{
-    outline: 0px solid black;
-    outline-offset:3px;
-}
- 
+	height: 30px;
+	width: 180px;
+	border: 0px;
+	background-color: #ffffff36;
+	color: white;
+	font-family: 'Atma', cursive;
+	letter-spacing: 2px;
+	padding-left: 10px;
+}
+
+input:focus {
+	outline: 0px solid black;
+	outline-offset: 3px;
+}
+
 .wrapper {
-    position: fixed;
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 0);
+	position: fixed;
+	bottom: 0;
+	left: 50%;
+	transform: translate(-50%, 0);
 }
- 
+
 .pagination {
-    display: flex;
-    justify-content: center;
-    /* padding-top: 30px; */
-}
- 
- a {
-    text-decoration: none;
-    color: black;
-    padding: 9px;
-    border: 0px solid #3b3b3b;
-    margin: 3px;
-    background-color: #ffffff36;
-    box-shadow: inset 0px 0px 20px -10px rgba(255, 255, 255, 0.438);
-
-}
- 
+	display: flex;
+	justify-content: center;
+	/* padding-top: 30px; */
+}
+
+a {
+	text-decoration: none;
+	color: black;
+	padding: 9px;
+	border: 0px solid #3b3b3b;
+	margin: 3px;
+	background-color: #ffffff36;
+	box-shadow: inset 0px 0px 20px -10px rgba(255, 255, 255, 0.438);
+
+}
+
 .pagination a:hover {
-    color: white;
-    background-color: #4DD2C6;
-    border:0px solid #4DD2C6 ;
+	color: white;
+	background-color: #4DD2C6;
+	border: 0px solid #4DD2C6;
 }
- 
+
 .active {
-    color: white !important;
-    border: 1px solid #4DD2C6 !important;  
+	color: white !important;
+	border: 1px solid #4DD2C6 !important;
 }
 
-.next, .prev {
-    color: #4DD2C6 !important;
+.next,
+.prev {
+	color: #4DD2C6 !important;
 }
 
-.next:hover, .prev:hover {
-    color: white !important;
+.next:hover,
+.prev:hover {
+	color: white !important;
 }
 
 .header {
-    height: 5vh;
+	height: 5vh;
 }
+
 .heading {
-    height: 5vh;
+	height: 5vh;
 }
+
 .table-container {
-    height: 80vh;
+	height: 80vh;
 }
+
 .wrapper {
-    height: 10vh;
-    display: flex;
-    align-items: center;
+	height: 10vh;
+	display: flex;
+	align-items: center;
 }
 
 .table-container {
-  display: flex;
-  flex-direction: column;
-  height: 80vh; 
-  box-sizing: border-box;
-  padding: 20px; 
-  overflow: hidden; 
+	display: flex;
+	flex-direction: column;
+	height: 80vh;
+	box-sizing: border-box;
+	padding: 20px;
+	overflow: hidden;
 }
 
 table {
-  flex-grow: 2;
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed; 
+	flex-grow: 2;
+	width: 100%;
+	border-collapse: collapse;
+	table-layout: fixed;
 }
 
-th, td {
-  padding: 0.2px; 
-  text-align: center;
-  white-space: nowrap; 
-  text-overflow: ellipsis; 
-  max-height: fit-content; 
+th,
+td {
+	padding: 0.2px;
+	text-align: center;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-height: fit-content;
 }
 
 .search-container {
-    position: relative;
+	position: relative;
 }
 
 .results-box {
-    width: 180px;
-    height: 50px;
-    background-color: white;
-    position: absolute;
-    top: 189;
+	width: 180px;
+	height: 50px;
+	background-color: white;
+	position: absolute;
+	top: 189;
 }
 
 .results-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
 }
 
 .message {
-    text-align: center;
+	text-align: center;
 }
 
 a {
-    cursor: pointer;
+	cursor: pointer;
 }
 
 .loader {
-    border: 4px solid #4DD2C6;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    border-right-color: transparent;
-    animation: rot 1s linear infinite;
-    box-shadow: 0px 0px 20px #4DD2C6 inset;
-    position: fixed;
-    margin: auto;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-
-  .results-select {
-    font-family: 'Atma', cursive;
-    font-size: 1.4rem;
-  }
-  
-  @keyframes rot {
-    100% {
-      transform: rotate(360deg);
-      
-    }
-  }
\ No newline at end of file
+	border: 4px solid #4DD2C6;
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	border-right-color: transparent;
+	animation: rot 1s linear infinite;
+	box-shadow: 0px 0px 20px #4DD2C6 inset;
+	position: fixed;
+	margin: auto;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
+
+.results-select {
+	font-family: 'Atma', cursive;
+	font-size: 1.4rem;
+}
+
+@keyframes rot {
+	100% {
+		transform: rotate(360deg);
+
+	}
+}
diff --git a/tsconfig.json b/tsconfig.json
index 09ff608c..dbf43618 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,6 @@
 			"dom",
 			"es2016"
 		],
-		"types": ["jquery"],
 	},
 	"include": [
 		"./**/*.ts"

From ad77763eff3f1ace78f78109813ec555bef68203 Mon Sep 17 00:00:00 2001
From: Maxwill <114737293+MaxTF141@users.noreply.github.com>
Date: Mon, 11 Sep 2023 16:50:23 +0200
Subject: [PATCH 24/40] Delete apiManager.js

---
 apiManager.js | 34 ----------------------------------
 1 file changed, 34 deletions(-)
 delete mode 100644 apiManager.js

diff --git a/apiManager.js b/apiManager.js
deleted file mode 100644
index 7a643444..00000000
--- a/apiManager.js
+++ /dev/null
@@ -1,34 +0,0 @@
-"use strict";
-var ApiManager = /** @class */ (function () {
-    function ApiManager(mainUrl) {
-        this.mainUrl = mainUrl;
-    }
-    ApiManager.prototype.fetchJson = function (mainUrl) {
-        return fetch(mainUrl)
-            .then(function (res) {
-            if (res.ok) {
-                return res.json();
-            }
-            else {
-                throw new Error("HTTP error! Status: " + res.status);
-            }
-        })
-            .catch(function (error) {
-            throw new Error("Fetch failed: " + error);
-        });
-    };
-    /** Retrieves records from the api */
-    ApiManager.prototype.getRecords = function (fromID, toID) {
-        return this.fetchJson(this.mainUrl + "records?from=" + fromID + "&to=" + toID);
-    };
-    /** Retrieves columns from the api */
-    ApiManager.prototype.getColumns = function () {
-        return this.fetchJson(this.mainUrl + "columns");
-    };
-    /** Retrieves the number of records there are */
-    ApiManager.prototype.getRecordCount = function () {
-        return this.fetchJson(this.mainUrl + "recordCount");
-    };
-    return ApiManager;
-}());
-//# sourceMappingURL=apiManager.js.map
\ No newline at end of file

From 8704cb75140842a44da8a4693774442840cc0a20 Mon Sep 17 00:00:00 2001
From: Maxwill <114737293+MaxTF141@users.noreply.github.com>
Date: Mon, 11 Sep 2023 16:51:43 +0200
Subject: [PATCH 25/40] Delete ApiManager.js

---
 ApiManager.js | 34 ----------------------------------
 1 file changed, 34 deletions(-)
 delete mode 100644 ApiManager.js

diff --git a/ApiManager.js b/ApiManager.js
deleted file mode 100644
index 0990d652..00000000
--- a/ApiManager.js
+++ /dev/null
@@ -1,34 +0,0 @@
-"use strict";
-var ApiManager = /** @class */ (function () {
-    function ApiManager(mainUrl) {
-        this.mainUrl = mainUrl;
-    }
-    ApiManager.prototype.fetchJson = function (mainUrl) {
-        return fetch(mainUrl)
-            .then(function (res) {
-            if (res.ok) {
-                return res.json();
-            }
-            else {
-                throw new Error("HTTP error! Status: " + res.status);
-            }
-        })
-            .catch(function (error) {
-            throw new Error("Fetch failed: " + error);
-        });
-    };
-    /** Retrieves records from the api */
-    ApiManager.prototype.getRecords = function (fromID, toID) {
-        return this.fetchJson(this.mainUrl + "records?from=" + fromID + "&to=" + toID);
-    };
-    /** Retrieves columns from the api */
-    ApiManager.prototype.getColumns = function () {
-        return this.fetchJson(this.mainUrl + "columns");
-    };
-    /** Retrieves the number of records there are */
-    ApiManager.prototype.getRecordCount = function () {
-        return this.fetchJson(this.mainUrl + "recordCount");
-    };
-    return ApiManager;
-}());
-//# sourceMappingURL=ApiManager.js.map
\ No newline at end of file

From cff0b57ab7f360f988116d05aa398da6165c8d7e Mon Sep 17 00:00:00 2001
From: Maxwill <114737293+MaxTF141@users.noreply.github.com>
Date: Mon, 11 Sep 2023 16:51:55 +0200
Subject: [PATCH 26/40] Delete apiManager.js.map

---
 apiManager.js.map | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 apiManager.js.map

diff --git a/apiManager.js.map b/apiManager.js.map
deleted file mode 100644
index 3fab8b3c..00000000
--- a/apiManager.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"apiManager.js","sourceRoot":"","sources":["apiManager.ts"],"names":[],"mappings":";AAAA;IAGC,oBAAY,OAAe;QAC1B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACxB,CAAC;IAEO,8BAAS,GAAjB,UAAkB,OAAe;QAChC,OAAO,KAAK,CAAC,OAAO,CAAC;aACnB,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,GAAG,CAAC,EAAE,EAAE;gBACX,OAAO,GAAG,CAAC,IAAI,EAAE,CAAA;aACjB;iBAAM;gBACN,MAAM,IAAI,KAAK,CAAC,yBAAuB,GAAG,CAAC,MAAQ,CAAC,CAAA;aACpD;QACF,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,KAAK;YACX,MAAM,IAAI,KAAK,CAAC,mBAAiB,KAAO,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qCAAqC;IACrC,+BAAU,GAAV,UAAW,MAAc,EAAE,IAAY;QACtC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,qBAAgB,MAAM,YAAO,IAAM,CAAC,CAAC;IAC3E,CAAC;IAED,qCAAqC;IACrC,+BAAU,GAAV;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,YAAS,CAAC,CAAC;IACjD,CAAC;IAED,gDAAgD;IAChD,mCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,gBAAa,CAAC,CAAC;IACrD,CAAC;IACF,iBAAC;AAAD,CAAC,AAnCD,IAmCC"}
\ No newline at end of file

From 3198ed0c6c9a2dfab40151a3b9419ca76205f4cc Mon Sep 17 00:00:00 2001
From: Maxwill <114737293+MaxTF141@users.noreply.github.com>
Date: Mon, 11 Sep 2023 16:52:05 +0200
Subject: [PATCH 27/40] Delete ApiManager.js.map

---
 ApiManager.js.map | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 ApiManager.js.map

diff --git a/ApiManager.js.map b/ApiManager.js.map
deleted file mode 100644
index 3c983737..00000000
--- a/ApiManager.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"ApiManager.js","sourceRoot":"","sources":["ApiManager.ts"],"names":[],"mappings":";AAAA;IAGC,oBAAY,OAAe;QAC1B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACxB,CAAC;IAEO,8BAAS,GAAjB,UAAkB,OAAe;QAChC,OAAO,KAAK,CAAC,OAAO,CAAC;aACnB,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,GAAG,CAAC,EAAE,EAAE;gBACX,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;aAClB;iBAAM;gBACN,MAAM,IAAI,KAAK,CAAC,yBAAuB,GAAG,CAAC,MAAQ,CAAC,CAAC;aACrD;QACF,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,KAAK;YACX,MAAM,IAAI,KAAK,CAAC,mBAAiB,KAAO,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qCAAqC;IACrC,+BAAU,GAAV,UAAW,MAAc,EAAE,IAAY;QACtC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,qBAAgB,MAAM,YAAO,IAAM,CAAC,CAAC;IAC3E,CAAC;IAED,qCAAqC;IACrC,+BAAU,GAAV;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,YAAS,CAAC,CAAC;IACjD,CAAC;IAED,gDAAgD;IAChD,mCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,gBAAa,CAAC,CAAC;IACrD,CAAC;IACF,iBAAC;AAAD,CAAC,AAnCD,IAmCC"}
\ No newline at end of file

From 530cef423ea1cfcda7011ba53446a1f02f319613 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Mon, 11 Sep 2023 16:53:58 +0200
Subject: [PATCH 28/40] removed js files

---
 ApiManager.js     | 34 ----------------------------------
 ApiManager.js.map |  1 -
 2 files changed, 35 deletions(-)
 delete mode 100644 ApiManager.js
 delete mode 100644 ApiManager.js.map

diff --git a/ApiManager.js b/ApiManager.js
deleted file mode 100644
index 0990d652..00000000
--- a/ApiManager.js
+++ /dev/null
@@ -1,34 +0,0 @@
-"use strict";
-var ApiManager = /** @class */ (function () {
-    function ApiManager(mainUrl) {
-        this.mainUrl = mainUrl;
-    }
-    ApiManager.prototype.fetchJson = function (mainUrl) {
-        return fetch(mainUrl)
-            .then(function (res) {
-            if (res.ok) {
-                return res.json();
-            }
-            else {
-                throw new Error("HTTP error! Status: " + res.status);
-            }
-        })
-            .catch(function (error) {
-            throw new Error("Fetch failed: " + error);
-        });
-    };
-    /** Retrieves records from the api */
-    ApiManager.prototype.getRecords = function (fromID, toID) {
-        return this.fetchJson(this.mainUrl + "records?from=" + fromID + "&to=" + toID);
-    };
-    /** Retrieves columns from the api */
-    ApiManager.prototype.getColumns = function () {
-        return this.fetchJson(this.mainUrl + "columns");
-    };
-    /** Retrieves the number of records there are */
-    ApiManager.prototype.getRecordCount = function () {
-        return this.fetchJson(this.mainUrl + "recordCount");
-    };
-    return ApiManager;
-}());
-//# sourceMappingURL=ApiManager.js.map
\ No newline at end of file
diff --git a/ApiManager.js.map b/ApiManager.js.map
deleted file mode 100644
index 3c983737..00000000
--- a/ApiManager.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"ApiManager.js","sourceRoot":"","sources":["ApiManager.ts"],"names":[],"mappings":";AAAA;IAGC,oBAAY,OAAe;QAC1B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACxB,CAAC;IAEO,8BAAS,GAAjB,UAAkB,OAAe;QAChC,OAAO,KAAK,CAAC,OAAO,CAAC;aACnB,IAAI,CAAC,UAAA,GAAG;YACR,IAAI,GAAG,CAAC,EAAE,EAAE;gBACX,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;aAClB;iBAAM;gBACN,MAAM,IAAI,KAAK,CAAC,yBAAuB,GAAG,CAAC,MAAQ,CAAC,CAAC;aACrD;QACF,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,KAAK;YACX,MAAM,IAAI,KAAK,CAAC,mBAAiB,KAAO,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qCAAqC;IACrC,+BAAU,GAAV,UAAW,MAAc,EAAE,IAAY;QACtC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,qBAAgB,MAAM,YAAO,IAAM,CAAC,CAAC;IAC3E,CAAC;IAED,qCAAqC;IACrC,+BAAU,GAAV;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,YAAS,CAAC,CAAC;IACjD,CAAC;IAED,gDAAgD;IAChD,mCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAI,IAAI,CAAC,OAAO,gBAAa,CAAC,CAAC;IACrD,CAAC;IACF,iBAAC;AAAD,CAAC,AAnCD,IAmCC"}
\ No newline at end of file

From 53ca9e56099d5708d815e1b0113f53c39db69c68 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Wed, 13 Sep 2023 16:57:19 +0200
Subject: [PATCH 29/40] requested changes still in progress

---
 apiManager.ts |   1 +
 app.ts        | 726 ++++++++++++++++++++++++++------------------------
 style.css     |   6 +-
 3 files changed, 376 insertions(+), 357 deletions(-)

diff --git a/apiManager.ts b/apiManager.ts
index cac7ebd6..7a69e02d 100644
--- a/apiManager.ts
+++ b/apiManager.ts
@@ -31,6 +31,7 @@ class ApiManager {
 
 	/** Retrieves the number of records there are */
 	getRecordCount(): Promise<number> {
+		let test = `${this.mainUrl}recordCount`
 		return this.fetchJson(`${this.mainUrl}recordCount`);
 	}
 }
diff --git a/app.ts b/app.ts
index 91129679..a8cf9ad1 100644
--- a/app.ts
+++ b/app.ts
@@ -1,387 +1,405 @@
-const globals = globalInitializer();
-const apiManager = new ApiManager("http://localhost:2050/");
-let isFunctionRunning = false;
+class DataHandler {
+	/** It tracks if the showRecords function is running and would the value would be false if it's not. */
+	private isFunctionRunning: boolean;
+	/** This is an instance of the ApiManager class and passing a string when being used. */
+	private apiManager: ApiManager;
+	/** The following track what page the user is on when navigating through the web app. */
+	private currentPage: number;
+	/** This tracks the first page of the pagination that is being displayed. */
+	private firstPage: number;
+	/** This will track the last page that is being displayed. */
+	private lastPage: number;
+	/** Tracks the current starting ID in the table. */
+	private currentFromID: number;
+	/** Track the current last ID in the table. */
+	private currentToID: number;
+	/** This is the calculation for the difference between the original ID  based on the currentPage
+	 * and the currentID which is based on the resizing of the table. */
+	private difference: number;
+	/** A timer that handles window resizing events and store the return type of setTimeout. */
+	private resizeTimer: ReturnType<typeof setTimeout> | null;
 
-// class DataHandler {
-// 	constructor() {
-// 		this.initialize = {
-// 			currentPage: 1,
-// 			firstPage: 1,
-// 			lastPage: 10,
-// 			currentFromID: 1,
-// 			currentToID: 20,
-// 			difference: 0,
-// 		};
-// 		this.apiManager = new ApiManager("http://localhost:2050/");
-// 		this.isFunctionRunning = false
-// 	}
-// }
-
-// The following would handle all the variable properties that is being changed a lot
-function globalInitializer() {
-	return {
-		currentPage: 1,
-		firstPage: 1,
-		lastPage: 10,
-		currentFromID: 1,
-		currentToID: 20,
-		difference: 0,
-	};
-}
-
-// This function will loop through and display the appropriate columns in the correct order.
-function showColumns(): Promise<void> {
-	$(".head-row").empty();
-	return apiManager.getColumns()
-		.then((columns) => {
-			for (let i = 0; i < columns.length; i++) {
-				$("thead").append(`<th>${columns[i]}</th>`);
-			}
-		})
-}
-
-// This function will loop through and display the records on the table.
-function showRecords(fromID: number, toID: number): Promise<void> {
-	if (isFunctionRunning) {
-		isFunctionRunning = false;
-		return Promise.resolve(undefined);;
+	constructor() {
+		this.isFunctionRunning = false;
+		this.apiManager = new ApiManager("http://localhost:2050/");
+		this.currentPage = 1;
+		this.firstPage = 1;
+		this.lastPage = 10;
+		this.currentFromID = 0;
+		this.currentToID = 20;
+		this.difference = 0;
+		this.resizeTimer = null;
 	}
-	isFunctionRunning = true;
-	let condition: number;
-	let inputNumber: string;
-	let stringCount: string;
-	return apiManager.getRecordCount()
-		.then((count) => {
-			inputNumber = input();
-			const maxRecords = recordsPerPage();
-			condition = Math.ceil(count / maxRecords);
-			$("tbody").empty();
-			loader();
-			globals.currentToID = toID;
-			if (toID >= count) {
-				toID = count;
-				fromID = toID - (maxRecords - 1);
-			} else if (globals.currentPage === 1) {
-				fromID = 1;
-			};
-			stringCount = count.toLocaleString().replace(/,/g, " ");
-			return apiManager.getRecords(fromID, toID);
-		})
-		.then((records) => {
-			$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`);
-			for (let i = 0; i < records.length; i++) {
-				$("tbody").append(`<tr class="body-row">`);
-				for (let n = 0; n < records[i].length; n++) {
-					$(".body-row:last-child").append(`<td><span>${records[i][n]}</span></td>`);
-				}
-				$("tbody").append(`</tr>`);
-			};
 
-			$("span").each(function () {
-				const lowercasedID = $(this).text();
-				if (lowercasedID == inputNumber) {
-					$(this).css({ "background-color": "#FFFF00", "color": "black  " });
-				} else {
-					$(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
+	/** Returning columns and rendering it on the table in the dom. */
+	showColumns(): Promise<void> {
+		$(".head-row").empty();
+		return this.apiManager.getColumns()
+			.then(columns => {
+				for (const column of columns) {
+					$("thead").append(`<th>${column}</th>`);
 				}
+			})
+			.catch(error => {
+				throw new Error(`Failed to retrieve columns: ${error}`)
 			});
+	}
 
-			if (condition >= fromID && condition <= toID) {
-				$(".next").css({ display: "none" });
-			}
-			isFunctionRunning = false;
-		})
-		.catch((error) => {
-			throw error;
-		})
-}
+	// This function will loop through and display the records on the table.
+	showRecords(fromID: number, toID: number): Promise<void> {
+		if (this.isFunctionRunning) {
+			return Promise.resolve(undefined);;
+		}
+		this.isFunctionRunning = true;
+		let condition: number;
+		let inputNumber: string;
+		let stringCount: string;
+		return this.apiManager.getRecordCount()
+			.then(count => {
+				inputNumber = this.input();
+				const maxRecords = this.recordsPerPage();
+				condition = Math.ceil(count / maxRecords);
+				$("tbody").empty();
+				this.loader();
+				if (toID >= count) {
+					toID = count;
+					fromID = toID - (maxRecords - 1);
+				} else if (this.currentPage === 1) {
+					fromID = 0;
+				};
+				this.currentToID = toID;
+				stringCount = count.toLocaleString().replace(/,/g, " ");
+				return this.apiManager.getRecords(fromID, toID);
+			})
+			.then(records => {
+				$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`);
+				for (let i = 0; i < records.length; i++) {
+					$("tbody").append(`<tr class="body-row">`);
+					for (let n = 0; n < records[i].length; n++) {
+						$(".body-row:last-child").append(`<td><span>${records[i][n]}</span></td>`);
+					}
+					$("tbody").append(`</tr>`);
+				};
 
-// The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
-function pageNumbers(start: number, end: number): Promise<void> {
-	return apiManager.getRecordCount()
-		.then((count) => {
-			$('.pagination').empty();
-			let stringCount = count.toLocaleString().replace(/,/g, " ");
-			let maxRecords = recordsPerPage();
-			let condition = Math.floor(count / maxRecords) + 1;
-			if (condition <= end && condition >= start) {
-				if (999999 % maxRecords === 0) {
-					end = (condition - 1);
-				} else {
-					end = condition;
-				}
-				$(".next").css({ display: "none" });
-			} else {
-				$(".next").css({ display: "block" });
-			}
-			if (start < 1) {
-				start = 1;
-			}
-			globals.firstPage = start;
-			globals.lastPage = end;
-			for (let i = start; i <= end; i++) {
-				$(".pagination").append(
-					`<a id="${i}" class="pagination-item">${i}</a>`
-				);
-			}
-			if (globals.firstPage === 1) {
-				$(".prev").css({ display: "none" });
-			} else {
-				$(".prev").css({ display: "block" });
-			}
-			isFunctionRunning = false;
-			return count;
-		})
-		.then((count) => {
-			// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
-			$(".pagination-item").on("click", function dynamicPagination() {
-				if (isFunctionRunning) {
-					return;
+				$("span").each(function () {
+					const lowercasedID = $(this).text();
+					if (lowercasedID == inputNumber) {
+						$(this).css({ "background-color": "#FFFF00", "color": "black  " });
+					} else {
+						$(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
+					}
+				});
+
+				if (condition >= fromID && condition <= toID) {
+					$(".next").css({ display: "none" });
 				}
-				isFunctionRunning = true;
-				$('.search-input').val('');
-				globals.currentPage = parseInt($(this).attr("id") as any);
-				const maxRecords = recordsPerPage();
-				let fromID = Math.ceil(globals.currentPage * maxRecords - (maxRecords - 1));
-				if (globals.difference > 0 && globals.difference < maxRecords) {
-					fromID = fromID + globals.difference;
+				this.isFunctionRunning = false;
+			})
+			.catch(error => {
+				throw new Error(`Failed to retrieve the records: ${error}`);
+			})
+	}
+
+	// The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
+	pageNumbers(start: number, end: number): Promise<void> {
+		return this.apiManager.getRecordCount()
+			.then(count => {
+				$('.pagination').empty();
+				let stringCount = count.toLocaleString().replace(/,/g, " ");
+				let maxRecords = this.recordsPerPage();
+				let condition = Math.floor(count / maxRecords) + 1;
+				if (condition <= end && condition >= start) {
+					if (999999 % maxRecords === 0) {
+						end = (condition - 1);
+					} else {
+						end = condition;
+					}
+					$(".next").css({ display: "none" });
+				} else {
+					$(".next").css({ display: "block" });
 				}
-				if (globals.currentPage === 1) {
-					globals.currentFromID = 1;
+				if (start < 1) {
+					start = 1;
 				}
-				let toID = fromID + (maxRecords - 1);
-				if (fromID > count + 1 || toID > count + 1) {
-					toID = count;
-					fromID = toID - maxRecords;
-					globals.currentFromID = fromID;
+				this.firstPage = start;
+				this.lastPage = end;
+				for (let i = start; i <= end; i++) {
+					let isActive = i == this.currentPage;
+					$(".pagination").append(
+						`<a id="${i}" class="pagination-item ${isActive ? 'active' : ''}">${i}</a>`
+					);
 				}
-				globals.currentFromID = fromID;
-				$(".pagination-item").removeClass("active");
-				$(this).addClass("active");
-				isFunctionRunning = false;
-				return showRecords(fromID, toID)
-					.catch((error) => {
-						throw error;
-					})
-			});
-		})
-		.then(() => {
-			$(".pagination-item").each(function () {
-				let elementID = $(this).attr('id') as string;
-				let currentPageString = globals.currentPage.toString();
-				if (elementID == currentPageString) {
-					$(this).addClass('active');
+				if (this.firstPage === 1) {
+					$(".prev").css({ display: "none" });
+				} else {
+					$(".prev").css({ display: "block" });
 				}
-			});
-		})
-		.catch((error) => {
-			throw error;
-		})
-}
+			})
+			.catch(error => {
+				throw new Error(`Failed `)
+			})
+	}
 
-// Adding a click event to the next button of the pagination.
-$(".next").on("click", function () {
-	globals.firstPage = globals.lastPage + 1;
-	globals.lastPage = globals.firstPage + 9;
-	$(".pagination").empty();
-	pageNumbers(globals.firstPage, globals.lastPage);
-});
 
-// Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
-$(".prev").on("click", function () {
-	globals.lastPage = globals.firstPage - 1;
-	globals.firstPage = globals.lastPage - 9;
-	$(".pagination").empty();
-	pageNumbers(globals.firstPage, globals.lastPage);
-});
+	initializePagination() {
+		// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
+		$(".pagination").on("click", ".pagination-item", (event) => {
+			$('.pagination-item').prop('disabled', true);
+			return this.apiManager.getRecordCount()
+				.then(count => {
+					$('.search-input').val('');
+					this.currentPage = parseInt($(event.target).attr("id") as any);
+					console.log("$(this):", $(event.target))
+					const maxRecords = this.recordsPerPage();
+					let fromID = Math.ceil(this.currentPage * maxRecords - (maxRecords));
+					if (this.difference > 0 && this.difference < maxRecords) {
+						fromID = fromID + this.difference;
+					}
+					if (this.currentPage === 1) {
+						this.currentFromID = 1;
+					}
+					let toID = fromID + (maxRecords);
+					if (fromID > count + 1 || toID > count + 1) {
+						toID = count;
+						fromID = toID - maxRecords;
+						this.currentFromID = fromID;
+					}
+					this.currentFromID = fromID;
+					$(".pagination-item").removeClass("active");
+					$(event.target).addClass("active");
+					const self = this;
+					$(".pagination-item").each(function () {
+						let elementID = $(this).attr('id') as string;
+						let currentPageString = self.currentPage.toString();
+						if (elementID == currentPageString) {
+							$(this).addClass('active');
+						}
+					});
 
-// Event listener to prevent some characters to be entered in the input
-$('.search-input').on('keydown', function (e) {
-	if (e.key === 'e' || e.key === 'E' || e.key === '.' || e.key === '+' || e.key === '*' || e.key === '-') {
-		e.preventDefault();
-	}
-	if (e.key === 'Enter') {
-		$('.results-box').trigger('click');
+					return this.showRecords(fromID, toID)
+						.then(() => {
+							$('.pagination-item').prop('disabled', false)
+						})
+				})
+				.catch(error => {
+					throw new Error(`Failed showing the records when clicking on page number: ${error}`);
+				});
+		})
+		// Adding a click event to the next button of the pagination.
+		$(".next").on("click", () => {
+			this.firstPage = this.lastPage + 1;
+			this.lastPage = this.firstPage + 9;
+			$(".pagination").empty();
+			this.pageNumbers(this.firstPage, this.lastPage);
+		});
+
+		// Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
+		$(".prev").on("click", () => {
+			this.lastPage = this.firstPage - 1;
+			this.firstPage = this.lastPage - 9;
+			$(".pagination").empty();
+			this.pageNumbers(this.firstPage, this.lastPage);
+		});
 	}
-});
 
-// In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
-$(".search-input").on("input", function (this: HTMLInputElement, event: any) {
-	event.preventDefault();
-	return apiManager.getRecordCount()
-		.then((count) => {
-			let inputNumber = input();
-			let inputNumberInt: any = parseInt(inputNumber);
-			if (inputNumber !== '') {
-				const maxRecords = recordsPerPage();
-				let end = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
-				if (end > (count + 1)) {
-					end = count;
-					globals.currentToID = end;
-				}
-				let start = (end - (maxRecords - 1));
-				globals.currentPage = Math.floor(end / maxRecords);
-				if (inputNumberInt < 1000000 && inputNumberInt > 0) {
-					if (end === 1000000) {
-						end = end - 1;
+	initializeSearch() {
+		// Event listener to prevent some characters to be entered in the input
+		$('.search-input').on('keydown', (e) => {
+			if (e.key === 'e' || e.key === 'E' || e.key === '.' || e.key === '+' || e.key === '*' || e.key === '-') {
+				e.preventDefault();
+			}
+			if (e.key === 'Enter') {
+				$('.heading').trigger('click', '.results-box');
+			}
+		});
+
+		// In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
+		$(".search-input").on("input", (event: any) => {
+			event.preventDefault();
+			return this.apiManager.getRecordCount()
+				.then((count) => {
+					let inputNumber = this.input();
+					let inputNumberInt: any = parseInt(inputNumber);
+					if (inputNumber !== '') {
+						const maxRecords = this.recordsPerPage();
+						let end = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
+						if (end > (count + 1)) {
+							end = count;
+							this.currentToID = end;
+						}
+						let start = (end - (maxRecords));
+						this.currentPage = Math.floor(end / maxRecords);
+						if (inputNumberInt < 1000000 && inputNumberInt > 0) {
+							if (end === 1000000) {
+								end = end - 1;
+							} else {
+								null;
+							}
+							$('.results-box').remove();
+							$('.search-container').append(`
+							<div class="results-box">
+								<p class="results-select">${start} - ${end}</p>
+							</div>`);
+						} else {
+							$('.results-box').remove();
+							$('.search-container').append(`
+							<div class="results-box">
+								<p class="message">Invalid Input!</p>
+							</div>`);
+						}
 					} else {
-						null;
+						$('.results-box').remove();
 					}
+				})
+				.catch((error) => {
+					throw error;
+				})
+		});
+		// After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
+		$('.heading').on('click', '.results-select', (event: any) => {
+			$('.results-select').prop('disabled', true);
+			let startID: number;
+			let endID: number;
+			let pageEnd: number;
+			let pageStart: number;
+			return this.apiManager.getRecordCount()
+				.then((count) => {
+					let idRange = $('.results-select').text();
+					let rangeArray = null;
+					rangeArray = idRange.split('-');
 					$('.results-box').remove();
-					$('.search-container').append(`
-						<div class="results-box">
-							<p class="results-select">${start} - ${end}</p>
-						</div>`);
-					$('.results-box').on('click', resultsSelect);
-				} else {
-					$('.results-box').remove();
-					$('.search-container').append(`
-						<div class="results-box">
-							<p class="message">Invalid Input!</p>
-						</div>`);
-				}
-			} else {
-				$('.results-box').remove();
-			}
-		})
-		.catch((error) => {
-			throw error;
-		})
-})
-
-// After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
-function resultsSelect(event: any) {
-	$('.results-select').prop('disabled', true)
-	let startID: number;
-	let endID: number;
-	let pageEnd: number;
-	let pageStart: number;
-	return apiManager.getRecordCount()
-		.then((count) => {
-			let idRange = $('.results-select').text();
-			let rangeArray = null;
-			rangeArray = idRange.split('-');
-			$('.results-box').remove();
-			startID = parseInt(rangeArray[0]);
-			endID = parseInt(rangeArray[1]);
-			let maxRecords = recordsPerPage();
-			globals.currentPage = Math.ceil(endID / maxRecords);
-			pageEnd = Math.ceil(globals.currentPage / 10) * 10;
-			pageStart = pageEnd - 9;
-			if (endID === count) {
-				startID = ((globals.currentPage - 1) * maxRecords) + 1;
-				endID = count;
-				globals.firstPage = pageStart;
-				globals.lastPage = pageEnd;
-			}
-		})
-		.then(() => {
-			return pageNumbers(pageStart, pageEnd);
-		})
-		.then(() => {
-			return showRecords(startID, endID);
-		})
-		.then(() => {
-			$('.results-select').prop('disabled', false)
-		})
-		.catch((error) => {
-			throw error;
+					startID = parseInt(rangeArray[0]);
+					endID = parseInt(rangeArray[1]);
+					let maxRecords = this.recordsPerPage();
+					this.currentPage = Math.ceil(endID / maxRecords);
+					pageEnd = Math.ceil(this.currentPage / 10) * 10;
+					pageStart = pageEnd - 9;
+					if (endID === count) {
+						startID = ((this.currentPage - 1) * maxRecords) + 1;
+						endID = count;
+						this.firstPage = pageStart;
+						this.lastPage = pageEnd;
+					}
+				})
+				.then(() => {
+					return this.pageNumbers(pageStart, pageEnd);
+				})
+				.then(() => {
+					return this.showRecords(startID, endID);
+				})
+				.then(() => {
+					$('.results-select').prop('disabled', false)
+				})
+				.catch((error) => {
+					throw error;
+				})
 		})
-}
-
-// When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
-function adjustDisplayedRecords() {
-	if (isFunctionRunning) {
-		return;
-	}
-	isFunctionRunning = true;
-	let screenHeight = $(window).height() as number;
-	if (screenHeight < 68) {
-		screenHeight = 68;
 	}
-	let maxRecords: number;
-	let pageStart: number;
-	let pageEnd: number;
-	return apiManager.getRecordCount()
-		.then((count) => {
-			let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-			let inputNumber = input();
-			let length = inputNumber.length as number;
-			let inputNumberInt = parseInt(inputNumber);
-			if (inputNumber === '') {
-				let newCurrentPage = Math.ceil(globals.currentFromID / maxRecords);
-				if (newCurrentPage === 1) {
-					globals.currentFromID = 1;
-				}
-				globals.currentToID = globals.currentFromID + (maxRecords - 1);
-				globals.currentPage = newCurrentPage;
-				let originalID = (Math.floor(maxRecords * globals.currentPage) - (maxRecords - 1));
-				globals.difference = globals.currentFromID - originalID;
-			} else {
-				if (length > 0) {
-					let newCurrentPage = Math.ceil(inputNumberInt / maxRecords);
-					if (globals.currentToID > count) {
-						globals.currentToID = count;
+
+	// When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
+	adjustDisplayedRecords() {
+		// if (this.isFunctionRunning) {
+		// 	return;
+		// }
+		// this.isFunctionRunning = true;
+		let screenHeight = $(window).height() as number;
+		if (screenHeight < 68) {
+			screenHeight = 68;
+		}
+		let maxRecords: number;
+		let pageStart: number;
+		let pageEnd: number;
+		return this.apiManager.getRecordCount()
+			.then((count) => {
+				let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+				let inputNumber = this.input();
+				let length = inputNumber.length as number;
+				let inputNumberInt = parseInt(inputNumber);
+				if (inputNumber === '') {
+					if(this.currentFromID === 0) {
+						this.currentFromID = 1;
 					}
-					globals.currentToID = newCurrentPage * maxRecords;
-					globals.currentPage = newCurrentPage;
-					globals.currentFromID = (globals.currentPage - 1) * maxRecords + 1;
-				}
-			};
-			pageEnd = Math.ceil(Math.floor(globals.currentToID / maxRecords) / 10) * 10;
-			pageStart = pageEnd - 9;
-			globals.firstPage = pageStart;
-			globals.lastPage = pageEnd;
-			$("tbody").empty();
-			isFunctionRunning = false;
-			return showRecords(globals.currentFromID, globals.currentToID);
-		})
-		.then(() => {
-			return pageNumbers(pageStart, pageEnd);
-		})
-		.then(() => {
-			return maxRecords;
-		})
-		.catch((error) => {
-			throw error;
-		})
-}
+					let newCurrentPage = Math.ceil(this.currentFromID / maxRecords);
+					if (newCurrentPage === 0) {
+						newCurrentPage = 1
+						this.currentFromID = 0;
+					}
+					this.currentToID = this.currentFromID + (maxRecords - 1);
+					this.currentPage = newCurrentPage;
+					let originalID = (Math.floor(maxRecords * this.currentPage) - (maxRecords - 1));
+					this.difference = this.currentFromID - originalID;
+				} else {
+					if (length > 0) {
+						let newCurrentPage = Math.ceil(inputNumberInt / maxRecords);
+						if (this.currentToID > count) {
+							this.currentToID = count;
+						}
+						this.currentToID = newCurrentPage * maxRecords;
+						this.currentPage = newCurrentPage;
+						this.currentFromID = (this.currentPage - 1) * maxRecords + 1;
+					}
+				};
+				pageEnd = Math.ceil(Math.floor(this.currentToID / maxRecords) / 10) * 10;
+				pageStart = pageEnd - 9;
+				this.firstPage = pageStart;
+				this.lastPage = pageEnd;
+				$("tbody").empty();
+				// this.isFunctionRunning = false;
+				return this.showRecords(this.currentFromID, this.currentToID);
+			})
+			.then(() => {
+				return this.pageNumbers(pageStart, pageEnd);
+			})
+			.then(() => {
+				return maxRecords;
+			})
+			.catch((error) => {
+				throw error;
+			})
+	}
 
-// Calls the function to resize with a timeout added for precision
-let resizeTimer: ReturnType<typeof setTimeout>;
-function resize() {
-	clearTimeout(resizeTimer);
-	resizeTimer = setTimeout(() => {
-		adjustDisplayedRecords();
-	}, 250);
-}
+	// Calls the function to resize with a timeout added for precision
+	resize() {
+		if (this.resizeTimer !== null) {
+			clearTimeout(this.resizeTimer);
+		}
+		this.resizeTimer = setTimeout(() => {
+			this.adjustDisplayedRecords();
+		}, 250);
+	}
 
-// Just a loader to display when the table is empty and records is being fetched. 
-function loader() {
-	let content = $('tbody').text();
-	if (content === '') {
-		$('.results').append('<div class="loader"></div>');
-	} else {
-		$('.loader').css({ 'display': 'none' });
+	// Just a loader to display when the table is empty and records is being fetched. 
+	loader() {
+		let content = $('tbody').text();
+		if (content === '') {
+			$('.results').append('<div class="loader"></div>');
+		} else {
+			$('.loader').css({ 'display': 'none' });
+		}
 	}
-}
 
-// Calculate how many records should be displayed on the screen height
-function recordsPerPage(): number {
-	const screenHeight = $(window).height();
-	const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
-	return maxRecords;
-}
+	// Calculate how many records should be displayed on the screen height
+	recordsPerPage(): number {
+		const screenHeight = $(window).height();
+		const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+		return maxRecords;
+	}
 
-// Retrieve the input value while a value is in the search bar
-function input(): string {
-	let inputNumber = $('.search-input').val() as string;
-	return inputNumber;
+	// Retrieve the input value while a value is in the search bar
+	input(): string {
+		let inputNumber = $('.search-input').val() as string;
+		return inputNumber;
+	}
 }
 
 // First function that runs when the  web app is started
 window.onload = () => {
-	showColumns();
-	adjustDisplayedRecords();
-	$(window).on('resize', resize);
+	const dataHandler = new DataHandler();
+	dataHandler.showColumns();
+	dataHandler.adjustDisplayedRecords();
+	dataHandler.initializePagination();
+	dataHandler.initializeSearch();
+	$(window).on('resize', () => {
+		dataHandler.resize();
+	});
 }
diff --git a/style.css b/style.css
index f5013010..201911b2 100644
--- a/style.css
+++ b/style.css
@@ -18,7 +18,7 @@ body::-webkit-scrollbar {
 
 h1 {
 	text-align: center;
-	font-family: 'Atma', cursive;
+	font-family: monospace;
 	font-size: 2.5rem;
 	color: #4DD2C6;
 }
@@ -59,7 +59,7 @@ table {
 }
 
 th {
-	font-family: 'Atma', cursive;
+	font-family: monospace;
 	font-size: 1rem;
 	border: 0.5px solid #4DD2C6;
 	color: #4DD2C6;
@@ -92,7 +92,7 @@ thead {
 	border: 0px;
 	background-color: #ffffff36;
 	color: white;
-	font-family: 'Atma', cursive;
+	font-family: monospace;
 	letter-spacing: 2px;
 	padding-left: 10px;
 }

From 765552d0334830694ffdaf1c3a9814ff7d09fea8 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Thu, 14 Sep 2023 16:59:59 +0200
Subject: [PATCH 30/40] set starting value of records to zero and made small
 requested changes. Fixed bugs that poped up after changing starting id.

---
 app.ts     | 176 +++++++++++++++++++++++++++--------------------------
 index.html |   4 +-
 style.css  |   5 ++
 3 files changed, 96 insertions(+), 89 deletions(-)

diff --git a/app.ts b/app.ts
index a8cf9ad1..ccf4952f 100644
--- a/app.ts
+++ b/app.ts
@@ -1,3 +1,5 @@
+import { error } from "jquery";
+
 class DataHandler {
 	/** It tracks if the showRecords function is running and would the value would be false if it's not. */
 	private isFunctionRunning: boolean;
@@ -6,9 +8,9 @@ class DataHandler {
 	/** The following track what page the user is on when navigating through the web app. */
 	private currentPage: number;
 	/** This tracks the first page of the pagination that is being displayed. */
-	private firstPage: number;
+	private paginationStart: number;
 	/** This will track the last page that is being displayed. */
-	private lastPage: number;
+	private paginationEnd: number;
 	/** Tracks the current starting ID in the table. */
 	private currentFromID: number;
 	/** Track the current last ID in the table. */
@@ -23,8 +25,8 @@ class DataHandler {
 		this.isFunctionRunning = false;
 		this.apiManager = new ApiManager("http://localhost:2050/");
 		this.currentPage = 1;
-		this.firstPage = 1;
-		this.lastPage = 10;
+		this.paginationStart = 1;
+		this.paginationEnd = 10;
 		this.currentFromID = 0;
 		this.currentToID = 20;
 		this.difference = 0;
@@ -37,7 +39,7 @@ class DataHandler {
 		return this.apiManager.getColumns()
 			.then(columns => {
 				for (const column of columns) {
-					$("thead").append(`<th>${column}</th>`);
+					$("#records-table-heading").append(`<th>${column}</th>`);
 				}
 			})
 			.catch(error => {
@@ -48,88 +50,81 @@ class DataHandler {
 	// This function will loop through and display the records on the table.
 	showRecords(fromID: number, toID: number): Promise<void> {
 		if (this.isFunctionRunning) {
-			return Promise.resolve(undefined);;
+			return Promise.resolve(undefined);
 		}
 		this.isFunctionRunning = true;
-		let condition: number;
 		let inputNumber: string;
 		let stringCount: string;
 		return this.apiManager.getRecordCount()
 			.then(count => {
 				inputNumber = this.input();
 				const maxRecords = this.recordsPerPage();
-				condition = Math.ceil(count / maxRecords);
-				$("tbody").empty();
+				$("#records-table-body").empty();
 				this.loader();
-				if (toID >= count) {
-					toID = count;
-					fromID = toID - (maxRecords - 1);
-				} else if (this.currentPage === 1) {
-					fromID = 0;
+				this.currentToID = toID
+				this.currentFromID = fromID;
+				if (toID >= (count - 1)) {
+					this.currentToID = (count - 1);
+					this.currentFromID = this.currentToID - (maxRecords - 1);
+				}
+				else if (this.currentPage === 1) {
+					this.currentFromID = 0;
 				};
-				this.currentToID = toID;
 				stringCount = count.toLocaleString().replace(/,/g, " ");
-				return this.apiManager.getRecords(fromID, toID);
+				return this.apiManager.getRecords(this.currentFromID, this.currentToID);
 			})
 			.then(records => {
-				$('.results').empty().append(`Displaying ID's ${fromID} - ${toID} out of ${stringCount}`);
-				for (let i = 0; i < records.length; i++) {
-					$("tbody").append(`<tr class="body-row">`);
-					for (let n = 0; n < records[i].length; n++) {
-						$(".body-row:last-child").append(`<td><span>${records[i][n]}</span></td>`);
+				$('.results').empty().append(`Displaying ID's ${this.currentFromID} - ${this.currentToID} out of ${stringCount}`);
+				for (const record of records) {
+					$("#records-table-body").append(`<tr class="body-row">`);
+					for (const value of record) {
+						let isSearchValue = value === inputNumber;
+						$(".body-row:last-child").append(
+							`<td>
+								<span class="${isSearchValue ? 'highlight' : ''}">${value}</span>
+							</td>`);
 					}
-					$("tbody").append(`</tr>`);
-				};
-
-				$("span").each(function () {
-					const lowercasedID = $(this).text();
-					if (lowercasedID == inputNumber) {
-						$(this).css({ "background-color": "#FFFF00", "color": "black  " });
-					} else {
-						$(this).css({ "background-color": "initial", "color": "#A1AFC2  " });
-					}
-				});
-
-				if (condition >= fromID && condition <= toID) {
-					$(".next").css({ display: "none" });
+					$("#records-table-body").append(`</tr>`);
 				}
 				this.isFunctionRunning = false;
 			})
 			.catch(error => {
 				throw new Error(`Failed to retrieve the records: ${error}`);
-			})
+			});
 	}
 
 	// The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
 	pageNumbers(start: number, end: number): Promise<void> {
+		this.paginationStart = start;
+		this.paginationEnd = end;
 		return this.apiManager.getRecordCount()
 			.then(count => {
 				$('.pagination').empty();
 				let stringCount = count.toLocaleString().replace(/,/g, " ");
 				let maxRecords = this.recordsPerPage();
-				let condition = Math.floor(count / maxRecords) + 1;
-				if (condition <= end && condition >= start) {
-					if (999999 % maxRecords === 0) {
-						end = (condition - 1);
-					} else {
-						end = condition;
-					}
+				/** This is the last page of all the records. It's calculated based on the amount of records showed
+				 * on the table and the count of the records.*/
+				let lastPage = Math.ceil((count - 1) / maxRecords);
+				if (lastPage <= this.paginationEnd && lastPage >= this.paginationStart) {
+					// if (999999 % maxRecords === 0) {
+					// 	end = (lastPage - 1);
+					// } else {
+					this.paginationEnd = lastPage;
+					// }
 					$(".next").css({ display: "none" });
 				} else {
 					$(".next").css({ display: "block" });
 				}
-				if (start < 1) {
-					start = 1;
+				if (this.paginationStart < 1) {
+					this.paginationStart = 1;
 				}
-				this.firstPage = start;
-				this.lastPage = end;
-				for (let i = start; i <= end; i++) {
+				for (let i = this.paginationStart; i <= this.paginationEnd; i++) {
 					let isActive = i == this.currentPage;
 					$(".pagination").append(
-						`<a id="${i}" class="pagination-item ${isActive ? 'active' : ''}">${i}</a>`
+						`<a id="page-${i}" value="${i}" class="pagination-item ${isActive ? 'active' : ''}">${i}</a>`
 					);
 				}
-				if (this.firstPage === 1) {
+				if (this.paginationStart === 1) {
 					$(".prev").css({ display: "none" });
 				} else {
 					$(".prev").css({ display: "block" });
@@ -142,23 +137,20 @@ class DataHandler {
 
 
 	initializePagination() {
-		// Adding a click event on the  pagination pages to display the appropriate number of records for that specific page number.
+		// Adding a click event on the pagination pages to display the appropriate number of records for that specific page number.
 		$(".pagination").on("click", ".pagination-item", (event) => {
 			$('.pagination-item').prop('disabled', true);
 			return this.apiManager.getRecordCount()
 				.then(count => {
 					$('.search-input').val('');
-					this.currentPage = parseInt($(event.target).attr("id") as any);
+					this.currentPage = <number>parseInt($(event.target).attr("value") as any);
 					console.log("$(this):", $(event.target))
 					const maxRecords = this.recordsPerPage();
-					let fromID = Math.ceil(this.currentPage * maxRecords - (maxRecords));
+					let fromID = Math.ceil(this.currentPage * maxRecords - (maxRecords - 1));
 					if (this.difference > 0 && this.difference < maxRecords) {
 						fromID = fromID + this.difference;
 					}
-					if (this.currentPage === 1) {
-						this.currentFromID = 1;
-					}
-					let toID = fromID + (maxRecords);
+					let toID = fromID + (maxRecords - 1);
 					if (fromID > count + 1 || toID > count + 1) {
 						toID = count;
 						fromID = toID - maxRecords;
@@ -169,7 +161,7 @@ class DataHandler {
 					$(event.target).addClass("active");
 					const self = this;
 					$(".pagination-item").each(function () {
-						let elementID = $(this).attr('id') as string;
+						let elementID = <string>($(this).attr('value'));
 						let currentPageString = self.currentPage.toString();
 						if (elementID == currentPageString) {
 							$(this).addClass('active');
@@ -187,18 +179,18 @@ class DataHandler {
 		})
 		// Adding a click event to the next button of the pagination.
 		$(".next").on("click", () => {
-			this.firstPage = this.lastPage + 1;
-			this.lastPage = this.firstPage + 9;
+			this.paginationStart = this.paginationEnd + 1;
+			this.paginationEnd = this.paginationStart + 9;
 			$(".pagination").empty();
-			this.pageNumbers(this.firstPage, this.lastPage);
+			this.pageNumbers(this.paginationStart, this.paginationEnd);
 		});
 
 		// Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
 		$(".prev").on("click", () => {
-			this.lastPage = this.firstPage - 1;
-			this.firstPage = this.lastPage - 9;
+			this.paginationEnd = this.paginationStart - 1;
+			this.paginationStart = this.paginationEnd - 9;
 			$(".pagination").empty();
-			this.pageNumbers(this.firstPage, this.lastPage);
+			this.pageNumbers(this.paginationStart, this.paginationEnd);
 		});
 	}
 
@@ -217,17 +209,21 @@ class DataHandler {
 		$(".search-input").on("input", (event: any) => {
 			event.preventDefault();
 			return this.apiManager.getRecordCount()
-				.then((count) => {
+				.then(count => {
 					let inputNumber = this.input();
 					let inputNumberInt: any = parseInt(inputNumber);
 					if (inputNumber !== '') {
 						const maxRecords = this.recordsPerPage();
-						let end = Math.ceil(inputNumberInt / maxRecords) * maxRecords;
+						let end = Math.ceil(inputNumberInt / maxRecords) * (maxRecords);
 						if (end > (count + 1)) {
 							end = count;
 							this.currentToID = end;
 						}
-						let start = (end - (maxRecords));
+						let start = (end - (maxRecords - 1));
+						if ((end - maxRecords) === 0) {
+							end = Math.ceil(inputNumberInt / maxRecords) * (maxRecords);
+							start = end - maxRecords;
+						}
 						this.currentPage = Math.floor(end / maxRecords);
 						if (inputNumberInt < 1000000 && inputNumberInt > 0) {
 							if (end === 1000000) {
@@ -251,7 +247,7 @@ class DataHandler {
 						$('.results-box').remove();
 					}
 				})
-				.catch((error) => {
+				.catch(error => {
 					throw error;
 				})
 		});
@@ -263,22 +259,24 @@ class DataHandler {
 			let pageEnd: number;
 			let pageStart: number;
 			return this.apiManager.getRecordCount()
-				.then((count) => {
+				.then(count => {
 					let idRange = $('.results-select').text();
 					let rangeArray = null;
 					rangeArray = idRange.split('-');
 					$('.results-box').remove();
+					/** Fritz, "Should you not sanitize endID before doing this calculation?" */
 					startID = parseInt(rangeArray[0]);
 					endID = parseInt(rangeArray[1]);
 					let maxRecords = this.recordsPerPage();
 					this.currentPage = Math.ceil(endID / maxRecords);
 					pageEnd = Math.ceil(this.currentPage / 10) * 10;
 					pageStart = pageEnd - 9;
-					if (endID === count) {
+					if (endID >= count) {
+						/** Fritz, "And if endID is greater than count? or of a different type?" */
 						startID = ((this.currentPage - 1) * maxRecords) + 1;
 						endID = count;
-						this.firstPage = pageStart;
-						this.lastPage = pageEnd;
+						this.paginationStart = pageStart;
+						this.paginationEnd = pageEnd;
 					}
 				})
 				.then(() => {
@@ -290,9 +288,9 @@ class DataHandler {
 				.then(() => {
 					$('.results-select').prop('disabled', false)
 				})
-				.catch((error) => {
+				.catch(error => {
 					throw error;
-				})
+				});
 		})
 	}
 
@@ -302,7 +300,7 @@ class DataHandler {
 		// 	return;
 		// }
 		// this.isFunctionRunning = true;
-		let screenHeight = $(window).height() as number;
+		let screenHeight = <number>($(window).height());
 		if (screenHeight < 68) {
 			screenHeight = 68;
 		}
@@ -310,21 +308,21 @@ class DataHandler {
 		let pageStart: number;
 		let pageEnd: number;
 		return this.apiManager.getRecordCount()
-			.then((count) => {
-				let maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+			.then(count => {
+				let maxRecords = Math.floor(screenHeight / 68);
 				let inputNumber = this.input();
-				let length = inputNumber.length as number;
+				let length = inputNumber.length;
 				let inputNumberInt = parseInt(inputNumber);
 				if (inputNumber === '') {
-					if(this.currentFromID === 0) {
-						this.currentFromID = 1;
+					if (this.currentFromID === 0) {
+						this.currentFromID = 0;
 					}
 					let newCurrentPage = Math.ceil(this.currentFromID / maxRecords);
-					if (newCurrentPage === 0) {
+					if (newCurrentPage === 1) {
 						newCurrentPage = 1
 						this.currentFromID = 0;
 					}
-					this.currentToID = this.currentFromID + (maxRecords - 1);
+					this.currentToID = this.currentFromID + maxRecords;
 					this.currentPage = newCurrentPage;
 					let originalID = (Math.floor(maxRecords * this.currentPage) - (maxRecords - 1));
 					this.difference = this.currentFromID - originalID;
@@ -339,11 +337,15 @@ class DataHandler {
 						this.currentFromID = (this.currentPage - 1) * maxRecords + 1;
 					}
 				};
-				pageEnd = Math.ceil(Math.floor(this.currentToID / maxRecords) / 10) * 10;
+				if (this.currentFromID === 0) {
+					pageEnd = Math.ceil(Math.floor(this.currentToID / (maxRecords - 1)) / 10) * 10;
+				} else {
+					pageEnd = Math.ceil(Math.floor(this.currentToID / (maxRecords)) / 10) * 10;
+				}
 				pageStart = pageEnd - 9;
-				this.firstPage = pageStart;
-				this.lastPage = pageEnd;
-				$("tbody").empty();
+				this.paginationStart = pageStart;
+				this.paginationEnd = pageEnd;
+				$("#records-table-body").empty();
 				// this.isFunctionRunning = false;
 				return this.showRecords(this.currentFromID, this.currentToID);
 			})
@@ -370,7 +372,7 @@ class DataHandler {
 
 	// Just a loader to display when the table is empty and records is being fetched. 
 	loader() {
-		let content = $('tbody').text();
+		let content = $('#records-table-body').text();
 		if (content === '') {
 			$('.results').append('<div class="loader"></div>');
 		} else {
diff --git a/index.html b/index.html
index 4d761359..1f9d77ab 100644
--- a/index.html
+++ b/index.html
@@ -18,9 +18,9 @@
 	</div>
 	<div class="table-container">
 		<table class="table">
-			<thead>
+			<thead id="records-table-heading">
 			</thead>
-			<tbody>
+			<tbody id="records-table-body">
 				<tr class="head-row">
 			</tbody>
 			</tr>
diff --git a/style.css b/style.css
index 201911b2..56ac381b 100644
--- a/style.css
+++ b/style.css
@@ -238,6 +238,11 @@ a {
 	font-size: 1.4rem;
 }
 
+.highlight {
+	background-color: #FFFF00 !important; 
+	color: black !important;
+}
+
 @keyframes rot {
 	100% {
 		transform: rotate(360deg);

From 59da1fc1a6c8966caa3b0f43fc50457bcc761b40 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Fri, 15 Sep 2023 15:38:56 +0200
Subject: [PATCH 31/40] Did the requested changes.

---
 app.ts     | 141 +++++++++++++++++++++++++++--------------------------
 index.html |   1 -
 style.css  |   1 -
 3 files changed, 73 insertions(+), 70 deletions(-)

diff --git a/app.ts b/app.ts
index ccf4952f..e0488f0a 100644
--- a/app.ts
+++ b/app.ts
@@ -1,5 +1,3 @@
-import { error } from "jquery";
-
 class DataHandler {
 	/** It tracks if the showRecords function is running and would the value would be false if it's not. */
 	private isFunctionRunning: boolean;
@@ -47,7 +45,7 @@ class DataHandler {
 			});
 	}
 
-	// This function will loop through and display the records on the table.
+	/** Fetching the records and rendering it on the DOM in the table*/
 	showRecords(fromID: number, toID: number): Promise<void> {
 		if (this.isFunctionRunning) {
 			return Promise.resolve(undefined);
@@ -89,11 +87,13 @@ class DataHandler {
 				this.isFunctionRunning = false;
 			})
 			.catch(error => {
-				throw new Error(`Failed to retrieve the records: ${error}`);
+				alert("Something went wrong. Click on the button to refresh the page.");
+				location.reload();
+				throw error;
 			});
 	}
 
-	// The following function handles all the functionality of the pagination and the pages. Including what records should be shown in the table.
+	/** Handles pagination functionality and rendering it on the DOM.*/
 	pageNumbers(start: number, end: number): Promise<void> {
 		this.paginationStart = start;
 		this.paginationEnd = end;
@@ -102,15 +102,11 @@ class DataHandler {
 				$('.pagination').empty();
 				let stringCount = count.toLocaleString().replace(/,/g, " ");
 				let maxRecords = this.recordsPerPage();
-				/** This is the last page of all the records. It's calculated based on the amount of records showed
-				 * on the table and the count of the records.*/
+				// This is the last page of all the records. It's calculated based on the amount of records showed
+				// on the table and the count of the records.
 				let lastPage = Math.ceil((count - 1) / maxRecords);
 				if (lastPage <= this.paginationEnd && lastPage >= this.paginationStart) {
-					// if (999999 % maxRecords === 0) {
-					// 	end = (lastPage - 1);
-					// } else {
 					this.paginationEnd = lastPage;
-					// }
 					$(".next").css({ display: "none" });
 				} else {
 					$(".next").css({ display: "block" });
@@ -131,20 +127,21 @@ class DataHandler {
 				}
 			})
 			.catch(error => {
-				throw new Error(`Failed `)
-			})
+				throw error;
+			});
 	}
 
-
-	initializePagination() {
-		// Adding a click event on the pagination pages to display the appropriate number of records for that specific page number.
+	/** Handles all the functionality related to pagination. */
+	initializePagination(): void {
+		// Render the specific amount of records to the DOM based on the current page that it gets from the 
+		// element's attribute value. 
 		$(".pagination").on("click", ".pagination-item", (event) => {
 			$('.pagination-item').prop('disabled', true);
 			return this.apiManager.getRecordCount()
 				.then(count => {
 					$('.search-input').val('');
-					this.currentPage = <number>parseInt($(event.target).attr("value") as any);
-					console.log("$(this):", $(event.target))
+					let returnedId = <string>($(event.target).attr("value"));
+					this.currentPage = parseInt(returnedId);
 					const maxRecords = this.recordsPerPage();
 					let fromID = Math.ceil(this.currentPage * maxRecords - (maxRecords - 1));
 					if (this.difference > 0 && this.difference < maxRecords) {
@@ -167,17 +164,17 @@ class DataHandler {
 							$(this).addClass('active');
 						}
 					});
-
 					return this.showRecords(fromID, toID)
 						.then(() => {
 							$('.pagination-item').prop('disabled', false)
-						})
+						});
 				})
 				.catch(error => {
 					throw new Error(`Failed showing the records when clicking on page number: ${error}`);
 				});
 		})
-		// Adding a click event to the next button of the pagination.
+
+		/** Gives the next set of page numbers based on the last page on the pagination. */
 		$(".next").on("click", () => {
 			this.paginationStart = this.paginationEnd + 1;
 			this.paginationEnd = this.paginationStart + 9;
@@ -185,7 +182,7 @@ class DataHandler {
 			this.pageNumbers(this.paginationStart, this.paginationEnd);
 		});
 
-		// Adding a if statement in the case that pagination start with the page number 1. In the else statement a click event is added for the next button of the pagination.
+		/** Gives the previous set of pages numbers based on the last page in the pagination. */
 		$(".prev").on("click", () => {
 			this.paginationEnd = this.paginationStart - 1;
 			this.paginationStart = this.paginationEnd - 9;
@@ -194,8 +191,9 @@ class DataHandler {
 		});
 	}
 
-	initializeSearch() {
-		// Event listener to prevent some characters to be entered in the input
+	/** Handles all the functionality related to the search. */
+	initializeSearch(): void {
+		/** Prevents certain characters to be entered in the input field. */
 		$('.search-input').on('keydown', (e) => {
 			if (e.key === 'e' || e.key === 'E' || e.key === '.' || e.key === '+' || e.key === '*' || e.key === '-') {
 				e.preventDefault();
@@ -205,7 +203,8 @@ class DataHandler {
 			}
 		});
 
-		// In this function wil do the extract the number entered in the search. Then it would take that and calculate the range which should be displayed for the user to click on. 
+		/** Takes the number entered in the search field and calculates a range and render that 
+		 * on to the DOM. */
 		$(".search-input").on("input", (event: any) => {
 			event.preventDefault();
 			return this.apiManager.getRecordCount()
@@ -249,9 +248,10 @@ class DataHandler {
 				})
 				.catch(error => {
 					throw error;
-				})
+				});
 		});
-		// After the range has been returned to the user. The user can click on it and that will show the range of records on the table. 
+
+		/** Will take the range on the DOM and return records based on that range. */
 		$('.heading').on('click', '.results-select', (event: any) => {
 			$('.results-select').prop('disabled', true);
 			let startID: number;
@@ -264,19 +264,21 @@ class DataHandler {
 					let rangeArray = null;
 					rangeArray = idRange.split('-');
 					$('.results-box').remove();
-					/** Fritz, "Should you not sanitize endID before doing this calculation?" */
 					startID = parseInt(rangeArray[0]);
 					endID = parseInt(rangeArray[1]);
-					let maxRecords = this.recordsPerPage();
-					this.currentPage = Math.ceil(endID / maxRecords);
-					pageEnd = Math.ceil(this.currentPage / 10) * 10;
-					pageStart = pageEnd - 9;
-					if (endID >= count) {
-						/** Fritz, "And if endID is greater than count? or of a different type?" */
-						startID = ((this.currentPage - 1) * maxRecords) + 1;
-						endID = count;
-						this.paginationStart = pageStart;
-						this.paginationEnd = pageEnd;
+					if (!isNaN(endID) && Number.isInteger(endID)) {
+						let maxRecords = this.recordsPerPage();
+						this.currentPage = Math.ceil(endID / maxRecords);
+						pageEnd = Math.ceil(this.currentPage / 10) * 10;
+						pageStart = pageEnd - 9;
+						if (endID >= count) {
+							startID = ((this.currentPage - 1) * maxRecords) + 1;
+							endID = (count - 1);
+							this.paginationStart = pageStart;
+							this.paginationEnd = pageEnd;
+						}
+					} else {
+						throw new Error("Please provide a valid integer.")
 					}
 				})
 				.then(() => {
@@ -286,20 +288,16 @@ class DataHandler {
 					return this.showRecords(startID, endID);
 				})
 				.then(() => {
-					$('.results-select').prop('disabled', false)
+					$('.results-select').prop('disabled', false);
 				})
 				.catch(error => {
 					throw error;
 				});
-		})
+		});
 	}
 
-	// When adjusting the height and on different screen sizes. This function would responsible for calculating how much records should be displayed based on the height of the window itself. 
-	adjustDisplayedRecords() {
-		// if (this.isFunctionRunning) {
-		// 	return;
-		// }
-		// this.isFunctionRunning = true;
+	/** Will calculate the amount records to be shown according to the screen height. */
+	adjustDisplayedRecords(): Promise<void> {
 		let screenHeight = <number>($(window).height());
 		if (screenHeight < 68) {
 			screenHeight = 68;
@@ -327,11 +325,11 @@ class DataHandler {
 					let originalID = (Math.floor(maxRecords * this.currentPage) - (maxRecords - 1));
 					this.difference = this.currentFromID - originalID;
 				} else {
+					if (this.currentToID >= count) {
+						this.currentToID = (count - 1);
+					}
 					if (length > 0) {
 						let newCurrentPage = Math.ceil(inputNumberInt / maxRecords);
-						if (this.currentToID > count) {
-							this.currentToID = count;
-						}
 						this.currentToID = newCurrentPage * maxRecords;
 						this.currentPage = newCurrentPage;
 						this.currentFromID = (this.currentPage - 1) * maxRecords + 1;
@@ -346,32 +344,32 @@ class DataHandler {
 				this.paginationStart = pageStart;
 				this.paginationEnd = pageEnd;
 				$("#records-table-body").empty();
-				// this.isFunctionRunning = false;
 				return this.showRecords(this.currentFromID, this.currentToID);
 			})
 			.then(() => {
 				return this.pageNumbers(pageStart, pageEnd);
 			})
-			.then(() => {
-				return maxRecords;
-			})
 			.catch((error) => {
 				throw error;
 			})
 	}
 
-	// Calls the function to resize with a timeout added for precision
-	resize() {
+	/** When resizing the window. Timeout is put in place so that the function doesn't
+	 * take in every value returned when resizing. */
+	resize(): void {
 		if (this.resizeTimer !== null) {
 			clearTimeout(this.resizeTimer);
 		}
 		this.resizeTimer = setTimeout(() => {
-			this.adjustDisplayedRecords();
+			return this.adjustDisplayedRecords()
+				.catch(error => {
+					throw error;
+				});
 		}, 250);
 	}
 
-	// Just a loader to display when the table is empty and records is being fetched. 
-	loader() {
+	/** Will display when the table is empty and it's busy fetching the records. */
+	loader(): void {
 		let content = $('#records-table-body').text();
 		if (content === '') {
 			$('.results').append('<div class="loader"></div>');
@@ -380,27 +378,34 @@ class DataHandler {
 		}
 	}
 
-	// Calculate how many records should be displayed on the screen height
+	/** Calculate how many records should be displayed according to the screen height. */
 	recordsPerPage(): number {
-		const screenHeight = $(window).height();
-		const maxRecords = Math.floor(parseInt(screenHeight as any) / 68);
+		const screenHeight = <number>($(window).height());
+		const maxRecords = Math.floor(screenHeight / 68);
 		return maxRecords;
 	}
 
-	// Retrieve the input value while a value is in the search bar
+	/** Retrieve the search value from the input even when it's empty. */
 	input(): string {
-		let inputNumber = $('.search-input').val() as string;
+		let inputNumber = <string>($('.search-input').val());
 		return inputNumber;
 	}
 }
 
-// First function that runs when the  web app is started
+/** Runs when the web app is started. */
 window.onload = () => {
 	const dataHandler = new DataHandler();
-	dataHandler.showColumns();
-	dataHandler.adjustDisplayedRecords();
-	dataHandler.initializePagination();
-	dataHandler.initializeSearch();
+	dataHandler.showColumns()
+		.then(() => {
+			dataHandler.adjustDisplayedRecords()
+		})
+		.then(() => {
+			dataHandler.initializePagination();
+			dataHandler.initializeSearch();
+		})
+		.catch(error => {
+			throw new Error(`An error occurred: ${error}`);
+		});
 	$(window).on('resize', () => {
 		dataHandler.resize();
 	});
diff --git a/index.html b/index.html
index 1f9d77ab..637e903e 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,6 @@
 	<div class="wrapper">
 		<a class="prev">&laquo;</a>
 		<div class="pagination">
-
 		</div>
 		<a class="next">&raquo;</a>
 	</div>
diff --git a/style.css b/style.css
index 56ac381b..4bd3eedb 100644
--- a/style.css
+++ b/style.css
@@ -246,6 +246,5 @@ a {
 @keyframes rot {
 	100% {
 		transform: rotate(360deg);
-
 	}
 }

From d9882f8bae3aa1b691fe5847e37faa7270faee7f Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Fri, 15 Sep 2023 15:41:18 +0200
Subject: [PATCH 32/40] update

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

diff --git a/app.ts b/app.ts
index e0488f0a..8c3a3271 100644
--- a/app.ts
+++ b/app.ts
@@ -349,7 +349,7 @@ class DataHandler {
 			.then(() => {
 				return this.pageNumbers(pageStart, pageEnd);
 			})
-			.catch((error) => {
+			.catch(error => {
 				throw error;
 			})
 	}

From 18ee383197c6239c8f939e7692bd7428de2bfe61 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Wed, 20 Sep 2023 10:39:20 +0200
Subject: [PATCH 33/40] Did the requested changes

---
 apiManager.ts |  6 +++---
 app.ts        | 54 +++++++++++++++++++++++++--------------------------
 style.css     |  9 +++++++++
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/apiManager.ts b/apiManager.ts
index 7a69e02d..128bdba7 100644
--- a/apiManager.ts
+++ b/apiManager.ts
@@ -1,12 +1,13 @@
 class ApiManager {
+	
 	private mainUrl: string;
 
 	constructor(mainUrl: string) {
 		this.mainUrl = mainUrl;
 	}
 
-	private fetchJson(mainUrl: string): Promise<any> {
-		return fetch(mainUrl)
+	private fetchJson(url: string): Promise<any> {
+		return fetch(url)
 			.then(res => {
 				if (res.ok) {
 					return res.json()
@@ -31,7 +32,6 @@ class ApiManager {
 
 	/** Retrieves the number of records there are */
 	getRecordCount(): Promise<number> {
-		let test = `${this.mainUrl}recordCount`
 		return this.fetchJson(`${this.mainUrl}recordCount`);
 	}
 }
diff --git a/app.ts b/app.ts
index 8c3a3271..26890392 100644
--- a/app.ts
+++ b/app.ts
@@ -41,12 +41,12 @@ class DataHandler {
 				}
 			})
 			.catch(error => {
-				throw new Error(`Failed to retrieve columns: ${error}`)
+				throw new Error(`Failed to retrieve columns: ${error}`);
 			});
 	}
 
 	/** Fetching the records and rendering it on the DOM in the table*/
-	showRecords(fromID: number, toID: number): Promise<void> {
+	showRecords(fromID: number, toID: number): Promise<any> {
 		if (this.isFunctionRunning) {
 			return Promise.resolve(undefined);
 		}
@@ -59,15 +59,14 @@ class DataHandler {
 				const maxRecords = this.recordsPerPage();
 				$("#records-table-body").empty();
 				this.loader();
-				this.currentToID = toID
+				this.currentToID = toID;
 				this.currentFromID = fromID;
 				if (toID >= (count - 1)) {
 					this.currentToID = (count - 1);
 					this.currentFromID = this.currentToID - (maxRecords - 1);
-				}
-				else if (this.currentPage === 1) {
+				} else if (this.currentPage === 1) {
 					this.currentFromID = 0;
-				};
+				}
 				stringCount = count.toLocaleString().replace(/,/g, " ");
 				return this.apiManager.getRecords(this.currentFromID, this.currentToID);
 			})
@@ -89,7 +88,7 @@ class DataHandler {
 			.catch(error => {
 				alert("Something went wrong. Click on the button to refresh the page.");
 				location.reload();
-				throw error;
+				this.isFunctionRunning = false;
 			});
 	}
 
@@ -127,7 +126,7 @@ class DataHandler {
 				}
 			})
 			.catch(error => {
-				throw error;
+				throw new Error(`Failed rendering the pagination: ${error}`);
 			});
 	}
 
@@ -170,7 +169,7 @@ class DataHandler {
 						});
 				})
 				.catch(error => {
-					throw new Error(`Failed showing the records when clicking on page number: ${error}`);
+					throw new Error(`Failed showing the records when clicking on the page button: ${error}`);
 				});
 		})
 
@@ -210,7 +209,7 @@ class DataHandler {
 			return this.apiManager.getRecordCount()
 				.then(count => {
 					let inputNumber = this.input();
-					let inputNumberInt: any = parseInt(inputNumber);
+					let inputNumberInt = parseInt(inputNumber);
 					if (inputNumber !== '') {
 						const maxRecords = this.recordsPerPage();
 						let end = Math.ceil(inputNumberInt / maxRecords) * (maxRecords);
@@ -247,7 +246,7 @@ class DataHandler {
 					}
 				})
 				.catch(error => {
-					throw error;
+					throw new Error(`Failed when attempting to search: ${error}`);
 				});
 		});
 
@@ -278,7 +277,7 @@ class DataHandler {
 							this.paginationEnd = pageEnd;
 						}
 					} else {
-						throw new Error("Please provide a valid integer.")
+						throw new Error("Please provide a valid integer.");
 					}
 				})
 				.then(() => {
@@ -291,23 +290,20 @@ class DataHandler {
 					$('.results-select').prop('disabled', false);
 				})
 				.catch(error => {
-					throw error;
+					throw new Error(`Failed when clicking on the search range: ${error}`);
 				});
 		});
 	}
 
 	/** Will calculate the amount records to be shown according to the screen height. */
 	adjustDisplayedRecords(): Promise<void> {
-		let screenHeight = <number>($(window).height());
-		if (screenHeight < 68) {
-			screenHeight = 68;
-		}
-		let maxRecords: number;
+		let screenHeight = <number>($('#records-table-body').height());
 		let pageStart: number;
 		let pageEnd: number;
 		return this.apiManager.getRecordCount()
 			.then(count => {
-				let maxRecords = Math.floor(screenHeight / 68);
+				let maxRecords = Math.ceil(screenHeight / 68);
+				maxRecords = maxRecords - 1;
 				let inputNumber = this.input();
 				let length = inputNumber.length;
 				let inputNumberInt = parseInt(inputNumber);
@@ -317,7 +313,7 @@ class DataHandler {
 					}
 					let newCurrentPage = Math.ceil(this.currentFromID / maxRecords);
 					if (newCurrentPage === 1) {
-						newCurrentPage = 1
+						newCurrentPage = 1;
 						this.currentFromID = 0;
 					}
 					this.currentToID = this.currentFromID + maxRecords;
@@ -334,9 +330,12 @@ class DataHandler {
 						this.currentPage = newCurrentPage;
 						this.currentFromID = (this.currentPage - 1) * maxRecords + 1;
 					}
-				};
+				}
 				if (this.currentFromID === 0) {
 					pageEnd = Math.ceil(Math.floor(this.currentToID / (maxRecords - 1)) / 10) * 10;
+					if (screenHeight < 136) {
+						pageEnd = Math.ceil(Math.floor(this.currentToID / (maxRecords)) / 10) * 10;
+					}
 				} else {
 					pageEnd = Math.ceil(Math.floor(this.currentToID / (maxRecords)) / 10) * 10;
 				}
@@ -350,8 +349,8 @@ class DataHandler {
 				return this.pageNumbers(pageStart, pageEnd);
 			})
 			.catch(error => {
-				throw error;
-			})
+				throw new Error(`Failed when resizing the window: ${error}`);
+			});
 	}
 
 	/** When resizing the window. Timeout is put in place so that the function doesn't
@@ -380,8 +379,9 @@ class DataHandler {
 
 	/** Calculate how many records should be displayed according to the screen height. */
 	recordsPerPage(): number {
-		const screenHeight = <number>($(window).height());
-		const maxRecords = Math.floor(screenHeight / 68);
+		const screenHeight = <number>($('#records-table-body').height());
+		let maxRecords = Math.floor(screenHeight / 68);
+		maxRecords = maxRecords - 1;
 		return maxRecords;
 	}
 
@@ -397,14 +397,14 @@ window.onload = () => {
 	const dataHandler = new DataHandler();
 	dataHandler.showColumns()
 		.then(() => {
-			dataHandler.adjustDisplayedRecords()
+			dataHandler.adjustDisplayedRecords();
 		})
 		.then(() => {
 			dataHandler.initializePagination();
 			dataHandler.initializeSearch();
 		})
 		.catch(error => {
-			throw new Error(`An error occurred: ${error}`);
+			throw new Error(`An error occurred when loading your page: ${error}`);
 		});
 	$(window).on('resize', () => {
 		dataHandler.resize();
diff --git a/style.css b/style.css
index 4bd3eedb..82ede5cf 100644
--- a/style.css
+++ b/style.css
@@ -5,11 +5,16 @@
 	padding: 0;
 	box-sizing: border-box;
 }
+/* 
+html {
+	min-height: 68px !important;
+} */
 
 body {
 	background-color: #141A27;
 	background-attachment: fixed;
 	height: 100vh;
+	min-height: 68px !important;
 }
 
 body::-webkit-scrollbar {
@@ -181,6 +186,10 @@ table {
 	table-layout: fixed;
 }
 
+#records-table-body {
+	min-height: 68px;
+}
+
 th,
 td {
 	padding: 0.2px;

From ff94cd8202e77e9db7cf117d954c5c40ac665f7e Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Wed, 20 Sep 2023 11:03:45 +0200
Subject: [PATCH 34/40] small update

---
 app.ts    | 1 -
 style.css | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/app.ts b/app.ts
index 26890392..ae953f3c 100644
--- a/app.ts
+++ b/app.ts
@@ -99,7 +99,6 @@ class DataHandler {
 		return this.apiManager.getRecordCount()
 			.then(count => {
 				$('.pagination').empty();
-				let stringCount = count.toLocaleString().replace(/,/g, " ");
 				let maxRecords = this.recordsPerPage();
 				// This is the last page of all the records. It's calculated based on the amount of records showed
 				// on the table and the count of the records.
diff --git a/style.css b/style.css
index 82ede5cf..1467dce9 100644
--- a/style.css
+++ b/style.css
@@ -5,10 +5,6 @@
 	padding: 0;
 	box-sizing: border-box;
 }
-/* 
-html {
-	min-height: 68px !important;
-} */
 
 body {
 	background-color: #141A27;
@@ -117,7 +113,6 @@ input:focus {
 .pagination {
 	display: flex;
 	justify-content: center;
-	/* padding-top: 30px; */
 }
 
 a {

From 99ca15c3e7223cc8437c7ad7cdafd49285630dfa Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Fri, 22 Sep 2023 08:19:58 +0200
Subject: [PATCH 35/40] Did most of the requested changes

---
 apiManager.ts |   6 +--
 app.ts        | 133 +++++++++++++++++++++++++++-----------------------
 2 files changed, 75 insertions(+), 64 deletions(-)

diff --git a/apiManager.ts b/apiManager.ts
index 128bdba7..3fc2dbea 100644
--- a/apiManager.ts
+++ b/apiManager.ts
@@ -22,16 +22,16 @@ class ApiManager {
 
 	/** Retrieves records from the api */
 	getRecords(fromID: number, toID: number): Promise<string[][]> {
-		return this.fetchJson(`${this.mainUrl}records?from=${fromID}&to=${toID}`);
+		return this.fetchJson(`${this.mainUrl}/records?from=${fromID}&to=${toID}`);
 	}
 
 	/** Retrieves columns from the api */
 	getColumns(): Promise<string[]> {
-		return this.fetchJson(`${this.mainUrl}columns`);
+		return this.fetchJson(`${this.mainUrl}/columns`);
 	}
 
 	/** Retrieves the number of records there are */
 	getRecordCount(): Promise<number> {
-		return this.fetchJson(`${this.mainUrl}recordCount`);
+		return this.fetchJson(`${this.mainUrl}/recordCount`);
 	}
 }
diff --git a/app.ts b/app.ts
index ae953f3c..e9c409e3 100644
--- a/app.ts
+++ b/app.ts
@@ -18,10 +18,12 @@ class DataHandler {
 	private difference: number;
 	/** A timer that handles window resizing events and store the return type of setTimeout. */
 	private resizeTimer: ReturnType<typeof setTimeout> | null;
+	/** Will cache the record count and only make another api call if needed */
+	private recordCount: number;
 
 	constructor() {
 		this.isFunctionRunning = false;
-		this.apiManager = new ApiManager("http://localhost:2050/");
+		this.apiManager = new ApiManager("http://localhost:2050");
 		this.currentPage = 1;
 		this.paginationStart = 1;
 		this.paginationEnd = 10;
@@ -29,6 +31,21 @@ class DataHandler {
 		this.currentToID = 20;
 		this.difference = 0;
 		this.resizeTimer = null;
+		this.recordCount = 0;
+	}
+
+	getRecordCount(): Promise<number> {
+		if (this.recordCount !== 0) {
+			return Promise.resolve(this.recordCount);
+		}
+		return this.apiManager.getRecordCount()
+			.then(count => {
+				this.recordCount = count;
+				return this.recordCount;
+			})
+			.catch(error => {
+				throw new Error(`Failed trying to fetch the records count: ${error}`);
+			})
 	}
 
 	/** Returning columns and rendering it on the table in the dom. */
@@ -46,14 +63,14 @@ class DataHandler {
 	}
 
 	/** Fetching the records and rendering it on the DOM in the table*/
-	showRecords(fromID: number, toID: number): Promise<any> {
+	showRecords(fromID: number, toID: number): Promise<void> {
 		if (this.isFunctionRunning) {
-			return Promise.resolve(undefined);
+			return new Promise<void>(() => { });
 		}
 		this.isFunctionRunning = true;
-		let inputNumber: string;
+		let inputNumber: number;
 		let stringCount: string;
-		return this.apiManager.getRecordCount()
+		return this.getRecordCount()
 			.then(count => {
 				inputNumber = this.input();
 				const maxRecords = this.recordsPerPage();
@@ -61,7 +78,7 @@ class DataHandler {
 				this.loader();
 				this.currentToID = toID;
 				this.currentFromID = fromID;
-				if (toID >= (count - 1)) {
+				if (toID >= count) {
 					this.currentToID = (count - 1);
 					this.currentFromID = this.currentToID - (maxRecords - 1);
 				} else if (this.currentPage === 1) {
@@ -72,10 +89,11 @@ class DataHandler {
 			})
 			.then(records => {
 				$('.results').empty().append(`Displaying ID's ${this.currentFromID} - ${this.currentToID} out of ${stringCount}`);
+				let inputNumberString = inputNumber.toString();
 				for (const record of records) {
 					$("#records-table-body").append(`<tr class="body-row">`);
 					for (const value of record) {
-						let isSearchValue = value === inputNumber;
+						let isSearchValue = value === inputNumberString;
 						$(".body-row:last-child").append(
 							`<td>
 								<span class="${isSearchValue ? 'highlight' : ''}">${value}</span>
@@ -85,7 +103,7 @@ class DataHandler {
 				}
 				this.isFunctionRunning = false;
 			})
-			.catch(error => {
+			.catch(() => {
 				alert("Something went wrong. Click on the button to refresh the page.");
 				location.reload();
 				this.isFunctionRunning = false;
@@ -96,7 +114,7 @@ class DataHandler {
 	pageNumbers(start: number, end: number): Promise<void> {
 		this.paginationStart = start;
 		this.paginationEnd = end;
-		return this.apiManager.getRecordCount()
+		return this.getRecordCount()
 			.then(count => {
 				$('.pagination').empty();
 				let maxRecords = this.recordsPerPage();
@@ -109,8 +127,11 @@ class DataHandler {
 				} else {
 					$(".next").css({ display: "block" });
 				}
-				if (this.paginationStart < 1) {
+				if (this.paginationStart <= 1) {
 					this.paginationStart = 1;
+					$(".prev").css({ display: "none" });
+				} else {
+					$(".prev").css({ display: "block" });
 				}
 				for (let i = this.paginationStart; i <= this.paginationEnd; i++) {
 					let isActive = i == this.currentPage;
@@ -118,11 +139,6 @@ class DataHandler {
 						`<a id="page-${i}" value="${i}" class="pagination-item ${isActive ? 'active' : ''}">${i}</a>`
 					);
 				}
-				if (this.paginationStart === 1) {
-					$(".prev").css({ display: "none" });
-				} else {
-					$(".prev").css({ display: "block" });
-				}
 			})
 			.catch(error => {
 				throw new Error(`Failed rendering the pagination: ${error}`);
@@ -135,7 +151,7 @@ class DataHandler {
 		// element's attribute value. 
 		$(".pagination").on("click", ".pagination-item", (event) => {
 			$('.pagination-item').prop('disabled', true);
-			return this.apiManager.getRecordCount()
+			this.getRecordCount()
 				.then(count => {
 					$('.search-input').val('');
 					let returnedId = <string>($(event.target).attr("value"));
@@ -146,8 +162,8 @@ class DataHandler {
 						fromID = fromID + this.difference;
 					}
 					let toID = fromID + (maxRecords - 1);
-					if (fromID > count + 1 || toID > count + 1) {
-						toID = count;
+					if (fromID > count || toID > count) {
+						toID = (count - 1);
 						fromID = toID - maxRecords;
 						this.currentFromID = fromID;
 					}
@@ -155,7 +171,7 @@ class DataHandler {
 					$(".pagination-item").removeClass("active");
 					$(event.target).addClass("active");
 					const self = this;
-					$(".pagination-item").each(function () {
+					$(".pagination-item").each(() => {
 						let elementID = <string>($(this).attr('value'));
 						let currentPageString = self.currentPage.toString();
 						if (elementID == currentPageString) {
@@ -176,7 +192,6 @@ class DataHandler {
 		$(".next").on("click", () => {
 			this.paginationStart = this.paginationEnd + 1;
 			this.paginationEnd = this.paginationStart + 9;
-			$(".pagination").empty();
 			this.pageNumbers(this.paginationStart, this.paginationEnd);
 		});
 
@@ -184,16 +199,16 @@ class DataHandler {
 		$(".prev").on("click", () => {
 			this.paginationEnd = this.paginationStart - 1;
 			this.paginationStart = this.paginationEnd - 9;
-			$(".pagination").empty();
 			this.pageNumbers(this.paginationStart, this.paginationEnd);
 		});
 	}
 
 	/** Handles all the functionality related to the search. */
 	initializeSearch(): void {
+		let regexPattern = /[0-9]/;
 		/** Prevents certain characters to be entered in the input field. */
 		$('.search-input').on('keydown', (e) => {
-			if (e.key === 'e' || e.key === 'E' || e.key === '.' || e.key === '+' || e.key === '*' || e.key === '-') {
+			if (!regexPattern.test(e.key) && e.key.length === 1) {
 				e.preventDefault();
 			}
 			if (e.key === 'Enter') {
@@ -203,42 +218,41 @@ class DataHandler {
 
 		/** Takes the number entered in the search field and calculates a range and render that 
 		 * on to the DOM. */
-		$(".search-input").on("input", (event: any) => {
-			event.preventDefault();
-			return this.apiManager.getRecordCount()
+		$(".search-input").on("input", (e: any) => {
+			e.preventDefault();
+			return this.getRecordCount()
 				.then(count => {
 					let inputNumber = this.input();
-					let inputNumberInt = parseInt(inputNumber);
-					if (inputNumber !== '') {
+					if (!regexPattern.test(e.key)) {
 						const maxRecords = this.recordsPerPage();
-						let end = Math.ceil(inputNumberInt / maxRecords) * (maxRecords);
+						let end = Math.ceil(inputNumber / maxRecords) * (maxRecords);
 						if (end > (count + 1)) {
 							end = count;
 							this.currentToID = end;
 						}
 						let start = (end - (maxRecords - 1));
 						if ((end - maxRecords) === 0) {
-							end = Math.ceil(inputNumberInt / maxRecords) * (maxRecords);
+							end = Math.ceil(inputNumber / maxRecords) * (maxRecords);
 							start = end - maxRecords;
 						}
 						this.currentPage = Math.floor(end / maxRecords);
-						if (inputNumberInt < 1000000 && inputNumberInt > 0) {
-							if (end === 1000000) {
+						if (inputNumber < count && inputNumber > 0) {
+							if (end === count) {
 								end = end - 1;
 							} else {
 								null;
 							}
 							$('.results-box').remove();
-							$('.search-container').append(`
-							<div class="results-box">
-								<p class="results-select">${start} - ${end}</p>
-							</div>`);
+							$('.search-container').append(
+								`<div class="results-box">
+									<p class="results-select">${start} - ${end}</p>
+								</div>`);
 						} else {
 							$('.results-box').remove();
-							$('.search-container').append(`
-							<div class="results-box">
-								<p class="message">Invalid Input!</p>
-							</div>`);
+							$('.search-container').append(
+								`<div class="results-box">
+									<p class="message">Invalid Input!</p>
+								</div>`);
 						}
 					} else {
 						$('.results-box').remove();
@@ -256,7 +270,7 @@ class DataHandler {
 			let endID: number;
 			let pageEnd: number;
 			let pageStart: number;
-			return this.apiManager.getRecordCount()
+			return this.getRecordCount()
 				.then(count => {
 					let idRange = $('.results-select').text();
 					let rangeArray = null;
@@ -299,21 +313,15 @@ class DataHandler {
 		let screenHeight = <number>($('#records-table-body').height());
 		let pageStart: number;
 		let pageEnd: number;
-		return this.apiManager.getRecordCount()
+		return this.getRecordCount()
 			.then(count => {
-				let maxRecords = Math.ceil(screenHeight / 68);
-				maxRecords = maxRecords - 1;
+				let maxRecords = this.recordsPerPage();
 				let inputNumber = this.input();
-				let length = inputNumber.length;
-				let inputNumberInt = parseInt(inputNumber);
-				if (inputNumber === '') {
-					if (this.currentFromID === 0) {
-						this.currentFromID = 0;
-					}
+				if (inputNumber === -1) {
 					let newCurrentPage = Math.ceil(this.currentFromID / maxRecords);
-					if (newCurrentPage === 1) {
-						newCurrentPage = 1;
+					if (newCurrentPage === 0) {
 						this.currentFromID = 0;
+						newCurrentPage = 1;
 					}
 					this.currentToID = this.currentFromID + maxRecords;
 					this.currentPage = newCurrentPage;
@@ -323,12 +331,10 @@ class DataHandler {
 					if (this.currentToID >= count) {
 						this.currentToID = (count - 1);
 					}
-					if (length > 0) {
-						let newCurrentPage = Math.ceil(inputNumberInt / maxRecords);
-						this.currentToID = newCurrentPage * maxRecords;
-						this.currentPage = newCurrentPage;
-						this.currentFromID = (this.currentPage - 1) * maxRecords + 1;
-					}
+					let newCurrentPage = Math.ceil(inputNumber / maxRecords);
+					this.currentToID = newCurrentPage * maxRecords;
+					this.currentPage = newCurrentPage;
+					this.currentFromID = (this.currentPage - 1) * maxRecords + 1;
 				}
 				if (this.currentFromID === 0) {
 					pageEnd = Math.ceil(Math.floor(this.currentToID / (maxRecords - 1)) / 10) * 10;
@@ -353,7 +359,7 @@ class DataHandler {
 	}
 
 	/** When resizing the window. Timeout is put in place so that the function doesn't
-	 * take in every value returned when resizing. */
+	 * take in every value returned during resizing. */
 	resize(): void {
 		if (this.resizeTimer !== null) {
 			clearTimeout(this.resizeTimer);
@@ -385,9 +391,14 @@ class DataHandler {
 	}
 
 	/** Retrieve the search value from the input even when it's empty. */
-	input(): string {
-		let inputNumber = <string>($('.search-input').val());
-		return inputNumber;
+	input(): number {
+		let inputValue = <string>($('.search-input').val());
+		let inputNumber = parseInt(inputValue);
+		if (isNaN(inputNumber) || inputNumber < 0) {
+			return -1;
+		} else {
+			return inputNumber;
+		}
 	}
 }
 

From 12164f0ff347b8523246c5ee12ca16be23059269 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Tue, 26 Sep 2023 08:46:16 +0200
Subject: [PATCH 36/40] Updated calculations for more precision

---
 app.ts | 82 ++++++++++++++++++++++++----------------------------------
 1 file changed, 34 insertions(+), 48 deletions(-)

diff --git a/app.ts b/app.ts
index e9c409e3..08b8e1d8 100644
--- a/app.ts
+++ b/app.ts
@@ -152,36 +152,28 @@ class DataHandler {
 		$(".pagination").on("click", ".pagination-item", (event) => {
 			$('.pagination-item').prop('disabled', true);
 			this.getRecordCount()
-				.then(count => {
-					$('.search-input').val('');
-					let returnedId = <string>($(event.target).attr("value"));
-					this.currentPage = parseInt(returnedId);
-					const maxRecords = this.recordsPerPage();
-					let fromID = Math.ceil(this.currentPage * maxRecords - (maxRecords - 1));
-					if (this.difference > 0 && this.difference < maxRecords) {
-						fromID = fromID + this.difference;
-					}
-					let toID = fromID + (maxRecords - 1);
-					if (fromID > count || toID > count) {
-						toID = (count - 1);
-						fromID = toID - maxRecords;
-						this.currentFromID = fromID;
-					}
-					this.currentFromID = fromID;
-					$(".pagination-item").removeClass("active");
-					$(event.target).addClass("active");
-					const self = this;
-					$(".pagination-item").each(() => {
-						let elementID = <string>($(this).attr('value'));
-						let currentPageString = self.currentPage.toString();
-						if (elementID == currentPageString) {
-							$(this).addClass('active');
-						}
-					});
-					return this.showRecords(fromID, toID)
-						.then(() => {
-							$('.pagination-item').prop('disabled', false)
-						});
+			$('.search-input').val('');
+			let returnedId = <string>($(event.target).attr("value"));
+			let maxRecords = this.recordsPerPage();
+			this.currentPage = parseInt(returnedId);
+			let toID = (this.currentPage * maxRecords) + (this.currentPage - 1);
+			if (this.difference > 0) {
+				toID = toID - this.difference;
+			}
+			let fromID = toID - maxRecords;
+			this.currentFromID = fromID;
+			$(".pagination-item").removeClass("active");
+			$(event.target).addClass("active");
+			$(".pagination-item").each(() => {
+				let elementID = <string>($(this).attr('value'));
+				let currentPageString = this.currentPage.toString();
+				if (elementID == currentPageString) {
+					$(this).addClass('active');
+				}
+			});
+			return this.showRecords(fromID, toID)
+				.then(() => {
+					$('.pagination-item').prop('disabled', false)
 				})
 				.catch(error => {
 					throw new Error(`Failed showing the records when clicking on the page button: ${error}`);
@@ -224,24 +216,18 @@ class DataHandler {
 				.then(count => {
 					let inputNumber = this.input();
 					if (!regexPattern.test(e.key)) {
-						const maxRecords = this.recordsPerPage();
-						let end = Math.ceil(inputNumber / maxRecords) * (maxRecords);
-						if (end > (count + 1)) {
-							end = count;
-							this.currentToID = end;
-						}
-						let start = (end - (maxRecords - 1));
+						let maxRecords = this.recordsPerPage();
+						let end =(Math.ceil(inputNumber / maxRecords) * (maxRecords)) + 1;
+						let start = end - maxRecords;
 						if ((end - maxRecords) === 0) {
-							end = Math.ceil(inputNumber / maxRecords) * (maxRecords);
 							start = end - maxRecords;
 						}
-						this.currentPage = Math.floor(end / maxRecords);
-						if (inputNumber < count && inputNumber > 0) {
-							if (end === count) {
-								end = end - 1;
-							} else {
-								null;
-							}
+						if (end >= count) {
+							end = (count - 1);
+							this.currentToID = end;
+						}
+						this.currentPage = Math.floor((end + 1) / (maxRecords + 1));
+						if (inputNumber < count && inputNumber > -1) {
 							$('.results-box').remove();
 							$('.search-container').append(
 								`<div class="results-box">
@@ -280,7 +266,7 @@ class DataHandler {
 					endID = parseInt(rangeArray[1]);
 					if (!isNaN(endID) && Number.isInteger(endID)) {
 						let maxRecords = this.recordsPerPage();
-						this.currentPage = Math.ceil(endID / maxRecords);
+						this.currentPage = Math.floor((endID + 1) / (maxRecords + 1));
 						pageEnd = Math.ceil(this.currentPage / 10) * 10;
 						pageStart = pageEnd - 9;
 						if (endID >= count) {
@@ -325,8 +311,8 @@ class DataHandler {
 					}
 					this.currentToID = this.currentFromID + maxRecords;
 					this.currentPage = newCurrentPage;
-					let originalID = (Math.floor(maxRecords * this.currentPage) - (maxRecords - 1));
-					this.difference = this.currentFromID - originalID;
+					let originalID = ((this.currentPage * maxRecords) + (this.currentPage - 1)) - maxRecords;
+					this.difference = originalID - this.currentFromID;
 				} else {
 					if (this.currentToID >= count) {
 						this.currentToID = (count - 1);

From 43bef10acc5397c743b42a63812c9fb673526f7b Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Tue, 26 Sep 2023 16:52:57 +0200
Subject: [PATCH 37/40] Updated comments.

---
 app.ts | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/app.ts b/app.ts
index 08b8e1d8..a90691d5 100644
--- a/app.ts
+++ b/app.ts
@@ -180,14 +180,14 @@ class DataHandler {
 				});
 		})
 
-		/** Gives the next set of page numbers based on the last page on the pagination. */
+		// Gives the next set of page numbers based on the last page on the pagination.
 		$(".next").on("click", () => {
 			this.paginationStart = this.paginationEnd + 1;
 			this.paginationEnd = this.paginationStart + 9;
 			this.pageNumbers(this.paginationStart, this.paginationEnd);
 		});
 
-		/** Gives the previous set of pages numbers based on the last page in the pagination. */
+		// Gives the previous set of pages numbers based on the last page in the pagination
 		$(".prev").on("click", () => {
 			this.paginationEnd = this.paginationStart - 1;
 			this.paginationStart = this.paginationEnd - 9;
@@ -198,7 +198,7 @@ class DataHandler {
 	/** Handles all the functionality related to the search. */
 	initializeSearch(): void {
 		let regexPattern = /[0-9]/;
-		/** Prevents certain characters to be entered in the input field. */
+		// Prevents certain characters to be entered in the input field.
 		$('.search-input').on('keydown', (e) => {
 			if (!regexPattern.test(e.key) && e.key.length === 1) {
 				e.preventDefault();
@@ -208,8 +208,8 @@ class DataHandler {
 			}
 		});
 
-		/** Takes the number entered in the search field and calculates a range and render that 
-		 * on to the DOM. */
+		// Takes the number entered in the search field and calculates a range and render that 
+		// on to the DOM.
 		$(".search-input").on("input", (e: any) => {
 			e.preventDefault();
 			return this.getRecordCount()
@@ -217,7 +217,7 @@ class DataHandler {
 					let inputNumber = this.input();
 					if (!regexPattern.test(e.key)) {
 						let maxRecords = this.recordsPerPage();
-						let end =(Math.ceil(inputNumber / maxRecords) * (maxRecords)) + 1;
+						let end = (Math.ceil(inputNumber / maxRecords) * (maxRecords)) + 1;
 						let start = end - maxRecords;
 						if ((end - maxRecords) === 0) {
 							start = end - maxRecords;
@@ -249,7 +249,7 @@ class DataHandler {
 				});
 		});
 
-		/** Will take the range on the DOM and return records based on that range. */
+		// Will take the range on the DOM and return records based on that range.
 		$('.heading').on('click', '.results-select', (event: any) => {
 			$('.results-select').prop('disabled', true);
 			let startID: number;
@@ -323,12 +323,10 @@ class DataHandler {
 					this.currentFromID = (this.currentPage - 1) * maxRecords + 1;
 				}
 				if (this.currentFromID === 0) {
-					pageEnd = Math.ceil(Math.floor(this.currentToID / (maxRecords - 1)) / 10) * 10;
-					if (screenHeight < 136) {
-						pageEnd = Math.ceil(Math.floor(this.currentToID / (maxRecords)) / 10) * 10;
-					}
+					let divisor = screenHeight < 136 ? maxRecords : maxRecords - 1;
+					pageEnd = Math.ceil(Math.floor(this.currentToID / divisor) / 10) * 10;
 				} else {
-					pageEnd = Math.ceil(Math.floor(this.currentToID / (maxRecords)) / 10) * 10;
+					pageEnd = Math.ceil(Math.floor(this.currentToID / maxRecords) / 10) * 10;
 				}
 				pageStart = pageEnd - 9;
 				this.paginationStart = pageStart;

From 9b9bcc6463302e1284f516a63bdc9eade74c3455 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Fri, 29 Sep 2023 12:35:06 +0200
Subject: [PATCH 38/40] Did all the requested changes including error handling

---
 apiManager.ts | 19 ++++++++++--
 app.ts        | 86 +++++++++++++++++++++++++++++++--------------------
 style.css     | 17 +++++++---
 3 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/apiManager.ts b/apiManager.ts
index 3fc2dbea..c10c4399 100644
--- a/apiManager.ts
+++ b/apiManager.ts
@@ -10,9 +10,9 @@ class ApiManager {
 		return fetch(url)
 			.then(res => {
 				if (res.ok) {
-					return res.json()
+					return res.json();
 				} else {
-					throw new Error(`HTTP error! Status: ${res.status}`)
+					throw new Error(`HTTP error! Status: ${res.status}`);
 				}
 			})
 			.catch(error => {
@@ -32,6 +32,19 @@ class ApiManager {
 
 	/** Retrieves the number of records there are */
 	getRecordCount(): Promise<number> {
-		return this.fetchJson(`${this.mainUrl}/recordCount`);
+		return fetch(`${this.mainUrl}/recordCount`)
+		.then(res => {
+			if(res.ok) {
+				return res.text();
+			} else {
+				throw new Error(`HTTP error? Status: ${res.status}`);
+			}
+		})
+		.then (recordCount => {
+			return parseInt(recordCount);
+		})
+		.catch(error => {
+			throw error;
+		});
 	}
 }
diff --git a/app.ts b/app.ts
index a90691d5..68bde39d 100644
--- a/app.ts
+++ b/app.ts
@@ -1,7 +1,7 @@
 class DataHandler {
-	/** It tracks if the showRecords function is running and would the value would be false if it's not. */
+	/** It tracks if the showRecords function is running. Is false if it's not. */
 	private isFunctionRunning: boolean;
-	/** This is an instance of the ApiManager class and passing a string when being used. */
+	/** Provides the url to the server during initialization. */
 	private apiManager: ApiManager;
 	/** The following track what page the user is on when navigating through the web app. */
 	private currentPage: number;
@@ -44,11 +44,12 @@ class DataHandler {
 				return this.recordCount;
 			})
 			.catch(error => {
-				throw new Error(`Failed trying to fetch the records count: ${error}`);
-			})
+				console.error("Failed getting the record count: ", error);
+				throw error;
+			});
 	}
 
-	/** Returning columns and rendering it on the table in the dom. */
+	/** Fetching the columns and rendering it on the table in the dom. */
 	showColumns(): Promise<void> {
 		$(".head-row").empty();
 		return this.apiManager.getColumns()
@@ -58,7 +59,8 @@ class DataHandler {
 				}
 			})
 			.catch(error => {
-				throw new Error(`Failed to retrieve columns: ${error}`);
+				console.error("Failed showing the columns: ", error);
+				throw error;
 			});
 	}
 
@@ -103,10 +105,10 @@ class DataHandler {
 				}
 				this.isFunctionRunning = false;
 			})
-			.catch(() => {
-				alert("Something went wrong. Click on the button to refresh the page.");
-				location.reload();
+			.catch(error => {
 				this.isFunctionRunning = false;
+				console.error("Failed showing the records: ", error);
+				throw error;
 			});
 	}
 
@@ -141,7 +143,8 @@ class DataHandler {
 				}
 			})
 			.catch(error => {
-				throw new Error(`Failed rendering the pagination: ${error}`);
+				console.error("Failed when showing the page numbers: ", error);
+				throw error;
 			});
 	}
 
@@ -151,12 +154,11 @@ class DataHandler {
 		// element's attribute value. 
 		$(".pagination").on("click", ".pagination-item", (event) => {
 			$('.pagination-item').prop('disabled', true);
-			this.getRecordCount()
 			$('.search-input').val('');
 			let returnedId = <string>($(event.target).attr("value"));
 			let maxRecords = this.recordsPerPage();
 			this.currentPage = parseInt(returnedId);
-			let toID = (this.currentPage * maxRecords) + (this.currentPage - 1);
+			let toID = this.currentPage * (maxRecords + 1) - 1;
 			if (this.difference > 0) {
 				toID = toID - this.difference;
 			}
@@ -173,10 +175,12 @@ class DataHandler {
 			});
 			return this.showRecords(fromID, toID)
 				.then(() => {
-					$('.pagination-item').prop('disabled', false)
+					$('.pagination-item').prop('disabled', false);
 				})
 				.catch(error => {
-					throw new Error(`Failed showing the records when clicking on the page button: ${error}`);
+					console.error("Failed when clicking on the pagination: ", error);
+					alert("An error occurred while trying to load the page. Please try again.");
+					throw error;
 				});
 		})
 
@@ -184,14 +188,24 @@ class DataHandler {
 		$(".next").on("click", () => {
 			this.paginationStart = this.paginationEnd + 1;
 			this.paginationEnd = this.paginationStart + 9;
-			this.pageNumbers(this.paginationStart, this.paginationEnd);
+			this.pageNumbers(this.paginationStart, this.paginationEnd)
+				.catch(error => {
+					alert("An error occurred while trying to load the next set of pages. Please try again.");
+					console.error("Failed when clicking on the next button: ", error);
+					throw error;
+				})
 		});
 
 		// Gives the previous set of pages numbers based on the last page in the pagination
 		$(".prev").on("click", () => {
 			this.paginationEnd = this.paginationStart - 1;
 			this.paginationStart = this.paginationEnd - 9;
-			this.pageNumbers(this.paginationStart, this.paginationEnd);
+			this.pageNumbers(this.paginationStart, this.paginationEnd)
+				.catch(error => {
+					alert("An error occurred while trying to load the previous set of pages. Please try again.");
+					console.error("Failed when clicking on the previous button: ", error);
+					throw error;
+				})
 		});
 	}
 
@@ -217,10 +231,12 @@ class DataHandler {
 					let inputNumber = this.input();
 					if (!regexPattern.test(e.key)) {
 						let maxRecords = this.recordsPerPage();
-						let end = (Math.ceil(inputNumber / maxRecords) * (maxRecords)) + 1;
+						let pageNumber = Math.ceil(inputNumber / (maxRecords + 1));
+						let end = pageNumber * (maxRecords + 1) - 1;
 						let start = end - maxRecords;
-						if ((end - maxRecords) === 0) {
-							start = end - maxRecords;
+						if (start < 0 || start < maxRecords) {
+							start = 0;
+							end = start + maxRecords;
 						}
 						if (end >= count) {
 							end = (count - 1);
@@ -245,7 +261,9 @@ class DataHandler {
 					}
 				})
 				.catch(error => {
-					throw new Error(`Failed when attempting to search: ${error}`);
+					console.error("Failed when searching: ", error);
+					alert("An error occurred while trying to search. Please try again.");
+					throw error;
 				});
 		});
 
@@ -289,29 +307,32 @@ class DataHandler {
 					$('.results-select').prop('disabled', false);
 				})
 				.catch(error => {
-					throw new Error(`Failed when clicking on the search range: ${error}`);
+					alert("An error occurred while trying to search. Please try again.");
+					console.error("Failed when clicking on the results: ", error);
+					throw error;
 				});
 		});
 	}
 
 	/** Will calculate the amount records to be shown according to the screen height. */
 	adjustDisplayedRecords(): Promise<void> {
-		let screenHeight = <number>($('#records-table-body').height());
 		let pageStart: number;
 		let pageEnd: number;
 		return this.getRecordCount()
 			.then(count => {
 				let maxRecords = this.recordsPerPage();
 				let inputNumber = this.input();
+				let newToID = this.currentToID === 0 ? this.currentToID + 1 : this.currentToID;
+				let newMaxRecords = maxRecords === 0 ? maxRecords + 1 : maxRecords;
 				if (inputNumber === -1) {
-					let newCurrentPage = Math.ceil(this.currentFromID / maxRecords);
+					let newCurrentPage = Math.ceil(this.currentFromID / newMaxRecords);
 					if (newCurrentPage === 0) {
 						this.currentFromID = 0;
 						newCurrentPage = 1;
 					}
 					this.currentToID = this.currentFromID + maxRecords;
 					this.currentPage = newCurrentPage;
-					let originalID = ((this.currentPage * maxRecords) + (this.currentPage - 1)) - maxRecords;
+					let originalID = (this.currentPage - 1) * (maxRecords + 1);
 					this.difference = originalID - this.currentFromID;
 				} else {
 					if (this.currentToID >= count) {
@@ -322,12 +343,8 @@ class DataHandler {
 					this.currentPage = newCurrentPage;
 					this.currentFromID = (this.currentPage - 1) * maxRecords + 1;
 				}
-				if (this.currentFromID === 0) {
-					let divisor = screenHeight < 136 ? maxRecords : maxRecords - 1;
-					pageEnd = Math.ceil(Math.floor(this.currentToID / divisor) / 10) * 10;
-				} else {
-					pageEnd = Math.ceil(Math.floor(this.currentToID / maxRecords) / 10) * 10;
-				}
+				pageEnd = Math.ceil(Math.floor(newToID / newMaxRecords) / 10) * 10;
+				pageEnd = pageEnd === 0 ? 10 : pageEnd;
 				pageStart = pageEnd - 9;
 				this.paginationStart = pageStart;
 				this.paginationEnd = pageEnd;
@@ -338,7 +355,9 @@ class DataHandler {
 				return this.pageNumbers(pageStart, pageEnd);
 			})
 			.catch(error => {
-				throw new Error(`Failed when resizing the window: ${error}`);
+				console.error("Failed when adjusting the records: ", error);
+				alert("An error occurred while trying to adjust the records. Please try again.");
+				throw error;
 			});
 	}
 
@@ -349,8 +368,9 @@ class DataHandler {
 			clearTimeout(this.resizeTimer);
 		}
 		this.resizeTimer = setTimeout(() => {
-			return this.adjustDisplayedRecords()
+			this.adjustDisplayedRecords()
 				.catch(error => {
+					alert("An error occurred while trying to resize the window. Please try again.");
 					throw error;
 				});
 		}, 250);
@@ -370,7 +390,6 @@ class DataHandler {
 	recordsPerPage(): number {
 		const screenHeight = <number>($('#records-table-body').height());
 		let maxRecords = Math.floor(screenHeight / 68);
-		maxRecords = maxRecords - 1;
 		return maxRecords;
 	}
 
@@ -398,6 +417,7 @@ window.onload = () => {
 			dataHandler.initializeSearch();
 		})
 		.catch(error => {
+			alert("An error occurred while trying to load your page. Please try again.");
 			throw new Error(`An error occurred when loading your page: ${error}`);
 		});
 	$(window).on('resize', () => {
diff --git a/style.css b/style.css
index 1467dce9..665e47fd 100644
--- a/style.css
+++ b/style.css
@@ -10,7 +10,7 @@ body {
 	background-color: #141A27;
 	background-attachment: fixed;
 	height: 100vh;
-	min-height: 68px !important;
+	/* min-height: 68px !important; */
 }
 
 body::-webkit-scrollbar {
@@ -81,8 +81,8 @@ thead {
 	font-family: 'Atma', cursive;
 	color: #A1AFC2;
 	font-weight: 500;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	/* text-overflow: ellipsis;
+	white-space: nowrap; */
 	max-height: 10px;
 	padding: 2px;
 }
@@ -189,8 +189,8 @@ th,
 td {
 	padding: 0.2px;
 	text-align: center;
-	white-space: nowrap;
-	text-overflow: ellipsis;
+	/* white-space: nowrap;
+	text-overflow: ellipsis; */
 	max-height: fit-content;
 }
 
@@ -252,3 +252,10 @@ a {
 		transform: rotate(360deg);
 	}
 }
+
+@media screen and (max-width: 768px) {
+	td {
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}

From e2e0439b38b321bbeb1605bb1e39c50df45f3b2b Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Fri, 29 Sep 2023 15:28:12 +0200
Subject: [PATCH 39/40] Update

---
 apiManager.ts | 28 ++++++++++++++--------------
 app.ts        | 32 +++++++++++++-------------------
 style.css     |  6 +++---
 3 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/apiManager.ts b/apiManager.ts
index c10c4399..aec4d817 100644
--- a/apiManager.ts
+++ b/apiManager.ts
@@ -1,5 +1,5 @@
 class ApiManager {
-	
+
 	private mainUrl: string;
 
 	constructor(mainUrl: string) {
@@ -33,18 +33,18 @@ class ApiManager {
 	/** Retrieves the number of records there are */
 	getRecordCount(): Promise<number> {
 		return fetch(`${this.mainUrl}/recordCount`)
-		.then(res => {
-			if(res.ok) {
-				return res.text();
-			} else {
-				throw new Error(`HTTP error? Status: ${res.status}`);
-			}
-		})
-		.then (recordCount => {
-			return parseInt(recordCount);
-		})
-		.catch(error => {
-			throw error;
-		});
+			.then(res => {
+				if (res.ok) {
+					return res.text();
+				} else {
+					throw new Error(`HTTP error? Status: ${res.status}`);
+				}
+			})
+			.then(recordCount => {
+				return parseInt(recordCount);
+			})
+			.catch(error => {
+				throw error;
+			});
 	}
 }
diff --git a/app.ts b/app.ts
index 68bde39d..2f14199e 100644
--- a/app.ts
+++ b/app.ts
@@ -173,16 +173,15 @@ class DataHandler {
 					$(this).addClass('active');
 				}
 			});
-			return this.showRecords(fromID, toID)
+			this.showRecords(fromID, toID)
 				.then(() => {
 					$('.pagination-item').prop('disabled', false);
 				})
 				.catch(error => {
 					console.error("Failed when clicking on the pagination: ", error);
 					alert("An error occurred while trying to load the page. Please try again.");
-					throw error;
 				});
-		})
+		});
 
 		// Gives the next set of page numbers based on the last page on the pagination.
 		$(".next").on("click", () => {
@@ -190,10 +189,9 @@ class DataHandler {
 			this.paginationEnd = this.paginationStart + 9;
 			this.pageNumbers(this.paginationStart, this.paginationEnd)
 				.catch(error => {
-					alert("An error occurred while trying to load the next set of pages. Please try again.");
 					console.error("Failed when clicking on the next button: ", error);
-					throw error;
-				})
+					alert("An error occurred while trying to load the next set of pages. Please try again.");
+				});
 		});
 
 		// Gives the previous set of pages numbers based on the last page in the pagination
@@ -202,10 +200,9 @@ class DataHandler {
 			this.paginationStart = this.paginationEnd - 9;
 			this.pageNumbers(this.paginationStart, this.paginationEnd)
 				.catch(error => {
-					alert("An error occurred while trying to load the previous set of pages. Please try again.");
 					console.error("Failed when clicking on the previous button: ", error);
-					throw error;
-				})
+					alert("An error occurred while trying to load the previous set of pages. Please try again.");
+				});
 		});
 	}
 
@@ -226,7 +223,7 @@ class DataHandler {
 		// on to the DOM.
 		$(".search-input").on("input", (e: any) => {
 			e.preventDefault();
-			return this.getRecordCount()
+			this.getRecordCount()
 				.then(count => {
 					let inputNumber = this.input();
 					if (!regexPattern.test(e.key)) {
@@ -263,7 +260,6 @@ class DataHandler {
 				.catch(error => {
 					console.error("Failed when searching: ", error);
 					alert("An error occurred while trying to search. Please try again.");
-					throw error;
 				});
 		});
 
@@ -274,7 +270,7 @@ class DataHandler {
 			let endID: number;
 			let pageEnd: number;
 			let pageStart: number;
-			return this.getRecordCount()
+			this.getRecordCount()
 				.then(count => {
 					let idRange = $('.results-select').text();
 					let rangeArray = null;
@@ -298,18 +294,17 @@ class DataHandler {
 					}
 				})
 				.then(() => {
-					return this.pageNumbers(pageStart, pageEnd);
+					this.pageNumbers(pageStart, pageEnd);
 				})
 				.then(() => {
-					return this.showRecords(startID, endID);
+					this.showRecords(startID, endID);
 				})
 				.then(() => {
 					$('.results-select').prop('disabled', false);
 				})
 				.catch(error => {
-					alert("An error occurred while trying to search. Please try again.");
 					console.error("Failed when clicking on the results: ", error);
-					throw error;
+					alert("An error occurred while trying to search. Please try again.");
 				});
 		});
 	}
@@ -356,7 +351,6 @@ class DataHandler {
 			})
 			.catch(error => {
 				console.error("Failed when adjusting the records: ", error);
-				alert("An error occurred while trying to adjust the records. Please try again.");
 				throw error;
 			});
 	}
@@ -370,8 +364,8 @@ class DataHandler {
 		this.resizeTimer = setTimeout(() => {
 			this.adjustDisplayedRecords()
 				.catch(error => {
+					console.log("Failed when resizing the window: ", error)
 					alert("An error occurred while trying to resize the window. Please try again.");
-					throw error;
 				});
 		}, 250);
 	}
@@ -417,8 +411,8 @@ window.onload = () => {
 			dataHandler.initializeSearch();
 		})
 		.catch(error => {
+			console.error("Failed when loading the page: ", error);
 			alert("An error occurred while trying to load your page. Please try again.");
-			throw new Error(`An error occurred when loading your page: ${error}`);
 		});
 	$(window).on('resize', () => {
 		dataHandler.resize();
diff --git a/style.css b/style.css
index 665e47fd..71d35f72 100644
--- a/style.css
+++ b/style.css
@@ -249,13 +249,13 @@ a {
 
 @keyframes rot {
 	100% {
-		transform: rotate(360deg);
+		transform: rotate(180deg);
 	}
 }
 
 @media screen and (max-width: 768px) {
 	td {
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		text-overflow: ellipsis !important;
+		white-space: nowrap !important;
 	}
 }

From 1d6c7bac600640ebe53c49821f484e6dc03328d4 Mon Sep 17 00:00:00 2001
From: maxtf141 <isaacsmaxwill22@gmail.com>
Date: Mon, 2 Oct 2023 08:21:56 +0200
Subject: [PATCH 40/40] Update

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

diff --git a/app.ts b/app.ts
index 2f14199e..be007857 100644
--- a/app.ts
+++ b/app.ts
@@ -350,7 +350,7 @@ class DataHandler {
 				return this.pageNumbers(pageStart, pageEnd);
 			})
 			.catch(error => {
-				console.error("Failed when adjusting the records: ", error);
+				console.error("Failed when adjusting the window size: ", error);
 				throw error;
 			});
 	}
@@ -364,7 +364,7 @@ class DataHandler {
 		this.resizeTimer = setTimeout(() => {
 			this.adjustDisplayedRecords()
 				.catch(error => {
-					console.log("Failed when resizing the window: ", error)
+					console.log("Failed when resizing the window: ", error);
 					alert("An error occurred while trying to resize the window. Please try again.");
 				});
 		}, 250);