<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>25+5 Clock</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#app {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}
.controls {
display: flex;
justify-content: space-around;
margin-top: 10px;
}
.controls div {
margin: 5px;
}
.timer {
font-size: 40px;
margin: 10px 0;
}
button {
padding: 10px;
font-size: 16px;
background-color: #00aaff;
border: none;
color: white;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0077cc;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- Alternative audio link from a publicly accessible source -->
<audio id="beep" preload="auto" src="https://actions.google.com/sounds/v1/alarms/alarm_clock.ogg" type="audio/ogg"></audio>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const DEFAULT_SESSION_LENGTH = 25;
const DEFAULT_BREAK_LENGTH = 5;
function App() {
const [breakLength, setBreakLength] = React.useState(DEFAULT_BREAK_LENGTH);
const [sessionLength, setSessionLength] = React.useState(DEFAULT_SESSION_LENGTH);
const [timeLeft
, setTimeLeft] = React.useState(sessionLength * 60);
const [isRunning, setIsRunning] = React.useState(false);
const [isSession, setIsSession] = React.useState(true);
const beepRef = React.useRef();
// Convert seconds to mm:ss format
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = time % 60;
return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};
// Handle increment and decrement for break and session
const handleBreakChange = (amount) => {
if (!isRunning && (breakLength + amount > 0 && breakLength + amount <= 60)) {
setBreakLength(breakLength + amount);
}
};
const handleSessionChange = (amount) => {
if (!isRunning && (sessionLength + amount > 0 && sessionLength + amount <= 60)) {
setSessionLength(sessionLength + amount);
setTimeLeft((sessionLength + amount) * 60);
}
};
// Start or stop the timer
const handleStartStop = () => {
setIsRunning(!isRunning);
};
// Reset the timer and audio
const handleReset = () => {
setIsRunning(false);
setBreakLength(DEFAULT_BREAK_LENGTH);
setSessionLength(DEFAULT_SESSION_LENGTH);
setTimeLeft(DEFAULT_SESSION_LENGTH * 60);
setIsSession(true);
beepRef.current.pause();
beepRef.current.currentTime = 0; // Rewind beep audio to start
};
// Timer countdown logic
React.useEffect(() => {
let timer;
if (isRunning) {
timer = setInterval(() => {
setTimeLeft((prevTimeLeft) => {
if (prevTimeLeft === 0) {
beepRef.current.play(); // Play beep when timer reaches zero
if (isSession) {
setIsSession(false);
return breakLength * 60;
} else {
setIsSession(true);
return sessionLength * 60;
}
} else {
return prevTimeLeft - 1;
}
});
}, 1000);
}
return () => clearInterval(timer);
}, [isRunning, isSession, breakLength, sessionLength]);
return (
<div id="app">
<h1>25 + 5 Clock</h1>
<div className="controls">
<div id="break-label">
<h2>Break Length</h2>
<div>
<button id="break-decrement" onClick={() => handleBreakChange(-1)}>-</button>
<span id="break-length">{breakLength}</span>
<button id="break-increment" onClick={() => handleBreakChange(1)}>+</button>
</div>
</div>
<div id="session-label">
<h2>Session Length</h2>
<div>
<button id="session-decrement" onClick={() => handleSessionChange(-1)}>-</button>
<span id="session-length">{sessionLength}</span>
<button id="session-increment" onClick={() => handleSessionChange(1)}>+</button>
</div>
</div>
</div>
<div className="timer">
<h2 id="timer-label">{isSession ? "Session" : "Break"}</h2>
<div id="time-left">{formatTime(timeLeft)}</div>
</div>
<div className="controls">
<button id="start_stop" onClick={handleStartStop}>{isRunning ? "Pause" : "Start"}</button>
<button id="reset" onClick={handleReset}>Reset</button>
</div>
<audio id="beep" ref={beepRef} preload="auto" />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
Please Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!
Im sorry the code didnt copy over, Im building the 25+54 clock and the I can not get the timer “Beep” to play i looked on my browser console and it said that the link I was using returned Forbidden so I changed it to a public google link but stil does not play
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>25+5 Clock</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#app {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}
.controls {
display: flex;
justify-content: space-around;
margin-top: 10px;
}
.controls div {
margin: 5px;
}
.timer {
font-size: 40px;
margin: 10px 0;
}
button {
padding: 10px;
font-size: 16px;
background-color: #00aaff;
border: none;
color: white;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0077cc;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- Ensured the audio file is longer than 1 second -->
<audio id="beep" preload="auto" src="https://www.soundjay.com/button/beep-07.wav" type="audio/wav"></audio>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const DEFAULT_SESSION_LENGTH = 25;
const DEFAULT_BREAK_LENGTH = 5;
function App() {
const [breakLength, setBreakLength] = React.useState(DEFAULT_BREAK_LENGTH);
const [sessionLength, setSessionLength] = React.useState(DEFAULT_SESSION_LENGTH);
const [timeLeft, setTimeLeft] = React.useState(sessionLength * 60);
const [isRunning, setIsRunning] = React.useState(false);
const [isSession, setIsSession] = React.useState(true);
const beepRef = React.useRef();
// Convert seconds to mm:ss format
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = time % 60;
return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};
// Handle increment and decrement
const handleBreakChange = (amount) => {
if (!isRunning && (breakLength + amount > 0 && breakLength + amount <= 60)) {
setBreakLength(breakLength + amount);
}
};
const handleSessionChange = (amount) => {
if (!isRunning && (sessionLength + amount > 0 && sessionLength + amount <= 60)) {
setSessionLength(sessionLength + amount);
setTimeLeft((sessionLength + amount) * 60);
}
};
// Start / stop the timer
const handleStartStop = () => {
setIsRunning(!isRunning);
};
// Reset the timer
const handleReset = () => {
setIsRunning(false);
setBreakLength(DEFAULT_BREAK_LENGTH);
setSessionLength(DEFAULT_SESSION_LENGTH);
setTimeLeft(DEFAULT_SESSION_LENGTH * 60);
setIsSession(true);
beepRef.current.pause();
beepRef.current.currentTime = 0; // Rewind the beep to the start
};
// Timer logic
React.useEffect(() => {
let timer;
if (isRunning) {
timer = setInterval(() => {
setTimeLeft((prevTimeLeft) => {
if (prevTimeLeft === 0) {
beepRef.current.play().catch((error) => console.error("Audio playback error:", error)); // Play the beep sound when timer reaches zero
if (isSession) {
setIsSession(false);
return breakLength * 60;
} else {
setIsSession(true);
return sessionLength * 60;
}
} else {
return prevTimeLeft - 1;
}
});
}, 1000);
}
return () => clearInterval(timer);
}, [isRunning, isSession, breakLength, sessionLength]);
return (
<div id="app">
<h1>25 + 5 Clock</h1>
<div className="controls">
<div id="break-label">
<h2>Break Length</h2>
<div>
<button id="break-decrement" onClick={() => handleBreakChange(-1)}>-</button>
<span id="break-length">{breakLength}</span>
<button id="break-increment" onClick={() => handleBreakChange(1)}>+</button>
</div>
</div>
<div id="session-label">
<h2>Session Length</h2>
<div>
<button id="session-decrement" onClick={() => handleSessionChange(-1)}>-</button>
<span id="session-length">{sessionLength}</span>
<button id="session-increment" onClick={() => handleSessionChange(1)}>+</button>
</div>
</div>
</div>
<div className="timer">
<h2 id="timer-label">{isSession ? "Session" : "Break"}</h2>
<div id="time-left">{formatTime(timeLeft)}</div>
</div>
<div className="controls">
<button id="start_stop" onClick={handleStartStop}>{isRunning ? "Pause" : "Start"}</button>
<button id="reset" onClick={handleReset}>Reset</button>
</div>
<audio id="beep" ref={beepRef} src="https://www.soundjay.com/button/beep-07.wav" preload="auto" />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
You don’t need to post lots of copies of your code. It would be more helpful if you post a write up of what you’ve tried and how you got stuck.
Im sorry it didnt look like it posted all the firt time, the error im getting says 404 access forbidden for the soundjay link, so i have tried replacing it with this link
but still does not play
Unfortunately, that’s not much information and I don’t have the time to go digging through all of that code to try to understand what’s happening right now.
ok i understand I got ill try a few things and if not ill ask again but only include the code for the sound. I appriciate it though!
It would probably help if you did a very detailed writeup of how you are stuck.
Thank you Jeremy after re looking at the code and following the directions layed out in codepen aout adding rules within the body, I seperated the code from html, css and js instead of 1 long code and it now works. I appriciated your time!
1 Like
put the css in the css file and a another thing put the link of the css in the HTML Preformatted text put the link like this in the htm like this like this
1 Like
Can I be your friend? 