Devin Fledermaus

app.ts

@@ -0,0 +1,277 @@
+// Function To Get Number Of Rows That Can Be Displayed While Still Being Readable
+
+const getNoOfRows = () => {
+  const height = window.innerHeight;
+
+  let number = height / 40;
+  let noOfRows = Math.floor(number);
+  return noOfRows;
+};
+
+// Variables
+
+let paramOne = 0;
+let paramTwo = paramOne + getNoOfRows();
+
+//// Functions To Create/Clear The HTML
+
+// Heading Row
+
+const createHeadingRow = (headingData: string) => {
+  const heading: any = document.querySelector("#heading");
+
+  let headings = `<div class="headings" id="headings">${headingData}</div>`;
+  heading.innerHTML += headings;
+};
+
+// Table Content
+
+const createTableContent = (contentData: string) => {
+  const content: any = document.querySelector("#content");
+
+  let table = `<div id="row-${contentData[0]}" class="rows"></div>`;
+  content.innerHTML += table;
+
+  let rows: any = document.querySelector("#row-" + contentData[0] + ".rows");
+  for (let x = 0; x < contentData.length; x++) {
+    let rowCols = `<div class="row_cols">${contentData[x]}</div>`;
+    rows.innerHTML += rowCols;
+  }
+};
+
+// Clear Table Content
+
+const clearTable = () => {
+  const content: any = document.querySelector("#content");
+  const clear = "";
+
+  content.innerHTML = clear;
+};
+
+//// Fetch Requests
+
+// Heading Row (Getting the columns data)
+
+const getHeadings = () => {
+  try {
+    fetch("http://localhost:2050/columns", {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    })
+      .then((res) => res.text())
+      .then((data) => {
+        data = JSON.parse(data);
+        let headingData = data;
+        for (let i = 0; i < headingData.length; i++) {
+          createHeadingRow(headingData[i]);
+        }
+      });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+// Table Content (Getting the table's data)
+
+const getTable = () => {
+  try {
+    fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    })
+      .then((res) => res.text())
+      .then((data) => {
+        data = JSON.parse(data);
+        let contentData = data;
+        for (let i = 0; i < contentData.length; i++) {
+          createTableContent(contentData[i]);
+        }
+      });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+// Displays The Current Results Being Shown
+
+const stats = () => {
+  const pageStats: any = document.querySelector("#pageStats");
+
+  try {
+    fetch("http://localhost:2050/recordCount", {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    })
+      .then((res) => res.text())
+      .then((data) => {
+        data = JSON.parse(data);
+        let count = data;
+        let currentStats = "Showing results from " + paramOne + " to " + paramTwo + " out of " + count + " results.";
+        pageStats.innerHTML = currentStats;
+      });
+  } catch (error) {}
+};
+
+//// Debounce
+
+const debounce = (fn: any, delay: number) => {
+  let timer: number;
+  return function () {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn();
+    }, delay);
+  };
+};
+
+//// Sizing And Resizing
+
+let resizing = () => {
+  let end = paramOne + getNoOfRows();
+
+  if (end > 999999) {
+    paramTwo = 999999;
+    paramOne = paramTwo - getNoOfRows();
+  } else {
+    paramOne;
+    paramTwo = paramOne + getNoOfRows();
+  }
+  clearTable();
+  getTable();
+  stats();
+};
+
+resizing = debounce(resizing, 500);
+
+window.addEventListener("resize", resizing);
+
+//// On Window Load
+
+window.onload = function () {
+  getHeadings();
+  getTable();
+  stats();
+};
+
+//// Navigation
+
+// Next
+const nextButton: any = document.querySelector("#next");
+let nextCount = 0;
+
+const nextDebounce = (fn: any, delay: number) => {
+  let timer: any;
+  return function () {
+    nextCount++;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn();
+    }, delay);
+  };
+};
+
+let next = () => {
+  if (paramTwo === 999999) {
+    alert("You have reached the final page");
+  }
+
+  let nextAmount = paramTwo - paramOne + 1;
+  let nextCountAmount = nextAmount * nextCount;
+  paramOne = paramOne + nextCountAmount;
+  paramTwo = paramOne + getNoOfRows();
+
+  let end = paramOne + getNoOfRows();
+
+  if (end > 999999) {
+    paramTwo = 999999;
+    paramOne = paramTwo - getNoOfRows();
+  }
+
+  nextCount = 0;
+
+  clearTable();
+  getTable();
+  stats();
+};
+
+next = nextDebounce(next, 500);
+
+nextButton.addEventListener("click", next);
+
+// Previous
+const prevButton: any = document.querySelector("#prev");
+let prevCount = 0;
+
+const prevDebounce = (fn: any, delay: number) => {
+  let timer: any;
+  return function () {
+    prevCount++;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn();
+    }, delay);
+  };
+};
+
+let prev = () => {
+  if (paramOne === 0) {
+    alert("You Are On The First Page");
+  } else {
+    let prevAmount = paramTwo - paramOne + 1;
+    let prevCountAmount = prevAmount * prevCount;
+
+    let intOne = paramOne - prevCountAmount;
+
+    if (intOne < 0) {
+      paramOne = 0;
+    } else {
+      paramOne = intOne;
+    }
+
+    paramTwo = paramOne + getNoOfRows();
+
+    prevCount = 0;
+
+    clearTable();
+    getTable();
+    stats();
+  }
+};
+
+prev = prevDebounce(prev, 500);
+
+prevButton.addEventListener("click", prev);
+
+// ID Jump
+const input: any = document.querySelector("input");
+
+let idJump = () => {
+  let currentID = paramOne;
+  let search = input.value;
+  let end = parseInt(search) + getNoOfRows();
+
+  if (search !== NaN && search !== "" && search < 1000000 && search >= 0) {
+    if (end > 999999) {
+      paramTwo = 999999;
+      paramOne = paramTwo - getNoOfRows();
+    } else {
+      paramOne = parseInt(search);
+      paramTwo = paramOne + getNoOfRows();
+    }
+  } else if (search === "") {
+    //pass
+  } else {
+    alert("Make Sure Your Desired ID Is Not A Negative Number Or Doesn't Exceed 999999");
+    paramOne = currentID;
+    paramTwo = paramOne + getNoOfRows();
+    input.value = "";
+  }
+
+  clearTable();
+  stats();
+  getTable();
+};
+
+idJump = debounce(idJump, 500);
+
+window.addEventListener("input", idJump);

index.html

@@ -1,13 +1,27 @@
 <!DOCTYPE html>
-<html>
-<head>
-	<title>JS Onboard Project</title>
-	<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
-</head>
-
-<body>
-	<p>Hello</p>
-</body>
-
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Onboarding JavaScript Task</title>
+    <script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    <script src="app.js" defer></script>
+  </head>
+  <body>
+    <div id="nav">
+      <label id="pageStats"></label>
+      <div id="jumpID">
+        <input type="number" id="idJump" placeholder="Input A Starting ID" />
+        <!-- <button>Jump to ID</button> -->
+      </div>
+      <div id="btns">
+        <button class="prev" id="prev">Prev</button>
+        <button class="next" id="next">Next</button>
+      </div>
+    </div>
+    <div id="heading"></div>
+    <div id="content"></div>
+  </body>
 </html>
-

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "onboard-javascript",
+  "version": "1.0.0",
+  "description": "This is a JavaScript project for all new developers to complete before venturing into our web frontend codebase.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc --build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Koumori97/onboard-javascript.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Koumori97/onboard-javascript/issues"
+  },
+  "homepage": "https://github.com/Koumori97/onboard-javascript#readme",
+  "dependencies": {
+    "typescript": "^4.6.3"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.5.14"
+  }
+}