diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..40b878d --- /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..1070c96 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "todo-api", + "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": "echo \"Error: no test specified\" && exit 1", + "start": "node server.js" + }, + "author": "", + "license": "ISC", + "dependencies": { + "body-parser": "^1.14.1", + "express": "^4.13.3", + "hbs": "^4.0.0" + }, + "devDependencies": {}, + "repository": { + "type": "git", + "url": "git+https://github.com/stevennoble78/express-todo-app.git" + }, + "bugs": { + "url": "https://github.com/stevennoble78/express-todo-app/issues" + }, + "homepage": "https://github.com/stevennoble78/express-todo-app#readme" +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..e8c5a13 --- /dev/null +++ b/public/index.html @@ -0,0 +1,73 @@ + + + + + + + + + + + To Do List + + +
+
+
+

To Do List

+
+
+
+ + + +
+
+
+
+
+

Task

+
+
+

Description

+
+
+ +
+
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/public/main.css b/public/main.css new file mode 100644 index 0000000..9863a7f --- /dev/null +++ b/public/main.css @@ -0,0 +1,3 @@ +.editTodo { + display: none; +} \ No newline at end of file diff --git a/public/main.js b/public/main.js new file mode 100644 index 0000000..7c8913e --- /dev/null +++ b/public/main.js @@ -0,0 +1,118 @@ +// wait for DOM to load before running JS +$(document).ready (function () { + + // check to make sure JS is loaded + console.log('JS is loaded!'); + + // Compile the template + var source = $('#template').html(); + var template = Handlebars.compile(source); + var todoResults = []; + var baseUrl = '/'; + var apiUrl = baseUrl + 'api/todos/'; + var $todolist = $('#todo-list'); + var $newTodo = $('#newTodo'); + + // Handlebars list helper + Handlebars.registerHelper('list', function(context, options) { + var ret = ""; + }); + + // Use AJAX to get data and append it to the page + $.get(apiUrl, function(data) { + console.log(data); + todoResults = data; + + // Render the data + var todoHTML = template({todos: todoResults}); + $todolist.append(todoHTML); + }); + + // Refresh function + function refresh (data) { + console.log('refreshing'); + $todolist.empty(); + $('input').val(''); + // Rerender the data + var todoHTML = template({todos: todoResults}); + $todolist.append(todoHTML); + } + + // Add todo function called by submit button handler + function addTodo(data) { + todoResults.push(data); + refresh(); + } + + // Put todo function called by glyphicon pencil handler + function putTodo() { + event.preventDefault(); + var id = $(this).attr('id'); + $('#form' + id).toggle(); + $('#form' + id).on('submit', function(event) { + event.preventDefault(); + var updatedTodo = $(this).serialize(); + $.ajax({ + type: 'PUT', + url: apiUrl + id, + data: updatedTodo, + success: function (data) { + // Get the object to update + var todoToUpdate = todos.filter(function(todo) { + return (todo._id === id); + })[0]; + // Remove the object and replace it with the updated object + todoResults.splice(todoResults.indexOf(todoToUpdate), 1, data); + // var index; + // for (var i=0; i 0) { + newTodo._id = todos[todos.length - 1]._id + 1; + } else { + newTodo._id = 1; + } + // Add new todo to the todos array + todos.push(newTodo); + // Send new todo as JSON resonse + res.json(newTodo); +}); + +// Set up route for updates +app.put('/api/todos/:id', function(req, res) { + // Get todo id from url params + var todoId = parseInt(req.params.id); + // Find todo to update by its id + var todoToUpdate = todos.filter(function(todo) { + return (todo._id === todoId); + })[0]; + // Update the todo's task + req.body._id = todoId; + todos.splice(todos.indexOf(todoToUpdate), 1, req.body); + // We could update the task and the description as well + // Send back JSON data + res.json(req.body); +}); + +// Set up route for deletes +app.delete('/api/todos/:id', function(req, res) { + // Get todo id from url params + var todoId = parseInt(req.params.id); + // Find todo to update by its id + var todoToDelete = todos.filter(function(todo) { + return (todo._id === todoId); + })[0]; + // Delete the todo's task + todos.splice(todos.indexOf(todoToDelete), 1); + // Send back JSON data + res.json(todoToDelete); +}); + +var server = app.listen(process.env.PORT || 5000, function() { + console.log('listening...'); +}); \ No newline at end of file