solution

Author: sbmsr

.github/workflows/package.json

@@ -2,7 +2,11 @@
   "type": "module",
   "devDependencies": {
     "jsdom": "^20.0.2",
+<<<<<<< Updated upstream
     "uvu": "^0.5.6",
     "puppeteer": "^19.7.2"
+=======
+    "uvu": "^0.5.6"
+>>>>>>> Stashed changes
   }
 }

.github/workflows/test.js

@@ -1,3 +1,4 @@
+<<<<<<< Updated upstream
 import { setTimeout } from "timers/promises";
 import { test } from "uvu";
 import * as assert from "uvu/assert";
@@ -102,6 +103,116 @@ test("Solved Issue #4: make table look prettier", async (context) => {
     return window.getComputedStyle(table).getPropertyValue("border-color");
   });
   assert.is(tableBorderColor, "rgb(173, 216, 230)");
+=======
+import { JSDOM } from "jsdom";
+import { setTimeout } from "timers/promises";
+import { test } from "uvu";
+import * as assert from "uvu/assert";
+let filePath = "./src/index.html";
+
+// Helpers
+
+const hasAllClasses = (dom, id, classes) =>
+  classes.every((val) => dom.window.document.getElementById(id).getAttribute("class").split(" ").includes(val));
+
+// Tests
+
+test("Nav Buttons Don't Work (Desktop & Mobile)", async () => {
+  const dom = await JSDOM.fromFile(filePath, {
+    runScripts: "dangerously",
+    resources: "usable",
+  });
+  await setTimeout(10);
+  assert.is(dom.window.document.getElementById("nav-logo").getAttribute("href"), "#header");
+  assert.is(dom.window.document.getElementById("nav-challenges").getAttribute("href"), "#challenges");
+  assert.is(dom.window.document.getElementById("nav-signup").getAttribute("href"), "#signup");
+  assert.is(dom.window.document.getElementById("mobile-nav-challenges").getAttribute("href"), "#challenges");
+  assert.is(dom.window.document.getElementById("mobile-nav-signup").getAttribute("href"), "#signup");
+});
+
+test("Desktop Nav Is Visible on Mobile", async () => {
+  const dom = await JSDOM.fromFile(filePath, {
+    runScripts: "dangerously",
+    resources: "usable",
+  });
+  await setTimeout(10);
+  assert.ok(hasAllClasses(dom, "nav-challenges", ["hide-small"]));
+  assert.ok(hasAllClasses(dom, "nav-signup", ["hide-small"]));
+});
+
+test("Invert Banner Image Colors", async () => {
+  const dom = await JSDOM.fromFile(filePath, {
+    runScripts: "dangerously",
+    resources: "usable",
+  });
+  await setTimeout(150);
+  let banner = dom.window.document.getElementById("jumbo-image");
+  assert.ok(["invert(1)", "invert(100%)"].includes(dom.window.getComputedStyle(banner)._values["filter"]));
+});
+
+test("Tiles Need to be 2x2 Grid", async () => {
+  const dom = await JSDOM.fromFile(filePath, {
+    runScripts: "dangerously",
+    resources: "usable",
+  });
+  await setTimeout(10);
+  let grid = dom.window.document.getElementById("challenge-grid");
+  assert.ok(
+    ["repeat(2,1fr)", "1fr1fr", "50%50%"].includes(
+      dom.window.getComputedStyle(grid)._values["grid-template-columns"].replace(/\s/g, "")
+    )
+  );
+});
+
+test("Improve Errors on Signup Form Validation (Empty Email)", async () => {
+  const dom = await JSDOM.fromFile(filePath, {
+    runScripts: "dangerously",
+    resources: "usable",
+  });
+  await setTimeout(150); // Need to wait for script to load
+
+  // simulate empty email signup
+  dom.window.document.querySelector("button").dispatchEvent(new dom.window.MouseEvent("click"));
+
+  assert.is(dom.window.document.getElementById("success-message").hidden, true);
+  assert.is(dom.window.document.getElementById("empty-error-message").hidden, false);
+  assert.is(dom.window.document.getElementById("taken-error-message").hidden, true);
+});
+
+test("Improve Errors on Signup Form Validation (Taken Email)", async () => {
+  const dom = await JSDOM.fromFile(filePath, {
+    runScripts: "dangerously",
+    resources: "usable",
+  });
+  await setTimeout(150); // Need to wait for script to load
+
+  dom.window.document.getElementById("email").value = "[email protected]";
+  dom.window.document.querySelector("button").dispatchEvent(new dom.window.MouseEvent("click"));
+
+  assert.is(dom.window.document.getElementById("success-message").hidden, true);
+  assert.is(dom.window.document.getElementById("empty-error-message").hidden, true);
+  assert.is(dom.window.document.getElementById("taken-error-message").hidden, false);
+});
+
+test("Improve Errors on Signup Form Validation (Repeat Email)", async () => {
+  const dom = await JSDOM.fromFile(filePath, {
+    runScripts: "dangerously",
+    resources: "usable",
+  });
+  await setTimeout(150); // Need to wait for script to load
+
+  dom.window.document.getElementById("email").value = "[email protected]";
+  dom.window.document.querySelector("button").dispatchEvent(new dom.window.MouseEvent("click"));
+
+  assert.is(dom.window.document.getElementById("success-message").hidden, false);
+  assert.is(dom.window.document.getElementById("empty-error-message").hidden, true);
+  assert.is(dom.window.document.getElementById("taken-error-message").hidden, true);
+
+  dom.window.document.querySelector("button").dispatchEvent(new dom.window.MouseEvent("click"));
+  assert.is(dom.window.document.getElementById("success-message").hidden, true);
+  assert.is(dom.window.document.getElementById("empty-error-message").hidden, true);
+  assert.is(dom.window.document.getElementById("taken-error-message").hidden, false);
+>>>>>>> Stashed changes
 });
 
 test.run();

src/constants.js

@@ -7,8 +7,8 @@ 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";
-export const ACCOUNT_EXECUTIVE_FIELD_NAME = "account_executive";
+export const ACCOUNT_EXECUTIVE_FIELD_NAME = "account_executive";

src/ui.js

@@ -1,13 +1,26 @@
-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";
 
+const formatDate = (d) => {
+  const date = new Date(d);
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const timeString = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+  return timeString;
+};
+
+const formatCurrency = (amount) => {
+  const formattedNumber = amount.toLocaleString("en-US").replace(/,/g, " ");
+  return formattedNumber;
+};
+
 export const makeTable = async () => {
   const companies = await fetchCompanies();
   // Print result of api call to the developer console
@@ -20,13 +33,13 @@ 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 = [];
     row.push(
       company[COMPANY_NAME_FIELD_NAME],
       company[STATUS_FIELD_NAME],
-      company[CREATED_AT_FIELD_NAME],
-      company[REVENUE_YTD_FIELD_NAME],
+      formatDate(company[CREATED_AT_FIELD_NAME]),
+      formatCurrency(company[REVENUE_YTD_FIELD_NAME]),
       company[ACCOUNT_EXECUTIVE_FIELD_NAME]
     );
     companiesToDisplay.push(row);
@@ -36,12 +49,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,42 @@ 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;
+}
+
+tbody tr:first-child {
+  background-color: 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;
+}