Earthquake Data with Handlebars Templates

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        <title>EARTHQUAKE!</title>
        <meta name="description" content="Earthquake data." />
        
        
        <meta property="og:title" content="Earthquakes keep happening." />
        <meta property="og:site_name" content="Daily Bruin Online Intern training." />
        
        
        <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet" type="text/css">
        
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.js"></script>

// make the ajax request
                $.ajax({
                    url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson"

// process_data is a callback function, the result of the data 
                // is automatically passed in as an argument
                }).done(process_data);
            });

function process_data(json_data) {
                // Check your console to see what gets put there
                console.log(json_data);
                // Inspecting that, you can get a sense for the structure of the
                // JSON file, which should match the documentation here: 
                // https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php

// upon inspection, you should see that json_data has a property 
                // "features", which is an array of objects that has data that
                // looks promising

// often times we'll want to process or clean or filter the data 
                // somehow. Here, we're just going to store the features array 
                // into a new dictionary.

var earthquake_data = {
                    "earthquakes": json_data.features
                };

// Now we use handlebars to create our template
                // This is taken straight from handlebars' website

// Uses jquery to select the template (see below)
                var source = $("#entry-template").html();

// Use handlebars to turn it into a template
                var template = Handlebars.compile(source);

// Now pass the data into the template to generate the html
                var html_content = template(earthquake_data);

// html is now a string with the raw html
                // we then put that into the earthquake-data div
                $("#earthquake-data").html(html_content);
            }

// This is a handlebars helper function, just adds one to a value
            Handlebars.registerHelper("inc", function(value, options){
                return parseInt(value) + 1;
            });
        </script>

</head>
    <body>
        <div class="container">
            <div id="earthquake-data">
            </div>
        </div>
    </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.js