Clock using JavaScript

By -
1.HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clock</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=Uchen&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="dates">
<h1>Year :<button id="year"></button> </h1>
<h1>Month :<button id="month"></button></h1>
<h1>Day :<button id="date"></button></h1>
<h1>Hour :<button id="hour"></button> </h1>
<h1>Minute :<button id="minute"></button> </h1>
<h1>Seconds :<button id="second"></button></h1>
</div>
</body>
</html>


2.CSS

                body
{
margin: 0;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
        font-family: 'Uchen', serif;
}
h1
{
display: inline-block;
widows: 100%;
font-size: 18px;
background: #28B463;
border-radius: 3px;
padding: 4px;
text-align: center;
}
button
{
font-size: 18px;
background: none;
outline: none;
border: none;
padding: 10px;
}


3.JavaScript

const d=new Date();
const day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("year").innerHTML=d.getFullYear();
document.getElementById("month").innerHTML=d.getMonth()+1;
document.getElementById("date").innerHTML=d.getDate();
document.getElementById("hour").innerHTML=d.getHours();
document.getElementById("minute").innerHTML=d.getMinutes();
document.getElementById("second").innerHTML=d.getSeconds();
document.getElementById("day").innerHTML=day[d.getDay()]


OUTPUT

Clock using JavaScript


Comments

Post a Comment