使用jQuery实现一个超简洁待办事项小应用

Minimal Todo App

jquery, app

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    //Attaching DOM element to varibles
    var $tasksList = $("#tasksList");
    var $taskInput = $("#taskInput");
    var $notification = $("#notification");

//Counting amount of items in the list
    //To display or hide notification
    var displayNotification = function() {
        if (!$tasksList.children().length) {
            //$notification.css("display", "block");
            $notification.fadeIn("fast");
        } else {
            $notification.css("display", "none")
        }
    }

//Attaching event handler to add button
    $("#taskAdd").on("click", function() {

//Returning false if input is empty
        if (!$taskInput.val()) {
            return false;
        }

//Appending li with input value
        $tasksList.append("<li>" + $taskInput.val() + "<button class='delete'>&#10006</button></li>");

//Cleaning input after add
        $taskInput.val("");

//Display/Hide Notification
        displayNotification();

//Attaching even handler to delete button
        $(".delete").on("click", function() {

//Assigning "this" to varible, as it doesn't
            //work correctly with setTimeout() function
            var $parent = $(this).parent();

//Displaying CSS animation
            $parent.css("animation", "fadeOut .3s linear");

//Timeout on remove function
            setTimeout(function() {
                $parent.remove();
                displayNotification();
            }, 295);

})
    })
});

编译

CSS

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0ff;
    font-family: "Poppins", sans-serif;
}
#container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 500px;
    background-color: #fafafa;
    padding: 0px;
    box-shadow: 0 20px 30px 0 rgba(1, 1, 1, 0.07);
    margin: 6rem 0;
    border-radius: 0.75rem;
}
#footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem;
    -ms-flex-item-align: start;
    align-self: flex-start;
    text-transform: uppercase;
    box-shadow: 0 -10px 10px 0 rgba(1, 1, 1, 0.05);
}
#footer #taskAdd {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    width: 3rem;
    height: 3rem;
    background: #3b44fb;
    color: white;
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
    border-radius: 0.75rem;
    border: 0;
    outline: 0;
    will-change: transform;
}
#footer #taskAdd:hover {
    background: #050fe5;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
#footer #taskAdd:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
#footer input#taskInput {
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    background: transparent;
    width: calc(100% - 3rem - 5px);
    border: none;
}
#footer input#taskInput:focus {
    outline: 0;
    border-color: white;
    color: #0d0d0d;
}
#tasks {
    padding: 1.5rem 2rem;
}
#tasks #tasksList {
    list-style-type: none;
    padding-left: 0;
}
#tasks #tasksList li {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 20px 30px 0 rgba(1, 1, 1, 0.07);
    border-radius: 0.75rem;
    color: #0d0d0d;
    padding: 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .03rem;
    -webkit-animation: fadeIn .5s linear;
    animation: fadeIn .5s linear;
    background-color: #fff;
    margin-bottom: 5px;
    position: relative;
    border-right: 0px solid lightgray;
    letter-spacing: -.015rem;
    will-change: transform;
}
#tasks #tasksList li:hover {
    border-right: 55px solid red;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    z-index: 20;
    box-shadow: 0 20px 30px 0 rgba(1, 1, 1, 0.2);
}
#tasks #tasksList li:hover .delete {
    right: -37px;
    color: white;
}
#tasks #tasksList li .delete {
    -webkit-transition: all 0.30s ease-in-out;
    transition: all 0.30s ease-in-out;
    position: absolute;
    color: transparent;
    background: none;
    border: none;
    outline: 0;
    line-height: .85rem;
    font-size: 1rem;
}
#tasks #tasksList li .delete:hover {
    opacity: .75;
}
#tasks #notification {
    padding-top: 1rem;
    text-align: center;
    color: gray;
    font-weight: 500;
    font-size: 1.25rem;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        margin-top: -50px;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        margin-top: -50px;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
        margin-top: 0px;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        margin-top: -50px;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
        margin-top: 0px;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        margin-top: -50px;
    }
}

HTML

Minimal Todo App

jquery, app

编辑器支持Emmet

快捷键

Minimal Todo App

jquery, app

使用jQuery和CSS3实现的超简单闪烁星空（繁星点点）动画背景

使用React加Redux实现的待办事项（任务管理）小应用

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：