Challenge 1: Automatic information.

.eslintrc.js

@@ -22,6 +22,9 @@ module.exports = {
     // From check.
     "check": true,
 
+    // From HTTP.
+    "HTTP": true,
+
     // From iron:router.
     "Router": true,
 

.meteor/packages

@@ -22,3 +22,4 @@ accounts-ui
 accounts-password
 check
 iron:router
+http

client/comments.js

@@ -4,7 +4,7 @@
  * - events
  */
 Template.comments.events({
-  "submit .js-comment-submit": function (event, template) {
+  "submit .js-comment-submit": function (event) {
     const contents = event.target["comment-input"].value;
     const user = Meteor.user();
     const comment = {

client/page_home.html

@@ -2,5 +2,6 @@
   <ol class="breadcrumb">
     <li class="active">Home</li>
   </ol>
+  {{> website_form}}
   {{> website_list }}
 </template>

client/website_form.html

@@ -5,22 +5,25 @@
   </a>
   {{/if}}
 
-  <div id="website_form" class="hidden_div">
-    <form class="js-save-website-form">
-      <div class="form-group">
-        <label for="url">Site address</label>
-        <input type="text" class="form-control" id="url" placeholder="http://www.mysite.com">
-      </div>
-      <div class="form-group">
-        <label for="title">Title</label>
-        <input type="text" class="form-control" id="title" placeholder="Mysite">
-      </div>
-      <div class="form-group">
-        <label for="description">Description</label>
-        <input type="text" class="form-control" id="description" placeholder="I found this site really useful for ...">
-      </div>
+  <div id="website_form" class="hidden_div panel panel-default">
+    <div class="panel-body">
+      <form class="js-save-website-form">
+        <div class="input-group">
+          <label for="url" class="input-group-addon">Site address</label>
+          <input type="text" class="form-control" id="url" placeholder="http://www.mysite.com">
+          <span class="input-group-btn"><button id="site-lookup" class="btn btn-primary">Lookup info</button></span>
+        </div>
+        <div class="input-group">
+          <label for="title" class="input-group-addon">Title</label>
+          <input type="text" class="form-control" id="title" placeholder="Mysite">
+        </div>
+        <div class="input-group">
+          <label for="description" class="input-group-addon">Description</label>
+          <input type="text" class="form-control" id="description" placeholder="I found this site really useful for ...">
+        </div>
 
-      <button type="submit" class="btn btn-default">Submit</button>
-    </form>
+        <button type="submit" class="btn btn-default">Submit</button>
+      </form>
+    </div>
   </div>
 </template>

client/website_form.js

@@ -9,6 +9,24 @@ Template.website_form.events({
     $("#website_form").toggle("slow");
   },
 
+  "click #site-lookup": function (event) {
+    event.preventDefault();
+    const url = $(event.target).parent().prev().val();
+
+    Meteor.call("loadSite", url, function (error, result) {
+      let $result = $("<root>" + result + "</root>");
+      let titleElement = $($result.find("title")[0]).text();
+      let metaTitle = $result.find("meta[name=\"title\"]").attr("content");
+      let metaDescription = $result.find("meta[name=\"description\"]").attr("content");
+      let title = [titleElement, metaTitle].join(" / ");
+      $("#title").val(title);
+      $("#description").val(metaDescription);
+    });
+
+    // Stop the form submit from reloading the page
+    return false;
+  },
+
   "submit .js-save-website-form": function (event) {
     // here is an example of how to get the url out of the form:
     const url = event.target.url.value;

server/methods.js

@@ -0,0 +1,7 @@
+Meteor.methods({
+  loadSite: function (url) {
+    check(url, String);
+    let result = HTTP.get(url);
+    return result.content;
+  }
+});