The binary-clock was probably reinvented many times, but this version has some new features, like additional date information (DMY, MDY), 24, am/pm switch and setting of visual apperance 01, graphical or both.

Step 1: Decimal to Binary and Backwards

At first it's not bad to know how to convert decimals in binary numbers and backwards.

decimal to binary:

You have to calculate the remainder of 2 (it's always 0 or 1) of a certain decimal, the calculation continues until >0. The appended 01 results from bottom to top is the binary number.

binary to decimal:

Fill the table of each time unit (binary) from right to left.

For the backward conversion you have to look at each position in the table that contains an 1 and add with the powers of 2 numbers like shown in the first row. You can ignore the zeroes because everything multiplied with 0 is 0.

Step 2: Simplified MVC

It's a kind of simplified "MVC".

Model(s): Conversion from decimal to binary, Clock that returns time and date in certain format

View: Every visual feedback is returned to the Document Object Model (DOM)

Controller: User interacts with app, the model delivers the desired result and finally to the view.

Step 3: BinaryTable

The set of the unicodes describes the exponents for the powers of 2.

The binary table consists the powers of 2 description (first row), decimals for time units - h,m,s,d,m,y (first column), and the binary number per time unit.

Step 4: Clock Unit

The class provides the output of time and date in Dateformats (GB, US) .

Each timeunit has 2 digits, 4 digits eg. for year would result a too long binary number.

Step 5: Controller

Creates a new instance of clock and calls the timeDate method every second with the view. The output of the model is the argument for the view and visuals.

Step 6: View

The view transmits to the DOM and returns the visual feedback as HTML. Some elements can be enabled or disabled (invisible), dependent on the settings of the checkboxes