Basic HTML and CSS

README.md

@@ -2,4 +2,4 @@
 
 Hello! This repository has been pre-configured with eslint, prettier, and a github actions workflow to automatically lint and format your code on every push. It'll also deploy your site for you.
 
-You'll complete programming problems by merging in upstream branches. Check out the textbook for more information: <https://frontend-fun.github.io/react-hooks-typescript-tome/>
+You'll complete programming problems by merging in upstream branches. Check out the textbook for more information: <https://greglnelson.github.io/react-hooks-typescript-tome/>

package.json

@@ -8,6 +8,7 @@
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.105",
+        "bootstrap": "^5.3.3",
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.4",
         "react-dom": "^18.3.1",
@@ -20,6 +21,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-components.md

@@ -0,0 +1,5 @@
+# Task - Components
+
+Version: 0.0.1
+
+Fix some components that are using state incorrectly.

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.

public/tasks/task-state.md

@@ -0,0 +1,5 @@
+# Task - State
+
+Version: 0.0.1
+
+Create some new components that have React State.

src/App.css

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

src/App.test.tsx

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

src/App.tsx

@@ -1,16 +1,33 @@
 import React from "react";
 import "./App.css";
+import { ChangeType } from "./components/ChangeType";
+import { RevealAnswer } from "./components/RevealAnswer";
+import { TwoDice } from "./components/TwoDice";
+import { Counter } from "./components/Counter";
+import { DoubleHalf } from "./bad-components/DoubleHalf";
+import { ColoredBox } from "./bad-components/ColoredBox";
+import { ChooseTeam } from "./bad-components/ChooseTeam";
 
 function App(): React.JSX.Element {
     return (
         <div className="App">
             <header className="App-header">
-                UD CISC275 with React Hooks and TypeScript
+                <h1>COS420</h1>
             </header>
-            <p>
-                Edit <code>src/App.tsx</code> and save. This page will
-                automatically reload.
-            </p>
+            <hr></hr>
+            {<DoubleHalf></DoubleHalf>}
+            <hr></hr>
+            <ChooseTeam></ChooseTeam>
+            <hr></hr>
+            <ColoredBox></ColoredBox>
+            <hr></hr>
+            <Counter></Counter>
+            <hr />
+            <RevealAnswer></RevealAnswer>
+            <hr />
+            <TwoDice></TwoDice>
+            <hr />
+            <ChangeType></ChangeType>
         </div>
     );
 }

src/arrays.test.ts

@@ -0,0 +1,273 @@
+import {
+    allRGB,
+    bookEndList,
+    countShortWords,
+    injectPositive,
+    makeMath,
+    removeDollars,
+    shoutIfExclaiming,
+    stringsToIntegers,
+    tripleNumbers,
+} from "./arrays";
+
+describe("Testing the array functions", () => {
+    //////////////////////////////////
+    // bookEndList and tripleNumbers
+
+    const NUMBERS_1 = [1, 2, 3];
+    const NUMBERS_2 = [100, 300, 200];
+    const NUMBERS_3 = [5];
+    const NUMBERS_4: number[] = [];
+    const NUMBERS_5 = [100, 199, 1, -5, 7, 3];
+    const NUMBERS_6 = [-100, -200, 100, 200];
+    const NUMBERS_7 = [199, 1, 550, 50, 200];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(NUMBERS_1).toEqual([1, 2, 3]);
+        expect(NUMBERS_2).toEqual([100, 300, 200]);
+        expect(NUMBERS_3).toEqual([5]);
+        expect(NUMBERS_4).toEqual([]);
+        expect(NUMBERS_5).toEqual([100, 199, 1, -5, 7, 3]);
+        expect(NUMBERS_6).toEqual([-100, -200, 100, 200]);
+        expect(NUMBERS_7).toEqual([199, 1, 550, 50, 200]);
+    });
+
+    test("(3 pts) Testing the bookEndList function", () => {
+        expect(bookEndList(NUMBERS_1)).toEqual([1, 3]);
+        expect(bookEndList(NUMBERS_2)).toEqual([100, 200]);
+        expect(bookEndList(NUMBERS_3)).toEqual([5, 5]);
+        expect(bookEndList(NUMBERS_4)).toEqual([]);
+        expect(bookEndList(NUMBERS_5)).toEqual([100, 3]);
+        expect(bookEndList(NUMBERS_6)).toEqual([-100, 200]);
+    });
+
+    test("(3 pts) Testing the tripleNumbers function", () => {
+        expect(tripleNumbers(NUMBERS_1)).toEqual([3, 6, 9]);
+        expect(tripleNumbers(NUMBERS_2)).toEqual([300, 900, 600]);
+        expect(tripleNumbers(NUMBERS_3)).toEqual([15]);
+        expect(tripleNumbers(NUMBERS_4)).toEqual([]);
+        expect(tripleNumbers(NUMBERS_5)).toEqual([300, 597, 3, -15, 21, 9]);
+        expect(tripleNumbers(NUMBERS_6)).toEqual([-300, -600, 300, 600]);
+    });
+
+    //////////////////////////////////
+    // stringsToIntegers
+
+    const VALUES_1 = ["1", "2", "3"];
+    const VALUES_2 = ["100", "200", "300"];
+    const VALUES_3 = ["5"];
+    const VALUES_4: string[] = [];
+    const VALUES_5 = ["100", "?", "27", "$44"];
+    const VALUES_6 = ["-1", "0", "1", "*1"];
+    const VALUES_7 = ["apple", "banana", "cactus"];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(VALUES_1).toEqual(["1", "2", "3"]);
+        expect(VALUES_2).toEqual(["100", "200", "300"]);
+        expect(VALUES_3).toEqual(["5"]);
+        expect(VALUES_4).toEqual([]);
+        expect(VALUES_5).toEqual(["100", "?", "27", "$44"]);
+        expect(VALUES_6).toEqual(["-1", "0", "1", "*1"]);
+        expect(VALUES_7).toEqual(["apple", "banana", "cactus"]);
+    });
+
+    test("(3 pts) Testing the stringsToIntegers function", () => {
+        expect(stringsToIntegers(VALUES_1)).toEqual([1, 2, 3]);
+        expect(stringsToIntegers(VALUES_2)).toEqual([100, 200, 300]);
+        expect(stringsToIntegers(VALUES_3)).toEqual([5]);
+        expect(stringsToIntegers(VALUES_4)).toEqual([]);
+        expect(stringsToIntegers(VALUES_5)).toEqual([100, 0, 27, 0]);
+        expect(stringsToIntegers(VALUES_6)).toEqual([-1, 0, 1, 0]);
+        expect(stringsToIntegers(VALUES_7)).toEqual([0, 0, 0]);
+    });
+
+    //////////////////////////////////
+    // removeDollars
+
+    const AMOUNTS_1 = ["$1", "$2", "$3"];
+    const AMOUNTS_2 = ["$100", "$200", "$300", "$400"];
+    const AMOUNTS_3 = ["$5"];
+    const AMOUNTS_4 = ["$"];
+    const AMOUNTS_5 = ["100", "200", "$300", "$400"];
+    const AMOUNTS_6: string[] = [];
+    const AMOUNTS_7 = ["100", "???", "7", "$233", "", "$"];
+    const AMOUNTS_8 = ["$one", "two", "$three"];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(AMOUNTS_1).toEqual(["$1", "$2", "$3"]);
+        expect(AMOUNTS_2).toEqual(["$100", "$200", "$300", "$400"]);
+        expect(AMOUNTS_3).toEqual(["$5"]);
+        expect(AMOUNTS_4).toEqual(["$"]);
+        expect(AMOUNTS_5).toEqual(["100", "200", "$300", "$400"]);
+        expect(AMOUNTS_6).toEqual([]);
+        expect(AMOUNTS_7).toEqual(["100", "???", "7", "$233", "", "$"]);
+        expect(AMOUNTS_8).toEqual(["$one", "two", "$three"]);
+    });
+
+    test("(3 pts) Testing the removeDollars function", () => {
+        expect(removeDollars(AMOUNTS_1)).toEqual([1, 2, 3]);
+        expect(removeDollars(AMOUNTS_2)).toEqual([100, 200, 300, 400]);
+        expect(removeDollars(AMOUNTS_3)).toEqual([5]);
+        expect(removeDollars(AMOUNTS_4)).toEqual([0]);
+        expect(removeDollars(AMOUNTS_5)).toEqual([100, 200, 300, 400]);
+        expect(removeDollars(AMOUNTS_6)).toEqual([]);
+        expect(removeDollars(AMOUNTS_7)).toEqual([100, 0, 7, 233, 0, 0]);
+        expect(removeDollars(AMOUNTS_8)).toEqual([0, 0, 0]);
+    });
+
+    //////////////////////////////////
+    // shoutIfExclaiming
+
+    const MESSAGE_1 = ["Hello", "you", "are", "great!"];
+    const MESSAGE_2 = ["oho!", "Oho!", "oHo!", "oHO!", "OHO!"];
+    const MESSAGE_3 = ["Wait?", "What?", "Lo", "How?", "High!"];
+    const MESSAGE_4 = ["??????"];
+    const MESSAGE_5: string[] = ["This one is very long!"];
+    const MESSAGE_6 = ["No", "Caps", "here.", "Right?"];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(MESSAGE_1).toEqual(["Hello", "you", "are", "great!"]);
+        expect(MESSAGE_2).toEqual(["oho!", "Oho!", "oHo!", "oHO!", "OHO!"]);
+        expect(MESSAGE_3).toEqual(["Wait?", "What?", "Lo", "How?", "High!"]);
+        expect(MESSAGE_4).toEqual(["??????"]);
+        expect(MESSAGE_5).toEqual(["This one is very long!"]);
+        expect(MESSAGE_6).toEqual(["No", "Caps", "here.", "Right?"]);
+    });
+
+    test("(3 pts) Testing the shoutIfExclaiming function", () => {
+        expect(shoutIfExclaiming(MESSAGE_1)).toEqual([
+            "Hello",
+            "you",
+            "are",
+            "GREAT!",
+        ]);
+        expect(shoutIfExclaiming(MESSAGE_2)).toEqual([
+            "OHO!",
+            "OHO!",
+            "OHO!",
+            "OHO!",
+            "OHO!",
+        ]);
+        expect(shoutIfExclaiming(MESSAGE_3)).toEqual(["Lo", "HIGH!"]);
+        expect(shoutIfExclaiming(MESSAGE_4)).toEqual([]);
+        expect(shoutIfExclaiming(MESSAGE_5)).toEqual([
+            "THIS ONE IS VERY LONG!",
+        ]);
+        expect(shoutIfExclaiming(MESSAGE_6)).toEqual(["No", "Caps", "here."]);
+    });
+
+    //////////////////////////////////
+    // countShortWords
+
+    const WORDS_1 = ["the", "cat", "in", "the", "hat"];
+    const WORDS_2 = ["one", "two", "three", "four", "five", "six", "seven"];
+    const WORDS_3 = ["alpha", "beta", "gamma"];
+    const WORDS_4 = ["Longest", "Words", "Possible"];
+    const WORDS_5: string[] = [];
+    const WORDS_6 = ["", "", "", ""];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(WORDS_1).toEqual(["the", "cat", "in", "the", "hat"]);
+        expect(WORDS_2).toEqual([
+            "one",
+            "two",
+            "three",
+            "four",
+            "five",
+            "six",
+            "seven",
+        ]);
+        expect(WORDS_3).toEqual(["alpha", "beta", "gamma"]);
+        expect(WORDS_4).toEqual(["Longest", "Words", "Possible"]);
+        expect(WORDS_5).toEqual([]);
+        expect(WORDS_6).toEqual(["", "", "", ""]);
+    });
+
+    test("(3 pts) Testing the countShortWords function", () => {
+        expect(countShortWords(WORDS_1)).toEqual(5);
+        expect(countShortWords(WORDS_2)).toEqual(3);
+        expect(countShortWords(WORDS_3)).toEqual(0);
+        expect(countShortWords(WORDS_4)).toEqual(0);
+        expect(countShortWords(WORDS_5)).toEqual(0);
+        expect(countShortWords(WORDS_6)).toEqual(4);
+    });
+
+    //////////////////////////////////
+    // allRGB
+
+    const COLORS_1 = ["red", "green", "blue"];
+    const COLORS_2 = ["red", "red", "red"];
+    const COLORS_3 = ["red", "red", "blue", "blue", "green", "red"];
+    const COLORS_4 = ["purple", "orange", "violet"];
+    const COLORS_5 = ["red", "blue", "yellow"];
+    const COLORS_6 = ["green"];
+    const COLORS_7 = ["red"];
+    const COLORS_8 = ["kabluey"];
+    const COLORS_9: string[] = [];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(COLORS_1).toEqual(["red", "green", "blue"]);
+        expect(COLORS_2).toEqual(["red", "red", "red"]);
+        expect(COLORS_3).toEqual([
+            "red",
+            "red",
+            "blue",
+            "blue",
+            "green",
+            "red",
+        ]);
+        expect(COLORS_4).toEqual(["purple", "orange", "violet"]);
+        expect(COLORS_5).toEqual(["red", "blue", "yellow"]);
+        expect(COLORS_6).toEqual(["green"]);
+        expect(COLORS_7).toEqual(["red"]);
+        expect(COLORS_8).toEqual(["kabluey"]);
+        expect(COLORS_9).toEqual([]);
+    });
+
+    test("(3 pts) Testing the allRGB function", () => {
+        expect(allRGB(COLORS_1)).toEqual(true);
+        expect(allRGB(COLORS_2)).toEqual(true);
+        expect(allRGB(COLORS_3)).toEqual(true);
+        expect(allRGB(COLORS_4)).toEqual(false);
+        expect(allRGB(COLORS_5)).toEqual(false);
+        expect(allRGB(COLORS_6)).toEqual(true);
+        expect(allRGB(COLORS_7)).toEqual(true);
+        expect(allRGB(COLORS_8)).toEqual(false);
+        expect(allRGB(COLORS_9)).toEqual(true);
+    });
+
+    //////////////////////////////////
+    // makeMath
+
+    test("(3 pts) Testing the makeMath function", () => {
+        expect(makeMath(NUMBERS_1)).toEqual("6=1+2+3");
+        expect(makeMath(NUMBERS_2)).toEqual("600=100+300+200");
+        expect(makeMath(NUMBERS_3)).toEqual("5=5");
+        expect(makeMath(NUMBERS_4)).toEqual("0=0");
+        expect(makeMath(NUMBERS_7)).toEqual("1000=199+1+550+50+200");
+    });
+
+    //////////////////////////////////
+    // injectPositive
+    test("(3 pts) Testing the injectPositive function", () => {
+        expect(injectPositive(NUMBERS_1)).toEqual([1, 2, 3, 6]);
+        expect(injectPositive(NUMBERS_2)).toEqual([100, 300, 200, 600]);
+        expect(injectPositive(NUMBERS_3)).toEqual([5, 5]);
+        expect(injectPositive(NUMBERS_4)).toEqual([0]);
+        expect(injectPositive(NUMBERS_5)).toEqual([100, 199, 1, -5, 300, 7, 3]);
+        expect(injectPositive(NUMBERS_6)).toEqual([-100, 0, -200, 100, 200]);
+        expect(injectPositive(NUMBERS_7)).toEqual([199, 1, 550, 50, 200, 1000]);
+    });
+});