JSFiddle - React, Tailwind, and code Playground

by tecs717

HTML

<script>(function(n,t,i,r){var u,f;n[i]=n[i]||{},n[i].initial={accountCode:"EVERY11143",host:"EVERY11143.pcapredict.com"},n[i].on=n[i].on||function(){(n[i].onq=n[i].onq||[]).push(arguments)},u=t.createElement("script"),u.async=!0,u.src=r,f=t.getElementsByTagName("script")[0],f.parentNode.insertBefore(u,f)})(window,document,"pca","//EVERY11143.pcapredict.com/js/sensor.js")</script>

<div class="container">

  <div class="form-container">
    <label for="Address1">
    Address1:
      <input id="Address1" type="text" value="">
    </label>
    <label for="PostalCode">
    PostalCode:
      <input id="PostalCode" type="text" value="">
    </label>
    <label for="Locality">
    Locality:
      <input id="Locality" type="text" value="">
    </label>
    <label for="State">
    State:
      <input id="State" type="text" value="">
    </label>
    <label for="Country">
    Country:
      <input id="Country" type="text" value="United States">
    </label>
    <label>
      <button id="validate-button" type="button">
        Validate
      </button>
    </label>
  </div>
  
  <pre class="suggested" id="suggested">
  </pre>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
}

.form-container {
  display: flex;
  flex-direction: column;
}

.suggested {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  min-height: 400px;
  overflow: auto;
}

label {
  flex: 2;
  margin: 10px 0px;
  padding: 10px;
  min-width: 30px;
}

JavaScript

function validate(e) {
	e.preventDefault()
	console.log('validating')
}

$('button#validate-button').on('click', function(e) {
	$.ajax({
  	url: 'https://api.addressy.com/Cleansing/International/Batch/v1.00/json4.ws',
    method: "POST",
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({
    	Key: 'ZJ66-NR78-PA99-GZ35',
    	Addresses: [{
      	Address1: $('input#Address1').val(),
        PostalCode: $('input#PostalCode').val(),
        Locality: $('input#Locality').val(),
        Country: $('input#Country').val()
      }]
    }),
    success: function (response) {
    	var json = JSON.stringify(response[0].Matches[0], null, '\t')
    	$('pre#suggested').text(json)
    },
    error: function (err) {
    	console.log(err)
    }
  })

	e.preventDefault()
  console.log('validating')
})