Array Uses in Web Development

    // load the sample weather json data
    // build a grid of temps over the next 24 hours
    // blue background in hours where precipitation possibility is higher than 70%
    
    let uri = './darksky-sample.json';
    let req = new Request(uri, {method: 'GET'});
    let container, df;
    
    document.addEventListener('DOMContentLoaded', init);
    
    function init( ) {
           container = document.getElementById('container');
           df = new DocumentFragment( );
    
           fetch(req)
           .then((response => {
               if(response.ok){
                    return response.json( );
                } else {
                     throw new Error ('BAD HTTP');
                }
            })
            .then((json) => {
                // create the weather grid
                json.hourly.data.forEach((hour) => {
                      // to show the temp
                      let div = document.createElement('div');
                      div.classList.add('hour');
                      let timestamp = hour.time;
                      div.id = 'ts_' + timestamp.toString( );
                      let temp = parseInt(hour.temperature);
                      div.textContent = temp.toString( ).concat('\u0080');
                      div.title = hour.summary;
                      // to show the time
                      let span = document.createElement('span');
                      let timmy = new Date(timestamp * 1000);
                      span.textContent = timmy.getHours( ).toString( ).concat(":00");
      
                      div.appendChild(span);
                      df.appendChild(div);
               });
               container.appendChild(df);

               // highlight the times when it will be raining
               json.hourly.data.filter( (hour) => { 
                        if(hour.precipProbability > 0.5){
                        return true;
                        } else {
                        return false;
                        }
                } ).map((hour) => { 
                         return hour.time;
                } ).forEach((timestamp) => { 
                         let id = 'ts_'.concat(timestamp)
                         document.getElementById(id).classList.add('precip'); 
                } ); 
        
               // highlight temp
               let highObj = json.hourly.data.reduce( (accumulator, hour) => { 
                        if( hour.temperature > accumulator.temp ){
                                 return { temp:hour.temperature   , time:hour.time}
                        } else {
                                 return accumulator;
                        }
                }, {temp: -100, time: 1000} )
                let id = 'ts_' + highObj.time;
                document.getElementById(id).classList.add('hot');
            })
        .catch((err) => {
             console.log(err.message);
         })
    }