1
Test Suite > #Content >
- I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).
time-left is not formatted correctly: expected ‘25’ to equal ‘60’
As you see above picture, program show 25:00. But maybe the way I provide 25:00 is wrong?
const [timer, setTimer] = useState({ m: 25, s: 0 }); /* m: minute, s: second */
<p id="time-left">
{timer.m <= 9 ? "0" + timer.m : timer.m}
:
{timer.s <= 9 ? "0" + timer.s : timer.s}
</p>
(It’s React). Full source code is further down.
2
Test Suite > #Timer >
- I should not be able to set a session or break length to > 60.
Value in element with id of “session-length” is greater than 60.: expected ‘41’ to equal ‘60’
But I’m not able to set these to > 60.
function handleClick_breakIncrement() {
if (breakLength < 60) {
setBreakLength(breakLength + 1);
}
}
Also I wrote this
React.useEffect(() => {
console.log("session: " + sessionLength + " | break: " + breakLength);
}, [sessionLength, breakLength]);
and there is no 61 between logs.
This project is still in progress.
CodePen link:
You might see this while I’m editing it and nothing works, so, here is source code that you can copy-paste into CodePen:
HTML:
<div id="root"></div>
CSS:
body {
margin: 0;
font-family: "VT323";
font-size: 35px;
background-color: blue;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
* {
box-sizing: border-box;
}
#Clock-25-5-container {
width: 640px;
height: 480px;
}
#heading {
font-size: 35px;
font-weight: normal;
}
#timer-container {
width: 100%;
height: auto;
border: 5px solid white;
}
.margin {
margin: 10px 0px;
}
.center-text {
text-align: center;
}
#time-left {
font-size: 105px;
}
button {
font-family: inherit;
font-size: inherit;
background-color: transparent;
color: white;
border: none;
cursor: pointer;
}
.big-button:active {
margin-bottom: 0;
margin-top: 20px;
}
.big-button {
width: 72px;
height: 72px;
padding: 0;
}
#button-container {
display: flex;
justify-content: center;
}
.margin-right {
margin-right: 10px;
}
.settings-container-child {
display: inline-block;
width: 50%;
height: auto;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
#settings-container {
display: flex;
}
.settings-buttons-and-screen-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: start;
width: 120px;
height: 42px;
margin-bottom: 10px;
}
.settings-buttons-and-screen-container > p {
display: inline-block;
margin: 0;
width: 40px;
height: 40px;
text-align: center;
}
#break-decrement,
#break-increment,
#session-decrement,
#session-increment {
width: 40px;
height: 40px;
}
JS:
const { useState } = React;
function App() {
return (<Clock_25_5 />);
}
function Clock_25_5() {
const icons = {
play: (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 24 24" height="70" width="70"><desc>Play (and pause) icon - Source: https://streamlinehq.com</desc><title>Play (and Pause)</title>
<path d="M21.9003125 6.569375000000001h-1.0925V4.3771875h-1.0996875V3.2846875000000004H18.615624999999998V2.1921874999999997h-2.1921874999999997V1.0925h-2.185V0h-5.476875v1.0925H6.569375000000001v1.0996875H4.3771875v1.0925H3.2846875000000004v1.0925H2.185v2.1921874999999997H1.0925v2.1921874999999997H0v5.476875h1.0925v2.1921874999999997h1.0925v2.185h1.0996875v1.0996875h1.0925v1.0925h2.1921874999999997v1.0996875h2.1921874999999997V23h5.476875v-1.0925h2.185v-1.0996875h2.1921874999999997v-1.0925h1.0925V18.615624999999998h1.0996875v-2.185h1.0925v-2.1921874999999997H23v-5.476875h-1.0996875Zm-5.476875 5.476875h-1.0925v1.0996875h-1.0925v1.0925h-1.0996875v1.0925h-1.0925v1.0996875h-2.1921874999999997v1.0925h-1.0925V5.476875h1.0925v1.0925h2.1921874999999997v1.0996875h1.0925v1.0925h1.0996875v1.0925h1.0925v1.0996875h1.0925Z" fill="white" stroke-width="1"></path>
</svg>
),
reset: (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 24 24" height="70" width="70"><desc>Reset icon - Source: https://streamlinehq.com</desc><title>Reset</title>
<path d="M21.9075 6.569375000000001h-1.0996875V4.3771875h-1.0925V3.2846875000000004h-1.0925V2.1921874999999997h-2.1921874999999997V1.0925h-2.1921874999999997V0h-5.476875v1.0925H6.569375000000001v1.0996875H4.3843749999999995v1.0925H3.2846875000000004v1.0925H2.1921874999999997v2.1921874999999997H1.0925v2.1921874999999997H0v5.476875h1.0925v2.1921874999999997h1.0996875v2.185h1.0925v1.0996875H4.3843749999999995v1.0925h2.185v1.0996875h2.1921874999999997V23h5.476875v-1.0925h2.1921874999999997v-1.0996875h2.1921874999999997v-1.0925h1.0925V18.615624999999998h1.0925v-2.185h1.0996875v-2.1921874999999997H23v-5.476875h-1.0925Zm-3.2846875000000004 4.3843749999999995h-1.0996875v1.0925h-1.0925v1.0996875h-1.0996875v1.0925h-1.0925v1.0925h-1.0925v-2.185h-4.3843749999999995v1.0925h-1.0925v1.0925h1.0925v1.0996875h1.0925v1.0925H6.569375000000001v-1.0925H5.476875v-1.0996875H4.3843749999999995v-5.476875h1.0925v-1.0925h1.0925v-1.0925h6.5765625000000005V5.476875h1.0925v1.0925h1.0925v1.0996875h1.0996875v1.0925h1.0925v1.0925h1.0996875Z" fill="white" stroke-width="1"></path>
</svg>
)
};
const [breakLength, setBreakLength] = useState(5);
const [sessionLength, setSessionLength] = useState(25);
const [timer, setTimer] = useState({ m: 25, s: 0 }); /* m: minute, s: second */
const [currentActivity, setCurrentActivity] = useState("Session"); /* Allowed values by setCurrentActivity(): "Session" - "Break" (⚠ Capital first letter) */
// function timerFunction() { /* Countdown */
// let
// }
// function handleClick_reset() {
// }
function handleClick_breakDecrement() {
if (breakLength > 1) {
setBreakLength(breakLength - 1);
}
}
function handleClick_breakIncrement() {
if (breakLength < 60) {
setBreakLength(breakLength + 1);
}
}
function handleClick_sessionDecrement() {
if (sessionLength > 1) {
setSessionLength(sessionLength - 1);
}
}
function handleClick_sessionIncrement() {
if (sessionLength < 60) {
setSessionLength(sessionLength + 1);
}
}
/* For testing */
React.useEffect(() => {
console.log("session: " + sessionLength + " | break: " + breakLength);
}, [sessionLength, breakLength]);
return (
<article id="Clock-25-5-container">
<h1 id="heading" class="center-text margin">25 + 5 Clock</h1>
<div id="timer-container">
<p id="timer-label" class="center-text margin">{currentActivity}</p>
<p id="time-left" class="center-text margin">
{timer.m <= 9 ? "0" + timer.m : timer.m}
:
{timer.s <= 9 ? "0" + timer.s : timer.s}
</p>
<div id="button-container">
<button id="start_stop" class="margin big-button margin-right">
{icons.play}
</button>
<button id="reset" class="margin big-button"
> {/* onClick={handleClick_reset} */}
{icons.reset}
</button>
</div>
</div>
<div id="settings-container">
<div class="settings-container-child">
<p id="break-label" class="margin">Break Length</p>
<div class="settings-buttons-and-screen-container">
<button id="break-decrement"
onClick={handleClick_breakDecrement}>-</button>
<p id="break-length">{breakLength}</p>
<button id="break-increment"
onClick={handleClick_breakIncrement}>+</button>
</div>
</div>
<div class="settings-container-child">
<p id="session-label" class="margin">Session Length</p>
<div class="settings-buttons-and-screen-container">
<button id="session-decrement"
onClick={handleClick_sessionDecrement}>-</button>
<p id="session-length">{sessionLength}</p>
<button id="session-increment"
onClick={handleClick_sessionIncrement}>+</button>
</div>
</div>
</div>
</article>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
freeCodeCamp link: