Здравствуйте, я изучаю front-end разработку 2 .5 месяца, решил перейти на практику и написал сайт с погодой
Напишите, пожалуйста, свое мнение о коде и как его можно улучшить (желательно по html, css тоже, но в приоритете JS)
Codepen:
https://codepen.io/domarchuk77/pen/MWJgRdZ (Единственное что тут картинки грузить не будут)
Github:
https://github.com/Domarchuk77/weather-app
function searchCity(currentCity){
fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${currentCity}&appid=
3a1c419ef64be1d7cddb7b7dda4b5fe8`)
.then(function (resp) { return resp.json() })
.then(function (forecast) {
if(forecast.message){
alert(forecast.message)
}else{
console.log(forecast)
new weatherForecast(forecast)
}
})};
(function() {
let currentCity = document.querySelector(".search-box__input")
document.querySelector('.search-box__loupe').addEventListener("click", function(){
searchCity(currentCity.value);
currentCity.value = ""
});
document.querySelector('.search-box__input').addEventListener('keydown', function(e) {
if (e.keyCode === 13) {
currentCity.blur()
searchCity(currentCity.value);
currentCity.value = ""
}
});
})();
class weatherForecast {
constructor(forecast){
this.data = forecast
this.animations()
this.currentWeather()
this.forecastWeather()
this.forecastDetails()
}
animations(){
this.forecastBox = document.querySelector(".weather")
this.forecastBox.style.display = "block"
this.searchBox = document.querySelector(".search-box")
setTimeout(() => {
this.searchBox.classList.add("search-box-active")
this.forecastBox.classList.add("weather-active")
},10)
this.cityName = document.querySelector(".search-box__input")
this.searchBoxText = document.querySelector(".search-box__text")
if(this.cityName.innerText == ""){
this.searchBoxText.classList.remove("search-box__text-active")
}else{
this.searchBoxText.classList.add("search-box__text-active")
}
this.cityName.value = ""
}
currentWeather(){
this.currentCity = document.querySelector(".current__city")
this.currentCity.innerText = this.data.city.name + ", " + this.data.city.country
this.currentDescription = document.querySelector(".current__description")
this.currentDescription.innerText = this.data.list[0].weather[0].main
this.currenTemperature = document.querySelector(".current__temperature")
this.currenTemperature.innerText = Math.round(this.data.list[0].main.temp - 273) + "˚"
}
forecastWeather(){
this.forecastList = ''
this.forecastContainer= document.querySelector(".forecast")
for(let i = 0; i < 6; i++){
if(i == 0){
this.forecastTime = "Now"
}else{
this.forecastTime = this.data.list[i].dt_txt.slice(-8, -6)
}
this.forecastTemp = Math.round(this.data.list[i].main.temp - 273)
this.forecastIcon = this.data.list[i].weather[0].icon
this.forecastItem = `
<div class="forecast__item">
<div class="forecast__time">${this.data.list[i].dt_txt.slice(-8, -6)}</div>
<img class="forecast__icon" src="../images/${this.forecastIcon}.png">
<div class="forecast__temperature">${this.forecastTemp + "˚"}</div>
</div>`
this.forecastList += this.forecastItem
}
this.forecastContainer.innerHTML = this.forecastList
}
forecastDetails(){
this.feelsLike = document.querySelector(".feelslike__value")
this.feelsLike.innerText = Math.round(this.data.list[0].main.feels_like - 273) + "˚"
this.pressure = document.querySelector(".pressure__value")
this.pressure.innerText = this.data.list[0].main.pressure + " mb"
this.humidity = document.querySelector(".humidity__value")
this.humidity.innerText = this.data.list[0].main.humidity + " %"
this.wind = document.querySelector(".wind__value")
this.wind.innerText = this.data.list[0].wind.speed + " mph"
this.uts = document.querySelector(".utc__value")
this.sec = this.data.city.timezone / 60
this.hour = Math.floor(this.sec / 60)
this.minute = this.sec % 60
if(this.data.city.timezone < 0){
this.uts.innerText = `${this.hour}:${this.minute * -1}`
}else if( this.data.city.timezone == 0 ){
this.uts.innerText = `${this.hour}:${this.minute}`
}else{
this.uts.innerText = `+${this.hour}:${this.minute}`
}
this.weatherDescription = document.querySelector(".wether-description__value")
this.weatherDescription.innerText = this.data.list[0].weather[0].description
}
}
