kuznetsovandrey76 · January 19, 2017 20:39
diff --git a/Find your fonts b/Find your fonts
 <!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>
	<!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>