Javascript Digital Clock
Javascript Digital Clock is the best project to do using Javascript. Through this project you will learn to use Date() function and also learn to extract particular hours, minutes, seconds, day from the Date and You will Also Learn to Update it Without Reloading the Page. So it's Best Project for the Beginners.
HTML
<!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>Watch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="day">
<!-- Sunday -->
</div>
<div class="watch">
<div class="date">
<!-- 30 -->
</div>
<div class="time">
<!-- 06:56:45 -->
</div>
<div class="dorn">
<!-- PM -->
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.container{
background-color:#1c1c1e;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family:Lemon Milk;
font-size:2.5rem;
letter-spacing:8px;
cursor: pointer;
}
.container .watch{
width:45%;
display: flex;
align-items: center;
justify-content:space-between;
}
.container .watch .date{
height:100px;
width:100px;
background-color:#28282b;
display: flex;
align-items: center;
justify-content: center;
color:#0c7ff2;
box-shadow: 0 1px 1px rgba(0,0,0,0.25),
0 2px 2px rgba(0,0,0,0.20),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.10),
0 2px 2px rgba(0,0,0,0.05);
}
.container .watch .time{
width:400px;
height:100px;
background-color:#28282b;
display: flex;
align-items: center;
justify-content: center;
color:white;
box-shadow: 0 1px 1px rgba(0,0,0,0.25),
0 2px 2px rgba(0,0,0,0.20),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.10),
0 2px 2px rgba(0,0,0,0.05);
}
.container .watch .dorn{
height:100px;
width:100px;
background-color:#28282b;
display: flex;
align-items: center;
justify-content: center;
color:#0c7ff2;
box-shadow: 0 1px 1px rgba(0,0,0,0.25),
0 2px 2px rgba(0,0,0,0.20),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.10),
0 2px 2px rgba(0,0,0,0.05);
}
.container .day{
width:400px;
height:40px;
background-color:#28282b;
margin-bottom:1%;
display: flex;
justify-content: center;
align-items: center;
font-size:1rem;
color:white;
box-shadow: 0 1px 1px rgba(0,0,0,0.25),
0 2px 2px rgba(0,0,0,0.20),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.10),
0 2px 2px rgba(0,0,0,0.05);
}
JAVASCRIPT
let pdate = document.querySelector('.date');
let ptime = document.querySelector('.time');
let pday = document.querySelector('.day');
let pdorn = document.querySelector('.dorn');
setInterval(() => {
let days =["SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"];
let time=new Date();
let hour=12-time.getHours();
let minutes=time.getMinutes();
let seconds=time.getSeconds();
let date=time.getDate();
let day=days[time.getDay()];
pdate.textContent=date;
pday.textContent=day;
ptime.textContent=Math.abs(hour)+":"+minutes+":"+seconds;
},1000);