sf-wdi-24 · abeytaadam · Nov 12, 2015 · Nov 12, 2015 · Nov 12, 2015 · Nov 12, 2015
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "express-server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.14.1",
+    "express": "^4.13.3"
+  }
+}
diff --git a/public/main.css b/public/main.css
@@ -0,0 +1,4 @@
+#listCanvas {
+	background-color: lightgrey;
+	height: 500px;
+}
diff --git a/public/scripts.js b/public/scripts.js
@@ -0,0 +1,54 @@
+$(function() {
+	//Compile handlebars
+	var source = $('#template').html();
+	var template = Handlebars.compile(source);
+	// set global id variable
+	var id;
+
+	// client side page info array
+	var todoList = [];
+
+	$.get('localhost:3000/api/todos', function(){
+		todoItems = data.todos;
+	});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+});
diff --git a/server.js b/server.js
@@ -0,0 +1,69 @@
+var express = require('express');
+var bodyParser = require('body-parser');
+
+var app = express();
+
+// Set up Body Parser
+app.use(bodyParser.urlencoded({ extended : true }));
+
+var todoList  = [
+								{
+								task : "Buy bread",
+								description : "Obtain consumable wheat product, sliced",
+								_id : 1},{
+								task : "Buy bananas",
+								description : "Obtain consumable fruit product, whole",
+								_id : 2},{
+								task : "Buy peanut butter",
+								description : "Obtain consumable legume product, whipped",
+								_id : 3
+								}];
+
+// Set up routes
+app.get('/api/todos', function (req, res){
+	res.json(todoList);
+});
+
+app.get('/api/todos/:id', function (req, res){
+	var todoId = parseInt(req.params.id);
+	var foundTodo = todoList.filter(function (todo){
+		return todos._id == todoId;
+	});
+	res.json(foundTodo);
+});
+
+app.post('/api/todos',function (req, res) {
+	var newTodo = req.body;
+	if (todoList.length > 0) {
+		newTodo._id = todoList[todoList.length - 1]._id + 1;
+	} else {
+		newTodo._id = 1;
+	}
+	todoList.push(newTodo);
+	res.json(newTodo);
+});
+
+app.put('/api/todos/:id', function (req, res) {
+	var todoId = parseInt(req.params.id);
+	var todoToUpdate = todoList.filter(function (todo){
+		return todo._id === todoId;
+	})[0];
+	todoToUpdate.task = req.body.task;
+	todoToUpdate.description = req.body.description;
+	res.json(todoToUpdate);
+});
+
+app.delete('/api/todos/:id', function (req, res){
+	var todoId = parseInt(req.params.id);
+	var todoToUpdate = todoList.filter(function (todo){
+		return todo._id === todoId;
+	})[0];
+	var todoIndex = myTodos.indexOf(todoToDelete);
+	myTodos.splice(todoIndex, 1);
+	res.json(todoToDelete);
+});
+
+// Server listening check 
+var server = app.listen(process.env.PORT || 3000, function(){
+	console.log("HEY! LISTEN!");
+});
diff --git a/views/index.html b/views/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<!-- set viewport to device width to make site responsive -->
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<!-- bootstrap css -->
+		<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+		<!-- custom styles -->
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<title>To Do List</title>
+	</head>
+	<body>
+
+		<div class="container">
+
+			<div class="row">
+
+				<div class="col-md-6 col-md-offset-3">
+					<h1 class="text-center">My To Do List</h1>
+					<hr><br>
+				</div>
+
+				<div class="col-md-12" id="listCanvas">
+						<script id="template" type="text/x-handlebars-template">
+										/{{#each todo}}
+										<div class="row">
+												<div class="col-md-10"
+															<h3>/{{task}}</h3>
+															<ul><li>/{{description}}</li></ul>
+												</div>
+												<div class="btn-group">
+													<span class="glyphicon glyphicon-pencil btn btn-primary">edit</span>
+													<form class="editDrop" id="form{{_id}}">
+														<div class="form-control">
+															<input type="text" class="form-control" name="task" placeholder="edit task">
+															<input type="text" class="form-control" name="description" placeholder="edit description"
+															<input type="submit" class="btn btn-primary btn-block submitEdit" id="editTodo{{_id}}">
+															</div>
+														</form>
+														<span class="glyphicon glyphicon-remove btn btn-primary" id="deleteBtn" aria-hidden="true"> </span>
+												</div>
+										</div>
+										<br><hr>
+										/{{/each}}
+						</script>
+				</div>
+			</div>
+		</div>
+		<!-- jquery -->
+		<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+		<!-- bootstrap js -->
+		<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+		<!-- handlebars -->
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.min.js"></script>
+		<!-- custom script -->
+		<script type="text/javascript" src="main.js"></script>
+	</body>
+</html>