Build a single page address book application using JavaScript, HTML and CSS.
- You should be able to add, delete and edit contacts.
- The data shall be stored in local storage, and loaded again when the application starts.
- Add fitting validation to the different input fields.
- First name (required)
- Last name (required)
- Email (required, valid email)
- Address (optional)
- City (optional)
- Zip-code (optional, but if entered it should match
/^\d{5}$/
) - Country (optional)
- The application must be build with Angular 1 or Angular 2
- You must not use jQuery
- The application must be hand-coded and must not use any seed or scaffolding tool like Yeoman
- Other libraries and tools like Lodash and Gulp may be used
- Even though this is a small project, structure and architecture should mimic a bigger project
- The application should work in latest Chrome, Firefox, Safari and IE
- Application should be written in ES5 or ES2015 (ES6)
- CSS preprocessors are okay to use โ we like Stylus
To get you started you can simply clone the address-book-angular repo and install the dependencies:
You will need node.js installed to run this sample app, I recommend Node Version Manager. Check out the repo for installation directions: nvm github
- Install the server side node libraries we depend upon via
npm
, the node package manager.
I have preconfigured the app using npm
to automatically run bower
so you can simply do:
npm install
This creates a node_modules
folder which contains the npm packages installed in the previous step
I have preconfigured the project with a simple development web server. The simplest way to start this server is:
npm start
Now pull up your application at http://localhost:8000/
.
I used Bootstrap Tweeter as a design framework. You should see something like this:
Index page
Edit contact page (with error validation)
About page
I used the following regular expression for e-mail validation.
/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i
This is not perfect but I don't want to make this example too complicated.
List of addresses on index page is sorted alphabetically by First Name then by Last Name.
Please note that top-right menu stays highlighted accordingly.
I don't use jQuery. It is here because Bootstrap needs it.
All external stuff is stored in vendor folder. All application components are locally available.
Mobile first so because of Boostrap capabitlity it is responsive design.