-
-
- Sydney NSW, Australia
-
+
-
- -
- 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");