pwa-app/public/scripts/app.js
/**
 * Renders the forecast data into the card element.
 *
 * @param {Element} card The card element to update.
 * @param {Object} data Weather forecast data to update the element with.
 */
Renders the forecast data into the card element.
@param {Element} card The card element to update.
@param {Object} data Weather forecast data to update the element with.
Renders the forecast data into the card element . @param { Element } card The card element to update . @param { Object } data Weather forecast data to update the element with .
function renderForecast(card, data) {
  if (!data) {
    return;
  }
  const cardLastUpdatedElem = card.querySelector('.card-last-updated');
  const cardLastUpdated = cardLastUpdatedElem.textContent;
  const lastUpdated = parseInt(cardLastUpdated);
  if (lastUpdated >= data.current.dt) {
    return;
  }
  cardLastUpdatedElem.textContent = data.current.dt;
  card.querySelector('.description').textContent = capitalizeFirstLetter(data.current.weather[0].description);
  const forecastFrom = luxon.DateTime
      .fromSeconds(data.current.dt)
      .setZone(data.timezone)
      .toFormat('DDDD t');
  card.querySelector('.date').textContent = forecastFrom;
  card.querySelector('.current .icon')
      .className = `icon ${data.current.weather[0].icon}`;
  card.querySelector('.current .temperature .value')
      .textContent = Math.round(data.current.weather[0].temp);
  card.querySelector('.current .humidity .value')
      .textContent = Math.round(data.current.humidity * 100);
  card.querySelector('.current .wind .value')
      .textContent = Math.round(data.current.wind_speed);
  card.querySelector('.current .wind .direction')
      .textContent = Math.round(data.current.wind_deg);
  const sunrise = luxon.DateTime
      .fromSeconds(data.current.sunrise)
      .setZone(data.timezone)
      .toFormat('t');
  card.querySelector('.current .sunrise .value').textContent = sunrise;
  const sunset = luxon.DateTime
      .fromSeconds(data.current.sunset)
      .setZone(data.timezone)
      .toFormat('t');
  card.querySelector('.current .sunset .value').textContent = sunset;
  const futureTiles = card.querySelectorAll('.future .oneday');
  futureTiles.forEach((tile, index) => {
    const forecast = data.daily[index + 1];
    const forecastFor = luxon.DateTime
        .fromSeconds(forecast.dt)
        .setZone(data.timezone)
        .toFormat('ccc');
    tile.querySelector('.date').textContent = forecastFor;
    tile.querySelector('.icon').className = `icon i${forecast.weather[0].icon}`;
    tile.querySelector('.temp-high .value')
        .textContent = Math.round(forecast.temp.max);
    tile.querySelector('.temp-low .value')
        .textContent = Math.round(forecast.temp.min);
  });
  const spinner = card.querySelector('.card-spinner');
  if (spinner) {
    card.removeChild(spinner);
  }
}
function renderForecast ( card , data ) { if ( ! data ) { return ; } const cardLastUpdatedElem = card . querySelector ( '.card-last-updated' ) ; const cardLastUpdated = cardLastUpdatedElem . textContent ; const lastUpdated = parseInt ( cardLastUpdated ) ; if ( lastUpdated >= data . current . dt ) { return ; } cardLastUpdatedElem . textContent = data . current . dt ; card . querySelector ( '.description' ) . textContent = capitalizeFirstLetter ( data . current . weather [ 0 ] . description ) ; const forecastFrom = luxon . DateTime . fromSeconds ( data . current . dt ) . setZone ( data . timezone ) . toFormat ( 'DDDD t' ) ; card . querySelector ( '.date' ) . textContent = forecastFrom ; card . querySelector ( '.current .icon' ) . className = ` ${ data . current . weather [ 0 ] . icon } ` ; card . querySelector ( '.current .temperature .value' ) . textContent = Math . round ( data . current . weather [ 0 ] . temp ) ; card . querySelector ( '.current .humidity .value' ) . textContent = Math . round ( data . current . humidity * 100 ) ; card . querySelector ( '.current .wind .value' ) . textContent = Math . round ( data . current . wind_speed ) ; card . querySelector ( '.current .wind .direction' ) . textContent = Math . round ( data . current . wind_deg ) ; const sunrise = luxon . DateTime . fromSeconds ( data . current . sunrise ) . setZone ( data . timezone ) . toFormat ( 't' ) ; card . querySelector ( '.current .sunrise .value' ) . textContent = sunrise ; const sunset = luxon . DateTime . fromSeconds ( data . current . sunset ) . setZone ( data . timezone ) . toFormat ( 't' ) ; card . querySelector ( '.current .sunset .value' ) . textContent = sunset ; const futureTiles = card . querySelectorAll ( '.future .oneday' ) ; futureTiles . forEach ( ( tile , index ) => { const forecast = data . daily [ index + 1 ] ; const forecastFor = luxon . DateTime . fromSeconds ( forecast . dt ) . setZone ( data . timezone ) . toFormat ( 'ccc' ) ; tile . querySelector ( '.date' ) . textContent = forecastFor ; tile . querySelector ( '.icon' ) . className = ` ${ forecast . weather [ 0 ] . icon } ` ; tile . querySelector ( '.temp-high .value' ) . textContent = Math . round ( forecast . temp . max ) ; tile . querySelector ( '.temp-low .value' ) . textContent = Math . round ( forecast . temp . min ) ; } ) ; const spinner = card . querySelector ( '.card-spinner' ) ; if ( spinner ) { card . removeChild ( spinner ) ; } }
Renders the forecast data into the card element.
Renders the forecast data into the card element .
// There's no data, skip the update. // Find out when the element was last updated. // If the data on the element is newer, skip the update. // Render the forecast data into the card. // Render the next 7 days. // If the loading spinner is still visible, remove it.