PatrickOrg/ULTIMATE-JAVASCRIPT-PROJECT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source 
A simple pomodoro timer using HTML, CSS and JavaScript
This commit is contained in:
Gavindu achintha
2025-02-22 10:32:55 +05:30
committed by GitHub
parent 48f917b33f
commit 7f42cdb0bb
7 changed files with 174 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
Pomodoro Timer/app.js Normal file
View File

@@ -0,0 +1,49 @@
const timer = document.getElementById("timer");
const quote = document.getElementById("quote");
let time = 1500;
let interval = null;
let running = false;
function updateTime(time) {
const minutes = String(Math.floor(time / 60)).padStart(2, "0");
const seconds = String(time % 60).padStart(2, "0");
timer.textContent = `${minutes}:${seconds}`;
}
function pauseTimer() {
if (!running) return;
clearInterval(interval);
running = false;
quote.textContent = "paused";
}
function startTimer() {
if (running) return; //Prevent multiple intervals
running = true;
quote.textContent = "Keep Going !";
interval = setInterval(function () {
if (time > 0) {
time--;
updateTime(time);
} else {
clearInterval(interval);
running = false;
quote.textContent = "Time's Up!";
}
}, 1000);
}
function resetTime() {
clearInterval(interval);
running = false;
time = 1500;
quote.textContent = "Hi !";
updateTime(time);
}
document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("pause").addEventListener("click", pauseTimer);
document.getElementById("reset").addEventListener("click", resetTime);
updateTime(time);

BIN
Pomodoro Timer/assets/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
Pomodoro Timer/assets/pause.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
Pomodoro Timer/assets/play-button-arrowhead.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
Pomodoro Timer/assets/redo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

23
Pomodoro Timer/index.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pomodoro Timer</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="main-container">
<div class="quote" id="quote">Hi</div>
<div class="timer" id="timer">25:00</div>
<div class="buttons">
<button type="submit" class="selector" id="start"><img src="assets/play-button-arrowhead.png" alt="" class="icons"></button>
<button type="submit" class="selector" id="pause"><img src="assets/pause.png" alt=""class="icons"></button>
<button type="submit" class="selector" id="reset"><img src="assets/redo.png" alt=""class="icons"></button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

102
Pomodoro Timer/styles.css Normal file
View File

@@ -0,0 +1,102 @@
@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playwrite+AU+SA:wght@100..400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
justify-content: center;
align-items: center;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Host Grotesk", serif;
overflow: hidden;
background-image: url("assets/background.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
backdrop-filter: blur(10px);
}
.main-container {
display: flex;
margin: 50px;
padding: 20px;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
height: 600px;
width: 1000px;
box-shadow: 5px 5px 5px 1px rgba(29, 28, 28, 0.5);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: none;
border-radius: 20px;
gap: 50px;
}
.timer {
display: flex;
padding: 20px;
flex-direction: column;
align-items: center;
justify-content: center;
height: 150px;
width: 90%;
border-radius: 20px;
font-size: 300px;
color: #fff;
}
.quote {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
width: 90%;
border-radius: 20px;
font-size: 70px;
color: #fff;
}
.selector {
display: flex;
gap: 10px;
outline: none;
cursor: pointer;
justify-content: center;
align-items: center;
}
.buttons {
display: flex;
width: 200px;
justify-content: center;
align-items: center;
gap: 10px;
}
.icons{
width: 15px;
}
button {
width: 50px;
border-radius: 50%;
border: none;
height: 50px;
font-size: 25px;
font-weight: 0;
background-color: rgb(249, 249, 249);
color: white;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
button:hover {
background-color: #c7bdbd;
transform: scale(1.05);
}