add exercise 3

demo-app/exercises/exercise-3.md

@@ -0,0 +1,16 @@
+# Exercise 3
+
+## Steps
+
+1. Create a car model with the following properties:
+
+- id: number
+- make: string
+- model: string
+- year: number
+- color: string
+- price: number
+
+2. Construct and array of cars object INSIDE of car tool using the data from the car table. Dynamically build the table rows with the array of car objects.
+
+3. Ensure it works!

demo-app/src/components/ColourTool.tsx

@@ -1,16 +1,32 @@
 import React from "react";
 
+import { Colour } from "../models/colour";
+
 export function ColourTool() {
+  const colours: Colour[] = [
+    { id: 1, name: "pink", hexcode: "ffc0cb" },
+    { id: 2, name: "blue", hexcode: "0000ff" },
+    { id: 3, name: "purple", hexcode: "800080" },
+    { id: 4, name: "cyan", hexcode: "00ffff" },
+  ];
+
+  // const colourListItems: React.ReactNode[] = [];
+
+  // colours.forEach((colour) => {
+  //   colourListItems.push(<li>{colour.name}</li>);
+  // });
+
+  // const colourListItems = colours.map((colour) => <li>{colour.name}</li>);
+
   return (
     <>
       <header>
         <h1>Colour Tool</h1>
       </header>
       <ul>
-        <li>pink</li>
-        <li>blue</li>
-        <li>purple</li>
-        <li>cyan</li>
+        {colours.map((colour) => (
+          <li key={colour.id}>{colour.name}</li>
+        ))}
       </ul>
     </>
   );

demo-app/src/models/colour.ts

@@ -0,0 +1,5 @@
+export type Colour = {
+  id: number;
+  name: string;
+  hexcode: string;
+};

demo-app/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -17,9 +13,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noImplicitAny": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }