How to implement a weather forecast with automatic updates?

Question

Please help, at the moment I have a mistake `TypeError: weather.sys is undefined. I work with Open Weather Map. I want for each block to automatically update the date, water and air temperature depending on the city. I must say right away that geolocation will focus on Russia I will be glad for your answers.

const api = {
 key: "11c85ec89d2ab590110511a07349dd25",
 baseurl: "https://api.openweathermap.org/data/2.5/"
}

const weather__wrapper = document.addEventListener('DOMContentLoaded', setQuery);
var check = document.querySelector('.weather__city').textContent;

function setQuery(evt) {
 const wrappers = document.querySelectorAll('.weather__wrapper');

 wrappers.forEach( w => {
    var city = w.querySelector('.weather__city');
    getResults(city);
 });
}


function getResults (query) {
 fetch(`${api.baseurl}weather?q=${query}&units=metric&APPID=${api.key}`)
 .then(weather=> {
  return weather.json();
 }).then(displayResults);
}


function displayResults(weather) {
 console.log(weather);
 let city = document.querySelectorAll('.weather__text .weather__city');
 city.innerText = `${weather.name}, ${weather.sys.country}`;

 let now = new Date();
 let date = document.querySelector('.weather__text .weather__date');
 date.innerText = dateBuilder(now);
}

function dateBuilder(d) {
 let months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];

 let date = d.getDate();
 let month = months[d.getMonth()];
 let year = d.getFullYear();

  return `${date}.${month}.${year}`;
}

.weather__wrapper {
 height: 186px;
 width: 355px;
 border-radius: 5px;
 background-color: #e4e8ef;
 padding: 24px 24px 24px 24px;


 margin-left: 30px; /* убрать */
}

.weather__icon {
 float: left;
 margin-top: 26px;
}

.weather__icon i {
 color: #fab165;
 font-size: 5.938em;
}

.weather__text {
 float: right;
}

.weather__city  { /* Локация, на видел input */
 font-weight: 400;
 font-size: 1.500em;
 margin-bottom: 0!important;
}

.weather__temperature {
 font-weight: 800;
 font-size: 1.500em;
 margin-bottom: 0!important;
}

.weather__date {
 font-size: 1.250em;
 font-weight: 200;
 margin-bottom: 0!important;
}

.slide-weather__items {
 display: flex;
 outline: none;
}

.slide-weather {
 margin-bottom: 100px;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
    <div class="slide-weather">
        Hello
        <div class="slide-weather__items">
            <div class="weather__wrapper">
                <!-- weather on video -->
                <div class="weather__icon"><i class="fas fa-sun"></i></div>
                <div class="weather__text">
                    <p class="weather__city sochi">Sochi</p>
                    <div class="weather__current-temp">
                        <p class="weather__temperature">+23<sup>o</sup>C - air</p>
                    </div>
                    <div class="weather__water">
                        <p class="weather__temperature">+23<sup>o</sup>C - water</p>    
                    </div>
                    <p class="weather__date">29.05.2020</p>
                </div>
            </div>
            <div class="weather__wrapper">
                <!-- weather on video -->
                <div class="weather__icon"><i class="fas fa-sun"></i></div>
                <div class="weather__text">
                    <p class="weather__city">Novorossiysk</p>
                    <div class="weather__current-temp">
                        <p class="weather__temperature">+23<sup>o</sup>C - air</p>
                    </div>
                    <div class="weather__water">
                        <p class="weather__temperature">+23<sup>o</sup>C - water</p>    
                    </div>
                    <p class="weather__date">29.05.2020</p>
                </div>
            </div>
            <div class="weather__wrapper">
                <!-- weather on video -->
                <div class="weather__icon"><i class="fas fa-sun"></i></div>
                <div class="weather__text">
                    <p class="weather__city">Gelendzhik</p>
                    <div class="weather__current-temp">
                        <p class="weather__temperature">+23<sup>o</sup>C - air</p>
                    </div>
                    <div class="weather__water">
                        <p class="weather__temperature">+23<sup>o</sup>C - water</p>    
                    </div>
                    <p class="weather__date">29.05.2020</p>
                </div>
            </div>
        </div>
    </div>


    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/weather.js"></script>
</body>
</html>

Kremnev Sergey · Accepted Answer · 2020-06-08T05:07:38.853

It happens because you're passing whole tag as a city name instead of innerHTML:

getResults(city.innerHTML);

You were getting weather.sys error because weather variable didn't contain any data. So you should add some error handling inside displayResults function or before calling it.

EDIT: Added temperature update:

var parent = document.querySelector('.' + weather.name.toLowerCase()).parentNode
parent.querySelector('.weather__current-temp .weather__temperature').innerHTML = Math.round(weather.main.temp) + '<sup>o</sup>C - air';

This code is quite ugly, but its just an example of how it should work. You should move both temperature html building and parent searching to a separate function. This will work if you have city classes for all weather__city elements.

If you dont want to add city classes and you want to search parent by innerText, then check this answer: How to get element by innerText

It works like this:

const api = {
 key: "11c85ec89d2ab590110511a07349dd25",
 baseurl: "https://api.openweathermap.org/data/2.5/"
}

const weather__wrapper = document.addEventListener('DOMContentLoaded', setQuery);
var check = document.querySelector('.weather__city').textContent;

function setQuery(evt) {
 const wrappers = document.querySelectorAll('.weather__wrapper');

 wrappers.forEach( w => {
    var city = w.querySelector('.weather__city');
    getResults(city.innerHTML);
 });
}


function getResults (query) {
 fetch(`${api.baseurl}weather?q=${query}&units=metric&APPID=${api.key}`)
 .then(weather=> {
  return weather.json();
 }).then(displayResults);
}


function displayResults(weather) {
 let city = document.querySelectorAll('.weather__text .weather__city');
 city.innerText = `${weather.name}, ${weather.sys.country}`;

 let now = new Date();
 let date = document.querySelector('.weather__text .weather__date');
 date.innerText = dateBuilder(now);

    document.querySelector('.' + weather.name.toLowerCase()).parentNode.querySelector('.weather__current-temp .weather__temperature').innerHTML = Math.round(weather.main.temp) + '<sup>o</sup>C - air';
}

function dateBuilder(d) {
 let months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];

 let date = d.getDate();
 let month = months[d.getMonth()];
 let year = d.getFullYear();

  return `${date}.${month}.${year}`;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
    <div class="slide-weather">
        Hello
        <div class="slide-weather__items">
            <div class="weather__wrapper">
                <!-- weather on video -->
                <div class="weather__icon"><i class="fas fa-sun"></i></div>
                <div class="weather__text">
                    <p class="weather__city sochi">Sochi</p>
                    <div class="weather__current-temp">
                        <p class="weather__temperature">+23<sup>o</sup>C - air</p>
                    </div>
                    <div class="weather__water">
                        <p class="weather__temperature">+23<sup>o</sup>C - water</p>    
                    </div>
                    <p class="weather__date">29.05.2020</p>
                </div>
            </div>
            <div class="weather__wrapper">
                <!-- weather on video -->
                <div class="weather__icon"><i class="fas fa-sun"></i></div>
                <div class="weather__text">
                    <p class="weather__city novorossiysk">Novorossiysk</p>
                    <div class="weather__current-temp">
                        <p class="weather__temperature">+23<sup>o</sup>C - air</p>
                    </div>
                    <div class="weather__water">
                        <p class="weather__temperature">+23<sup>o</sup>C - water</p>    
                    </div>
                    <p class="weather__date">29.05.2020</p>
                </div>
            </div>
            <div class="weather__wrapper">
                <!-- weather on video -->
                <div class="weather__icon"><i class="fas fa-sun"></i></div>
                <div class="weather__text">
                    <p class="weather__city gelendzhik">Gelendzhik</p>
                    <div class="weather__current-temp">
                        <p class="weather__temperature">+23<sup>o</sup>C - air</p>
                    </div>
                    <div class="weather__water">
                        <p class="weather__temperature">+23<sup>o</sup>C - water</p>    
                    </div>
                    <p class="weather__date">29.05.2020</p>
                </div>
            </div>
        </div>
    </div>


    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/weather.js"></script>
</body>
</html>

Thanks, but there is still a question. How to change the date for each city? — Ирина Стеценко, Jun 06 '20 at 09:22
@ИринаСтеценко, hi. Updated my answer with air temperature example — Kremnev Sergey, Jun 08 '20 at 05:08

How to implement a weather forecast with automatic updates?

1 Answers1