Introduction: 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
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
Step 7: The Finished App
I created a new repository on github follow this link:
the 2^6 column is only used when the year is greater equals 64, so it will be added between 64 and 99.