├── .gitignore
├── public
    └── styles.css
├── views
    ├── new.ejs
    ├── edit.ejs
    ├── partials
    │   ├── footer.ejs
    │   └── header.ejs
    └── index.ejs
├── package.json
├── readme.md
└── app.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/public/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 |   padding-top: 80px;
3 | }


--------------------------------------------------------------------------------
/views/new.ejs:
--------------------------------------------------------------------------------
 1 | <% include partials/header %>
 2 | 
 3 | <div class="row">
 4 | 	<div class="col-md-6 col-md-offset-3">
 5 | 		<h1>New Item</h1>
 6 | 		<form action="/todos" method="POST">
 7 | 			<div class="form-group">
 8 | 				<label>Item Text</label>
 9 | 				<input type="text" name="todo[text]" class="form-control">
10 | 			</div>
11 | 			<button class="btn btn-primary">Create Item</button>
12 | 		</form>
13 | 	</div>
14 | </div>
15 | 
16 | <% include partials/footer %>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ToDo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "app.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "Ian",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "body-parser": "^1.14.1",
13 |     "ejs": "^2.3.4",
14 |     "express": "^4.13.3",
15 |     "express-sanitizer": "^1.0.1",
16 |     "method-override": "^2.3.5",
17 |     "mongoose": "^4.2.3"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/views/edit.ejs:
--------------------------------------------------------------------------------
 1 | <% include partials/header %>
 2 | 
 3 | <div class="row">
 4 | 	<div class="col-md-6 col-md-offset-3">
 5 | 		<h1>Edit Item</h1>
 6 | 		<form action="/todos/<%=todo._id%>?_method=PUT" method="POST">
 7 | 			<div class="form-group">
 8 | 				<label>Item Text</label>
 9 | 				<input type="text" value="<%= todo.text %>" name="todo[text]" class="form-control">
10 | 			</div>
11 | 			<button class="btn btn-primary">Update Item</button>
12 | 		</form>
13 | 	</div>
14 | </div>
15 | 
16 | <% include partials/footer %>


--------------------------------------------------------------------------------
/views/partials/footer.ejs:
--------------------------------------------------------------------------------
 1 | 		</div>
 2 | 		<!-- /.container -->
 3 | 
 4 | 		<!-- jQuery CDN -->
 5 | 		<script
 6 | 		  src="https://code.jquery.com/jquery-3.1.1.min.js"
 7 | 		  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
 8 | 		  crossorigin="anonymous"></script>
 9 | 	  <!-- Bootstrap CDN -->
10 | 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>        
11 |     </body>
12 | </html>


--------------------------------------------------------------------------------
/views/index.ejs:
--------------------------------------------------------------------------------
 1 | <% include partials/header %>
 2 | 
 3 | 	<div class="row">
 4 | 		<div class="col-md-6 col-md-offset-3">
 5 | 			<h1>To Do Items</h1>
 6 | 			<ul class="list-group">
 7 | 			<% todos.forEach(function(todo){ %>
 8 | 				<li class="list-group-item">
 9 | 					<span class="lead">
10 | 						<%= todo.text %>
11 | 					</span>
12 | 					<div class="pull-right">
13 | 						<a href="/todos/<%=todo._id%>/edit" class="btn btn-sm btn-warning">Edit</a>
14 | 						<form style="display: inline" method="POST" action="/todos/<%=todo._id%>?_method=DELETE">
15 | 							<button type="submit" class="btn btn-sm btn-danger">Delete</button>
16 | 						</form>
17 | 					</div>
18 | 					<div class="clearfix"></div>
19 | 				</li>
20 | 			<% }); %>
21 | 			</ul>
22 | 			<a href="/todos/new" class="btn btn-primary">New Item</a>
23 | 		</div>
24 | 	</div>
25 | 
26 | <% include partials/footer %>
27 | 
28 | 
29 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Setup Instructions
 2 | 
 3 | - Paste the following into your terminal - `git clone git@github.com:nax3t/ajax-jquery-tutorial.git`
 4 |     - If that gives you an error then you need to [setup SSH](https://help.github.com/articles/adding-a-new-ssh-key-to-your-github-account/) or use the HTTPS link instead: `git clone https://github.com/nax3t/ajax-jquery-tutorial.git` *(this requires use of your github credentials, the password will be hidden while typing)*
 5 | - Now `cd` into `ajax-jquery-tutorial` and run `npm install`
 6 | - Start your mongo daemon `mongod` in a separate terminal tab
 7 | - Install `nodemon` globally (if you don't already have it installed) with `npm i -g nodemon`
 8 | - Run your application in its own terminal tab with `nodemon`
 9 | - Navigate to `localhost:3000` in your browser
10 | 
11 | *Note: If you're working from c9 then see below:
12 | - Change the following lines at the bottom of app.js:
13 | 
14 | ```JS
15 | app.listen(process.env.PORT, process.env.IP, function(){
16 |     console.log("The server has started!");
17 | });
18 | ```
19 | 
20 | - Now run your server with `node app.js` or `nodemon` and view the app from the Preview tab in your workspace
21 | 


--------------------------------------------------------------------------------
/views/partials/header.ejs:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>To Do App</title>
 4 |     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
 5 |     <!-- Bootstrap CDN -->
 6 |     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 7 |     <link rel="stylesheet" href="/styles.css">
 8 |   </head>
 9 |   <body>
10 |     <!-- navbar -->
11 |     <nav class="navbar navbar-inverse navbar-fixed-top">
12 |       <div class="container">
13 |         <div class="navbar-header">
14 |           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
15 |             <span class="sr-only">Toggle navigation</span>
16 |             <span class="icon-bar"></span>
17 |             <span class="icon-bar"></span>
18 |             <span class="icon-bar"></span>
19 |           </button>
20 |           <a class="navbar-brand" href="#">To Do App</a>
21 |         </div>
22 |         <div id="navbar" class="collapse navbar-collapse">
23 |           <ul class="nav navbar-nav">
24 |             <li><a href="/" class="item">Home</a></li>
25 |             <li><a href="/todos/new" class="item">New Item</a></li>
26 |           </ul>
27 |         </div><!--/.nav-collapse -->
28 |       </div>
29 |     </nav>
30 | 
31 |     <div class="container">


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | var express = require("express"),
 2 | app     = express(),
 3 | mongoose = require("mongoose"),
 4 | bodyParser = require("body-parser"),
 5 | expressSanitizer = require("express-sanitizer"),
 6 | methodOverride = require('method-override');
 7 | 
 8 | mongoose.connect("mongodb://localhost/todo_app");
 9 | app.use(express.static('public'));
10 | app.use(bodyParser.urlencoded({extended: true}));
11 | app.use(expressSanitizer());
12 | app.set("view engine", "ejs");
13 | app.use(methodOverride('_method'));
14 | 
15 | var todoSchema = new mongoose.Schema({
16 |   text: String,
17 | });
18 | 
19 | var Todo = mongoose.model("Todo", todoSchema);
20 | 
21 | app.get("/", function(req, res){
22 |   res.redirect("/todos");
23 | });
24 | 
25 | app.get("/todos", function(req, res){
26 |   Todo.find({}, function(err, todos){
27 |     if(err){
28 |       console.log(err);
29 |     } else {
30 |       res.render("index", {todos: todos}); 
31 |     }
32 |   })
33 | });
34 | 
35 | app.get("/todos/new", function(req, res){
36 |  res.render("new"); 
37 | });
38 | 
39 | app.post("/todos", function(req, res){
40 |  req.body.todo.text = req.sanitize(req.body.todo.text);
41 |  var formData = req.body.todo;
42 |  Todo.create(formData, function(err, newTodo){
43 |     if(err){
44 |       res.render("new");
45 |     } else {
46 |         res.redirect("/todos");
47 |     }
48 |   });
49 | });
50 | 
51 | app.get("/todos/:id/edit", function(req, res){
52 |  Todo.findById(req.params.id, function(err, todo){
53 |    if(err){
54 |      console.log(err);
55 |      res.redirect("/")
56 |    } else {
57 |       res.render("edit", {todo: todo});
58 |    }
59 |  });
60 | });
61 | 
62 | app.put("/todos/:id", function(req, res){
63 |  Todo.findByIdAndUpdate(req.params.id, req.body.todo, function(err, todo){
64 |    if(err){
65 |      console.log(err);
66 |    } else {
67 |       res.redirect('/');
68 |    }
69 |  });
70 | });
71 | 
72 | app.delete("/todos/:id", function(req, res){
73 |  Todo.findById(req.params.id, function(err, todo){
74 |    if(err){
75 |      console.log(err);
76 |    } else {
77 |       todo.remove();
78 |       res.redirect("/todos");
79 |    }
80 |  }); 
81 | });
82 | 
83 | 
84 | app.listen(3000, function() {
85 |   console.log('Server running on port 3000');
86 | });
87 | 
88 | // // Uncomment the three lines of code below and comment out or remove lines 84 - 86 if using cloud9
89 | // app.listen(process.env.PORT, process.env.IP, function(){
90 | //     console.log("The server has started!");
91 | // });
92 | 


--------------------------------------------------------------------------------