Zainab

Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx

@@ -2,9 +2,68 @@ import BatteryInput from "~/components/batteryInput";
 import Header from "~/components/header";
 import SpeedInput from "~/components/speedInput";
 import WeatherInput from "~/components/weatherInput";
+import React, { useState } from "react";
 
 const App = () => {
+  const[speed, setSpeed] = useState<number | string>("");
+  const[battery, setBattery] = useState<number | string>("");
+  const[weather, setWeather] = useState(0);
+  const[range, setRange] = useState(0);
+
+   // Error messages
+  const [speedError, setSpeedError] = useState<string>("")
+  const [batteryError, setBatteryError] = useState<string>("")
+
+  //to avoid the type errors:
+  const handleSpeedChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSpeed(value === "" ? "" : Number(value))
+    console.log("Speed:", value); // Add this line
+
+  }
+  const handleBatteryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    // Allow empty input, or convert to a number
+    setBattery(value === "" ? "" : Number(value));
+    console.log("Battery:", value); // Add this line
+
+  };
+  const validInputs = () =>{
+    let valid = true;
+
+    //reset battery and speed
+    setSpeedError("");
+    setBatteryError("");
+
+    //check the input
+    if(speed === ""){
+      valid = false;
+      setSpeedError("Speed is required");
+    }else if(typeof speed === 'number' && (speed > 90 || speed < 0)){
+      valid = false;
+      setSpeedError("The speed should be within the range of 0 to 90");
+    }
+
+    if(battery === ""){
+      valid = false;
+      setSpeedError("Battery is required");
+    }
+    else if (typeof battery === "number" && (battery < 0 || battery > 100)) {
+      valid = false;
+      setSpeedError("The battery percentage should be within the range of 0 to 100");
+    }
+    return valid;
+  }
   const calculateRange = () => {
+    //range = -(s * s * b / 2500) + (4 * b) + w
+    //Where s = speed, b = battery percentage w = weather 
+    if(validInputs()){ //only calculates if the inputs are valid
+      const calculatedRange = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + weather;
+      setRange(calculatedRange);
+    }else {
+      setRange(-1); // Reset range if inputs are invalid
+    }
+
     return;
   }
 
@@ -14,12 +73,31 @@ const App = () => {
         <Header />
         <form name="simulator" className="flex w-full flex-col items-center">
           <div className="mb-4 flex w-full flex-col items-center gap-y-4">
-            <SpeedInput />
-            <BatteryInput />
+            <SpeedInput value={speed} onChange={handleSpeedChange}/>
+            {speedError && <div className="text-red-500">{speedError}</div>} {/* speed error message */}
+
+            <BatteryInput value={battery} onChange={handleBatteryChange}/>
+            {batteryError && <div className="text-red-500">{batteryError}</div>} {/* Battery error message */}
+
           </div>
           <div className="flex w-full flex-row justify-center gap-4">
             <WeatherInput />
           </div>
+
+        {/*make the button*/}
+          <div className="mt-8">
+            <button type="button" 
+            onClick={calculateRange}
+            className="bg-blue-500 text-white font-bold py-2 px-4 rounded w-48"
+            >
+              Calculate</button>
+              {range !== -1 && (
+             <div className="mt-4">
+             <p>The predicted range of the Eylsia is {range.toFixed(2)} km.</p>
+           </div>
+            )}
+          </div>
+
         </form>
       </div>
     </div>

Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx

@@ -1,4 +1,9 @@
-const BatteryInput = () => {
+interface BatteryInputProps {
+  value: number | string; // Expecting a string for the input value
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; // Function to handle changes
+}
+
+const BatteryInput: React.FC<BatteryInputProps> = ({ value, onChange }) => {
   return (
     <div className="flex w-full flex-col items-center gap-2">
       <label>Battery Percentage (%):</label>
@@ -8,6 +13,9 @@ const BatteryInput = () => {
         name="battery"
         type="number"
         placeholder="Battery"
+        value={value}
+        onChange={onChange}
+        required
       />
     </div>
   );

Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx

@@ -1,4 +1,10 @@
-const SpeedInput = () => {
+// Define the props type
+interface SpeedInputProps {
+  value: number | string; // Expecting a string for the input value
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; // Function to handle changes
+}
+
+const SpeedInput: React.FC<SpeedInputProps> = ({ value, onChange }) => {
   return (
     <>
       <div className="flex w-full flex-col items-center gap-2">
@@ -9,6 +15,9 @@ const SpeedInput = () => {
           name="speed"
           type="number"
           placeholder="Speed"
+          value={value}
+          onChange={onChange}
+          required
         />
       </div>
     </>

hello.txt

@@ -0,0 +1 @@
+hello world, hello world

ideen.txt

@@ -1 +1,2 @@
 Hello World!
+Hello Ideen!