taleymirza/js-todo-list

A repo for student of tech karo to implement JavaScript in a practical way

js-todo-list

A repo for student of tech karo to implement JavaScript in a practical way

Reference

This is an exercise from Recurship Training Material for frontend

Objective

This exercise is designed to test out your application architecture skills. Now that you have some command over JS, you will use the knowledge to create a simple frontend application. You will learn to create and manage objects, refactor and play with local storage. This is also where you should extensively use the Chrome Dev tools to help you move through the exercise.

Requirements:

Setup

• Setup the codebase.
• Scafold the code usign Yeoman [skip]
• Initialize the git repo
• Create a new git repo on GitHub
• Invite your mentor to this new repo

Day 1

Create a new branch named as step-1-interface from master and do the following

Create the interface

An example interface is already given in the image linked above, you DO NOT need to make it look exactly the same, something similar will work fine. Use any framework and keep the styling to a minimal.

Create a new branch named as step-2-implementation from step-1-interface and do the following

Implement the basic implementation that covers point 1 and 2

No need to think about persistance for now, that will be done in the end. However you should structure the code likewise. Once completed please inform the mentor for getting the code checked. You will be using core JavaScript for all DOM manipulation (Reference: plainjs.com)

Day 2

Implement features relating to point 3, 4, 5

Day 3

Implement features relating to point 6, 7

Day 4

Implement feature relating to point 8, 9

Day 5

Implement feature relating to point 10

Day 6

Extend the webpack file to create a build process (update the prepare task)

• Create a new process for deploying the app
• It should concat all JS / CSS files
• It should minify all the JS / CSS files
• It should run JS Hint on all JS files
• It should remove the dev code

Day 8, 9

Implement Functional testing

• Use webpack to configure protractorjs + grunt https://hackpad.com/Setup-Protractor-on-your-first-project-HPv3BbbvbY8
• Write test to check application loaded
• Write tests for adding new tasks
• Write tests for editing new tasks
• Write tests for deleting tasks
• Write tests for checking filters

Day 10

Using the documentation at protractor (https://angular.github.io/protractor/#/page-objects) convert your test to Page Object pattern