JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<input id="postcode" type="text" value="GU146DQ" />

<p>postcode: <span id="output-postcode"></span></p>
<p>address-1: <span id="output-address-1"></span></p>
<p>address-2: <span id="output-address-2"></span></p>
<p>address-3: <span id="output-address-3"></span></p>
<p>town: <span id="output-town"></span></p>
<p>city: <span id="output-city"></span></p>
<p>county: <span id="output-county"></span></p>

CSS

body{
    font-family: monospace;
}

span{
    font-weight: bold;
}

JavaScript

/**
 * postcodes.io
 */
postcodeLookup = function(elem, newObj){
    var obj = {
        'postcode':'output-postcode',
        'address-1':'output-address-1',
        'address-1':'output-address-2',
        'address-1':'output-address-3',
        'town':'output-town',
        'city':'output-city',
        'county':'output-county'
    },
        input = elem.value,
        _t = this;
    
    _t.input = input;
    
    // Merge input
    if(typeof newObj === 'object'){
	    for(var key in input){
            if(obj[key]){
                obj[key] = newObj[key];
            }
        }
    }
    
    var lookup = function(){
        
  	  var xhr = new XMLHttpRequest(),
          requestUrl = 'https://api.postcodes.io/postcodes/' + _t.input.replace(/[^a-zA-Z0-9]+/g, '');
      xhr.open('GET', requestUrl, true);
      xhr.onload = function(e){
        console.log(JSON.parse(this.responseText));
      };
      xhr.send();
    }
    
    console.log(input);
    lookup(input);
}

new postcodeLookup(
    document.getElementById('postcode'),
    {
        //'town': 'output-town-2'
    }
);