<div class="container"><div class="row"><h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2></div></div>
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
margin: 0.5em 0;
}
li a {
padding: 0.25em 0.75em;
text-decoration: none;
color: black;
border: 2px solid black;
}
li a:hover {
background-color: #dedede;
}
li a:focus {
outline: 2px dashed black;
}
/* Unrelated Pen Styles*/
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
padding: 1em;
box-sizing: border-box;
}
;(function(){
var $anchors = $('li > a');
// For comparing the result of `event.which` to a character.
var alphaLookUp = {
65 : 'A' || 'a',
66 : 'B' || 'b',
67 : 'C' || 'c',
68 : 'D' || 'd',
69 : 'E' || 'e',
70 : 'F' || 'f',
71 : 'G' || 'g',
72 : 'H' || 'h',
73 : 'I' || 'i',
74 : 'J' || 'j',
75 : 'K' || 'k',
76 : 'L' || 'l',
77 : 'M' || 'm',
78 : 'N' || 'n',
79 : 'O' || 'o',
80 : 'P' || 'p',
81 : 'Q' || 'q',
82 : 'R' || 'r',
83 : 'S' || 's',
84 : 'T' || 't',
85 : 'U' || 'u',
86 : 'V' || 'v',
87 : 'W' || 'w',
88 : 'X' || 'x',
89 : 'Y' || 'y',
90 : 'Z' || 'z'
};
/**
* Loop through elements, checking for a match to `event.which`
* @returns { Array } matchingEls
*/
function matchElemToKey(element, key) {
var matchingEls = []; // init
// Loop through all given elements, populating the array for later
for (var i = 0; i <= $(element).length; i++) {
// The text inside the anchor, eg: 'Apple'
var $string = $(element[i]).text();
// Check for elements that match the lookup.
if ($string.charAt(0) == alphaLookUp[key]) {
matchingEls.push(element[i]);
}
}
return matchingEls;
}
var myIndex = 0; // init
/**
* Use the modulo result to loop over the array
* @credit: http://jsfiddle.net/jBJ3B/3/
*/
function cycleFocus(arr) {
$(arr[myIndex]).focus();
myIndex = (myIndex+1)%(arr.length); // recycle myIndex ✨
}
/**
* Run the matching functions for A-Z keys only.
*/
function handleAlphaKeyPresses(event) {
if (event.which >= 65 && event.which <= 90) {
cycleFocus(matchElemToKey($anchors, event.which)); // eg. `O` for "Orange"
}
}
// Handle events
$(document).on('keydown', handleAlphaKeyPresses);
})();