Не получается соединить поиск с API (openweather)

Question

Не получается соединить поиск с API (openweather)

Рейтинг: 1Ответов: 0Опубликовано: 24.08.2023

Хочется сделать так, чтобы находило по поиску город, брало с API (OpenWeather) данные и выдавал результат, но не получается поскольку город и API не коннектит, помогите.

Вот index.html (Я делаю с помощью чистого Javascript без библиотек) При просьбе могу передать API адрес кому нужно.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
</head>
<body>
    <div class="card">
        <div class="search">
            <input type="text" placeholder="Наберите название города" spellcheck="false">
            <button><img src="img/search.png" width="64px" height="64px"></button>
        </div>
        <div class="weather">
            <img src="img/rain.png" class="weather-icon" width="256px" height="256px">
            
            <h1 class="temp">22</h1>
            <h2 class="city">Moscow</h2>
            <div class="details">
                <div class="col">
                    <img src="img/humidity.png" width="128px" height="128px">
                    <div>
                        <p class="humidity">xx</p>
                        <p>Влажность</p>
                    </div>

                    <div class="col">
                        <img src="img/wind.png" width="128px" height="128px">
                        <div>
                            <p class="wind">xx</p>
                            <p>Скорость ветра</p>
                        </div>
                </div>
            </div>
        </div>
    </div>

    <script src="index.js">
        const apiKey = "xxxxxxxxxxxxxxxxxxxxxxxxxx";
        const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=Moscow&appid=xxxxxxxxxxxxxxxxxxxxxxxxxx";

        const searchBox = document.querySelector(".search input");
        const searchBtn = document.querySelector(".search button");

        async function checkWeather(city){
            const response = await fetch(apiUrl + city + '&appid=$apiKey');
            var data = await response.json();

            console.log(data);

            document.querySelector(".city").innerHTML = data.name;
            document.querySelector(".temp").innerHTML = Math.round(data.main.temp)+'°C';
            document.querySelector(".humidity").innerHTML = data.main.humidity+'%';
            document.querySelector(".wind").innerHTML = data.wind.speed+'км/ч';

        }

        searchBtn.addEventListener("click", ()=>{
            checkWeather(searchBox.value);
        })
    </script>
</body>
</html>

Вот фотография как это примерно выглядит:

javascript html

Источник: Stack Overflow на русском

Не получается соединить поиск с API (openweather)

Ответы