Skip to content

Commit fe26efc

Browse files
cheffercheffer
committed
Timer project
0 parents  commit fe26efc

8 files changed

Lines changed: 635 additions & 0 deletions

File tree

‎Timer/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Timer
2+
3+
Stopwatch and timer project to train JavaScript skills
4+
5+
6+
# Description
7+
8+
## Stopwatch
9+
10+
- For the stopwatch, it only has two intuitive buttons.
11+
- When the timer is reset, only the start button is enabled
12+
- When clicking on the start button
13+
- The count starts
14+
- Enabling the reset button to reset the count
15+
- The pause button to pause the count
16+
17+
## Timer
18+
19+
- The timer has the buttons disabled until the user enters a value, whether for hours, minutes or seconds.
20+
- When entering a value, only the start button and the count display are enabled
21+
- As with the stopwatch, when starting the buttons activate the same functions
22+
- Also blocks for user to enter values
23+
- Upon reset, the display is disabled and user inputs are enabled.
24+
- When time runs out, an alarm sounds to warn you.
25+
26+
27+
# Tests
28+
29+
- Tested in three browsers, Chrome, Edge, Firefox
30+
- For Firefox, the styling was a little deformed, but the functionalities were perfect, as well as in the other tested browsers
31+
- The focus wasn't styling with css, but training the functions with JavaScript, so I chose for the moment to leave the styling to Firefox like this
32+
- In future updates I will be fixing Firefox styling
33+
34+
35+
# Languages and others
36+
37+
<p align="left">
38+
<a href="https://www.w3.org/html/" target="_blank" rel="noreferrer">
39+
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/>
40+
</a>
41+
<a href="https://www.w3schools.com/css/" target="_blank" rel="noreferrer">
42+
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/>
43+
</a>
44+
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" rel="noreferrer">
45+
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/>
46+
</a>
47+
<a href="https://git-scm.com/" target="_blank" rel="noreferrer">
48+
<img src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg" alt="git" width="40" height="40"/>
49+
</a>
50+
</p>

‎Timer/css/style.css‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
html, body{
8+
height: 100%;
9+
}
10+
11+
/* General */
12+
13+
body {
14+
background:#2d2d2d;
15+
16+
}
17+
18+
.container{
19+
width: 50%;
20+
max-width: 500px;
21+
margin: 0 auto;
22+
padding-left: 2%;
23+
padding-right: 2%;
24+
}
25+
26+
/* /General */
27+
28+
/* Header */
29+
30+
header {
31+
width: 100%;
32+
}
33+
34+
header .menu{
35+
text-align: center;
36+
height: 90px;
37+
margin-top: 10px;
38+
padding: 10px;
39+
background-color: #464646;
40+
border-radius: 20px;
41+
}
42+
43+
.link_menu{
44+
display: inline-block;
45+
width: 35%;
46+
height: 60px;
47+
text-align: center;
48+
border-right: 2px solid #999999;
49+
border-left: 2px solid #999999;
50+
}
51+
52+
.menu-wraper {
53+
z-index: 888;
54+
padding: 15px 0;
55+
margin: 0 5%;
56+
width: 90%;
57+
height: 100%;
58+
line-height: 30px;
59+
font-size: 0.8vw;
60+
border-radius: 20px;
61+
}
62+
63+
.menu_selected {
64+
background-image: url('../img/luz12.png');
65+
background-repeat: no-repeat;
66+
background-size: 100% 100%;
67+
}
68+
69+
header .menu a{
70+
z-index: 999;
71+
display: block;
72+
width: 100%;
73+
height: 100%;
74+
text-decoration: none;
75+
color: #f0f0f0;
76+
font-size: 2.5em;
77+
}
78+
79+
.menu-wraper:hover{
80+
background-image: url('../img/luz3.png');
81+
background-repeat: no-repeat;
82+
background-size: 100% 100%;
83+
}
84+
85+
header .menu div:first-child{
86+
border-left: 0;
87+
}
88+
89+
header .menu div:last-child{
90+
border-right: 0;
91+
}
92+
93+
/* /Header */
94+
95+
/* Section Timer */
96+
97+
section{
98+
width: 100%;
99+
background-color: #ccc;
100+
border-radius: 35px;
101+
}
102+
103+
section > div{
104+
display: flex;
105+
align-items: center;
106+
justify-content: center;
107+
width: 100%;
108+
margin-top: 25px;
109+
padding: 50px 2%;
110+
}
111+
112+
section #timer{
113+
font-size: 6vw;
114+
color:#343434;
115+
}
116+
117+
section div.timer_box{
118+
height: 30px;
119+
font-size: 3vw;
120+
}
121+
122+
.timer_box p {
123+
font-size: 3vw;
124+
}
125+
126+
.select_time {
127+
border: 0;
128+
border-radius: 10px;
129+
text-align: center;
130+
font-size: 2vw;
131+
background-color: transparent;
132+
}
133+
134+
.select_time:focus {
135+
outline: none;
136+
}
137+
138+
#id_timer_box {
139+
display: none;
140+
}
141+
142+
button {
143+
outline: none;
144+
}
145+
146+
button:focus {
147+
opacity: 1;
148+
}
149+
150+
.btn{
151+
border: 0;
152+
width: 50%;
153+
margin: 0 10px;
154+
height: 35px;
155+
border-radius: 10px;
156+
opacity: 0.7;
157+
}
158+
159+
#btn_reset{
160+
background-color: #464646;
161+
color: #6e6e6e;
162+
cursor: auto;
163+
}
164+
165+
#btn_start{
166+
background-color: #005cc5;
167+
color: #f0f0f0;
168+
cursor: pointer;
169+
}
170+
171+
172+
/* /Section Timer */

‎Timer/img/luz12.png‎

418 KB
Loading

‎Timer/img/luz3.png‎

52.6 KB
Loading

‎Timer/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta >
5+
<title>Stopwatch</title>
6+
7+
<!-- Style -->
8+
<link rel="stylesheet" href="css/style.css">
9+
10+
<!-- Meta tag -->
11+
<meta charset="utf-8">
12+
<meta name="viewport" content="width=device-width, initial-scale=1">
13+
<meta name="author" content="Bruno Cheffer Belinassi">
14+
<meta name="description" content="Timer project to train JavaScript">
15+
<meta name="keywords" content="Cronometro, Temporizador, Timer">
16+
17+
</head>
18+
<body>
19+
<div class="container">
20+
<header>
21+
<div class="menu">
22+
<div class="link_menu">
23+
<div class="menu-wraper menu_selected">
24+
<a href="index.html">Stopwatch</a>
25+
</div> <!-- /menu-weaper -->
26+
</div> <!-- /link_menu -->
27+
<div class="link_menu">
28+
<div class="menu-wraper">
29+
<a href="timer.html">Timer</a>
30+
</div> <!-- /menu-weaper -->
31+
</div> <!-- /link_menu -->
32+
</div> <!-- /menu -->
33+
<section>
34+
<div id="timer">
35+
<p id="minutes">00</p>
36+
<p>:</p>
37+
<p id="seconds">00</p>
38+
<p>:</p>
39+
<p id="m_seconds">00</p>
40+
</div> <!-- /timer -->
41+
<div id="btns">
42+
<button class="btn" id="btn_reset">Reset</button>
43+
<button class="btn" id="btn_start">Start</button>
44+
</div>
45+
</section>
46+
47+
</div> <!-- /container -->
48+
49+
<script src="js/functions.js"></script>
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)