crismanNoble

//load in papaparse script
var papaparse_script = document.createElement("script");
papaparse_script.type = "text/javascript";
papaparse_script.src = "https://cdn.jsdelivr.net/npm/papaparse@5.3.2/papaparse.min.js";
document.body.appendChild(papaparse_script)

//fetch the data
var sheet_csv = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQZBb0hdC5AnYmi445Ie0mDKuH6ipRjwmSZmEJppOLviHJnW1jLSow3jjwBO1QT-y_raxlEvzDC28b2/pub?gid=1752595225&single=true&output=csv';

fetch(sheet_csv)

crismanNoble

<form>
  <label for="zip">Zip:</label>
  <input id="zip" name="zip"/>
  <label for="city">City:</label>
  <div id="city-input-wrapper"><!-- wrap the city input so we can change to a dropdown if necessary -->
    <input id="city" name="city"/>
  </div>
  <label for="state">State:</label>
  <input id="state" name="state"/>
</form>

crismanNoble

function fillCityAndStateFields(localities) {
  var locality = localities[0]; 
  
  $('#city').val(locality.city);
  $('#state').val(locality.state);

  var $input;

  if(localities.length > 1) { //possibly create a dropdown if we have multiple cities in the result.
    var $select = $(document.createElement('select'));

crismanNoble

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "60047",
               "short_name" : "60047",
               "types" : [ "postal_code" ]
            },
            {

crismanNoble

$('#zip').blur(function(){
  var zip = $(this).val();
  var api_key = 'YOUR_API_KEY_HERE';
  if(zip.length){
    //make a request to the google geocode api with the zipcode as the address parameter and your api key
    $.get('https://maps.googleapis.com/maps/api/geocode/json?address='+zip+'&key='+api_key).then(function(response){
      //parse the response for a list of matching city/state
      var possibleLocalities = geocodeResponseToCityState(response);
      fillCityAndStateFields(possibleLocalities);
    });

crismanNoble

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "92102",
               "short_name" : "92102",
               "types" : [ "postal_code" ]
            },
            {

crismanNoble

python -m SimpleHTTPServer 1337

crismanNoble

//do one thing after another is finished
const doThing = async function(timeout) {
	const resp = await fetch(scheduleEndpoint, {method: 'POST', body: params}); //needs to return a promise?
  	return resp;
}
await doThing();          //do an api call or something async that returns a promise
console.log('all done');  //don't do anything else until that is finished.

//do a bunch of things in series, then do something else
//https://zellwk.com/blog/async-await-in-loops/

crismanNoble

<form class="mc-form-example" method="POST" action="./endpoint.php">
  <h3>Newsletter Sign Up</h3>
  <label for="mc-email">Email Address:</label>
  <input type="email" id="mc-email" name="mc-email" required/>
  <input type="text" value="pending" id="status" name="status" hidden/>
  <input type="submit" value="Submit">
</form>

crismanNoble

api key: Y0UR_AP1_K3Y
datacenter: us6
list id: 24d099dff7