How to create Analog watch with wather display?

I am trying to create a analog watch like this and also i need to change the climate icon based

Did you mean to upload some images?

1 Like

I cannot upload the gif

Do you get an error message when trying to upload? Have you tried copying and pasting a screenshot into the orignal post?

1 Like

No error shows, the screen shot contains image, actually mine is gif file

1 Like

I’m browsing using my mobile so there’s no icon to upload

I am using mobile also and still see the same options above. Not sure what else to suggest at this point.

1 Like

i have updated the question

Is this to be used in an FCC project? If so, who one?

As far as the watch itself look, you will have to decide if you are going to use an image that you supply with the icon section whited out or you can try using was to get as close as possible to the look.

As for changing the icon based on time of day, that would be as simple as comparing current time with sunset and sunrise times in the user’s local time zone. You will need to find an AP I for these values.

1 Like

the watch is based on a gif image , it is a sample prioject i have to complete, i can not upload the gif inside this question,

it should reflect the current time , current date and the day as fuel indicator type and a day/night indicator based on the time

So if you must use was, then you find a tutorial on creating circles to create the watch face. This is an involved project from a css perspective. Be prepared to have to learn some new stuff. If you need to get started with the basics of gas, sign up for an account on and start working through thd html and css sections. The sure has a great Intro to JavaScript that would prepare you for the code needed to get the watch functionality working.

Good luck and happy coding!

1 Like

i already created a analog watch but i can not display the day/night indicator

I do not see in your code where you are attempting to add an element representing where the icon would go. Once you figure out how to position that element in the space between the center and the 3 on the clock, then update your code and I can walk you through how you would update it with the correct icon.

i have updated the codepen, i am attempting to change day/night icons based on the time

You have not lined up the red box where it needs to be on the clock, but I guess you will eventually get that worked out. Do you have your algorithm developed for getting the box to update with an icon? I would start with just updating text in the box like DAY or NIGHT and then work on the icons for day and night later.

You will need an API to get the sunrise and sunset for the current day (see a basic one at or research a formula for calculating each.

Once you have an algorithm written out in plain language, then post it here and we can take a look and make sure you are on track.