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.setAttribute("style", "display:none;");
  var hint = document.getElementById("hint");
  hint.setAttribute("style", "display:none;");
  var req = document.getElementById("req");
  req.setAttribute("style", "display:none;");

  // Validate state entry of two letter abbreviation
  state.addEventListener("keyup", validateState);

  function validateState() {
    var st = state.value;
    var validate = new RegExp("\^[a-z]{2}$");
    var test = validate.test(st);
    if (test == true) {
      hint.setAttribute("style", "display:none;");
    } else {
      hint.setAttribute("style", "display:block; color: red");
    };
  };

  btn.addEventListener("click", validateSearch);

  function validateSearch() {
    if (state.value == "" && artist.value == "") {
      req.setAttribute("style", "display:block; color: red;");
    } else {
      req.setAttribute("style", "display:none;");

      (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.style.display = "block";
              document.getElementById("output").innerHTML = "No results. Please try different search parameters.";
            } else {
              output.innerHTML = "";
              output.setAttribute("style", "display:block;");

              //Create dropdown and insert onto...