Javascript S1E2 : Materializecss List CRUD – ADD UPDATE DELETE

Javascript S1E2 : Materializecss List CRUD – ADD UPDATE DELETE



Rating : 5/5 (1)




Introduction

In this tutorial we look at how to perform CRUD operations with a materializecss list. We see how to add items from an input text to material list on button click. Then we see how to set the selected list items to corresponding input text when the list item is clicked. We then update the data. We also see how to remove items from the list. We use materializecss floating action buttons.

Questions this Project answers.

  • Add Update Delete in javascript html list.
  • Set selected list item to input text.
  • Add items from input text to HTML list.
  • Delete items from materializecss list.
  • Materializecss FloatingActionButtons and List.

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.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>Javascript List CRUD</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>
        </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 List CRUD</h1>
    <h4 class="center light-blue-text">ADD,UPDATE,DELETE Material List</h4>
    <div class="row">
        <div class="col s6">
            <!--INPUT FORM-->
            <form name="inputform">
                <input type="text" id="nameID" placeholder="Galaxy Name" value="" name="title">
            </form>
            <a onclick="addItem();" class="btn-floating btn-large waves-effect waves-light red"><i
                    class="material-icons">add</i></a>
            <a onclick="updateItem()" class="btn-floating btn-large waves-effect waves-light red"><i
                    class="material-icons">edit</i></a>
            <a onclick="removeItem()" class="btn-floating btn-large waves-effect waves-light red"><i
                    class="material-icons">delete</i></a>
        </div>
        <!--LISTVIEW SECTION-->
        <div id="displaySectionID">
            <p>In this example we see how ADD,UPDATE,DELETE to Material List</p>
        </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 Hp on 8/17/2017.
 */
    //DECALARTIONS
var nameTxt=document.getElementById("nameID");
var displaySection=document.getElementById("displaySectionID");
var listView=document.createElement('ol');
listView.setAttribute("id","myListID");
var listID=0;
var selectedID= -1;
/*
- Our CRUD class.
- We add data to list.
- We set selected items to input text.
- We edit.
- We delete selected data from list.
 */
var Crud= function () {
    var galaxies=['Pinwheel','Cartwheel',"Ring Nebular","Virgo Stellar Stream","Canis Majos Overdensity","Triangulum"];
    /*
     SHOW LISTVIEW
     */
    this.show=function(){
        displaySection.appendChild(this.createListVew());
        this.setSelectedItem();
    }
    /*
     CREATE LISTVIEW WITH INITIAL DATA
     */
    this.createListVew=function()
    {
        listView.className="collection";
        for(var i=0;i<galaxies.length;i++)
        {
            listID=listID+1;
            var listViewItem=document.createElement('li');
            listViewItem.className="collection-item";
            listViewItem.setAttribute("id",listID.toString());
            listViewItem.appendChild(document.createTextNode(galaxies[i]));
            listView.appendChild(listViewItem);
        }
        return listView;
    }
    /*
     ADD NEW ITEM TO LIST
     */
    this.addLisViewItem=function(galaxyName)
    {
        var listViewItem=document.createElement('li');
        listViewItem.className="collection-item";
        listID=listID+1;
        listViewItem.setAttribute("id",listID.toString());
        listViewItem.appendChild(document.createTextNode(galaxyName));
        nameTxt.value="";
        listView.appendChild(listViewItem);
    }
    /*
     SET SELECTED ITEM TO LIST
     */
    this.setSelectedItem=function(){
        listView.addEventListener("click",function(event){
            if('LI' != event.target.tagName){ return;}
            else {
                nameTxt.value=event.target.innerText;
                selectedID=event.target.id;
            }
        },false);
    }
    /*
     UPDATE SELECTED ITEM IN LIST
     */
    this.updateSelectedItem=function(newValue)
    {
        if(selectedID != -1)
        {
            var selectdNode=document.getElementById(selectedID.toString());
            selectdNode.innerText=newValue;
            selectedID=-1;
        }else {
            alert("Please Select Item to Update first");
        }
    }
    /*
    REMOVE SELECTED ITEM FROM LIST
     */
    this.removeSelectedItem=function()
    {
        if(selectedID != -1)
        {
            listView.removeChild(document.getElementById(selectedID.toString()))
            nameTxt.value="";
            selectedID=-1;
        }else {
            alert("Please Select Item to remove first");
        }
    }
}
var crud=new Crud();
//EXPOSE OUR FUNCTIONS GLOBALLY
function addItem(){
    crud.addLisViewItem(nameTxt.value);
}
function updateItem(){
    crud.updateSelectedItem(nameTxt.value);
}
function removeItem()
{
    crud.removeSelectedItem();
}
crud.show();

 

Below is the video version of this tutorial.

Framework7 S1E1 : Download,Install, Hello World

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

    4 × 5 =

    COMMENTS