Build a Stunning Digital Clock Using HTML, CSS & JavaScript | Step-by-Step Tutorial

Показать описание

Welcome to Robota! 🚀

In this fun and engaging tutorial, we'll create a dynamic digital clock using HTML, CSS, and JavaScript. This project is beginner-friendly and perfect for sharpening your web development skills! 🌟

🔍 What You'll Learn:

◽ Building a responsive HTML structure.
◽ Styling with modern CSS techniques (dark theme included!).
◽ Adding interactivity and real-time functionality with JavaScript.
◽ Creating animations for visual flair.

📂 Files We Create:

🔥 Key Features:

◽ Highlights the current day dynamically.
◽ Real-time updates for time and date.
◽ A sleek, professional look with animations and custom fonts.

🎥 Follow along and code with me as we bring this project to life. Let's make coding fun and exciting! 💻

✨ Don't Forget to Like, Share, and Subscribe!
Join the Robota to explore exciting coding tutorials and take your programming skills to the next level! Turn on notifications 🔔 to stay updated on new videos.

✨ Hashtags

#DigitalClock #WebDevelopment #HTML #CSS #JavaScript #vscode #visualstudiocode #CodingForBeginners #Robota

Рекомендации по теме

Комментарии

Hay you all, Find all the source code contained in this video here. 👇

📄 index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="clock">
<div class="weekdays">
<span>SUN</span>
<span>MON</span>
<span>TUE</span>
<span>WED</span>
<span>THU</span>
<span>FRI</span>
<span>SAT</span>
</div>
<div class="timeDisplay">
<span class="format">AM</span>
<div class="time">
<span class="hours">00</span><span class="dot">:</span>
<span class="dot2">:</span>
<span class="seconds">00</span>
</div>
</div>
<div class="dateDisplay">
<span class="date">01 January 2025</span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

📄 style.css

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1e1e1e ;
}

.clock {
width: 80%;
padding: 40px;
background-color:
border: 3px solid #059212;
border-radius: 10px;
}

.clock .weekdays {
font-size: 24px;
color: #3C3D37;
font-weight: 900;
width: 100%;
margin-bottom: 10px;
text-align: center;
font-family: 'Digital-7 Mono';
}

.weekdays span {
padding: 0 10px;
opacity: 0.9;
}

.weekdays span.active {
opacity: 1;
color: #059212;
}

.timeDisplay {
display: flex;
justify-content: center;
color: #059212;
}

.timeDisplay .time {
font-size: 120px;
display: flex;
justify-content: center;
letter-spacing: 3px;
font-family: 'Digital-7 Mono';
}

.timeDisplay .time .seconds {
font-size: 50px;
margin-top: 55px;
}

.timeDisplay .time .dot2 {
font-size: 60px;
margin-top: 50px;
margin-left: 10px;
}

.timeDisplay .format {
font-size: 45px;
margin-top: 12px;
margin-left: 320px;
position: absolute;
font-family: 'Digital-7 Mono';
}

.dateDisplay {
text-align: center;
font-size: 40px;
font-weight: 400;
margin-top: 20px;
color: #059212;
font-family: 'Digital-7 Mono';
}

.time .dot, .time .dot2 {
animation: blinker 1s linear infinite;
}

@keyframes blinker {
25% { opacity: 0; }
}

📄 script.js

function digitalClock() {
let dateFunction = new Date();
let day = dateFunction.getDay();
let hours = dateFunction.getHours();
let minutes = dateFunction.getMinutes();
let seconds = dateFunction.getSeconds();
let timeFormat = 'AM';

timeFormat = hours >= 12 ? 'PM' : 'AM';
hours = hours === 0 ? 12 : hours;
hours = hours > 12 ? hours - 12 : hours;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;

= hours;
= minutes;
= seconds;
= timeFormat;

span').forEach((span) => {

});
let todaysDay = :nth-child(${day + 1})`);

let date = dateFunction.getDate();
let month = dateFunction.toLocaleString('default', { month: 'long' });
let year = dateFunction.getFullYear();
= `${date < 10 ? '0' + date : date} ${month} ${year}`;
}

setInterval(digitalClock, 1000);

code in peace ✌

Robota-org

Build a Stunning Digital Clock Using HTML, CSS & JavaScript | Step-by-Step Tutorial

Build a Stunning Digital Clock Using HTML, CSS & JavaScript | Step-by-Step Tutorial

Build a Stunning Digital Clock in WPF with Material Design Icons and C# | Step-by-Step Tutorial

Build a Stunning Digital Clock in Seconds || Digital Clock

⏰ Digital Clock Animation 2025! 💻✨ | Stunning JS Design in 60 Seconds

Digital Clock with C#: Creating a beautiful digital clock in 5 minutes for Windows applications

Build a Stunning Digital Alarm Clock UI in Flutter| Dribbble-Inspired Tutorial

Build a Digital Clock in 50 Seconds! ⏰✨

I Made a Digital Clock Using Only HTML & CSS

Learn to Code a Digital Clock in C++ | Easy Beginner C++ Project | Programming Tutorial

How To Create Digital Clock Using HTML CSS & JavaScript | Display Time Using JavaScript

digital clock | beautiful clock collection | small clock | clock collection #digitalclock

Amazing Working Analog and Digital Clock Design using Html CSS & Javascript

Create a Beautiful Digital Clock with HTML, CSS & JavaScript | Step-by-Step Tutorial ⏰

Create a STUNNING Digital Clock with HTML CSS & JavaScript

How to Create Working Digital Clock in Html CSS & Javascript

How To Make A Digital Clock Using Html & Css

How to create a digital clock with HTML & Javascript

Create a Stunning Digital Clock with Date and Time Using HTML, CSS, JavaScript | Beginner-Friendly!

Create a Stunning Digital & Analog Clock with Stopwatch in JavaScript!

Friday Project: Set up my digital alarm clock! ✨ #shorts #shortsvideo #digitalclock #amazonfinds

--Create a Stunning Digital Clock Using HTML,CSS and JavaScript--

Working Analog and Digital Clock using Html CSS & Javascript

Create a Stunning Digital Clock Using HTML, CSS & JavaScript | Full Tutorial ⏰

Building Simple Digital Clock using HTML CSS & JavaScript