⏲️ Estimated reading time: 5 min
🕒 Apple Watch Digital Style Clock Using HTML, CSS & JavaScript
Have you ever wanted to bring the sleek design of the Apple Watch to your website? In this post, I’ll show you how to create a stylish Apple Watch-inspired digital clock using only HTML, CSS, and JavaScript. This custom clock is a great way to add a modern, tech-inspired touch to any webpage or blog.
The design mimics the iconic Apple Watch look: a smooth black background, rounded edges, glowing shadows, and a beautiful digital font. It also includes the current time (which updates every second) and today’s date.
This is perfect for showcasing your front-end coding skills, creating interactive dashboards, or simply adding a unique element to your site. I’ve also included stylish fonts like Audiowide and SF Pro Display to really enhance the Apple-like experience.
🧱 Features:
- Real-time digital clock
- Displays today’s date
- Apple Watch-style UI
- Fully responsive
- Easy to customize
✅ What Works Great:
- Live Time & Date: Smooth real-time updates with
setInterval. - Stylish UI: The dark theme, shadow effects, and modern fonts give it that premium Apple look.
- Responsive Structure: Flexbox keeps it nicely centered on the screen.
💻 How to Use It
If you’re running a WordPress site, you can add this clock using a plugin like WPCode or Shortcoder. Just paste the HTML, CSS, and JavaScript snippet into a custom code block or shortcode, and then embed it in any post or page.
This kind of project is excellent for beginners looking to practice JavaScript or designers who love sleek, minimal UI elements. It’s also a fun way to personalize your site with something interactive.
Feel free to explore and tweak the styles, add analog options, or even integrate weather or step-tracking widgets to make it feel more like a real Apple Watch!
👇 Live Demo!
🕒 Apple Watch Digital Clock
To insert your Apple Watch Clock into a WordPress post, you can’t paste the full <!DOCTYPE html>...</html> structure directly into the post editor. WordPress posts only accept content within the body (HTML body fragments), and JavaScript is sanitized/blocked by default for security.
But no worries here’s how you can do it in a safe and functional way using a shortcode and allowing custom JS/CSS in your post.
✅ Option 1: Use a Plugin (Recommended)
To safely embed HTML, CSS, and JS:
🔧 Step 1: Install Plugin
Install a plugin like “WPCode – Insert Headers and Footers + Custom Code Snippets” or “Shortcoder”.
🔧 Step 2: Create a Custom HTML/JS Snippet
Paste only this part into the shortcode or code block:
<h2 class="watch-title">🕒 Apple Watch Clock</h2>
<div class="watch">
<div class="time" id="time">--:--:--</div>
<div class="date" id="date">Loading...</div>
</div>
<style>
.watch-title {
margin-bottom: 20px;
font-size: 48px;
font-weight: 600;
color: #fff;
text-align: center;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);
font-family: "Audiowide", sans-serif;
}
.watch {
background: #000;
border-radius: 40px;
box-shadow: 0 0 20px rgba(0,0,0,0.7), inset 0 0 15px rgba(255,255,255,0.05);
padding: 40px 30px;
text-align: center;
width: 250px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
margin: 0 auto;
}
.time {
font-size: 48px;
font-weight: bold;
letter-spacing: 2px;
}
.date {
font-size: 18px;
margin-top: 10px;
color: #ccc;
}
body {
font-family: 'SF Pro Display', sans-serif;
}
</style>
<script>
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const dateString = now.toLocaleDateString(undefined, options);
document.getElementById('time').textContent = timeString;
document.getElementById('date').textContent = dateString;
}
setInterval(updateClock, 1000);
updateClock();
</script>Then, insert the shortcode where you want in your post like this:
[shortcode-name]
✅ Option 2: Use HTML Block in Gutenberg (Partial Method)
This works without JavaScript (or limited JS):
- Open your post.
- Add a Custom HTML block.
- Paste the HTML + inline CSS part only (no
<html>,<head>, or<body>tags). - WordPress will strip the
<script>unless you use a plugin.
To include JavaScript:
- Either enqueue it using a plugin (like WPCode or Code Snippets),
- Or embed it from an external JS file hosted on your site.
✅ Fonts Tip:
To load your custom fonts like "Audiowide" or "SF Pro Display":
- Go to Appearance > Customize > Additional CSS and add the
@import:
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=SF+Pro+Display:wght@400;700&display=swap');
🏷️ Tags: html, css, javascript, digital clock, apple watch, web design, front-end project, coding tutorial, live clock, ui design
Only logged-in users can submit reports.
Discover more from HelpZone
Subscribe to get the latest posts sent to your email.
