| Plus | Binary | Octal | Hexadecimal | Decimal | Minus |
|---|---|---|---|---|---|
| 00000000 | 0 | 0 | 0 |
|
|
|
|
|
|
|
|
| Plus | Binary | Octal | Hexadecimal | Decimal | Minus |
|---|---|---|---|---|---|
| 00000000 | 0 | 0 | 0 |
|
|
|
|
|
|
|
|
|
| Plus | Binary | Octal | Hexadecimal | Decimal | Minus |
|---|---|---|---|---|---|
| 00000000 | 0 | 0 | 0 |
|
|
|
|
|
|
|
|
|
Learnings from code:
When I first looked at the code for the binary table, I was confused with some of the syntax. Below is a documentation of things that I learned and an explanation of the code.
Many buttons have an id. This id is later used in Javascript. Furthermore, this: {{ i }} is liquid syntax. The i is referred from the for loop, whose syntax is this: {% for i in (start-num .. end-num).
Looking at the first button, there is a function called add. This results in calling the add function in JavaScript. Within the function, the getBits function is called and stored within the variable binary. This function takes the current values of the binary (the 0s or 1s underneath the light bulbs) and stores it into a variable called bits. Next, the variable decimal takes binary and converts it from base 2 into decimal.
The next part is confusing. Within the if statement, n > 0 means that the +1 button was pressed, while the else statement means that the -1 button was pressed. The decimal of the binary value is then set to a certain number. In decimal = MAX === decimal ? 0 : decimal += n, MAX === decimal is a boolean expression which says that if true, the first option before : will run, and if false, the second option will run. MAX, as defined in the constructor, is equal to 255. Therefore, the code is saying that if the decimal (remember that the decimal is equivalent to the value of the 0s and 1s underneath the light bulbs) number is equal to 255, then when you add 1, turn the decimal number into 0 (since the maximum is 8 bits, 2^8 = 256, binary starts from 0, so maximum number is 255). However, if the decimal number is not equal to MAX, just add 1 to decimal. Same thing in the else part of the loop, only this time, it refers to if the -1 button is clicked. If decimal is 0, when the -1 button is clicked, go back to 255, otherwise, just decrease by 1.
After that, the decimal number is converted to binary and stored in the binary variable. To convert to binary, the decimal_2_base function is ran. Within the function, something new that I saw was the do while loop. I learned that the difference between this loop and the while loop was that the while loop would run only if the condition is fulfilled. The do while loop will always run once, and then if the condition in the while portion is fulfilled, the loop will run again. Within the loop, the variable digit is assigned to be equal to the remainder of the decimal number and the base, which when passed into the decimal_2_base function, was 2. digit is then passed into the variable conversion as a string. The next piece of code that I was confused about was ~~(decimal / base);. This is the same as Math.floor(), but runs faster. This piece of code devices the two variables decimal and base, and rounds to the largest integer that is less than or equal to the value.
For example, if decimal = 5, and base = 2, ~~(decimal / base) = ~~(2.5) which will round down to 2.