Refactor workshop to avoid using branches.

shannonjensen · Jan 28, 2017 · 08e00b1 · 08e00b1
1 parent 4d3429a
commit 08e00b1
Show file tree

Hide file tree

Showing 21 changed files with 363 additions and 183 deletions.
diff --git a/README.md b/README.md
@@ -66,15 +66,15 @@ Don't worry, you can both get a copy of your work if the other person forks thei
 
 ---
 ## Walkthrough
-* [Step 1 - set up your project](step1.md)
-* [Step 2 - building the server](step2.md)
-* [Step 3 - communicate with the server](step3.md)
-* [Step 4 - requests/responses](step4.md)
-* [Step 5 - serving your assets](step5.md)
-* [Step 6 - sending your blog post to your server](step6.md)
-* [Step 7 - reorganising your project](step7.md)
-* [Step 8 - get ready for the CMS project](step8.md)
-* [Step 9 - build the CMS](step9.md)
+* [Step 1 - set up your project](step01.md)
+* [Step 2 - building the server](step02.md)
+* [Step 3 - communicate with the server](step03.md)
+* [Step 4 - requests/responses](step04.md)
+* [Step 5 - serving your assets](step05.md)
+* [Step 6 - sending your blog post to your server](step06.md)
+* [Step 7 - reorganising your project](step07.md)
+* [Step 8 - get ready for the CMS project](step08.md)
+* [Step 9 - build the CMS](step09.md)
 * [Step 10 - save your blog posts](step10.md)
 * [stretch - stretch goals](stretch.md)
 

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/img/image.jpg b/public/img/image.jpg
diff --git a/public/img/logo1.png b/public/img/logo1.png
diff --git a/public/img/logo2.png b/public/img/logo2.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Node Girls CMS tutorial</title>
+    </head>
+    <body>
+        <h1> This is the index page </h1>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <img src="./img/image.jpg">
+    </body>
+</html>
diff --git a/public/main.css b/public/main.css
@@ -0,0 +1,147 @@
+/*******************
+* Basic Resets
+********************/
+
+body, html, div, label, p, h1, h2, h3, h4, h5, h6, form, a, input, textarea {
+	margin: 0; 
+	padding: 0; 
+	border: 0; 
+	outline: none;
+}
+
+
+body {
+	line-height: 1;
+	font-size: 88%;
+	font-family: 'Open Sans', arial, sans-serif;
+	background: #FAFAFA;
+	color: #585858;
+}
+
+div {
+	width: 100%;
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+	font-size: 100%;
+    padding: 23px 0;
+	margin: 0 15px;
+	color: #FF0040;
+	letter-spacing: 1px;
+}
+
+h1 {
+	font-size: 32px;
+}
+
+h2 {
+	font-size: 25px;
+}
+
+main {
+	display: block;
+	width: 80%;
+	margin: 0 auto;
+}
+
+/*******************
+*  Header
+********************/
+
+
+header {
+	background: #FF0040;
+	background: -webkit-linear-gradient(#F5A9BC, #FF0040);
+	background: -o-linear-gradient(#F5A9BC, #FF0040); 
+	background: -moz-linear-gradient(#F5A9BC, #FF0040);
+	background: linear-gradient(#F5A9BC, #FF0040);
+}
+
+.title {
+	color: white;
+}
+
+.main-logo {
+	float: left;
+	width: 100px;
+	height: auto;
+}
+
+
+/*******************
+*  Enter a New Post
+********************/
+
+.entry-container {
+	margin: 20px 0 50px;
+}
+
+label {
+	width: 100%;
+}
+
+.text-wrapper {
+	width: 80%;
+}
+
+textarea {
+	width: 96%;
+	border-radius: 3px;
+	border: 1px solid #848484;
+	padding: 5px 2%;
+}
+
+button[type="submit"] {
+	background: #A5DF00;
+	background: -webkit-linear-gradient(#93C503, #ABCC4B);
+	background: -o-linear-gradient(#93C503, #ABCC4B);
+	background: -moz-linear-gradient(#93C503, #ABCC4B);
+	background: linear-gradient(#93C503, #ABCC4B);
+	border: none;
+    color: white;
+    padding: 4px 25px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    float: right;
+    margin-top: 10px;
+    border-radius: 3px;
+}
+
+/*******************
+*  Posts
+********************/
+
+hr {
+	background: #BDBDBD;
+}
+
+.thumbnail {
+	float: left;
+	width: 50px;
+	height: auto;
+	margin-left: 3px;
+	margin-top: 3px;
+}
+
+.post {
+	width: 100%;
+    border: 1px solid #848484;
+    float: left;
+    margin: 2%;
+    border-radius: 3px;
+    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
+    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
+    box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.4);
+    background: white;
+}
+
+.post p {
+	margin: 5px 10px;
+}
+
+@media (min-width: 600px) {
+	 .post {
+		width: 28.9%;
+	}
+}
diff --git a/public/script.js b/public/script.js
@@ -0,0 +1,28 @@
+$(document).ready(function() {
+    $.ajax({
+        url: '/posts',
+        dataType: 'json',
+        success: function(data) {
+
+            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);
+
+            }
+        },
+        error: function(error){
+            console.log(error);
+        }
+    });
+});
diff --git a/src/posts.json b/src/posts.json
@@ -0,0 +1,3 @@
+{
+    "1456059074613": "This is your first blog post"
+}
diff --git a/step1.md → step01.md b/step1.md → step01.md
@@ -1,9 +1,5 @@
 # Step 1 - Set up your first project
 
-```bash
-git checkout step1
-```
-
 Often when creating a project, you might be installing lots of different things along the way.
 
 If you wish to share your project with others, it would be useful to have a list of the things you installed in one file, so that other people's machines know what to install, in order to run it.
@@ -68,13 +64,11 @@ Great!  You should now see a new file called `package.json`.
 ```bash
 git add .
 git commit -m 'enter relevant message'
-git push origin step1
 ```
 
-## [**next step >>>**](step2.md)
+## [**next step >>>**](step02.md)
 ---
 ## Keywords
-* git checkout
 * [`package.json`](http://browsenpm.org/package.json)
 * npm
 * dependencies
diff --git a/step2.md → step02.md b/step2.md → step02.md
@@ -1,10 +1,5 @@
 # Step 2 - Building the server
 
-```bash
-git checkout step2
-git merge step1
-```
-
 ### What is a server?
 * Servers are computer programs that receive requests from other programs, the *clients* and send back a response e.g share data, information or hardware and software resources.
 
@@ -38,19 +33,19 @@ Examples of common core modules are `http`, `fs` and `path`.
 There is a list of all the core modules and their methods on the [Node.js website](https://nodejs.org/dist/latest-v4.x/docs/api/).
 
 #### b. Node 3rd-party module
-There are thousands of open-source, 3rd-party Node modules that other clever people have written. You can download useful 3rd-party modules (also known as "packages") from the [Node Package Manager](http://npmjs.com).
+There are thousands of open-source, 3rd-party Node modules that other clever people have written. You can download useful 3rd-party modules (also known as "packages") from [npm](http://npmjs.com) (the node package manager).
 
-The NPM website says:
+The npm website says:
 
 > npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you're sharing.
 
-The npm command-line tool comes automatically with Node.  You can install 3rd-party packages on the command line, so no need to download from the npm website or anything.
+The npm command-line tool comes automatically with Node. You can install 3rd-party packages on the command line, so no need to download from the npm website or anything.
 
 #### c. Modules you've written
 
 Also called a module, but slightly different from the first two.
 
-These are modules you write yourself in your code.  We will talk about this later on in step 7.
+These are modules you write yourself in your code. We will talk about this later on in step 7.
 
 ### Time to code!!!
 ---
@@ -59,9 +54,9 @@ These are modules you write yourself in your code.  We will talk about this late
 
 For our server, we are going to use a core Node module called `http`.
 
-`http` is a useful core module - it helps us process our server requests and responses. Just like other modules, `http` is a big javascript object containing properties and methods (functions) that we can use.
+`http` is a useful core module - it helps us process our server requests and responses. Just like other modules, `http` is a big JavaScript object containing properties and methods (functions) that we can use.
 
-The official reference to the `http` module can be found on the Node.js website [here](https://nodejs.org/dist/latest-v4.x/docs/api/http.html).
+The official reference to the `http` module can be found on the Node.js website [here](https://nodejs.org/dist/latest-v6.x/docs/api/http.html).
 
 
 
@@ -118,18 +113,17 @@ If you see this...
 ![success](readme-images/step2-server02.png)
 
 
-### congratulations!
+### Congratulations!
 You have built yourself a server!
 ---
 ## Commit your changes
 
 ```bash
 git add .
 git commit -m 'enter relevant message'
-git push origin step2
 ```
 
-## [**next step** >>>](step3.md)
+## [**next step** >>>](step03.md)
 ---
 ## Keywords
 * server

diff --git a/step3.md → step03.md b/step3.md → step03.md
@@ -1,10 +1,5 @@
 # Step 3 - Communicate with the server
 
-```bash
-git checkout step3
-git merge step2
-```
-
 ### What is a handler function?
 
 When a request reaches the server, we need a way of responding to it. In comes the **handler** function. The handler function is just a function which receives requests and handles them, hence the name.
@@ -13,7 +8,7 @@ The handler function always takes a `request` and `response` object and sends th
 
 ```js
 function handler (request, response) {
-  //dealing with request and sending response
+  // deal with request and sending response
 }
 ```
 
@@ -38,18 +33,17 @@ var server = http.createServer();
 
 server.listen(3000, function () {
 
-    console.log("Server is listening on port 3000.  Ready to accept requests!");
+    console.log("Server is listening on port 3000. Ready to accept requests!");
 });
 
 
 ```
 
 ## 2. Tell your handler function what to do
 
-We want our handler function to send our message in a response. To do that we will use one of the method of `response` object, which is: ```response.write()```. You can find more about `response.write()` [here](https://nodejs.org/dist/latest-v4.x/docs/api/http.html#http_response_write_chunk_encoding_callback)
+We want our handler function to send our message in a response. To do that we will use one of the method of `response` object, which is: ```response.write()```. You can find more about `response.write()` [here](https://nodejs.org/dist/latest-v6.x/docs/api/http.html#http_response_write_chunk_encoding_callback)
 
-Every response has a header, which contains information about the response. We can add information to the header using `response.writeHead()`. The `writeHead` takes
-2 parameters: status code and header object.
+Every response has a header, which contains information about the response. We can add information to the header using `response.writeHead()`. The `writeHead` takes 2 parameters: status code and header object.
 
 **Add these line to the handler function**
 
@@ -93,10 +87,9 @@ If you see your message in the browser, **congratulations** you just sent your f
 ```bash
 git add .
 git commit -m 'enter relevant message'
-git push origin step3
 ```
 
-## [**next step >>>**](step4.md)
+## [**next step >>>**](step04.md)
 ---
 ### Keywords:
 * status code