JSFiddle - React, Tailwind, and code Playground

by jupiterjazz

HTML

<h1>Look up your legislators</h1>

<form id="get-zip">
  <label for="zip">Enter your zip code:</label>
  <input id="zip" type="text">
  <button type="submit">Look up</button>
</form>

<ul id="legislators">
</ul>

JavaScript

$(function() {
  $("form#get-zip").submit(function() {
    var zip = $("input#zip").val();
    $.get("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip, function(responseText) {
      responseText.results.forEach(function(legislator) {
        $("ul#legislators").append("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "</li>");
        $("li").click(function() {
        	$(this).append("<p>Party: " + legislator.party + ", District: " + legislator.district + "</p>");
        });
      });      
    });
    return false;
  });
});