JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Find Local Farmers Markets</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
   <title>VA Medical Center Finder</title>
    <meta name="description" content="">
    <meta name="author" content="Alex Azuero">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <!--[if lt IE 9]>
        <script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key="></script>
    <script language="javascript" type="text/javascript" src="js/map.js"></script>
    <script language="javascript" type="text/javascript" src="js/search.js"></script>
  </head>
  <body>
  
    <div id="control">
        <h2>Find Local Farmers Markets</h2>
        <p>We'll help you locate your closest farmers markets. Simply choose an option below to begin...</p>
        <form method="get" id="chooseZip">
            <button type="submit" class="learnButton">Use current location</button>
            <button type="button" id="searchZip" class="learnButton">Search by Zip Code</button>
            <div class="clear"></div>
            <div class="zipSearch">
                <input id="textZip" type="text" name="zip" placeholder="enter your zip code" autofocus>
                <button type="submit" class="learnButton">Search</button>
            </div>
            <div class="clear"></div>
        </form>
        
     
    </div>
    
    <!-- an empty div for the map -->
    <div id="map-canvas"></div>


  </body>
</html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*




*/
/* Global styles */
html, body {
	height: 100%;
	margin: 0px;
	padding: 0px
  }


body {
	font-family: "Open Sans", sans-serif;
	/* font-family: 'Libre Baskerville', serif; */
	color: #686868;
	font-size: 15px;
	background-color: #6B7283;
}


.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

.clear{
	clear: both;
}

a {
	text-decoration: none;
	color: #79accd;
}

a:hover {
	color: #79accd;
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 17px;
	font-weight: 300;
	/* color: #ff5400; */
}

h1 {
	font-size: 28px;
}

h2 {
	font-size: 26px;
}

h3 {
	font-size: 24px;
	margin-bottom: 15px;
}

ul{
	list-style-type: square;
	margin-left: 60px;
	margin-bottom: 30px;
}

ul li{
	line-height: 1.9;
}


.zipSearch{
	display: none;
}

/* Popup */
.markerPop{
	
}


.twitter{
	float: left;
}

.facebook{
	float: left;
	width: 150px !important;
	height: 35px !important;
}

/* tablets and desktop */
@media only screen and (min-width: 361px)...

JavaScript

$(function() {
	$( "#searchZip" ).click(function() {
		$("#searchZip").hide();
		$( ".zipSearch" ).show();
	});
});




/* Pull local Farers market data from the USDA API and display on 
** Google Maps using GeoLocation or user input zip code. By Paul Dessert
** www.pauldessert.com | www.seedtip.com
*/

$(function() {
	
		var marketId = []; //returned from the API
		var allLatlng = []; //returned from the API
		var allMarkers = []; //returned from the API
		var marketName = []; //returned from the API
		var infowindow = null;
		var pos;
		var userCords;
		var tempMarkerHolder = [];
		
		//Start geolocation
		
		if (navigator.geolocation) {    
		
			function error(err) {
				console.warn('ERROR(' + err.code + '): ' + err.message);
			}
			
			function success(pos){
				userCords = pos.coords;
				
				//return userCords;
			}
		
			// Get the user's current position
			navigator.geolocation.getCurrentPosition(success, error);
			//console.log(pos.latitude + " " + pos.longitude);
			} else {
				alert('Geolocation is not supported in your browser');
			}
		
		//End Geo location
	
		//map options
		var mapOptions = {
			zoom: 5,
			center: new google.maps.LatLng(37.09024, -100.712891),
			panControl: true,
			panControlOptions: {
				position: google.maps.ControlPosition.BOTTOM_LEFT
			},
			zoomControl: true,
			zoomControlOptions: {
				style: google.maps.ZoomControlStyle.LARGE,
				position: google.maps.ControlPosition.RIGHT_CENTER
			},
			scaleControl: true

		};
    ///END OF MAP OPTIONS
	
	//Adding infowindow option
	infowindow = new google.maps.InfoWindow({
		content: "holding..."
	});
  //END of infoWIndows
	
	//Fire up Google maps and place inside the map-canvas div
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	//grab form data
    $('#chooseZip').submit(function() { // bind function to submit event of form
		
		//define and set variables
		var userZip = $("#textZip").val();
		//console.log("This-> " +...