Отображение погоды требуемой локации с помощью OpenWeatherMap

24.06.2022

JavaScript:

'use strict'
const weather = document.querySelector('.weather');

//вместо Moscow ваше значение
fetch('https://api.openweathermap.org/data/2.5/weather?q=Moscow,rus&APPID=2d48b1d7080d09ea964e645ccd1ec93f&units=metric')
    .then(response => response.json())
    .then(data => {
        console.log(data)

        weather.insertAdjacentHTML('afterbegin', `
        	<div class="d-flex align-items-center mx-n1">
			    <div class="m-1">${data.name}</div>
			    <div class="temp-weather m-1">${Math.round(data.main.temp)}°C</div>
			    <img src="http://openweathermap.org/img/wn/${data.weather[0].icon}.png" />
			</div>
        `)
    });

По возможности, строчку APPID заменить на ваш личный API ключ, полученный в аккаунте home.openweathermap.org

В необходимом месте страницы вывести результат:

<div class="weather"></div>

Превью