Branch florian #14
Branch florian #14
Conversation
| const [timeLeft, setTimeLeft] = useState<number>(60); | ||
| const [isActive, setIsActive] = useState<boolean>(false); | ||
| const intervalRef = useRef<number | null>(null); |
There was a problem hiding this comment.
You are currently managing two states: timeLeft and isActive. Consider if you could combine these into a single state object to reduce unnecessary re-renders, as each setState call triggers a re-render.
| const [timeLeft, setTimeLeft] = useState<number>(60); | ||
| const [isActive, setIsActive] = useState<boolean>(false); | ||
| const intervalRef = useRef<number | null>(null); |
There was a problem hiding this comment.
change this to const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
| <button style={buttonStyle} onClick={handleStart} disabled={isActive}> | ||
| Start | ||
| </button> | ||
| <button style={buttonStyle} onClick={handleReset}> | ||
| Reset | ||
| </button> | ||
| <button style={buttonStyle} onClick={handleStop}> | ||
| Stop | ||
| </button> |
There was a problem hiding this comment.
Consider adding aria-label or aria-live attributes
|
|
||
| const progressBarContainerStyle: React.CSSProperties = { | ||
| width: '80%', | ||
| height: '40px', |
There was a problem hiding this comment.
It might overflow on smaller screens. Add media queries or use rem.
| <div style={containerStyle}> | ||
| <h1 style={timerStyle}>{timeLeft}</h1> | ||
| <div style={progressBarContainerStyle}> | ||
| <div style={progressBarStyle}></div> | ||
| </div> | ||
| <div style={buttonContainerStyle}> | ||
| <button style={buttonStyle} onClick={handleStart} disabled={isActive}> | ||
| Start | ||
| </button> | ||
| <button style={buttonStyle} onClick={handleReset}> | ||
| Reset | ||
| </button> | ||
| <button style={buttonStyle} onClick={handleStop}> | ||
| Stop | ||
| </button> |
There was a problem hiding this comment.
please refactor with TailwindCss
| }; | ||
|
|
||
| const progressBarContainerStyle: React.CSSProperties = { | ||
| width: '80%', |
There was a problem hiding this comment.
change this to:
const progressBarStyle: React.CSSProperties = {
width: `${(timeLeft / 60) * 100}%`,
// ...
};
| @@ -0,0 +1,109 @@ | |||
| import React, { useState, useEffect, useRef } from 'react'; | |||
|
|
|||
| const CountdownTimer: React.FC = () => { | |||
There was a problem hiding this comment.
add zero case handling: if the countdown reaches 0 as a use i like to show me something like: "Time's up!"
or disabling the Start button
| }; | ||
|
|
||
| const buttonContainerStyle: React.CSSProperties = { | ||
| marginTop: '40px', // Increased margin to move the buttons further down |
| margin: '10px', | ||
| fontSize: '1.5rem', | ||
| color: '#FFFFFF', | ||
| backgroundColor: isCritical ? '#C026D3' : '#1D4ED8', |
There was a problem hiding this comment.
Change the color for the last second from purple to red
| setIsActive(false); | ||
| }; | ||
|
|
||
| const isCritical = timeLeft < 10; |
There was a problem hiding this comment.
Add more checkpoints like this through the process:
One for 45 seconds, one for 30 and one for 20s
Choose the colors so that they convert from blue to red
Also try to ease in into the transition
No description provided.