cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              #keyboard
	#row1.row
		#esc.key.small
			esc
		#f1.key.small
			F1
		#f2.key.small
			F2
		#f3.key.small
			F3
		#f4.key.small
			F4
		#f5.key.small
			F5
		#f6.key.small
			F6
		#f7.key.small
			F7
		#f8.key.small
			F8
		#f9.key.small
			F9
		#f10.key.small
			F10
		#f11.key.small
			F11
		#f12.key.small
			F12
	#row2.row
		#grave.key.multi
			&#126;<br>
			&#96;
		#1.key.multi
			!<br>
			1
		#2.key.multi
			@<br>
			2
		#3.key.multi
			&#35;<br>
			3
		#4.key.multi
			$<br>
			4
		#5.key.multi
			&#37;<br>
			5
		#6.key.multi
			^<br>
			6
		#7.key.multi
			&<br>
			7
		#8.key.multi
			*<br>
			8
		#9.key.multi
			&#40;<br>
			9
		#0.key.multi
			&#41;<br>
			0
		#minus.key.multi
			_<br>
			&#45;
		#equals.key.multi
			+<br>
			&#61;
		#backspace.key.small
			backspace
	#row3.row
		#tab.key.small
			tab
		#q.key
			Q
		#w.key
			W
		#e.key
			E
		#r.key
			R
		#t.key
			T
		#y.key
			Y
		#u.key
			U
		#i.key
			I
		#o.key
			O
		#p.key
			P
		#openbracket.key.multi
			&#123;<br>
			&#91;
		#closebracket.key.multi
			&#125;<br>
			&#93;
		#backslash.key.multi
			|<br>
			\\
	#row4.row
		#capslock.key.small
			caps lock
		#a.key
			A
		#s.key
			S
		#d.key
			D
		#f.key
			F
		#g.key
			G
		#h.key
			H
		#j.key
			J
		#k.key
			K
		#l.key
			L
		#semicolon.key.multi
			&#58;<br>
			&#59;
		#apostrophe.key.multi
			"<br>
			'
		#enter.key.small
			enter
	#row5.row
		#lshift.shift.key.small
			shift
		#z.key
			Z
		#x.key
			X
		#c.key
			C
		#v.key
			V
		#b.key
			B
		#n.key
			N
		#m.key
			M
		#comma.key.multi
			&lt;<br>
			,
		#period.key.multi
			&gt;<br>
			&#46;
		#slash.key.multi
			?<br>
			\/
		#rshift.shift.key.small
			shift
	#row6.row
		#lctrl.ctrl.key.small
			ctrl
		#lsuper.super.key.small
			super
		#lalt.alt.key.small
			alt
		#space.key
			 
		#ralt.alt.key.small
			alt
		#rsuper.super.key.small
			super
		#menu.key.small
			menu
		#rctrl.ctrl.key.small
			ctrl

#log
	#clearLogButton
		clear
	#logText
		>Welcome to the Keyboard Debugger!<br>
		>Inspired by <a href="https://codepen.io/Streetproject/full/RgqXeV/" target="_parent">Mouse Debugger</a> by <a href="https://codepen.io/Streetproject/" target="_parent">Matthew Steele</a>.<br>
		>Keyboard Debugger is best used in <a href="https://codepen.io/QDeltaE/full/PjXWZr/" target="_parent">Full Page</a> Mode.<br>
		>Click on the keyboard and start typing to begin.<br>
		>Begin Log...<br>
	
            
          
!
            
              html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #444;
	user-select: none;
	overflow: hidden;
}

a {
	color: #0F0;
	&:visited {
		color: #070;
	}
}

#keyboard {
	width:calc(100% - 1.8vh);
	
	border-left: 1vh solid #0F0F0F;
	border-right: 1vh solid #0F0F0F;
	border-top: 0.5vh solid #0F0F0F;
	border-bottom: 0.5vh solid #0F0F0F;
	
	border-bottom: none;
	font-size: 3vh;
	font-family: Lato, sans-serif;
	
	.row {
		width:100%;
		height: 10vh;
		background:#0F0F0F;
		display:flex;
		
		.key {
			white-space: nowrap;
			text-shadow: 0 0 0.5vh #FFF; 
			border-radius: 0.5vh;
			width:100%;
			text-align: center;
			line-height: 9vh;
			color:#FFF;
			background: radial-gradient(ellipse at center, #333 0%,#222 100%);
			margin:0.4vh;
			padding-left:1%;
			padding-right:1%;
			
			&.pressed {
				background: radial-gradient(ellipse at center, #252525 0%,#151515 100%);
				color: #DDD;
				text-shadow: 0 0 0.5vh #999; 
			}
			
			&.multi {
				line-height:4vh;
				padding-top: 0.5vh;
			}
			&.shift {
				width: 300%;
				&#rshift {
					width: 360%;
				}
			}
			&#space {
				width: 700%;
			}
			&#backspace {
				width: 200%;
			}
			&#enter {
				width: 200%;
			}
			&#tab {
				width: 180%;
			}
			&#capslock {
				width: 200%;
			}
			&#backslash {
				width: 150%;
			}
			&#menu {
				width: 80%;
			}
			&.small {
				font-size: 75%;
				line-height: 13.5vh;
				text-align: left;
			}
		}
		&#row1 {
			height: 5vh;
			.key {
				line-height: 4.5vh;
			}
		}
	}
}

#log {
	background: radial-gradient(ellipse at center, #111 0%,#222 100%);
	width: calc(100% - 3vh);
	height:41.55vh;
	border: 0.55vh solid #0F0F0F;
	color: #0B0;
	padding: 1vh;
	font-family: monospace;
	font-size: 125%;
	user-select: text;
	position: relative;
	overflow-y: scroll;
	
	
	&::-webkit-scrollbar {
		width: 10px;
	}
	&::-webkit-scrollbar-thumb {
		background: #333;
		border: none;
		border-radius: 4px;
	}
	&::-webkit-scrollbar-track {
		background: #111;
		border: none;
		border-radius: 0px;
	}
	
	#clearLogButton {
		position: fixed;
		right: calc(5vw + 20px);
		top: 55.5vh;
		padding: 1vh;
		height: 2.5vh;
		line-height: 2.5vh;
		border: 0.55vh solid #0F0F0F;
		background: rgba(#fff, 0.1);
		opacity: 0.5;
		
		&:hover {
			background: rgba(#fff, 0.2);
			opacity: 0.75;
		}
		&:active {
			opacity: 1;
		}
	}
}
            
          
!
            
              function log(message) {
	$("#logText").append(">" + message + "<br>");
	$("#log").scrollTop($("#log")[0].scrollHeight);
}

$("body")
.keydown(function(e) {
	e.preventDefault();
	e.stopPropagation();
	log("Keydown &darr; Key: \"" + e.key + "\" KeyCode: " + e.which);
	keydown(e.key);
})
.keyup(function(e) {
	e.preventDefault();
	e.stopPropagation();
	log("Keyup &nbsp; &uarr; Key: \"" + e.key + "\" KeyCode: " + e.which);
	keyup(e.key);
});

$("#clearLogButton").click(function() {
	$("#logText").html(">Begin Log...<br>");
});

function keydown(key) {
	switch(key.toLowerCase()) {
		case "escape":
			$("#esc").addClass("pressed");
			break;
		case "f1":
			$("#f1").addClass("pressed");
			break;
		case "f2":
			$("#f2").addClass("pressed");
			break;
		case "f3":
			$("#f3").addClass("pressed");
			break;
		case "f4":
			$("#f4").addClass("pressed");
			break;
		case "f5":
			$("#f5").addClass("pressed");
			break;
		case "f6":
			$("#f6").addClass("pressed");
			break;
		case "f7":
			$("#f7").addClass("pressed");
			break;
		case "f8":
			$("#f8").addClass("pressed");
			break;
		case "f9":
			$("#f9").addClass("pressed");
			break;
		case "f10":
			$("#f10").addClass("pressed");
			break;
		case "f11":
			$("#f11").addClass("pressed");
			break;
		case "f12":
			$("#f12").addClass("pressed");
			break;
		case "`":
		case "~":
			$("#grave").addClass("pressed");
			break;
		case "!":
		case "1":
			$("#1").addClass("pressed");
			break;
		case "@":
		case "2":
			$("#2").addClass("pressed");
			break;
		case "#":
		case "3":
			$("#3").addClass("pressed");
			break;
		case "$":
		case "4":
			$("#4").addClass("pressed");
			break;
		case "%":
		case "5":
			$("#5").addClass("pressed");
			break;
		case "^":
		case "6":
			$("#6").addClass("pressed");
			break;
		case "&":
		case "7":
			$("#7").addClass("pressed");
			break;
		case "*":
		case "8":
			$("#8").addClass("pressed");
			break;
		case "(":
		case "9":
			$("#9").addClass("pressed");
			break;
		case ")":
		case "0":
			$("#0").addClass("pressed");
			break;
		case "_":
		case "-":
			$("#minus").addClass("pressed");
			break;
		case "+":
		case "=":
			$("#equals").addClass("pressed");
			break;
		case "backspace":
			$("#backspace").addClass("pressed");
			break;
		case "tab":
			$("#tab").addClass("pressed");
			break;
		case "q":
			$("#q").addClass("pressed");
			break;
		case "w":
			$("#w").addClass("pressed");
			break;
		case "e":
			$("#e").addClass("pressed");
			break;
		case "r":
			$("#r").addClass("pressed");
			break;
		case "t":
			$("#t").addClass("pressed");
			break;
		case "y":
			$("#y").addClass("pressed");
			break;
		case "u":
			$("#u").addClass("pressed");
			break;
		case "i":
			$("#i").addClass("pressed");
			break;
		case "o":
			$("#o").addClass("pressed");
			break;
		case "p":
			$("#p").addClass("pressed");
			break;
		case "[":
		case "{":
			$("#openbracket").addClass("pressed");
			break;
		case "]":
			$("#closebracket").addClass("pressed");
			break;
		case "}":
			$("#closebracket").addClass("pressed");
			break;
		case "\\":
		case "|":
			$("#backslash").addClass("pressed");
			break;
		case "capslock":
			$("#capslock").addClass("pressed");
			break;
		case "a":
			$("#a").addClass("pressed");
			break;
		case "s":
			$("#s").addClass("pressed");
			break;
		case "d":
			$("#d").addClass("pressed");
			break;
		case "f":
			$("#f").addClass("pressed");
			break;
		case "g":
			$("#g").addClass("pressed");
			break;
		case "h":
			$("#h").addClass("pressed");
			break;
		case "j":
			$("#j").addClass("pressed");
			break;
		case "k":
			$("#k").addClass("pressed");
			break;
		case "l":
			$("#l").addClass("pressed");
			break;
		case ":":
		case ";":
			$("#semicolon").addClass("pressed");
			break;
		case '"':
		case "'":
			$("#apostrophe").addClass("pressed");
			break;
		case "enter":
			$("#enter").addClass("pressed");
			break;
		case "shift":
			$(".shift").addClass("pressed");
			break;
		case "z":
			$("#z").addClass("pressed");
			break;
		case "x":
			$("#x").addClass("pressed");
			break;
		case "c":
			$("#c").addClass("pressed");
			break;
		case "v":
			$("#v").addClass("pressed");
			break;
		case "b":
			$("#b").addClass("pressed");
			break;
		case "n":
			$("#n").addClass("pressed");
			break;
		case "m":
			$("#m").addClass("pressed");
			break;
		case "<":
		case ",":
			$("#comma").addClass("pressed");
			break;
		case ">":
		case ".":
			$("#period").addClass("pressed");
			break;
		case "?":
		case "/":
			$("#slash").addClass("pressed");
			break;
		case "control":
			$(".ctrl").addClass("pressed");
			break;
		case "meta":
			$(".super").addClass("pressed");
			break;
		case "alt":
			$(".alt").addClass("pressed");
			break;
		case " ":
			$("#space").addClass("pressed");
			break;
		case "contextmenu":
			$("#menu").addClass("pressed");
			break;
	}
}














function keyup(key) {
	switch(key.toLowerCase()) {
		case "escape":
			$("#esc").removeClass("pressed");
			break;
		case "f1":
			$("#f1").removeClass("pressed");
			break;
		case "f2":
			$("#f2").removeClass("pressed");
			break;
		case "f3":
			$("#f3").removeClass("pressed");
			break;
		case "f4":
			$("#f4").removeClass("pressed");
			break;
		case "f5":
			$("#f5").removeClass("pressed");
			break;
		case "f6":
			$("#f6").removeClass("pressed");
			break;
		case "f7":
			$("#f7").removeClass("pressed");
			break;
		case "f8":
			$("#f8").removeClass("pressed");
			break;
		case "f9":
			$("#f9").removeClass("pressed");
			break;
		case "f10":
			$("#f10").removeClass("pressed");
			break;
		case "f11":
			$("#f11").removeClass("pressed");
			break;
		case "f12":
			$("#f12").removeClass("pressed");
			break;
		case "`":
		case "~":
			$("#grave").removeClass("pressed");
			break;
		case "!":
		case "1":
			$("#1").removeClass("pressed");
			break;
		case "@":
		case "2":
			$("#2").removeClass("pressed");
			break;
		case "#":
		case "3":
			$("#3").removeClass("pressed");
			break;
		case "$":
		case "4":
			$("#4").removeClass("pressed");
			break;
		case "%":
		case "5":
			$("#5").removeClass("pressed");
			break;
		case "^":
		case "6":
			$("#6").removeClass("pressed");
			break;
		case "&":
		case "7":
			$("#7").removeClass("pressed");
			break;
		case "*":
		case "8":
			$("#8").removeClass("pressed");
			break;
		case "(":
		case "9":
			$("#9").removeClass("pressed");
			break;
		case ")":
		case "0":
			$("#0").removeClass("pressed");
			break;
		case "_":
		case "-":
			$("#minus").removeClass("pressed");
			break;
		case "+":
		case "=":
			$("#equals").removeClass("pressed");
			break;
		case "backspace":
			$("#backspace").removeClass("pressed");
			break;
		case "tab":
			$("#tab").removeClass("pressed");
			break;
		case "q":
			$("#q").removeClass("pressed");
			break;
		case "w":
			$("#w").removeClass("pressed");
			break;
		case "e":
			$("#e").removeClass("pressed");
			break;
		case "r":
			$("#r").removeClass("pressed");
			break;
		case "t":
			$("#t").removeClass("pressed");
			break;
		case "y":
			$("#y").removeClass("pressed");
			break;
		case "u":
			$("#u").removeClass("pressed");
			break;
		case "i":
			$("#i").removeClass("pressed");
			break;
		case "o":
			$("#o").removeClass("pressed");
			break;
		case "p":
			$("#p").removeClass("pressed");
			break;
		case "[":
		case "{":
			$("#openbracket").removeClass("pressed");
			break;
		case "]":
			$("#closebracket").removeClass("pressed");
			break;
		case "}":
			$("#closebracket").removeClass("pressed");
			break;
		case "\\":
		case "|":
			$("#backslash").removeClass("pressed");
			break;
		case "capslock":
			$("#capslock").removeClass("pressed");
			break;
		case "a":
			$("#a").removeClass("pressed");
			break;
		case "s":
			$("#s").removeClass("pressed");
			break;
		case "d":
			$("#d").removeClass("pressed");
			break;
		case "f":
			$("#f").removeClass("pressed");
			break;
		case "g":
			$("#g").removeClass("pressed");
			break;
		case "h":
			$("#h").removeClass("pressed");
			break;
		case "j":
			$("#j").removeClass("pressed");
			break;
		case "k":
			$("#k").removeClass("pressed");
			break;
		case "l":
			$("#l").removeClass("pressed");
			break;
		case ":":
		case ";":
			$("#semicolon").removeClass("pressed");
			break;
		case '"':
		case "'":
			$("#apostrophe").removeClass("pressed");
			break;
		case "enter":
			$("#enter").removeClass("pressed");
			break;
		case "shift":
			$(".shift").removeClass("pressed");
			break;
		case "z":
			$("#z").removeClass("pressed");
			break;
		case "x":
			$("#x").removeClass("pressed");
			break;
		case "c":
			$("#c").removeClass("pressed");
			break;
		case "v":
			$("#v").removeClass("pressed");
			break;
		case "b":
			$("#b").removeClass("pressed");
			break;
		case "n":
			$("#n").removeClass("pressed");
			break;
		case "m":
			$("#m").removeClass("pressed");
			break;
		case "<":
		case ",":
			$("#comma").removeClass("pressed");
			break;
		case ">":
		case ".":
			$("#period").removeClass("pressed");
			break;
		case "?":
		case "/":
			$("#slash").removeClass("pressed");
			break;
		case "control":
			$(".ctrl").removeClass("pressed");
			break;
		case "meta":
			$(".super").removeClass("pressed");
			break;
		case "alt":
			$(".alt").removeClass("pressed");
			break;
		case " ":
			$("#space").removeClass("pressed");
			break;
		case "contextmenu":
			$("#menu").removeClass("pressed");
			break;
	}
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console