├── README.md ├── index.html ├── layout.gif ├── main.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 |
2 |

Relógio digital utilizando javascript.

3 | 4 |
clique aqui
5 | 6 | ![My Image](layout.gif) 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 |
40 |
41 |
42 |
43 |
44 | 45 |
46 | 47 | 48 | 49 |
50 |
51 |
52 | 53 | 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 | } --------------------------------------------------------------------------------