Concert App

Answers the simple questions "

by Ford Heacock

HTML

<h1>Is Hawk Nelson playing near me soon?</h1>
        <form id="bloc">
            <label>City, State</label>
            <input type="text" id="user" placeholder="City, State" />
            <button type="button" value ="Submit" id="submit">Submit</button>
        </form>
             <div id="loader"></div>
             <div id="message"></div>
             <div id="tour-dates"></div>

CSS

h1 {
	font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
	font-weight: 300;
}
label {
	display: block;
	font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
	font-weight: 400;
	font-size: 12px;
	text-transform: uppercase;
	margin-bottom: 5px;
	display: none;
}
input {
	border: 2px solid #ccc;
	border-radius: 4px;
	font-size: 20px;
	padding: 0px 9px;
	height: 40px;
	margin: 0px;
}

button {
	height: 44px;
	line-height: 44px;
	border: none;
	font-size: 20px;
	text-transform: uppercase;
	border-radius: 4px;
	padding: 0px 18px;
	background: #188BCF;
	color: white;
	font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
	cursor: pointer;
}

button:hover {
	background: #273A49;

}

button:focus {
	border: none;
	box-shadow: none;
}

a.btn {
	display: inline-block;
	border: none;
	margin-top: 15px;
	font-size: 15px;
	text-transform: uppercase;
	border-radius: 4px;
	padding: 9px;
	background: #ECC04A;
	color: white;
	font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
	cursor: pointer;
	text-decoration: none;
}

#message {
	font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
	font-weight: bold;
}

#tour-dates {
	font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
}

JavaScript

var arrayOne = [];
var locationInput = document.getElementById("user");

function bitConcertList() {
  var url = 'http://api.bandsintown.com/artists/Hawk%20Nelson/events/search.json?api_version=2.0&app_id=hawknelson&location=' + arrayOne[0] + '&radius=90';

          $.ajax({
             type: 'GET',
              url: url,
              async: false,
              jsonpCallback: 'jsonCallback',
              contentType: "application/json",
              dataType: 'jsonp',
              beforeSend: function() {
                $('#loader').html('<p>Loading...</p>');
              },
              success: function(json) {
                $('#loader').empty();
                console.log("success");
                var items = [];
                var i = 0;
                console.log(items);
                  
                  $.each(json, function(key, value) {
                    console.log(value);
                    i++;
                    var time = value.datetime;
                    var date = new Date(time);
                    var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
                      "July", "Aug", "Sep", "Oct", "Nov", "Dec" ];
                    
                    if(!items) {
                      $('#message').html('<p>Sorry, no shows!</p>');
                      return;
                    } else {
                    $('#message').html('<p>Yes! There are upcoming shows within 90 miles!</p>');
                    items.push(value.artists[0].name + ' @ ' +  value.venue.name + '<br/>' + value.formatted_datetime + '<br/><a href="' + value.ticket_url + '" class="btn">Buy Tickets</a><br/><br/>');
                    }
                    if (value.artists[1]) {
                      $('#message').append('<p>It looks like ' + value.artists[1].name + ' is also performing with Hawk that day</p>');
                    } else if (value.artists[2]) {
                       $('#message').append('<p>It looks like ' +...