<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<title>Clock</title>
<link href="https://fonts.googleapis.com/css?family=Chathura&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h1 id="time" class='shadow blur'></h1>
</div>
<script src="script.js"></script>
</body>
</html>
body {
background: url(https://images.unsplash.com/photo-1467857499683-7c766c8c1f15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
background-size: cover;
background-position: center;
font-family: 'Chathura', sans-serif;
}
h1 {
color: #ffc7dd;
font-size: 15em;
text-align: center;
filter: contrast(110%);
filter: brightness(110%);
font-weight: lighter;
}
.shadow {
text-shadow:
-5px -5px 7px pink,
2px 5px 4px #ff579a,
2px 2px 4px white;
}
.flicker {
filter: blur(1px);
color: #4d4d4d;
opacity: .5;
transition: .1s;
}let display = document.querySelector("#time");
//generate time
function getTime() {
let today = new Date();
let hour = today.getHours();
let min = today.getMinutes();
let sec = today.getSeconds();
//add 0 to beginning of sec if < 10
if (sec < 10) {
sec = "0" + sec;
}
//add 0 to beginning of hour if < 10
if (hour < 10) {
hour = '0' + hour;
}
//add 0 to beginning of min if < 10
if (min < 10) {
min = '0' + min;
}
return hour + ":" + min + ":" + sec;
}
//call flicker every 3 seconds
setInterval(function() {
flicker();
}, 3000);
// update time every .5 seconds
window.setInterval(function() {
display.textContent = getTime();
}, 500);
function flicker() {
setInterval(function() {
display.classList.toggle('flicker');
if(display.classList.contains('flicker')) {
display.classList.remove('shadow');
} else {
display.classList.add('shadow');
}
//randomize flicker pattern interval
}, Math.floor(Math.random) * 5 + '000')}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.