Clock & Timer

A Digital Clock with flip animation and a timer with dial animation for representation of time left.

Algorithm

Navigation

Tab navigation is used to navigate from clock and timer tab vice-versa.

Flip Animation

Two flaps - one for top and other for bottom, are used to create flip top-bottom flap animation.

Dial Animation

SVG was used to create the circle and then dasharray attribute was used to animate the circumference or filling of svg.

For more details - Countdown Timer CSS-Tricks

Clock Time Calculation

Time was calculated using date object in javascript and formated to display as digital time.

var date = new Date();
var h = date.getHours(); // 0 - 23, 24 hour format
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";

Converting to 12hr format time for digital clock time :

if(h == 0){
    h = 12;
}
    
if(h > 12){
    h = h - 12;
    session = "PM";
}

Double digit time formatting :

h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;

For more check - clock.js

Styling

Neumorphism style was used for timer dial, navigation tabs and icon bar.