JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<div>
  <label for="phone_number">Phone Number:</label>
  <input id="phone_number" placeholder="(555) HI-MORTY" pattern="[A-Za-z0-9\-\(\)]*">
  <button id="submit">Submit</button>
</div>

<div>
<label for="phone_number">Most Recent:</label>
<textarea id="most_recent" readonly></textarea>
<button id="clear">Clear</button>
</div>

SCSS

$label-width: 100px;
$input-width: $label-width * 2;

div {
  padding-bottom: 10px;
}

label {
  width: $label-width;
  text-align: right;
  display: inline-block;
  vertical-align: top;
}

input {
  width: $input-width;
}

button {
  height: 26px;
  width: 75px;
}

input, textarea {
  padding: 3px 2px;
}

textarea {
  width: $input-width + 2;
  height: 500px
}

#clear {
  vertical-align: top;
}

Babel + JSX

function asKeyPadDigit(ch) {
  if (typeof ch === 'string' || ch instanceof String) {
    ch = String(ch).toUpperCase();
  }

  switch (ch) {
    case "A":
    case "B":
    case "C":
      return 2;

    case "D":
    case "E":
    case "F":
      return 3;

    case "G":
    case "H":
    case "I":
      return 4;

    case "J":
    case "K":
    case "L":
      return 5;

    case "M":
    case "N":
    case "O":
      return 6;

    case "P":
    case "Q":
    case "R":
    case "S":
      return 7;

    case "T":
    case "U":
    case "V":
      return 8;

    case "W":
    case "X":
    case "Y":
    case "Z":
      return 9;

    default:
      return ch;
  }
}

function sanitize(str) {
  return String(str)
    .replace(/[^\(\)\+A-Z\d\s\t\-]/gi, '');
}

function convert(str) {
  return String(str)
    .toUpperCase()
    .split('')
    .map(asKeyPadDigit)
    .join('');
}

(() => {
  const ENTER_KEY = 13;
  const $submit_button = document.querySelector("#submit");
  const $phone_number = document.querySelector("#phone_number");
  const $most_recent = document.querySelector("#most_recent");
  const $clear_button = document.querySelector("#clear");

  $submit_button.addEventListener('click', function() {
    const value = sanitize($phone_number.value);
    $phone_number.value = value;
    
    const converted = convert(value);
    $most_recent.innerHTML = `${converted}\n` + $most_recent.innerHTML;
  });
  
  $phone_number.addEventListener('focus', event => {
  	const $target = event.target;
    if ($target) {
  		$target.select();
		}
	});
  
  $clear_button.addEventListener('click', event => {
  	$most_recent.innerHTML = '';
  });
  
  $phone_number.addEventListener('keypress', event => {
  	switch (event.charCode) {
    	case ENTER_KEY:
      	$submit_button.click();
        break;
		}
  });
})();