Digital clock using html css and js
Start code
HTML PROGRAMMING:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Digital Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Display day information e.g Wednesday March 12,2021-->
<div id="dayIntro">
<p id="dayName"></p>
</div>
<div class="container">
<!-- Display time -->
<div class="dispClock">
<div id="time"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS PROGRAMMING:-
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Orbitron');
*{
margin: 0;
padding: 0;
}
html,body{
display: grid;
place-items: center;
}
#dayIntro
{
font-size: 40px;
font-weight: 600;
letter-spacing: 3px;
border: 7px solid rgb(17,129,134);
border-radius: 10px;
margin: 20px;
font-family: 'Times New Roman', Times, serif;
padding: 15px;
background: linear-gradient(180deg, #a8b9d3,rgb(173, 227, 229));
}
.container{
height: 120px;
width: 550px;
position: relative;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
border-radius: 10px;
cursor: default;
}
.container .dispClock,
.container {
position: absolute;
top: 28%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .dispClock{
top: 50%;
height: 105px;
width: 535px;
background: linear-gradient(147deg, #000000 0%, #2c3e50 74%);
border-radius: 6px;
text-align: center;
}
.dispClock #time{
line-height: 85px;
color: #fff;
font-size: 70px;
font-weight: 600;
letter-spacing: 1px;
font-family: 'Orbitron', sans-serif;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
JAVASCRIPT PROGRAMMING:-
setInterval(currentTime, 1000);
function currentTime()
{
let time = new Date(); // creating object of Date class
let dayName=time.getDay();
let month=time.getMonth();
let year=time.getFullYear();
let date=time.getDate();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
var am_pm = "AM";
if(hour==12)
am_pm = "PM";
if (hour > 12) {
hour -= 12;
am_pm = "PM";
}
if (hour == 0) {
hour = 12;
am_pm = "AM";
}
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
//value of current time
let currentTime = hour + ":" + min + ":" + sec +" "+ am_pm;
// value of present day(Day, Month, Year)
var months=["January","February","March","April","May","June","July","August","September","October","November","December"];
var week=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var presentDay=week[dayName]+", "+months[month]+" "+date+", "+year;
const clock = document.getElementById("time");
const dayIntro=document.getElementById("dayName");
clock.innerHTML = currentTime;
dayIntro.innerHTML = presentDay;
}
currentTime(); //calling currentTime() function to initiate the process
--------------------------- THANK YOU --------------------------
OUTPUT:-
Any quarry please contact me
Mobile no:- 8004053680
Email id:- coderkishan0101@gmail.com
No comments:
Post a Comment