Skip to content

FancyWeather: start project - #8

Open
krilian88 wants to merge 8 commits into
mainfrom
Weather
Open

FancyWeather: start project#8
krilian88 wants to merge 8 commits into
mainfrom
Weather

Conversation

@krilian88

Copy link
Copy Markdown
Owner

FancyWeather: PR

@krilian88
krilian88 requested a review from broshkabro March 21, 2021 18:52
Comment thread css/style.css
.weather__today {
display: flex;
}
.weather__today__temperature {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wrong BEM usage

Comment thread index.html
Comment on lines +38 to +43
<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>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the wrong usage of BEM - it should not illustrate the hierarchy of the elements

Comment thread index.html
<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="">

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alt attribute should not be empty

Comment thread main.js
const res = await fetch(url);
const data = await res.json();

displayWeather(data.list[0], data.list[8], data.list[16], data.list[24]);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do array keys - [0], [8], [16] - mean?

Comment thread main.js
Comment on lines +78 to +91
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)

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice to split the logic a bit. Also, I would use destructuring assignment syntax.

Comment thread main.js
case 'imperial':
localStorage.setItem('temperature', 'imperial')
measures = 'imperial'
windSpeed = languageOptions.value === 'en' ? 'miles/h' : 'миль/ч'

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use constants

Comment thread main.js
})
}

function selectLanguagePattern(feels_like, humidity,description,wind) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is something wrong with spacing in the list of arguments

Comment thread main.js
Comment on lines +156 to +184
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
}
}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. split the logic, each case is overloaded by it
  2. create a constant with translations
  3. set the default case for switch block

Comment thread main.js
Comment on lines +233 to +258
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;
}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You may return '../img' at once, there is no need in assigning it to the src.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And I reckon that a switch case would be more readable here.

Comment thread main.js
getPositionByOpenCage()
}

window.addEventListener('DOMContentLoaded', init) No newline at end of file

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do not forget to add semicolons please

@broshkabro

Copy link
Copy Markdown
Collaborator

there is a bug, try to search for "Казахстан" :)

image

@broshkabro

Copy link
Copy Markdown
Collaborator

It would be nice to add some validation to the search input to avoid unexpected errors and behavior.

image

@broshkabro

broshkabro commented Mar 23, 2021

Copy link
Copy Markdown
Collaborator

Basic Scope - 80

  • markup, design, UI = 30
    • min-width 320px
    • app works without issues for different languages, temperature, search query
    • corresponds the mock-up
  • section 'Forecast for today' = 20
    • weather info and user location
    • corresponding date format, time (updated per second)
  • section 'Forecast for 3 days' = 10
  • section 'Location' = 20
    • map
    • coordinates

Advanced scope - 94

  • Search = 50
    • works with 'search' button and 'enter' key
    • request error handling
    • date and time correspond the time zone of the requested city
    • shows latitude
    • there is an update of the page content on successful request; nothing is updated if one of the requests fails
  • Background = 15
    • bgr is changed on button click (+) or new city request (-)
    • bgr is changed smoothly
    • there is an overlay
  • Temperature units = 20
    • recalculation of the temperature based on the chosen unit, active state of corresponding button
    • the chosen unit is saved on page reload
  • Code style = 9
    • js modules - 3
    • webpack (prepros is used) 1
    • there is babel 5

Hacker scope - 50

  • Translation 40
    • the whole page is translated except from the map
    • the chosen language is saved on page reload
  • App quality - 10
    • wonderful design, animation
    • extra functionality

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants