JSFiddle - React, Tailwind, and code Playground

by Seokjun Hong

HTML

<ul>
  <li class="item">test1</li>
  <li class="item">test2</li>
  <li class="item">test3</li>
  <li class="item">test4</li>
  <li class="item">test5</li>
  <li class="item">test6</li>
  <li class="item">test7</li>
  <li class="item">test8</li>
  <li class="item">test9</li>
  <li class="item">test10</li>
</ul>

<ul>
  <li class="item">test1</li>
  <li class="item">test2</li>
  <li class="item">test3</li>
  <li class="item">test4</li>
  <li class="item">test5</li>
  <li class="item">test6</li>
  <li class="item">test7</li>
  <li class="item">test8</li>
  <li class="item">test9</li>
  <li class="item">test10</li>
</ul>
<div>
  <textarea class="text"></textarea>
</div>

CSS

.item {
  list-style: none;
  margin: 10px 10px;
}

.item.focus {
  border: black 3px solid;
}

ul {
  width: 30%;
  display: inline-block;
  margin-right: 10px;
  ;
}

.text {
  width: 400px;
  height: 250px;
}

JavaScript

var current_node = $('.item:eq(0)');
var current_parent_node = $('ul:eq(0)');
var current_index = 0;
var current_parent_node_index = 0;
current_parent_node.find('.item:eq(0)').toggleClass('focus');

$(document).keydown(function(e) {
  e.preventDefault();
  //down
  if (e.keyCode == 38 && current_index > 0) {
    current_index--;
  }
  //up
  else if (e.keyCode == 40 && current_index < 9) {
    current_index++
  }
  //left
  else if (e.keyCode == 37 && current_parent_node_index > 0) {
    current_parent_node_index--;
  }
  //right
  else if (e.keyCode == 39 && current_parent_node_index < 1) {
    current_parent_node_index++;
  } 
  //enter
  else if (e.keyCode == 13) {
    $('.text').append(current_node.text());
  }

  current_node.toggleClass('focus');
  current_parent_node = $('ul:eq(' + current_parent_node_index + ')');
  current_node = current_parent_node.find('.item:eq(' + current_index + ')');
  current_node.toggleClass('focus');
});