Conversation
| .weather__today { | ||
| display: flex; | ||
| } | ||
| .weather__today__temperature { |
| <div class="weather__today__temperature"></div> | ||
| <div class="weather__today__forecast"> | ||
| <div class="weather__today__forecast__icon"> | ||
| <img class="weather__today__img" alt=""> | ||
| </div> | ||
| <div class="weather__today__forecast__description"></div> |
There was a problem hiding this comment.
the wrong usage of BEM - it should not illustrate the hierarchy of the elements
| <div class="weather__three-days__container__forecast"> | ||
| <div class="weather__three-days__container__forecast__temperature"></div> | ||
| <div class="weather__three-days__container__forecast__icon"> | ||
| <img class="weather-icon" alt=""> |
There was a problem hiding this comment.
alt attribute should not be empty
| const res = await fetch(url); | ||
| const data = await res.json(); | ||
|
|
||
| displayWeather(data.list[0], data.list[8], data.list[16], data.list[24]); |
There was a problem hiding this comment.
What do array keys - [0], [8], [16] - mean?
| async function getPositionByOpenCage() { | ||
| try { | ||
| let coordinates = await getPositionByIp(); | ||
| const q = searchCity || coordinates; | ||
| const request = await fetch(`https://api.opencagedata.com/geocode/v1/json?q=${q}&language=${languageOptions.value}&key=3f8cc3e61ead4a2baf65d115037234b2`) | ||
| const json = await request.json(); | ||
| const location = json.results[0].components.city || json.results[0].components.county || json.results[0].components.province || json.results[0].components.place | ||
| const {country} = json.results[0].components; | ||
| place.textContent = `${location}, ${country}`; | ||
| timeZoneValue = json.results[0].annotations.timezone.name | ||
| mapLatitude.textContent = `${json.results[0].annotations.DMS.lat}`; | ||
| mapLongitude.textContent = `${json.results[0].annotations.DMS.lng}`; | ||
| await getWeather(json.results[0].geometry.lat,json.results[0].geometry.lng) | ||
| await getMap(json.results[0].geometry.lng,json.results[0].geometry.lat) |
There was a problem hiding this comment.
It would be nice to split the logic a bit. Also, I would use destructuring assignment syntax.
| case 'imperial': | ||
| localStorage.setItem('temperature', 'imperial') | ||
| measures = 'imperial' | ||
| windSpeed = languageOptions.value === 'en' ? 'miles/h' : 'миль/ч' |
| }) | ||
| } | ||
|
|
||
| function selectLanguagePattern(feels_like, humidity,description,wind) { |
There was a problem hiding this comment.
There is something wrong with spacing in the list of arguments
| switch(languageOptions.value) { | ||
| case 'ru': | ||
| localStorage.setItem('language', 'ru') | ||
| setDateAndTime() | ||
| mapLatitude.innerHTML = `<span>Широта: ${mapLatitude.textContent}</span>` | ||
| mapLongitude.innerHTML = `<span>Долгота: ${mapLongitude.textContent}</span>` | ||
| windSpeed = measures === 'imperial' ? 'миль/ч' : 'м/с' | ||
| searchInput.placeholder = 'Поиск города' | ||
| searchButton.innerText = 'поиск' | ||
| todayDescription.innerHTML = `<span>${description}</span> | ||
| <span>ощущается: ${Math.round(feels_like)}°</span> | ||
| <span>ветер: ${wind} ${windSpeed}</span> | ||
| <span>влажность: ${humidity}%</span>` | ||
| break | ||
| case 'en': | ||
| localStorage.setItem('language', 'en') | ||
| setDateAndTime() | ||
| mapLatitude.innerHTML = `<span>Latitude: ${mapLatitude.textContent}</span>` | ||
| mapLongitude.innerHTML = `<span>Longitude: ${mapLongitude.textContent}</span>` | ||
| windSpeed = measures === 'imperial' ? 'mph' : 'm/s' | ||
| searchInput.placeholder = 'Search city' | ||
| searchButton.innerText = 'search' | ||
| todayDescription.innerHTML = `<span>${description}</span> | ||
| <span>feels like: ${Math.round(feels_like)}°</span> | ||
| <span>wind: ${wind} ${windSpeed}</span> | ||
| <span>humidity: ${humidity}%</span>` | ||
| break | ||
| } | ||
| } |
There was a problem hiding this comment.
- split the logic, each case is overloaded by it
- create a constant with translations
- set the default case for switch block
| function setIcon(id) { | ||
| if (id<300 && id>=200) { | ||
| src = '../img/thunderstorms.svg'; | ||
| return src; | ||
| } else if (id<400 && id>=300) { | ||
| src = '../img/drizzle.svg'; | ||
| return src; | ||
| } else if (id<600 && id>=500) { | ||
| src = '../img/rain.svg'; | ||
| return src; | ||
| } else if(id<700 && id>=600) { | ||
| src = '../img/snow.svg'; | ||
| return src; | ||
| } else if(id<800 && id>700) { | ||
| src = '../img/mist.svg'; | ||
| return src; | ||
| } else if (id==800){ | ||
| src = '../img/clear-day.svg'; | ||
| return src; | ||
| } else if (id<810 && id>800){ | ||
| src = '../img/cloudy.svg'; | ||
| return src; | ||
| } else { | ||
| src = '../img/partly-cloudy-day.svg'; | ||
| return src; | ||
| } |
There was a problem hiding this comment.
You may return '../img' at once, there is no need in assigning it to the src.
There was a problem hiding this comment.
And I reckon that a switch case would be more readable here.
| getPositionByOpenCage() | ||
| } | ||
|
|
||
| window.addEventListener('DOMContentLoaded', init) No newline at end of file |
There was a problem hiding this comment.
do not forget to add semicolons please
Basic Scope - 80
Advanced scope - 94
Hacker scope - 50
|


FancyWeather: PR