hippie/source/screens/demo/tests.njk

<!-- tests.screen -->
{% set pageId = "tests" %}
{% set pageClass = "h_full_view" %}

{% extends "demo/_default.njk" %}
{% import "demo/macros/_nav.njk" as nav %}

{% block title %}Tests{% endblock %}
{% block head %}
{{ super() }}
<style>
#error {
	border: 1px solid #FFFF66;
	background-color: #FFFFCC;
	display: inline-block;
	margin-left: 10px;
	padding: 3px;
	display: none;
}
</style>
{% endblock %}

{% block body %}
<h2>Caps Lock</h2>
<div id="capsCheck">
	<input type="password" name="txtPassword" onkeypress="capLock(event)" />
	<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
	<form action="">
		<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
	</form>
</div>

<h2>Navigation</h2>
{{ nav.main(data.demoadditionallinks, 'Tests') }}

<div id="divGame">
	<h2>Number Game</h2>
	<p class="guesses"></p>
	<p class="lastResult"></p>
	<p class="lowOrHi"></p>
	<label for="guessField">Guess</label>
	<input type="text" id="guessField" class="guessField">
	<input type="submit" value="Submit guess" class="guessSubmit">
</div>
{% endblock %}

{% block script %}
{{ super() }}
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script>
// Page specific
// ------------------------------------------------------------------------------
assetsLoaded = true;
logPerf('Assets loaded.');

$( document ).ready(function() {
	logPerf('JQ document ready event fired.');

	let ranNum = Math.floor(Math.random() * 100) + 1;

	const guesses = $('.guesses');
	const lastResult = $('.lastResult');
	const lowOrHi = $('.lowOrHi');

	const guessField = $('.guessField');
	const guessSubmit = $('.guessSubmit');

	let guessCount = 1;
	let resetButton;

	function checkGuess() {
		console.log('Random:', ranNum);
		let userGuess = Number(guessField.value);
		if (guessCount === 1) {
			// guesses.get(0).textContent = 'Previous guesses: ';
			guesses.html('Previous guesses: ');
		}
		// guesses[0].textContent += userGuess + ', ';
		guesses.get(0).textContent += userGuess + ', ';
		// var g = guesses.html();
		// guesses.html(g += userGuess + ', ');

	}

	// checkGuess();

});

function capLock(e) {
	kc = e.keyCode?e.keyCode:e.which;
	sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
	if (((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
	document.getElementById('divMayus').style.visibility = 'visible';
	else
	document.getElementById('divMayus').style.visibility = 'hidden';
}

function capsDetect() {
	var body = document.getElementsByTagName('body')[0];
	var isShiftPressed = false;
	var isCapsOn = false;
	var capsWarning = document.getElementById('error');
	body.addEventListener('keydown', function(e) {
		var keyCode = e.keyCode ? e.keyCode : e.which;
		if (keyCode === 16) {
			isShiftPressed = true;
		}
	});
	body.addEventListener('keyup', function(e) {
		var keyCode = e.keyCode ? e.keyCode : e.which;
		if (keyCode === 16) {
			isShiftPressed = false;
		}
		if (keyCode === 20) {
			if (isCapsOn) {
				isCapsOn = false;
				capsWarning.style.display = 'none';
			} else {
				isCapsOn = true;
				capsWarning.style.display = 'inline-block';
			}
		}
	});
	body.addEventListener('keypress', function(e) {
		var keyCode = e.keyCode ? e.keyCode : e.which;
		if (keyCode <= 40)
		return;
		if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
			isCapsOn = true;
			capsWarning.style.display = 'inline-block';
		} else {
			capsWarning.style.display = 'none';
		}
	});
}

capsDetect();
</script>
{% endblock %}