Created
March 19, 2015 23:56
-
-
Save jeffbcross/5c1cf63ebece067f01c2 to your computer and use it in GitHub Desktop.
advanced algorithm to create a full-page h1 for each unique character in a string. for printing and tracing letters.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <link href='http://fonts.googleapis.com/css?family=Mouse+Memoirs' rel='stylesheet' type='text/css'> | |
| <style> | |
| body { | |
| height: 792pt; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 700pt; | |
| margin:0; | |
| letter-spacing: 100px; | |
| line-height:792pt; | |
| font-family: 'Mouse Memoirs', sans-serif; | |
| text-transform: uppercase; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 id="template"></h1> | |
| <script> | |
| var str = 'happy birthday'; | |
| var alreadyPrinted = []; | |
| var container = document.body; | |
| var template = document.querySelector('#template'); | |
| str.split('').forEach(function(char) { | |
| if (alreadyPrinted.indexOf(char) > -1 || char === ' ') return; | |
| alreadyPrinted.push(char); | |
| var cloned = template.cloneNode(); | |
| cloned.textContent = char; | |
| container.appendChild(cloned); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment