JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<html>

  <div>

    <ul id="list">

      <li id='aaa' class="active">aaa</li>
      <li id='bbb'>bbb</li>
      <li id='ccc'>ccc</li>
      <li id='ddd'>ddd</li>
      <li id='eee'>eee</li>

    </ul>

  </div>

  <div id="main">

    <div class="main-active aaa">
      test aaaa
    </div>

    <div class="bbb">
      test bbb
    </div>

    <div class="ccc">
      test ccc
    </div>

    <div class="ddd">
      test ddd
    </div>

    <div class="eee">
      test eee
    </div>

  </div>

  <div id="search-gm">
    <input id="search-gm-input" placeholder="Search keyword..." />
    <button id="search-gm-btn">Search</button>
  </div>

</html>

CSS

ul {
  list-style-type: none;
}

ul li {
  display: inline-block;
  margin-right: 2rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  color: white;
  background-color: green;
}

ul li.active {
  background-color: blue;
}

ul li:hover {
  background-color: black;
}

#main {
  padding: 0.5rem 2.5rem;
}

#main div.main-active {
  display: block !important;
}

#main div {
  display: none;
}

#search-gm {
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

#search-gm input {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-color: transparent;
  background-color: #f3f3f3;
  padding: 0.2rem;
}

.search-gm-active {
  display: flex !important;
}

#search-gm-btn {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-color: transparent;
  background-color: black;
  color: white;
}

JavaScript

ctrlPressed = false;

$(document).keydown(function(e) {

  if (e.keyCode == 17) { //17 is "ctrl" 224 is "cmd"
    ctrlPressed = true;
  }

  if (ctrlPressed && e.keyCode == 70) { //70 is "f"
    // alert("Page is being searched");
    $('#search-gm').addClass('search-gm-active');
    $('#search-gm-input').focus();
  }

});

$(document).keyup(function(e) {

  if (e.keyCode == 17) {
    ctrlPressed = false;
  }

});

$(document).click(function(e) {

  if (e.target.id === 'search-gm-btn') {

		let searchKeyword = $('#search-gm-input').val();
		
		$(`div:contains(${searchKeyword})`).css('background-color', 'red');

  } else if (e.target.id === 'search-gm-input') {
		// nothing yet
	} else {
    $('#search-gm').removeClass('search-gm-active');
  }

})

/*
$('#list li').click(function() {

  let el = $(this).attr('id');

  $('#list li').removeClass('active');
  $(this).addClass('active');

  $('#main div').removeClass('main-active');
  $('#main div.' + el).addClass('main-active');

});
*/