From 33d8a0865dc0d68d4f23558ceef4c4a9ab047327 Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 11 Nov 2015 22:42:30 -0800 Subject: [PATCH 01/18] set up needed files and directories and do gitignore --- .gitignore | 1 + package.json | 24 ++++++++++++++++++++++++ public/script.js | 0 public/style.css | 0 server.js | 0 views/index.hbs | 0 6 files changed, 25 insertions(+) create mode 100644 .gitignore create mode 100644 package.json create mode 100644 public/script.js create mode 100644 public/style.css create mode 100644 server.js create mode 100644 views/index.hbs diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..567e3cd --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "express-todo-app", + "version": "1.0.0", + "description": "**Objective:** Use Express to make a RESTful API for a to do list. Build a client for your app that uses AJAX and Handlebars templating to `CREATE`, `READ`, `UPDATE`, and `DELETE` todos.", + "main": "server.js", + "scripts": { + "test": "mocha" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/tkhuynh/express-todo-app.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/tkhuynh/express-todo-app/issues" + }, + "homepage": "https://github.com/tkhuynh/express-todo-app#readme", + "dependencies": { + "body-parser": "^1.14.1", + "express": "^4.13.3", + "hbs": "^4.0.0" + } +} diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..e69de29 diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..e69de29 diff --git a/server.js b/server.js new file mode 100644 index 0000000..e69de29 diff --git a/views/index.hbs b/views/index.hbs new file mode 100644 index 0000000..e69de29 From 132f5afbe4f0b10bd343c7c706071c8ffc0f0ef5 Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 11 Nov 2015 22:44:55 -0800 Subject: [PATCH 02/18] setup dependencies need, view engine, static files and port listener --- server.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/server.js b/server.js index e69de29..de35170 100644 --- a/server.js +++ b/server.js @@ -0,0 +1,21 @@ +var express = require("express"); +var bodyParser = require("body-parser"); +var hbs = require("hbs"); + +var app = express(); + +app.set("view engine", "hbs"); + +app.use(express.static("public")); + +//set up body-parser +app.use(bodyParser.urlencoded({extended: true})); + + + + + +//listen to port 3000 +var server = app.listen(process.env.PORT || 3000, function () { + console.log("I'm listening"); +}); \ No newline at end of file From 372f48e0ddd0eee5df219ad04c623d17387c788a Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 11 Nov 2015 22:46:44 -0800 Subject: [PATCH 03/18] made seed data, set up api --- server.js | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/server.js b/server.js index de35170..1b75024 100644 --- a/server.js +++ b/server.js @@ -11,7 +11,35 @@ app.use(express.static("public")); //set up body-parser app.use(bodyParser.urlencoded({extended: true})); - +//seed data + +var todos = [ + { + _id: 1, + task: "Go to the bank", + description: "Withdraw some cash for personal use" + }, + { + _id: 2, + task: "Go the supermarket", + description: "Buy some fish and milk" + }, + { + _id: 3, + task: "Lunch at noon", + description: "See Jane at Totomi's restaurant" + } +]; + +//setup routes + +app.get("/", function (req, res) { + res.render("index"); +}); +//set up todos api +app.get("/api/todos", function (req, res) { + res.json(todos); +}); From ddc03dc28faa834e1b5e17d0981cf67c98baab6c Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 11 Nov 2015 22:48:00 -0800 Subject: [PATCH 04/18] setup route to get todo by id --- server.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/server.js b/server.js index 1b75024..9af2fe8 100644 --- a/server.js +++ b/server.js @@ -41,6 +41,16 @@ app.get("/api/todos", function (req, res) { res.json(todos); }); +//get a todo by its Id +app.get("/api/todos/:id", function (req, res) { + var todoId = parseInt(req.params.id); + var foundTodo = todos.filter(function (todo) { + return todo._id === todoId; + }); + res.json(foundTodo); +}); + + //listen to port 3000 From 9c916df4e376d6ec225a2ac16eb9e08e11b80778 Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 11 Nov 2015 22:48:24 -0800 Subject: [PATCH 05/18] setup route to create new todo --- server.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/server.js b/server.js index 9af2fe8..ae74485 100644 --- a/server.js +++ b/server.js @@ -50,6 +50,17 @@ app.get("/api/todos/:id", function (req, res) { res.json(foundTodo); }); +//create new one +app.post("/api/todos", function (req, res) { + var newTodo = req.body; + if (todos.length > 0) { + newTodo._id = todos[todos.length - 1]._id + 1; + } else { + newTodo._id = 1; + } + todos.push(newTodo); + res.json(newTodo); +}); From e01199f3902108384034651bdca803d66e382cd1 Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 11 Nov 2015 22:48:56 -0800 Subject: [PATCH 06/18] setup route to edit todo --- server.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/server.js b/server.js index ae74485..0aba404 100644 --- a/server.js +++ b/server.js @@ -62,6 +62,20 @@ app.post("/api/todos", function (req, res) { res.json(newTodo); }); +//edit todo +app.put("/api/todos/:id", function (req, res) { + var todoId = parseInt(req.params.id); + + var todoToUpdate = todos.filter(function (todo) { + return todo._id == todoId; + })[0]; + + todoToUpdate.task = req.body.task; + todoToUpdate.description = req.body.description; + + res.json(todoToUpdate); +}); + //listen to port 3000 From b9e712ef082d69ff7f30680278736162c78ba618 Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 11 Nov 2015 22:49:43 -0800 Subject: [PATCH 07/18] setup route to delete todo --- server.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/server.js b/server.js index 0aba404..a8efc9e 100644 --- a/server.js +++ b/server.js @@ -76,7 +76,18 @@ app.put("/api/todos/:id", function (req, res) { res.json(todoToUpdate); }); + //delete todo +app.delete('/api/todos/:id', function (req, res) { + var todoId = parseInt(req.params.id); + + var todoToDelete = todos.filter(function (todo) { + return todo._id == todoId; + })[0]; + + todos.splice(todos.indexOf(todoToDelete), 1); + res.json(todoToDelete); +}); //listen to port 3000 var server = app.listen(process.env.PORT || 3000, function () { From 879cb7bf408b83d74715d5c65b29b854ff6775aa Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 11 Nov 2015 22:53:04 -0800 Subject: [PATCH 08/18] client side, get all todos, made new todo form to create new one add to the list --- public/script.js | 32 ++++++++++++++++++ views/index.hbs | 88 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 120 insertions(+) diff --git a/public/script.js b/public/script.js index e69de29..5e42d94 100644 --- a/public/script.js +++ b/public/script.js @@ -0,0 +1,32 @@ +$(function() { + var baseUrl = "/api/todos"; + var allTodos = []; + var $toDoList = $("#todos-list"); + + var source = $("#todos-template").html(); + var template = Handlebars.compile(source); + + var render = function () { + $toDoList.empty(); + var todosHtml = template({todos: allTodos}); + $toDoList.append(todosHtml); + }; + + $.get(baseUrl, function (data) { + allTodos = data; + render(); + }); + $("#create-todos").on("submit", function(event) { + event.preventDefault(); + var newTodo = $(this).serialize(); + console.log(newTodo); + if(allTodos.length > 0) { + newTodo._id = allTodos[allTodos.length - 1]._id + 1; + } + document.getElementById("create-todos").reset(); + $.post(baseUrl, newTodo, function(data) { + allTodos.push(data); + render(); + }); + }); +}); \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index e69de29..a1970e7 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -0,0 +1,88 @@ + + + + + + + Document + + +
+
+
+

To Do List

+
+
+
+
+ +
+
+ +
+ +
+
+
+
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + \ No newline at end of file From 902b23a6e772d590cad10fc49fce14322b1cbfe1 Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 11 Nov 2015 23:16:35 -0800 Subject: [PATCH 09/18] add some css style, make the page prettier --- public/script.js | 1 - public/style.css | 16 ++++++++++++++++ views/index.hbs | 18 +++++++++++++----- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/public/script.js b/public/script.js index 5e42d94..ae750ed 100644 --- a/public/script.js +++ b/public/script.js @@ -19,7 +19,6 @@ $(function() { $("#create-todos").on("submit", function(event) { event.preventDefault(); var newTodo = $(this).serialize(); - console.log(newTodo); if(allTodos.length > 0) { newTodo._id = allTodos[allTodos.length - 1]._id + 1; } diff --git a/public/style.css b/public/style.css index e69de29..3847ade 100644 --- a/public/style.css +++ b/public/style.css @@ -0,0 +1,16 @@ +body { + background-color: #F7DCB4; +} +h1 { + color: #663333; + font-size: 60px; + font-family: 'Noto Serif', serif; + margin-bottom: 15px; +} +img { + width: 130px; +} +h4 { + font-size: 25px; + font-family: 'Indie Flower', cursive; +} diff --git a/views/index.hbs b/views/index.hbs index a1970e7..9075573 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -3,6 +3,11 @@ + + + + + Document @@ -10,7 +15,9 @@
-

To Do List

+
+

To Do List

+
@@ -24,6 +31,7 @@
+

@@ -47,21 +55,21 @@
-
+ From 40f05a058491152de5f4c07374b9fc8111ee6b1f Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 11 Nov 2015 23:32:20 -0800 Subject: [PATCH 10/18] being able to get the id of each todo, toggle edit form --- public/script.js | 5 +++++ views/index.hbs | 9 ++++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/public/script.js b/public/script.js index ae750ed..65bc2df 100644 --- a/public/script.js +++ b/public/script.js @@ -28,4 +28,9 @@ $(function() { render(); }); }); + + $("#todos-list").on("click", $(".edit"), function(event) { + var id = $(".edit").attr("id"); + $("#row" + id).toggle(); + }); }); \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index 9075573..3e93746 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -46,7 +46,7 @@

\{{description}}

-
-