Streaming live at 10am (PST)

I want to add a live, digital clock and the date to my site

Hello Webflow People,

Im trying to add a very basic digital clock to my site. I’d also like to add the date, which I assume will be similar code.

This is an example of what I’m looking to achieve.:
https://www.simonmerz.com/

This is my site:
https://phibsboro-press.webflow.io/

I’ve added some custom code and its working well but I’d like to add the date and style the text. Im sure its quite simple but I can’t code and Im surprised I’ve got this far.

Thanks in advance
Eamonn

Here’s some custom code you can embed where you would like to show it.

<div id="clock" class="design-clock"></div>
<script> 
function currentTime() {
  var date = new Date(); /* creating object of Date class */
  var hour = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();
  var day = date.toISOString().split('T')[0];
  hour = updateTime(hour);
  min = updateTime(min);
  sec = updateTime(sec);
  document.getElementById("clock").innerHTML = day + '<br>' + hour + " : " + min + " : " + sec; /* adding time to the div */
    var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
}

function updateTime(k) {
  if (k < 10) {
    return "0" + k;
  }
  else {
    return k;
  }
}

currentTime(); /* calling currentTime() function to initiate the process */

</script>

I hope this helps.

Works like a charm but just to note - everything inside the #clock div will be overwritten.

1 Like

Thanks Eli,

That has added the date but I’d rather it in this format if possible:

Thursday 26th March, 19:45pm

I’d also like to style the text. Can you please advise on this element?

Thanks for your help

Here you go.

<div id="clock" class="design-clock"></div>
<script> 
  window.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        window.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        function nthFormatter(d) {
            if (d > 3 && d < 21) return 'th';
            switch (d % 10) {
                case 1: return "st";
                case 2: return "nd";
                case 3: return "rd";
                default: return "th";
            }
        }
        function currentTime() {
            var date = new Date();
            var hour = date.getHours();
            var min = date.getMinutes();
            if (min < 10)
                min = "0" + min;
            var ampm = hour >= 12 ? 'pm' : 'am';
            var dayOfWeek = window.days[date.getDay()];
            var month = window.months[date.getMonth()];
            var day = date.getDate();
            day += nthFormatter(day);

            document.getElementById("clock").innerText = dayOfWeek + ' ' + day + ' ' + month + ', ' +  hour + ':' + min + ampm;
            /* setting timer to every 15 seconds */
            var t = setTimeout(function () { currentTime() }, 15000); 
        }

        currentTime();
</script>

If you want to design the text, give the html embed a class name design-clock and take it the way you want :slight_smile:

1 Like

To add it would be better to style the parent div (the #clock div) as this would allow to paste a text inside it and actually see how it looks. Also there is no need to mention .design-clock at all in the code and even use this class anywhere, the id is enough :slight_smile:

1 Like

Thats amazing Eli, works perfectly thanks

I think I preferred it with the seconds, would it be too much to ask for some final code in this format:

Thursday 26th March, 19:45:55

Thanks in advance :raised_hands:

I thought in order to style it in Webflow you have to give it a class :thinking:

Yes, but there is no need to use this in the custom code, that is all.

1 Like

You’re absolutely right :slight_smile:

Here you go:

<div id="clock"></div>
<script> 
        window.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        window.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        function nthFormatter(d) {
            if (d > 3 && d < 21) return 'th';
            switch (d % 10) {
                case 1: return "st";
                case 2: return "nd";
                case 3: return "rd";
                default: return "th";
            }
        }
        function currentTime() {
            var date = new Date();
            var hour = date.getHours();
            var min = date.getMinutes();
            if (min < 10)
                min = "0" + min;
            var sec = date.getSeconds();
            if (sec < 10)
                sec = "0" + sec;
            var ampm = hour >= 12 ? 'pm' : 'am';
            var dayOfWeek = window.days[date.getDay()];
            var month = window.months[date.getMonth()];
            var day = date.getDate();
            day += nthFormatter(day);
            document.getElementById("clock").innerText = dayOfWeek + ' ' + day + ' ' + month + ', ' +  hour + ':' + min + ':' + sec + ampm;
            var t = setTimeout(function () { currentTime() }, 1000); 
        }

        currentTime();
</script>

Aaand there is no need to even mention div in that script at all :wink:

So just create regular div inside designer, give it an ID of #clock and inside of that insert the embed with the script (for ease of reusing this particular clock snippet)

Just being pedantic, haha

1 Like

You’re good!
Thank you. :slight_smile:

Thanks Eli, you’re a genius!

1 Like