diff --git a/src/App.css b/src/App.css deleted file mode 100644 index e5deef95..00000000 --- a/src/App.css +++ /dev/null @@ -1,71 +0,0 @@ -html, body, #root, .stopwatch, .stopwatch-content, .stopwatch-buttons { - height: -webkit-fill-available; -} - -body { - background-color: #f1f1f1; - margin: 0px; -} - -.stopwatch-title { - background-color: #303030; - margin: 0px; - color: white; - padding-left: 16px; - padding: 10px 0px 10px 16px; -} - -.stopwatch-content { - display: flex; -} - -.stopwatch-buttons { - display: flex; - flex-direction: column; - background-color: #ebebeb; - padding: 16px 12px; - width: 200px; -} - -.stopwatch-buttons button:focus { - outline: none; - border: 2px solid #000000; -} - -.stopwatch-buttons button { - margin: 7px 0px; - background-color: #fafafa; - border: 0px solid #fafafa; - text-align: left; - border-radius: 0.5rem; - padding: 7px 0px 7px 15px; - box-shadow: 0.5px 0.5px gray; -} - -.stopwatch-time { - margin-left: auto; - margin-right: auto; - margin-top: 20px; - padding: 50px; - background-color: #ffffff; - height: fit-content; - border-radius: 0.75rem; - width: 50%; - text-align: -webkit-center; - box-shadow: 0.5px 0.5px gray; -} - -.stopwatch-time p { - font-size: xxx-large; -} - -.stopwatch-laptimes ul { - list-style: none; - padding: 0px; -} - -.stopwatch-laptimes li { - padding: 10px 0px; - border-bottom: 1px solid #ebebeb; - font-size: x-large; -} \ No newline at end of file diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/App.tsx b/src/App.tsx index 8c90fc53..11c59804 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ import React from 'react' -import './App.css' -import StopWatch from './StopWatch' +import './App.scss' +import StopWatch from './components/Functionalities/StopWatch' export default function App() { return( diff --git a/src/StopWatch.test.tsx b/src/StopWatch.test.tsx index 643343c3..9773c06a 100644 --- a/src/StopWatch.test.tsx +++ b/src/StopWatch.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; -import StopWatch, { formatTime } from './StopWatch'; +import StopWatch, { formatTime } from './components/Functionalities/StopWatch'; // Test the formatTime function describe('formatTime', () => { diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx deleted file mode 100644 index 2e06473c..00000000 --- a/src/StopWatch.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React, { useState, useEffect, useCallback } from 'react' -import StopWatchButton from './StopWatchButton' - -// Function to format the time. This is necessary since both the time and lap times need to be formatted -export function formatTime(time: number): string { - // Format the time in mm:ss:ms. Display hours only if reached - const hours = Math.floor(time / 360000); - const minutes = Math.floor((time % 360000) / 6000); - const seconds = Math.floor((time % 6000) / 100); - const milliseconds = time % 100; - // Format the minutes, seconds, and milliseconds to be two digits - const formattedMinutes = minutes.toString().padStart(2, '0'); - const formattedSeconds = seconds.toString().padStart(2, '0'); - const formattedMilliseconds = milliseconds.toString().padStart(2, '0'); - // If stopwatch reaches at least an hour, display the hours - if (hours > 0) { - const formattedHours = hours.toString().padStart(2, '0'); - return `${formattedHours}:${formattedMinutes}:${formattedSeconds}:${formattedMilliseconds}`; - } - // Combine the values into a string - const formattedTime = `${formattedMinutes}:${formattedSeconds}:${formattedMilliseconds}`; - return formattedTime; -} - -export default function StopWatch() { - // State to track the time, whether the timer is on/off, and the lap times - const [time, setTime] = useState(0); - const [timerOn, setTimerOn] = useState(false); - const [lapTimes, setLapTimes] = useState([]); - - // Stops the timer, resets the time, and clears the lap times. useCallback is used to prevent unnecessary re-renders - const handleReset = useCallback(() => { - setTimerOn(false); - setTime(0); - setLapTimes([]); - }, []); - - // Every time timerOn changes, we start or stop the timer - // useEffect is necessary since setInterval changes the state and we don't want to create an infinite loop - useEffect(() => { - let interval: ReturnType | null = null; - - if (timerOn) { - interval = setInterval(() => setTime(time => time + 1), 10) - } - - return () => {clearInterval(interval)} // Clears the interval when the component unmounts or timerOn changes - }, [timerOn]) - - return( -
-

StopWatch

-
-
- setTimerOn(true)}> - setTimerOn(false)}> - setLapTimes([...lapTimes, time])} timerOn={timerOn} lapTimes={lapTimes}> - -
-
-

{formatTime(time)}

- {/* Display the numbered lap times */} - {lapTimes.length > 0 && ( -
-

Lap times

-
    - {lapTimes.map((lapTime, index) => { - return
  • {(index + 1)+'.'} {formatTime(lapTime)}
    • - })} -
-
- )} -
-
-
- ) -} \ No newline at end of file diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx deleted file mode 100644 index 7f12a5f1..00000000 --- a/src/StopWatchButton.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react' - -// Maximum number of laps that can be recorded -const maxLaps = 25; - -// Define the props for the StopWatchButton component -type StopWatchButtonProps = { - type: 'start' | 'stop' | 'lap' | 'reset'; - onClick?: () => void; - timerOn?: boolean; - time?: number; - lapTimes?: number[]; -}; - - export default function StopWatchButton({ type, onClick, timerOn, time, lapTimes }: StopWatchButtonProps) { - // Determine the button text based on the type and add corresponding tabIndex - let buttonText, tabIndex; - switch(type) { - case 'start': - buttonText = 'Start'; - tabIndex = 1; - break; - case 'stop': - buttonText = 'Stop'; - tabIndex = 2; - break; - case 'lap': - buttonText = 'Record Lap'; - tabIndex = 3; - break; - case 'reset': - buttonText = 'Reset'; - tabIndex = 4; - break; - default: - buttonText = ''; - tabIndex = 0; - } - // Determine whether the reset or lap buttons should be disabled - const isLapDisabled = !timerOn || (lapTimes && lapTimes.length === 25); - const isResetDisabled = time === 0; - return( - - ) -} \ No newline at end of file diff --git a/src/components/Button/StopWatchButton.scss b/src/components/Button/StopWatchButton.scss new file mode 100644 index 00000000..91f2b044 --- /dev/null +++ b/src/components/Button/StopWatchButton.scss @@ -0,0 +1,17 @@ +// Removing Whitespace +*, *::before, *::after { + box-sizing: border-box; +} + +.button { + display: flex; + justify-content: space-between; + align-items: center; + color: #323232; + background-color:#0095FF; + border-color:#0095FF; + &:hover { + background-color:#0065AD; + border-color:#0065AD; + } +} \ No newline at end of file diff --git a/src/components/Button/StopWatchButton.tsx b/src/components/Button/StopWatchButton.tsx new file mode 100644 index 00000000..917bbf12 --- /dev/null +++ b/src/components/Button/StopWatchButton.tsx @@ -0,0 +1,10 @@ +import './Button.scss'; +import React from 'react' + +export default function StopWatchButton() { + return( + + ) +} \ No newline at end of file diff --git a/src/components/Functionalities/StopWatch.scss b/src/components/Functionalities/StopWatch.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Functionalities/StopWatch.tsx b/src/components/Functionalities/StopWatch.tsx new file mode 100644 index 00000000..a13db1fb --- /dev/null +++ b/src/components/Functionalities/StopWatch.tsx @@ -0,0 +1,9 @@ +import React from 'react' +import './StopWatch.scss' +import StopWatchButton from '../Button/StopWatchButton' + +export default function StopWatch() { + return( +
+ ) +} \ No newline at end of file