Запуск приложения OpenWeather локально не работаетCSS

Разбираемся в CSS
Ответить
Anonymous
 Запуск приложения OpenWeather локально не работает

Сообщение Anonymous »

Я попробовал использовать API OpenWeatherMap.org для создания базового погодного приложения для своего портфолио. Однако после выполнения этих шагов приложение не дает требуемого результата.
При запуске моего javascript в терминале с использованием узла я получаю справочную ошибку о том, что документ не определен; приложение погоды также не работает в браузере.
















Local Weather App












Delhi, IN

Friday 04 November 2022



15°C
Sunny
13°C / 16°C








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

const searchbox = document.querySelector(".search-box");
searchbox.addEventListener("keypress", setQuery);

function setQuery(any) {
if(any.keyCode == 13) {
getResults(searchbox.value);
}
}

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

function displayResults(weather) {
let city = document.querySelector(".location .city");
city.innerText = `${weather.name}, ${weather.sys.country}`;

let now = new Date();
let date = document.querySelector(".location .date");
date.innerText = dateBuilder(now);

let temp = document.querySelector(".current .temp");
temp.innerHTML = `${Math.round(weather.main.temp)}°C`;

let weather_el = document.querySelector(".current .weather");
weather_el.innerText = weather.weather[0].main;

let hilow = document.querySelector(".hi-low");
hilow.innerText = `${Math.round(weather.main.temp_min)}°C / ${Math.round(weather.main.temp_max)}°C`
}

function dateBuilder(d) {
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
let days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

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

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



Подробнее здесь: https://stackoverflow.com/questions/743 ... be-working
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»