Club Roster Application With Vanilla Javascript

So after much consideration. I have decided to make my first technical post on here. 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.

From the code we have above, we were able to display the Navbar by importing the bootstrap 4 CDN from their website.

Also the logo we used was imported from the Font-Awesome website.

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.

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.

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:

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

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.

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.

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.

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:

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:

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.

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.

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:

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.

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.

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.

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:

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.

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

Here is also the link to the source code on Github

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