How to Create Digital Clock Using HTML,CSS & JavaScript
Welcome To The Codewithrandom Blog. In This Blog, We Learn How To Create Digital Clock Using Html, Css, And Javascript.we use Html Code For Creating The Structure Of The Digital Clock And Then Use Css For Styling the Digital Clock And In Last We Use Javascript To Add Clock(Time Show) Functionality To the Digital Clock
I Hope You Enjoy Our Blog So Let’s Start With A Basic Html Part.
HTML Code For Digital Clock
<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>Javascript Digital Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='clock'>
<p id='time'></pi>
</div>
<span> hover over clock </span>
<script src="app.js"></script>
</body>
</html>
Only HTML Code Output
CSS Code For Digital Clock
*,
*::before,
*::after {
content: "";
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
flex-direction: column;
font-size: 1.3em;
font-weight: bold;
font-family: monospace;
color: white;
background-color: #fff480;
display: flex;
justify-content: center;
align-items: center;
}
span {
color: #262626;
position: absolute;
bottom: 10%;
}
.clock {
height: 60px;
width: 120px;
border: 3px solid black;
border-radius: 2px;
background-color: #b4ffdc;
display: flex;
justify-content: center;
align-items: center;
transform: scale(1.5);
}
.clock:hover {
animation: alarm 0.1s infinite;
}
.clock::before {
height: 30px;
width: 6.6666666667px;
position: absolute;
border-radius: 0 2px 2px 0;
transform: translateX(63.1578947368px);
background-image: repeating-linear-gradient(#595959 0 1%, black 0 1.5%);
}
.clock::after {
height: 4px;
width: 30px;
position: absolute;
background-image: linear-gradient(
to right,
#262626 0 40%,
transparent 0 60%,
#262626 0 100%
);
transform: translateY(-31.914893617px) translateX(-30px);
}
p {
display: flex;
justify-content: center;
align-items: center;
width: 104.347826087px;
border: 5px solid black;
border-radius: 2px;
padding: 5%;
background: linear-gradient(
to right,
transparent 0 64%,
black 0 67%,
transparent 0 100%
),
linear-gradient(#595959 0 50%, #262626 0 100%);
}
p::before {
content: "";
position: absolute;
height: 6.6666666667px;
width: 100px;
background-color: #262626;
transform: translateY(33.3333333333px);
}
@keyframes alarm {
35% {
transform: scale(1.5) rotate(10deg);
}
65% {
transform: scale(1.5) rotate(-10deg);
}
}
50+ Html ,Css & Javascript Projects With Source Code
Only HTML + CSS Code Output Of Digital Clock
JavaScript Code For Digital Clock
const displayTime = () => {
let date = new Date;
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
let amPm = ''
// am pm
hour < 12 ? amPm = 'AM' : amPm = 'PM'
// 12hr clock
if (hour > 12) {
hour -= 12
}
// padding
let padHour = String(hour).padStart(2, '0');
let padMin = String(minute).padStart(2, '0');
// let padSec = String(second).padStart(2, '0');
// display
time.textContent = `${padHour}:${padMin} ${amPm}`;
// update in near real-time
requestAnimationFrame(displayTime);
}
displayTime();
Final output Of Digital Clock Using HTML,CSS & JavaScript
Now that we have completed our Digital Clock. our updated output with Html,Css and JavaScript. I hope you like the Digital Clock. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Portfolio Website using HTML and CSS (Source Code)
Thank you!
This post teaches us How to Create Digital Clock Using HTML,CSS & JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code By – Anna Pawl
