Skip to content

Commit 2db95e3

Browse files
Faniel77Faniel77
committed
JS2- Week2 complete and pomodoro clock
1 parent a131bd6 commit 2db95e3

5 files changed

Lines changed: 198 additions & 27 deletions

File tree

‎Week2/project/index.html‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎Week2/project/index.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎Week2/project/pomodoro.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
3+
body {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
min-height: 100%;
8+
background-color: rgb(31, 85, 92);
9+
color: #ffffff;
10+
font-family: 'Open Sans', sans-serif;
11+
line-height: 1.5;
12+
}
13+
#container {
14+
width: 100%;
15+
}
16+
#content {
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
20+
align-items: center;
21+
}
22+
#header {
23+
display: flex;
24+
flex-direction: column;
25+
align-items: center;
26+
}
27+
#workSession {
28+
margin-top: 0.625rem;
29+
}
30+
#first-table {
31+
border-spacing: 1.9rem;
32+
}
33+
#second-table {
34+
border-spacing: 2.5rem;
35+
}
36+
.counter {
37+
width: 25%;
38+
display: block;
39+
text-align: center;
40+
border-radius: 30px;
41+
border: 5px solid rgb(19, 54, 58);
42+
padding: 0.5rem 2rem;
43+
}
44+
.btn {
45+
cursor: pointer;
46+
white-space: nowrap;
47+
font-size: 1rem;
48+
}
49+
#countdown {
50+
font-family: 'Orbitron', sans-serif;
51+
}

‎Week2/project/pomodoro.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<script src="https://kit.fontawesome.com/818ee812ba.js" crossorigin="anonymous"></script>
6+
<link rel="stylesheet" href="pomodoro.css" />
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<div id="container">
11+
<div id="content">
12+
<div id="header">
13+
<h1 class="first-header">Pomodoro Clock</h1>
14+
<h2 class="sub-header">Session Length</h2>
15+
</div>
16+
<div id="second-container">
17+
<table id="first-table">
18+
<tbody>
19+
<td>
20+
<button id="down" class="btn">
21+
<i class="fas fa-arrow-down"></i>
22+
</button>
23+
</td>
24+
<td><h3 id="workSession">25</h3></td>
25+
<td>
26+
<button id="up" class="btn">
27+
<i class="fas fa-arrow-up"></i>
28+
</button>
29+
</td>
30+
</tbody>
31+
</table>
32+
</div>
33+
<div class="counter">
34+
<h2 class="sub-header">Session</h2>
35+
<h1 id="countdown">25:00</h1>
36+
</div>
37+
<div id="play-pause">
38+
<table id="second-table">
39+
<tbody>
40+
<td>
41+
<button id="play" class="btn">
42+
<i class="fas fa-play"></i>
43+
</button>
44+
</td>
45+
<td>
46+
<button id="stop" class="btn">
47+
<i class="fas fa-stop"></i>
48+
</button>
49+
</td>
50+
</tbody>
51+
</table>
52+
</div>
53+
</div>
54+
</div>
55+
<script src="pomodoro.js"></script>
56+
</body>
57+
</html>

‎Week2/project/pomodoro.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/**
2+
In this week 's project you'll be making a Pomodoro Clock!
3+
A user can specify how many minutes the timer should be set, and with a click on the play button it starts counting down!If the user wants to pause the timer, they can do so by clicking the pause button.
4+
5+
If the timer is running, the user can 't change the session length anymore
6+
Use at least 3 functions
7+
Display minutes and seconds
8+
If the timer finishes the timer should be replaced by the message: Time 's up!
9+
*
10+
*/
11+
'use strict';
12+
const up = document.getElementById('up');
13+
const down = document.getElementById('down');
14+
const play = document.getElementById('play');
15+
const pause = document.getElementById('pause');
16+
const countDown = document.getElementById('countdown');
17+
const workMin = document.getElementById('workSession');
18+
const stop = document.getElementById('stop');
19+
20+
let counter = 0;
21+
let seconds = 0;
22+
let remaining = 0;
23+
let isPaused = true;
24+
25+
// Event Listener for Play and stop buttons
26+
play.addEventListener('click', () => {
27+
clearInterval(counter);
28+
if (isPaused) {
29+
startCountdown();
30+
play.innerHTML = `<i class="fas fa-pause"></i>`;
31+
isPaused = false;
32+
} else {
33+
remaining = seconds;
34+
play.innerHTML = `<i class="fas fa-play"></i>`;
35+
isPaused = true;
36+
}
37+
});
38+
stop.addEventListener('click', () => {
39+
clearInterval(counter);
40+
seconds = workMin.textContent * 60;
41+
counter = 0;
42+
remaining = 0;
43+
isPaused = true;
44+
play.innerHTML = `<i class="fas fa-play"></i>`;
45+
displayTimeLeft(seconds);
46+
});
47+
48+
// Main Functions
49+
50+
function timer() {
51+
seconds--;
52+
if (seconds < 0) {
53+
clearInterval(counter);
54+
seconds = workMin.textContent * 60;
55+
countdown = setInterval(timer, 1000);
56+
return;
57+
}
58+
displayTimeLeft(seconds); // Keep updating display
59+
}
60+
61+
function startCountdown() {
62+
if (remaining != 0) {
63+
seconds = remaining;
64+
} else {
65+
seconds = workMin.textContent * 60;
66+
}
67+
counter = setInterval(timer, 1000);
68+
}
69+
70+
function displayTimeLeft(seconds) {
71+
const minutes = Math.floor(seconds / 60);
72+
const remainderSeconds = seconds % 60;
73+
countDown.textContent = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
74+
}
75+
76+
// update work times
77+
up.addEventListener('click', () => {
78+
let x = parseInt(countDown.textContent);
79+
if (x < 60) {
80+
countDown.textContent = x + 1;
81+
workMin.textContent = countDown.textContent;
82+
}
83+
});
84+
down.addEventListener('click', () => {
85+
let x = parseInt(countDown.textContent);
86+
if (x > 5) {
87+
countDown.textContent = x - 1;
88+
workMin.textContent = countDown.textContent;
89+
}
90+
});

0 commit comments

Comments
 (0)