replit

        
            <!DOCTYPE html>
    <html>
    
    <head>
        <title>Weather App</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <style>
            #city-input,
            #weather-output {
                max-width: 400px;
                margin: 0 auto;
            }
    
            .banner {
                color: #FFD23F;
                font-family: sans-serif;
            }
        </style>
    
    
    </head>
    
    <body class="text-center">
        <main>
            <h1 class="banner p-3">Weather</h1>
            <div class="form-group">
                <input id="city-input" class="form-control form-control-lg" type="text" placeholder="Search city">
            </div>
            <button type="button" onclick="searchCity()" class="btn btn-lg btn-dark">Search</button>
            <div id="weather-output" class="mt-3">
                <div class="card-deck mb-3 text-center">
                    <div class="card mb-4 shadow-sm">
                        <div class="card-header">
                            <h4 id="city-name" class="my-0 font-weight-normal">----</h4>
                        </div>
                        <div class="card-body">
                            <h1 id="weather-type" class="card-title">----</h1>
                            <ul class="list-unstyled mt-3 mb-4">
                                <li>Temp: <span id="temp">--</span>°</li>
                                <li>Humidity: <span id="humidity">--</span>°</li>
                                <li>Description: <span id="description">--</span>°</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    
        <script>
    
            const cityName = document.getElementById('city-name')
            const weatherType = document.getElementById('weather-type')
            const temp = document.getElementById('temp')
            const minTemp = document.getElementById('min-temp')
            const maxTemp = document.getElementById('max-temp')
    
    
            getWeatherData = async (city) => {
    
                const options = {
                    method: 'GET',
                    headers: {
                        'X-RapidAPI-Key':
                            '27ffeaffa2msh257ea9dabc1d4dcp17fbf9jsn28e76a9e7a2f',
                        'X-RapidAPI-Host': 'bestweather.p.rapidapi.com'
                    }
                };
                return fetch(`https://bestweather.p.rapidapi.com/weather/${city}/today?unitGroup=us`, options)
                    .then(response => response.json())
                    .then(response => response)
                    .catch(err => err);
    
            }
    
            const searchCity = async () => {
                const city = document.getElementById('city-input').value;
                console.log(city)
                const data = await getWeatherData(city)
                showWeatherData(data)
    
    
            }
    
            const showWeatherData = (weatherData) => {
                console.log('🍪');
                console.log(weatherData)
                document.getElementById('weather-type').innerText = weatherData.currentConditions.conditions
                document.getElementById('humidity').innerText = weatherData.currentConditions.humidity
                document.getElementById('description').innerText = weatherData.description
                document.getElementById('temp').innerText = weatherData.currentConditions.temp
                document.getElementById('city-name').innerText = weatherData.resolvedAddress
    
    
    
            }
    
    
    
    
        </script>
    
    </body>
    
    </html>