使用HTML5/JavaScript实现敏捷开发任务板（Scrum板）应用

Scrum Board, JavaScript Task Manager App, 使用本地存储来保存当前任务队列和状态。

html5, template, board

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2160
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var LocalStorage = function() {
    function set(key, val) {
        localStorage.setItem(key, val);
    }

function get(key) {
        return localStorage.getItem(key);
    }

function remove(key) {
        localStorage.removeItem(key);
    }

return {
        set: set,
        get: get,
        remove: remove
    }
}();

var App = function() {
    function init() {
        tips();
        preset();
        draggable();
        droppable();
        openCard();
        createTask();
        closeModal();
        printNotes();
        editTask();
        exitEditMode();
    }

function preset() {
        $('#remove').on('click', function(e) {
            e.preventDefault();
        });

var defaultTask = {
            id: 1,
            title: 'This is a sample task',
            description: 'Sample tasks are useful to get started',
            remote_url: 'https://asana.com/12345/1234',
            assigned_to: 'Jon Doe',
            status: 'pending'
        }

if (!LocalStorage.get('appInitialized', true)) {
            LocalStorage.set('taskCounter', 1);
            LocalStorage.set('task-1', JSON.stringify(defaultTask));
            LocalStorage.set('appInitialized', true);
        }
    }

function createTask() {
        var source = $("#task-card-template").html();
        var template = Handlebars.compile(source);

$('#add-task').on('click', function(e) {
            e.preventDefault();
            $('#add-task-modal').removeClass('hide');

$('#add-task-modal').find('form').on('submit', function(e) {
                e.preventDefault();
                var obj = {};
                var params = $(this).serialize();
                var splitParams = params.split('&');

for (var i = 0, l = splitParams.length; i < l; i++) {
                    var keyVal = splitParams[i].split('=');
                    obj[keyVal[0]] = unescape(keyVal[1]);
                }

var iid = LocalStorage.get('taskCounter');
                obj.id = ++iid;
                obj.status = 'pending';
                LocalStorage.set('task-' + obj.id, JSON.stringify(obj));
                LocalStorage.set('taskCounter', iid);

var newCard = template([obj]);
                $('#dashboard #' + obj.status).append(newCard);
                draggable();

$('.close-modal').trigger('click');
            });

});
    }

function editTask() {
        $('.card-details p').on('dblclick', function(e) {
            e.stopPropagation();
            $(this).attr('contenteditable', 'true').parents('.card').addClass('edit-mode');
        });

$('.card').find('p').on('input', function() {
            var taskId = $(this).parents('.card').data('task-id');
            var fieldToEdit = $(this).data('field');
            var getTaskData = JSON.parse(LocalStorage.get('task-' + taskId));

getTaskData[fieldToEdit] = $(this).text();

LocalStorage.set('task-' + taskId, JSON.stringify(getTaskData));
        });
    }

function exitEditMode() {
        $(document).on('dblclick', function(e) {
            $('.card').removeClass('edit-mode').find('[contenteditable]').removeAttr('contenteditable');
        });
    }

function closeModal() {
        $('.close-modal').on('click', function() {
            $('.modal').addClass('hide');
        })
    }

function draggable() {
        $('.card').draggable({
            handle: 'h5',
            revert: true,
            cursor: 'move',
            start: function(event, ui) {

},
            stop: function(event, ui) {

}
        });
    }

function droppable() {
        var droppableConfig = {
            tolerance: 'pointer',
            drop: function(event, ui) {
                var elm = ui.draggable,
                    parentId = elm.parent().attr('id'),
                    currentId = $(this).attr('id'),
                    taskId = elm.data('task-id');

if ($(this).attr('id') == 'remove') {
                    //Deletes task
                    elm.remove();
                    LocalStorage.remove('task-' + taskId);
                    $('#removed-task-notification').text('Task removed successfully').removeClass('hide');

setTimeout(function() {
                        $('#removed-task-notification').text('').addClass('hide');
                    }, 3000);
                } else {
                    //Moves task
                    if (parentId != currentId) {
                        $(elm).detach().removeAttr('style').appendTo(this);

var getTaskData = JSON.parse(LocalStorage.get('task-' + taskId));
                        getTaskData.status = currentId;

LocalStorage.set('task-' + taskId, JSON.stringify(getTaskData));
                    }
                }

$(this).removeClass('dragged-over');
            },
            over: function(event, ui) {
                $(this).addClass('dragged-over');
            },
            out: function(event, ui) {
                $(this).removeClass('dragged-over');
            }
        }

$('#dashboard > div, #remove').droppable(droppableConfig);
    }

function openCard() {
        $(document).on('click', '.expand-card', function(e) {
            $(this).parent().toggleClass('expanded');
            e.preventDefault();
        });
    }

function getAllNotes() {
        var getAllData = localStorage;
        var getTasks = [];

for (var data in getAllData) {
            if (data.split('-')[0] == 'task') {
                getTasks.push(JSON.parse(localStorage[data]));
            }
        }

return getTasks;
    }

function printNotes() {
        var source = $("#task-card-template").html();
        var template = Handlebars.compile(source);

var status = ['rejected', 'pending', 'development', 'testing', 'production'];

for (var i = 0, l = status.length; i < l; i++) {
            var result = App.getAllNotes().filter(function(obj) {
                return obj.status == status[i];
            });

if (result) {
                var cards = template(result);
                $('#dashboard #' + status[i]).append(cards);
                draggable();
            }
        }
    }

function tips() {
        if (!JSON.parse(LocalStorage.get('showedTip'))) {
            $('#tips').removeClass('hide').addClass('tips');
        }

$('#tips').on('click', function() {
            $(this).addClass('hide');
            LocalStorage.set('showedTip', true);
        });
    }

return {
        init: init,
        getAllNotes: getAllNotes
    }
}();

App.init();

编译

CSS

@import "https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400");
* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}
html,
body,
.wrapper {
    height: 100%;
}
body {
    font-weight: 300;
    font-family: Hind Vadodara;
    background-image: linear-gradient(to left, #000428, #004e92);
    color: #fff;
    font-size: 14px;
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
    color: inherit;
}
.clear:after {
    content: "";
    display: table;
    clear: both;
}
.hide {
    display: none !important;
}
header {
    background-color: rgba(0, 0, 0, 0.4);
}
header li {
    padding: 15px;
    float: left;
    width: 20%;
    text-align: center;
    position: relative;
    text-transform: uppercase;
}
header li:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
}
header li:nth-child(1):after {
    background: linear-gradient(to left, #cb2d3e, #ef473a);
}
header li:nth-child(2):after {
    background: linear-gradient(to left, #ffb347, #ffcc33);
}
header li:nth-child(3):after {
    background: linear-gradient(to left, #56ab2f, #a8e063);
}
header li:nth-child(4):after {
    background: linear-gradient(to left, #00d2ff, #3a7bd5);
}
header li:nth-child(5):after {
    background: linear-gradient(to left, #4CB8C4, #3CD3AD);
}
.wrapper {
    overflow: hidden;
}
.dashboard {
    height: calc(100% - 101px);
}
.dashboard > div {
    float: left;
    height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.4);
    width: 20%;
}
.card {
    background-color: rgba(0, 0, 0, 0.4);
    min-height: 50px;
    margin: 10px;
    position: relative;
    overflow: hidden;
    height: 40px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
    z-index: 2;
}
.card:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 1px;
}
.rejected .card p:before,
.rejected .card h5:after {
    color: #ef473a;
}
.pending .card p:before,
.pending .card h5:after {
    color: #ffcc33;
}
.development .card p:before,
.development .card h5:after {
    color: #a8e063;
}
.testing .card p:before,
.testing .card h5:after {
    color: #3a7bd5;
}
.production .card p:before,
.production .card h5:after {
    color: #3CD3AD;
}
.card h5 {
    font-size: 13px;
    line-height: 50px;
    padding-left: 10px;
    font-weight: 300;
}
.card.edit-mode h5 {
    position: relative;
}
.card.edit-mode h5:after {
    top: 50%;
    margin-left: 5px;
    margin-top: 1px;
    transform: translateY(-50%);
    position: absolute;
    font-size: 9px;
    content: "(Edit Mode Enabled)";
}
.rejected .card:before {
    background: linear-gradient(to left, #cb2d3e, #ef473a);
}
.pending .card:before {
    background: linear-gradient(to left, #ffb347, #ffcc33);
}
.development .card:before {
    background: linear-gradient(to left, #56ab2f, #a8e063);
}
.testing .card:before {
    background: linear-gradient(to left, #00d2ff, #3a7bd5);
}
.production .card:before {
    background: linear-gradient(to left, #4CB8C4, #3CD3AD);
}
.card.expanded {
    overflow: auto !important;
    height: auto !important;
}
.card-details {
    padding: 10px;
    font-size: 12px;
    word-wrap: break-word;
    padding-top: 0;
}
.card-details p {
    margin-bottom: 10px;
    position: relative;
}
.card-details p:before {
    position: absolute;
    left: 0;
}
.card-details p:nth-child(1) {
    padding-left: 67px;
}
.card-details p:nth-child(1):before {
    content: "Description : ";
}
.card-details p:nth-child(2) {
    padding-left: 72px;
}
.card-details p:nth-child(2):before {
    content: "Remote URL : ";
}
.card-details p:nth-child(3) {
    padding-left: 70px;
}
.card-details p:nth-child(3):before {
    content: "Assigned To : ";
}
.card-details a {
    border-bottom: 1px dotted #fff;
}
.card-details a:hover {
    border-bottom-style: solid;
}
.dragged-over {
    background-color: rgba(0, 0, 0, 0.1);
}
@keyframes rotate180 {
    to {
        transform: rotate(180deg);
    }
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to left, #000428, #004e92);
    z-index: 2;
}
.modal-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 400px;
    margin: auto;
    width: 100%;
    transform: translateX(-50%) translateY(-50%);
}
.modal-wrapper .close-modal {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: absolute;
    top: -90px;
    font-family: Open Sans;
    line-height: 52px;
    font-size: 20px;
    left: 50%;
    transform: translateX(-50%);
    vertical-align: middle;
    cursor: pointer;
}
.modal-wrapper .close-modal:hover {
    border-color: #fff;
}
.modal-wrapper h3 {
    font-weight: 100;
    font-size: 30px;
    position: relative;
}
.add-task-form {
    text-align: center;
}
.add-task-form li {
    margin-top: 30px;
}
.add-task-form [type=text],
.add-task-form [type=submit],
.add-task-form textarea {
    color: #fff;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    width: 100%;
    line-height: 24px;
    padding: 15px 10px;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background-color: transparent;
    transition: border-color .25s linear;
}
.add-task-form [type=text]::-webkit-input-placeholder,
.add-task-form [type=submit]::-webkit-input-placeholder,
.add-task-form textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.3);
}
.add-task-form [type=text]:focus,
.add-task-form [type=submit]:focus,
.add-task-form textarea:focus {
    border-color: #fff;
}
.add-task-form [type=submit] {
    cursor: pointer;
    border-color: transparent;
}
.add-task-form textarea {
    resize: none;
    min-height: 100px;
}
.expand-card {
    height: 19px;
    width: 19px;
    background-size: auto 100%;
    display: inline-block;
    position: absolute;
    top: 25px;
    cursor: pointer;
    transform: translateY(-50%);
    right: 15px;
    padding: 3px;
}
.rejected .expand-card {
    background-image: url("http://imgh.us/rejected-expand.svg");
}
.pending .expand-card {
    background-image: url("http://imgh.us/pending-expand.svg");
}
.development .expand-card {
    background-image: url("http://imgh.us/development-expand.svg");
}
.testing .expand-card {
    background-image: url("http://imgh.us/testing-expand.svg");
}
.production .expand-card {
    background-image: url("http://imgh.us/production-expand.svg");
}
.expand-card svg {
    fill: #fff;
}
.removed-task-notification {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 20px;
    color: #515151;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: 0 0 3px rgba(0, 0, 0, 0.6);
}
footer {
    height: 50px;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.4);
}
.remove {
    display: block;
    background-color: #ef473a;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    text-align: center;
    padding-top: 7px;
    transition: all 300ms ease-out;
    cursor: default;
}
.remove img {
    width: 16px;
}
.remove.dragged-over {
    width: 250px;
    border-radius: 3px;
}
.add-task {
    z-index: 1;
    border-radius: 50%;
}
.add-task img {
    width: 30px;
    display: block;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
}
.add-task:hover img {
    animation: rotate180 .2s linear;
}
[data-tooltip] {
    position: relative;
}
[data-tooltip]:before {
    display: none;
    content: attr(data-tooltip);
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    position: absolute;
    text-align: center;
    white-space: nowrap;
    left: 50%;
    transform: translateY(-130%) translateX(-50%);
}
[data-tooltip]:hover:before {
    display: block;
}
.controls {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.controls li {
    float: left;
    margin-right: 20px;
}
.branding,
.create-task-branding {
    text-transform: uppercase;
    font-size: 18px;
    padding: 15px;
    float: left;
    position: relative;
}
.branding sup,
.create-task-branding sup {
    position: absolute;
    font-size: 9px;
    right: 5px;
    top: 10px;
}
.branding span,
.create-task-branding span {
    color: rgba(255, 255, 255, 0.6);
}
.create-task-branding {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 150px;
}
.github-ref {
    height: 30px;
    width: 30px;
}
.github-ref img {
    height: 29px;
    width: 29px;
}
.onboard {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
}
.onboard-modal {
    height: 300px;
    width: 450px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tips {
    position: absolute;
    bottom: 90px;
    right: -280px;
    font-size: 13px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 3px;
    padding-left: 25px;
    opacity: 0;
    animation: showTips 500ms ease-in forwards;
    cursor: pointer;
    background-image: url("http://imgh.us/info_12.svg");
    background-position: 4px center;
    background-size: 16px;
    background-repeat: no-repeat;
}
@keyframes showTips {
    to {
        right: 20px;
        opacity: 1;
    }
}
iframe {
    margin-top: 5px;
}
.twitter-share-button {
    background-color: #1b95e0;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 3px;
    vertial-align: middle;
    position: absolute;
    top: 4px;
    left: -70px;
}

HTML

<div class="wrapper">
    <header class="clear">
        <ul>
            <li>Rejected</li>
            <li>Pending</li>
            <li>Development</li>
            <li>Testing</li>
            <li>Production</li>
        </ul>
    </header>
    <section id="dashboard" class="dashboard clear">
        <div id="rejected" class="rejected"></div>
        <div id="pending" class="pending"></div>
        <div id="development" class="development"></div>
        <div id="testing" class="testing"></div>
        <div id="production" class="production"></div>
    </section>

<footer>
        <ul>
            <li class="branding">Scrum <span>Board</span> <sup>Beta</sup>
            </li>
        </ul>

<ul class="controls">
            <li>
                <a target="_blank" class="twitter-share-button" href="#">
Tweet</a>
            </li>
            <li>
                <a class="github-button" href="https://github.com/i-break-codes/scrum-board/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download i-break-codes/scrum-board on GitHub">Download</a>
            </li>
            <li data-tooltip="Drag A Task Here To Delete">
                <a href="#" class="remove" id="remove">
                    <img src="https://imgh.us/bin_1.svg" alt="">
                </a>
            </li>
            <li data-tooltip="Add Task">
                <a href="#" id="add-task" class="add-task">
                    <img src="https://imgh.us/plus_13.svg" alt="">
                </a>
            </li>
            <li data-tooltip="Github" class="github-ref">
                <a href="https://github.com/i-break-codes/scrum-board" target="_blank">
                    <img src="https://imgh.us/github_6.svg" alt="">
                </a>
            </li>
        </ul>
    </footer>
</div>

<div class="create-task-branding">
        Scrum <span>Board</span> <sup>Beta</sup>
    </div>
</div>

<div class="hide" id="tips">
    Double click on the task text to edit it
</div>

Scrum Board, JavaScript Task Manager App, 使用本地存储来保存当前任务队列和状态。

html5, template, board

编辑器支持Emmet

快捷键

Scrum Board, JavaScript Task Manager App, 使用本地存储来保存当前任务队列和状态。

html5, template, board

使用HTML5 Audio API（AudioContext）实现的DJ划拨碟片音效

使用BabylonJS（HTML5 WebGL）实现的刺客信条海盗网页游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：