├── README.md
├── index.html
├── layout.gif
├── main.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 |
2 | Relógio digital utilizando javascript.
3 |
4 |
5 |
6 | 
7 |
8 |
9 | By João Vitor Mendes
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Relógio / UI
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
João vitor Mendes
54 |
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/layout.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jvmendes021/RelogioUIDigital/87d1cbfdaf99f6555adf684fdc169d687b42773f/layout.gif
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | /*==================== Relogio ====================*/
2 | const hour = document.getElementById('clock-hour'),
3 | minutes = document.getElementById('clock-minutes'),
4 | seconds = document.getElementById('clock-seconds')
5 |
6 | const clock = () =>{
7 | let date = new Date()
8 |
9 | let hh = date.getHours() * 30,
10 | mm = date.getMinutes() * 6,
11 | ss = date.getSeconds() * 6
12 |
13 |
14 | hour.style.transform = `rotateZ(${hh + mm / 12}deg)`
15 | minutes.style.transform = `rotateZ(${mm}deg)`
16 | seconds.style.transform = `rotateZ(${ss}deg)`
17 | }
18 | setInterval(clock, 1000) // 1000 = 1s
19 |
20 |
21 | const textHour = document.getElementById('text-hour'),
22 | textMinutes = document.getElementById('text-minutes'),
23 | textAmPm = document.getElementById('text-ampm'),
24 |
25 | dateDay = document.getElementById('date-day'),
26 | dateMonth = document.getElementById('date-month'),
27 | dateYear = document.getElementById('date-year')
28 |
29 | const clockText = () =>{
30 | let date = new Date()
31 |
32 | let hh = date.getHours(),
33 | ampm,
34 | mm = date.getMinutes(),
35 | day = date.getDate(),
36 |
37 | month = date.getMonth(),
38 | year = date.getFullYear()
39 |
40 | if(hh >= 12){
41 | hh = hh - 12
42 | ampm = 'PM'
43 | }else{
44 | ampm = 'AM'
45 | }
46 |
47 |
48 | if(hh == 0){hh = 12}
49 |
50 |
51 | if(hh < 10){hh = `0${hh}`}
52 |
53 |
54 | textHour.innerHTML = `${hh}:`
55 |
56 |
57 | if(mm < 10){mm = `0${mm}`}
58 |
59 |
60 | textMinutes.innerHTML = mm
61 |
62 |
63 | textAmPm.innerHTML = ampm
64 |
65 |
66 |
67 |
68 | let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
69 |
70 |
71 | dateDay.innerHTML = day
72 |
73 | dateMonth.innerHTML = `${months[month]},`
74 | dateYear.innerHTML = year
75 | }
76 | setInterval(clockText, 1000) // 1000 = 1s
77 |
78 |
79 | const themeButton = document.getElementById('theme-button')
80 | const darkTheme = 'dark-theme'
81 | const iconTheme = 'bxs-sun'
82 |
83 |
84 | const selectedTheme = localStorage.getItem('selected-theme')
85 | const selectedIcon = localStorage.getItem('selected-icon')
86 |
87 |
88 | const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
89 | const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bxs-moon' : 'bxs-sun'
90 |
91 |
92 | if (selectedTheme) {
93 |
94 | document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
95 | themeButton.classList[selectedIcon === 'bxs-moon' ? 'add' : 'remove'](iconTheme)
96 | }
97 |
98 | themeButton.addEventListener('click', () => {
99 |
100 | document.body.classList.toggle(darkTheme)
101 | themeButton.classList.toggle(iconTheme)
102 |
103 | localStorage.setItem('selected-theme', getCurrentTheme())
104 | localStorage.setItem('selected-icon', getCurrentIcon())
105 | })
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /*=============== GOOGLE FONTS ===============*/
2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
3 |
4 | :root {
5 |
6 | --hue-color: 240;
7 |
8 | --first-color: hsl(var(--hue-color), 53%, 49%);
9 | --title-color: hsl(var(--hue-color), 53%, 15%);
10 | --text-color: hsl(var(--hue-color), 12%, 35%);
11 | --text-color-light: hsl(var(--hue-color), 12%, 65%);
12 | --white-color: #FFF;
13 | --body-color: hsl(var(--hue-color), 24%, 94%);
14 |
15 |
16 | --body-font: 'Poppins', sans-serif;
17 | --biggest-font-size: 3rem;
18 | --small-font-size: .813rem;
19 | --smaller-font-size: .75rem;
20 | --tiny-font-size: .625rem;
21 |
22 | --font-medium: 500;
23 |
24 |
25 | --mb-0-25: .25rem;
26 | --mb-1: 1rem;
27 | --mb-1-5: 1.5rem;
28 | --mb-2-5: 2.5rem;
29 |
30 |
31 | --z-normal: 1;
32 | --z-tooltip: 10;
33 | }
34 |
35 | @media screen and (min-width: 968px) {
36 | :root {
37 | --biggest-font-size: 3.5rem;
38 | --small-font-size: .875rem;
39 | --smaller-font-size: .813rem;
40 | --tiny-font-size: .75rem;
41 | }
42 | }
43 |
44 | body.dark-theme {
45 | --title-color: hsl(var(--hue-color), 12%, 95%);
46 | --text-color: hsl(var(--hue-color), 12%, 75%);
47 | --body-color: hsl(var(--hue-color), 10%, 16%);
48 | }
49 |
50 | .clock__theme {
51 | position: absolute;
52 | top: -1rem;
53 | right: -1rem;
54 | display: flex;
55 | padding: .25rem;
56 | border-radius: 50%;
57 | box-shadow: inset -1px -1px 1px hsla(var(--hue-color), 0%, 100%, 1),
58 | inset 1px 1px 1px hsla(var(--hue-color), 30%, 86%, 1);
59 | color: var(--first-color);
60 | cursor: pointer;
61 | }
62 |
63 | .dark-theme .clock__circle {
64 | box-shadow: 6px 6px 16px hsla(var(--hue-color), 8%, 12%, 1),
65 | -6px -6px 16px hsla(var(--hue-color), 8%, 20%, 1),
66 | inset -6px -6px 16px hsla(var(--hue-color), 8%, 20%, 1),
67 | inset 6px 6px 12px hsla(var(--hue-color), 8%, 12%, 1);
68 | }
69 |
70 | .dark-theme .clock__theme {
71 | box-shadow: inset -1px -1px 1px hsla(var(--hue-color), 8%, 20%, 1),
72 | inset 1px 1px 1px hsla(var(--hue-color), 8%, 12%, 1);
73 | }
74 |
75 | /*=============== BASE ===============*/
76 | * {
77 | box-sizing: border-box;
78 | padding: 0;
79 | margin: 0;
80 | }
81 |
82 | body {
83 | margin: 0;
84 | font-family: var(--body-font);
85 | background-color: var(--body-color);
86 | color: var(--text-color);
87 | }
88 |
89 | a {
90 | text-decoration: none;
91 | }
92 |
93 | .container {
94 | max-width: 968px;
95 | margin-left: var(--mb-1);
96 | margin-right: var(--mb-1);
97 | }
98 |
99 | .grid {
100 | display: grid;
101 | }
102 |
103 | .clock__container {
104 | height: 100vh;
105 | grid-template-rows: 1fr max-content;
106 | }
107 |
108 | .clock__circle {
109 | position: relative;
110 | width: 200px;
111 | height: 200px;
112 | box-shadow: -6px -6px 16px var(--white-color),
113 | 6px 6px 16px hsla(var(--hue-color), 30%, 86%, 1),
114 | inset 6px 6px 16px hsla(var(--hue-color), 30%, 86%, 1),
115 | inset -6px -6px 16px var(--white-color);
116 | border-radius: 50%;
117 | justify-self: center;
118 | display: flex;
119 | justify-content: center;
120 | align-items: center;
121 | }
122 |
123 | .clock__content {
124 | align-self: center;
125 | row-gap: 3.5rem;
126 | }
127 |
128 | .clock__twelve,
129 | .clock__three,
130 | .clock__six,
131 | .clock__nine {
132 | position: absolute;
133 | width: 1rem;
134 | height: 1px;
135 | background-color: var(--text-color-light);
136 | }
137 |
138 | .clock__twelve,
139 | .clock__six {
140 | transform: translateX(-50%) rotate(90deg);
141 | }
142 |
143 | .clock__twelve {
144 | top: 1.25rem;
145 | left: 50%;
146 | }
147 |
148 | .clock__three {
149 | top: 50%;
150 | right: .75rem;
151 | }
152 |
153 | .clock__six {
154 | bottom: 1.25rem;
155 | left: 50%;
156 | }
157 |
158 | .clock__nine {
159 | left: .75rem;
160 | top: 50%;
161 | }
162 |
163 | .clock__rounder {
164 | width: .75rem;
165 | height: .75rem;
166 | background-color: var(--first-color);
167 | border-radius: 50%;
168 | border: 2px solid var(--body-color);
169 | z-index: var(--z-tooltip);
170 | }
171 |
172 | .clock__hour,
173 | .clock__minutes,
174 | .clock__seconds {
175 | position: absolute;
176 | display: flex;
177 | justify-content: center;
178 | }
179 |
180 | .clock__hour {
181 | width: 105px;
182 | height: 105px;
183 | }
184 |
185 | .clock__hour::before {
186 | content: '';
187 | position: absolute;
188 | background-color: var(--text-color);
189 | width: .25rem;
190 | height: 3rem;
191 | border-radius: .75rem;
192 | z-index: var(--z-normal);
193 | }
194 |
195 | .clock__minutes {
196 | width: 136px;
197 | height: 136px;
198 | }
199 |
200 | .clock__minutes::before {
201 | content: '';
202 | position: absolute;
203 | background-color: var(--text-color);
204 | width: .25rem;
205 | height: 4rem;
206 | border-radius: .75rem;
207 | z-index: var(--z-normal);
208 | }
209 |
210 | .clock__seconds {
211 | width: 130px;
212 | height: 130px;
213 | }
214 |
215 | .clock__seconds::before {
216 | content: '';
217 | position: absolute;
218 | background-color: var(--first-color);
219 | width: .125rem;
220 | height: 5rem;
221 | border-radius: .75rem;
222 | z-index: var(--z-normal);
223 | }
224 |
225 | .clock__logo {
226 | width: max-content;
227 | justify-self: center;
228 | margin-bottom: var(--mb-2-5);
229 | font-size: var(--smaller-font-size);
230 | font-weight: var(--font-medium);
231 | color: var(--text-color-light);
232 | transition: .3s;
233 | }
234 |
235 | .clock__logo:hover {
236 | color: var(--first-color);
237 | }
238 |
239 | .clock__text {
240 | display: flex;
241 | justify-content: center;
242 | }
243 |
244 | .clock__text-hour,
245 | .clock__text-minutes {
246 | font-size: var(--biggest-font-size);
247 | font-weight: var(--font-medium);
248 | color: var(--title-color);
249 | }
250 |
251 | .clock__text-ampm {
252 | font-size: var(--tiny-font-size);
253 | color: var(--title-color);
254 | font-weight: var(--font-medium);
255 | margin-left: var(--mb-0-25);
256 | }
257 |
258 | .clock__date {
259 | text-align: center;
260 | font-size: var(--small-font-size);
261 | font-weight: var(--font-medium);
262 | }
263 |
264 | @media screen and (min-width: 968px) {
265 | .container {
266 | margin-left: auto;
267 | margin-right: auto;
268 | }
269 | .clock__logo {
270 | margin-bottom: 3rem;
271 | }
272 | }
--------------------------------------------------------------------------------