Set up the basic functionality of adding and removing destinations

pspeter3 · Jun 24, 2012 · 1ff591c · 1ff591c
1 parent f653cbf
commit 1ff591c
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/distance-calc/app.js b/distance-calc/app.js
@@ -0,0 +1,18 @@
+// Removes destination
+var removeDestination = function() {
+  $(this).parents('.destination').remove();
+};
+
+// Adds an address to the data table
+var addDestination = function() {
+  var addr = $('#address').val();
+  if (addr !== '') {
+    $('#data').append('<tr class="destination"><td class="address"><a href="#" class="close">&times;</a>' + addr + '</td><td class="distance"></td><td class="map"></td></tr>');
+    $('.close').click(removeDestination);
+  }
+}; 
+// Sets up jQuery
+$(function() {
+  // Set up add-address binding
+  $('#add-destination').click(addDestination);
+});
diff --git a/distance-calc/index.html b/distance-calc/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+  <meta charset="UTF-8">
+  <title>Distance Calculator</title>
+  <link rel="stylesheet" href="../lib/css/bootstrap.min.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <div class="container">
+    <div class="row">
+      <div class="span12">
+        <div class="page-header">
+          <h1>Distance Calculator</h1>
+        </div>
+        <form class="well form-inline">
+          <input type="text" class="input-xxlarge" id="address" placeholder="Address">
+          <a href="#" class="btn" id="add-destination"><i class="icon-plus"></i>Add Destination</a>
+          <a href="#" class="btn btn-primary" id="calculate-distances"><i class="icon-map-marker icon-white"></i>Calculate</a>
+        </form>
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Address</th>
+              <th>Distance</th>
+              <th>Map</th>
+            </tr>
+          </thead>
+          <tbody id="data">
+
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+</body>
+</html>