Vacation Roulette

index.html

<h1>Where should I go on vacation?</h1>
<section class="spinner">
	<div class="roller">
		<ul>
			<li>Miami</li>
			<li>New York City</li>
			<li>Los Angeles</li>
			<li>Seattle</li>
			<li>Las Vegas</li>
			<li>St. Louis</li>
			<li>New Orleans</li>
			<li>Austin</li>
			<li>San Diego</li>
			<li>Washington, D.C.</li>
			<li>San Francisco</li>
			<li>Chicago</li>
			<li>Boston</li>
			<li>Aspen</li>
		</ul>
	</div>
	<footer>
		<button class="stop">Stop</button>
	</footer>
</section>

<div id="map-canvas"></div>

<script type="text/javascript"
      src="//maps.googleapis.com/maps/api/js?key=AIzaSyCWDTpaxDRbb7kc7RwK6erzqjsU_X5L6KA ">
    </script>

script.js

$(function(){
	var geocoder,
		map,
		lastCity;

	google.maps.event.addDomListener(window, 'load', initialize);
	spin();

	function spin(){
		$(".roller ul").css('animation', 'scroll-numbers 1s linear infinite');
		$(".stop").text("Stop").off().on("click", stop);
	}

	function stop(){
		var randomIndex = pickRandomIndex();
		var city = $($(".roller li").get(randomIndex)).text();
		var top = (randomIndex * -2);
		$(".roller ul").css({  "top": top+"em", "animation": "none"  });
		geocodeAddress(city);
		$(".stop").text("Respin").off().on("click", spin);
	}

	function pickRandomIndex(){
		return Math.floor(Math.random() * ($(".roller li").length - 1 + 1));
	}

	function initialize() {
		geocoder = new google.maps.Geocoder();
		var latlng = new google.maps.LatLng(-24, 117.5);
		var mapOptions = {
			zoom: 12,
			center: latlng,
    	disableDefaultUI: true
		}
		map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		geocodeAddress("Manchester, NH");
	}

	function geocodeAddress(addr) {
		lastCity = addr;
		geocoder.geocode( { 'address': addr}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map: map,
					position: results[0].geometry.location
				});
			} 
			else {
				alert('Geocode was not successful for the following reason: ' + status);
			}
		});
	}

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);

@include keyframes(scroll-numbers){
	from { top: 0;  }
	to {  top: -28em;  }
}

body {
	font-family: 'Roboto', Helvetica, sans-serif;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

h1 {
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	font-size: 2em;
	padding: 0.5em;
	margin: 0;
	background-color: teal;
	color: white;
	@include text-shadow(0 0 2px black);
	width: 100vw;
	z-index: 500;
	text-transform: uppercase;
	@include box-shadow(0px 0px 10px 0px black);
}

#map-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

.spinner {
	margin: 0;
	font-size: 1.5em;
	position: absolute;
	bottom: 2vh;
	left: 25vw;
	width: 50vw;
	z-index: 100;
	@include box-shadow(0px 0px 10px 0px black);

	footer {
		position: absolute;
		top: 0;
		right: 0;
		width: 15vw;
		height: 100%;

		.stop {
			width: 100%;
			height: 100%;
		}
	}

	.stop {
		display: block;
		margin: 0;
		line-height: 1.5em;
		font-size: 1em;
		width: 100%;
		@include appearance(none);
		border: 0 none;
		background: darkorange;
		color: white;
		@include text-shadow(0 0 0.5em black);
		text-transform: uppercase;
		outline: 0 none;
	}
}

.roller {
	background: teal;
	color: white;
	@include text-shadow(0 0 0.25em black);
	font-weight: bold;
	width: 35vw;
	height: 2em;
	position: relative;
	overflow: hidden;
	
	ul {
		width: 100%;
		position: absolute;
		font-size: 1em;
		list-style: none;
		margin: 0;
		padding: 0;
		line-height: 2em;
		height: 2em;
		//@include animation(scroll-numbers 1s linear infinite);
		
		li {
			display: block;
			text-align: center;
		}
	}
}

Vacation Roulette.markdown

Vacation Roulette

Practicing some Google Maps Javascript API by picking a random location and bringing you to it.

Code Brü entry for June 2015.

A Pen by Jeremy Paris on CodePen.

License.