Playing with XMLHttpRequest

by fkhairzad

HTML

<div id='test'>

</div>

CSS

.row{ margin-top: 20px}

.body {
    background-color: black;
    
}


.schedule-container {
    margin-left: 10px;
    display: inline-block;
    position: relative;
    border-radius: 10px;
    border: 1px solid #5f5f5f;
    width: 200px;
    height: 320px;
    text-align: center;
}


.schedule-date {
    margin: 15px 0 0 0;
    font-size: 22px;
    font-weight: 600;   
}

.schedule-type {
    font-weight: bold;
    margin: 15px 0 0 0;
    font-size: 16px;
}

JavaScript

(function(){
    
         //$response.innerHTML = 
        
        function setupHtml(json){
        var obj = JSON.parse(json);
            
        var $response = document.getElementById("test");
            
        var html = ('<div class="schedule-container">\
<div class="schedule-card">\
<img alt="" class="block" height="48" id="u5538_img" src="http://kabobtrolley.com/images/sch-icon.jpg" width="80"></img>\
<p class="schedule-date">Tuesday 28</p>\
<p class="schedule-type">Trölley Truck</p>\
<p id="cart-mon-time">11:30-2:00</p>\
<p id="cart-mon-loc">11:30-2:00 901 Mint Plaza 66 Mint St., @Blue Bottle Cafe</p>\
<p class="schedule-type">Trölley Cart</p>\
<p id="cart-mon-time">11:30-2:00</p>\
<p id="cart-mon-loc">11:30-2:00 901 Mint Plaza 66 Mint St., @Blue Bottle Cafe</p>\
</div>\
</div> \
');
            for (i in obj.schedules) {
          $response.innerHTML += html;  
            }
            
        //$response.innerHTML = obj.schedules.monday.cart.locations[0];
         
        }
        
        var xhr = new XMLHttpRequest();
        xhr.timeout = 2000;
        xhr.onreadystatechange = function(e){
            console.log(this);
            if (xhr.readyState === 4){
                if (xhr.status === 200){
                    // debugger;
                    // console.log(xhr.response);
                   //xhr.response;
                    setupHtml(xhr.response);
                } else {
                    console.error("XHR didn't work: ", xhr.status);
                }
            }
        }
        xhr.ontimeout = function (){
            console.error("request timedout: ", xhr);
        }
        xhr.open("get", "https://script.google.com/macros/s/AKfycbwRBO_9Cu095LUGiXUnY3JNCpbSTBsRnYrl33arS3hCK9IziFk/exec", /*async*/ true);
        // xhr.responseType = "text";
        xhr.send();
        
    })();