Code Monkey home page Code Monkey logo

todo_challenge's Introduction

Todo Challenge

Approach

  1. Use BDD with Protractor for e2e tests and Karma for unit tests.
  2. Use Angular to build client code.
  3. Build incrementally using SOLID principles

Initial Requirement

Front-end features:

  • Task (text) input form
  • Display list of tasks
  • Need additional actions
    • to update, click on task and over-write,
    • delete tasks, click on 'x' and remove task from list and
    • click on select box to mark task as complete

Steps

  1. Set up Karma and Protractor
  2. Sketch out html
  3. Write e2e and unit tests for first two features
  4. Set-up Angular
  5. Write code to make tests past and then refactor
  • Deadline: submit completed pull request by 9am on Monday
  • You may use whatever level of JavaScript you feel comfortable with - pure JS, jQuery, Angular, or whatever weird and wonderful framework you want to try. Extra points for DogeScript

Steps

  1. Fill out your learning plan self review for the week: https://github.com/makersacademy/learning_plan
  2. Fork this repo, and clone to your local machine
  3. Complete the following challenge:

Challenge

Todo mockup

Build a Todo list as a mini front-end application. You don't have to use a database, the front-end is more important - you can use an appropriate data structure stored somewhere in your JavaScript (this time only!)

Here are the core user stories:

As a forgetful person
I want to store my tasks
So that I don't forget them

As a person with limited time
I want to instantly be able to update my todo list (adding and changing entries)
So that I have more time to think about other things

As a person who actually gets stuff done
I want to mark my tasks as done
So that I don't do them twice

Here are some other user stories you may choose to implement:

As a person with a lot of tasks
I want to be able to filter my tasks by "All", "Active", "Complete"
So that I only see the relevant tasks

As a person who doesn't like counting by hand
I want to see a total number of tasks
So that I don't have to count

As someone who has done lots of stuff
I want to be able to clear my completed tasks
So I never see them again

As you may imagine, implementing a To-do list is very much a solved problem. However, we are mainly interested in seeing how you approach testing and design. We are looking for:

  • well written, well structured acceptance and unit tests
  • clear and expressive JavaScript
  • good HTML5 markup

Don't worry about deployment, and make sure you read the CONTRIBUTING.md when submitting a pull request.

Extensions

  • Deploy the app
  • Create a persistance layer (e.g. MongoDB), or use LocalStorage or the filesystem through Node
  • Make it look purdy (CSS) - try a framework like Bootstrap or Foundation

CI

Read the .travis.yml if any of the steps below don't make sense!

  • Make sure you have set up npm test in your package.json so that it runs your Karma tests
  • Make sure you have your Protractor config file at e2e/conf.js
  • Make sure npm start spins up whatever serves up your app - http-server, Sinatra or Node

Good luck!

todo_challenge's People

Contributors

tansaku avatar spike01 avatar dbugsy avatar ptolemybarnes avatar ezzye avatar silvabox avatar

Watchers

James Cloos avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.