98 lines
2.3 KiB
HTML
98 lines
2.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet">
|
||
|
|
|
||
|
|
<title>Clock</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body, html {
|
||
|
|
font-family: 'Fira Code', monospace;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
background-color: #121869;
|
||
|
|
color: white;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
.clock {
|
||
|
|
display: none;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
top: -4em;
|
||
|
|
}
|
||
|
|
.time {
|
||
|
|
display: flex;
|
||
|
|
font-size: 500%;
|
||
|
|
}
|
||
|
|
.date {
|
||
|
|
font-size: 200%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
margin-top: 1em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="clock" class="clock">
|
||
|
|
<div class="time">
|
||
|
|
<div id="hours"></div>
|
||
|
|
<div class="sep">:</div>
|
||
|
|
<div id="minutes"></div>
|
||
|
|
<div class="sep">:</div>
|
||
|
|
<div id="seconds"></div>
|
||
|
|
</div>
|
||
|
|
<div class="date">
|
||
|
|
<div id="date-formated"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="actions">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const hours = document.getElementById('hours')
|
||
|
|
const minutes = document.getElementById('minutes')
|
||
|
|
const seconds = document.getElementById('seconds')
|
||
|
|
const dateFormated = document.getElementById('date-formated')
|
||
|
|
const clock = document.getElementById('clock')
|
||
|
|
|
||
|
|
let addPaddings = val => {
|
||
|
|
let str = val.toString()
|
||
|
|
if (str.length === 1) {
|
||
|
|
return '0' + str
|
||
|
|
}
|
||
|
|
return str
|
||
|
|
}
|
||
|
|
|
||
|
|
let tick = () => {
|
||
|
|
clock.style.display = 'flex'
|
||
|
|
|
||
|
|
let date = new Date()
|
||
|
|
hours.innerHTML = addPaddings(date.getHours())
|
||
|
|
minutes.innerHTML = addPaddings(date.getMinutes())
|
||
|
|
seconds.innerHTML = addPaddings(date.getSeconds())
|
||
|
|
|
||
|
|
dateFormated.innerHTML = (new Date()).toLocaleString('en', {year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'})
|
||
|
|
}
|
||
|
|
tick()
|
||
|
|
|
||
|
|
setInterval(() => {
|
||
|
|
tick()
|
||
|
|
}, 1000)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|