adding in the proper json data and effectivley parsing with FileReader; doing necessary things to display table

styles.css

@@ -0,0 +1,79 @@
+html {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  font-family: 'Montserrat', sans-serif;
+}
+body {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #eff3f4;
+}
+.flexBasicRow {
+  flex: 1;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  align-self: stretch;
+  min-width: 800px;
+}
+.flexBasicCol {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+}
+.flex-1 {
+  flex: 1;
+}
+.pageHeader {
+  font-size: 1.5em;
+  font-weight: bold;
+  background-color: #0d7aa5;
+  padding: 1em;
+  color: white;
+  margin: 0;
+  align-self: stretch;
+  text-align: center;
+}
+#inputFile {
+  text-align: center;
+  padding: 1em;
+  margin: 1em;
+  background:#d0d4db;
+  border: none;
+  position:relative;
+  color:#fff;
+  border-radius:2px;
+  text-align:center;
+  float:left;
+  cursor:pointer;
+  transition: 1s;
+  -webkit-transition: 1s;
+}
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin: 2em;
+}
+#table {
+  display: none;
+}
+.headRow {
+  background-color: #0d7aa5;
+  color: white;
+  align-self: stretch;
+}
+.col {
+  flex: 1;
+  margin: 0;
+  padding: 5px;
+  border-right: 1px solid white;
+  text-align: center;
+  text-overflow: ellipsis;
+    overflow: hidden;
+}