diff --git a/app/components/calculator.tsx b/app/components/calculator.tsx
new file mode 100644
index 0000000..dc094ed
--- /dev/null
+++ b/app/components/calculator.tsx
@@ -0,0 +1,217 @@
+import { ValidatedForm } from "remix-validated-form";
+import { withZod } from "@remix-validated-form/with-zod";
+import { z } from "zod";
+import { useIsSubmitting } from "remix-validated-form";
+import { useField } from "remix-validated-form";
+import { useState, useEffect } from "react";
+
+/*------------------------------------------
+ HELPER FUNCTIONS
+ ------------------------------------------ */
+// NOTE: I decided to try out remix-validated-form because of it's simplicity and ease for validation. I originally used 'useActionData();' to do server-side validation, but ran into some issues due to returning a JSON response instead of a redirect, which caused the app to stay on the action's route.
+
+const validator = withZod(
+ z.object({
+ name: z.string().min(1, { message: "First name is required" }),
+ email: z.string().min(1, { message: "Email is required" }).email("Must be a valid email"),
+ averageProgramsPerMonth: z.string().min(1, { message: "Average Number of Programs Per Month is required" }),
+ averageLengthOfProgramsInHours: z
+ .string()
+ .min(1, { message: "Average Length Of Programs In Hours is required" }),
+ })
+);
+
+/*------------------------------------------
+ JSX ELEMENTS
+ ------------------------------------------ */
+const SubmitButton = () => {
+ const isSubmitting = useIsSubmitting();
+ return (
+
+ {isSubmitting ? "CALCULATING..." : "CALCULATE"}
+
+ );
+};
+
+type TextInputProps = {
+ name: string;
+ label: string;
+ type: string;
+};
+
+// NOTE: remix-validated-form helped me to reduce my code quite a bit by being able to reuse a single component for both inputs and error handling. It was easy to customize the styles in one place as well.
+const TextInput = ({ name, label, type }: TextInputProps) => {
+ const { error, getInputProps } = useField(name);
+ const [borderColor, setBorderColor] = useState("medium-grey");
+
+ useEffect(() => {
+ error ? setBorderColor("red-500") : setBorderColor("medium-grey");
+ }, [error]);
+
+ return (
+
+
+ {label}
+
+
+ {error &&
*{error}
}
+
+
+
+
+
+
+
+
+
Do You Need Translations?
+
+
+
+
+
+
+ );
+ };
+ const CalculatorResults = () => {
+ return (
+ <>
+ You will need approximately
+
+
+ Of Closed Captioning Minutes for 1 year
+
+ );
+ };
+
+ return (
+
+ {yearlyCaptionMins === 0 ?
+ );
+}
diff --git a/app/components/navigation.tsx b/app/components/navigation.tsx
new file mode 100644
index 0000000..71744be
--- /dev/null
+++ b/app/components/navigation.tsx
@@ -0,0 +1,88 @@
+import logo from "../../public/cablecast-logo.png";
+import { useState } from "react";
+
+export default function Navigation() {
+ const [navbar, setNavbar] = useState(false);
+ return (
+
+
+
setNavbar(!navbar)}>
+
+
+
+
+ );
+}
diff --git a/app/root.tsx b/app/root.tsx
index 81181cc..58c58e8 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,35 +1,30 @@
import type { LinksFunction } from "@remix-run/node";
-import {
- Links,
- LiveReload,
- Meta,
- Outlet,
- Scripts,
- ScrollRestoration,
-} from "@remix-run/react";
+import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
import stylesheet from "~/tailwind.css";
-
export const links: LinksFunction = () => [
- { rel: "stylesheet", href: stylesheet },
+ { rel: "stylesheet", href: stylesheet },
+ { rel: "preconnect", href: "https://fonts.googleapis.com" },
+ { rel: "preconnect", href: "https://fonts.gstatic.com" },
+ { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap" },
];
export default function App() {
- return (
-
-
-
-
Hello world!
- {/*
- // Use the form below if you wan to go remix style, or just use fetch in an event handler.
- */}
-
-
- );
+ return (
+ <>
+
+
CAPTIONING CALCULATOR
+
+
+
+ How many captioning minutes will you need?
+
+
+ The Cablecast Captioning Calculator is a tool to understand how many cablecast Captioning
+ Minutes you will need for a year of programming.
+
+
+
+
+
+
+
+