2 files changed, 93 insertions, 11 deletions
diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js
new file mode 100644
index 0000000..367cce5
--- /dev/null
+++ b/src/components/Timer/Timer.js
@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+
+import styled from 'styled-components';
+import {post} from '../../requests';
+
+const Timer = () => {
+    const SPACE = 32
+    const [time, setTime] = useState("00:00:00")
+    const [running, setRunning] = useState(false);
+    const [timer, setTimer] = useState(0);
+    let startingTime;
+
+    
+    const handleKeyUp = event => {
+        if (event.keyCode === SPACE){
+            if (!running) {
+                startingTime = Date.now();
+                setRunning(true);
+                setTimer(setInterval(() => setTime(() => {
+                    const timeGap = Math.floor((Date.now() - startingTime) / 10);
+                    let resultTime = "";
+
+                    const minute = Math.floor(timeGap / 6000);
+                    if (minute < 10) resultTime += '0';
+                    resultTime += minute + ':';
+
+                    let second = Math.floor(timeGap / 100);
+                    if (second < 10) resultTime += '0';
+                    if (second > 59) second %= 60
+                    resultTime += second + ':';
+
+                    const mill = timeGap % 100;
+                    if (mill < 10) resultTime += '0';
+                    resultTime += mill;
+
+                    return resultTime;
+                }), 10))
+            } else {
+                clearInterval(timer);
+                setRunning(false);
+                startingTime = 0;
+                post('solutions/', {result: time});
+                return false;
+            }
+        }
+    }
+
+
+    useEffect(() => {
+        window.addEventListener("keyup", handleKeyUp);
+
+        return () => {
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    })
+
+
+    return (
+        <Root>
+            <span>{time}</ span>
+        </Root>
+    );
+
+}
+
+const Root = styled.div`
+    background-color: skyblue;
+    padding: 8px;
+    display: inline-block;
+    font-size: 32px;
+    color: pink;
+`;
+
+export default Timer;
diff --git a/src/index.js b/src/index.js
index bacf937..a397310 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,6 +10,7 @@ import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
 
 import theme from "./theme";
 import Header from './components/Header/Header';
+import Timer from './components/Timer/Timer';
 import Scoreboard from "./components/Scoreboard/Scoreboard";
 
 
@@ -25,23 +26,30 @@ const App = () => {
   const [page, setPage] = useState('app');
 
   const classes = useStyles();
+
+  const getPageComponent = page => {
+    switch (page) {
+      case 'app':
+        return (<Timer/>);
+      case 'scoreboard':
+        return (<Scoreboard/>);
+      default:
+        return (
+          <p>
+            This text is rendered outside of <code>Header</code> component, but
+            interacting with <code>Header</code> can influence content of this page!
+          </p>
+        )
+    }
+  };
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline/>
       <Header setPage={setPage}/>
       <Box className={classes.root}>
         <Typography variant="h4"> This is the {page} page! </Typography>
-        {
-          (page === 'scoreboard')?
-          (<Scoreboard/>)
-          :
-          (
-            <p>
-              This text is rendered outside of <code>Header</code> component, but
-              interacting with <code>Header</code> can influence content of this page!
-            </p>
-          )
-        }
+        { getPageComponent(page) }
       </Box>
     </ThemeProvider>
   );