Install Node.js and Git. When installing Git for Windows, it'll ask you lots of questions. Don't worry, the defaults are fine.

Once you have Node.js, you'll want to install the grunt command line interface globally. Grunt is a task runner. Read their getting started guide for more details. To install, run

$ npm install -g grunt-cli

in a terminal window.

You'll also need to install the project's dependencies. Run

$ npm install

from the project's root folder.

To run the tests, you'll need Chrome and the latest version of the Selenium Chromedriver. Put the Chromedriver somewhere on your PATH (I put it in C:\Windows\System32).

For development, you'll want to run a local version of the server so that you can test your changes immediately. To do this, run

$ node server

in a terminal window.

Note, however, that if you make a change to the server's code, you'll need to restart the server. You can stop the server by pressing Ctrl-C.

Remember to read the Rules before starting.

1. Play with the REST API.
2. Add a TODO item via the API. * Install the Postman app * RESTful tutorial
3. Get the list of TODOs via the API.
4. Delete your TODO item via the API.
5. Get the list again to check the item was deleted.
6. Change the colour of header.

• Install Chrome. (Just kidding, you've done this already, right?)
• Use the Chrome developer tools (F12) and inspect the header.
  • Chrome developer tools guide
• Change the colour directly in the tools and see the page update.
  • CSS tutorial
• Once you're happy, copy the colour into the CSS file in a text editor.
• Commit your change and make sure it's deployed to Heroku.
  • Interactive git tutorial
  • Learn git branching
  • Git book
  • Don't forget to check the build's progress on CircleCI. You'll get an email notification if the build fails.

1. Replace filter with _.find in the getTodo function in server.js.

• Add Underscore.js as a dependency
  • NPM tutorial
• Import _ into server.js
  • How to use require
• _.find documentation
• Run grunt to check that the tests still pass.
  • You'll want to run grunt often to make sure you're not breaking the build.

1. Add the ability for users to delete TODO items.

• Give each TODO item in the UI a delete button. Use JavaScript to add a button element and attach it to the li element.
• Make the delete button calls the server API.
  • onclick event handler
• Add some style for the delete button.
• Refresh the list of TODO items when the response comes back.
• Handle the case that the request fails.
• To keep the build passing, you'll need to add some end to end tests.
  • The tests can be found in tests/e2e.js.
  • Selenium introduction
  • Selenium JavaScript API

1. Add update functionality to the API. You don't need to change the UI to support updating.

• Updates in REST
• It should return 200 if successful.
  • HTTP Status codes
• You should decide what to do if the resource didn't previously exist. Should it create the resource (201) or tell the caller that the resource doesn't exist (404)?

1. Add the ability for users to mark TODO items as complete.

• Add an isComplete field to new TODO items that is set to false.
• Add a complete button next to each TODO item.
• Make the complete button call the update API setting the isComplete field to true.
• Update the code that displays TODO items to check the isComplete field and change the style of the TODO item.

1. Add a label telling the user how many items there are left to complete.

• Add a <div> between the header and first section in the HTML.
• Give the <div> the id of count-label.
• Store the DOM element for the <div> at the top of main.js using document.getElementById.
• Update the textContent of the DOM element whenever we refresh the TODO list.
• Remember, you should only count items that aren't complete.

1. Add a button, "Delete completed", to delete all complete TODO items.

• Only show the button if there are complete items.

1. Make the buttons in the app follow a consistent style.

• Add a button class to the CSS file.
  • Classes and IDs in CSS
• Apply the button class to the various buttons in the HTML file.
• Make buttons have rounded corners.
  • border-radius guide
• Give buttons a drop-shadow.
  • drop-shadow guide

1. Add buttons to filter TODOs on their status (all, active, completed).
2. Replace XmlHttpRequest with the newer Fetch API.

• Install and include the fetch polyfill in index.html.
  • What is a polyfill?
• Introduction to fetch

1. Poll the server for updates.

• How timers work

1. Add a grunt task, serve, to run the server.

• Grunt getting started guide

1. Add a grunt task, watch, to watch for any file changes in server/ and restart the server.
2. Make the UI pretty. Impress us 😃