Introduction: Binary Clock in ECMA/JS

Picture of Binary Clock in ECMA/JS

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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Step 7: The Finished App

I created a new repository on github follow this link:

Small update:

the 2^6 column is only used when the year is greater equals 64, so it will be added between 64 and 99.


About This Instructable




Bio: Nowadays attempting creating small apps to dive into the world of programming and Software Development
More by sphere360:Binary Clock in ECMA/JSHTML-Table VisualizationECMA6 OOP with classes, extend a new feature
Add instructable to: