Lab 5: Contacts List

Posted on | by nayeon

Overview

For this lab you will practice creating JavaScript objects by implementing a Contact List application. Users will be able to add new contacts, display all contacts, display first three contacts, and clear the list.

Sample

Requirements

  1. Download the starter file from this Dropbox link.
  2. Do not change the HTML or CSS code. You only need to write JavaScript.
  3. Do not use inline JavaScript. This is bad practice. Write event handler like we did in class.
  4. Open up console and console.log() things out as you work on this lab.
  5. A contacts array is created for you. You will be storing any newly created contacts as an object and storing it in this array.
  6. Create an event handler for form submission. When the form is submitted:
    1. Check that all input fields are filled out.
    2. If all inputs are filled out, save the information into an object. The object must have these properties:
      1. firstName: property that stores user input for First Name.
      2. lastName: property that stores user input for Last Name.
      3. email: property that stores user input for Email.
    3. Add this object to the contacts array .
    4. If any of the inputs are not filled out, do nothing. Do not add create an object or add it to the array. For this lab you do not need to display any error messages.
  7. Create an event handler for Show All Contacts
    1. Run through the contacts array and show all contacts.
    2. To display contacts, create <li> elements and append them to <ul class="list-group" id="contact-list"> on line 52. See line 53 to see a sample of what the <li> element should look like.
    3. Each contact must be styled to look like the sample. Not working? See line 53 to see a sample of what the <li> element should look like.
  8. Create an event handler for Show First Three Contacts
    1. Run through the contacts array and show only the first three contacts.
    2. Display contacts by creating <li> elements like in step #7.
  9. Create an event handler for Delete All.
    1. Remove all objects from the contacts array.
    2. Clear everything from <ul class="list-group" id="contact-list"> so that no contacts are displayed.
  10. Not required but helpful: create functions for anything that is repetitive. For example, you will find yourself needing to clear all contacts multiple times.
  11. When completed, upload to the server and add a link to this lab in your student_page.html.