JSFiddle - React, Tailwind, and code Playground

by kristenconnal

JavaScript

/* Kristen Connal Final Project 2018 */

window.onload = function() {

  var state = document.getElementById("state");
  var artist = document.getElementById("artist");
  var btn = document.getElementById("submit");
  var output = document.getElementById("output");
  output.style.display = "none";

  btn.addEventListener("click", search);

  function search() {
    var x = new XMLHttpRequest();
    x.open("GET", "https://app.ticketmaster.com/discovery/v2/events.json?keyword=" + artist.value + "&stateCode=" + state.value + "&apikey=3ovnC8ikyfAxH2FleyAvU1jBZNGv3rpg");
    x.send();

    x.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var test = JSON.parse(this.response)._embedded;

        // Test for results found
        if (test != undefined) {
          output.innerHTML = "";
          output.style.display = "block";

          //Create dropdown and insert onto page
          var dropdown = document.createElement("select");
          var details = document.createElement("option");
          details.text = "Select event for further details";
          dropdown.appendChild(details);
          output.appendChild(dropdown);

          // Locate events
          var testing = JSON.parse(this.response);
          var embedded = JSON.parse(this.response)._embedded;
          var evt = JSON.parse(this.response)._embedded.events;

          // Iterate over events and add names to dropdown
          for (i = 0; i < evt.length; i++) {
            var option = document.createElement("option");
            var name = evt[i].name;
            var date = evt[i].dates.start.localDate;
            option.text = name + " | " + date;
            option.value = evt[i].id;
            dropdown.appendChild(option);
          }

          // Create event listener for dropdown selection
          dropdown.addEventListener("change", display);

          // Create function to display additional details for selected event in div below...