Skip to content

Commit 33924cb

Browse files
mnk17artsmnk17arts
committed
pomodoroClock
1 parent c23f181 commit 33924cb

File tree

3 files changed

+396
-0
lines changed

3 files changed

+396
-0
lines changed

‎PomodoroClock/mnk17arts/index.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!----------------jquery------------------->
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
6+
<!----------------ICONS-------------------->
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
8+
<!---------------PAGE ICON------------------->
9+
<link rel="icon" href="https://assets.codepen.io/5987189/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1617549988&width=80" type="image/png" sizes="16x16">
10+
<title>mnk17arts' Pomodoro Clock</title>
11+
<!---------------EXTERNAL CSS N JS FILES----->
12+
<link rel="stylesheet" href="./styles/index.processed.css" />
13+
<script type="module" src="./scripts/index.js"></script>
14+
<meta name="viewport" content="width=device-width, initial-scale=1">
15+
</head>
16+
<body>
17+
<div id="i-main">
18+
<div id="i-title">
19+
<h1 style="font-family:candara;text-align:center;color:white;" title="mnk17arts' Pomodoro Clock">
20+
<img src="https://user-images.githubusercontent.com/71878747/117575481-a8cba700-b0ff-11eb-988d-0bf5a583ddc2.png"
21+
height=40px width=50px style="background:#fff;border-radius:50%;vertical-align:middle"/>
22+
mnk17arts' Pomodoro Clock</h1>
23+
</div>
24+
<div id='i-app'>
25+
<div id="app-title"><!--@mnk17arts--></div>
26+
<div id="i-screen">
27+
<div id="screen">
28+
<div id="timer-label">Session Time</div>
29+
<div id="time-left">
30+
25:00
31+
</div>
32+
<audio id="beep" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav"></audio>
33+
</div>
34+
<div id="screen-controls">
35+
<div id="stop"></div>
36+
<div id="start_stop" class="">
37+
<i class="fa fa-play" title="play"></i>
38+
<i class="fa fa-pause" title="pause"></i>
39+
</div>
40+
<div id="reset"><i class="fa fa-refresh" title="reset"></i></div>
41+
</div>
42+
</div>
43+
<div id="i-controls">
44+
<div id="i-break">
45+
<div id="break">
46+
<span id="break-decrement" class="fa fa-minus" title="decrease 1 min"></span>
47+
<div id="break-length">5</div>
48+
<span id="break-increment" class="fa fa-plus" title="increase 1 min"></span>
49+
</div>
50+
<div id="break-label"> Break Length</div>
51+
</div>
52+
<div id="i-session">
53+
<div id="session">
54+
<span id="session-decrement" class="fa fa-minus" title="decrease 1 min"></span>
55+
<div id="session-length">25</div>
56+
<span id="session-increment" class="fa fa-plus" title="increase 1 min"></span>
57+
</div>
58+
<div id="session-label"> Session Length</div>
59+
</div>
60+
</div>
61+
</div>
62+
<div id="footer" style="color:white;">made with <span class="fa fa-heart" style="color:#000"></span> by <a href="https://mnk17arts.github.io/">mnk17arts</a></div>
63+
</div>
64+
</body>
65+
</html>

‎PomodoroClock/mnk17arts/scripts/index.js

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
2+
const projectName = "mnk17arts' Pomodoro Clock";
3+
4+
$(document).ready(
5+
function(){
6+
// incre.. decre consts
7+
const brki = $("#break-increment");
8+
const brkd = $("#break-decrement");
9+
const sessi = $("#session-increment");
10+
const sessd = $("#session-decrement");
11+
// start pause reset
12+
const stop = $("#stop");
13+
const start_stop = $("#start_stop");
14+
const reset = $("#reset");
15+
// labels
16+
const timel = $("#timer-label");
17+
// times
18+
const timeleft = $("#time-left");
19+
const brkp = $("#break-length");
20+
const sessp = $("#session-length");
21+
// alarm
22+
const beep =$("#beep")
23+
// time mode
24+
const timeMode = {
25+
SESSION : "Session Time",
26+
BREAK : "Break Time"
27+
}
28+
// operation mode
29+
const opMode = {
30+
INCREMENT: "INCREMENT",
31+
DECREMENT: "DECREMENT"
32+
}
33+
// -------------------
34+
let currentMode = timeMode.SESSION;
35+
let countDownInterval = null;
36+
// -------------------
37+
// control zereos... 1-> 01 10-> 10 0-> 00
38+
const zeroes = (v)=> {
39+
const n = v.toString();
40+
return n.length === 1? `0${n}`: n;
41+
}
42+
// set timer...
43+
const setTimer = (m,s) => {
44+
let min = zeroes(m);
45+
let sec = zeroes(s);
46+
timeleft.text(`${min}:${sec}`);
47+
}
48+
// set lengths..
49+
const setTimeLength = (element, mode) => {
50+
const currentValue = parseInt(element.text());
51+
52+
if (clockStatus()) {
53+
return;
54+
}
55+
56+
if (mode === opMode.INCREMENT && currentValue < 60) {
57+
element.text(currentValue + 1);
58+
} else if (mode === opMode.DECREMENT && currentValue > 1) {
59+
element.text(currentValue - 1);
60+
}
61+
}
62+
// clock status...
63+
const clockStatus = () => {
64+
return start_stop.hasClass("active");
65+
}
66+
// length control...
67+
brki.on('click',()=>{
68+
setTimeLength(brkp,opMode.INCREMENT);
69+
});
70+
brkd.on('click',()=>{
71+
setTimeLength(brkp,opMode.DECREMENT);
72+
});
73+
sessi.on('click',()=>{
74+
setTimeLength(sessp,opMode.INCREMENT);
75+
if (clockStatus()) {
76+
return;
77+
}
78+
setTimer(sessp.text(), 0);
79+
});
80+
sessd.on('click',()=>{
81+
setTimeLength(sessp,opMode.DECREMENT);
82+
if (clockStatus()) {
83+
return;
84+
}
85+
setTimer(sessp.text(), 0);
86+
});
87+
// RESET
88+
reset.on('click',()=>{
89+
if(clockStatus()){
90+
start_stop.removeClass('active');
91+
clearInterval(countDownInterval);
92+
}
93+
beep.trigger('pause');
94+
beep.prop("currentTime",0);
95+
96+
currentMode = timeMode.SESSION;
97+
timel.text(timeMode.SESSION);
98+
brkp.text(5);
99+
sessp.text(25);
100+
setTimer(25,0);
101+
});
102+
// STOP
103+
stop.on('click',()=>{ // stop
104+
if(clockStatus()){
105+
start_stop.removeClass('active');
106+
clearInterval(countDownInterval);
107+
}
108+
beep.trigger('pause');
109+
beep.prop("currentTime",0);
110+
111+
if(currentMode === timeMode.BREAK){
112+
setTimer(brkp.text(),0);
113+
} else {
114+
setTimer(sessp.text(),0);
115+
}
116+
});
117+
// START - PAUSE
118+
start_stop.on('click', ()=>{
119+
if (clockStatus()) {
120+
clearInterval(countDownInterval);
121+
start_stop.removeClass("active");
122+
return;
123+
}
124+
else {
125+
start_stop.addClass("active");
126+
}
127+
128+
countDownInterval = setInterval(() =>
129+
{
130+
const time = timeleft.text().split(":")
131+
let min = parseInt(time[0]);
132+
let sec = parseInt(time[1]);
133+
134+
if (sec === 0) {
135+
if (min === 0 && currentMode === timeMode.BREAK) {
136+
beep.trigger("play");
137+
currentMode = timeMode.SESSION;
138+
timel.text(timeMode.SESSION);
139+
setTimer(sessp.text(), 0);
140+
return
141+
} else if (min === 0 && currentMode === timeMode.SESSION) {
142+
beep.trigger("play");
143+
currentMode = timeMode.BREAK;
144+
timel.text(timeMode.BREAK);
145+
setTimer(brkp.text(), 0);
146+
return
147+
} else {
148+
sec = 59;
149+
min--
150+
}
151+
} else {
152+
sec--;
153+
}
154+
155+
setTimer(min, sec);
156+
}, 1000);
157+
});
158+
// initialize
159+
setTimer(25, 0);
160+
brkp.text('5');
161+
sessp.text('25');
162+
163+
}
164+
);

‎PomodoroClock/mnk17arts/styles/index.processed.css

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
body {
2+
background-image: linear-gradient(45deg, #ff4d4d 90%, #fb0100, #33ff33 10%);
3+
background-repeat: no-repeat;
4+
background-size: cover;
5+
background-color: #ff4d4d;
6+
}
7+
8+
#stop {
9+
width: 20px;
10+
height: 20px;
11+
background-color: #000;
12+
}
13+
14+
#stop:hover {
15+
background-color: #fff;
16+
box-shadow: 5px 5px 3px #000;
17+
cursor: pointer;
18+
}
19+
20+
#footer {
21+
width: 450px;
22+
text-align: center;
23+
display: block;
24+
margin: 15px auto 30px auto;
25+
font-size: 0.8em;
26+
font-family: candara;
27+
}
28+
29+
#footer a {
30+
font-weight: 800;
31+
text-decoration: none;
32+
color: #fff;
33+
}
34+
35+
#footer a:hover {
36+
color: #000;
37+
text-decoration: underline;
38+
}
39+
40+
#i-main {
41+
display: flex;
42+
flex-direction: column;
43+
align-items: center;
44+
justify-content: center;
45+
}
46+
47+
#i-app {
48+
width: 400px;
49+
height: 450px;
50+
cursor: default;
51+
background-image: linear-gradient(45deg, #aaa, #999, #888, #777, #666, #555, #444, #333, #222, #111);
52+
background-color: #999;
53+
border-radius: 9px 100px;
54+
border-top: 10px inset #444;
55+
border-left: 10px inset #777;
56+
display: flex;
57+
flex-direction: column;
58+
align-items: center;
59+
justify-content: center;
60+
}
61+
62+
#i-screen, #i-controls {
63+
border-radius: 5px;
64+
height: 200px;
65+
width: 300px;
66+
margin-top: 2px;
67+
display: flex;
68+
flex-direction: column;
69+
align-items: center;
70+
justify-content: center;
71+
}
72+
73+
#screen {
74+
width: 200px;
75+
height: 120px;
76+
text-align: center;
77+
background-color: #fff;
78+
border-radius: 2px;
79+
border: 4px inset #555;
80+
}
81+
82+
#screen-controls {
83+
width: 250px;
84+
height: 50px;
85+
margin-top: 5px;
86+
font-size: 25px;
87+
display: flex;
88+
justify-content: space-around;
89+
align-items: center;
90+
}
91+
92+
#screen-controls .fa:hover {
93+
transform: scale(1.1);
94+
color: #fff;
95+
text-shadow: 5px 5px 3px #000;
96+
cursor: pointer;
97+
}
98+
99+
#screen-controls .fa-play {
100+
display: block;
101+
}
102+
103+
#screen-controls .fa-pause {
104+
display: none;
105+
}
106+
107+
#screen-controls .active .fa-play {
108+
display: none;
109+
}
110+
111+
#screen-controls .active .fa-pause {
112+
display: block;
113+
}
114+
115+
#timer-label {
116+
font-family: candara;
117+
font-weight: 1000;
118+
font-size: 20px;
119+
color: #f00;
120+
}
121+
122+
#time-left {
123+
font-size: 65px;
124+
font-family: arial;
125+
font-weight: 1000;
126+
}
127+
128+
#i-controls {
129+
display: flex;
130+
flex-direction: row;
131+
justify-content: space-around;
132+
height: 130px;
133+
border-radius: 5px;
134+
width: 300px;
135+
margin-top: 2px;
136+
}
137+
138+
#session, #break {
139+
font-size: 30px;
140+
font-weight: 800;
141+
display: flex;
142+
}
143+
144+
#session .fa, #break .fa {
145+
margin: auto 5px;
146+
}
147+
148+
#session .fa:hover, #break .fa:hover {
149+
transform: scale(1.09);
150+
color: #fff;
151+
text-shadow: 5px 5px 15px #000;
152+
cursor: pointer;
153+
}
154+
155+
#break-label, #session-label {
156+
font-family: candara;
157+
font-weight: 1000;
158+
}
159+
160+
@media screen and (max-width: 480px) {
161+
#i-main {
162+
transform: scale(0.8);
163+
}
164+
body {
165+
background-image: none;
166+
}
167+
}

0 commit comments

Comments
 (0)