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

JavaScript:

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

//вместо Москва ваше значение
fetch('https://api.openweathermap.org/data/2.5/weather?q=Москва&lang=ru&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>

Превью

При использовании виджета, в котором выводится название города на кирилице, необходимо убедиться, что шрифт, используемый для отображения текста, также поддерживает кириллицу. Если используется стандартный шрифт, то проблем не должно возникать, но если используется кастомный шрифт, нужно проверить его поддержку кириллицы.