TextClock

Description of TextClock

The Daft Logic Text Clock is an innovative digital clock that displays the current time using full sentences rather than numerical digits. Instead of showing "10:45", for example, it might say, "It is a quarter to eleven." The clock updates in real-time, ensuring an accurate and readable representation of the time. This format makes it both a functional timepiece and a visually engaging way to tell time.

Designed for simplicity and accessibility, the Text Clock can be an interesting alternative to traditional digital or analog clocks. It's particularly useful for those who prefer reading time in a more natural, conversational way. The interface is clean, with a minimalist aesthetic that enhances readability.

Whether used as a learning tool, a fun novelty, or a stylish desktop feature, the Daft Logic Text Clock offers a unique and modern way to interact with time.

Example

Code for TextClock

Include the following JavaScript code on the page:

    function clockTick() {
        const months = [
            "January", "February", "March", "April", "May", "June", "July", 
            "August", "September", "October", "November", "December"
        ];

        const digital = new Date();
        let hours = digital.getHours();
        const minutes = digital.getMinutes().toString().padStart(2, '0');
        const seconds = digital.getSeconds().toString().padStart(2, '0');
        const da = digital.getDate();
        const mo = months[digital.getMonth()];
        const ye = digital.getFullYear();
    
        const amOrPm = hours >= 12 ? "PM" : "AM";
        hours = hours % 12 || 12; // Convert 24-hour to 12-hour format
    
        const dispTime = `${da} ${mo} ${ye} @ ${hours}:${minutes}:${seconds} ${amOrPm}`;

        const clockElement = document.getElementById("clockid");
        if (clockElement) {
            clockElement.innerHTML = dispTime;
            setTimeout(clockTick, 1000);
        }
    }

    document.addEventListener("DOMContentLoaded", () => {
        console.log("ready!");
        clockTick();
    });
    

Call the clockTick() function on the page load event (or $(document).ready event in jQuery).

Ensure you have an element with an ID of clockid to display the clock.

Version History