Full Commit History Update

.eslintignore

@@ -0,0 +1,2 @@
+**/*.test.tsx
+**/*.test.ts

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+    "extends": ["react-app", "react-app/jest"],
+    "rules": {},
+    "overrides": [
+        {
+            "files": ["**/*.test.ts", "**/*.test.tsx"],
+            "rules": {
+                "testing-library/no-render-in-setup": "off"
+            }
+        }
+    ]
+}

package.json

@@ -21,7 +21,7 @@
         "test": "react-scripts test",
         "test:cov": "react-scripts test --coverage --watchAll",
         "eject": "react-scripts eject",
-        "lint": "eslint ./src --ext .tsx --ext .ts --max-warnings 0",
+        "lint": "eslint ./src --ext .tsx --ext .ts --max-warnings 0 --ignore-pattern \"*.test.ts\" --ignore-pattern \"*.test.tsx\"",
         "eslint-output": "eslint-output ./src --ext .tsx --ext .ts --max-warnings 0",
         "format": "prettier --config .prettierrc --write src/**/*.{ts,tsx}"
     },

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: orange;
     min-height: 40vh;
     display: flex;
     flex-direction: column;

src/App.tsx

@@ -1,16 +1,89 @@
 import React from "react";
 import "./App.css";
+import { Button, Container, Row, Col } from "react-bootstrap";
+import { Counter } from "./components/Counter";
+import { RevealAnswer } from "./components/RevealAnswer";
+import { ChangeType } from "./components/ChangeType";
+import { StartAttempt } from "./components/StartAttempt";
+import { TwoDice } from "./components/TwoDice";
+import { CycleHoliday } from "./components/CycleHoliday";
 
 function App(): React.JSX.Element {
     return (
         <div className="App">
             <header className="App-header">
-                UD CISC275 with React Hooks and TypeScript
+                UD CISC275 with React Hooks and TypeScript Luke Remmler Hello
+                World
             </header>
             <p>
                 Edit <code>src/App.tsx</code> and save. This page will
                 automatically reload.
             </p>
+            <h1>Luke Remmler App</h1>
+            <img
+                src="../assets/images/pet-ada.jpg"
+                alt="Dr. Bart's dog Ada"
+            />
+            Unordered List:
+            <ul>
+                <li>First thing</li>
+                <li>Another thing</li>
+                <li>A third item</li>
+            </ul>
+            <Button
+                onClick={() => {
+                    console.log("Hello World!");
+                }}
+            >
+                Log Hello World
+            </Button>
+            <Container>
+                <Row>
+                    <Col>
+                        <div
+                            style={{
+                                width: "60px",
+                                height: "120px",
+                                backgroundColor: "red",
+                            }}
+                        ></div>
+                    </Col>
+                    <Col>
+                        <div
+                            style={{
+                                width: "60px",
+                                height: "120px",
+                                backgroundColor: "red",
+                            }}
+                        ></div>
+                    </Col>
+                </Row>
+            </Container>
+
+            {/* Added Components */}
+            <hr />
+            <h2>Counter Component</h2>
+            <Counter />
+
+            <hr />
+            <h2>Reveal Answer Component</h2>
+            <RevealAnswer />
+
+            <hr />
+            <h2>Change Type Component</h2>
+            <ChangeType />
+
+            <hr />
+            <h2>Start Attempt Component</h2>
+            <StartAttempt />
+
+            <hr />
+            <h2>Two Dice Component</h2>
+            <TwoDice />
+
+            <hr />
+            <h2>Cycle Holiday Component</h2>
+            <CycleHoliday />
         </div>
     );
 }

src/arrays.ts

@@ -0,0 +1,136 @@
+/**
+ * Consume an array of numbers, and return a new array containing
+ * JUST the first and last number. If there are no elements, return
+ * an empty array. If there is one element, the resulting list should
+ * the number twice.
+ */
+export function bookEndList(numbers: number[]): number[] {
+    if (numbers.length === 0) {
+        return [];
+    }
+    if (numbers.length === 1) {
+        return [numbers[0], numbers[0]];
+    }
+    return [numbers[0], numbers[numbers.length - 1]];
+}
+
+/**
+ * Consume an array of numbers, and return a new array where each
+ * number has been tripled (multiplied by 3).
+ */
+export function tripleNumbers(numbers: number[]): number[] {
+    return numbers.map((num) => num * 3);
+}
+
+/**
+ * Consume an array of strings and convert them to integers. If
+ * the number cannot be parsed as an integer, convert it to 0 instead.
+ */
+export function stringsToIntegers(numbers: string[]): number[] {
+    return numbers.map((str) => {
+        const parsed = parseInt(str, 10);
+        return isNaN(parsed) ? 0 : parsed;
+    });
+}
+
+/**
+ * Consume an array of strings and return them as numbers. Note that
+ * the strings MAY have "$" symbols at the beginning, in which case
+ * those should be removed. If the result cannot be parsed as an integer,
+ * convert it to 0 instead.
+ */
+// Remember, you can write functions as lambdas too! They work exactly the same.
+export const removeDollars = (amounts: string[]): number[] => {
+    return amounts.map((amount) => {
+        // Remove $ symbol if present
+        const cleanAmount =
+            amount.startsWith("$") ? amount.substring(1) : amount;
+        const parsed = parseInt(cleanAmount, 10);
+        return isNaN(parsed) ? 0 : parsed;
+    });
+};
+
+/**
+ * Consume an array of messages and return a new list of the messages. However, any
+ * string that ends in "!" should be made uppercase. Also, remove any strings that end
+ * in question marks ("?").
+ */
+export const shoutIfExclaiming = (messages: string[]): string[] => {
+    return messages
+        .filter((message) => !message.endsWith("?"))
+        .map((message) =>
+            message.endsWith("!") ? message.toUpperCase() : message,
+        );
+};
+
+/**
+ * Consumes an array of words and returns the number of words that are LESS THAN
+ * 4 letters long.
+ */
+export function countShortWords(words: string[]): number {
+    return words.filter((word) => word.length < 4).length;
+}
+
+/**
+ * Consumes an array of colors (e.g., 'red', 'purple') and returns true if ALL
+ * the colors are either 'red', 'blue', or 'green'. If an empty list is given,
+ * then return true.
+ */
+export function allRGB(colors: string[]): boolean {
+    if (colors.length === 0) return true;
+    return colors.every(
+        (color) => color === "red" || color === "blue" || color === "green",
+    );
+}
+
+/**
+ * Consumes an array of numbers, and produces a string representation of the
+ * numbers being added together along with their actual sum.
+ *
+ * For instance, the array [1, 2, 3] would become "6=1+2+3".
+ * And the array [] would become "0=0".
+ */
+export function makeMath(addends: number[]): string {
+    if (addends.length === 0) {
+        return "0=0";
+    }
+
+    const sum = addends.reduce((total, num) => total + num, 0);
+    const equation = addends.join("+");
+
+    return `${sum}=${equation}`;
+}
+
+/**
+ * Consumes an array of numbers and produces a new array of the same numbers,
+ * with one difference. After the FIRST negative number, insert the sum of all
+ * previous numbers in the list. If there are no negative numbers, then append
+ * the sum to the list.
+ *
+ * For instance, the array [1, 9, -5, 7] would become [1, 9, -5, 10, 7]
+ * And the array [1, 9, 7] would become [1, 9, 7, 17]
+ */
+export function injectPositive(values: number[]): number[] {
+    // Find the index of the first negative number
+    const firstNegativeIndex = values.findIndex((num) => num < 0);
+
+    if (firstNegativeIndex === -1) {
+        // No negative numbers found, append sum to the end
+        const sum = values.reduce((total, num) => total + num, 0);
+        return [...values, sum];
+    } else {
+        // Calculate sum of numbers before the first negative
+        const numbersBeforeNegative = values.slice(0, firstNegativeIndex);
+        const sum = numbersBeforeNegative.reduce(
+            (total, num) => total + num,
+            0,
+        );
+
+        // Insert the sum after the first negative number
+        return [
+            ...values.slice(0, firstNegativeIndex + 1),
+            sum,
+            ...values.slice(firstNegativeIndex + 1),
+        ];
+    }
+}

src/components/ChangeType.tsx

@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+
+export function ChangeType(): JSX.Element {
+    const [type, setType] = useState<string>("Short Answer");
+    return (
+        <div>
+            <button onClick={() => setType(
+                type === "Multiple Choice" ? "Short Answer" : "Multiple Choice"
+            )}>
+                Change Type
+            </button>
+            {type === "Multiple Choice" ? "Multiple Choice" : "Short Answer"}
+        </div>
+    );
+}

src/components/Counter.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from "react";
+
+export function Counter(): JSX.Element {
+    const [value, setValue] = useState<number>(0);
+    return (
+        <div>
+            <button onClick={() => setValue(value + 1)}>Add One</button>
+            <div>Count: {value}</div>
+            <button onClick={() => setValue(value - 1)}>Subtract One</button>
+        </div>
+    );
+}

src/components/CycleHoliday.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+
+export function CycleHoliday(): JSX.Element {
+    type Holiday = "🎁" | "🐇" | "🎃" | "🦃" | "🎄";
+    const [holiday, setHoliday] = useState<Holiday>("🎁");
+
+    const byAlphabet: Record<Holiday, Holiday> = {
+        "🎁": "🐇",
+        "🐇": "🎃", 
+        "🎃": "🦃",
+        "🦃": "🎄",
+        "🎄": "🎁"
+    };
+
+    const byYear: Record<Holiday, Holiday> = {
+        "🎁": "🐇",
+        "🐇": "🎃",
+        "🎃": "🦃", 
+        "🦃": "🎄",
+        "🎄": "🎁"
+    };
+
+    return (
+        <div>
+            <div>Holiday: {holiday}</div>
+            <button onClick={() => setHoliday(byAlphabet[holiday])}>
+                Advance by Alphabet
+            </button>
+            <button onClick={() => setHoliday(byYear[holiday])}>
+                Advance by Year
+            </button>
+        </div>
+    );
+}

src/components/RevealAnswer.tsx

@@ -0,0 +1,11 @@
+import React, { useState } from "react";
+
+export function RevealAnswer(): JSX.Element {
+    const [visible, setVisible] = useState<boolean>(false);
+    return (
+        <div>
+            <button onClick={() => setVisible(!visible)}>Reveal Answer</button>
+            {visible && <div>42</div>}
+        </div>
+    );
+}

src/components/StartAttempt.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+export function StartAttempt(): JSX.Element {
+    const [attempts, setAttempts] = useState<number>(4);
+    const [progress, setProgress] = useState<boolean>(false);
+    return (
+        <div>
+            <div>{attempts}</div>
+            <button 
+                onClick={() => {setProgress(true); setAttempts(attempts - 1);}} 
+                disabled={progress || attempts === 0}
+            >
+                Start Quiz
+            </button>
+            <button onClick={() => setProgress(false)} disabled={!progress}>
+                Stop Quiz
+            </button>
+            <button onClick={() => setAttempts(attempts + 1)} disabled={progress}>
+                Mulligan
+            </button>
+        </div>
+    );
+}

src/components/TwoDice.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+
+export function TwoDice(): JSX.Element {
+    const [left, setLeft] = useState<number>(1);
+    const [right, setRight] = useState<number>(2);
+    return (
+        <div>
+            <div>
+                <span data-testid="left-die">{left}</span>
+                <span data-testid="right-die">{right}</span>
+            </div>
+            <button onClick={() => setLeft(Math.floor(Math.random() * 6) + 1)}>
+                Roll Left
+            </button>
+            <button onClick={() => setRight(Math.floor(Math.random() * 6) + 1)}>
+                Roll Right
+            </button>
+            {left === right && left === 1 && <div>Lose</div>}
+            {left === right && left !== 1 && <div>Win</div>}
+        </div>
+    );
+}