Fixed issue #1 to #4

src/constants.js

@@ -7,7 +7,7 @@ export const COMPANIES_API_PATH = "/companies";
 
 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";

src/ui.js

@@ -1,3 +1,4 @@
+import { at } from "lodash";
 import {fetchCompanies} from "./api";
 import {
   ACCOUNT_EXECUTIVE_FIELD_NAME,
@@ -25,8 +26,8 @@ export const makeTable = async () => {
     row.push(
       company[COMPANY_NAME_FIELD_NAME],
       company[STATUS_FIELD_NAME],
-      company[CREATED_AT_FIELD_NAME],
-      company[REVENUE_YTD_FIELD_NAME],
+      company[CREATED_AT_FIELD_NAME] = convertDate(company[CREATED_AT_FIELD_NAME]),
+      company[REVENUE_YTD_FIELD_NAME] = convertNumbers(company[REVENUE_YTD_FIELD_NAME]),
       company[ACCOUNT_EXECUTIVE_FIELD_NAME]
     );
     companiesToDisplay.push(row);
@@ -44,4 +45,13 @@ export const makeTable = async () => {
       td.innerText = column; // Take string from placeholder variable and append it to <tr> node
     });
   });
+
+  function convertDate(date){
+    let reformatDate = new Date(date);
+    return reformatDate.toLocaleTimeString([], { hour:"2-digit", minute:"2-digit" });
+  }
+
+  function convertNumbers(number){
+    return number.toLocaleString().replaceAll(".", " ");
+  }
 };

styles.css

@@ -16,7 +16,7 @@ table {
     By default, when you set borders on table elements, they will look pretty ugly.
      */
     border-collapse: collapse;
-    border: 3px solid purple;
+    border: 3px solid lightblue;
 }
 
 thead th:nth-child(1) {
@@ -42,4 +42,5 @@ th, td {
 /* 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;
+    background-color: lightblue;
 }