Added name to App

.eslintrc.json

@@ -0,0 +1,50 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["react", "@typescript-eslint", "prettier"],
+    "rules": {
+        "prettier/prettier": [
+            "error",
+            {
+                "endOfLine": "auto"
+            }
+        ],
+        "no-extra-parens": [
+            "warn",
+            "all",
+            {
+                "nestedBinaryExpressions": false,
+                "returnAssign": false,
+                "enforceForArrowConditionals": false,
+                "ignoreJSX": "all"
+            }
+        ],
+        "brace-style": ["error", "1tbs"],
+        "indent": ["error", 4],
+        "quotes": ["error", "double"],
+        "semi": ["error", "always"]
+    }
+}

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-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.tsx

@@ -1,17 +1,121 @@
 import React from "react";
 import "./App.css";
+import { Button, Col, Container, Row } from "react-bootstrap";
+//import { ChangeType } from "./components/ChangeType";
+import { RevealAnswer } from "./components/RevealAnswer";
+//import { StartAttempt } from "./components/StartAttempt";
+//import { TwoDice } from "./components/TwoDice";
+//import { CycleHoliday } from "./components/CycleHoliday";
+import { Counter } from "./components/Counter";
+import { ChangeType } from "./components/ChangeType";
+import { StartAttempt } from "./components/StartAttempt";
+import { TwoDice } from "./components/TwoDice";
+import { CycleHoliday } from "./components/CycleHoliday";
+import { DoubleHalf } from "./bad-components/DoubleHalf";
+import { CheckAnswer } from "./form-components/CheckAnswer";
+import { GiveAttempts } from "./form-components/GiveAttempts";
+import { EditMode } from "./form-components/EditMode";
+import { ChangeColor } from "./form-components/ChangeColor";
+import { MultipleChoiceQuestion } from "./form-components/MultipleChoiceQuestion";
 
 function App(): React.JSX.Element {
     return (
-        <div className="App">
-            <header className="App-header">
-                UD CISC275 with React Hooks and TypeScript
-            </header>
-            <p>
-                Edit <code>src/App.tsx</code> and save. This page will
-                automatically reload.
-            </p>
-        </div>
+        <>
+            <div className="App">
+                <header className="App-header">
+                    <div style={{ backgroundColor: "lightblue" }} />
+                    UD CISC275 with React Hooks and TypeScript
+                </header>
+                <h1>Welcome!</h1>
+                <img src="/cute_dogs.jpg" alt="Image of cute dogs" />
+                <p>
+                    Gabi Manzari - Edit <code>src/App.tsx</code> and save. This
+                    page will automatically reload.
+                </p>
+                <p>Hello World</p>
+                <div>
+                    List of Movies:
+                    <ul>
+                        <li>Zootopia</li>
+                        <li>Wicked</li>
+                        <li>The Long Walk</li>
+                    </ul>
+                    <div>
+                        <Button
+                            onClick={() => {
+                                console.log("Hello World!");
+                            }}
+                        >
+                            Log Hello World
+                        </Button>
+                    </div>
+                </div>
+                <Container>
+                    <Row>
+                        <Col>
+                            <div
+                                style={{
+                                    border: "1px solid red",
+                                    padding: "4px",
+                                    backgroundColor: "red",
+                                }}
+                            ></div>
+                            First column.
+                        </Col>
+                        <Col>
+                            <div
+                                style={{
+                                    border: "1px solid red",
+                                    padding: "4px",
+                                    backgroundColor: "red",
+                                }}
+                            ></div>
+                            Second column.
+                        </Col>
+                    </Row>
+                </Container>
+            </div>
+            <div>
+                Counter: <Counter></Counter>
+            </div>
+            <div>
+                {"What's the answer?"}
+                <RevealAnswer></RevealAnswer>
+            </div>
+            <div>
+                <ChangeType></ChangeType>
+            </div>
+            <div>
+                <StartAttempt></StartAttempt>
+            </div>
+            <div>
+                <TwoDice></TwoDice>
+            </div>
+            <div>
+                <CycleHoliday></CycleHoliday>
+            </div>
+            <div>
+                <DoubleHalf></DoubleHalf>
+            </div>
+            <div>
+                <CheckAnswer expectedAnswer={"hi"}></CheckAnswer>
+            </div>
+            <div>
+                <GiveAttempts></GiveAttempts>
+            </div>
+            <div>
+                <EditMode></EditMode>
+            </div>
+            <div>
+                <ChangeColor></ChangeColor>
+            </div>
+            <div>
+                <MultipleChoiceQuestion
+                    options={["1", "2", "3", "4"]}
+                    expectedAnswer={"3"}
+                ></MultipleChoiceQuestion>
+            </div>
+        </>
     );
 }