Javascript S1E3 : Material GridList Cards with ActionButtons

Javascript S1E3 : Material GridList Cards with ActionButtons



Rating : 5/5 (1)




Introduction

We want to make some awesome material design list cards. The list will be two column and we create dark action cards programmatically with javascript. We make use of materializecss library. The cards will contain title,description and two action buttons. We handle button click events for our action buttons. We populate our list from a javascript array.

Questions this Project answers.

  • Material design cards with action buttons.
  • Materializecss action cards.
  • Two column list in css.
  • Grid list with material cards.

Libraries Used

These are the third parties used in this project.

Screenshot

  • Here's the screenshot of the project.
    Material Cards

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.jsstyle.cssVideo 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 Cards and OnClick Events</h4>
    <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 listView=document.createElement('ul');
var galaxies=['Pinwheel','Cartwheel',"Ring Nebular","Virgo Stellar Stream","Canis Majos Overdensity","Sombrero","Own Nebular","Triangulum"];
/*
- UI class
 */
var UI= function () {
     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
    - Append to displaySection
     */
    this.createListView=function()
    {
        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);
        }
        displaySection.appendChild(listView);
    }
}
var ui=new UI();
ui.createListView();

 

  • Our custom css file to show two column list.
ul {
    list-style: none;
}
ul li {
    width: 50%;
    float: left;
    border-right: 1px dotted #CCC;
    padding: 2px;
}

 

Below is the video version of this tutorial.

Javascript S1E3 : Materializecss - GridList Cards, ActionButtons

  • 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 *

    twelve − 2 =

    COMMENTS