Added Hello World and Brendon to App.tsx

package.json

@@ -20,6 +20,7 @@
         "build": "react-scripts build",
         "test": "react-scripts test",
         "test:cov": "react-scripts test --coverage --watchAll",
+        "test:json": "react-scripts test --json --watchAll=false --outputFile jest-output.json --coverage",
         "eject": "react-scripts eject",
         "lint": "eslint ./src --ext .tsx --ext .ts --max-warnings 0",
         "eslint-output": "eslint-output ./src --ext .tsx --ext .ts --max-warnings 0",

public/tasks/task-arrays.md

@@ -0,0 +1,5 @@
+# Task - Arrays
+
+Version: 0.0.1
+
+Implement functions that work with arrays immutably.

public/tasks/task-first-branch.md

@@ -0,0 +1,5 @@
+# Task - First Branch
+
+Version: 0.0.1
+
+Pass a short test to have certain text on the page.

public/tasks/task-functions.md

@@ -0,0 +1,5 @@
+# Task - Functions
+
+Version: 0.0.1
+
+Implement a bunch of functions that work on primitives.

public/tasks/task-html-css.md

@@ -0,0 +1,5 @@
+# Task - HTML/CSS
+
+Version: 0.0.1
+
+Add in some HTML and CSS, including a fancy looking button.

public/tasks/task-nested.md

@@ -0,0 +1,5 @@
+# Task - Nested
+
+Version: 0.0.1
+
+Implement functions that work with nested arrays and objects immutably.

public/tasks/task-objects.md

@@ -0,0 +1,5 @@
+# Task - Objects
+
+Version: 0.0.1
+
+Implement functions that work with objects immutably.

src/App.css

@@ -15,7 +15,7 @@
 
 .App-header {
     width: 100%;
-    background-color: #282c34;
+    background-color: rgb(50, 205, 50);
     min-height: 40vh;
     display: flex;
     flex-direction: column;

src/App.test.tsx

@@ -6,4 +6,4 @@ test("renders the course name somewhere", () => {
     render(<App />);
     const linkElement = screen.getByText(/COS420/i);
     expect(linkElement).toBeInTheDocument();
-});
+});

src/App.tsx

@@ -1,16 +1,79 @@
 import React from "react";
 import "./App.css";
+import { Button  } from "react-bootstrap";
 
 function App(): React.JSX.Element {
     return (
         <div className="App">
             <header className="App-header">
-                UM COS420 with React Hooks and TypeScript
+                <h1>UM COS420 with React Hooks and TypeScript</h1>
             </header>
             <p>
                 Edit <code>src/App.tsx</code> and save. This page will
                 automatically reload.
             </p>
+            Hello World
+            <p>Created by Brendon</p>
+
+
+            {/* Step 2: Add image with alt text*/}
+            <h1>Check this picture out:</h1>
+            <img
+                src="C:\Users\brend\tasks\102_0371.jpeg"
+                alt="A picture of my girlfriend and I"
+            />
+
+
+
+            {/* Step 3: Add a list of 3 items*/}
+            <ul>
+                <li>Computer</li>
+                <li>Github</li>
+                <li>Discord</li>
+            </ul>
+
+
+
+            {/* Step 4: Change the background color of the header area */}
+            {/* Changed to vibrant green in the App.css file */}
+
+
+
+
+            {/* Step 5: Add a bootstrap button with the text Log Hello World */}
+            {/* Make the button log Hello World! when clicked */}
+
+            <Button onClick={ () => { console.log("Hello World!") } }>Log Hello World</Button>
+
+
+
+            {/* Step 6: Put a red-filled rectangle in each column using a div tag with width, height, and backgroundColor styles */}
+
+            return (
+            <div style={{ display: "flex", gap: "10px" }}>
+                <div
+                    style={{
+                        width: "100px",
+                        height: "100px",
+                        backgroundColor: "red",
+                    }}
+                ></div>
+                <div
+                    style={{
+                        width: "100px",
+                        height: "100px",
+                        backgroundColor: "red",
+                    }}
+                ></div>
+                <div
+                    style={{
+                        width: "100px",
+                        height: "100px",
+                        backgroundColor: "red",
+                    }}
+                ></div>
+            </div>
+            );
         </div>
     );
 }

src/HtmlCss.test.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+import userEvent from "@testing-library/user-event";
+
+describe("Some HTML Elements are added.", () => {
+    test("(2 pts) There is a heading", () => {
+        render(<App />);
+        const heading = screen.getAllByRole("heading");
+        expect(heading[0]).toBeInTheDocument();
+    });
+
+    test("(2 pts) There is an image with alt text", () => {
+        render(<App />);
+        const image = screen.getByRole("img");
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute("alt");
+    });
+
+    test("(2 pts) There is a list with at least three elements", () => {
+        render(<App />);
+        const list = screen.getByRole("list");
+        expect(list).toBeInTheDocument();
+        expect(list.children.length).toBeGreaterThanOrEqual(3);
+    });
+});
+
+describe("(2 pts) Some basic CSS is added.", () => {
+    test("The background color of the header area is different", () => {
+        render(<App />);
+        const banner = screen.getByRole("banner");
+        expect(banner).not.toHaveStyle({
+            "background-color": "rgb(40, 44, 52)",
+        });
+    });
+});
+
+describe("(2 pts) Some Bootstrap Elements are added", () => {
+    test("There is one bootstrap button with the text 'Log Hello World'", () => {
+        render(<App />);
+        const button = screen.getByRole("button", { name: /Log Hello World/i });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass("btn");
+        expect(button).toHaveClass("btn-primary");
+    });
+
+    test("(2 pts) Not clicking the bootstrap button does not logs 'Hello World!'", () => {
+        const consoleSpy = jest.spyOn(console, "log");
+        render(<App />);
+        expect(consoleSpy).not.toHaveBeenCalledWith("Hello World!");
+    });
+
+    test("(2 pts) Clicking the bootstrap button logs 'Hello World!'", () => {
+        const consoleSpy = jest.spyOn(console, "log");
+        render(<App />);
+        const button = screen.getByRole("button", { name: /Log Hello World/i });
+        userEvent.click(button);
+        expect(consoleSpy).toHaveBeenCalledWith("Hello World!");
+    });
+});
+
+describe("Some additional CSS was added", () => {
+    test("(2 pts) checks if any element has a background color of red", () => {
+        const { container } = render(<App />);
+        // Get all elements in the rendered container
+        const elements = container.querySelectorAll("*");
+
+        // Check if any element has a background color of red
+        let foundRedBackground = false;
+
+        elements.forEach((element) => {
+            const style = getComputedStyle(element);
+            if (
+                style.backgroundColor === "red" ||
+                style.backgroundColor === "rgb(255, 0, 0)"
+            ) {
+                foundRedBackground = true;
+            }
+        });
+
+        expect(foundRedBackground).toBe(true);
+    });
+});