index.html

---
layout: default
title: Contact Congress
---

<section class="introduction">
	<h1>Contact Congress</h1>
	<p>A simple, efficient way to get in touch with your congresspeople.</p>
</section>

<section class="congress">
  <h2 class="">Find Your Officials</h2>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <h4 for="jetsSearch">Search by state abbreviation:</h4>
        <div class="input-group">
          <span class="input-group-addon">State: </span>
          <input type="search" id="stateSearch" class="form-control" placeholder="2 Letter code...">
        </div>
      </div>
      <div class="col-md-6">
      <h4 for="nameSearch">Search by congressperson's name:</h4>
        <div class="input-group">
          <span class="input-group-addon">Name: </span>
          <input type="search" id="allSearch" class="form-control" placeholder="First or last...">
        </div>
      </div>
    </div>
  </div>
<br>
<br>
<div style="overflow-x:auto">
  <table class="table main-content">
    <thead>
      <td>Title</td>
      <td>Name</td>
      <td>State (D)</td>
      <td>Party</td>
      <td>Phone #</td>
      <td>Room</td>
    </thead>
    <tbody id="tabledata">
      {% for senator in site.data.senators %}
      <tr>
        <td>Senator</td>
        <td><a href="{{ senator.website }}">{{ senator.last }}, {{ senator.firstname }}</a></td>
        <td>{{ senator.location }}</td>
        {% if senator.party == "R" %}
        <td class="republican">Rep.</td>
        {% elsif senator.party == "D" %}
        <td class="democrat">Dem.</td>
        {% else %}
        <td>{{ senator.party }}</td>
        {% endif %}
        <td>{{ senator.phone }}</td>
        <td>{{ senator.address }}</td>
      </tr>
      {% endfor %}
      {% for rep in site.data.hor %}
      <tr>
        <td>Representative</td>
        <td>{{ rep.name }}</a></td>
        <td>{{ rep.state }} ({{ rep.district }})</td>
        {% if rep.party == "R" %}
        <td class="republican">Rep.</td>
        {% elsif rep.party == "D" %}
        <td class="democrat">Dem.</td>
        {% else %}
        <td>{{ rep.party }}</td>
        {% endif %}
        <td>{{ rep.phone }}</td>     
        <td>{{ rep.room }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
</section>
<script type="text/javascript">
 $('#stateSearch, #allSearch').on('keyup', function(e) {

   var stateFilter = $('#stateSearch').val();
   var nameFilter = $('#allSearch').val();

   var stateReg = new RegExp(stateFilter, 'i')
   var nameReg = new RegExp(nameFilter, 'i')

   $('#tabledata').find('tr').hide().each(function() {
     var $me = $(this);

     var matchesState = $me.children('td:nth-child(3)').text().match(stateReg);
     var matchesName = $me.children('td:nth-child(2)').text().match(nameReg);

     if (matchesState && matchesName) {
       $me.show()
     }

   })

 });
</script>