all issues fixed

db.json

@@ -25,4 +25,4 @@
       "revenue_ytd": 100000
     }
   ]
-}
+}

src/api.js

@@ -1,12 +1,14 @@
 import axios from "axios";
-import {BACKEND_BASE_URI, COMPANIES_API_PATH} from "./constants";
+import { BACKEND_BASE_URI, COMPANIES_API_PATH } from "./constants";
 
 /*
   Fetch list of all companies from backend
  */
 export const fetchCompanies = async () => {
   try {
-    const response = await axios.get(`${BACKEND_BASE_URI}${COMPANIES_API_PATH}`);
+    const response = await axios.get(
+      `${BACKEND_BASE_URI}${COMPANIES_API_PATH}`
+    );
     return response.data;
   } catch (err) {
     console.log(`Error occurred while fetching companies. Error: ${err}`);
@@ -15,4 +17,4 @@ export const fetchCompanies = async () => {
     // We'd rather stop throwing an error - which we do.
     throw err;
   }
-};
+};

src/constants.js

@@ -5,10 +5,16 @@
 export const BACKEND_BASE_URI = "http://localhost:3000";
 export const COMPANIES_API_PATH = "/companies";
 
-export const COMPANIES_TABLE_HEADERS = ["Company Name", "Status", "Created At", "Revenue YTD", "Account Executive"];
+export const COMPANIES_TABLE_HEADERS = [
+  "Company Name",
+  "Status",
+  "Created At",
+  "Revenue YTD",
+  "Account Executive",
+];
 
-export const COMPANY_NAME_FIELD_NAME = "company_name";
+export const COMPANY_NAME_FIELD_NAME = "name";
 export const STATUS_FIELD_NAME = "status";
 export const CREATED_AT_FIELD_NAME = "created_at";
 export const REVENUE_YTD_FIELD_NAME = "revenue_ytd";
-export const ACCOUNT_EXECUTIVE_FIELD_NAME = "account_executive";
+export const ACCOUNT_EXECUTIVE_FIELD_NAME = "account_executive";

src/index.js

@@ -1,3 +1,3 @@
-import { makeTable } from './ui'
+import { makeTable } from "./ui";
 // Entry point to our program
-makeTable();
+makeTable();

src/ui.js

@@ -1,11 +1,11 @@
-import {fetchCompanies} from "./api";
+import { fetchCompanies } from "./api";
 import {
   ACCOUNT_EXECUTIVE_FIELD_NAME,
   COMPANIES_TABLE_HEADERS,
   COMPANY_NAME_FIELD_NAME,
   CREATED_AT_FIELD_NAME,
   REVENUE_YTD_FIELD_NAME,
-  STATUS_FIELD_NAME
+  STATUS_FIELD_NAME,
 } from "./constants";
 
 export const makeTable = async () => {
@@ -20,13 +20,21 @@ export const makeTable = async () => {
   companiesToDisplay.push(COMPANIES_TABLE_HEADERS);
 
   // Here we simply rearrange company fields in the order in which we want to display them in UI
-  companies.map(company => {
+  companies.map((company) => {
     const row = [];
+    const date = new Date(company[CREATED_AT_FIELD_NAME]);
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const timeString =
+      hours.toString().padStart(2, "0") +
+      ":" +
+      minutes.toString().padStart(2, "0");
+
     row.push(
       company[COMPANY_NAME_FIELD_NAME],
       company[STATUS_FIELD_NAME],
-      company[CREATED_AT_FIELD_NAME],
-      company[REVENUE_YTD_FIELD_NAME],
+      timeString,
+      company[REVENUE_YTD_FIELD_NAME].toLocaleString().replace(/,/g, " "),
       company[ACCOUNT_EXECUTIVE_FIELD_NAME]
     );
     companiesToDisplay.push(row);
@@ -36,12 +44,12 @@ export const makeTable = async () => {
   const table = document.createElement("table");
   document.body.appendChild(table); // Drew the main table node on the document
 
-  companiesToDisplay.forEach(row => {
+  companiesToDisplay.forEach((row) => {
     const tr = table.insertRow(); //Create a new row
 
-    row.forEach(column => {
+    row.forEach((column) => {
       const td = tr.insertCell();
       td.innerText = column; // Take string from placeholder variable and append it to <tr> node
     });
   });
-};
+};

styles.css

@@ -1,5 +1,5 @@
 table {
-    /*
+  /*
     A table-layout value of fixed is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default.
     Normally, table columns tend to be sized according to how much content they contain, which produces some strange results.
     With table-layout: fixed, you can size your columns according to the width of their headings, and then deal with their content as appropriate.
@@ -9,37 +9,39 @@ table {
     We've coupled this with a width of 100%, meaning that the table will fill any container it is put in, and be nicely
     responsive (although it would still need some more work to get it looking good on narrow screen widths).
      */
-    table-layout: fixed;
-    width: 100%;
-    /*
+  table-layout: fixed;
+  width: 100%;
+  /*
     A border-collapse value of collapse is standard best practice for any table styling effort.
     By default, when you set borders on table elements, they will look pretty ugly.
      */
-    border-collapse: collapse;
-    border: 3px solid purple;
+  border-collapse: collapse;
+  border: 3px solid lightblue;
 }
 
 thead th:nth-child(1) {
-    width: 30%;
+  width: 30%;
 }
 
 thead th:nth-child(2) {
-    width: 20%;
+  width: 20%;
 }
 
 thead th:nth-child(3) {
-    width: 15%;
+  width: 15%;
 }
 
 thead th:nth-child(4) {
-    width: 35%;
+  width: 35%;
 }
 
-th, td {
-    padding: 20px;
+th,
+td {
+  padding: 20px;
 }
 
 /* nth-child is a pretty neat thing to use and is widely applicable in real-life projects. Reader is highly encouraged to do more reading on this. */
 tr:nth-child(1) {
-    font-weight: bold;
-}
+  font-weight: bold;
+  background: lightblue;
+}