kuznetsovandrey76/Find your fonts

## 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>