Skip to content

abdulrahmanhatem/wall-clock

Repository files navigation

Wall Clock

Wall Clock is a live Clock frontend interface.

Live Link

Clock Live Wall Clock

Description

Welcome abroad fellow developer, here you will find the details of my wall clock project story.

Motivation Motivation

When I saw this beautiful minimalist clock design , I encouraged myself to implement it with HTML, CSS and Javascript.

The Inspiring Design The result would be something like
Model Before Model After

What are the technologies you will use ?

HTML HTMLCSS CSSJavascript Javascript

Why wall clock project ?

To improve developer's skills in writing scripts and enhance CSS skills for better UI

What problem does clock project solve?

It provides a nice looking design for a live real time clock.

What did you learn?

As a frontend developer I put my HTML, CSS and Javascript skills in practice and learn new things about client built-in internationalization date time format and zone apis.

Features Features

  • Showing user real time within one's zone.
  • Showing user visiting from city.
  • Showing user real day date and day name.
  • Simulate a real life clock movement mechanism.
  • Simulating a real life clock tick sound.
  • Simulating a real life clock mignight 12 a.m. Sound.
  • Giving user option to turn on/off sound.
  • Great Responsive design for all devices.
  • Static asset cache via service workers which means less http requess and less loading cost.

Progressive Web App Progressive Web Application Feature

Wall Clock is PWA which means it has a progressive Web App Features. It can be installed from Desktop, IOS and Android broswers and working normally as a regular native app.

Give it a try and install it on your device : Install on Android
Install on IOS

Performance Performance

Performance

Performance

Performance

Performance Passed Performance
Accessibility Passed Accessibility
Best Practices Passed Best Practices
SEO Passed SEO
PWA Passed PWA

License License

MIT