Skip to content

Commit fffcacd

Browse files
JeconiasJeconias
committed
feat(timer): 🎉 initial commit
0 parents  commit fffcacd

14 files changed

+2227
-0
lines changed

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
dist
3+
4+
.parcel-cache
5+
.DS_Store

‎.prettierrc.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
trailingComma: 'es5',
3+
tabWidth: 2,
4+
semi: true,
5+
singleQuote: true,
6+
jsxSingleQuote: true,
7+
bracketSameLine: true,
8+
vueIndentScriptAndStyle: false,
9+
printWidth: 80,
10+
endOfLine: 'lf',
11+
};

‎.vscode/extensions.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["esbenp.prettier-vscode"]
3+
}

‎.vscode/settings.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"editor.defaultFormatter": "esbenp.prettier-vscode",
3+
"editor.formatOnSave": true,
4+
"eslint.enable": true,
5+
"[typescript]": {
6+
"editor.defaultFormatter": "vscode.typescript-language-features"
7+
}
8+
}

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Timer
2+
3+
[Timer para contagem regressiva de tempo.](https://jeconias.github.io/timer/)

‎css/mixin.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
$speed-animation: (
2+
'fast': 0.1s,
3+
'normal': 0.3s,
4+
'slow': 0.5s,
5+
);
6+
7+
@mixin opacity-animation($property: opacity, $speed: 'normal') {
8+
transition: $property map-get($speed-animation, $speed) or
9+
map-get($speed-animation, 'normal');
10+
}

‎css/timer.scss

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@use './mixin.scss' as *;
2+
3+
$backgroundColor: #2e3440;
4+
$fontColor: #fff;
5+
6+
$transparentColor: rgba(255, 255, 255, 0.1);
7+
8+
* {
9+
font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif;
10+
}
11+
12+
html,
13+
body {
14+
padding: 0;
15+
margin: 0;
16+
}
17+
18+
.main {
19+
position: relative;
20+
display: flex;
21+
flex-direction: column;
22+
height: 100vh;
23+
background-color: $backgroundColor;
24+
25+
ul {
26+
display: flex;
27+
flex-wrap: wrap;
28+
list-style: none;
29+
margin: 0;
30+
padding: 16px;
31+
border-top: 1px solid $transparentColor;
32+
33+
li {
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
flex: 1;
38+
padding: 8px 16px;
39+
margin: 4px;
40+
background-color: $transparentColor;
41+
border-radius: 4px;
42+
cursor: pointer;
43+
44+
@include opacity-animation;
45+
46+
span {
47+
color: $fontColor;
48+
font-size: 2vw;
49+
}
50+
51+
&:hover {
52+
opacity: 0.5;
53+
}
54+
}
55+
}
56+
}
57+
58+
.timer-wrapper {
59+
display: flex;
60+
align-items: center;
61+
justify-content: center;
62+
height: 100%;
63+
64+
span {
65+
text-align: center;
66+
font-size: 17vw;
67+
color: $fontColor;
68+
cursor: pointer;
69+
@include opacity-animation;
70+
71+
&:hover {
72+
opacity: 0.3;
73+
}
74+
}
75+
}
76+
77+
#background-timer {
78+
position: absolute;
79+
top: 0;
80+
right: 0;
81+
left: 0;
82+
bottom: 0;
83+
background-color: $transparentColor;
84+
z-index: 1;
85+
pointer-events: none;
86+
87+
@include opacity-animation(bottom);
88+
}
89+
90+
.gh-link {
91+
position: absolute;
92+
top: 10px;
93+
right: 10px;
94+
width: 30px;
95+
96+
img {
97+
width: 100%;
98+
object-position: center;
99+
}
100+
}

‎icons/github-mark.svg

Lines changed: 1 addition & 0 deletions
Loading

‎index.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta
8+
name="description"
9+
content="Timer Online para contagem regressiva de tempo." />
10+
<meta
11+
name="keywords"
12+
content="Temporizador,Timer,Cronometro Reverso,Tempo" />
13+
<meta name="language" content="pt-br" />
14+
<title>Timer</title>
15+
16+
<link rel="stylesheet" type="text/css" href="./css/timer.scss" />
17+
</head>
18+
<body>
19+
<main id="main" class="main">
20+
<a
21+
class="gh-link"
22+
href="https://github.com/jeconias/timer"
23+
target="_blank">
24+
<img src="./icons/github-mark.svg" />
25+
</a>
26+
<div id="background-timer"></div>
27+
<section class="timer-wrapper">
28+
<span id="timer" title="Clique para pausar/continuar">00:00:00</span>
29+
</section>
30+
<ul id="timers"></ul>
31+
</main>
32+
<script src="./js/timer.js" type="module"></script>
33+
</body>
34+
</html>

‎js/constants.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export const SECOND = 1000;
2+
export const MINUTE = 60 * SECOND;
3+
4+
export const DEFAULT_TIMERS = [
5+
15 * SECOND,
6+
30 * SECOND,
7+
MINUTE,
8+
5 * MINUTE,
9+
10 * MINUTE,
10+
15 * MINUTE,
11+
20 * MINUTE,
12+
30 * MINUTE,
13+
45 * MINUTE,
14+
60 * MINUTE,
15+
];
16+
17+
export const CUSTOM_EVENTS = {
18+
START_TIMER: 'startTimer',
19+
STOP_TIMER: 'click',
20+
};
21+
22+
export const TIME_PROPERTY = 'data-time';
23+
24+
export const CURRENT_TIME_PROPERTY = 'data-current-time';
25+
26+
export const INTERVAL_ID_PROPERTY = 'data-intervalid';

‎js/helpers.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const getDarkColor = () => {
2+
let color = '#';
3+
for (let i = 0; i < 3; i++)
4+
color += (
5+
'0' + Math.floor((Math.random() * Math.pow(16, 2)) / 2).toString(16)
6+
).slice(-2);
7+
return color;
8+
};

0 commit comments

Comments
 (0)