DIGITAL CLOCK SOURCE CODE
DIGITAL CLOCK
click this link to get pdf of source code
<!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">
<title>Document</title>
<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=MedievalSharp&display=swap" rel="stylesheet">
<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=Righteous&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{
margin: 0;padding: 0;
}
body{
height: 100vh;
background-image: linear-gradient(45deg , #342156 , #896787);
}
.main{
height: 45%; width: 80%;
background-color: rgba(255,255,255,0.3);
display: flex;
flex-direction: column;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.squares{
height: 45%;width: 100%;
background-color: transparent;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.rectangles{
height: 55%; width: 100%;
background-color: transparent;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
#hour,#minute,#seconds{
height: 60%;width: 25%;
background-color: rgba(255,255,255,0.32);
display: flex;
justify-content: center;
align-items: center;
font-size: 35px;
font-family: 'MedievalSharp', cursive;
}
#date,#day{
height: 40%; width: 80%;
background-color: rgba(255,255,255,0.32);
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
text-transform: uppercase;
border-radius: 5px;
font-family: 'Righteous', cursive;
}
</style>
</head>
<body>
<div class="main">
<div class="squares">
<div id="hour"></div>
<div id="minute"></div>
<div id="seconds"></div>
</div>
<div class="rectangles">
<div id="day"></div>
<div id="date"></div>
</div>
</div>
<script>
function my(){
var date = new Date();
hour = date.getHours();
minute = date.getMinutes();
seconds = date.getSeconds();
day = date.getDay();
today = date.getDate();
month = date.getMonth();
if (day == 0){
document.getElementById("day").innerHTML = "sunday"
}else if ( day == 1){
document.getElementById("day").innerHTML = "monday"
}else if (day == 2){
document.getElementById("day").innerHTML = "tuesday"
}else if ( day == 3){
document.getElementById("day").innerHTML = "wednesday"
}else if (day == 4){
document.getElementById("day").innerHTML = "thursday"
}else if ( day == 5){
document.getElementById("day").innerHTML = "friday"
}else if (day == 6){
document.getElementById("day").innerHTML = "saturday"
}
if (month == 0) {
document.getElementById("date").innerHTML =
"january" + " " + today;
} else if (month == 1) {
document.getElementById("date").innerHTML =
"february" + " " + today;
} else if (month == 2) {
document.getElementById("date").innerHTML =
"march" + " " + today;
} else if (month == 3) {
document.getElementById("date").innerHTML =
"april" + " " + today;
} else if (month == 4) {
document.getElementById("date").innerHTML =
"may" + " " + today;
} else if (month == 5) {
document.getElementById("date").innerHTML =
"june" + " " + today;
} else if (month == 6) {
document.getElementById("date").innerHTML =
"july" + " " + today;
} else if (month == 7) {
document.getElementById("date").innerHTML =
"august" + " " + today;
} else if (month == 8) {
document.getElementById("date").innerHTML =
"september" + " " + today;
} else if (month == 9) {
document.getElementById("date").innerHTML =
"october" + " " + today;
} else if (month == 10) {
document.getElementById("date").innerHTML =
"november" + " " + today;
} else if (month == 11) {
document.getElementById("date").innerHTML =
"december" + " " + today;
}
if(hour>12){
hour = hour - 12;
}
if(hour<10){
hour = "0" + hour;
}
if(minute<10){
minute = "0" + minute;
}
if(seconds<10){
seconds = "0" + seconds;
}
document.getElementById("hour").innerHTML = hour;
document.getElementById("minute").innerHTML = minute;
document.getElementById("seconds").innerHTML = seconds;
}
setInterval(my ,1000)
</script>
</body>
</html>
please subscribe my youtube channel for more videos
.png)
Comments
Post a Comment