https://extraordinary-chebakia-fb9b75.netlify.app/src/script.js

1function search(city) {
2  let apiUrl = `https://api.shecodes.io/weather/v1/current?query=${city}&key=4f8936d039ct62ob3b4f9d73a4bb6536&units=metric`;
3  axios.get(apiUrl).then(showWeatherInfo);
4}
5
6function handleSubmit(event) {
7  event.preventDefault();
8  let city = document.querySelector("#input-field").value;
9  search(city);
10}
11
12function searchMyLocation(position) {
13  let apiUrl = `https://api.shecodes.io/weather/v1/current?lon=${position.coords.longitude}&lat=${position.coords.latitude}&units=metric&key=4f8936d039ct62ob3b4f9d73a4bb6536`;
14  axios.get(apiUrl).then(showWeatherInfo);
15}
16
17function getMyLocation(event) {
18  event.preventDefault();
19  navigator.geolocation.getCurrentPosition(searchMyLocation);
20}
21
22function showDate(today) {
23  let days = [
24    "Sunday",
25    "Monday",
26    "Tuesday",
27    "Wednesday",
28    "Thursday",
29    "Friday",
30    "Saturday",
31  ];
32  let months = [
33    "01",
34    "02",
35    "03",
36    "04",
37    "05",
38    "06",
39    "07",
40    "08",
41    "09",
42    "10",
43    "11",
44    "12",
45  ];
46  let day = days[today.getDay()];
47  let month = months[today.getMonth()];
48  let dateOfMonth = today.getDate();
49  let year = today.getFullYear();
50  return `${day} ${month} / ${dateOfMonth} / ${year}`;
51}
52
53function showTime(now) {
54  let hour = now.getHours();
55  if (hour < 10) {
56    hour = `0${hour}`;
57  }
58  let minutes = now.getMinutes();
59  if (minutes < 10) {
60    minutes = `0${minutes}`;
61  }
62  return `${hour}:${minutes}`;
63}
64
65function formatDay(timestamp) {
66  let date = new Date(timestamp * 1000);
67  let day = date.getDay();
68  let days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
69
70  return days[day];
71}
72
73function showForecast(response) {
74  let forecast = response.data.daily;
75  let forecastElement = document.querySelector("#forecast");
76
77  let forecastHTML = `<div class="row">`;
78  forecast.forEach(function (forecastDay, index) {
79    if (index < 6)
80      forecastHTML =
81        forecastHTML +
82        `
83    <div class="col-2">
84      <div class="forecast-day">${formatDay(forecastDay.time)}</div>
85      <img class="forecast-icon"
86        src="http://shecodes-assets.s3.amazonaws.com/api/weather/icons/${
87          forecastDay.condition.icon
88        }.png"
89        alt=""
90        width="70"
91      />
92      <div class="forecast-temperatures">
93        <span class="forecast-max-temp"> ${Math.round(
94          forecastDay.temperature.maximum
95        )}° </span>
96          |
97        <span class="forecast-min-temp"> ${Math.round(
98          forecastDay.temperature.minimum
99        )}° </span>
100      </div>
101    </div>
102    `;
103  });
104
105  forecastHTML = forecastHTML + `</div>`;
106  forecastElement.innerHTML = forecastHTML;
107}
108
109function getForecast(coordinates) {
110  let apiUrl = `https://api.shecodes.io/weather/v1/forecast?lon=${coordinates.longitude}&lat=${coordinates.latitude}&units=metric&key=4f8936d039ct62ob3b4f9d73a4bb6536`;
111  axios.get(apiUrl).then(showForecast);
112}
113
114function showWeatherInfo(response) {
115  let city = document.querySelector("#city");
116  let temperature = document.querySelector("#temperature");
117  let feelsLike = document.querySelector("#feels-like");
118  let humidity = document.querySelector("#humidity");
119  let wind = document.querySelector("#wind");
120  let description = document.querySelector("#weather-description");
121  let icon = document.querySelector("#weather-icon");
122
123  celsiusTemperature = response.data.temperature.current;
124
125  city.innerHTML = response.data.city;
126  temperature.innerHTML = Math.round(celsiusTemperature);
127  feelsLike.innerHTML = `Feels like: ${Math.round(
128    response.data.temperature.feels_like
129  )} °C`;
130  humidity.innerHTML = `Humidity: ${response.data.temperature.humidity} %`;
131  wind.innerHTML = `Wind: ${Math.round(response.data.wind.speed)} m/s`;
132  description.innerHTML = `${response.data.condition.description}`;
133  icon.setAttribute(
134    "src",
135    `http://shecodes-assets.s3.amazonaws.com/api/weather/icons/${response.data.condition.icon}.png`
136  );
137  icon.setAttribute("alt", response.data.condition.description);
138
139  getForecast(response.data.coordinates);
140}
141
142//showDate function
143let today = new Date();
144let date = document.querySelector("#date");
145date.innerHTML = showDate(today);
146
147//showTime function
148let now = new Date();

149let time = document.querySelector("#time");
150time.innerHTML = showTime(now);
151
152//handleSubmit function
153let searchForm = document.querySelector("#search-form");
154searchForm.addEventListener("submit", handleSubmit);
155
156// getMyLocation function
157let locationButton = document.querySelector("#location-btn");
158locationButton.addEventListener("click", getMyLocation);
159
160search("Copenhagen");