diff --git a/src/App.js b/src/App.js
index 7392c49..b158fdb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import "Your code here";
+import { formatTime } from "./formatTime";
import useTimer from "./useTimer";
function App() {
@@ -9,20 +9,16 @@ function App() {
-
{"Your code here"}
+
{formatTime(time)}
-
diff --git a/src/formatTime.js b/src/formatTime.js
index 7007315..3778c7d 100644
--- a/src/formatTime.js
+++ b/src/formatTime.js
@@ -1,8 +1,8 @@
export const formatTime = (time) => {
- const getSeconds = "Your code here";
- const minutes = "Your code here";
- const getMinutes = "Your code here";
- const getHours = "Your code here";
+ const getSeconds = `0${time % 60}`.slice(-2);
+ const minutes = `${Math.floor(time / 60)}`;
+ const getMinutes = `0${minutes % 60}`.slice(-2);
+ const getHours = `0${Math.floor(time / 3600)}`.slice(-2);
return `${getHours} : ${getMinutes} : ${getSeconds}`;
};
diff --git a/src/index.css b/src/index.css
index daf0b31..5a4c87b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,6 +9,7 @@
}
body {
+ background-color: rgb(255, 192, 237);
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "", "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
diff --git a/src/useTimer.js b/src/useTimer.js
index 92517e8..7ee711f 100644
--- a/src/useTimer.js
+++ b/src/useTimer.js
@@ -1,21 +1,31 @@
import { useState, useRef } from "react";
const useTimer = (ini = 0) => {
- const [time, setTime] = "Your code here";
+ const [time, setTime] = useState(0);
- const isStart = "Your code here";
- const active = "Your code here";
- const refInterval = "Your code here";
+ const isStart = useRef(true);
+ const active = useRef();
+ const refInterval = useRef(0);
const startTimer = () => {
- "Your code here";
active.current.disabled = true;
+ isStart.current = true;
+ refInterval.current = setInterval(() => {
+ if (isStart.current) {
+ setTime((time) => time + 1);
+ }
+ }, 1000);
};
+
const stopTimer = () => {
- "Your code here";
+ isStart.current = false;
+ clearInterval(refInterval.current);
+ active.current.disabled = false;
};
+
const resetTimer = () => {
- "Your code here";
+ setTime(0);
+ clearInterval(refInterval.current);
active.current.disabled = false;
};