Javascript S1E4 : Materializecss Cards – Sort Ascending/Descending

Javascript S1E4 : Materializecss Cards – Sort Ascending/Descending



Rating : 5/5 (2)




Introduction

In this tutorial we'll make a sortable list of materialize cards. The cards will be rendered in a two column list, as grids. Each card will comprise title, description and action buttons. Wehen one action button is clicked, we get the title while when another is clicked we get the description. We then have two buttons for sorting our cards in either ascending or descending manner.
We use Materializecss to theme our app.

Questions this Project answers.

  • Material design cards with action buttons.
  • Materializecss action cards.
  • Two column list in css.
  • Grid list with material cards.
  • Material cards sort ascending and descending javascript.

Libraries Used

These are the third parties used in this project.

Screenshot

  • Here's the screenshot of the project.

Tools used

Language: Javascript,HTML,CSS
IDE: PHPStorm.
Topic: Javascript List,HTML GridList,Materializecss Cards.

Source Code

Lets have a look at the source code.

index.htmlmain.jsVideo TutorialDownload
  • 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 html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Camposha.info </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</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">Javascript Materialize Cards</h1>
    <h4 class="center light-blue-text">Materialize Sort Cards and OnClick Events</h4>
    <div class="center">
        <a onclick="sortAsc()" class="waves-effect waves-teal btn">Ascending</a>
        <a onclick="sortDesc()" class="waves-effect waves-teal btn">Descending</a>
    </div>
    <div class="row">
        <div id="displaySectionID">
        </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="#!">Javascript</a></li>
                    <li><a class="white-text" href="#!">PHP</a></li>
                    <li><a class="white-text" href="#!">Java</a></li>
                    <li><a class="white-text" href="#!">C#</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="#!">Twitter</a></li>
                    <li><a class="white-text" href="#!">Google Plus</a></li>
                    <li><a class="white-text" href="#!">LinkedIn</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>
<!--REFERENCE SCRIPTS-->
<script src="assets/js/main.js"></script>
</body>
</html>

 

  • Our javascript file.
  • We write custom javascript code here.
/*
- Global declarations
 */
var displaySection=document.getElementById("displaySectionID");
var galaxies=['Pinwheel','Cartwheel',"Ring Nebular","Virgo Stellar Stream","Canis-Majos Overdensity","StarBust","IC 1011","Sombrero","Own Nebular","Triangulum"];
/*
- UI class.
- Responsible for creating cards, list and adding data to them.
 */
var UI= function () {
    /*
    - Create a single dark materialize card with title,description and two action buttons
     */
     this.createCard=function(id,name,description)
     {
         var cardView=document.createElement('div');
         cardView.className="card blue-grey darken-1";
         var contentView=document.createElement('div');
         contentView.className="card-content white-text";
         var span=document.createElement('span');
         span.className="card-title";
         contentView.appendChild(span);
         contentView.appendChild(document.createTextNode(description));
         span.innerText=name;
         cardView.appendChild(contentView);
         var cardActionsView=document.createElement('div');
         cardActionsView.className="card-action";
         //create action button 2
         var actionButton1=document.createElement('a');
         actionButton1.appendChild(document.createTextNode("Show"));
         actionButton1.setAttribute("id","showID"+id.toString());
         //onclick event for actionbutton 1
         actionButton1.onclick=function()
         {
             alert(name);
         }
         //create second action button
         var actionButton2=document.createElement('a');
         actionButton2.appendChild(document.createTextNode("View"));
         actionButton2.setAttribute("id","viewID"+id.toString());
         //When button 2 is clicked
         actionButton2.onclick=function()
         {
             alert(description);
         }
         //Add action buttons to cardActionsview
         cardActionsView.appendChild(actionButton1);
         cardActionsView.appendChild(actionButton2);
         //Add cardActionsview with action buttons to cardview
         cardView.appendChild(cardActionsView);
         return cardView;
     }
    /*
    - Create ListView
    - Fill with data
     */
    this.createListView=function()
    {
        var listView=document.createElement('ul');
        listView.className="list";
        for(var i=0;i<galaxies.length;i++)
        {
            var listViewItem=document.createElement('li');
            listViewItem.appendChild(this.createCard(i,galaxies[i],"This is the Description for "+galaxies[i]));
            listView.appendChild(listViewItem);
        }
        return listView;
    }
    /*
     - Append ListView to displaySection
     */
    this.show=function(){
        displaySection.innerHTML="";
        displaySection.appendChild(this.createListView());
    }
    /*
     SORT DATA ASCENDING OR DESCENDING
     */
    this.sortData=function(asc)
    {
        if(asc)
        {
            galaxies.sort();
            this.show();
        }else
        {
            galaxies.reverse();
            this.show();
        }
    }
}
var ui=new UI();
function sortAsc(){ui.sortData(true)}
function sortDesc(){ui.sortData(false)}
ui.show();

 

Below is the video version of this tutorial.

Javascript S1E4 : Materializecss Cards - Sort 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 *

    19 − 11 =

    COMMENTS