## Apples

- apples-fetch.html
- JSON data apples-pyo.php

The JavaScript:

    let applesUrl = "https://cscie12.dce.harvard.edu/apples-pyo.php";
      document.addEventListener('DOMContentLoaded',function(){
        fetch(applesUrl)
          .then(response => response.json())
          .then(data => buildApplesList(data));
      });

      function buildApplesList(data){
        let template = document.getElementById('apple-template').innerHTML ;
        console.log(template);
        let compiledTemplate = Handlebars.compile(template);
        let rendered = compiledTemplate(data);
        document.getElementById('applelist').innerHTML = rendered;
      }

The template:

    <template id="apple-template">
      <h2>Picking Now</h2>
        <ul>
          {{#apples.picking_now}}
            <li>{{ . }}
          {{/apples.picking_now}}
        </ul>

        <h2>Picking Soon</h2>
        <ul>
          {{#apples.picking_soon}}
            <li>{{ . }}
          {{/apples.picking_soon}}
        </ul>
      </template>