<h1>get stock info</h1>
<div class="form">
	<label for="stockSymbol">select a company:</label>
	<select name="stockSymbol" onchange="updateStock()">
		<option value="AAPL">Apple</option>
		<option value="GOOG">Google</option>
		<option value="NDAQ">NASDAQ</option>
		<option value="SBUX">Starbucks</option>
		<option value="NKE">Nike</option>
		<option value="FB">Facebook</option>
		<option value="SNE">Sony</option>
		<option value="AMZN">Amazon</option>
	</select>
</div>
<div class="row">
	<div id="name" class="box"></div>
	<div id="bid" class="box"></div>
	<div id="low" class="box"></div>
	<div id="high" class="box"></div>
</div>
body {
	font-family: 'Helevetica Neue', sans-serif;
	background-color: #f5f5f5;
	text-align: center;
}

.row {
	width: 100%;
	clear: both;
	margin-top: 3%;
	font-size: 2.5em;
}

#name {
	font-weight: 900;
}

#name::after {
	content: 'symbol';
	position: absolute;
	font-weight: 300;
	bottom: 4px;
	font-size: 0.3em;
	left: 35%;
}

.box {
	position: relative;
	display: inline-block;
	padding: 3px 10px 15px;
	background-color: #fff;
	border: 2px solid #eee;
	min-width: 130px;
	
	 -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@media screen and (max-width: 760px) {
	.box {
		font-size: .4em;
		min-width: 60px;
	}
}

#low {
	background-color: #FC7861;
	color: #fff;
}

#low::after {
	content: 'low';
	position: absolute;
	bottom: 4px;
	font-size: 0.3em;
	left: 45%;
	font-weight: 300;
}

#high {
	background-color: #45a7b9;
	color: #fff;
}

#bid::after {
	content: 'current';
	position: absolute;
	bottom: 4px;
	font-size: 0.3em;
	left: 35%;
	font-weight: 300;
}

#high::after {
	content: 'high';
	position: absolute;
	bottom: 4px;
	font-size: 0.3em;
	left: 45%;
	font-weight: 300;
}

label {
	font-size: .7em;
	padding: 5px;
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
var nameBox = document.getElementById('name');
var bidBox = document.getElementById('bid');
var lowBox = document.getElementById('low');
var highBox = document.getElementById('high');
var httpRequest;

function updateStock() {
	document.getElementsByClassName('row')[0].style.display = 'none';
	var stockSymbol = document.getElementsByName("stockSymbol")[0].value;
	nameBox.innerText = stockSymbol;
	makeRequest('https://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20where%20symbol%20in%20%28%22' + stockSymbol + '%22%29%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json')
	
	document.getElementsByClassName('row')[0].style.display = 'block';
};

function makeRequest(url) {
	httpRequest = new XMLHttpRequest();

	if (!httpRequest) {
		alert('failing at life, ugh');
		return false;
	}
	httpRequest.onreadystatechange = alertContents;
	httpRequest.open('GET', url);
	httpRequest.send();
}

function alertContents() {
	if (httpRequest.readyState === XMLHttpRequest.DONE) {
		if (httpRequest.status === 200) {
			var data = JSON.parse(httpRequest.responseText).query.results.quote;
			bidBox.innerText = Number(data.Bid).toFixed(2);
			lowBox.innerText = Number(data.DaysLow).toFixed(2) + '↓';
			highBox.innerText = Number(data.DaysHigh).toFixed(2) + '↑';
		} else {
			alert('There was a problem with the request.');
		}
	}
};

window.onload(updateStock());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.