Updated codebase with button example.

mos2 · mos2 · commit 976e8f253056 · 2018-11-05T21:20:28.000Z
diff --git a/README.md b/README.md
@@ -41,6 +41,8 @@ npm start
 
 This launches `app.js`. To view the application in action, open your web browser, and navigate to `http://localhost:4000`.
 
+Next, in your browser navigate to `http://localhost:4000/button.html`. This webpage contains a button that, when clicked, will send a HTTP GET request (by using AJAX) to app.js at `htttp://localhost:4000`. The response output will be written onto the webpage beneath the button.
+
 ## What Happened
 
 `app.js` starts up a web server on port 4000, initialised with the Express framework. The code listens for incoming HTTP `GET` requests to the root of the application `/`, i.e. no other path. The incoming HTTP requests are represented by the `req` object.
diff --git a/app.js b/app.js
@@ -1,6 +1,8 @@
 const express = require('express')
 const app = express()
 const port = 4000
+//Tell Express to serve static html files from the 'public' folder.
+app.use(express.static('public'))
 
 
 //Configure express to listen for HTTP GET requests at "/"
@@ -21,7 +23,7 @@ app.get("/", (req, res) => {
         //Write the output data into the HTTP response object, 'res'.
         res.write(data)
         //Send the HTTP response back to the client and close the connection.
-        res.end("end");
+        res.end();
     });
 })
 
diff --git a/public/button.html b/public/button.html
@@ -0,0 +1,24 @@
+<html>
+  <head>
+    <title>
+      My Button Example with Express
+    </title>
+      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+      <script type="text/javascript">
+        $(document).ready(function() {
+          $('#server_button').click(function() {
+            $.get('http://localhost:4000/', function(data) {
+              $('#response_data').html(data); // show the list
+            });
+          });
+        });
+      </script>
+  </head>
+  <body>
+    <h1>
+      Team ArduinoPi - Uber Button
+    </h1>
+    <button type="button" name="button" id="server_button">Click me and talk to Express!</button>
+    <div id="response_data" />
+  </body>
+</html>
