ursi/key-memorizer.html

## key-memorizer.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<meta name='viewport' content='width=device-width'>
		<style>
			html {
				font-size: 200%;
			}

			body {
				font-family: monospace;
			}

			#key,
			#guess {
				display: block;
				--margin: 1rem;
				width: calc(100% - 2 * var(--margin));
				font-family: inherit;
				font-size: inherit;
				margin: var(--margin);
			}
		</style>
	</head>
	<body>
		<input id='guess'>
		<input id='key'>
		<label><input id='hide' type='checkbox'>hide</label>
		<script>
			const
				guess = document.getElementById(`guess`),
				key = document.getElementById(`key`),
				hide = document.getElementById(`hide`);

				guess.addEventListener(`input`, function(){
					if (!key.value.startsWith(this.value)) {
						guess.placeholder = key.value.slice(guess.value.length - 1);
						guess.value = ``;
					} else if (this.value === key.value) {
						this.value = `good job`
					}
				});

				hide.addEventListener(`change`, function(){
					let visibility;
					if (this.checked) {
						visibility = `hidden`;
					} else {
						visibility = `visible`;
					}

					key.style.visibility = visibility
				});
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width'>
	<style>
	html {
	font-size: 200%;
	}

	body {
	font-family: monospace;
	}

	#key,
	#guess {
	display: block;
	--margin: 1rem;
	width: calc(100% - 2 * var(--margin));
	font-family: inherit;
	font-size: inherit;
	margin: var(--margin);
	}
	</style>
	</head>
	<body>
	<input id='guess'>
	<input id='key'>
	<label><input id='hide' type='checkbox'>hide</label>
	<script>
	const
	guess = document.getElementById(`guess`),
	key = document.getElementById(`key`),
	hide = document.getElementById(`hide`);

	guess.addEventListener(`input`, function(){
	if (!key.value.startsWith(this.value)) {
	guess.placeholder = key.value.slice(guess.value.length - 1);
	guess.value = ``;
	} else if (this.value === key.value) {
	this.value = `good job`
	}
	});

	hide.addEventListener(`change`, function(){
	let visibility;
	if (this.checked) {
	visibility = `hidden`;
	} else {
	visibility = `visible`;
	}

	key.style.visibility = visibility
	});
	</script>
	</body>
	</html>