Digital Clock

HTML

<div class="wrapper">

<div onload="showTime" class="clock">

<p id="mytime">12:00:00 AM</p>

<p id="day">MONDAY</p>

</div>

</div>

CSS

body{

background: #000;

}

.wrapper{

display: grid;

width: 380px;

height: 165px;

background: #FEAC5E;

background: -webkit-linear-gradient(to right, #4BC0C8,

#C779D0, #FEAC5E);

background: linear-gradient(to right, #4BC0C8, #C779D0,

#FEAC5E);

justify-content: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border-radius: 15px;

animation: mymove 1s infinite;

}

@keyframes mymove{

100%{

filter: hue-rotate(360deg);

}

}

.clock{

width: 340px;

height: 130px;

display: flex;

background: #000;

color: #fff;

justify-content: center;

align-items: center;

margin-top: auto;

margin-bottom: auto;

border-radius: 15px;

font-family: 'Orbitron', sans-serif;

border: 4px solid #fff;

font-size: 25px;

letter-spacing: 7px;

}

#day{

font-size: 12px;

position: absolute;

top: 65%;

text-shadow: 1px 1px 5px #ffff;

}

#mytime{

text-shadow: 1px 1px 15px #ffff;

}

</style>

JS

<script>

function showTime(){

var date = new Date();

var h = date.getHours();

var m = date.getMinutes();

var s = date.getSeconds();

var session = "AM";

const days =["Sunday","Monday","Tuesday","Wednesday",

"Thursday","Friday","Saturday"];

var day = days[date.getDay()];

if(h == 0){

h = 12;

}

if(h > 12){

h = h - 12;

session = "PM";

}

h = (h < 10) ? "0" + h : h;

m = (m < 10) ? "0" + m : m;

s = (s < 10) ? "0" + s : s;

var time = h + ":" + m + ":" + s + " " + session;

var Days = day;

document.getElementById("mytime").innerHTML = time;

document.getElementById("mytime").textContent = time;

document.getElementById("day").innerHTML = Days;

document.getElementById("day").textContent = Days;

setTimeout(showTime, 1000);

}

showTime();

</script>

Font Link

<link href='https://fonts.googleapis.com/css?family=Orbitron'

rel='stylesheet' type='text/css'>

font-family: 'Orbitron', sans-serif;