Lösungen ,flip the text html

flip_the_text.html

Quell Code

 
<!DOCTYPE HTML>
<html lang="de">
<head>
 
<title>Auswertung Seitenclicks</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
*{
    text-align:center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


</head>

    			<div class='primary upsidedown_text'>

					<section>
						<h2>Rotate Your Text 180&deg;</h2>
						<p>Type some text in the top box, and get that text flipped upside-down in the bottom box. The trick is that the upside down letters are just latin and other letters that look like english letters upside down. Still kind of neat though.
						<p><textarea id="upsidedown_input" class="input_class">type your text here.</textarea>
						<div><label><input type="checkbox" id="upsidedown_reverse" value="yes" class="input_class"> Reverse</label></div>
						<textarea id="upsidedown_output" class="input_class" readonly></textarea>
					</section>

				</div>


<script>
    $(function()
    {
	$("#udt").addClass("this_page");
	
	TextFlipper();
	$('#upsidedown_reverse').change(TextFlipper);
	$("#upsidedown_input").on("input",TextFlipper);
	});

function TextFlipper()
	{
	var $upsidedownkey = {
		a : '\u0250', b : 'q', c : '\u0254', d : 'p', e : '\u01DD', f : '\u025F', g : '\u0183', h : '\u0265', i : '\u0131', j : '\u027E',
		k : '\u029E', l : '\u05DF', m : '\u026F', n : 'u', p : 'd', q : 'b', r : '\u0279', t : '\u0287', u : 'n', v : '\u028C', w : '\u028D', y : '\u028E',
		'.' : '\u02D9', '?' : '\u00BF', '!' : '\u00A1', '\'' : ',',
		 '[' : ']', '(' : ')', '{' : '}', ']' : '[', ')' : '(', '}' : '{', '<' : '>', '>' : '<',
		'_' : '\u203E', ';' : '\u061B', '\u203F' : '\u2040', '\u2045' : '\u2046', '\u2234' : '\u2235', '&' : '\u214b', '\"' : '\u201e',',' : '\''};
	var $input = $("#upsidedown_input").val().toLowerCase().split("");
	var $output = [];
	$("#upsidedown_input").val($input.join(""));
	$input.forEach(function($letter)
		{
		var $char = $upsidedownkey[$letter];
		if ( $char === undefined )
			{ $output.unshift($letter); }
		else
			{ $output.unshift($char); }
		});
	$input = [];	
	if ( $('#upsidedown_reverse').is(':checked') )
		{ $("#upsidedown_output").val($output.reverse().join("")); }
	else
		{ $("#upsidedown_output").val($output.join("")); }
	$output = [];
	}
158304
    
</script>
</body>
</html>