Amazing Design Digital Clock JavaScript
This amazing design digital clock uses HTML, CSS and JavaScript to create a beautiful, modern clock. It's easy to customize and can be used in any web project.
If you're looking for a beautiful, modern digital clock to use in your web projects, then this is the clock for you! It's simple to customize and easy to use, so you'll be able to create beautiful, modern clocks quickly and easily!
By the end of this article, you'll be able to create a digital clock using HTML, CSS and JavaScript!
Watch the Tutorial on Youtube
https://youtu.be/fB1hNMdS1e4
Live Preview.!
12
00
00
HTML Code
<div class="digital-clock">
<div class="clock-block">
<div></div>
<div></div>
<div></div>
<div></div>
<span class="hour">12</span>
<div></div>
</div>
<div class="clock-block">
<div></div>
<div></div>
<div></div>
<div></div>
<span class="minut">30</span>
<div></div>
</div>
<div class="clock-block">
<div></div>
<div></div>
<div></div>
<div></div>
<span class="second">45</span>
<div></div>
</div>
</div>
<div class="seprator"></div>
<div class="digital-clock shadow"></div>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Black Ops One', cursive;
}
body{
width: 100%;
height: 100vh;
background: linear-gradient(to top, #000000 40%, rgba(0,0,0,0.2) 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
}
.digital-clock{
display: flex;
gap: 5px;
}
.clock-block{
width: 200px;
height: 150px;
position: relative;
perspective: 400px;
transform-style: preserve-3d;
}
.clock-block span{
font-size: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
}
.clock-block:nth-child(1){
background: radial-gradient(crimson 20%, #343A40);
}
.clock-block:nth-child(2){
background: radial-gradient(chocolate 20%, #343A40);
}
.clock-block:nth-child(3){
background: radial-gradient(teal 20%, #343A40);
}
.clock-block span.hour{
color: #ff607e;
}
.clock-block span.minut{
color: #ff9c56;
}
.clock-block span.second{
color: #00bbbb;
}
.clock-block div:nth-child(1){
width: 100%;
border-top: 10px solid #343A40;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: 0;
left: 0;
}
.clock-block div:nth-child(1):after{
content: '';
width: calc(100% - 12px);
border-top: 6px solid #212529;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position: absolute;
top: 0;
left: 0;
}
.clock-block div:nth-child(2){
width: 100%;
border-bottom: 10px solid #343A40;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
bottom: 0;
left: 0;
}
.clock-block div:nth-child(2):after{
content: '';
width: calc(100% - 12px);
border-bottom: 6px solid #212529;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position: absolute;
bottom: 0;
left: 0;
}
.clock-block div:nth-child(3){
height: 100%;
border-top: 10px solid transparent;
border-left: 10px solid #212529;
border-bottom: 10px solid transparent;
position: absolute;
top: 0;
left: 0;
}
.clock-block div:nth-child(3):after{
content: '';
height: calc(100% - 12px);
border-top: 6px solid transparent;
border-left: 6px solid #343A40;
border-bottom: 6px solid transparent;
position: absolute;
top: 0;
left: 0;
}
.clock-block div:nth-child(4){
height: 100%;
border-top: 10px solid transparent;
border-right: 10px solid #212529;
border-bottom: 10px solid transparent;
position: absolute;
top: 0;
right: 0;
}
.clock-block div:nth-child(4):after{
content: '';
height: calc(100% - 12px);
border-top: 6px solid transparent;
border-right: 6px solid #343A40;
border-bottom: 6px solid transparent;
position: absolute;
top: 0;
right: 0;
}
.clock-block div:nth-child(6){
width: calc(100% - 32px);
height: calc(100% - 32px);
background: radial-gradient(rgba(248, 249, 250, 0.1) 65%, rgba(248, 249, 250, 0.1));
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 5;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.8),
inset 8px 0 20px rgba(248, 249, 250, 0.1),
inset -8px 0 20px rgba(248, 249, 250, 0.1),
inset 0 8px 20px rgba(248, 249, 250, 0.1),
inset 0 -8px 20px rgba(248, 249, 250, 0.1);
}
.clock-block div:nth-child(6):after{
content: '';
width: 100%;
height: 150px;
background-color: rgba(255,255,255,0.050);
position: absolute;
top: -15%;
left: 50%;
transform: translate(-50%,-50%) skewY(35deg);
}
.seprator{
width: 100%;
height: 50vh;
background: linear-gradient(to top, rgba(0,0,0,1) 65%, rgba(0,0,0,0.7));
position: absolute;
top: 50%;
left: 0;
z-index: 5;
}
.digital-clock.shadow{
transform: rotateX(180deg);
}
JavaScript Code
const digitalClock = document.querySelector('.digital-clock');
const digitalClockShadow = document.querySelector('.digital-clock.shadow');
const hour = document.querySelector('.hour');
const minut = document.querySelector('.minut');
const second = document.querySelector('.second');
function setDate(){
let date= new Date();
hour.innerHTML = date.getHours();
minut.innerHTML = date.getMinutes();
second.innerHTML = date.getSeconds();
}
setInterval(()=>{
setDate();
digitalClockShadow.innerHTML = digitalClock.innerHTML;
},1000)
0 Comments