diff --git a/src/constants.js b/src/constants.js index 853ebb5..42934a9 100644 --- a/src/constants.js +++ b/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"; diff --git a/src/ui.js b/src/ui.js index 5682dea..a90c5d9 100644 --- a/src/ui.js +++ b/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 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(".", " "); + } }; \ No newline at end of file diff --git a/styles.css b/styles.css index abc9c53..91c3f69 100644 --- a/styles.css +++ b/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; } \ No newline at end of file