Javascript S1E1 : Sort Lists in Descending and Ascending

Javascript S1E1 : Sort Lists in Descending and Ascending



Rating : 5/5 (1)




Introduction

In this class we see how to sort list in ascending and descending orrder dynamically in javascript. First we add data from input text to the list on button click. Then we have two materialize buttons : ascending and descending. When ascending is clicked, we sort data in ascending manner. When descending is clicked, we sort in descending manner.
We are working with materializecss as our frontend framework.

Questions this Project answers.

  • Sort HTML List in ascending or descending manner in javascript.
  • Add items from input text to HTML list.
  • Materializecss list.
  • Populate list from an array.

Libraries Used

These are the third parties used in this project.

Screenshot

  • Here's the screenshot of the project.
    Javascript List Sort

Tools used

Language: Javascript,HTML,CSS
IDE: PHPStorm.
Topic: Javascript List,HTML List.

Source Code

Lets have a look at the source code.

index.htmlmain.jsPreviewDownload
  • Our index.html file.
  • We reference materializecss just at the end of our body.
  • We also reference our javascript script at the base of the body.
<!DOCTYPE html5>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS List Sort</title>
    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="assets/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    <link href="assets/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<!--NAVIGATION BAR-->
<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Camposha.info</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>
<!--CONTAINER-->
<div class="container">
    <h1 class="header center orange-text">List Sort</h1>
    <h4 class="center light-blue-text">Javascript Sort List Ascending and Descending</h4>
    <div class="row">
        <div class="col s6">
            <!--INPUT FORM-->
            <form name="inputform">
                <input type="text" id="galaxyNameID" placeholder="Galaxy Name" name="name">
            </form>
            <a onclick="addItem();" class="btn-floating btn-large waves-effect waves-light red"><i
                    class="material-icons">add</i></a>
        </div>
        <div class="col s6">
            <div>
                <a onclick="sortAsc()" class="waves-effect waves-teal btn">Ascending</a>
                <a onclick="sortDesc()" class="waves-effect waves-teal btn">Descending</a>
            </div>
            <!--LISTVIEW SECTION-->
            <div id="displaySectionID">
                <p>In this example we see how to add data to and sort a Material List</p>
            </div>
        </div>
    </div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<!--FOOTER-->
<footer class="page-footer orange">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5 class="white-text">Company Bio</h5>
                <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's
                    our full time job.</p>
            </div>
            <div class="col l3 s12">
                <h5 class="white-text">Languages</h5>
                <ul>
                    <li><a class="white-text" href="#!">Java</a></li>
                    <li><a class="white-text" href="#!">C#</a></li>
                    <li><a class="white-text" href="#!">Javascript</a></li>
                    <li><a class="white-text" href="#!">PHP</a></li>
                </ul>
            </div>
            <div class="col l3 s12">
                <h5 class="white-text">Connect</h5>
                <ul>
                    <li><a class="white-text" href="#!">Facebook</a></li>
                    <li><a class="white-text" href="#!">Google Plus</a></li>
                    <li><a class="white-text" href="#!">Twitter</a></li>
                    <li><a class="white-text" href="#!">Pinterest</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>
<!--SCRIPTS-->
<script src="main.js"></script>
</body>
</html>

 

  • Our javascript file.
  • We write custom javascript code here.
/**
 * Created by Oclemy
 */
    //GLOBAL DECLARATIONS
var nameTxt=document.getElementById("galaxyNameID");
var displaySection=document.getElementById("displaySectionID");
var galaxies=['Pinwheel','Cartwheel',"Ring Nebular","Virgo Stellar Stream","Canis Majos Overdensity","Triangulum"];
/*
- Our ListSorter class.
- Creates a ListView given an array of data.
- Able to sort that array in ascending or descending manner.
 */
var ListSorter= function () {
    /*
     SHOW LISTVIEW
     */
    this.show=function(){
        displaySection.innerHTML="";
        displaySection.appendChild(this.createListVew());
    }
    /*
     CREATE LISTVIEW WITH INITIAL DATA
     */
    this.createListVew=function()
    {
        var listView=document.createElement('ol');
        listView.className="collection";
        for(var i=0;i<galaxies.length;i++)
        {
            var listViewItem=document.createElement('li');
            listViewItem.className="collection-item";
            listViewItem.appendChild(document.createTextNode(galaxies[i]));
            listView.appendChild(listViewItem);
        }
        return listView;
    }
    /*
     ADD NEW ITEM TO DATA SOURCE AND CALL SHOW
     */
    this.addNewItem=function(galaxyName)
    {
        galaxies.push(galaxyName);
        galaxies.sort();
        nameTxt.value="";
        this.show();
    }
    /*
    SORT DATA ASCENDING OR DESCENDING
     */
    this.sortData=function(asc)
    {
        if(asc)
        {
            galaxies.sort();
            this.show();
        }else
        {
            galaxies.reverse();
            this.show();
        }
    }
}
var sorter=new ListSorter();
//EXPOSE OUR FUNCTIONS GLOBALLY
function addItem(){sorter.addNewItem(nameTxt.value);}
function sortAsc(){sorter.sortData(true)}
function sortDesc(){sorter.sortData(false)}
sorter.show();

 

Below is the video version of this tutorial.

Javascript S1E1 : Materializecss - Sort List Ascending/Descending

  • Download the Project below.

Download

How to Download and Run.

  1. Download the project above.
  2. You'll get a zipped file,extract it.
  3. You'll have three files : html,css and javascript.
  4. Place them in a folder and run the index.html file.That's it.

More

  • Visit our channel for more examples like these.
  • Lets share tips and ideas in our Facebook Page.

Oclemy,Cheers.



Rating :

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    12 + seventeen =

    COMMENTS