From 6d5cc2a203ea32c25659c92c4f26478d71e60d70 Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Wed, 26 Nov 2025 10:19:00 +0000
Subject: [PATCH 01/14] Add tsconfig.json to enable compilation

---
 package-lock.json      | 362 +++++------------------------------------
 package.json           |  12 +-
 src/react-app-env.d.ts |   1 +
 tsconfig.json          |  26 +++
 4 files changed, 76 insertions(+), 325 deletions(-)
 create mode 100644 src/react-app-env.d.ts
 create mode 100644 tsconfig.json

diff --git a/package-lock.json b/package-lock.json
index d2cb6d2..57793d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,27 +9,24 @@
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
-        "@types/jest": "^30.0.0",
-        "@types/node": "^24.10.1",
+        "@types/jest": "^27.5.2",
+        "@types/node": "^16.18.126",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-scripts": "5.0.1",
-        "typescript": "^5.9.3",
+        "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
-      },
-      "devDependencies": {
-        "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^16.3.0"
       }
     },
     "node_modules/@adobe/css-tools": {
       "version": "4.4.4",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
       "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@alloc/quick-lru": {
@@ -2587,15 +2584,6 @@
         }
       }
     },
-    "node_modules/@jest/diff-sequences": {
-      "version": "30.0.1",
-      "resolved": "https://registry.npmjs.org/@jest/diff-sequences/-/diff-sequences-30.0.1.tgz",
-      "integrity": "sha512-n5H8QLDJ47QqbCNn5SuFjCRDrOLEZ0h8vAHCK5RL9Ls7Xa8AQLa/YxAc9UjFqoEDM48muwtBGjtMY5cr0PLDCw==",
-      "license": "MIT",
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
     "node_modules/@jest/environment": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-27.5.1.tgz",
@@ -2611,18 +2599,6 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
-    "node_modules/@jest/expect-utils": {
-      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-30.2.0.tgz",
-      "integrity": "sha512-1JnRfhqpD8HGpOmQp180Fo9Zt69zNtC+9lR+kT7NVL05tNXIi+QC8Csz7lfidMoVLPD3FnOtcmp0CEFnxExGEA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/get-type": "30.1.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
     "node_modules/@jest/fake-timers": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
@@ -2640,15 +2616,6 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
-    "node_modules/@jest/get-type": {
-      "version": "30.1.0",
-      "resolved": "https://registry.npmjs.org/@jest/get-type/-/get-type-30.1.0.tgz",
-      "integrity": "sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA==",
-      "license": "MIT",
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
     "node_modules/@jest/globals": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-27.5.1.tgz",
@@ -2663,28 +2630,6 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
-    "node_modules/@jest/pattern": {
-      "version": "30.0.1",
-      "resolved": "https://registry.npmjs.org/@jest/pattern/-/pattern-30.0.1.tgz",
-      "integrity": "sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "jest-regex-util": "30.0.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/pattern/node_modules/jest-regex-util": {
-      "version": "30.0.1",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-30.0.1.tgz",
-      "integrity": "sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==",
-      "license": "MIT",
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
     "node_modules/@jest/reporters": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-27.5.1.tgz",
@@ -3403,20 +3348,10 @@
         "node": ">=18"
       }
     },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "6.9.1",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
       "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@adobe/css-tools": "^4.4.0",
@@ -3436,14 +3371,12 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
       "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@testing-library/react": {
       "version": "16.3.0",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz",
       "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5"
@@ -3703,217 +3636,15 @@
       }
     },
     "node_modules/@types/jest": {
-      "version": "30.0.0",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-30.0.0.tgz",
-      "integrity": "sha512-XTYugzhuwqWjws0CVz8QpM36+T+Dz5mTEBKhNs/esGLnCIlGdRy+Dq78NRjd7ls7r8BC8ZRMOrKlkO1hU0JOwA==",
+      "version": "27.5.2",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.2.tgz",
+      "integrity": "sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==",
       "license": "MIT",
       "dependencies": {
-        "expect": "^30.0.0",
-        "pretty-format": "^30.0.0"
+        "jest-matcher-utils": "^27.0.0",
+        "pretty-format": "^27.0.0"
       }
     },
-    "node_modules/@types/jest/node_modules/@jest/schemas": {
-      "version": "30.0.5",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-30.0.5.tgz",
-      "integrity": "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==",
-      "license": "MIT",
-      "dependencies": {
-        "@sinclair/typebox": "^0.34.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/@jest/types": {
-      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-30.2.0.tgz",
-      "integrity": "sha512-H9xg1/sfVvyfU7o3zMfBEjQ1gcsdeTMgqHoYdN79tuLqfTtuu7WckRA1R5whDwOzxaZAeMKTYWqP+WCAi0CHsg==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/pattern": "30.0.1",
-        "@jest/schemas": "30.0.5",
-        "@types/istanbul-lib-coverage": "^2.0.6",
-        "@types/istanbul-reports": "^3.0.4",
-        "@types/node": "*",
-        "@types/yargs": "^17.0.33",
-        "chalk": "^4.1.2"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/@sinclair/typebox": {
-      "version": "0.34.41",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.41.tgz",
-      "integrity": "sha512-6gS8pZzSXdyRHTIqoqSVknxolr1kzfy4/CeDnrzsVz8TTIWUbOBr6gnzOmTYJ3eXQNh4IYHIGi5aIL7sOZ2G/g==",
-      "license": "MIT"
-    },
-    "node_modules/@types/jest/node_modules/@types/yargs": {
-      "version": "17.0.35",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz",
-      "integrity": "sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "node_modules/@types/jest/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@types/jest/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/sibiraj-s"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@types/jest/node_modules/expect": {
-      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-30.2.0.tgz",
-      "integrity": "sha512-u/feCi0GPsI+988gU2FLcsHyAHTU0MX1Wg68NhAnN7z/+C5wqG+CY8J53N9ioe8RXgaoz0nBR/TYMf3AycUuPw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/expect-utils": "30.2.0",
-        "@jest/get-type": "30.1.0",
-        "jest-matcher-utils": "30.2.0",
-        "jest-message-util": "30.2.0",
-        "jest-mock": "30.2.0",
-        "jest-util": "30.2.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/jest-diff": {
-      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-30.2.0.tgz",
-      "integrity": "sha512-dQHFo3Pt4/NLlG5z4PxZ/3yZTZ1C7s9hveiOj+GCN+uT109NC2QgsoVZsVOAvbJ3RgKkvyLGXZV9+piDpWbm6A==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/diff-sequences": "30.0.1",
-        "@jest/get-type": "30.1.0",
-        "chalk": "^4.1.2",
-        "pretty-format": "30.2.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/jest-matcher-utils": {
-      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-30.2.0.tgz",
-      "integrity": "sha512-dQ94Nq4dbzmUWkQ0ANAWS9tBRfqCrn0bV9AMYdOi/MHW726xn7eQmMeRTpX2ViC00bpNaWXq+7o4lIQ3AX13Hg==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/get-type": "30.1.0",
-        "chalk": "^4.1.2",
-        "jest-diff": "30.2.0",
-        "pretty-format": "30.2.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/jest-message-util": {
-      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-30.2.0.tgz",
-      "integrity": "sha512-y4DKFLZ2y6DxTWD4cDe07RglV88ZiNEdlRfGtqahfbIjfsw1nMCPx49Uev4IA/hWn3sDKyAnSPwoYSsAEdcimw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@jest/types": "30.2.0",
-        "@types/stack-utils": "^2.0.3",
-        "chalk": "^4.1.2",
-        "graceful-fs": "^4.2.11",
-        "micromatch": "^4.0.8",
-        "pretty-format": "30.2.0",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.6"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/jest-mock": {
-      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-30.2.0.tgz",
-      "integrity": "sha512-JNNNl2rj4b5ICpmAcq+WbLH83XswjPbjH4T7yvGzfAGCPh1rw+xVNbtk+FnRslvt9lkCcdn9i1oAoKUuFsOxRw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "30.2.0",
-        "@types/node": "*",
-        "jest-util": "30.2.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/jest-util": {
-      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-30.2.0.tgz",
-      "integrity": "sha512-QKNsM0o3Xe6ISQU869e+DhG+4CK/48aHYdJZGlFQVTjnbvgpcKyxpzk29fGiO7i/J8VENZ+d2iGnSsvmuHywlA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "30.2.0",
-        "@types/node": "*",
-        "chalk": "^4.1.2",
-        "ci-info": "^4.2.0",
-        "graceful-fs": "^4.2.11",
-        "picomatch": "^4.0.2"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@types/jest/node_modules/pretty-format": {
-      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.2.0.tgz",
-      "integrity": "sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "30.0.5",
-        "ansi-styles": "^5.2.0",
-        "react-is": "^18.3.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT"
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3933,13 +3664,10 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "24.10.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
-      "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~7.16.0"
-      }
+      "version": "16.18.126",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.126.tgz",
+      "integrity": "sha512-OTcgaiwfGFBKacvfwuHzzn1KLxH/er8mluiy8/uM3sGXHaRe73RrSIj01jow9t4kJEW633Ov+cOexXeiApTyAw==",
+      "license": "MIT"
     },
     "node_modules/@types/node-forge": {
       "version": "1.3.14",
@@ -4803,12 +4531,12 @@
       }
     },
     "node_modules/aria-query": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
-      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 0.4"
+      "dependencies": {
+        "dequal": "^2.0.3"
       }
     },
     "node_modules/array-buffer-byte-length": {
@@ -5373,9 +5101,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.30",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.30.tgz",
-      "integrity": "sha512-aTUKW4ptQhS64+v2d6IkPzymEzzhw+G0bA1g3uBRV3+ntkH+svttKseW5IOR4Ed6NUVKqnY7qT3dKvzQ7io4AA==",
+      "version": "2.8.31",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.31.tgz",
+      "integrity": "sha512-a28v2eWrrRWPpJSzxc+mKwm0ZtVx/G8SepdQZDArnXYU/XS+IF6mp8aB/4E+hH1tyGCoDo3KlUCdlSxGDsRkAw==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
@@ -5695,9 +5423,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001756",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001756.tgz",
-      "integrity": "sha512-4HnCNKbMLkLdhJz3TToeVWHSnfJvPaq6vu/eRP0Ahub/07n484XHhBF5AJoSGHdVrS8tKFauUQz8Bp9P7LVx7A==",
+      "version": "1.0.30001757",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz",
+      "integrity": "sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -6412,7 +6140,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cssdb": {
@@ -7059,9 +6786,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.259",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.259.tgz",
-      "integrity": "sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==",
+      "version": "1.5.260",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.260.tgz",
+      "integrity": "sha512-ov8rBoOBhVawpzdre+Cmz4FB+y66Eqrk6Gwqd8NGxuhv99GQ8XqMAr351KEkOt7gukXWDg6gJWEMKgL2RLMPtA==",
       "license": "ISC"
     },
     "node_modules/emittery": {
@@ -7644,6 +7371,15 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
       }
     },
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.37.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
@@ -9410,7 +9146,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -11586,7 +11321,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -11737,9 +11471,9 @@
       }
     },
     "node_modules/node-forge": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
-      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.2.tgz",
+      "integrity": "sha512-6xKiQ+cph9KImrRh0VsjH2d8/GXA4FIMlgU4B757iI1ApvcyA9VlouP0yZJha01V+huImO+kKMU7ih+2+E14fw==",
       "license": "(BSD-3-Clause OR GPL-2.0)",
       "engines": {
         "node": ">= 6.13.0"
@@ -14147,7 +13881,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
       "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "indent-string": "^4.0.0",
@@ -15584,7 +15317,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
       "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "min-indent": "^1.0.0"
@@ -16457,9 +16189,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -16467,7 +16199,7 @@
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
@@ -16494,12 +16226,6 @@
       "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==",
       "license": "MIT"
     },
-    "node_modules/undici-types": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
-      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
-      "license": "MIT"
-    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
diff --git a/package.json b/package.json
index 3e1a2bd..298fe08 100644
--- a/package.json
+++ b/package.json
@@ -4,15 +4,17 @@
   "private": true,
   "dependencies": {
     "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^30.0.0",
-    "@types/node": "^24.10.1",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-scripts": "5.0.1",
-    "typescript": "^5.9.3",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -38,9 +40,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0"
   }
 }
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a273b0c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

From 05fb47fe4cea95e25dabd08504e41d1c25014546 Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Wed, 26 Nov 2025 10:31:22 +0000
Subject: [PATCH 02/14] Add form field with placeholder text 'Dawn of the
 Squid'

---
 src/components/Form/Form.test.tsx   | 9 +++++++++
 src/components/Form/Form.tsx        | 8 ++++++++
 src/components/Title/Title.test.tsx | 2 +-
 src/components/Title/Title.tsx      | 4 ----
 4 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Form/Form.test.tsx
 create mode 100644 src/components/Form/Form.tsx

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
new file mode 100644
index 0000000..75bd556
--- /dev/null
+++ b/src/components/Form/Form.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Form from "./Form";
+import "@testing-library/jest-dom";
+
+test("Displays placeholder text 'Dawn of the Squid'", async () => {
+  render(<Form />);
+  expect(screen.getByPlaceholderText('Dawn of the Squid')).toBeInTheDocument();
+});
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
new file mode 100644
index 0000000..2fb195b
--- /dev/null
+++ b/src/components/Form/Form.tsx
@@ -0,0 +1,8 @@
+export default function Title() {
+
+  return (
+    <>
+      <input type="text" placeholder="Dawn of the Squid" />
+    </>
+  );
+}
diff --git a/src/components/Title/Title.test.tsx b/src/components/Title/Title.test.tsx
index 2354ad9..d3e5c7b 100644
--- a/src/components/Title/Title.test.tsx
+++ b/src/components/Title/Title.test.tsx
@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import Title from "./Title";
 import "@testing-library/jest-dom";
 
-test("increments the count on click", async () => {
+test("Displays the title 'Harmonise'", async () => {
   render(<Title />);
   expect(screen.getByText('Harmonise')).toBeInTheDocument();
 });
diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
index 5894f2d..015a3f2 100644
--- a/src/components/Title/Title.tsx
+++ b/src/components/Title/Title.tsx
@@ -8,7 +8,3 @@ export default function Title() {
     </div>
   );
 }
-
-
-
-

From fc31f7130bdc5e8cb8eebcb1e9315ea71effd51f Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Wed, 26 Nov 2025 10:35:38 +0000
Subject: [PATCH 03/14] Add basic form to App display

---
 src/App.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index bf04900..83f36ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,13 @@
 import './App.css';
 import Title from './components/Title/Title';
+import Form from './components/Form/Form';
+
 
 function App() {
   return (
     <div className="App">
       <Title />
+      <Form />
     </div>
   );
 }

From 0a6a86fda6e67db07b437b1a1cb2fd83de07d599 Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Wed, 26 Nov 2025 13:02:49 +0000
Subject: [PATCH 04/14] Add label to form field

---
 src/components/Form/Form.test.tsx | 5 +++++
 src/components/Form/Form.tsx      | 9 ++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index 75bd556..706a4f5 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -7,3 +7,8 @@ test("Displays placeholder text 'Dawn of the Squid'", async () => {
   render(<Form />);
   expect(screen.getByPlaceholderText('Dawn of the Squid')).toBeInTheDocument();
 });
+
+test("Displays 'Artist Name' form field label", async() => {
+  render(<Form />);
+  expect(screen.getByLabelText('Artist Name')).toBeInTheDocument();
+});
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 2fb195b..20b1ed3 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -2,7 +2,14 @@ export default function Title() {
 
   return (
     <>
-      <input type="text" placeholder="Dawn of the Squid" />
+      <label htmlFor="artist-name">
+        Artist Name
+      </label>      
+      <input 
+        type="text" 
+        placeholder="Dawn of the Squid" 
+        id="artist-name" 
+      />
     </>
   );
 }

From b78a7388b4b3c3c927df549e212aab2f5df7baa4 Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Thu, 27 Nov 2025 09:15:07 +0000
Subject: [PATCH 05/14] Add test for accepting user input

---
 package-lock.json                 | 41 +++++++++++--------------------
 src/components/Form/Form.test.tsx | 29 ++++++++++++++++++++++
 src/components/Form/Form.tsx      | 22 ++++++++++++++++-
 3 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 57793d9..17bfe87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,7 +69,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -719,7 +718,6 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.27.1.tgz",
       "integrity": "sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.27.1"
       },
@@ -1603,7 +1601,6 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.27.1.tgz",
       "integrity": "sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.27.1",
         "@babel/helper-module-imports": "^7.27.1",
@@ -3333,7 +3330,6 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3713,7 +3709,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3723,7 +3718,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3838,7 +3832,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
       "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.4.0",
         "@typescript-eslint/scope-manager": "5.62.0",
@@ -3892,7 +3885,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
       "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.62.0",
         "@typescript-eslint/types": "5.62.0",
@@ -4262,7 +4254,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4361,7 +4352,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -5272,7 +5262,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -7112,7 +7101,6 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -9855,7 +9843,6 @@
       "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
       "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "^27.5.1",
         "import-local": "^3.0.2",
@@ -10753,7 +10740,6 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -12100,7 +12086,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -13235,7 +13220,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -13595,7 +13579,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13727,7 +13710,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -13752,7 +13734,6 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14199,7 +14180,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -14442,7 +14422,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -15698,6 +15677,20 @@
         }
       }
     },
+    "node_modules/tailwindcss/node_modules/yaml": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+      "license": "ISC",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
@@ -15915,7 +15908,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -16084,7 +16076,6 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "license": "(MIT OR CC0-1.0)",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -16193,7 +16184,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -16508,7 +16498,6 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.103.0.tgz",
       "integrity": "sha512-HU1JOuV1OavsZ+mfigY0j8d1TgQgbZ6M+J75zDkpEAwYeXjWSqrGJtgnPblJjd/mAyTNQ7ygw0MiKOn6etz8yw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",
@@ -16580,7 +16569,6 @@
       "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
       "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -16993,7 +16981,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index 75bd556..e716034 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -7,3 +7,32 @@ test("Displays placeholder text 'Dawn of the Squid'", async () => {
   render(<Form />);
   expect(screen.getByPlaceholderText('Dawn of the Squid')).toBeInTheDocument();
 });
+
+test("Displays 'Artist Name' form field label", async() => {
+  render(<Form />);
+  expect(screen.getByLabelText('Artist Name')).toBeInTheDocument();
+});
+
+test("Accepts user input", async () => {
+  render(<Form />);
+
+  const artistNameField = screen.getByLabelText("Artist Name");
+
+  await userEvent.type(artistNameField, "Music Research Unit");
+
+  expect(artistNameField).toHaveValue("Music Research Unit");
+});
+
+// test("Submits user input", async () => {
+
+//   render(<Form />);
+//   const artistNameField = screen.getByLabelText("Artist Name");
+//   const button = screen.getByRole("button", { name: /submit/i });
+
+//   await userEvent.type(artistNameField, "Music Research Unit");
+//   await userEvent.click(button);
+
+//   expect(handleSubmit).toHaveBeenCalledWith({
+//     artistName: "Music Research Unit"
+//   });
+// });
\ No newline at end of file
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 2fb195b..9959f57 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -1,8 +1,28 @@
 export default function Title() {
 
+  // const handleSubmit = (e: any) => {
+  //   e.preventDefault();
+  // };
+
   return (
     <>
-      <input type="text" placeholder="Dawn of the Squid" />
+      <label htmlFor="artist-name">
+        Artist Name
+      </label>
+
+      <form>
+
+        <input
+          // name="artistName"
+          type="text" 
+          placeholder="Dawn of the Squid" 
+          id="artist-name" 
+        />
+
+        {/* <button type="submit">Submit</button> */}
+
+      </form>      
+      
     </>
   );
 }

From 384d49d462c242549374984297d318e19c119045 Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Thu, 27 Nov 2025 11:30:23 +0000
Subject: [PATCH 06/14] Add submit button

---
 src/components/Form/Form.test.tsx |  8 ++++++++
 src/components/Form/Form.tsx      | 20 ++++++++++++--------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index f5ea9d5..902c6fd 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -23,6 +23,14 @@ test("Accepts user input", async () => {
   expect(artistNameField).toHaveValue("Music Research Unit");
 });
 
+test ('Has a Submit button', async() => {
+  render (<Form />);
+
+  const button = screen.getByRole('button', { name: 'Submit' });
+
+  expect(button).toBeInTheDocument();
+})
+
 // test("Submits user input", async () => {
 
 //   render(<Form />);
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 20b1ed3..5b64332 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -2,14 +2,18 @@ export default function Title() {
 
   return (
     <>
-      <label htmlFor="artist-name">
-        Artist Name
-      </label>      
-      <input 
-        type="text" 
-        placeholder="Dawn of the Squid" 
-        id="artist-name" 
-      />
+      <form>
+        <label htmlFor="artist-name">
+          Artist Name
+        </label>      
+        <input 
+          type="text" 
+          placeholder="Dawn of the Squid" 
+          id="artist-name" 
+        />
+        <button type="button">Submit</button>
+      </form>
+      
     </>
   );
 }

From 1993d1da7c70fe7b86cf70b5619df08b965b5223 Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Thu, 27 Nov 2025 12:26:00 +0000
Subject: [PATCH 07/14] Add empty handleSubmit execution to submit button

---
 src/components/Form/Form.test.tsx | 24 ++++++++++++++----------
 src/components/Form/Form.tsx      |  9 +++++++--
 src/functions/handleSubmit.tsx    |  2 ++
 3 files changed, 23 insertions(+), 12 deletions(-)
 create mode 100644 src/functions/handleSubmit.tsx

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index 902c6fd..2fe5200 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -3,6 +3,12 @@ import userEvent from "@testing-library/user-event";
 import Form from "./Form";
 import "@testing-library/jest-dom";
 
+jest.mock("../../functions/handleSubmit", () => ({
+  handleSubmit: jest.fn()
+}));
+
+import { handleSubmit } from "../../functions/handleSubmit";
+
 test("Displays placeholder text 'Dawn of the Squid'", async () => {
   render(<Form />);
   expect(screen.getByPlaceholderText('Dawn of the Squid')).toBeInTheDocument();
@@ -31,16 +37,14 @@ test ('Has a Submit button', async() => {
   expect(button).toBeInTheDocument();
 })
 
-// test("Submits user input", async () => {
+test("Submits user input", async () => {
 
-//   render(<Form />);
-//   const artistNameField = screen.getByLabelText("Artist Name");
-//   const button = screen.getByRole("button", { name: /submit/i });
+  render(<Form />);
+  const artistNameField = screen.getByLabelText("Artist Name");
+  const button = screen.getByRole("button", { name: /submit/i });
 
-//   await userEvent.type(artistNameField, "Music Research Unit");
-//   await userEvent.click(button);
+  await userEvent.type(artistNameField, "Music Research Unit");
+  await userEvent.click(button);
 
-//   expect(handleSubmit).toHaveBeenCalledWith({
-//     artistName: "Music Research Unit"
-//   });
-// });
+  expect(handleSubmit).toHaveBeenCalled();
+});
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 5b64332..62dae88 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -1,4 +1,6 @@
-export default function Title() {
+import { handleSubmit } from "../../functions/handleSubmit"
+
+export default function Form() {
 
   return (
     <>
@@ -11,7 +13,10 @@ export default function Title() {
           placeholder="Dawn of the Squid" 
           id="artist-name" 
         />
-        <button type="button">Submit</button>
+        <button 
+          type="button"
+          onClick={handleSubmit}
+        >Submit</button>
       </form>
       
     </>
diff --git a/src/functions/handleSubmit.tsx b/src/functions/handleSubmit.tsx
new file mode 100644
index 0000000..df72eee
--- /dev/null
+++ b/src/functions/handleSubmit.tsx
@@ -0,0 +1,2 @@
+export function handleSubmit() {
+}
\ No newline at end of file

From 0aa51896c272cbffb78b3a7c753bb3430a02d21b Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Thu, 27 Nov 2025 17:23:24 +0000
Subject: [PATCH 08/14] Simplify User Input test

---
 src/components/Form/Form.test.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index 2fe5200..6bc59ef 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -2,12 +2,12 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import Form from "./Form";
 import "@testing-library/jest-dom";
+import { handleSubmit } from "../../functions/handleSubmit";
 
 jest.mock("../../functions/handleSubmit", () => ({
   handleSubmit: jest.fn()
 }));
 
-import { handleSubmit } from "../../functions/handleSubmit";
 
 test("Displays placeholder text 'Dawn of the Squid'", async () => {
   render(<Form />);
@@ -43,7 +43,6 @@ test("Submits user input", async () => {
   const artistNameField = screen.getByLabelText("Artist Name");
   const button = screen.getByRole("button", { name: /submit/i });
 
-  await userEvent.type(artistNameField, "Music Research Unit");
   await userEvent.click(button);
 
   expect(handleSubmit).toHaveBeenCalled();

From 1eac5f8d2b2b880c9dbbd43bafb158429918fc64 Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Thu, 27 Nov 2025 17:25:48 +0000
Subject: [PATCH 09/14] Remove extraneous asyncs

---
 src/components/Form/Form.test.tsx   | 8 ++++----
 src/components/Title/Title.test.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index 6bc59ef..6638e4c 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -9,12 +9,12 @@ jest.mock("../../functions/handleSubmit", () => ({
 }));
 
 
-test("Displays placeholder text 'Dawn of the Squid'", async () => {
+test("Displays placeholder text 'Dawn of the Squid'", () => {
   render(<Form />);
   expect(screen.getByPlaceholderText('Dawn of the Squid')).toBeInTheDocument();
 });
 
-test("Displays 'Artist Name' form field label", async() => {
+test("Displays 'Artist Name' form field label", () => {
   render(<Form />);
   expect(screen.getByLabelText('Artist Name')).toBeInTheDocument();
 });
@@ -29,7 +29,7 @@ test("Accepts user input", async () => {
   expect(artistNameField).toHaveValue("Music Research Unit");
 });
 
-test ('Has a Submit button', async() => {
+test ('Has a Submit button', () => {
   render (<Form />);
 
   const button = screen.getByRole('button', { name: 'Submit' });
@@ -37,7 +37,7 @@ test ('Has a Submit button', async() => {
   expect(button).toBeInTheDocument();
 })
 
-test("Submits user input", async () => {
+test("Runs handleSubmit when Submit button pressed", async () => {
 
   render(<Form />);
   const artistNameField = screen.getByLabelText("Artist Name");
diff --git a/src/components/Title/Title.test.tsx b/src/components/Title/Title.test.tsx
index d3e5c7b..737e08b 100644
--- a/src/components/Title/Title.test.tsx
+++ b/src/components/Title/Title.test.tsx
@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import Title from "./Title";
 import "@testing-library/jest-dom";
 
-test("Displays the title 'Harmonise'", async () => {
+test("Displays the title 'Harmonise'", () => {
   render(<Title />);
   expect(screen.getByText('Harmonise')).toBeInTheDocument();
 });

From ffa310e7f04d93a62bb709bbc16c23a5c1138a90 Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Thu, 27 Nov 2025 23:21:07 +0000
Subject: [PATCH 10/14] Call handleSubmit with user data

---
 src/components/Form/Form.test.tsx | 13 ++++++++++++-
 src/components/Form/Form.tsx      | 10 ++++++++--
 src/functions/handleSubmit.tsx    |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index 6638e4c..1263767 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -40,10 +40,21 @@ test ('Has a Submit button', () => {
 test("Runs handleSubmit when Submit button pressed", async () => {
 
   render(<Form />);
-  const artistNameField = screen.getByLabelText("Artist Name");
   const button = screen.getByRole("button", { name: /submit/i });
 
   await userEvent.click(button);
 
   expect(handleSubmit).toHaveBeenCalled();
 });
+
+test("Calls handleSubmit with input data", async () => {
+
+  render(<Form />);
+  const artistNameField = screen.getByLabelText("Artist Name");
+  const button = screen.getByRole("button", { name: /submit/i });
+
+  await userEvent.type(artistNameField, 'Music Research Unit')
+  await userEvent.click(button);
+
+  expect(handleSubmit).toHaveBeenCalledWith({ artistName: 'Music Research Unit'});
+});
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 62dae88..44cc79f 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -1,7 +1,10 @@
+import { useState } from "react";
 import { handleSubmit } from "../../functions/handleSubmit"
 
 export default function Form() {
 
+  const [artistName, setArtistName] = useState("");
+
   return (
     <>
       <form>
@@ -12,11 +15,14 @@ export default function Form() {
           type="text" 
           placeholder="Dawn of the Squid" 
           id="artist-name" 
+          onChange={e => setArtistName(e.target.value)}
         />
         <button 
           type="button"
-          onClick={handleSubmit}
-        >Submit</button>
+          onClick={() => handleSubmit({artistName})}
+        >
+          Submit
+        </button>
       </form>
       
     </>
diff --git a/src/functions/handleSubmit.tsx b/src/functions/handleSubmit.tsx
index df72eee..4b28566 100644
--- a/src/functions/handleSubmit.tsx
+++ b/src/functions/handleSubmit.tsx
@@ -1,2 +1,2 @@
-export function handleSubmit() {
+export function handleSubmit(formData: {}) {
 }
\ No newline at end of file

From 12513bdba767eb4c3ae9ee2b7a677e55cc2b9a4b Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Fri, 28 Nov 2025 12:14:36 +0000
Subject: [PATCH 11/14] Remove superceded handleSubmit test

---
 src/components/Form/Form.test.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index 1263767..d651f5d 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -8,7 +8,6 @@ jest.mock("../../functions/handleSubmit", () => ({
   handleSubmit: jest.fn()
 }));
 
-
 test("Displays placeholder text 'Dawn of the Squid'", () => {
   render(<Form />);
   expect(screen.getByPlaceholderText('Dawn of the Squid')).toBeInTheDocument();
@@ -37,16 +36,6 @@ test ('Has a Submit button', () => {
   expect(button).toBeInTheDocument();
 })
 
-test("Runs handleSubmit when Submit button pressed", async () => {
-
-  render(<Form />);
-  const button = screen.getByRole("button", { name: /submit/i });
-
-  await userEvent.click(button);
-
-  expect(handleSubmit).toHaveBeenCalled();
-});
-
 test("Calls handleSubmit with input data", async () => {
 
   render(<Form />);

From 6d085fd36da57b42645c4d5d446da1126f890bba Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Fri, 28 Nov 2025 12:45:23 +0000
Subject: [PATCH 12/14] Tidy up spacing, remove extraneous test, abstract form
 and test values

---
 src/components/Form/Form.test.tsx   | 30 ++++++++++--------
 src/components/Form/Form.tsx        | 49 +++++++++++++++++------------
 src/components/Title/Title.test.tsx |  7 +++--
 src/components/Title/Title.tsx      | 12 ++++---
 src/functions/handleSubmit.tsx      |  1 +
 5 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index d651f5d..af84f27 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -5,36 +5,39 @@ import "@testing-library/jest-dom";
 import { handleSubmit } from "../../functions/handleSubmit";
 
 jest.mock("../../functions/handleSubmit", () => ({
+
   handleSubmit: jest.fn()
+
 }));
 
-test("Displays placeholder text 'Dawn of the Squid'", () => {
+test("Displays field with placeholder text 'Dawn of the Squid'", () => {
+
   render(<Form />);
-  expect(screen.getByPlaceholderText('Dawn of the Squid')).toBeInTheDocument();
+  const text = screen.getByPlaceholderText('Dawn of the Squid')
+  
+  expect(text).toBeInTheDocument();
+
 });
 
-test("Displays 'Artist Name' form field label", () => {
+test("Displays 'Artist Name' field label", () => {
+
   render(<Form />);
-  expect(screen.getByLabelText('Artist Name')).toBeInTheDocument();
+  const text = screen.getByLabelText('Artist Name')
+
+  expect(text).toBeInTheDocument();
+
 });
 
 test("Accepts user input", async () => {
-  render(<Form />);
 
+  render(<Form />);
   const artistNameField = screen.getByLabelText("Artist Name");
 
   await userEvent.type(artistNameField, "Music Research Unit");
 
   expect(artistNameField).toHaveValue("Music Research Unit");
-});
 
-test ('Has a Submit button', () => {
-  render (<Form />);
-
-  const button = screen.getByRole('button', { name: 'Submit' });
-
-  expect(button).toBeInTheDocument();
-})
+});
 
 test("Calls handleSubmit with input data", async () => {
 
@@ -46,4 +49,5 @@ test("Calls handleSubmit with input data", async () => {
   await userEvent.click(button);
 
   expect(handleSubmit).toHaveBeenCalledWith({ artistName: 'Music Research Unit'});
+  
 });
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 44cc79f..fa4ce6d 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -4,27 +4,36 @@ import { handleSubmit } from "../../functions/handleSubmit"
 export default function Form() {
 
   const [artistName, setArtistName] = useState("");
+  
+  const metadata = {
+    inputId     : 'artist-name',
+    fieldLabel  : 'Artist Name',
+    type        : 'text',
+    placeholder : 'Dawn of the Squid',
+    buttonText  : 'Submit'
+  }
 
   return (
-    <>
-      <form>
-        <label htmlFor="artist-name">
-          Artist Name
-        </label>      
-        <input 
-          type="text" 
-          placeholder="Dawn of the Squid" 
-          id="artist-name" 
-          onChange={e => setArtistName(e.target.value)}
-        />
-        <button 
-          type="button"
-          onClick={() => handleSubmit({artistName})}
-        >
-          Submit
-        </button>
-      </form>
-      
-    </>
+    <form>
+
+      <label htmlFor={metadata.inputId}>
+        {metadata.fieldLabel}
+      </label>
+
+      <input 
+        type        ={metadata.type}
+        placeholder ={metadata.placeholder} 
+        id          ={metadata.inputId} 
+        onChange    ={e => setArtistName(e.target.value)}
+      />
+
+      <button 
+        type        ="button"
+        onClick     ={() => handleSubmit({artistName})}
+      >
+        {metadata.buttonText}
+      </button>
+
+    </form>
   );
 }
diff --git a/src/components/Title/Title.test.tsx b/src/components/Title/Title.test.tsx
index 737e08b..448b8b0 100644
--- a/src/components/Title/Title.test.tsx
+++ b/src/components/Title/Title.test.tsx
@@ -1,9 +1,12 @@
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 import Title from "./Title";
 import "@testing-library/jest-dom";
 
 test("Displays the title 'Harmonise'", () => {
+
   render(<Title />);
-  expect(screen.getByText('Harmonise')).toBeInTheDocument();
+  const text = screen.getByText('Harmonise')
+  
+  expect(text).toBeInTheDocument();
+
 });
diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
index 015a3f2..53a545c 100644
--- a/src/components/Title/Title.tsx
+++ b/src/components/Title/Title.tsx
@@ -1,10 +1,12 @@
-import { useState } from "react";
-
 export default function Title() {
 
+  const title = 'Harmonise'
+
   return (
-    <div>
-      Harmonise
-    </div>
+
+    <>
+      {title}
+    </>
+
   );
 }
diff --git a/src/functions/handleSubmit.tsx b/src/functions/handleSubmit.tsx
index 4b28566..18aa39a 100644
--- a/src/functions/handleSubmit.tsx
+++ b/src/functions/handleSubmit.tsx
@@ -1,2 +1,3 @@
 export function handleSubmit(formData: {}) {
+    // Data will be sent to the server here, thence to the database
 }
\ No newline at end of file

From c0b455c85433b0a6a409e79c214ba1ac83e5ed41 Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Fri, 28 Nov 2025 13:58:50 +0000
Subject: [PATCH 13/14] Abstract tests to testFunctions files

---
 src/App.test.tsx                             | 14 +++++
 src/components/Form/Form.test.tsx            | 63 ++++----------------
 src/components/Form/Form.testFunctions.tsx   | 52 ++++++++++++++++
 src/components/Title/Title.test.tsx          | 12 +---
 src/components/Title/Title.testFunctions.tsx | 11 ++++
 5 files changed, 90 insertions(+), 62 deletions(-)
 create mode 100644 src/App.test.tsx
 create mode 100644 src/components/Form/Form.testFunctions.tsx
 create mode 100644 src/components/Title/Title.testFunctions.tsx

diff --git a/src/App.test.tsx b/src/App.test.tsx
new file mode 100644
index 0000000..31661df
--- /dev/null
+++ b/src/App.test.tsx
@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom";
+import { title_test_title } from "./components/Title/Title.testFunctions";
+import { 
+    form_test_placeholder, 
+    form_test_artist_label, 
+    form_test_input, 
+    form_test_submit 
+} from "./components/Form/Form.testFunctions";
+
+test("Displays the title 'Harmonise'", title_test_title);
+test("Displays field with placeholder text 'Dawn of the Squid'", form_test_placeholder);
+test("Displays 'Artist Name' field label", form_test_artist_label);
+test("Accepts user input", form_test_input);
+test("Calls handleSubmit with input data", form_test_submit);
\ No newline at end of file
diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index af84f27..62fa07e 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -1,53 +1,12 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import Form from "./Form";
 import "@testing-library/jest-dom";
-import { handleSubmit } from "../../functions/handleSubmit";
-
-jest.mock("../../functions/handleSubmit", () => ({
-
-  handleSubmit: jest.fn()
-
-}));
-
-test("Displays field with placeholder text 'Dawn of the Squid'", () => {
-
-  render(<Form />);
-  const text = screen.getByPlaceholderText('Dawn of the Squid')
-  
-  expect(text).toBeInTheDocument();
-
-});
-
-test("Displays 'Artist Name' field label", () => {
-
-  render(<Form />);
-  const text = screen.getByLabelText('Artist Name')
-
-  expect(text).toBeInTheDocument();
-
-});
-
-test("Accepts user input", async () => {
-
-  render(<Form />);
-  const artistNameField = screen.getByLabelText("Artist Name");
-
-  await userEvent.type(artistNameField, "Music Research Unit");
-
-  expect(artistNameField).toHaveValue("Music Research Unit");
-
-});
-
-test("Calls handleSubmit with input data", async () => {
-
-  render(<Form />);
-  const artistNameField = screen.getByLabelText("Artist Name");
-  const button = screen.getByRole("button", { name: /submit/i });
-
-  await userEvent.type(artistNameField, 'Music Research Unit')
-  await userEvent.click(button);
-
-  expect(handleSubmit).toHaveBeenCalledWith({ artistName: 'Music Research Unit'});
-  
-});
+import { 
+  form_test_placeholder, 
+  form_test_artist_label, 
+  form_test_input, 
+  form_test_submit 
+} from "./Form.testFunctions";
+
+test("Displays field with placeholder text 'Dawn of the Squid'", form_test_placeholder);
+test("Displays 'Artist Name' field label", form_test_artist_label);
+test("Accepts user input", form_test_input);
+test("Calls handleSubmit with input data", form_test_submit);
diff --git a/src/components/Form/Form.testFunctions.tsx b/src/components/Form/Form.testFunctions.tsx
new file mode 100644
index 0000000..2efd214
--- /dev/null
+++ b/src/components/Form/Form.testFunctions.tsx
@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import Form from "./Form";
+import userEvent from "@testing-library/user-event";
+import { handleSubmit } from "../../functions/handleSubmit";
+
+jest.mock("../../functions/handleSubmit", () => ({
+
+  handleSubmit: jest.fn()
+
+}));
+
+
+export const form_test_placeholder: () => Promise<void> = async () => {
+  
+  render(<Form />);
+  const text = screen.getByPlaceholderText('Dawn of the Squid')
+  
+  expect(text).toBeInTheDocument();
+
+};
+
+export const form_test_artist_label = () => {
+  
+  render(<Form />);
+  const text = screen.getByLabelText('Artist Name')
+
+  expect(text).toBeInTheDocument();
+  
+};
+
+export const form_test_input: () => Promise<void> = async () => {
+  
+  render(<Form />);
+  const artistNameField = screen.getByLabelText("Artist Name");
+  
+  await userEvent.type(artistNameField, "Music Research Unit");
+  
+  expect(artistNameField).toHaveValue("Music Research Unit");
+
+};
+
+export const form_test_submit: () => Promise<void> = async () => {
+  
+  render(<Form />);
+  const artistNameField = screen.getByLabelText("Artist Name");
+  const button = screen.getByRole("button", { name: /submit/i });
+
+  await userEvent.type(artistNameField, 'Music Research Unit')
+  await userEvent.click(button);
+
+  expect(handleSubmit).toHaveBeenCalledWith({ artistName: 'Music Research Unit'});
+};
\ No newline at end of file
diff --git a/src/components/Title/Title.test.tsx b/src/components/Title/Title.test.tsx
index 448b8b0..f96cb3a 100644
--- a/src/components/Title/Title.test.tsx
+++ b/src/components/Title/Title.test.tsx
@@ -1,12 +1,4 @@
-import { render, screen } from "@testing-library/react";
-import Title from "./Title";
 import "@testing-library/jest-dom";
+import { title_test_title } from "./Title.testFunctions";
 
-test("Displays the title 'Harmonise'", () => {
-
-  render(<Title />);
-  const text = screen.getByText('Harmonise')
-  
-  expect(text).toBeInTheDocument();
-
-});
+test("Displays the title 'Harmonise'", title_test_title);
diff --git a/src/components/Title/Title.testFunctions.tsx b/src/components/Title/Title.testFunctions.tsx
new file mode 100644
index 0000000..4a5e883
--- /dev/null
+++ b/src/components/Title/Title.testFunctions.tsx
@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/react";
+import Title from "./Title";
+
+export const title_test_title: () => Promise<void> = async () => {
+    
+    render(<Title />);
+    const text = screen.getByText('Harmonise')
+      
+    expect(text).toBeInTheDocument();
+    
+};
\ No newline at end of file

From 1d0010d3741c011ece0872b51453bc73aaf7ae26 Mon Sep 17 00:00:00 2001
From: CodeKrakken <newholm1@hotmail.com>
Date: Tue, 2 Dec 2025 19:54:56 +0000
Subject: [PATCH 14/14] Remove one more extraneous async from test

---
 src/components/Form/Form.testFunctions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Form/Form.testFunctions.tsx b/src/components/Form/Form.testFunctions.tsx
index 2efd214..5bf71a0 100644
--- a/src/components/Form/Form.testFunctions.tsx
+++ b/src/components/Form/Form.testFunctions.tsx
@@ -10,7 +10,7 @@ jest.mock("../../functions/handleSubmit", () => ({
 }));
 
 
-export const form_test_placeholder: () => Promise<void> = async () => {
+export const form_test_placeholder = () => {
   
   render(<Form />);
   const text = screen.getByPlaceholderText('Dawn of the Squid')