diff --git a/index.html b/index.html index 4e3e0a6..06af7f5 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@
-
+
+
+ +
-

- Sydney NSW, Australia -

+

  • -
  • - Partly Cloudy -
  • +
- Cloudy icon
- 19 - °C | - °F - + °C
    -
  • - Precipitation: 0% -
  • -
  • - Humidity: 77% -
  • -
  • - Wind: 8 km/h -
  • +
  • Humidity: %
  • +
  • Wind: km/h
diff --git a/script.js b/script.js index c1c9584..cb5abed 100644 --- a/script.js +++ b/script.js @@ -23,11 +23,42 @@ function formatDate(date) { return `${day} ${hours}:${minutes}`; } -function search(event) { +function displayWeatherCondition(response) { + document.querySelector("#city").innerHTML = response.data.name; + document.querySelector("#temperature").innerHTML = Math.round( + response.data.main.temp + ); + + document.querySelector("#humidity").innerHTML = response.data.main.humidity; + document.querySelector("#wind").innerHTML = Math.round( + response.data.wind.speed + ); + document.querySelector("#description").innerHTML = + response.data.weather[0].main; +} + +function searchCity(city) { + let apiKey = "cabdbda40038ba7d1165b953b1c7bd6c"; + let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`; + axios.get(apiUrl).then(displayWeatherCondition); +} + +function handleSubmit(event) { + event.preventDefault(); + let city = document.querySelector("#city-input").value; + searchCity(city); +} + +function searchLocation(position) { + let apiKey = "cabdbda40038ba7d1165b953b1c7bd6c"; + let apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${position.coords.latitude}&lon=${position.coords.longitude}&appid=${apiKey}&units=metric`; + + axios.get(apiUrl).then(displayWeatherCondition); +} + +function getCurrentLocation(event) { event.preventDefault(); - let cityElement = document.querySelector("#city"); - let cityInput = document.querySelector("#city-input"); - cityElement.innerHTML = cityInput.value; + navigator.geolocation.getCurrentPosition(searchLocation); } function convertToFahrenheit(event) { @@ -42,18 +73,14 @@ function convertToCelsius(event) { temperatureElement.innerHTML = 19; } -// Feature #1 let dateElement = document.querySelector("#date"); let currentTime = new Date(); dateElement.innerHTML = formatDate(currentTime); -// Feature #2 let searchForm = document.querySelector("#search-form"); -searchForm.addEventListener("submit", search); +searchForm.addEventListener("submit", handleSubmit); -// Bonus Feature -let fahrenheitLink = document.querySelector("#fahrenheit-link"); -fahrenheitLink.addEventListener("click", convertToFahrenheit); +let currentLocationButton = document.querySelector("#current-location-button"); +currentLocationButton.addEventListener("click", getCurrentLocation); -let celsiusLink = document.querySelector("#celsius-link"); -celsiusLink.addEventListener("click", convertToCelsius); +searchCity("New York");