Qlok: A clock built in such a way its own code is used as the UI

It's a [quine](https://en.wikipedia.org/wiki/Quine_(computing)), a piece of code that gets no input and outputs its own source code. The excellent The Art of Code talk touches on it, and the whole talk is on its own level of awesomeness.

It just highlights the parts of the code that show the time

It looks a bit more confusing than it is, though the bit manipulation stuff is confusing. With some changes to formatting for clarity, I'll try to break it down.

(r = () => setInterval(t => {
    for (j = o = "\n", y = 5; y--; document.body["innerHTML"] = "<pre>&lt" + (S = "script>\n") + o + "\n\n&lt/" + S)

This sets up an interval and declares a function, pretty common stuff. Next is where it begins writing to the document, as well as setting up a loop. The way it does that is a very bad practice, but that isn't really the point of the code.

for (x = -01; 63 - !y > x++; o += `(r=${r})()` [j++].fontcolor(c ? "#FF0" : "#444")) 

This is a nested for loop, and does the coloring for the clock. There is a string literal referencing the function that gets a string of the function, and each letter gets iterated over, with a ternary operator to determine the color. Again, nothing too crazy so far. I'll break the next part down out of order for ease of understanding.

i = "9" < (D = Date()[16 + (x / 8 | 0)]) ? 30 : D * 3

This is another ternary operation, though its sort of tricky to parse, but easier when broken down. Starting at Date(), it returns a string, which is then indexed. The hour is the 17th character of the date string, so the index is then 16 plus something. That something is x, essentially the current text column. There are 8 sections of the clock, which is 64 characters wide, so a division by 8 and floor will return the correct character at the current column. Now onto the actual ternary section, it is just a comparison to the string "9". For all of the "numbers" this will evaluate to false, however, "9" < ":" is true. This means that the value of i is either 3 times the current digit, or 30 in the case of a colon. It's important to note that i here has the value of the ternary operation.

parseInt("odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(i = ..., i+3), 36)

This part is actually fairly easy to explain, sort of. The string in there is a concatenation of base 36 numbers. Each of these groups is 3 characters long, and are indexed by the value given by the previous section. This is essentially the "font" for the clock, kind of stored as a bitmap. For a sort of quick example:

parseInt("odR",36).toString(2).match(/.{1,3}/g).join("\n")
output:
111
101
101
101
111

That looks a lot like a zero there. That works for all the other groups as well. So how does that fit into the rest of the code?

c = x / 2 % 4 < 3 &&  parseInt(that_whole_bit) & 1 << (x / 2 | 0) % 4 + 3 * y

So here are some variables that came up earlier, c being the choice for a character being on or off, y being the current row. Without going into too much detail, this is using some bit shifting and masking to get the value from the previous section at the current column and row. This is needed because each row of text is done line by line, so the x and y values of sort need to be known. And that's about all there is to it. I'm far from an expert so I probably got some things wrong, but I think that's the general gist of things.

Made some tweaks. How's this? https://codebeautify.org/real-time-html-editor/y24f8f1f7

Use the debugger to pause the script

Dont advertise it on random posts

The pages don’t look very good on mobile. I’d work on the responsiveness on the chapter pages for example