Basic Keycode Finder

basic-keycode-finder.markdown

Basic Keycode Finder

A Pen by Steven Roberts on CodePen.

License.

index.html

<h1>A</h1>
<p>keycode<br><span>65</span></p>

script.js

function keyCode(e) {
	
	var keycodeContainer = document.getElementsByTagName('span')[0];
 	var keyContainer = document.getElementsByTagName('h1')[0];
 
 	keycodeContainer.innerHTML = e.keyCode;
 	keyContainer.innerHTML = e.key
	
}

window.addEventListener('keydown', keyCode);

style.scss

@import url('https://fonts.googleapis.com/css?family=Inconsolata|Noto+Serif:700i');

body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column wrap;
	min-height: 100vh;
	
	font-family: 'Inconsolata', monospace;
	background-color: #191919;
	color: white;
	
	-webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
	
	background-image: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.95)), url('https://source.unsplash.com/1920x1080/?letterpress,typography,letter,type,font,fonts,');
	background-size: cover;
	background-position: center center;
}

h1 {
	font-size: 9rem;
	line-height: 1em;
	font-family: 'Noto Serif', serif;
	margin: 0 0 1rem;
	font-style: italic;
}

p {
	font-size: 1rem;
	text-align: center;
}

span {
	font-size: 2rem;
}