Av4 flow rate page

src/app/flow-rate/components/Form.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import Input from "./Input";
+import "../styles/Form.css";
+
+type FormProps = {
+  onCalculate: (calculatedValue: number) => void;
+};
+
+export default function Form({ onCalculate }: FormProps) {
+  const [formData, setFormData] = useState<{
+    containerSize: number;
+    tryOne: number;
+    tryTwo: number;
+    tryThree: number;
+  }>({
+    containerSize: 0,
+    tryOne: 0,
+    tryTwo: 0,
+    tryThree: 0,
+  });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: parseFloat(value) || 0,
+    }));
+  };
+
+  const clear = () => {
+    onCalculate(0);
+    setFormData({
+      containerSize: 0,
+      tryOne: 0,
+      tryTwo: 0,
+      tryThree: 0,
+    });
+  }
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    const {
+      containerSize,
+      tryOne,
+      tryTwo,
+      tryThree,
+    } = formData;
+
+    const sum = tryOne + tryTwo + tryThree;
+    const avg = sum / 3;
+
+    let ingress;
+    if (avg != 0) {
+      ingress = containerSize / avg;
+    } else {
+      ingress = 0;
+    }
+
+    onCalculate(ingress);
+  };
+
+  const containerSizeLabel = "Container Size (L)";
+  const tryOneLabel = "Try One (s)";
+  const tryTwoLabel = "Try Two (s)";
+  const tryThreeLabel = "Try Three (s)";
+
+  return (
+    <form className="form" onSubmit={handleSubmit}>
+      <div className="input-wrapper">
+        <Input
+          label={containerSizeLabel}
+          name="containerSize"
+          min="0.01"
+          handleChange={handleChange}
+        />
+        <Input
+          label={tryOneLabel}
+          name="tryOne"
+          min="0"
+          handleChange={handleChange}
+        />
+        <Input
+            label={tryTwoLabel}
+            name="tryTwo"
+            min="0"
+            handleChange={handleChange}
+        />
+        <Input
+            label={tryThreeLabel}
+            name="tryThree"
+            min="0"
+            handleChange={handleChange}
+        />
+      </div>
+
+      <div className="button-wrapper">
+        <button type="reset" className="clear-button" onClick={clear}>
+          Clear
+        </button>
+        <button type="submit" className="submit-button">
+          Submit
+        </button>
+      </div>
+    </form>
+  );
+}

src/app/flow-rate/components/Input.tsx

@@ -0,0 +1,17 @@
+import "../styles/Input.css"
+
+type InputProps = {
+  label: string;
+  name: string;
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  min?: string;
+};
+
+export default function Input({ label, name, min, handleChange }: InputProps) {
+  return (
+    <div className="input-group">
+      <p>{label}</p>
+      <input name={name} min={min} type="number" onChange={handleChange} step="0.01"></input>
+    </div>
+  );
+}

src/app/flow-rate/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import Form from "./components/Form";
+import "./styles/Main.css";
+import Link from "next/link";
+
+const containerSize = 20  // liters
+
+const tryOne = 20 // seconds
+const tryTwo = 25
+const tryThree = 22
+
+const sum = tryOne + tryTwo + tryThree
+
+const avg = sum / 3
+
+const ingress = containerSize / avg  // liters/second
+
+function printIngressFormula() {
+    console.log("The ingress formula is: " + ingress + " liters/second");
+}
+
+printIngressFormula()
+
+export default function ReservoirIngressFormula() {
+    const [ingress, setIngress] =
+        useState(0);
+
+    const handleCalculate = (calculatedValue: number) => {
+        setIngress(calculatedValue);
+    };
+
+    return (
+        <div className="page">
+            <div className="main-content-wrapper">
+                <div className="main-content">
+                    <div className="header-wrapper">
+                        <h1 className="page-header">
+                            Reservoir Ingress Flow Rate Formula
+                        </h1>
+                    </div>
+                    <div className="form-wrapper">
+                        <Form onCalculate={handleCalculate}></Form>
+                    </div>
+                    <div className="result-wrapper">
+                        <h2>The flow rate for the reservoir ingress is:</h2>
+                        <div className="result-container">
+                            <div>
+                                <p className="answer">
+                                    {ingress.toFixed(2)} L/s
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="footer">
+                    <Link href="/">Return to home</Link>
+                </div>
+            </div>
+        </div>
+    );
+}

src/app/flow-rate/styles/Form.css

@@ -0,0 +1,50 @@
+.form {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.input-wrapper {
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.button-wrapper {
+  height: 20%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.button-wrapper button {
+  height: 45%;
+  border-radius: 5px;
+}
+
+.clear-button {
+  width: 25%;
+  background-color: #6c6b6b;
+  color: white;
+  font-weight: bold;
+  margin: auto;
+}
+
+.clear-button:hover {
+  background-color: rgb(63, 62, 62);
+}
+
+.submit-button {
+  width: 25%;
+  background-color: rgb(72, 72, 198);
+  color: white;
+  font-weight: bold;
+  margin: auto;
+}
+
+.submit-button:hover {
+  background-color: darkblue;
+}

src/app/flow-rate/styles/Input.css

@@ -0,0 +1,22 @@
+.input-group {
+    width: 100%;
+    height: 30%;
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+}
+
+input {
+    width: 100%;
+    height: 50%;
+    font-size: 100%;
+    padding-left: 1%;
+    border: 2px solid black;
+    border-radius: 5px;
+}
+
+p {
+    font-size: large;
+    font-weight: bold;
+    font-family: Verdana;
+}

src/app/flow-rate/styles/Main.css

@@ -0,0 +1,101 @@
+.page {
+  width: 100vw;
+  height: 100vh;
+  min-height: 1000px;
+  overflow-y: auto;
+  display: flex;
+  align-items: center;
+  margin: auto;
+  color: var(--dark-text);
+  background-color: rgb(236, 236, 236);
+}
+
+.main-content-wrapper {
+  width: 50%;
+  height: 90%;
+  min-height: 900px;
+  padding: 2%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: auto;
+  background-color: white;
+  border: 1px solid black;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
+}
+
+.back-button {
+  width: 75px;
+  height: 45px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  font-size: large;
+  font-weight: bold;
+}
+.main-content {
+  height: 95%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.footer {
+  height: 5%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.footer a {
+  color: blue;
+  text-decoration: underline;
+}
+
+.footer a:hover {
+  color: darkblue;
+}
+
+.header-wrapper {
+  height: 10%;
+  padding-top: 5%;
+  min-height: 150px;
+  text-align: center;
+  font-family: Verdana;
+  display: flex;
+}
+
+.form-wrapper {
+  height: 65%;
+  min-height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.result-wrapper {
+  margin-top: 2.5%;
+  padding-top: 2.5%;
+  border-top: 2px solid black;
+  display: flex;
+  height: 25%;
+  flex-direction: column;
+  text-align: center;
+}
+
+.result-container {
+  height: 80%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+.result-wrapper h2 {
+  height: 15%;
+}
+
+.answer {
+  font-size: 2rem;
+  /* min-height: 200px; */
+}

src/app/globals.css

@@ -1,6 +1,8 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --light-text: #ffffff;
+  --dark-text: #000000;
 }
 
 @media (prefers-color-scheme: dark) {