- UD CISC275 with React Hooks and TypeScript
+ UD CISC275 with React Hooks and TypeScript Luke Remmler Hello
+ World
Edit src/App.tsx and save. This page will
automatically reload.
+
Luke Remmler App
+
+ Unordered List:
+
+
First thing
+
Another thing
+
A third item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Added Components */}
+
+
Counter Component
+
+
+
+
Reveal Answer Component
+
+
+
+
Change Type Component
+
+
+
+
Start Attempt Component
+
+
+
+
Two Dice Component
+
+
+
+
Cycle Holiday Component
+
);
}
diff --git a/src/arrays.ts b/src/arrays.ts
new file mode 100644
index 0000000000..f9cf3e21d0
--- /dev/null
+++ b/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),
+ ];
+ }
+}
diff --git a/src/components/ChangeType.tsx b/src/components/ChangeType.tsx
new file mode 100644
index 0000000000..34cbc395cb
--- /dev/null
+++ b/src/components/ChangeType.tsx
@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+
+export function ChangeType(): JSX.Element {
+ const [type, setType] = useState("Short Answer");
+ return (
+
+ Unordered List:
+