minor ui changes'
This commit is contained in:
Nicholas Ngo committed
1 parent
26d923b2ba
commit
88052a02da
3 files changed
+75
-61
No files matched your search
+1
-10
@@ -1,6 +1,3 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -33,13 +30,7 @@
|
||||
<div class="wind">Wind speed: 6.2 km/h</div>
|
||||
</div>
|
||||
<div class="week-container">
|
||||
<ul class="week-list">
|
||||
<li class="active"><i class="day-icon" data-feather="sun"></i><span class="day-name">Tue</span><span class="day-temp">29°C</span></li>
|
||||
<li><i class="day-icon" data-feather="cloud"></i><span class="day-name">Wed</span><span class="day-temp">21°C</span></li>
|
||||
<li><i class="day-icon" data-feather="cloud-snow"></i><span class="day-name">Mon</span><span class="day-temp">08°C</span></li>
|
||||
<li><i class="day-icon" data-feather="cloud-rain"></i><span class="day-name">Fry</span><span class="day-temp">19°C</span></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
<ul class="week-list" id="week-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -2,51 +2,73 @@ const API_KEY = "9cc4edd6d8064a5b7d8fea55305f7c1d"
|
||||
const geocode_API_KEY = "5333f43e8a7a4553abee4745425cae8b"
|
||||
const geocode_API_URL = "https://api.opencagedata.com/geocode/v1/json"
|
||||
const API_URL = "https://api.openweathermap.org/data/2.5/"
|
||||
const ICON_URL = "https://openweathermap.org/img/wn/"
|
||||
|
||||
let weather = {
|
||||
fetchWeather: function (city) {
|
||||
fetch(`${API_URL}weather?q=${city}&units=metric&appid=${API_KEY}`)
|
||||
.then((response) => { // error part if it fails
|
||||
if (!response.ok) {
|
||||
alert("No weather found.");
|
||||
throw new Error("No weather found.");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => this.displayWeather(data));
|
||||
},
|
||||
displayWeather: function (data) {
|
||||
const { name } = data;
|
||||
const { icon, description } = data.weather[0];
|
||||
const { temp, humidity } = data.main;
|
||||
const { speed } = data.wind;
|
||||
document.querySelector(".city").innerText = `Weather in ${name}`;
|
||||
document.querySelector(".icon").src = `https://openweathermap.org/img/wn/${icon}.png`;
|
||||
document.querySelector(".description").innerText = description;
|
||||
document.querySelector(".temp").innerText = `${temp} °C`;
|
||||
document.querySelector(".humidity").innerText = `Humidity: ${humidity}%`;
|
||||
document.querySelector(".wind").innerText = `Wind speed: ${speed}km/h`;
|
||||
document.querySelector(".weather").classList.remove("loading");
|
||||
document.body.style.backgroundImage = `var(--${data.weather[0].main})`;
|
||||
},
|
||||
search: function () {
|
||||
this.fetchWeather(document.querySelector(".search-bar").value);
|
||||
},
|
||||
};
|
||||
|
||||
let forcast = {
|
||||
fetchForcast: function(latitude, longitude) {
|
||||
fetch(`${API_URL}forcast?lat=${latitude}&lon${longitude}&apiid=${API_KEY}`)
|
||||
let forecast = {
|
||||
fetchforecast: function(city) {
|
||||
fetch(`${API_URL}forecast?q=${city}&units=metric&appid=${API_KEY}`)
|
||||
.then((responce) => {
|
||||
if (!responce.ok) {
|
||||
alert("No forcast found");
|
||||
throw new Error("No forcast found.");
|
||||
alert("No forecast found");
|
||||
throw new Error("No forecast found.");
|
||||
}
|
||||
return responce.json();
|
||||
}).then((data) => this.displayForcast(data));
|
||||
}).then((data) => this.displayforecast(data));
|
||||
},
|
||||
displayForcast: function(data) {
|
||||
|
||||
displayforecast: function(data) {
|
||||
// Get latest weather data for each day
|
||||
let days = [];
|
||||
for (let i = 0; i < data.list.length; i++) {
|
||||
let exists = false
|
||||
for (let j = 0; j < days.length; j++) {
|
||||
if (days[j].dt_txt.substr(0, 10) == data.list[i].dt_txt.substr(0, 10)) {
|
||||
days[j] = data.list[i]
|
||||
exists = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!exists) days.push(data.list[i])
|
||||
}
|
||||
|
||||
// Display todays data
|
||||
document.querySelector(".city").innerText = `Weather in ${data.city.name}`;
|
||||
document.querySelector(".icon").src = `${ICON_URL}${days[0].weather[0].icon}.png`;
|
||||
document.querySelector(".description").innerText = days[0].weather[0].description;
|
||||
document.querySelector(".temp").innerText = `${Math.round(days[0].main.temp)} °C`;
|
||||
document.querySelector(".humidity").innerText = `Humidity: ${days[0].main.humidity}%`;
|
||||
document.querySelector(".wind").innerText = `Wind speed: ${days[0].wind.speed}km/h`;
|
||||
document.querySelector(".weather").classList.remove("loading");
|
||||
document.body.style.backgroundImage = `var(--${days[0].weather[0].main})`;
|
||||
|
||||
// Display next 5 days data
|
||||
const weekday = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
|
||||
let d, day, forecastElem, forecastIcon, forecastDay, forecastTemp;
|
||||
document.getElementById("week-list").innerHTML = "";
|
||||
for (let i = 1; i < days.length; i++) {
|
||||
|
||||
d = new Date(days[i].dt_txt);
|
||||
day = weekday[d.getDay()];
|
||||
|
||||
// Construct element
|
||||
forecastIcon = document.createElement("img");
|
||||
forecastIcon.src = `${ICON_URL}${days[i].weather[0].icon}.png`;
|
||||
forecastDay = document.createElement("span");
|
||||
forecastDay.classList.add("day-name");
|
||||
forecastDay.innerHTML = day;
|
||||
forecastTemp = document.createElement("span");
|
||||
forecastTemp.classList.add("day-temp");
|
||||
forecastTemp.innerHTML = `${Math.round(days[i].main.temp)}°C`;
|
||||
forecastElem = document.createElement("li");
|
||||
forecastElem.appendChild(forecastIcon);
|
||||
forecastElem.appendChild(forecastDay);
|
||||
forecastElem.appendChild(forecastTemp);
|
||||
|
||||
document.getElementById("week-list").appendChild(forecastElem);
|
||||
}
|
||||
},
|
||||
search: function() {
|
||||
this.fetchforecast(document.querySelector(".search-bar").value);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,8 +89,7 @@ let geocode = {
|
||||
if (request.status == 200) {
|
||||
// Success!
|
||||
var data = JSON.parse(request.responseText);
|
||||
weather.fetchWeather(data.results[0].components.city);
|
||||
console.log(data.results[0].components.city)
|
||||
forecast.fetchforecast(data.results[0].components.city);
|
||||
} else if (request.status <= 500) {
|
||||
// We reached our target server, but it returned an error
|
||||
|
||||
@@ -95,19 +116,19 @@ let geocode = {
|
||||
navigator.geolocation.getCurrentPosition(success, console.error);
|
||||
}
|
||||
else {
|
||||
weather.fetchWeather("Surrey");
|
||||
forecast.fetchforecast("Surrey");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelector(".search button").addEventListener("click", function () {
|
||||
weather.search();
|
||||
forecast.search();
|
||||
});
|
||||
|
||||
document.querySelector(".search-bar")
|
||||
.addEventListener("keyup", function (event) {
|
||||
if (event.key == "Enter") {
|
||||
weather.search();
|
||||
forecast.search();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -22,12 +22,12 @@ body {
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #000000d0;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
color: white;
|
||||
padding: 1.5em;
|
||||
border-radius: 40px;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
max-width: 520px;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
@@ -67,7 +67,7 @@ button:hover {
|
||||
}
|
||||
|
||||
h1.temp {
|
||||
margin: 0;
|
||||
margin: 10px;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
@@ -82,6 +82,10 @@ h1.temp {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.weather {
|
||||
margin-left: 43px;
|
||||
}
|
||||
|
||||
.weather.loading {
|
||||
visibility: hidden;
|
||||
max-height: 20px;
|
||||
@@ -110,9 +114,6 @@ h1.temp {
|
||||
}
|
||||
|
||||
.week-list>li {
|
||||
border: solid;
|
||||
border-width: 1px;
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
float: left;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
@@ -122,13 +123,14 @@ h1.temp {
|
||||
border-radius: 10px;
|
||||
margin: 4px;
|
||||
align-items: center;
|
||||
background: #7c7c7c2b;
|
||||
}
|
||||
|
||||
.week-list>li:hover {
|
||||
-webkit-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
background: #7c7c7c2b;
|
||||
background: #7c7c7c6b;
|
||||
outline: none;
|
||||
-webkit-box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.2)
|
||||
|
||||
Reference in new issue
Block a user