Search Engine

index.html

@@ -20,7 +20,7 @@
  <div class="weather-app">
  <form class="search-form" id="search-form">
  <div class="row">
- <div class="col-9">
+ <div class="col-6">
  <input
  type="search"
  placeholder="Type a city.."
@@ -34,48 +34,37 @@
  <input
  type="submit"
  value="Search"
- class="form-control btn btn-primary shadow-sm"
+ class="form-control btn btn-primary shadow-sm w-100"
  />
  </div>
+ <div class="col-3">
+ <button
+ class="btn btn-success w-100"
+ id="current-location-button"
+ >
+ Current
+ </button>
+ </div>
  </div>
  </form>
- <h1 id="city">
- Sydney NSW, Australia
- </h1>
+ <h1 id="city"></h1>
  <ul>
  <li id="date"></li>
- <li>
- Partly Cloudy
- </li>
+ <li id="description"></li>
  </ul>
  <div class="row">
  <div class="col-6">
  <div class="clearfix">
- <img
- src="https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png"
- alt="Cloudy icon"
- class="weather-icon float-left"
- />
  <div class="float-left">
- <span class="temperature" id="temperature">19</span
- ><span class="units">
- <a href="#" id="celsius-link">°C</a> |
- <a href="#" id="fahrenheit-link">°F</a>
- </span>
+ <span class="temperature" id="temperature"></span
+ ><span class="units">°C</span>
  </div>
  </div>
  </div>
  <div class="col-6">
  <ul>
- <li>
- Precipitation: 0%
- </li>
- <li>
- Humidity: 77%
- </li>
- <li>
- Wind: 8 km/h
- </li>
+ <li>Humidity: <span id="humidity"></span>%</li>
+ <li>Wind: <span id="wind"></span> km/h</li>
  </ul>
  </div>
  </div>

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");