Streaming live at 10am (PST)

How can I add a digital clock to Webflow?

Hello,

I’d like to add something like this to one of my webflow projects:

https://codepen.io/luizdemoraes/pen/eqoRLz?&page=2

It should run in European Timezone CET Berlin and I’d need to be able to style it. The format in the example is exactly what I need.

How would I go about adding something like this?

Thanks a lot in advance.

Best,
Jens


Here is my public share link: LINK
(how to access public share link)

Hi @jensvahle,

You can add codepen concepts into Webflow, just by adding the the components in an HTML embed.

Just look for codepen integration in the forum.

1 Like

Hey @WebDev_Brandon Thanks I’ve tried this, but seem to be doing something wrong.

Could you have a look what is missing?

https://preview.webflow.com/preview/jenss-fresh-project-6fe43f?utm_medium=preview_link&utm_source=dashboard&utm_content=jenss-fresh-project-6fe43f&preview=752a3d21128a4392b64d795df9b63c74&mode=preview

https://jenss-fresh-project-6fe43f.webflow.io/

@jensvahle,

The code looks like it should work, but not sure. I am out of my element when it comes to code (still learning).

@webdev or @rileyrichter do you guys have any thoughts on how to help here?

1 Like

Although it looks you are missing the vue script too.

1 Like

The part where you add Vue is an important step

3 Likes

I have pasted the javascript code into the body custom code area of the page.

You’re actually quite close. In fact, I think your project would work as you desire with one more line of code! You are lacking a CDN reference to Vue JS itself.

Add the following to your custom code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

Alternatively, I’ve got this re-created for you, and you can see how I have it set up here:


EDIT: Whoops! Looks like I typed my response up at the same time as @WebDev_Brandon and @webdev. :rofl:

2 Likes

Yes but you are missing the vue.js library for it to work.

2 Likes

That must be it! Where do I find this?

@jensvahle, @mattvaru has it all ready for you. Just copy the code he provided and reference the link in his post.

@mattvaru @WebDev_Brandon Thanks a lot! :pray:

2 Likes

Let us know if it works for you!

You had to type more. :slight_smile:

2 Likes

It does work. Two questions, why did you paste your code in the head area and where did you find the peace of link that was missing on codepen?

CloudApp

reference!

Wow, I didn’t even know that menu existed in Codepen! Always learning something new in the Forums.

@jensvahle - I saw that there was no reference to Vue.js itself so I just typed in “Vue.js CDN” on Google and got the CDN link from here. But what @WebDev_Brandon did is the smarter and more efficient method of getting that CDN link!

Regarding placement of code… I actually think the correct method for scripts should be in the before </body> tag section (meaning I did it wrong), but I generally put it in the head for some reason. I’m not super well-versed on where it should go though, to be completely honest. Maybe @webdev or Brandon can assist?

The where you place the script would depend on the script dependencies.

All jQuery scripts for example; need to be in the before body close, since Webflow serves jQuery right above that.

2 Likes

Alrite, thanks guys! Learned something today. :slight_smile:

1 Like

One last thing to note: the codepen you referenced does not have any timezone references, meaning that Vue will take the user’s device’s timezone. For me, I’m in CDT and your test website shows me my current time in Oklahoma – 10:27 am. It probably shows Brandon his timezone, and you probably have a different timezone showing yourself.

If you are looking to force a specific timezone for all users, I think you’d have to use something like moment.js to assist with this.

1 Like