amorriesette/InteractiveTable

★ 0Forks 0HTMLGitHub ↗Compare

README

AUTHOR: Angelica Morriesette

*INSTALLATION

  1. Unzip the files in the INMAR directory.
  2. There are no extra plugins that need to be installed. The app is ready to run.

*FILES

-index.html -css/styles.css -js/controller.js

*PROJECT SUMMARY

Create a web application using HTML, CSS, LESS|SASS, Bootstrap (optional), and your favorite open-source, client-side, JavaScript framework or libraries. This is an opportunity to demonstrate your skills. Please use best practices and apply appropriate patterns and principles. Manage your time so that you produce the best product that you can in 4 to 6 hours or less. -Recreate the Contacts section from the file that was provided. It should be pixel perfect. -Use your chosen JS framework to populate the table with the data represented in the image. -Extend the application further by providing a way to add new contacts to, and remove existing contacts from, the table. -Use your discretion to make it look nice. -Create a readme file with instructions for installing, running, and testing the app. -Bonus points for: ·Tasteful CSS animations ·At least three unit tests ·Using excellent iconography and UX paradigms given the existing design direction ·Using localstorage to persist the data across closing and reopening the browser ·Well organized project structure

*IMPLEMENTATION

  • When the page is loaded there are 5 preset contacts loaded.
  • To the right is a mechanism (red remove icon)to delete each contact.
  • To add contacts click the Add button and an overlay will appear for users to add content.
    • When the overlay opens there are 3 required fields: type, name and phone number.
    • There is an unlimited amount of data that can be added/removed at this time.

This is version 1 of this project. There are some improvements I would make if I had more time. Below is a list of those modifications:

  1. Implement unit testing and .
  2. Extend the delete functionality to handle batch deletion of the contacts.
  3. Incorporate the ability to edit the contacts inline.
  4. Fix any additional bugs that the app has.

Contributors

amorriesette

Issues