Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.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>Digital Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="light" id="clock">
<div class="display">
<div class="days">
<span id="sun">SUN</span>
<span id="mon">MON</span>
<span id="tue">TUE</span>
<span id="wed">WED</span>
<span id="thu">THU</span>
<span id="fri">FRI</span>
<span id="sat">SAT</span>
</div>
<div class="ampm" id="ampm"></div>
<div class="digits">
<div id="hours">00</div>
<div class="dots">:</div>
<div id="minutes">00</div>
<div class="dots">:</div>
<div id="seconds">00</div>
</div>
</div>
</div>
<div class="btn-container"><a class="btn">Switch Theme</a></div>
</div>
<script src="index.js"></script>
</body>
</html>Below is the css code for this video.
style.css
@import url('https://fonts.googleapis.com/css2?family=Sono&display=swap');
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
background: #9bddff;
font-family: 'Sono', sans-serif;
transition: background 0.5s ease;
overflow: hidden;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#clock {
position: relative;
width: 480px;
padding: 45px;
margin: 0 auto 80px;
transition: all 0.5s ease;
}
#clock::after {
content: "";
position: absolute;
left: 50%;
bottom: 1px;
margin-left: -200px;
height: 20px;
width: 400px;
border-radius: 100%;
z-index: -1;
}
#clock.light {
background-color: #dbd7d2;
color: #2c3539;
}
#clock.dark {
background-color: #2c3539;
color: #dbd7d2;
}
#clock.light::after {
box-shadow: 0 5px 10px #00000040;
}
#clock.dark::after {
box-shadow: 0 5px 10px #ffffff40;
}
.display {
position: relative;
height: 54px;
padding: 40px 20px 20px;
border-radius: 8px;
text-align: center;
}
#clock.light .display {
background-color: #ffb6c1;
box-shadow: 0 2px 2px #00000040 inset, 0 2px 2px #ffffff40;
}
#clock.dark .display {
background-color: #a94064;
box-shadow: 0 2px 2px #ffffff40 inset, 0 2px 2px #00000040;
}
.days {
position: absolute;
display: flex;
width: 100%;
top: 10px;
left: 0;
text-align: center;
font-size: 16px;
justify-content: space-around;
}
.days span {
opacity: 0.25;
transform: scale(0.9);
}
.days span.active {
opacity: 1;
transform: scale(1.1);
}
.ampm {
position: absolute;
bottom: 15px;
right: 20px;
font-size: 24px;
}
.digits {
position: absolute;
display: flex;
bottom: 0;
left: 0;
height: 80px;
width: 85%;
font-size: 60px;
justify-content: space-around;
align-items: center;
}
.dots {
animation: blinkingDots 1s ease infinite;
}
@keyframes blinkingDots {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.1;
}
}
.btn-container {
text-align: center;
}
.btn {
display: inline-block;
background-color: #008080;
color: #ffffff;
text-decoration: none;
border: 1px solid #008080;
border-radius: 4px;
box-shadow: 0 0 5px #808080;
padding: 15px 30px;
cursor: pointer;
transition: all 0.5s ease;
}
.btn:hover {
box-shadow: none;
opacity: 0.75;
}Below is the javascript code for this video.
index.js
document.addEventListener("DOMContentLoaded", function () {
const sunday = document.getElementById("sun");
const monday = document.getElementById("mon");
const tuesday = document.getElementById("tue");
const wednesday = document.getElementById("wed");
const thursday = document.getElementById("thu");
const friday = document.getElementById("fri");
const saturday = document.getElementById("sat");
function updateTime() {
const ampm = document.getElementById("ampm");
const currentTime = new Date();
const currentDay = currentTime.getDay();
switch (currentDay) {
case 0: sunday.classList.add("active") && monday.classList.remove("active") && tuesday.classList.remove("active") &&
wednesday.classList.remove("active") && thursday.classList.remove("active") && friday.classList.remove("active") &&
saturday.classList.remove("active"); break;
case 1: sunday.classList.remove("active") && monday.classList.add("active") && tuesday.classList.remove("active") &&
wednesday.classList.remove("active") && thursday.classList.remove("active") && friday.classList.remove("active") &&
saturday.classList.remove("active"); break;
case 2: sunday.classList.remove("active") && monday.classList.remove("active") && tuesday.classList.add("active") &&
wednesday.classList.remove("active") && thursday.classList.remove("active") && friday.classList.remove("active") &&
saturday.classList.remove("active"); break;
case 3: sunday.classList.remove("active") && monday.classList.remove("active") && tuesday.classList.remove("active") &&
wednesday.classList.add("active") && thursday.classList.remove("active") && friday.classList.remove("active") &&
saturday.classList.remove("active"); break;
case 4: sunday.classList.remove("active") && monday.classList.remove("active") && tuesday.classList.remove("active") &&
wednesday.classList.remove("active") && thursday.classList.add("active") && friday.classList.remove("active") &&
saturday.classList.remove("active"); break;
case 5: sunday.classList.remove("active") && monday.classList.remove("active") && tuesday.classList.remove("active") &&
wednesday.classList.remove("active") && thursday.classList.remove("active") && friday.classList.add("active") &&
saturday.classList.remove("active"); break;
case 6: sunday.classList.remove("active") && monday.classList.remove("active") && tuesday.classList.remove("active") &&
wednesday.classList.remove("active") && thursday.classList.remove("active") && friday.classList.remove("active") &&
saturday.classList.add("active"); break;
default: break;
}
var hours = document.getElementById("hours");
const minutes = document.getElementById("minutes");
const seconds = document.getElementById("seconds");
hours.innerHTML = currentTime.getHours() < 10 ? "0" + currentTime.getHours() : currentTime.getHours();
hours = hours % 12;
hours = hours ? hours : 12;
minutes.innerHTML = currentTime.getMinutes() < 10 ? "0" + currentTime.getMinutes() : currentTime.getMinutes();
seconds.innerHTML = currentTime.getSeconds() < 10 ? "0" + currentTime.getSeconds() : currentTime.getSeconds();
ampm.innerHTML = hours >= 12 ? "PM" : "AM";
setTimeout(updateTime, 1000);
}
updateTime();
});
const clock = document.getElementById("clock");
document.querySelector("a.btn").addEventListener("click", function () {
clock.classList.toggle("light");
clock.classList.toggle("dark");
document.body.style.background = clock.classList.contains("light") ? "#9bddff" : "#002147";
});Thanks for visiting