Skip to content

Instantly share code, notes, and snippets.

@kuznetsovandrey76
Created January 19, 2017 20:39
Show Gist options
  • Save kuznetsovandrey76/fbb108e0f30428344612a56340a064b3 to your computer and use it in GitHub Desktop.
Save kuznetsovandrey76/fbb108e0f30428344612a56340a064b3 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Antic|Dosis|Exo|Josefin+Sans|Maven+Pro|Muli:300|Nobile|Oxygen:300|Poppins:300|Raleway|Ruluko" rel="stylesheet">
<title>Fonts</title>
<style>
* {
margin: 0;
padding: 0;
}
h2, p, span, input {
margin: .5em 1em;
}
span {
color: darkred;
}
</style>
</head>
<body>
<h2>Find your fonts</h2>
<span>Write your text in input:</span>
<input type="text" id='inner'>
<div id="outer"></div>
<script>
var inner = document.getElementById('inner');
var outer = document.getElementById('outer');
// var p = document.createElement('p');
var fonts = ['Raleway', 'Muli', 'Dosis', 'Poppins', 'Oxygen', 'Josefin Sans', 'Maven Pro', 'Exo', 'Nobile', 'Antic', 'Ruluko'];
var testStr = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nemo, quas modi, repellat vel eum id, facere asperiores commodi eius odit pariatur, fuga dolores praesentium quos iusto reiciendis possimus hic.';
for (var i = 0; i < fonts.length; i++) {
outer.innerHTML += '<p></p>';
}
var out = document.querySelectorAll('p');
inner.addEventListener('keyup', addOut);
function addOut() {
for (var i = 0; i < fonts.length; i++) {
out[i].style.fontFamily = fonts[i];
out[i].innerHTML = i + '. ' + fonts[i] + ': ' + inner.value;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment