JSFiddle - React, Tailwind, and code Playground

by bgoonz

HTML

<h1>Linear vs Binary</h1><input type="text" maxLength="1" id="random-letter" />
<div class="controls"><button id="random-btn">Random</button><button id="search-btn">Search</button></div>
<div class="searches">
    <div class="linear-search">
        <h2>Linear</h2>
        <p class="info" id="linear-info">&nbsp;</p>
        <ul class="data">
            <li id="A-linear">A</li>
            <li id="B-linear">B</li>
            <li id="C-linear">C</li>
            <li id="D-linear">D</li>
            <li id="E-linear">E</li>
            <li id="F-linear">F</li>
            <li id="G-linear">G</li>
            <li id="H-linear">H</li>
            <li id="I-linear">I</li>
            <li id="J-linear">J</li>
            <li id="K-linear">K</li>
            <li id="L-linear">L</li>
            <li id="M-linear">M</li>
            <li id="N-linear">N</li>
            <li id="O-linear">O</li>
            <li id="P-linear">P</li>
            <li id="Q-linear">Q</li>
            <li id="R-linear">R</li>
            <li id="S-linear">S</li>
            <li id="T-linear">T</li>
            <li id="U-linear">U</li>
            <li id="V-linear">V</li>
            <li id="W-linear">W</li>
            <li id="X-linear">X</li>
            <li id="Y-linear">Y</li>
            <li id="Z-linear">Z</li>
        </ul>
    </div>
    <div class="binary-search">
        <h2>Binary</h2>
        <p class="info" id="binary-info">&nbsp;</p>
        <ul class="data">
            <li id="A-binary">A</li>
            <li id="B-binary">B</li>
            <li id="C-binary">C</li>
            <li id="D-binary">D</li>
            <li id="E-binary">E</li>
            <li id="F-binary">F</li>
            <li id="G-binary">G</li>
            <li id="H-binary">H</li>
            <li id="I-binary">I</li>
            <li id="J-binary">J</li>
            <li id="K-binary">K</li>
            <li id="L-binary">L</li>
            <li id="M-binary">M</li>
            <li id="N-binary">N</li>
           ...

CSS

// ## FONTS ##
@font-face("OperatorMono-Bold" "https://s3-us-west-2.amazonaws.com/s.cdpn.io/161040/OperatorMono-Bold")
@font-face("OperatorMono-Medium" "https://s3-us-west-2.amazonaws.com/s.cdpn.io/161040/OperatorMono-Medium")

// ## VARS ##
$white: white
$yellow: #FFF32B
$blue: #3BB0FF
$red: #FF014E
$green: #66FF00
$reg-stack: "OperatorMono-Medium", "Lucida Console", Monaco, monospace
$bold-stack: "OperatorMono-Bold", "Lucida Console", Monaco, monospace

// ## ANIMATIONS ##
@keyframes shake
  10%, 90%
    transform: translate3d(-1px, 0, 0)
  20%, 80%
    transform: translate3d(2px, 0, 0)
  30%, 50%, 70%
    transform: translate3d(-4px, 0, 0)
  40%, 60%
    transform: translate3d(4px, 0, 0)

body
  background: $blue
  text-align: center
  font-family: $reg-stack
  color: $white
  
h1, h2, h3, h4, h5, h6
  color: $yellow
  font-family: $bold-stack
  font-size: 2em
  
h1
  font-size: 3em
  
input#random-letter
  text-align: center
  width: 1em
  border: none
  border-bottom: 5px solid $white
  padding-bottom: .2em
  text-transform: uppercase
  background: $blue
  font-size: 3em
  font-family: $reg-stack
  color: white
  &.shake
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both
  &:focus
    outline: none
  
button
  text-align: center
  border: none
  background: $blue
  border: 5px solid $yellow
  color: $yellow
  font-size: 30px
  font-family: $bold-stack
  padding: .15em 1.3em
  margin: 1em
  transition: border-color .2s, color .2s
  -webkit-transition: border-color .2s, color .2s
  &:hover
    color: $white
    border-color: $white
    cursor: pointer

.searches
  .linear-search, .binary-search
    display: inline-block
  
ul.data
  padding: 0
  margin: 1em
  margin-top: 0
  li
    display: inline-block
    border-bottom: 2px solid rgba(0,0,0,0)
    &.exempt
      color: $red
      border-bottom: 2px solid $red
    &.found
      color: $green
      border-bottom: 2px solid $green

JavaScript

// ## Global Variables
const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
const ARR_LENGTH = ALPHABET.LENGTH
const SEARCH_INTERVAL_TIME = 800
let linear_interval
let binary_interval

// ## Helper Functions
function getArgumentsAsArray() {
  let args = Array.from(arguments)
  if (typeof args[0] === "object") args = args[0]
  if (args[0] && args[0].length) args = args[0]
  return args
}
function sum() {
  let args = getArgumentsAsArray(arguments)
  return Array.from(args).reduce( (p, c) => p + c )
}
function avg() {
  let args = getArgumentsAsArray(arguments)
  return sum(args) / args.length
}
function randomIndex(array) {
  return Math.ceil(Math.random() * array.length) - 1
}
function randomElement(array) {
  return array[randomIndex(array)]
}

// ## Search Functions
function startLinearSearch(value, set) {
  let current_value
  let current_elm
  let current_index = 0
  let num_iterations = 0
  let info = document.getElementById('linear-info')
  linear_interval = setInterval( () => {
    current_value = set[current_index]
    current_elm = document.getElementById(`${current_value}-linear`)
    num_iterations += 1
    if (current_index >= set.length) { 
      clearInterval(linear_interval)
      info.innerHTML = `Index: -1, Value: none, Num Iterations: ${num_iterations}`
      return
    }
    if (current_value != value) {
      current_elm.className = "exempt"
      info.innerHTML = `Index: ${current_index}, Value: ${current_value}, Num Iterations: ${num_iterations}`
    }
    if (current_value == value) {
      clearInterval(linear_interval)
      current_elm.className = "found"
      info.innerHTML = `Index: ${current_index}, Value: ${current_value}, Num Iterations: ${num_iterations}`
      return
    }
    current_index += 1
  }, SEARCH_INTERVAL_TIME)
}
function startBinarySearch(value, set) {
  let current_value
  let current_elm
  let current_index
  let num_iterations = 0
  let min = 0
  let max = set.length - 1
  let info =...