Onboarding Project

app.css

@@ -0,0 +1,133 @@
+.maindiv {
+	height: 100%;
+	width: 100%;
+	background-color: #f8f8f8;
+	position: absolute;
+	left: 0px;
+	right: 0px;
+	top: 0px;
+	bottom: 0px;
+	overflow: hidden;
+}
+
+#captiondiv {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 25px;
+	width: 100%;
+	text-align: center;
+	font-family: sans-serif;
+	font-weight: bold;
+	color: #ffffff;
+	background-color: #282c34;
+}
+
+#tablediv {
+	position: absolute;
+	top: 25px;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: calc(100% - 50px);
+	width: 100%;
+}
+
+#buttondiv {
+	position: absolute;
+	top: auto;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 25px;
+	width: 100%;
+	text-align: center;
+	color: #ffffff;
+	background-color: #282c34;
+}
+
+table {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	color: #000000;
+	font-family: Courier, monospace;
+	font-weight: bold;
+	background-color: #ffffff;
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+td {
+	border: 1px solid #000000;
+	font-family: sans-serif;
+	color: #202020;
+	text-align: center;
+	padding: 0;
+	white-space: nowrap;
+	font-size: x-small;
+}
+
+th {
+	border: 1px solid #000000;
+	font-family: sans-serif;
+	color: #ffffff;
+	font-weight: bold;
+	background-color: #282c34;
+	max-height: 25px;
+	padding: 0;
+	font-size: x-small;
+	white-space: nowrap;
+}
+
+button {
+	width: 8%;
+	height: 25px;
+	font-size: small;
+	text-align: center;
+}
+
+@media screen and (max-width: 800px) {
+	#next10 {
+		display: none !important;
+	}
+	#previous10 {
+		display: none !important;
+	}
+}
+
+@media screen and (max-width: 500px) {
+	#next5 {
+		display: none !important;
+	}
+	#previous5 {
+		display: none !important;
+	}
+}
+
+@media screen and (max-width: 300px) {
+	#next {
+		display: none !important;
+	}
+	#previous {
+		display: none !important;
+	}
+}
+
+#jumpToButton {
+	width: 13%;
+	min-width: 50px;
+	font-size: x-small;
+	white-space: nowrap;
+}
+
+#jumpToValue {
+	width: 13%;
+	min-width: 30px;
+}

app.ts

@@ -0,0 +1,143 @@
+
+const myTable = new Table();
+
+
+window.onload = function () {
+	addButtons();
+	myTable.initialTableBuild();
+}
+
+$(window).on('resize', function () {
+
+	myTable.buildTable();
+}
+);
+
+function buttonPropertySet() {
+	let previous = <HTMLInputElement>document.getElementById("previous");
+	let previous5 = <HTMLInputElement>document.getElementById("previous5");
+	let previous10 = <HTMLInputElement>document.getElementById("previous10");
+	let next = <HTMLInputElement>document.getElementById("next");
+	let next5 = <HTMLInputElement>document.getElementById("next5");
+	let next10 = <HTMLInputElement>document.getElementById("next10");
+	let jumpToButton = <HTMLInputElement>document.getElementById("jumpToButton");
+
+	let from = myTable.from;
+	let totalRecords = myTable.totalRecords;
+
+	// disable previous buttons when out of range
+	if (from === 0) {
+		previous.disabled = true;
+		previous5.disabled = true;
+		previous10.disabled = true;
+	}
+	else {
+		previous.disabled = false;
+		previous5.disabled = false;
+		previous10.disabled = false;
+	}
+
+	// disable next buttons when out of range
+	if (from + myTable.getNumberOfRows() === (totalRecords - 1)) {
+		next.disabled = true;
+		next5.disabled = true;
+		next10.disabled = true;
+	}
+	else {
+		next.disabled = false;
+		next5.disabled = false;
+		next10.disabled = false;
+	}
+
+	jumpToButton.disabled = false;
+}
+
+// previous button function that takes a multiplier indicating the amount of pages to page at a time
+function previousButton(multiplier: number) {
+	myTable.from = myTable.from - ((myTable.getNumberOfRows() + 1) * multiplier);
+
+	myTable.buildTable();
+}
+
+// next button function that takes a multiplier indicating the amount of pages to page at a time
+function nextButton(multiplier: number) {
+	myTable.from = myTable.from + ((myTable.getNumberOfRows() + 1) * multiplier);
+
+	myTable.buildTable();
+}
+
+function jumpToButton() {
+	let inputElement = <HTMLInputElement>document.getElementById("jumpToValue");
+	let from: number;
+
+	if (inputElement.value === "")
+		from = 0;
+	else
+		from = parseInt(inputElement.value);
+
+	myTable.from = from;
+
+	myTable.buildTable();
+
+}
+
+function addButtons() {
+
+	let button: HTMLButtonElement;
+	let buttonDiv = <HTMLElement>document.getElementById("buttondiv");
+
+	button = document.createElement("button");
+	button.innerHTML = "&lt&lt&lt 10";
+	button.id = "previous10";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { previousButton(10) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "&lt&lt 5";
+	button.id = "previous5";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { previousButton(5) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "&lt";
+	button.id = "previous";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { previousButton(1) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "&gt";
+	button.id = "next";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { nextButton(1) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "5 &gt&gt ";
+	button.id = "next5";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { nextButton(5) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "10 &gt&gt&gt";
+	button.id = "next10";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { nextButton(10) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "Jump To:";
+	button.id = "jumpToButton";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { jumpToButton() };
+	buttonDiv.appendChild(button);
+
+	let input = document.createElement("INPUT");
+	input.id = "jumpToValue";
+	input.setAttribute("type", "number");
+	buttonDiv.appendChild(input);
+
+}

index.html

@@ -1,13 +1,19 @@
 <!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>
+	<head>
+		<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
+		<script type="text/javascript" charset="utf-8" src="table.js"></script>
+		<script type="text/javascript" charset="utf-8" src="app.js"></script>
+		<link href="app.css" rel="stylesheet" />		
+	</head>
 
+	<body>
+		<div class="maindiv">
+			<div id="captiondiv">Data Grid</div>
+			<div id="tablediv"><table id="dataTable"><tbody id="dataTableBody"></tbody></table></div>
+			<div id="buttondiv"></div>
+		</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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JeanNicholson/onboard-javascript.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/JeanNicholson/onboard-javascript/issues"
+  },
+  "homepage": "https://github.com/JeanNicholson/onboard-javascript#readme",
+  "devDependencies": {
+    "@types/jquery": "^3.5.5",
+    "typescript": "^4.2.2"
+  },
+  "scripts": {
+  "build": "tsc -w"
+  }
+}