Simple singe page application using HTML, CSS and pure JavaScript. 100% finished and performed fully from scratch. No jQuery, no external, no frameworks. Jus plain Vanilla JS. Was complited as a test task in candidates selection for international IT company in 2020 July.
- HTML
- CSS/SCSS
- JavaScript
Create a single page contact management application using HTML, JavaScript and CSS. Do not use any third-party libraries.
User should be able to perform these tasks:
- View all contacts
- Add new contacts
- Edit existing contact
- Delete existing contact
Contact should have the following fields:
- First name (required, only letters allowed)
- Last name (required, only letters allowed)
- Date of birth (required, only date is allowed)
- Phone number (required, only numbers allowed)
- E-mail (required, format check)
- Address (optional)
The Phone number and E-mail address should be unique and can not be used for multiple contacts.
Tips:
- Use localStorage and JSON to store the data
- Use appropriate HTML input types to help with validation
- Do not spend too much time on styling - make it look clean and focus on good coding practices
- Check validations and corner cases with data (very long text in the input field, a large number of contacts)
-
Initial code idea from Youtube Channel: https://www.youtube.com/watch?v=D2RzLH5F_aM
-
Background picture used Photo (by Jonas Ferlin) from Pexels: https://www.pexels.com/photo/mirror-facade-of-tall-building-1963557/
-
Icons used from Font awesome: https://fontawesome.com
-
Fonts used Google Fonts: https://fonts.google.com