scripts.js

function locationPick() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
};

var api_url_auto = "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/autoip.json";

var api_urls_dropdown = ["http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/Amsterdam.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/nijmegen.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/rotterdam.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/arnhem.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/venlo.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/utrecht.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/the_hague.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/Eindhoven.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/Tilburg.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/Groningen.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/nl/Breda.json",
    "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/locid:NLXX0053.json"
  ];
var temp_f,
  d = new Date(),
  country,
  city,
  temp_c,
  icon_url,
  weather,
  zmw,
  searchValue,
  countrySym,
  cityN,
  timezone,
  clockID,
  tzDifference,
  offset,
  date;


function displayWeatherFromAPIResult(searchresult) {   
    country = searchresult['location']['country_name'];
    city = searchresult['location']['city'];
    temp_f = searchresult['current_observation']['temp_f'];
    temp_c = searchresult['current_observation']['temp_c'];
    icon_url = searchresult['current_observation']['icon_url'];
    weather = searchresult['current_observation']['weather'];
    date = searchresult['current_observation']['local_time_rfc822'].substring(0, 16);
    timezone = searchresult['current_observation']['local_tz_offset'] / 100;
    tzDifference = timezone * 60 + d.getTimezoneOffset();
    offset = tzDifference * 60 * 1000;
    
    // display in document
    document.getElementById("wbox").innerHTML = country + ", " + city + "<br>" + "Temperature in Fahrenheit: " + temp_f + " °F" + "<br>" + "Temperature in Celsius: " + temp_c + " °C";
    document.getElementById("imgbox").innerHTML = "<img src=" + icon_url + ">" + "<p>" + weather + "</p>";
    document.getElementById("date").innerHTML = "<p>" + date + "</p>";   
}
    
    
function loadAndDisplayWeatherFromAPI(apiURL) {
    $.getJSON(apiURL, displayWeatherFromAPIResult);
}

loadAndDisplayWeatherFromAPI(api_url_auto);

function dropPick(index) {
  var apiURL = api_urls_dropdown[index];
  loadAndDisplayWeatherFromAPI(apiURL);
};

// searchresult contains weather from API, but we don't know whether there's multiple cities, one city, or an error
// this function what the situation is (error / multiple / single city), and then continues
function processDataFromSearchAPI(searchresult) {
    if (searchresult['response'].hasOwnProperty('error')) {
        // it was an error, display it to the user
        document.getElementById("results").innerHTML = "<p>No cities match your search query</p>";
    } else {
        // no error
        var len = searchresult['response'].results;
        if (len != undefined) {
            // multiple cities, show options to user
            for (var i = 0; i < len.length; i++) {
                for (var x in len[i]) {
                zmw = len[i].zmw;
                countrySym = len[i].country;
                cityN = len[i].city;
                };
                document.getElementById("results").innerHTML += "<a href='#' onclick='changezmw(\"" + zmw + "\",\"" + countrySym + "\",\"" + cityN + "\");return false;'>" + len[i].city + ", " + len[i].country_name + "<br>" + "</a>";
            };
        } else {
            // single city, show weather from searchresult
            displayWeatherFromAPIResult(searchresult);
        }
    }
};
  
function search() {
  document.getElementById("results").innerHTML = "";
  var searchValue = document.getElementById('rep').value;
  var searchAPIURL = "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/" + searchValue + ".json"
  $.getJSON(searchAPIURL, processDataFromSearchAPI);
};

function changezmw(zmw, countrySym, cityN) {
  document.getElementById("results").innerHTML = "";
  api = "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/" + zmw + ".json";
  $.getJSON(api, function(json) {
    if (json['location'] != undefined) {
      country = json['location']['country_name'];
      city = json['location']['city'];
      temp_f = json['current_observation']['temp_f'];
      temp_c = json['current_observation']['temp_c'];
      icon_url = json['current_observation']['icon_url'];
      weather = json['current_observation']['weather'];
      date = json['current_observation']['local_time_rfc822'].substring(0, 16);
      timezone = json['current_observation']['local_tz_offset'] / 100;
      tzDifference = timezone * 60 + d.getTimezoneOffset();
      offset = tzDifference * 60 * 1000;
      document.getElementById("wbox").innerHTML = country + ", " + city + "<br>" + "Temperature in Fahrenheit: " + temp_f + " °F" + "<br>" + "Temperature in Celsius: " + temp_c + " °C";
      document.getElementById("imgbox").innerHTML = "<img src=" + icon_url + ">" + "<p>" + weather + "</p>";
      document.getElementById("date").innerHTML = "<p>" + date + "</p>";
    } else {
      api = "http://api.wunderground.com/api/de6de9e8fba287f3/geolookup/conditions/q/" + countrySym + "/" + cityN + ".json";
      $.getJSON(api, function(json) {
        country = json['location']['country_name'];
        city = json['location']['city'];
        temp_f = json['current_observation']['temp_f'];
        temp_c = json['current_observation']['temp_c'];
        icon_url = json['current_observation']['icon_url'];
        weather = json['current_observation']['weather'];
        date = json['current_observation']['local_time_rfc822'].substring(0, 16);
        timezone = json['current_observation']['local_tz_offset'] / 100;
        tzDifference = timezone * 60 + d.getTimezoneOffset();
        offset = tzDifference * 60 * 1000;
        document.getElementById("wbox").innerHTML = country + ", " + city + "<br>" + "Temperature in Fahrenheit: " + temp_f + " °F" + "<br>" + "Temperature in Celsius: " + temp_c + " °C";
        document.getElementById("imgbox").innerHTML = "<img src=" + icon_url + ">" + "<p>" + weather + "</p>";
        document.getElementById("date").innerHTML = "<p>" + date + "</p>";
      });
    };

  });

};

function UpdateClock() {
  var tDate = new Date(new Date().getTime() + offset);
  var in_hours = tDate.getHours();
  var in_minutes = tDate.getMinutes();
  var in_seconds = tDate.getSeconds();

  if (in_hours > 12) {
    in_hours -= 12;
    document.getElementById('clock').innerHTML = "Local Time: " + addZero(in_hours) + ":" + addZero(in_minutes) + ":" + addZero(in_seconds) + " PM".fontsize(2).bold();
  } else if (in_hours === 0) {
    in_hours = 12;
  } else {
    document.getElementById('clock').innerHTML = "Local Time: " + addZero(in_hours) + ":" + addZero(in_minutes) + ":" + addZero(in_seconds) + " AM".fontsize(2).bold();
  };

  function addZero(num) {
    return (num < 10) ? '0' + num : num;
  }

}

function StartClock() {
  clockID = setInterval(UpdateClock, 500);
}

function KillClock() {
  clearTimeout(clockID);
}

StartClock();