From 58399024514c905d615d18f49145dbf65c4bfc62 Mon Sep 17 00:00:00 2001 From: ideen1 Date: Sat, 5 Oct 2024 11:54:34 -0600 Subject: [PATCH 01/10] My commit 2 --- ideen.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/ideen.txt b/ideen.txt index 980a0d5f..2ae12dda 100644 --- a/ideen.txt +++ b/ideen.txt @@ -1 +1,2 @@ Hello World! +Hello Ideen! From 19cd59618b2fae84f96ec3887bb7c064afe3db24 Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 18:24:40 -0600 Subject: [PATCH 02/10] Added calculate button to App.tsx with Tailwind styling --- .../Telemetry-Teaser/src/App.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 488bc934..9efae99f 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -20,6 +20,15 @@ const App = () => {
+ + {/*make the button*/} +
+ +
From 80eb280a7b227901ca781ccd85dba297665d7212 Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 18:30:11 -0600 Subject: [PATCH 03/10] created state variables to st ore input values --- .../Telemetry-Teaser/src/App.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 9efae99f..c9cea26e 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -2,9 +2,18 @@ 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(0); + const[battery, setBattery] = useState(0); + const[weather, setWeather] = useState(0); + const[range, setRange] = useState(0); + const calculateRange = () => { + //range = -(s * s * b / 2500) + (4 * b) + w + //Where s = speed, b = battery percentage w = weather + return; } @@ -29,6 +38,7 @@ const App = () => { > Calculate + From 54a0bec5be944a1b40a68af2111dcc02f926541c Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 18:37:22 -0600 Subject: [PATCH 04/10] Implemented the calculateRange function --- .../Telemetry-Teaser/src/App.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index c9cea26e..291574cc 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -6,14 +6,16 @@ import React, { useState } from "react"; const App = () => { const[speed, setSpeed] = useState(0); - const[battery, setBattery] = useState(0); + const[battery, setBattery] = useState(100); const[weather, setWeather] = useState(0); const[range, setRange] = useState(0); - + const calculateRange = () => { //range = -(s * s * b / 2500) + (4 * b) + w //Where s = speed, b = battery percentage w = weather - + const calculatedRange = -(speed * speed * battery / 2500) + (4 * battery) + weather; + + setRange(calculatedRange); return; } From 254f1b19d11515a987a74e9332918215549ec609 Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 19:10:59 -0600 Subject: [PATCH 05/10] working on making the speed button q --- .../Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 291574cc..c9e2b7a0 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -10,11 +10,14 @@ const App = () => { const[weather, setWeather] = useState(0); const[range, setRange] = useState(0); + // Error messages + const [speedError, setSpeedError] = useState(""); + const [batteryError, setBatteryError] = useState(""); + const calculateRange = () => { //range = -(s * s * b / 2500) + (4 * b) + w //Where s = speed, b = battery percentage w = weather const calculatedRange = -(speed * speed * battery / 2500) + (4 * battery) + weather; - setRange(calculatedRange); return; } @@ -25,7 +28,7 @@ const App = () => {
- + setSpeed(e.target.value)}/>
From 57b12073638cbd73ad5324792ee8b90e5e027fa4 Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 19:15:43 -0600 Subject: [PATCH 06/10] made both battery and speed required --- .../Telemetry-Teaser/src/App.tsx | 26 +++++++++++++++---- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index c9e2b7a0..f41bb66e 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -5,15 +5,31 @@ import WeatherInput from "~/components/weatherInput"; import React, { useState } from "react"; const App = () => { - const[speed, setSpeed] = useState(0); + const[speed, setSpeed] = useState(0); const[battery, setBattery] = useState(100); const[weather, setWeather] = useState(0); const[range, setRange] = useState(0); // Error messages - const [speedError, setSpeedError] = useState(""); - const [batteryError, setBatteryError] = useState(""); + const [speedError, setSpeedError] = useState("") + const [batteryError, setBatteryError] = useState("") + const validInputs = () =>{ + let valid = true; + + //reset battery and speed + setSpeedError(""); + setBatteryError(""); + + //check the input + if(speed === null){ + valid = false; + setSpeedError("Speed is required"); + }else if(battery === null){ + valid = false; + setSpeedError("Battery is required"); + } + } const calculateRange = () => { //range = -(s * s * b / 2500) + (4 * b) + w //Where s = speed, b = battery percentage w = weather @@ -28,8 +44,8 @@ const App = () => {
- setSpeed(e.target.value)}/> - + setSpeed(Number(e.target.value))}/> + setSpeed(Number(e.target.value))}/>
From 14dc2678acea53bdeb36fb3c15ed5295467f463d Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 19:55:23 -0600 Subject: [PATCH 07/10] working on the third step --- .../Telemetry-Teaser/src/App.tsx | 45 +++++++++++++++---- 1 file changed, 37 insertions(+), 8 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index f41bb66e..e4f9037c 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -5,8 +5,8 @@ import WeatherInput from "~/components/weatherInput"; import React, { useState } from "react"; const App = () => { - const[speed, setSpeed] = useState(0); - const[battery, setBattery] = useState(100); + const[speed, setSpeed] = useState(""); + const[battery, setBattery] = useState(""); const[weather, setWeather] = useState(0); const[range, setRange] = useState(0); @@ -14,6 +14,16 @@ const App = () => { const [speedError, setSpeedError] = useState("") const [batteryError, setBatteryError] = useState("") + //to avoid the type errors: + const handleSpeedChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setSpeed(value === "" ? "" : Number(value)) + } + const handleBatteryChange = (e: React.ChangeEvent) => { + const value = e.target.value; + // Allow empty input, or convert to a number + setBattery(value === "" ? "" : Number(value)); + }; const validInputs = () =>{ let valid = true; @@ -22,19 +32,34 @@ const App = () => { setBatteryError(""); //check the input - if(speed === null){ + if(speed === ""){ valid = false; setSpeedError("Speed is required"); - }else if(battery === null){ + return valid; + }else if(typeof speed === 'number' && (speed > 90 || speed < 0)){ + valid = false; + setSpeedError("The speed should be with the range of 0 to 90"); + } + + if(battery === ""){ valid = false; setSpeedError("Battery is required"); + return valid; } + 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 - const calculatedRange = -(speed * speed * battery / 2500) + (4 * battery) + weather; - setRange(calculatedRange); + if(validInputs()){ //only calculates if the inputs are valid + const calculatedRange = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + weather; + setRange(calculatedRange); + } + return; } @@ -44,8 +69,12 @@ const App = () => {
- setSpeed(Number(e.target.value))}/> - setSpeed(Number(e.target.value))}/> + + {speedError &&
{speedError}
} {/* speed error message */} + + + {batteryError &&
{batteryError}
} {/* Battery error message */} +
From 5c3ef5927cb29dace12e49ab49e4be5c2eab954a Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 20:19:50 -0600 Subject: [PATCH 08/10] displaying the result --- .../Telemetry-Teaser/src/App.tsx | 17 +++++++++++++---- .../src/components/batteryInput/index.tsx | 10 +++++++++- .../src/components/speedInput/index.tsx | 11 ++++++++++- 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index e4f9037c..949fff4c 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -18,11 +18,15 @@ const App = () => { const handleSpeedChange = (e: React.ChangeEvent) => { const value = e.target.value; setSpeed(value === "" ? "" : Number(value)) + console.log("Speed:", value); // Add this line + } const handleBatteryChange = (e: React.ChangeEvent) => { 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; @@ -35,16 +39,14 @@ const App = () => { if(speed === ""){ valid = false; setSpeedError("Speed is required"); - return valid; }else if(typeof speed === 'number' && (speed > 90 || speed < 0)){ valid = false; - setSpeedError("The speed should be with the range of 0 to 90"); + setSpeedError("The speed should be within the range of 0 to 90"); } if(battery === ""){ valid = false; setSpeedError("Battery is required"); - return valid; } else if (typeof battery === "number" && (battery < 0 || battery > 100)) { valid = false; @@ -58,6 +60,8 @@ const App = () => { 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; @@ -87,8 +91,13 @@ const App = () => { className="bg-blue-500 text-white font-bold py-2 px-4 rounded w-48" > Calculate + {range !== -1 && ( +
+

The predicted range of the Eylsia is {range.toFixed(2)} km.

+
+ )}
- +
diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx index ca4586c0..33fb5777 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx +++ b/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) => void; // Function to handle changes +} + +const BatteryInput: React.FC = ({ value, onChange }) => { return (
@@ -8,6 +13,9 @@ const BatteryInput = () => { name="battery" type="number" placeholder="Battery" + value={value} + onChange={onChange} + required />
); diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx index aa381c14..f321857d 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx +++ b/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) => void; // Function to handle changes +} + +const SpeedInput: React.FC = ({ value, onChange }) => { return ( <>
@@ -9,6 +15,9 @@ const SpeedInput = () => { name="speed" type="number" placeholder="Speed" + value={value} + onChange={onChange} + required />
From 6a0cb9745dea51dceb0fe42c3b53e11c0bee5a7e Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 5 Oct 2024 11:51:27 -0600 Subject: [PATCH 09/10] created new file --- hello.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 hello.txt diff --git a/hello.txt b/hello.txt new file mode 100644 index 00000000..3b18e512 --- /dev/null +++ b/hello.txt @@ -0,0 +1 @@ +hello world From 0335be10d6747d8e5d8cfc4f60eb97264bb4659a Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 5 Oct 2024 11:55:21 -0600 Subject: [PATCH 10/10] new commit --- hello.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hello.txt b/hello.txt index 3b18e512..3266b2d2 100644 --- a/hello.txt +++ b/hello.txt @@ -1 +1 @@ -hello world +hello world, hello world