We have created this short spec to help you create an awesome and consistent todo app. Make sure to not only read it but to understand it as well.

Recommended file structure:

.gitignore
index.html
package.json
node_modules/
src/
  - components/
  - containers/
  - styles/
    └──base.scss
    └──app.scss
  - utils/
  app.js  
readme.md

Try to follow this structure as close as possible while still keeping React best practices.

Components should be split up into separate files and placed into folders where it makes the most sense.

A Container does data fetching and then renders its corresponding components.

Example:

src/
  - components/
  - containers/
  - styles/
    └──base.scss
    └──app.scss
  - utils/
  app.js  

Your code must include a README describing the general implementation, and the build process if required. There is an example readme in this project.

Unless it conflicts with the project's best practices, your example should use npm or yarn for package management. Specify your dependencies in a package.json file in the root directory of your app. An example package.json could look like this:

{
  "private": true,
  "dependencies": {
    "backbone": "^1.1.2",
  }
}

You should .gitignore everything in node_modules except the files actually used by your example. That means that documentation, READMEs and tests should not be included in the pull request.

It is a recommended practice to have a rough visual representation of what you are about to build.

From the above diagram, try to create your own presentation components, there's no wrong answers, be creative.

Please try to keep the HTML as close to the template as possible. The base.css file should be referenced from the assets folder and should not be touched. If you need to change some styles, use the app.css file, but try to keep changes to a minimum. Remember to update the relative paths when using the template.

Make sure to follow these:

• Use double-quotes in HTML and single-quotes in JS and CSS.
• Use npm packages for your third-party dependencies and manually remove files that aren't required for your app to run.
• Use a constant instead of the keyCode directly: var ENTER_KEY = 13;

When there are no todos, the todos list section should be hidden.

New todos are entered in the input at the top of the app. The input element should be focused when the page is loaded, preferably by using the autofocus input attribute. Pressing Enter creates the todo, appends it to the todo list, and clears the input. Make sure to .trim() the input and then check that it's not empty before creating a new todo.

A todo item has these possible interactions:

• Clicking the checkbox marks the todo as complete by updating its completed value and toggling the class completed on its parent <li>

• Hovering over the todo shows the remove button (.destroy)

Displays the number of active todos in a pluralized form. Make sure the number is wrapped by a <strong> tag. Also make sure to pluralize the item word correctly: 0 items, 1 item, 2 items. Example: 2 items left

Create a fork of this branch, or create a new repo called test-react-todomvc, please feel free to follow a good git-flow and when you think you are ready to submit it please send an email to [email protected] with the url of your repository.