JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<main>
  <div class="postcode-field">
    <label for="postcode">Post code</label>
    <input placeholder="Sectors or units" id="postcode" type="text" maxlength="8"><br>
    <desc>Coverage: <span id="coverage"></span></desc>
  </div>

  <div class="postcode-samples">
    <h4>Postcode variations</h4>
    <ul>
      <li>EC1A 1BB</li>
      <li>W1A 0AX</li>
      <li>M1 1AE</li>
      <li>B33 8TH</li>
      <li>CR2 6XH</li>
      <li>DN55 1PT</li>
    </ul>
  </div>
</main>

SCSS

html {
  box-sizing: border-box;
  height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: "Roboto", "Helvetica Neue";
  color: #3d3d3d;
  display: flex;
  margin-top: 25%;
  justify-content: center;
  height: 100%;  
}

.postcode-field {
  width: 255px;  
}

main {
  display: inline-block;
}

desc,
label {
  display: block;
  font-size: 12px;
  color: #666666;
  padding-bottom: 5px;
}

label:after {
  content: " *";
  color: #CC0000;
}

desc {
  float: right;
}

#postcode {
  width: 100%;
  height: 34px;
  border: solid 1px #ccc;
  color: #3d3d3d;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  padding: 0 12px;
  font-size: 14px;
  text-transform: uppercase;
&::placeholder {
    color: #A9A9A9;
    text-transform: none;    
  }

}

.postcode-samples {
  margin-top: 80px;
  font-size: 14px;
  h4 {
    font-weight: 500;
  }
}

JavaScript

const inputElem = document.getElementById('postcode')
const coverageElem = document.getElementById('coverage')

const regex = {
	whiteSpace: /\s/g,
	regexDistrict: /^[a-zA-Z]{1,2}[0-9][0-9a-zA-Z]$/g,
	regexSector: /[a-zA-Z]{1,2}[0-9][0-9a-zA-Z]?\s[0-9]/g,
	regexUnit: /[a-zA-Z]{1,2}[0-9][0-9a-zA-Z]?\s?[0-9][a-zA-Z]{2}/g,
  
}

function insertSpace(str, pos) {
	return [str.slice(0, pos), ' ', str.slice(pos)].join('')
}

function getCoverage() {
	return inputElem.value;
}

function formatPostCode(value) {
	const formattedValue = valuereplace(/^(.*)(\d)/, "$1 $2").replace(/\s/, ' ') : value

 if (formattedValue.match(regex.regexUnit)) {
      setCoverage('Unit')
  } else if (formattedValue.match(regex.regexSector)) {
      setCoverage('Sector')
  } else {
      setCoverage('Not defined')
  }

	inputElem.value = formattedValue

}

function onPostCodeInput(e) {
  const value = e.target.value;
  formatPostCode(value)
}

function setCoverage(value) {
	coverageElem.innerHTML = value
}

function init() {
	setCoverage('Not defined');
	inputElem.addEventListener("input", onPostCodeInput)
}

init();