Display a 5-Day Forecast

Render a 5-day forecast for a location. The following example will display a forecast for Minneapolis, MN with basic styling.
5-day forecast example
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Xweather JavaScript SDK - 5-Day Forecast</title>
    <script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
 
    <style>
    #forecast {
        color: #222;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        font-family: 'Helvetica','Arial',sans-serif;
        margin: 40px auto;
        width: 600px;
    }
    #forecast p {
        margin: 0;
    }
    #forecast .card {
        flex-basis: 0;
        flex-grow: 1;
        margin: 0 5px;
    }
    #forecast .card-body {
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
        padding: 10px;
        text-align: center;
    }
    #forecast .card .title {
        font-size: 14px;
        font-weight: bold;
    }
    #forecast .card .icon {
        margin: 10px 0 5px;
        width: 60px;
    }
    #forecast .card .wx {
        font-size: 12px;
    }
    #forecast .card .temps {
        font-size: 16px;
        font-weight: bold;
        margin-top: 20px;
    }
    #forecast .card .temps span {
        color: #666;
        font-size: 12px;
        font-weight: normal;
        padding-right: 6px;
    }
    </style>
 
</head>
<body>
 
<div id="forecast"></div>
 
<script>
 
    window.onload = () => {
 
        const target = document.getElementById('forecast');
        const aeris = new Xweather('CLIENT_ID', 'CLIENT_SECRET');
 
        const request = aeris.api().endpoint('forecasts').place('minneapolis,mn').limit(5);
        request.get().then((result) => {
            const data = result.data;
            const { periods } = data[0];
            if (periods) {
                periods.reverse().forEach(period => {
                    const date = new Date(period.dateTimeISO);
                    const icon = `https://cdn.aerisapi.com/wxblox/icons/${period.icon || 'na.png'}`;
                    const maxTempF = period.maxTempF || 'N/A';
                    const minTempF = period.minTempF || 'N/A';
                    const weather = period.weatherPrimary || 'N/A';
 
                    const html = (`
                        <div class="card">
                            <div class="card-body">
                                <p class="title">${aeris.utils.dates.format(date, 'eeee')}</p>
                                <p><img class="icon" src="${icon}"></p>
                                <p class="wx">${weather}</p>
                                <p class="temps"><span>High:</span>${maxTempF} <span>Low:</span>${minTempF}</p>
                            </div>
                        </div>
                    `);
 
                    target.insertAdjacentHTML('afterbegin', html);
                });
            }
        }); 
    }
    
</script>
 
</body>
</html>
Display an observation Display a basic map image