A little web app for storing contacts.
Website
This is the repository for the contact list app assignment, made during the Full Stack Developer course at Medieinstitutet.
Friends 4 Ever is a simple web app developed using HTML, SCSS and JavaScript. Is is the first individual assignment of the FSU23D course. The website showcases skills in front-end web development, such as HTML, CSS and JavaScript.
- No external libraries used.
- Custom CSS framework built using SCSS.
- Data persist across sessions by using local storage.
The components that create new contacts should consist of:
✅ A text field where the user can enter a name
✅ A text field where the user can enter a phone number
✅ A button to create a new contact The contact list should consist of
✅ Multiple contacts (if the user has added contacts, otherwise empty)
✅ Filled text fields for both name and phone number. Both fields should be disabled by default.
In addition to the contact information, there should also be buttons associated with the contact to:
✅ Edit contact information
✅ Delete contact
Implement appropriate functionality in the application using JavaScript. Based on the following scenarios:
✅ The user enters a name and phone number in their respective fields.
✅ The user clicks on the create button.
✅ The contact is added to the contact list.
✅ Both text fields for the contact are locked by default, i.e., the information cannot be edited (disabled).
✅ The user clicks the 'Edit' button to edit an added contact.
✅ Contact details can now be edited.
✅ The user edits the contact information.
✅ The user clicks the same button again to save the information.
✅ The contact's text fields become locked and cannot be edited.
✅ This process can be repeated multiple times.
✅ The user clicks the 'delete' button, which removes the contact from the list.
✅ Apply a suitable framework and/or custom CSS to achieve an attractive design for your application. You might consider using a framework like Bootstrap.
✅ The user should not be able to create a contact without filling in both text fields.
✅ An existing contact should not be changed to an empty contact without information. A contact that has had information should not become a contact without information.
✅ Display appropriate error messages if someone tries to save empty contacts. The message should be displayed via HTML. Alert messages are not allowed.
✅ Refactor the code into functions. The code that deletes a contact, changes a contact, and validates a contact should be rewritten into functions. This means at least three functions for these purposes.
✅ Create a new button "Delete List" that deletes all contacts in the list. It can be placed next to the "Create" button.