MVC JavaScript Tutorial using ES6 Class – Part 03

CSS HTML Javascript

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 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:

MVC JavaScript Tutorial using ES6 Class – Part 03

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.

1. Add (+) <button> element.

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

2.  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 it 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 straightforward eh!

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

1. addContactModule(): This method does two things,

  • Gets the submit button which is inside Add Contact Form using it’s id=”add-contact-btn”
  • Then, 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 interation. We get the key from the attribute data-key and value from the input’s value property on every interation.

• Now… we have a newContact object with data init. 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.

NEXT

Part 04: You will learn how to remove a contact information from the Address Book

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

Thank you for reading…

Take a look at some of my other articles about JavaScript.

Functional Programming with JavaScript

• JavaScript Design Pattern: Object Literal

• Getting Started with Firebase

• Working with Fitbit API and JavaScript

 

Comments Count: 0 0