more updates and script.js into xhr

shannonjensen · Mar 19, 2018 · 30c2158 · 30c2158
1 parent 619bd5e
commit 30c2158
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ We believe in learning by doing!
 
 ### Structure of the workshop
 
-You will be working on this project in pairs.  Your mentors will be available to help you out and answer any questions. Remember the 20/20/20 rule if you get stuck!
+You will be working on this project in pairs.  Your mentors will be available to help you out and answer any questions. Remember the 20/20/20 rule if you get stuck.
 
 **First, clone this repository onto your own machine**
 

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <title>Node Girls CMS tutorial</title>

diff --git a/public/script.js b/public/script.js
@@ -1,28 +1,32 @@
-$(document).ready(function() {
-    $.ajax({
-        url: '/posts',
-        dataType: 'json',
-        success: function(data) {
-
+document.onreadystatechange = function () {
+    if (document.readyState === 'complete') {
+      var xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = function() {
+        if(xhr.readyState === 4){
+          if (xhr.status === 200){
+            var data = JSON.parse(xhr.responseText);
             for (var blogPost in data) {
-                var postDiv         = document.createElement('div');
-                var postText        = document.createElement('p');
-                var thumbnail       = document.createElement('img');
-                var postContainer   = document.getElementsByClassName('post-container')[0];
-
-                thumbnail.src = "./img/logo2.png";
-                thumbnail.className = "thumbnail";
-                postText.innerHTML = data[blogPost];
-                postDiv.className = "post";
-
-                postDiv.appendChild(thumbnail);
-                postDiv.appendChild(postText);
-                postContainer.appendChild(postDiv);
-
+              var postDiv         = document.createElement('div');
+              var postText        = document.createElement('p');
+              var thumbnail       = document.createElement('img');
+              var postContainer   = document.getElementsByClassName('post-container')[0];
+
+              thumbnail.src = "./img/logo2.png";
+              thumbnail.className = "thumbnail";
+              postText.innerHTML = data[blogPost];
+              postDiv.className = "post";
+
+              postDiv.appendChild(thumbnail);
+              postDiv.appendChild(postText);
+              postContainer.appendChild(postDiv);
             }
-        },
-        error: function(error){
-            console.log(error);
+          }
+          else {
+            console.error(xhr.responseText);
+          }
         }
-    });
-});
+      }
+      xhr.open('GET', '/posts', true);
+      xhr.send();
+    }
+  }
diff --git a/step04.md b/step04.md
@@ -57,12 +57,14 @@ Let's try it.
 
 **Require `fs` module at the top of your file**
 
+Edit your code to include the following route:
+
 ```js
 var http = require('http');
 var fs = require('fs');
 
 function router (request, response) {
-
+  //...
   if (endpoint === "/") {
     response.writeHead(200, {"Content-Type": "text/html"});
 
@@ -75,6 +77,7 @@ function router (request, response) {
       response.end(file);
     });
   }
+  //...
 }
 ```
 

diff --git a/step07.md b/step07.md
@@ -42,6 +42,12 @@ we do this:
 var myModule = require('path/to/my/file');
 ```
 
+**About Paths**
+
+We can use **relative paths**. `..` means "go up one level to the folder above".  `.` means "look inside the current folder". For example: '../myComputer/home.txt' means "go up one folder, then go to the 'myComputer' folder, then go to the 'home.txt' file". Another example: './home.txt' means "look inside the current folder for the 'home.txt' file"
+
+Remember that `__dirname` gives us the current directory. We can combine `__dirname`, the dots, and any folder names to point to the correct location.
+
 **Require your router.js file into your server.js file**
 
 If you run your server, you should get an error:
@@ -64,15 +70,20 @@ Try running the server again and reloading the page.
 
 ## Fixing your broken paths
 
-You should see a very broken webpage now. There's a reason for that!
+You webpage is now very broken. There's a reason for that!
 
 When the router function was in `server.js`, the paths to our assets (html, css etc) that were assigned to the `pathToFile` and `pathToIndex` variables, were correct. Now the router function has moved inside the `src` folder, we need to update the paths to our assets to make sure they point to the right location.
 
-We can use **relative paths**. `..` means "go up one level to the folder above".  `.` means "look inside the current folder". For example: '../myComputer/home.txt' means "go up one folder, then go to the 'myComputer' folder, then go to the 'home.txt' file". Another example: './home.txt' means "look inside the current folder for the 'home.txt' file"
-
-Remember that `__dirname` gives us the current directory. We can combine `__dirname`, the dots, and any folder names to point to the correct location.
+Refer to the About Paths section above for guidance and don't be afraid to ask questions.
 
-See if you can do this by yourself. Work with your team if you're struggling.
+Hint that it should look like:
+```js
+__dirname + '/../public/index.html'
+```
+or
+```js
+path.join(__dirname, '..', 'public', 'index.html')
+```
 
 
 ## More modularisation!!!

diff --git a/step08.md b/step08.md
@@ -2,6 +2,8 @@
 
 For the rest of the workshop your job is to build the proper CMS. We have done the front-end code for you - you only need to worry about the server side of the application.
 
+Delete everything from your router function except the handlers for the home route "/" and the generic assets.
+
 We need to change the `index.html` file. Replace the current content with:
 
 ```html
@@ -36,7 +38,6 @@ We need to change the `index.html` file. Replace the current content with:
 
             <div class="post-container"></div>
         </main>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     </body>
 </html>
 ```

diff --git a/step09.md b/step09.md
@@ -2,15 +2,7 @@
 
 Run the server to see what the CMS looks like!
 
-
-*Everything is broken...*
-
-Fix it!
-
-Your job is to write a new server and handler. You'll serve the public assets and handle any embedded requests in the `index.html`.
-
-
-Good luck! Remember, work with your team and chat with your mentor!
+Make sure that all paths are working and all assets are being properly served.
 
 ---