Added in the working API & Handlebars data

src/index.html

@@ -42,26 +42,11 @@ <h1>Connet with your MP</h1>
                 <input type="text" id="postal_code" name="postal_code">
 
                 <input type="submit" value="Connect" class="btn btn--primary">
-
             </form>
         </section>
 
-        <section class="page-section page-section--contact">
-            <div class="card card--representative" itemscope itemtype="https://schema.org/Person">
-                <img src="{{ image }}" itemprop="image" alt="Official portrait for {{ full_name }}">
-
-                <dl>
-                    <dt>Name</dt>
-                    <dd itemprop="name">{{ full_name }}</dd>
-                    <dt>Riding</dt>
-                    <dd itemprop="workLocation">{{ riding_location }}</dd>
-                    <dt>Party</dt>
-                    <dd itemprop="memberOf">{{ party_affiliation }}</dd>
-                </dl>
-
-                <a href="mailto:{{ email_address }}" class="btn btn--primary">Email your MP</a>
-                <a href="tel:{{ phone_number }}" class="btn">Email your MP</a>
-            </div>
+        <section class="page-section page-section--contact js-form-response">
+
         </section>
 
     </main>
@@ -71,6 +56,25 @@ <h1>Connet with your MP</h1>
     </footer>
 
     <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js" async></script>
     <script src="scripts/main.min.js"></script>
+
+    <script id="representative-card" type="text/x-handlebars-template">
+        <div class="card card--representative" itemscope itemtype="https://schema.org/Person">
+            <img src="{{ image }}" itemprop="image" alt="Official portrait for {{ full_name }}">
+
+            <dl>
+                <dt>Name</dt>
+                <dd itemprop="name">{{ full_name }}</dd>
+                <dt>Riding</dt>
+                <dd itemprop="workLocation">{{ riding_location }}</dd>
+                <dt>Party</dt>
+                <dd itemprop="memberOf">{{ party_affiliation }}</dd>
+            </dl>
+
+            <a href="mailto:{{ email_address }}" class="btn btn--primary">Email your MP</a>
+            <a href="tel:{{ phone_number }}" class="btn">Email your MP</a>
+        </div>
+    </script>
 </body>
 </html>

src/scripts/main.js

@@ -1,15 +1,48 @@
 $(document).ready(function(){
 
-    // Fetch data from the Represent Civic Information API
-    $.ajax({
-        url: "https://represent.opennorth.ca",
-        dataType: 'jsonp',
-        success: function(results){
-            console.log(results);
-        }
-    });
+    // Receive form information from user on submit
+    $('form').on('submit', function(event) {
+        event.preventDefault();
+
+        // Set up a Handlebars template for the Representative Contact Card
+        var source = document.getElementById("representative-card").innerHTML;
+        var template = Handlebars.compile(source);
+
+        // Capture postal code for API lookup
+        var postal_code = $('form').find('#postal_code').val();
 
-    // Do functions with it
+        // Fetch data from the Represent Civic Information API
+        $.ajax({
+            url: "https://represent.opennorth.ca/postcodes/" + postal_code,
+            dataType: 'jsonp',
+            success: function(results){
+                var representative = {};
+                var length = results.representatives_centroid.length;
+                var template_data = [];
 
-    console.log('Compiled');
+                // For every postal code, there is an array of representative data
+                // We are looping to find the House of Commons (MP) dataset.
+                // This is a brittle, quick implementation and could be further
+                // improved by catching missing rep data or API errors with fallbacks.
+                for(i=0;i<length;i++) {
+                    representative = results.representatives_centroid[i];
+
+                    if (representative.representative_set_name == "House of Commons") {
+                        template_data = {
+                            full_name: representative.name,
+                            email_address: representative.email,
+                            phone_number: representative.email, // which phone number?
+                            image: representative.photo_url,
+                            riding_location: representative.district_name,
+                            party_affiliation: representative.party_name
+                        };
+                        break;
+                    }
+                }
+
+                // Render the Handlebars template with the rep data
+                $('.js-form-response').html(template(template_data));
+            }
+        });
+    });
 });

src/styles/core/_grid.scss

@@ -1,5 +1,5 @@
 // Layout file
 
 body {
-    color: #f00;
+
 }

src/styles/main.scss

@@ -7,8 +7,8 @@
 // @import './tools/mixins';
 // @import './tools/functions';
 
-// // Core
-// @import './core/grid';
+// Core
+@import './core/grid';
 // @import './core/typography';
 // @import './core/forms';
 // @import './core/button/button';