reference

public/css/course.css

@@ -0,0 +1,135 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+
+body {
+  font-family: "Ubuntu", serif;
+  font-weight: 500;
+  font-style: normal;
+  padding: 0pt;
+  margin: 0pt;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "content content"
+    "footer footer";
+  grid-template-columns: 1fr 3fr;
+  gap: 0pt;
+}
+
+.header {
+  grid-area: header;
+  background-color: #48494b;
+  height: 8vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-bottom: 6pt;
+}
+
+.header a {
+  color: white;
+  font-size: 20px;
+}
+
+.content {
+  grid-area: content;
+  height: 80vh;
+  padding: 0pt;
+}
+
+.banner {
+  margin: 0pt;
+  width: 100%;
+  height: 30%;
+  position: relative;
+}
+
+.banner img {
+  width: 100%;
+  height: 20rlh;
+  object-fit: cover;
+}
+
+.banner figcaption {
+  position: absolute;
+  bottom: 5%;
+  background-color: rgba(200, 200, 200, 0.8);
+  padding: 12pt;
+  font-size: 32px;
+  font-weight: 800;
+}
+
+.container {
+  padding: 24pt;
+}
+
+.container table {
+  width: 100%;
+}
+
+.footer {
+  grid-area: footer;
+  height: 8vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #48494b;
+  position: fixed;
+  bottom: 0%;
+  width: 100vw;
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  color: white;
+}
+
+.course {
+  padding: 32pt;
+}
+
+.back-container {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
+.button {
+  width: 150pt;
+  height: 50pt;
+  background-color: #7b92c2;
+  transition: 0.8s;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 6pt;
+  border: 4px solid #a0a0a0
+}
+
+.button a {
+  text-decoration: none;
+  width: 64pt;
+  height: 24pt;
+  background-color: transparent;
+  color: black;
+  width: 100%;
+  text-align: center;
+  margin-top: 8pt;
+  font-weight: 800;
+}
+
+.button:hover {
+  background-color: #a9c1f5;
+}

public/css/style.css

@@ -0,0 +1,144 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+
+body {
+  font-family: "Ubuntu", serif;
+  font-weight: 500;
+  font-style: normal;
+  padding: 0pt;
+  margin: 0pt;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "menu content"
+    "footer footer";
+  grid-template-columns: 1fr 3fr;
+  gap: 0pt;
+}
+
+.header {
+  grid-area: header;
+  background-color: #48494b;
+  height: 8vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-bottom: 6pt;
+}
+
+.header a {
+  color: white;
+  font-size: 20px;
+}
+
+.menu {
+  grid-area: menu;
+  background-color: #9b9b9b;
+  height: 80vh;
+  padding: 16pt;
+}
+
+.content {
+  grid-area: content;
+  height: 80vh;
+  padding: 0pt;
+}
+
+.banner {
+  margin: 0pt;
+  width: 100%;
+  height: 30%;
+  position: relative;
+}
+
+.banner img {
+  width: 100%;
+  height: 20rlh;
+  object-fit: cover;
+}
+
+.banner figcaption {
+  position: absolute;
+  bottom: 5%;
+  background-color: rgba(200, 200, 200, 0.8);
+  padding: 12pt;
+  font-size: 32px;
+  font-weight: 800;
+}
+
+.container {
+  padding: 24pt;
+}
+
+.container table {
+  width: 100%;
+}
+
+.footer {
+  grid-area: footer;
+  height: 8vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #48494b;
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  color: white;
+}
+
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 70%;
+}
+
+td, th {
+  border: 1px solid #bbbbbb;
+  text-align: left;
+  padding: 8px;
+}
+
+td a {
+  color: black;
+}
+
+tr:nth-child(even) {
+  background-color: #acacac;
+}
+
+@media (max-width: 1280px) {  
+
+  body {
+    overflow-x: visible;
+    overflow-y: visible;
+  }
+
+  .grid-container {
+    display: grid;
+    grid-template-areas:
+      "header header"
+      "content content"
+      "menu menu"
+      "footer footer";
+    grid-template-columns: 1fr 1fr;
+    gap: 0pt;
+  }
+
+  .menu {
+    height: auto;
+  }
+}

public/scripts/client.js

@@ -0,0 +1,17 @@
+function loadCourses() {
+  const xhttp = new XMLHttpRequest();
+  xhttp.onload = function() {
+    document.getElementById("coursesTarget").innerHTML =
+    this.responseText;
+  }
+  xhttp.open("GET", "api/courses");
+  xhttp.send();
+
+}
+
+async function loaddata() {
+  let response = await fetch("/api/stuff").then(response => response.json());
+  console.log(response);
+}
+
+loadCourses();

public/scripts/loadCourse.js

@@ -0,0 +1,18 @@
+function loadCourse() {
+  let url = window.location.href;
+  let id = url.split("/")[url.split("/").length - 1];
+  
+  const xhttp = new XMLHttpRequest();
+  xhttp.onload = function() {
+    let course = JSON.parse(this.response);
+    document.getElementById("title").innerHTML = `${course.department} ${course.id}`; 
+    document.getElementById("crsID").innerHTML = `${course.department} ${course.id}`;
+    document.getElementById("crsName").innerHTML = course.name;
+    document.getElementById("crsDes").innerHTML = course.description;
+    document.getElementById("crsCredits").innerHTML = course.credits;
+  }
+  xhttp.open("GET", `/api/course/${id}`);
+  xhttp.send();
+}
+
+loadCourse();