Adding in createPortal feature

src/components/ResultsModal.jsx

@@ -0,0 +1,41 @@
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { createPortal } from "react-dom";
+
+const ResultsModal = forwardRef(function ResultsModal(
+	{ targetTime, remainingTime, onReset },
+	ref
+) {
+	const dialog = useRef();
+
+	const userLost = remainingTime <= 0;
+	const formattedRemaningTime = (remainingTime / 1000).toFixed(2);
+	const score = Math.round((1 - remainingTime / (targetTime * 1000)) * 100);
+
+	useImperativeHandle(ref, () => {
+		return {
+			open() {
+				dialog.current.showModal();
+			},
+		};
+	});
+	return createPortal(
+		<dialog ref={dialog} className="result-modal" onClose={onReset}>
+			{userLost && <h2> You Lost</h2>}
+			{!userLost && <h2> Youre Score: {score}</h2>}
+
+			<p>
+				The target time was <strong>{targetTime}</strong> seconds.
+			</p>
+			<p>
+				You stopped the timer with{" "}
+				<strong>{formattedRemaningTime} seconds left.</strong>
+			</p>
+			<form method="dialog" onSubmit={onReset}>
+				<button>Close</button>
+			</form>
+		</dialog>,
+		document.getElementById("modal")
+	);
+});
+
+export default ResultsModal;

src/components/TimerChallenge.jsx

@@ -1,37 +1,55 @@
 import { useRef, useState } from "react";
+import ResultsModel from "./ResultsModal";
 
 export default function TimerChallenge({ title, targetTime }) {
 	const timer = useRef();
+	const dialog = useRef();
 
-	const [timerStarted, setTimerStarted] = useState(false);
-	const [timerExpired, setTimerExpired] = useState(false);
+	const [timeRemaining, setTimeRemaining] = useState(targetTime * 1000);
+	const timerIsActive = timeRemaining > 0 && timeRemaining < targetTime * 1000;
+
+	if (timeRemaining <= 0) {
+		clearInterval(timer.current);
+		dialog.current.open();
+	}
+
+	function handleReset() {
+		setTimeRemaining(targetTime * 1000);
+	}
 
 	function handleStart() {
-		timer.current = setTimeout(() => {
-			setTimerExpired(true);
-		}, targetTime * 1000);
-		setTimerStarted(true);
+		timer.current = setInterval(() => {
+			setTimeRemaining((prevTimeRemaining) => prevTimeRemaining - 10);
+		}, 10);
 	}
 
 	function handleStop() {
-		clearTimeout(timercurrent);
+		dialog.current.open();
+		clearInterval(timer.current);
 	}
 
 	return (
-		<section className="challenge">
-			<h2>{title}</h2>
-			{timerExpired && <p>You Lost</p>}
-			<p className="challenge-time">
-				{targetTime} second{targetTime > 1 ? "s" : ""}
-			</p>
-			<p>
-				<button onClick={timerStarted ? handleStop : handleStart}>
-					{timerStarted ? "Stop" : "Start"} Challenge
-				</button>
-			</p>
-			<p className={timerStarted ? "active" : "inactive"}>
-				{timerStarted ? "Time is running..." : "Time inactive"}
-			</p>
-		</section>
+		<>
+			<ResultsModel
+				ref={dialog}
+				targetTime={targetTime}
+				remainingTime={timeRemaining}
+				onReset={handleReset}
+			/>
+			<section className="challenge">
+				<h2>{title}</h2>
+				<p className="challenge-time">
+					{targetTime} second{targetTime > 1 ? "s" : ""}
+				</p>
+				<p>
+					<button onClick={timerIsActive ? handleStop : handleStart}>
+						{timerIsActive ? "Stop" : "Start"} Challenge
+					</button>
+				</p>
+				<p className={timerIsActive ? "active" : "inactive"}>
+					{timerIsActive ? "Time is running..." : "Time inactive"}
+				</p>
+			</section>
+		</>
 	);
 }