Club Roster Application With Vanilla Javascript
Tags: javascript, beginners, tutorial, html
Published: 2019-04-10 23:49:27

---
title: Club Roster Application With Vanilla Javascript
published: true
description: 
tags: javascript,beginners,tutorial,html
cover_image: https://res.cloudinary.com/dz4tt9omp/image/upload/v1554940367/the_team.jpg
---

So after much consideration. I have decided to make my first technical post on [here](https://dev.to/). This post focuses on building a basic application that any beginner in javascript would find interesting and helpful. In this application we will be making use of Bootstrap 4, Local storage and of course vanilla javascript. Bootstrap 4 and Local Storage take the place of CSS and a backend language respectively. Without further ado, let me give a brief explanation on what we are about to build.

## About The Application
                           
What we are building involves using a form to register a list of players from a particular sports club called **The Titans**. Once the data of the players have been entered into the form, it gets displayed into a bootstrap 4 table. The data in this table is then persisted to the browser's local storage. This ensures that anytime we reload the page, our data doesn't get to disappear or vanish. Does this sound fun and easy? Well, let's get started.

## Creating The User Interface With Bootstrap 4 

Firstly, we are going to create the **Navbar**. Remember, we are using Bootstrap 4 and to do this, we don't need to use any CSS. The **Navbar** is going to contain a logo of the club.

{% gist https://gist.github.com/desoga10/20f7ecd509a110c0da9101e9cd9f0777 %}


From the code we have above, we were able to display the **Navbar** by importing the bootstrap 4 CDN from their [website](https://getbootstrap.com/docs/4.0/getting-started/introduction/).

 Also the logo we used was imported from the Font-Awesome [website](https://fontawesome.com/icons?d=gallery).



Now that the Navbar has been completed, we need to create the Form.The Form is where we will input each Player's data. To do this, we make use of the bootstrap 4 form group.This form group takes the shape of a grid system.

The code below does not need much explanation, all we did was to use bootstrap 4 class to specify the position we want each field to take. No CSS was used.

{% gist https://gist.github.com/desoga10/31b66d4dfca01ff99cd3769b781480b1 %}


The last thing we are going to add to our User Interface is the data table. The data table is where the information entered in the form for each player is going to be stored, once the register button gets clicked.  


{% gist https://gist.github.com/desoga10/3f78361071d19ae34f2be1539abb28aa %}

Take note that the link to our javascript file is just above the closing body tag.

The full code for our **Html** is down below:

{% gist https://gist.github.com/desoga10/b76796afb76c53a9f077587e7aff060f %}


After all this is done, our User Interface should have the following shape.

![Alt text of image](https://res.cloudinary.com/dz4tt9omp/image/upload/v1554890416/titans.png)






Now that our UI is complete, I would like us to take note of how we intend to make our web page interactive by using javascript:

*    Our javascript code is going to be Object-Oriented.

*    We are going to use local storage to hold our data.




## Interacting With Our Form


The first thing we intend doing is to display the data entered in our form into our data table. To do that, we will first display our data into the console.


{% gist https://gist.github.com/desoga10/94dc80321bf94c971a9697709075f81c %}



From the code above, the first thing we did was to create a class called **Player**. The **Player** class has a constructor which took in arguments which represent the data in our form. 


The next thing we did was to interact with the form by adding **event listeners**. What this does is to enable us to get the values in our forms and then display them either in the console or in the web page.

The final thing we did was to instantiate the **Player class** and then display the values in the console once the register button is clicked. Notice that in the console, the data we got came in form of an Object.


## Display content On Data Table

The next thing we need to do is to add the data in our form to our User Interface.
To do this, we will need to create another class in our code editor.

{% gist https://gist.github.com/desoga10/cee0da102359782326c9742a765315b0 %}



So, in the app.js we created the **interface** class. Inside this class every method we declared is static. This is done so that we don't need to instantiate them anywhere else in our code.

The **display Players** method helps us to loop through the list of players registered in our form.

The **add players** method helps us to create a row to insert our table row element. This is done by calling the **playerlist** ID in the HTML and then using the javascript **createElement** method to create the table row tag. 


Now that the function to add players has been declared, all we have to do is to call the **addPlayers** function inside the **Event-Listener**. 


{% gist https://gist.github.com/desoga10/b306e23cf4daf51880fee561ab309b41 %}


Now that we can add data from our form into the table, the next thing is to be able to delete data from our table. To do that, we need to create a delete function.

This function will be inside the interface class, and it is also going to be static, which means we do not need to instantiate it. So let's add the code for that:


{% gist https://gist.github.com/desoga10/1fa5246b4b79a133fb1f6134517ee43d %}

What that function does is that, If an element contains a **CSS** class called "delete", then we want to remove the entire parent element on that row once the delete button is clicked. 

The last think we want to do to make our delete function work is to add an Event Listener and then call the **interface class**, just like we did to the **addPlayers** function. Here is the code below:


{% gist https://gist.github.com/desoga10/09165d366aab862eac7a281728dbdc7e %}


With this, we can remove and add a new player data anytime we want. 


There are two more things we need to do to wrap up this tutorial. The first is to clear the form once the data has been entered. 

The second is to persist our data on the table once the browser gets re-loaded.


## Clear Form After Submission

To clear the form field after submission is also easy. All we need to do is to declare another static function inside the **Interface Class**. This function gets the ID's of the values of each elements in the DOM and the sets those values to null.


{% gist https://gist.github.com/desoga10/f3d40931138e7db618668ea6613ebfa0 %}


To make this function work, all we need to do is to call it below the **Interface Class** just like we did earlier with the **addPlayers** and **deletePlayer** function.


{% gist https://gist.github.com/desoga10/860b08fa566b408308153071d8fd5d24 %}


## Persist Data To Local Storage

Before we persist our data to local storage, here are some basic fact to know about it :

*    Local Storage stores values as key value pairs

*    Objects cannot be stored in Local Storage, it has to be parsed as strings.

*    Local Storage makes use of four basic methods, which are:



| Method(s)     | Description   |
| ------------- |:-------------:|
| getItem()     | Helps to read and retrieve an item in Local Storage |
| setItem()     | Helps to add a data item to local storage |
| removeItem()  | Removes data from storage by the key |
| clear()       | Helps to clear all items from Storage  |



With the above explanation, we are going to make use of just two custom methods of local storage in our class. The **getItem** and **setItem** methods.


{% gist https://gist.github.com/desoga10/e0a846650b1d4fe1873bd172a542a41e %}


From the code above, all we did was declare a new class called **Storage**. This class has three methods **getPlayers**, **addClubPlayer** and **removeClubPlayer**.


For the **getPlayer** method, we declared a variable inside it and then checked if local storage has any player data. If it does not we set an empty array, and if it does, we then parsed the data(players) as an array of objects and then ultimately returned the data(players).

In the case of the **addClubPlayer** method, we got the data that has been stored from local storage and then we pushed that data(players) before setting it to local storage. The last thing we did was to stringify the data(players).

For the **removeClubPlayer** method, we used the jersey which has an input type of number in the **HTML** to serve as some form of key. So the first thing we did was to get the data(players) and then we looped through the data(players).We also checked if the data(players) passed is equals to the jersey number. We then spliced the data(players) by the index, before resetting it to local storage.


Before we implement the methods in the storage class, we need to add an event to display players, without this the methods we want to implement will not work.

{% gist https://gist.github.com/desoga10/c2ffb79d2bf0bcb0229785b263a90fb1 %}


So we can now implement the methods in our **Storage** class.  

Just below where we registered the players to the User Interface, we are going to call the **Storage** class and **addClubPlayer** function.

 

{% gist https://gist.github.com/desoga10/1a9f18f6842ceb93fc5542dd8ed81e26 %}


Now when you reload the browser, you notice he data displayed in the table gets persisted.

To implement the **removeClubPlayer** method in the **Storage** class, we need to call it just below the **deletePlayer** function:

{% gist https://gist.github.com/desoga10/0a845b580ca1c06805bd9c6da586b996 %}

For the **removeClubPlayer** method to work, we had to navigate to the parent-element and then traverse through the DOM by moving to the previous-element and then we used the text-content property to get to the **Jersey Number** we created in the table previously. 

The reason we navigated to the **Jersey Number** is because it serves as a key.


{% gist https://gist.github.com/desoga10/0886206d302f11f372a941033c2bf3b1 %}



So now we can perform the full functionality we want the application to do. This is shown in the gif below:

![Alt text of image](https://media.giphy.com/media/ZcocCRDe3chUKJZuoB/giphy.gif)


Here is also the link to the source code on [Github](https://github.com/desoga10/Club-Roaster-APP)


## In Conclusion


I am glad I finally got my first technical post over the line. This is definitely more difficult than I thought. I do write about Sports and that is not usually as difficult as this. This article took me almost three days to complete. 


I learned a whole lot from writing this article, and I enjoyed the entire process despite the difficulties encountered. My goal now is to make at least one post every week between now and the end of the year.

So if you like this tutorial and learned one or two things from it, you can show me some love and some unicorns, just for encouragement. Else, if you notice any thing I could have done better, constructive criticisms are allowed in the comment section. Thanks.

To get more free content on web development, subscribe to my newsletter:
<a href="http://eepurl.com/gZ-jJH" target="_blank">here</a>