基于React.js实现游戏风格的待办任务列表

很酷的一个界面设计，带有游戏音效（来自freesound.org）。鼠标悬停在任务标题上时，呈现很棒的雾化阴影。

react, todo, 界面组件

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError('Cannot call a class as a function');
    }
}

var todo = function todo(state, action) {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                id: action.id,
                text: action.text,
                completed: false
            };
        case 'TOGGLE_TODO':
            if (state.id !== action.id) {
                return state;
            }

return _extends({}, state, {
                completed: !state.completed
            });
        case 'EDIT_TODO':
            if (state.id !== action.id) {
                return state;
            }

return _extends({}, state, {
                text: action.text
            });
        default:
            return state;
    }
};

var todos = function todos(state, action) {
    if (state === undefined) state = [];

switch (action.type) {
        case 'ADD_TODO':
            return [].concat(state, [todo(undefined, action)]);
        case 'TOGGLE_TODO':
            return state.map(function(t) {
                return todo(t, action);
            });
        case 'EDIT_TODO':
            return state.map(function(t) {
                return todo(t, action);
            });
        default:
            return state;
    }
};

var visibilityFilter = function visibilityFilter(state, action) {
    if (state === undefined) state = 'SHOW_ALL';

switch (action.type) {
        case 'SET_VISIBILITY':
            return action.filter;
        default:
            return state;
    }
};

var _Redux = Redux;
var combineReducers = _Redux.combineReducers;
var createStore = _Redux.createStore;

var todoApp = combineReducers({
    todos: todos,
    visibilityFilter: visibilityFilter
});
var store = createStore(todoApp);

var _React = React;
var Component = _React.Component;

var nextTodoId = 0;

var TodoApp = (function(_Component) {
    _inherits(TodoApp, _Component);

function TodoApp() {
        _classCallCheck(this, TodoApp);

_Component.apply(this, arguments);
    }

TodoApp.prototype.render = function render() {
        var _this = this;

var _props$store$getState = this.props.store.getState();

var todos = _props$store$getState.todos;
        var visibilityFilter = _props$store$getState.visibilityFilter;

return React.createElement(
            'div', {
                className: 'container'
            },
            React.createElement(
                'section',
                null,
                React.createElement('input', {
                    placeholder: 'Add Task',
                    ref: function(node) {
                        _this.input = node;
                    }
                }),
                React.createElement(
                    'button', {
                        onClick: function() {
                            _this.props.store.dispatch({
                                type: 'ADD_TODO',
                                text: _this.input.value,
                                id: nextTodoId++
                            });
                            _this.input.value = '';
                            document.getElementById('saber-humm').play();
                        }
                    },
                    '⚡'
                ),
                React.createElement(
                    'ul',
                    null,
                    filteredTodos.map(function(todo) {
                        return React.createElement(
                            'li', {
                                key: todo.id,
                                onMouseOver: function() {
                                    document.getElementById(todo.completed ? 'saber-wave' : 'saber-on').play();
                                },
                                style: {
                                    textShadow: todo.completed ? 'none' : '0 0 10px rgb(255,255,255), 0 0 20px rgb(255,255,255), 0 0 30px rgb(255,255,255), 0 0 40px rgb(255,17,119), 0 0 70px rgb(255,17,119), 0 0 80px rgb(255,17,119), 0 0 100px rgb(255,17,119), 0 0 150px rgb(255,17,119)'
                                }
                            },
                            React.createElement(
                                'span', {
                                    style: {
                                        margin: '3px 20px 0 0'
                                    },
                                    onClick: function() {
                                        _this.props.store.dispatch({
                                            type: 'TOGGLE_TODO',
                                            id: todo.id
                                        });
                                        document.getElementById(todo.completed ? 'saber-humm' : 'saber-hit').play();
                                    }
                                },
                                todo.completed ? React.createElement(
                                    'span',
                                    null,
                                    '☠'
                                ) : React.createElement(
                                    'span',
                                    null,
                                    '☹'
                                )
                            ),
                            React.createElement(ContentEditable, {
                                html: todo.text,
                                editTodo: function(text) {
                                    _this.props.store.dispatch({
                                        type: 'EDIT_TODO',
                                        id: todo.id,
                                        text: text
                                    });
                                }
                            })
                        );
                    })
                )
            ),
            React.createElement(
                'footer',
                null,
                React.createElement(
                    'a', {
                        id: 'vis1',
                        href: '#',
                        onClick: function(e) {
                            return _this.setVisibility(e, 'SHOW_ALL');
                        }
                    },
                    'All'
                ),
                React.createElement(
                    'a', {
                        id: 'vis2',
                        href: '#',
                        onClick: function(e) {
                            return _this.setVisibility(e, 'SHOW_ACTIVE');
                        }
                    },
                    'Active'
                ),
                React.createElement(
                    'a', {
                        id: 'vis3',
                        href: '#',
                        onClick: function(e) {
                            return _this.setVisibility(e, 'SHOW_COMPLETED');
                        }
                    },
                    'Completed'
                )
            )
        );
    };

TodoApp.prototype.setVisibility = function setVisibility(e, filter) {
        this.props.store.dispatch({
            type: 'SET_VISIBILITY',
            filter: filter
        });

var links = document.querySelectorAll('a');

// for (let link of links) {
        //   link.style.border = 'none';
        // }
        for (var i = 0; i < links.length; i++) {
            links[i].classList.remove('selected');
        }

e.target.classList.add('selected');
    };

return TodoApp;
})(Component);

var ContentEditable = (function(_Component2) {
    _inherits(ContentEditable, _Component2);

function ContentEditable(props) {
        _classCallCheck(this, ContentEditable);

_Component2.call(this, props);
        this.state = {
            editing: false
        };
    }

ContentEditable.prototype.render = function render() {
        var _this2 = this;

return this.state.editing ? React.createElement('input', {
            className: 'editor',
            ref: 'todoText',
            onBlur: function(e) {
                return _this2.handleChange(e);
            },
            defaultValue: this.props.html
        }) : React.createElement(
            'span', {
                onDoubleClick: function(e) {
                    return _this2.handleDoubleClick();
                }
            },
            this.props.html
        );
    };

ContentEditable.prototype.handleDoubleClick = function handleDoubleClick() {
        this.setState({
            editing: true
        });
    };

ContentEditable.prototype.handleChange = function handleChange(e) {
        var text = this.refs.todoText.value;
        this.props.editTodo(text);
        this.setState({
            editing: false
        });
    };

return ContentEditable;
})(Component);

var render = function render() {
    ReactDOM.render(React.createElement(TodoApp, {
        store: store
    }), document.getElementById('root'));
};

store.subscribe(render);
render();

编译

CSS

html {
    height: 100%;
}
body {
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
    background-color: #282828;
    background-size: 16px 16px;
    text-align: center;
    padding: 0;
    margin: 0;
}
section {
    flex: 1 0 auto;
}
header,
footer {
    font: normal 30px "Monoton", Helvetica, sans-serif;
    color: #F1F1F1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 30px 0 20px 0;
}
footer {
    font: normal 12px "Monoton", Helvetica, sans-serif;
}
.container {
    height: 80vh;
    display: flex;
    flex-direction: column;
}
input,
button {
    font-size: 16px;
    background: #1A1A1A;
    height: 25px;
    width: 350px;
    border-radius: 12px;
    border: none;
    color: #A2A2A2;
    padding: 6px 6px 6px 12px;
    outline: none;
    box-shadow: 0 4px 6px -5px hsl(0, 0%, 40%), inset 0px 4px 6px -5px hsl(0, 0%, 2%);
}
button {
    height: 35px;
    width: 35px;
    padding: 3px 3px 3px 5px;
    margin-left: 5px;
    cursor: pointer;
}
.editor {
    font-size: 24px;
    background: none;
    border-radius: 0;
    width: 300px;
    border: solid #f0f0f0;
    border-width: 0 0 2px 0;
    color: #A2A2A2;
    padding: 0 6px 6px;
    outline: none;
    box-shadow: none;
}
ul {
    text-align: center;
    width: 60%;
    margin: 30px auto;
}
li {
    display: block;
    cursor: pointer;
    box-sizing: content-box;
    padding-top: 25px;
    border: none;
    font: normal 24px/1 "Monoton", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 1px;
    text-align: left;
    text-shadow: 0 0 5px rgb(255, 255, 255), 0 0 10px rgb(255, 255, 255), 0 0 15px rgb(255, 255, 255), 0 0 20px rgb(255, 17, 119), 0 0 35px rgb(255, 17, 119), 0 0 40px rgb(255, 17, 119), 0 0 50px rgb(255, 17, 119), 0 0 75px rgb(255, 17, 119);
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
li:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff !important;
}
a {
    color: #f0f0f0;
    background-color: #282828;
    border: solid 1px #f0f0f0;
    border-radius: 5px;
    text-decoration: none;
    padding: 3px 6px;
    margin: 6px;
}
.selected {
    color: #282828;
    background-color: #f0f0f0;
}

HTML

<body onload='document.getElementById("vader-bid").play();'>
    <header>Vader's &nbsp; Laters</header>

</body>

很酷的一个界面设计，带有游戏音效（来自freesound.org）。鼠标悬停在任务标题上时，呈现很棒的雾化阴影。

react, todo, 界面组件

编辑器支持Emmet

快捷键

很酷的一个界面设计，带有游戏音效（来自freesound.org）。鼠标悬停在任务标题上时，呈现很棒的雾化阴影。

react, todo, 界面组件

基于React.js实现的媒体播放器

使用React.js实现泡泡糖（软糖 | 口香糖）风格的社交按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：