Changing UTC time display

This project will involve a website that displays the time in a different timezone around the world, changing every few seconds and displaying the selected portion on the map.

Comment

Inspiration

The inspiration for this project is a google chrome extension called Momentum which I remembered of when thinking about this hackathon. The extension displayed beautiful places around the world, however all other details were of the native environment of the user and I wanted to make something that contrasted that and instead would display the time and information of other areas.

What it does

The website displays the current time of different timezones along with specifying the timezone that is selected and highlighting a portion on the map. Due to the complexity of the timezone sizes in the world and many countries having varying timezones, I was unable to further develop this idea before submission but I do intend to work on it following this hackathon.

How we built it

This website was built by first defining HTML elements and creating the basic logic for the time changing in JavaScript. This was followed by working on CSS to allow for a portion of the map to be displayed which took a large portion of the development time.

Challenges we ran into

I intended to have the map change by working with the CSS 'clip' style element and use JavaScript to change it within the code, however, I later found out that clip had been deprecated for JavaScript to allow for the 'clip-path' element to be used. It took a while to figure out how to best implement this but I was able to after some time.

Accomplishments that we're proud of

I'm proud of the changing map area and I definitely think I can accurately map timezones with a lot of work due to the flexibility of the clip-path element.

What we learned

I was new to JavaScript coming into this project and had only used HTML and CSS to learn how to design and create a website to host on Github so I was able to learn the syntax and usage of JS throughout the course of this project.

What's next for Changing UTC time display

I intend to learn how to allocate different cities to timezones without doing so manually to allow for the website to be self-dependent and display details of every city in the world.

Built With

Share this project:

Updates