3
Besides small points like the use of to indent, <code> unsemantically, everything looks well organized with a lot of effort in styling.
And that leads me to the main point:
It would be better to separate text content and styling.
And that would mean an XML format with a custom XML-to-HTML XSL transformation.
There are some XML formats ...
3
JavaScript
You don't have to list down all characters. All printable characters in the ASCII range are found in 33-126. What you could do is generate a random number within this range, and convert them into characters using String.fromCharCode().
Also, it's always a good practice to separate business logic from view logic. You will want to be able to ...
2
Overall the code looks fine. I just have a couple suggestions about the JavaScript and CSS.
JS
querySelectorAll vs getElementsByClassName
Generally document.getElementsByClassName will be quicker than document.querySelectorAll (see this post for more information) and the former also returns a live HTMLCollection so it wouldn't need to be queried each time....
Only top voted, non community-wiki answers of a minimum length are eligible
