Skip to content

Instantly share code, notes, and snippets.

@jeffbcross

jeffbcross/gist:5c1cf63ebece067f01c2

Created March 19, 2015 23:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffbcross/5c1cf63ebece067f01c2 to your computer and use it in GitHub Desktop.
Save jeffbcross/5c1cf63ebece067f01c2 to your computer and use it in GitHub Desktop.
Download ZIP
advanced algorithm to create a full-page h1 for each unique character in a string. for printing and tracing letters.
Raw
gistfile1.html
<!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