MVC JavaScript Tutorial using ES6 Class – Part 03

In this tutorial, I will be showing you how to implement the Add Contact functionality to our simple Address Book App with Vanilla JavaScript using ES6 Class, OOP (Object-Oriented), and MVC (Model-View-Controller) concepts.

As you can see… this is the THIRD part of the MVC JavaScript Tutorial using ES6 Class series.

So, if you have ALREADY gone through the previous parts of this series, you can JUMP into the next section…

Otherwise…

You will need to READ the previous tutorials first in order to get a better understanding of what’s going on in this lesson.

Part 01: I will show you how to create MVC architecture and get the contact list for the address book app.

and

Part 02: You will learn how to get specific contact information when the contact item is clicked from the contact list.

Before going any further, let’s take a look at the outcome of this lesson:

Now we know what we are going to be building in this lesson.

Let’s dive right in!

Step #1: Let’s add some HTML code for Add Contact Module

Create section element with an id=”add-contact-module“. This element is going to have ALL the HTML code that belongs to Add Contact Module.

<section id="add-contact-module">
</section>

Now… we need to add TWO elements inside section element.

Add (+) button element.

<button id="open-add-contact-form-btn">+</button>

Add Contact form element that contains INPUTS that are for firstname, lastname, phone and email.

<form>
<h2>Add Contact</h2>
first name:<br>
<input type='text' data-key='fname' class='add-contact-input'><br>
last name:<br>
<input type='text' data-key='lname' class='add-contact-input'><br>
phone:<br>
<input type='text' data-key='phone' class='add-contact-input'><br>
email:<br>
<input type='text' data-key='email' class='add-contact-input'><br>
<button type='button' id="add-contact-btn">add</button>
</form>

As you can see… each input element has two attributes that are class and data-key.

I will be able to show you the use of these attributes when we move into the JavaScript part of this lesson later.

Step #2: Let’s add some CSS code for Add Contact Module

The plan is… when a user hovers the Add (+) button, the add contact form SHOULD be visible.

To do that, we need to add some CSS code.

#add-contact-module {
    display: inline-block;
    margin-bottom: 1px;
    margin-left: 8px;
}

#add-contact-module #open-add-contact-form-btn {
    background: #54bb7d;
    font-size: 1.5em;
    color: white;
    padding-bottom: 5px;
}

#add-contact-module form {
    position: absolute;
    padding: 10px;
    width: 150px;
    background-color: #e1e1e1;
    border: 1px solid #999;
    display: none;
}

#add-contact-module form input {
    width: 97%;
    margin: 2px 0;
}

#add-contact-module form button {
    background: #54bb7d;
    font-size: 1em;
    padding: 0px 10px;
    color: white;
    margin-top: 10px;
}

#add-contact-module:hover form {
    display: block;
}

I am NOT going to get into this CSS code in detail as it’s out of the scope of this lesson. If you have any questions, leave a comment and I will be able to help you out. 🙂

Okay… Here is the fun part of JavaScript code.

Step #3: Let’s add a method to our AddressBookAPI Class – Model

At this stage… we need to add an addContact() method to our UI Independent Model — AddressBookAPI class.

addContact(): This method simply takes a new contact OBJECT as a parameter and adds it to the contactData dataset array using JavaScript push method.

addContact(contact) {
  contactsData.push(contact);
}

That’s it for our model code. Pretty straight forward eh!

Step #4: Let’s add a couple of methods to our AddressBookCtrl Class – Controller aka ViewController

addContactModule(): This method does two things,

• Gets the submit button which is inside Add Contact Form using its id=”add-contact-btn”.
• Then, it adds the click event with the call back function addContactBtnClicked() to that submit button.

 addContactModule() {
   const $addContact = document.getElementById('add-contact-btn');
   $addContact.addEventListener("click", this.addContactBtnClicked.bind(this));
 }

We need to invoke addContactModule() inside init() method as it’s a part of the page load method.

Note: init() method which is inside the AddressBookCtrl.

init() {
 this.addContactModule();
}

The SECOND method is addContactBtnClicked() which is invoked when the submit button is clicked.

• First, get all the input elements from the Add Contact Form by using the document.getElementsByClassName method, which will create an array of input DOM elements.

• Then, store them into a constant variable $addContactInputs.

• Next, we need to create an empty object named newContact and then we will be filling data into the empty object in just in a moment.
  

 addContactBtnClicked() {

 // get the add contact form inputs 
 const $addContactInputs = document.getElementsByClassName('add-contact-input');

 // this object will hold the new contact information
 let newContact = {};

 // loop through View to get the data for the model 
 for (let i = 0, len = $addContactInputs.length; i < len; i++) {

  let key = $addContactInputs[i].getAttribute('data-key');
  let value = $addContactInputs[i].value;
  newContact[key] = value;
 }

 // passing new object to the addContact method 
 this.addressBookAPI.addContact(newContact);

 // render the contact list with the new data set
 this.renderContactListModule();
}

• Then, loop through the $addContactInputs array and assign a key and value to newContact object on each iteration. We get the key from the attribute data-key and value from the input’s value property on every iteration.

• Now… we have a newContact object with data in it. Nice!

• All we need to do is to invoke the addContact() method from our MODEL and pass our newly created newContact object as an argument and the rest of them will be taken care of.

• Finally, we have to call renderContactListModule() in order to see the fresh contact list!

That’s it!

At this point… when you hit the submit button, you SHOULD be able to see the added contact item on the list.

Note: Make sure to use this keyword when you invoke addContact() and renderContactListModule() method as they are part of the same class.

If you have any questions or suggestions about this tutorial, feel free to comment.

Thank you for reading…