From 134e30b776b52d14cc0ae3a9af4fc399dee701cd Mon Sep 17 00:00:00 2001 From: Mariane03 Date: Mon, 23 Jan 2023 22:18:12 -0300 Subject: [PATCH] Relogio HTML --- assets/css/styles.css | 49 +++++++++++++++++++++++++++++++++++++++++++ assets/js/scripts.js | 18 ++++++++++++++++ index.html | 35 +++++++++++++++++++++++++++++++ 3 files changed, 102 insertions(+) create mode 100644 assets/css/styles.css create mode 100644 assets/js/scripts.js create mode 100644 index.html diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..c7c82c8 --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,49 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap'); + +* { + margin: 0; + padding: 0; + font-family: 'Open Sans', sans-serif; +} + +body { + height: 100vh; + background: linear-gradient(150deg, #D99EC9, #F6F0C4); + display: flex; + align-items: center; + justify-content: center; +} + +.relogio { + display: flex; + align-items: center; + justify-content: space-around; + height: 200px; + width: 550px; + background: transparent; + border-radius: 3px; + box-shadow: 0px 8px 10px rgba(0, 0, 0, .5); +} + +.relogio div { + height: 170px; + width: 150px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #D3D3D3; + background: rgb(201, 77, 118); + box-shadow: 5px 5px 15px rgba(0, 0, 0, .7); + border-radius: 7px; + letter-spacing: 3px; +} + +.relogio span { + font-weight: bolder; + font-size: 60px; +} + +.relogio span.tempo { + font-size: 10px; +} \ No newline at end of file diff --git a/assets/js/scripts.js b/assets/js/scripts.js new file mode 100644 index 0000000..a45fb73 --- /dev/null +++ b/assets/js/scripts.js @@ -0,0 +1,18 @@ +const horas = document.getElementById('horas'); +const minutos = document.getElementById('minutos'); +const segundos = document.getElementById('segundos'); + +const relogio = setInterval(function time(){ + let dateToday = new Date(); + let hr = dateToday.getHours(); + let min = dateToday.getMinutes(); + let seg = dateToday.getSeconds(); + + if (hr < 10) hr = '0' + hr; + if (min < 10) hr = '0' + min; + if (seg < 10) hr = '0' + seg; + + horas.textContent = hr; + minutos.textContent = min; + segundos.textContent = seg; +}) \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3aca5ec --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + + + + Relógio Digital + + + +
+ +
+ 00 + Horas +
+ +
+ 00 + Minutos +
+ +
+ 00 + Segundos +
+ +
+ + + + + \ No newline at end of file