Snippets

Glauco Pater Sorrt

Created by Glauco Pater last modified
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Sorrt</title>
    <meta name="description" content="Add, Sort and Save result">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<style>
    /*style.css*/

    body {
        text-align: center;
        background-color: #3c6dc5;
        color: white;
        font-family: helvetica;
    }

    h1 {
        margin-top: 100px;
    }

    ul {
        display: inline-block;
        cursor: move;
        text-align: left;
        width: 300px;
        max-width: 100%;
    }

    li {
        color: lightgray;
    }

    li:first-child {
        font-size: 130%;
        color: white;
    }

    input[type='submit'] {
        background-color: red;
        border: 0;
        color: white;
        padding: 5px 10px;
        cursor: pointer;
    }


    input[type='button'] {
        background-color: orange;
        border: 0;
        color: white;
        padding: 5px 10px;
        cursor: pointer;
    }

</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script>
    /*main.js*/
    $(document).ready(function($) {


        var queryString = getParameterByName("values");

        if (queryString) {
            var tokens = queryString.split(",");

            for (i = 0; i < tokens.length; i++) {
                addNewValue(tokens[i]);
            }

        }

        function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }

         function addNewValue(newTask) {
            var newLi = $('<li>' + newTask + '</li>');

            newLi.on('click', function() {
                $(this).remove(); // Attach the event handler *before* adding the element
            });

            $('ul').addClass('listitems').prepend(newLi); // To put the new task at the top of the list
            $('.input').val('');


        }


        $('form').submit(function() {
            var newVal = $('.input').val();
            if (newVal !== '') {
                if (!isNaN(parseFloat(newVal))) {
                    addNewValue(newVal);
                }
                return false; // So the change persists
            }
        });
        $('ul').sortable(); // Because what good is a to-do list that you can't sort? :)

        $('input:button').click(function() {
            sorrt();
        });

        function sort_li(a, b) {
            return ($(b).text() < $(a).text()) ? 1 : -1;
        }

        function sorrt() {
            var orderedlist =
                $("ul.listitems li").sort(function(a, b) {
                    return $(b).text() - $(a).text()
                });
            orderedlist.appendTo('.listitems');

            var orderedListValues = [];
            $(orderedlist).each(function() {
                orderedListValues.push($(this).text());
            });

            window.localStorage.setItem("sorrt", orderedListValues);
        }

        function getStorage() {
            return window.localStorage.getItem("sorrt");
        }

        function main() {

            var storage = getStorage();
            console.log(storage);
            if (storage != null && storage != '') {
                $(storage.split(",")).each(function(index, val) {
                    console.log(index.val);
                    addNewValue(val);
                });

            }

        }
        main();
    });

</script>

<body>
    <h1>
        SORRT
    </h1>

    <form>
        <label>Enter a new value:</label>
        <input class="input" type="text">
        <input type="submit" value="Add">
        <input type="button" value="Sort">
    </form>
    <ul title="Click to delete; drag to reorder">
    </ul>


</body>

Comments (0)