Tell us what’s happening:
I’m trying to use Material UI with React in Codepen, and I’m struggling with it. My code works without problems in Vcode, but I have no idea what to do to make it run in Codepen, I’ve tried a looooot of things. Please let me know 
Your code so far
import { Button, Container, Grid, ButtonGroup } from 'material-ui/core';
const { useState, useEffect } = React;
const App=()=> {
const [sessionLength, setSessionLength] = useState(25)
const [breakLength, setBreakLength] = useState(5)
const [isBreak, setIsBreak] = useState(false)
const [timer, setTimer] = useState(1500)
const [isRunning, setIsRunnig] = useState(false)
useEffect(() => {
if (isRunning) {
const timer1 = setTimeout(() => {
if(timer===1){
document.getElementById('beep').play()
}
if(timer===0){
// Set the timer
(!isBreak)? setTimer(breakLength*60):setTimer(sessionLength*60)
setIsBreak(!isBreak)
}else{
setTimer(timer-1)
console.log('This will run after 1 second!')
console.log(timer-1)
}
}, 1000);
return () => clearTimeout(timer1);
}
});
const initialize=()=>{
setSessionLength(25)
setBreakLength(5)
setIsBreak(false)
setTimer(1500)
setIsRunnig(false)
const audio = document.getElementById('beep')
audio.pause()
audio.currentTime=0
}
const decreaseCounter=(e)=>{
if (e.target.id === "break-decrement" && breakLength > 1){
(isBreak) ? setTimer(breakLength * 60 - 60) : console.log("It's not break yet")
setBreakLength(breakLength-1)
} else if (e.target.id === "session-decrement" && sessionLength > 1){
// Set the timer
(isBreak) ? console.log("BREAK TIME") : setTimer(sessionLength * 60 - 60)
setSessionLength(sessionLength - 1)
}
}
const increaseCounter = (e) => {
if (e.target.id === "break-increment" && breakLength < 60) {
(isBreak)? setTimer(breakLength * 60 + 60):console.log("It's not break yet")
setBreakLength(breakLength + 1)
} else if (e.target.id === "session-increment" && sessionLength < 60) {
// Set the timer
(isBreak) ? console.log("BREAK TIME") : setTimer(sessionLength * 60 + 60)
setSessionLength(sessionLength + 1)
}
}
const clockify=()=> {
let minutes = Math.floor(timer / 60);
let seconds = timer - minutes * 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
minutes = minutes < 10 ? '0' + minutes : minutes;
return minutes + ':' + seconds;
}
return (
<Container maxWidth="xs" style={{textAlign: 'center'}}>
<Grid container spacing={3}>
<Grid item xs={12} >
<h1>My Pomodoro Clock</h1>
</Grid>
<Grid item xs={12} sm={6}>
<Counter type='break' decrease={decreaseCounter} increase={increaseCounter} value={breakLength} />
</Grid>
<Grid item xs={12} sm={6}>
<Counter type='session' decrease={decreaseCounter} increase={increaseCounter} value={sessionLength} />
</Grid>
<Grid item xs={12} >
{/* Check when is suppouse to change to Break */}
<h2 id='timer-label'>{(isBreak) ? "BREAK" : "SESSION"}</h2>
<h2 id="time-left">{clockify()}</h2>
<Button variant="contained"
onClick={() => setIsRunnig(!isRunning)}
id="start_stop">ON/OFF
</Button>
<Button variant="contained"
// Initialize everything story 11
onClick={initialize}
id="reset">Reset
</Button>
<audio className='clip' id='beep' src="https://goo.gl/65cBl1"></audio>
</Grid>
</Grid>
</Container>
);
}
const Counter=(props)=>{
return (
<div>
<div id={props.type + "-label"}><h3>{props.type} length</h3> </div>
<div id={props.type + "-length"}><h3>{props.value}</h3></div>
<ButtonGroup variant="contained" color="primary" aria-label="contained primary button group">
<Button
onClick={props.decrease}
id={props.type + "-decrement"}>
-
</Button>
<Button
onClick={props.increase}
id={props.type + "-increment"}>
+
</Button>
</ButtonGroup>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.
Challenge: Build a Pomodoro Clock
Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock