Web Analytics Made Easy -
StatCounter need help to code to local storge with cordova plugin file - CodingForum

Announcement

Collapse
No announcement yet.

need help to code to local storge with cordova plugin file

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • need help to code to local storge with cordova plugin file

    js
    *********

    Code:
    $(document).ready(function() {
    
        var notesArray = [],
            count = 0;
    
        function listRefresh() {
            $('#list').empty();
    
            for (var i = 0; i < notesArray.length; i++) {
                var name = notesArray[i].name,
                    date = notesArray[i].date,
                    dateString,
                    month,
                    element;
    
                month = date.getMonth() + 1;
                dateString = date.getDate() + "/" + month + "/" + date.getFullYear();
    
                element = $('<li data-id="' + notesArray[i].id + '" data-name="' + notesArray[i].name + '">');
    
                element.append($('<div class="div-name">').text(name));
                element.append($('<div class="div-date">').text(dateString));
    
                $('#list').append(element);
            }
        }
    
        $('#list').on('click', 'li', function() {
            var id = $(this).data('id'),
                content = '',
                name = $(this).data('name');
    
    
            console.log("name: ", name)
            $('#list li.selected').removeClass('selected');
            $(this).addClass('selected');
    
            for (var i = 0; i < notesArray.length; i++) {
                if (notesArray[i].id === id) {
                    content = notesArray[i].content;
                }
            }
    
            $('#edit-name').val(name);
            $('#edit-content').val(content);
    
            //$('#div-edit').css('display', 'inline-block');
            $('#div-edit').removeClass('hide');
        })
    
        $('#add').on('click', function() {
            var name = $('#name').val(),
                content = $('#content').val(),
                date = new Date();
    
            if (name === "") {
                alert("Please enter a name for the note");
            } else {
                notesArray.push({
                    id: count,
                    name: name,
                    content: content,
                    date: date
                })
            }
    
            count++;
    
            $('#content').val('');
            $('#name').val('');
    
            listRefresh();
        })
    
        $('#save').on('click', function() {
            var id = $('#list li.selected').data('id'),
                name = $('#edit-name').val(),
                content = $('#edit-content').val();
    
            for (var i = 0; i < notesArray.length; i++) {
                if (notesArray[i].id === id) {
                    notesArray[i].name = name;
                    notesArray[i].content = content;
                    break;
                }
            }
    
            listRefresh();
    
            $('#list li[data-id="' + id + '"]').addClass('selected');
    
        })
    
        $('#cancel').on('click', function() {
            //$('#div-edit').css('display', 'none');
            $('#div-edit').addClass('hide');
            $('#list li.selected').removeClass('selected');
        })
    
        $('#remove').on('click', function() {
            var id = $('#list li.selected').data('id');
    
            var r = confirm('Are you sure you want to remove this note?');
            if (r) {
                for (var i = 0; i < notesArray.length; i++) {
                    if (notesArray[i].id === id) {
                        notesArray.splice(i, 1);
                        break;
                    }
                }
    
                listRefresh();
    
                //$('#div-edit').css('display', 'none');
                $('#div-edit').addClass('hide');
            }
    
        })
    
    });
    ***************************************
    css

    Code:
    body {
        padding: 20px;
    }
    #list {
        overflow: auto;
        border: solid 1px;
        width: 400px;
        height: 400px;
        list-style: none;
        -webkit-padding-start: 0px;
        margin-right: 0;
        margin-left: 0;
        background-color: #fff;
        border-color: #ddd;
        border-width: 1px;
        border-radius: 4px;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #list li {
        padding: 20px;
        border: solid 1px;
        border-color: #ddd;
        border-width: 1px;
    }
    #list li.selected{
        background-color: #B8D0E6;
    }
    #list li:hover {
        cursor: pointer;
    }
    .div-name {
        display: inline-block;
        width: 260px;
    }
    .div-date{
        display: inline-block;
        width: 90px;
    }
    .edit-content {
        width: 500px;
    }
    #div-list {
        padding: 20px;
        display: inline-block;
    }
    #div-add {
        padding: 20px;
        width: 500px;
    }
    #div-edit {
        padding: 20px;
        padding-top: 50px;
        display: inline-block;
        vertical-align: top;
    }
    #div-edit.hide {
        display: none;
    }


    **************
    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="script.js">
        </script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    
    <body>
        <h3>
            Add Notes
        </h3>
        <div id="div-add">
            <form role="form">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" id="name"></input>
                </div>
                <div class="form-group">
                    <label for="content">Content</label>
                    <textarea rows="4" cols="50" class="form-control" id="content"></textarea>
                </div>
                <button id="add" class="btn btn-primary" type="button">Add</button>
                <p>
            </form>
        </div>
        <div id="div-list">
            <h3>View/Edit</h3>
            <ul id="list">
            </ul>
        </div>
        <div id="div-edit" class="hide">
            <form role="form">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" id="edit-name"></input>
                </div>
                <div class="form-group">
                    <label for="content">Content</label>
                    <textarea rows="4" cols="50" class="form-control" id="edit-content"></textarea>
                </div>
                <button id="save" class="btn btn-primary" type="button">Save</button>
                <button id="remove" class="btn btn-danger" type="button">Remove</button>
                <button id="cancel" class="btn btn-default" type="button">Cancel</button>
            </form>
        </div>
    </body>
    
    </html>
    Last edited by vinyl-junkie; Sep 9, 2016, 05:33 PM. Reason: added code tags
Working...
X