Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Notes Application for your Browser

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 334
    Comment on it

    This application uses local storage for storing data. The data will not be deleted by itself while your tab is closed.

    Here is the code :

    Make a folder structure like this :-

    App
        /assets
            /todo.css
            /todo.js
        /lib
            /Bootstrap
                /bootstrap.min
                /bootstrap.min
            /jQuery
                /jquery.min
                /jquery.ui.min
                /jquery.ui.min
        /index
    

    you can download jQuery and Bootstrap files from the official website.

    open a index.file in your editor:-

    <html>
        <head>
            <title>AngelPrime to-do List</title>
    
            <link rel="stylesheet" href="lib/Bootstrap/bootstrap.min.css" />
            <link rel="stylesheet" href="lib/jQuery/jquery.ui.min.css" />
            <link rel="stylesheet" href="assets/todo.css" />
        </head>
    
        <body class="well">
            <div id="container">
    
                <div id="header"> To Do List </div>
    
                <div class="task-list task-container" id="pending">
                    <h3>Pending</h3>
                    <!--<div class="todo-task">
                        <div class="task-header">Sample Header</div>
                        <div class="task-date">25/06/1992</div>
                        <div class="task-description">Lorem Ipsum Dolor Sit Amet</div>
                    </div>-->
                </div>
    
                <div class="task-list task-container" id="inProgress">
                    <h3>In Progress</h3>
                </div>
    
                <div class="task-list task-container" id="completed">
                    <h3>Completed</h3>
                </div>
    
                <div class="task-list">
                    <h3>Add a task</h3>
                    <form id="todo-form" class="clearfix">
                        <input type="text" placeholder="Title" />
                        <textarea placeholder="Description"></textarea>
                        <input type="text" id="datepicker" placeholder="Due Date (dd/mm/yyyy)" />
                        <input type="button" class="btn btn-info" value="Add Task" onclick="todo.add();" />
                    </form>
                        <input type="button" class="btn btn-info" value="Clear Data"    onclick="todo.clear();" />
    
    
                    <div id="delete-div">
                        Drag Here to Delete
                    </div>
                </div>
    
                <div style="clear:both;"></div>
                  <script type="text/javascript" src="lib/jQuery/jquery.min.js"></script>
                <script type="text/javascript" src="lib/Bootstrap/bootstrap.min.js"></script>
                <script type="text/javascript" src="lib/jQuery/jquery.ui.min.js"></script>
                <script type="text/javascript" src="assets/todo.js"></script>
    
                <script type="text/javascript">
                    $( "#datepicker" ).datepicker();
                    $( "#datepicker" ).datepicker("option", "dateFormat", "dd/mm/yy");
    
                    $(".task-container").droppable();
                    $(".todo-task").draggable({ revert: "valid", revertDuration:200 });
                    todo.init();
                </script>
    
            </div>
        </body>
    </html>
    

    open todo.css file and paste following code

    textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{border:1px solid #60b7c4;}
    .nano .pane   { background: #888; }
    .nano .slider { background: #111; }
    
    body {
        /* Override bootstrap properties */
        background-color: #60b7c4 !important;
        border: 0 !important;
    }
    
    #container{
        margin: 0 auto;
        width: 1060px;
        min-height: 100%;
        background-color: transparent;
        border: 0;
    }
    
    #header{
        font-size: 30px;
        text-align: center;
        margin-bottom: 15px;
        color: #fff;
    }
    
    .task-list{
        width: 250px;
        float: left;
        margin: 0 5px;
        background-color: #d7f4f4;
        min-height: 240px;
        border-radius: 10px;
        padding-bottom: 15px;
    }
    
    .task-list input, .task-list textarea{
        width: 240px;
        margin: 1px 5px;
    }
    
    .task-list input{
        height: 30px;
    }
    
    .todo-task{
        border-radius: 5px;
        background-color: #fff;
        width: 230px;
        margin: 5px;
        padding: 5px;
    }
    
    .task-list input[type="button"]{
        width: 100px;
        margin: 5px;
    
    }
    
    .todo-task > .task-header{
        font-weight: bold;
    }
    
    .todo-task > .task-date{
        font-size: small;
        font-style: italic;
    }
    
    .todo-task > .task-description{
        font-size: smaller;
    }
    
    h3{
        text-align: center;
    }
    
    #delete-div{
        display: none;
        background-color: #fff;
        border: 3px dotted #000;
        margin: 10px;
        height: 75px;
        line-height: 75px;
        text-align: center;
    }
    

    open todo.js file and paste

    var todo = todo || {},
        data = JSON.parse(localStorage.getItem("todoData"));
    
    data = data || {};
    
    (function(todo, data, $) {
    
        var defaults = {
                todoTask: "todo-task",
                todoHeader: "task-header",
                todoDate: "task-date",
                todoDescription: "task-description",
                taskId: "task-",
                formId: "todo-form",
                dataAttribute: "data",
                deleteDiv: "delete-div"
            }, codes = {
                "1" : "#pending",
                "2" : "#inProgress",
                "3" : "#completed"
            };
    
        todo.init = function (options) {
    
            options = options || {};
            options = $.extend({}, defaults, options);
    
            $.each(data, function (index, params) {
                generateElement(params);
            });
    
            /*generateElement({
                id: "123",
                code: "1",
                title: "asd",
                date: "22/12/2013",
                description: "Blah Blah"
            });*/
    
            /*removeElement({
                id: "123",
                code: "1",
                title: "asd",
                date: "22/12/2013",
                description: "Blah Blah"
            });*/
    
            // Adding drop function to each category of task
            $.each(codes, function (index, value) {
                $(value).droppable({
                    drop: function (event, ui) {
                            var element = ui.helper,
                                css_id = element.attr("id"),
                                id = css_id.replace(options.taskId, ""),
                                object = data[id];
    
                                // Removing old element
                                removeElement(object);
    
                                // Changing object code
                                object.code = index;
    
                                // Generating new element
                                generateElement(object);
    
                                // Updating Local Storage
                                data[id] = object;
                                localStorage.setItem("todoData", JSON.stringify(data));
    
                                // Hiding Delete Area
                                $("#" + defaults.deleteDiv).hide();
                        }
                });
            });
    
            // Adding drop function to delete div
            $("#" + options.deleteDiv).droppable({
                drop: function(event, ui) {
                    var element = ui.helper,
                        css_id = element.attr("id"),
                        id = css_id.replace(options.taskId, ""),
                        object = data[id];
    
                    // Removing old element
                    removeElement(object);
    
                    // Updating local storage
                    delete data[id];
                    localStorage.setItem("todoData", JSON.stringify(data));
    
                    // Hiding Delete Area
                    $("#" + defaults.deleteDiv).hide();
                }
            })
    
        };
    
        // Add Task
        var generateElement = function(params){
            var parent = $(codes[params.code]),
                wrapper;
    
            if (!parent) {
                return;
            }
    
            wrapper = $("<div />", {
                "class" : defaults.todoTask,
                "id" : defaults.taskId + params.id,
                "data" : params.id
            }).appendTo(parent);
    
            $("<div />", {
                "class" : defaults.todoHeader,
                "text": params.title
            }).appendTo(wrapper);
    
            $("<div />", {
                "class" : defaults.todoDate,
                "text": params.date
            }).appendTo(wrapper);
    
            $("<div />", {
                "class" : defaults.todoDescription,
                "text": params.description
            }).appendTo(wrapper);
    
            wrapper.draggable({
                start: function() {
                    $("#" + defaults.deleteDiv).show();
                },
                stop: function() {
                    $("#" + defaults.deleteDiv).hide();
                },
                revert: "invalid",
                revertDuration : 200
            });
    
        };
    
        // Remove task
        var removeElement = function (params) {
            $("#" + defaults.taskId + params.id).remove();
        };
    
        todo.add = function() {
            var inputs = $("#" + defaults.formId + " :input"),
                errorMessage = "Title can not be empty",
                id, title, description, date, tempData;
    
            if (inputs.length !== 4) {
                return;
            }
    
            title = inputs[0].value;
            description = inputs[1].value;
            date = inputs[2].value;
    
            if (!title) {
                generateDialog(errorMessage);
                return;
            }
    
            id = new Date().getTime();
    
            tempData = {
                id : id,
                code: "1",
                title: title,
                date: date,
                description: description
            };
    
            // Saving element in local storage
            data[id] = tempData;
            localStorage.setItem("todoData", JSON.stringify(data));
    
            // Generate Todo Element
            generateElement(tempData);
    
            // Reset Form
            inputs[0].value = "";
            inputs[1].value = "";
            inputs[2].value = "";
        };
    
        var generateDialog = function (message) {
            var responseId = "response-dialog",
                title = "Messaage",
                responseDialog = $("#" + responseId),
                buttonOptions;
    
            if (!responseDialog.length) {
                responseDialog = $("<div />", {
                        title: title,
                        id: responseId
                }).appendTo($("body"));
            }
    
            responseDialog.html(message);
    
            buttonOptions = {
                "Ok" : function () {
                    responseDialog.dialog("close");
                }
            };
    
            responseDialog.dialog({
                autoOpen: true,
                width: 400,
                modal: true,
                closeOnEscape: true,
                buttons: buttonOptions
            });
        };
    
        todo.clear = function () {
            data = {};
            localStorage.setItem("todoData", JSON.stringify(data));
            $("." + defaults.todoTask).remove();
        };
    
    })(todo, data, jQuery);
    

    In the bootstrap and jQery folder add there file from the website.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: