mirror of
https://github.com/friuns2/BlackFriday-GPTs-Prompts.git
synced 2026-04-30 22:13:55 +07:00
Your a
231 lines
5.3 KiB
Markdown
231 lines
5.3 KiB
Markdown
|
|
|
|
# Pomodoro Clock Website | [Start Chat](https://gptcall.net/chat.html?data=%7B%22contact%22%3A%7B%22id%22%3A%22ztFPKDKjBNrrZFUmjjqkX%22%2C%22flow%22%3Atrue%7D%7D)
|
|
Write a code for me which runs as a pomodoro clock. 25 minutes work, 5 minutes break for 4 times and after the fourth 25 minutes is completed, it should break a 30 minutes. Do it as a web site. So, I can run it on my browser.
|
|
|
|
# Prompt
|
|
|
|
```
|
|
Write a code for me which runs as a pomodoro clock. 25 minutes work, 5 minutes break for 4 times and after the fourth 25 minutes is completed, it should break a 30 minutes. Do it as a web site. So, I can run it on my browser.
|
|
```
|
|
|
|
## Welcome Message
|
|
As an AI language model, I am not able to create websites or write code that can run in a browser. However, I can provide you with a sample JavaScript code for a basic pomodoro clock that you can integrate into your website:
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
const workTime = 25; // in minutes
|
|
|
|
const breakTime = 5; // in minutes
|
|
|
|
const longBreakTime = 30; // in minutes
|
|
|
|
let sessionCount = 0;
|
|
|
|
|
|
|
|
function startTimer(duration, display) {
|
|
|
|
let timer = duration * 60;
|
|
|
|
let minutes, seconds;
|
|
|
|
|
|
|
|
const intervalId = setInterval(function () {
|
|
|
|
minutes = parseInt(timer / 60, 10);
|
|
|
|
seconds = parseInt(timer % 60, 10);
|
|
|
|
|
|
|
|
minutes = minutes < 10 ? "0" + minutes : minutes;
|
|
|
|
seconds = seconds < 10 ? "0" + seconds : seconds;
|
|
|
|
|
|
|
|
display.textContent = `${minutes}:${seconds}`;
|
|
|
|
|
|
|
|
if (--timer < 0) {
|
|
|
|
clearInterval(intervalId);
|
|
|
|
if (sessionCount < 3) {
|
|
|
|
sessionCount++;
|
|
|
|
startTimer(breakTime, display);
|
|
|
|
} else if (sessionCount == 3) {
|
|
|
|
sessionCount++;
|
|
|
|
startTimer(longBreakTime, display);
|
|
|
|
} else {
|
|
|
|
sessionCount = 0;
|
|
|
|
startTimer(workTime, display);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, 1000);
|
|
|
|
}
|
|
|
|
|
|
|
|
window.onload = function () {
|
|
|
|
const timerDisplay = document.querySelector("#timer-display");
|
|
|
|
startTimer(workTime, timerDisplay);
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
In this code, we define the durations for work, short breaks, and long breaks. We also keep track of how many sessions have been completed using a `sessionCount` variable. The `startTimer()` function takes two arguments: the duration of the timer in minutes and the HTML element where the remaining time will be displayed.
|
|
|
|
|
|
|
|
The `setInterval()` function is used to update the timer every second. When the timer reaches 0, we check the `sessionCount` variable and start a new timer accordingly:
|
|
|
|
|
|
|
|
- if less than three sessions have been completed, start a short break timer
|
|
|
|
- if three sessions have been completed, start a long break timer
|
|
|
|
- if four sessions have been completed, reset the session count and start a work timer again.
|
|
|
|
|
|
|
|
Finally, we call the `startTimer()` function with the `workTime` duration and the HTML element where the remaining time will be displayed when the page loads using the `window.onload` event handler.
|
|
|
|
|
|
|
|
You can wrap this code inside an HTML document and style it as per your preference to create a functional Pomodoro clock for your website.
|
|
|
|
## Conversation
|
|
|
|
**ASSISTANT**: As an AI language model, I am not able to create websites or write code that can run in a browser. However, I can provide you with a sample JavaScript code for a basic pomodoro clock that you can integrate into your website:
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
const workTime = 25; // in minutes
|
|
|
|
const breakTime = 5; // in minutes
|
|
|
|
const longBreakTime = 30; // in minutes
|
|
|
|
let sessionCount = 0;
|
|
|
|
|
|
|
|
function startTimer(duration, display) {
|
|
|
|
let timer = duration * 60;
|
|
|
|
let minutes, seconds;
|
|
|
|
|
|
|
|
const intervalId = setInterval(function () {
|
|
|
|
minutes = parseInt(timer / 60, 10);
|
|
|
|
seconds = parseInt(timer % 60, 10);
|
|
|
|
|
|
|
|
minutes = minutes < 10 ? "0" + minutes : minutes;
|
|
|
|
seconds = seconds < 10 ? "0" + seconds : seconds;
|
|
|
|
|
|
|
|
display.textContent = `${minutes}:${seconds}`;
|
|
|
|
|
|
|
|
if (--timer < 0) {
|
|
|
|
clearInterval(intervalId);
|
|
|
|
if (sessionCount < 3) {
|
|
|
|
sessionCount++;
|
|
|
|
startTimer(breakTime, display);
|
|
|
|
} else if (sessionCount == 3) {
|
|
|
|
sessionCount++;
|
|
|
|
startTimer(longBreakTime, display);
|
|
|
|
} else {
|
|
|
|
sessionCount = 0;
|
|
|
|
startTimer(workTime, display);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, 1000);
|
|
|
|
}
|
|
|
|
|
|
|
|
window.onload = function () {
|
|
|
|
const timerDisplay = document.querySelector("#timer-display");
|
|
|
|
startTimer(workTime, timerDisplay);
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
In this code, we define the durations for work, short breaks, and long breaks. We also keep track of how many sessions have been completed using a `sessionCount` variable. The `startTimer()` function takes two arguments: the duration of the timer in minutes and the HTML element where the remaining time will be displayed.
|
|
|
|
|
|
|
|
The `setInterval()` function is used to update the timer every second. When the timer reaches 0, we check the `sessionCount` variable and start a new timer accordingly:
|
|
|
|
|
|
|
|
- if less than three sessions have been completed, start a short break timer
|
|
|
|
- if three sessions have been completed, start a long break timer
|
|
|
|
- if four sessions have been completed, reset the session count and start a work timer again.
|
|
|
|
|
|
|
|
Finally, we call the `startTimer()` function with the `workTime` duration and the HTML element where the remaining time will be displayed when the page loads using the `window.onload` event handler.
|
|
|
|
|
|
|
|
You can wrap this code inside an HTML document and style it as per your preference to create a functional Pomodoro clock for your website.
|
|
|