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
Loading ..................

Console