Skip to content
This repository has been archived by the owner on Jun 11, 2021. It is now read-only.

Latest commit

 

History

History
78 lines (55 loc) · 2.66 KB

readme.md

File metadata and controls

78 lines (55 loc) · 2.66 KB
Raw

World Time

A simple world time app built with vanilla JS.

Features

  • Displays current time around the world as analog clocks
  • Multiple clocks possible for that cosmopolitan feel
  • Dynamic search of cities and places
  • AM/PM Indicator, (some) user settings
Planned features / not yet implemented
  • Daylight saving time*
  • Fancy backgrounds according to current time
  • Localstorage

About

This project grew from the idea of experimenting with a simple CSS clock in JavaScript. My aim was to apply what I have learned over the last weeks while deepening my frontend knowledge. For educational purposes I set the rule to not use any external libraries or frameworks.* If you happen to stumble upon this and want to submit a pull request/report issues: Go for it! ☺

Concepts I utilized
  • Basic functional programming
  • ES6 Syntax, array methods
  • Event handling & delegation
  • Fetch API
  • DOM Manipulation with dynamic content
  • SASS/SCSS
  • RWD
  • Basic Git workflow via CLI

*Problems/Issues

I ran into a lot of smaller issues & gnarly feeling workarounds due to the limitations I set for myself when creating this project. However, it wasn't until I tried implementing the DST feature when I realised that it's just not worth the hassle continuing with these limitations. The ideal solution for me is to rewrite most of the code:

  1. Use another timezone.JSON for displaying the data.
  2. Rewrite search & display suggestions functionality.
  3. Rewrite set & make clock functionality while implementing DST, AM/PM & others.
  4. Use Moment.js as working with time objects can be super hard to wrap your head around and very confusing.

Todo

Features

Important
  • Implement daylight savings
  • AM/PM display
  • Settings functionality
Nice to have
  • Add localstorage
  • Smooth loading of clocks
  • Smooth repositioning when terminate clock
  • Make Highlight follow suggestion width
  • Frame mode (clocks fill frame + skip like gallery)
  • Color/gradient styles representing time (radar mode)
  • Hide or sticky menu bar / fullscreen or "zen" mode
  • No double clocks?
  • Limit clock count

Code

Important
  • Fix error when setting backgroundColor on makeClock with mouseevent (Line 277).
  • Utilize new timezones.JSON -> Rewrite search/suggestion functionality
  • Prevent firing highlight too often
Minor
  • Clean up conditionals
  • Console error when searching with empty string
  • Clean up variable & parameter names
  • Return strings from filter / check map functions