Display a Basic Observation

Render a basic observation for a location. The following example will display the latest observation for Chicago, IL with basic styling.
Basic observation example
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Xweather JavaScript SDK - Basic Observation</title>
    <script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
 
    <style>
    #obs {
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
        color: #222;
        font-family: 'Helvetica','Arial',sans-serif;
        margin: 40px auto;
        padding: 20px;
        width: 600px;
    }
    #obs p {
        margin: 0;
    }
    #obs .cols,
    #obs .details .row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    #obs .cols > div {
        flex-basis: 0;
        margin: 0 5px;
    }
    #obs .icon {
        margin: 0 20px;
        width: 100px;
    }
    #obs .wx {
        border-top: 2px solid #ddd;
        font-size: 18px;
        margin-top: 8px;
        padding-top: 10px;
        width: 150px;
    }
    #obs .temp {
        font-size: 50px;
        margin-top: 20px;
    }
    #obs .temp span {
        color: #666;
        font-size: 30px;
        font-weight: normal;
        padding-left: 6px;
    }
    #obs .details {
        font-size: 14px;
    }
    #obs .details .row > div {
        flex-basis: 0;
        flex-grow: 1;
        margin: 0 5px;
        width: 100px;
    }
    #obs .details .row {
        margin: 6px 0;
    }
    #obs .details .row div:last-child {
        font-size: 16px;
        font-weight: bold;
    }
    #obs .timestamp {
        color: #999;
        font-size: 12px;
        margin-bottom: 8px;
    }
    </style>
 
</head>
<body>
 
<div id="obs"></div>
 
<script>
 
    window.onload = () => {
 
        const target = document.getElementById('obs');
        const aeris = new Xweather('CLIENT_ID', 'CLIENT_SECRET');
 
        const request = aeris.api().endpoint('observations').place('chicago,il');
        request.get().then((result) => {
            const { ob } = result.data;
            if (ob) {
                const html = (`
                    <p class="timestamp">Last updated at ${aeris.utils.dates.format(new Date(ob.timestamp * 1000), 'h:mm a, MMM d, yyyy')}</p>
                    <div class="cols">
                        <div>
                            <p class="temp">${ob.tempF}<span>&deg;F</span></p>
                            <p class="wx">${ob.weatherPrimary}</p>
                        </div>
                        <div>
                            <img class="icon" src="https://cdn.aerisapi.com/wxblox/icons/${ob.icon || 'na.png'}">
                        </div>
                        <div class="details">
                            <div class="row">
                                <div>Winds</div>
                                <div>${ob.windSpeedMPH > 0 ? `${ob.windSpeedMPH} mph` : `Calm`}</div>
                            </div>
                            <div class="row">
                                <div>Dew Point</div>
                                <div>${ob.dewpointF || 'N/A'}&deg;F</div>
                            </div>
                            <div class="row">
                                <div>Humidity</div>
                                <div>${ob.humidity || 'N/A'}%</div>
                            </div>
                            <div class="row">
                                <div>Pressure</div>
                                <div>${ob.pressureIN || 'N/A'} in.</div>
                            </div>
                            <div class="row">
                                <div>Visibility</div>
                                <div>${ob.visibilityMI || 'N/A'} mi</div>
                            </div>
                            <div class="row">
                                <div>Sky Cover</div>
                                <div>${ob.sky || 'N/A'}%</div>
                            </div>
                        </div>
                    </div>
                `);
                target.innerHTML = html;
            }
        }); 
    };
    
</script>
 
</body>
</html>
Data/Map Requests Display a 5 day forecast