Digital Clock

← Back to Portfolio

Current Time

00:00:00
Loading date...
Timezone: Loading...

This clock shows the current time in your local timezone.

JavaScript Implementation

This is a JavaScript implementation of a digital clock that updates in real-time. In a server environment, this could also be implemented using PHP to display the server's time.

JavaScript Code

// Function to update the clock
function updateClock() {
    const now = new Date();
    
    // Format the time (HH:MM:SS)
    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}`;
    
    // Format the date (Day, Month Date, Year)
    const options = { 
        weekday: 'long', 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric' 
    };
    const dateString = now.toLocaleDateString('en-US', options);
    
    // Get timezone
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    
    // Update the DOM
    document.getElementById('clock').textContent = timeString;
    document.getElementById('date').textContent = dateString;
    document.getElementById('timezone').textContent = `Timezone: ${timezone}`;
}

// Update the clock immediately
updateClock();

// Update the clock every second
setInterval(updateClock, 1000);

PHP Version (For Reference)

<?php
// Set the timezone
date_default_timezone_set('Asia/Kolkata');

// Get the current time
$currentTime = date('H:i:s');

// Get the current date
$currentDate = date('l, F j, Y');

// Get the timezone
$timezone = date_default_timezone_get();

// Display the time and date
echo '<div class="digital-clock">' . $currentTime . '</div>';
echo '<div class="date-display">' . $currentDate . '</div>';
echo '<div class="timezone">Timezone: ' . $timezone . '</div>';
?>