MVC JavaScript Tutorial using ES6 Class – Part 03
Tags: javascript, programming, tutorial
Published: 2022-02-21 14:29:29

---
canonical_url: https://softauthor.com/mvc-javascript-tutorial-using-es6-class-part-3/
---

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](https://softauthor.com/javascript-es6-mvc-crud-app/): I will show you how to create MVC architecture and get the contact list for the address book app.

**and**

[Part 02](https://softauthor.com/learn-to-build-object-oriented-javascript-app-using-es6-classes-address-book-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:**

![alt text](https://softauthor.com/wp-content/uploads/2017/12/MVC-JavaScript-Tutorial-using-ES6-Class-%E2%80%93-Part-03.gif)

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.

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

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

Add (+) **button** element.

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

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

```HTML
<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.

```CSS
#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.

```JavaScript
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.

```JavaScript
 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.*

```JavaScript
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.

```JavaScript
 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…