JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto+Slab|Ubuntu"></script>
<div class="find-module">
    <h1>Find your represenatives</h1>
    <input id="JS-zip-code" placeholder="Zip code">
    <button id="JS-submit">Find</button>
</div>
<div class="searching-message">
    <h1>Searching</h1>
</div>
<div id="JS-result" class="result">

</div>

SCSS

$white: #fff;
$grey-light: #b2bec3;
$grey-dark: #636e72;
$black: #2d3436;
$blue: #0984e3;
$red: #d63031;

$font-1: 'Roboto Slab', serif;
$font-2: 'Ubuntu', sans-serif;

body{
	background: $grey-light;
}
.find-module{
	&{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 4;
		width: 100%;
		padding: 20px;
		text-align: center;
		font-size: 0;
		transition: .3s ease-out;
	}
	.searching &{
		transform: translateY(-70%);
		opacity: 0;
	}
	h1{
		margin: 0 0 14px;
		font-family: $font-1;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 4px;
		text-transform: uppercase;
		color: $grey-dark;
	}
	input{
		padding: 10px;
		border: 3px solid $grey-dark;
		font-family: $font-2;
		font-size: 12px;
		transition: .3s ease-out;
		outline: none;
	}
	input:hover,
	input:focus{
		background: lighten($grey-light, 20);
		border: 3px solid $black;
	}
	button{
		padding: 10px 20px;
		border: 3px solid $grey-dark;
		font-family: $font-2;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 1px;
		background: $grey-dark;
		color: $white;
		transition: .3s ease-out;
		cursor: pointer;
	}
	button:hover{
		border: 3px solid $black;
		background: $black;
	}
}
.searching-message{
	&{
		position: absolute;
		top: 50%;
		transform: translateY(-30%);
		z-index: 2;
		width: 100%;
		padding: 20px;
		text-align: center;
		font-size: 0;
		transition: .3s ease-out;
		opacity: 0;
	}
	.searching &{
		transform: translateY(-50%);
		opacity: 1;
	}
	.found &{
		transform: translateY(-70%);
		opacity: 0;
	}
	h1{
		margin: 0 0 14px;
		font-family: $font-1;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 4px;
		text-transform: uppercase;
		color: $grey-dark;
		}
}
.result{
	&{
		position: absolute;
		top: 50%;
		transform: translateY(-30%);
		z-index: 2;
		width: 100%;
		padding: 20px;
		text-align: center;
		font-size: 0;
		transition: .3s ease-out;
		opacity: 0;
	}
	.searching &{
		z-index: 4;
	}
	.found &{
		transform: translateY(-50%);
		opacity:...

JavaScript

var $body = $("body");
var represenativeLookup = (function() {

    var input = $("#JS-zip-code");
    var submit = $("#JS-submit");
    var result = $("#JS-result");
    var apiKey = "AIzaSyBTzDYhab6Zfc-fYOrJkj5PsUuFiLIDmmI";
    var apiURL = "https://www.googleapis.com/civicinfo/v2/representatives";

    submit.on("click", function() {
        lookup(input.val());
    });

    function lookup(zip) {
        $body.addClass("searching");
        jQuery.ajax({
            url: apiURL + "?address=" + input.val() + "&levels=country&roles=legislatorLowerBody&roles=legislatorUpperBody&key=" + apiKey,
            success: display
        });

    }

    function display(data) {
        $body.addClass("found");
        console.log(data.officials)
        data.officials.forEach(add_person);
    }

    function add_person(info) {
        var frag = $("<div class='person'></div>");
        frag.append("<div class='photo' style='background-image: url(" + info.photoUrl + ");'></div>");
        frag.append("<div class='name'>" + info.name + "</div>");
        frag.append("<div class='party party-" + info.party.toLowerCase() + "'>" + info.party + "</div>");
        frag.append("<h3 class='headline'>Contact</h3>");
        frag.append("<div class='contact'>" + info.address[0].line1 + "</div>");
        if (info.address[0].line2) {
            frag.append("<div class='contact'>" + info.address[0].line2 + "</div>");
        }
        frag.append("<div class='contact'>" + info.address[0].city + ", " + info.address[0].state + " " + info.address[0].zip + "</div>");
        frag.append("<div class='contact'>" + info.phones[0] + "</div>");
        frag.append("<h3 class='headline'>Social</h3>");
        info.channels.forEach(channel => {
            frag.append("<a class='social social-" + channel.type.toLowerCase() + "' href='https://" + channel.type.toLowerCase() + ".com/" + channel.id + "'>" + channel.type + "</a>");
        })
        result.append(frag);
    }

})()