使用jQuery构建的待办事项列表移动应用页面模板

To Do list build with jQuery

jquery, template

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    var check_count = 0;
    var total = 0;
    var timeout;

// Get the total number of "li's" and checked "li's"
    $('li').each(function(e) {
        total++;
        $('#count').text(total);
        var findTheMarkedList = $(this);

if (findTheMarkedList.find('i').hasClass('fa fa-check-circle mark')) {
            let checkIfmarked = $('li .check_button').index(this);
            $('li .right').eq(checkIfmarked).find('p').addClass('line-through').attr("contentEditable", false);
            check_count++;
            $('#count_done').text(check_count);
        }
        $('#remaining_done').text(total - check_count);
    });
    // Click on button function add new item to list
    $('.bottom a').click(function(e) {
        e.preventDefault();
        var li = "";

li += "<li class='slide'>";
        li += " <a href='' class='check_button' onmousedown='return false'>";
        li += "   <i class='fa fa-circle-thin' aria-hidden='true'></i>";
        li += " </a>";
        li += " <div class='right'>";
        li += "    <p contenteditable='true'><strong></strong></p>";
        li += " </div>";
        li += " <span class='delete_button' onmousedown='return false'>";
        li += "   <i class='fa fa-minus' aria-hidden='true'></i>";
        li += " </span>";
        li += "</li>";

$('ul').append(li).find('.slide:last-child').addClass('down');

total += 1;
        $('#count').text(total);
        $('#remaining_done').text(total - check_count);
        $('li:last-child p').text('Task ' + total);
    });
    // Click on button function list
    $('.app ul').on('click', 'li .check_button', function(e) {
        e.preventDefault();
        let button = $(this).find('i');
        let checked = 'fa fa-check-circle mark';
        let unchecked = 'fa fa-circle-thin';

// Save the current index of button after the click event in the "left" div.
        let index_click = $('li .check_button').index(this);
        // Use the current index of button to target the correct "li p" in the "right" div.
        let linethrough_text = $('li .right').eq(index_click).find('p');

if (button.hasClass(unchecked)) {
            linethrough_text.addClass('line-through').attr("contentEditable", false);
            button.removeClass(unchecked + ' mark-alt').addClass(checked);
            check_count += 1;
        } else {
            linethrough_text.removeClass('line-through').attr('contentEditable', true);
            button.removeClass(checked).addClass(unchecked + ' mark-alt');
            check_count -= 1;
        }

$('#count_done').text(check_count);
        $('#remaining_done').text(total - check_count);
    });
    // Click on button function and delete 'li'
    $('.app ul').on('click', 'li .delete_button', function(e) {
        e.preventDefault();
        let index_click = $('li .delete_button').index(this);
        let current = $('li').eq(index_click);
        let button = $('ul li .check_button').find('i');

total -= 1;
        $('#count').text(total);

if (button.eq(index_click).hasClass('mark')) {
            check_count -= 1;
            $('#count_done').text(check_count);
        }
        current.addClass('up');
        setTimeout(function() {
            current.remove();
        }, 600);
        $('#remaining_done').text(total - check_count);
    });

var suffix = "";
    var date = new Date();
    var dayOfMonth = date.getDate();
    var dayOfWeek = date.getDay();
    var Month = date.getMonth();

var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var monthArray = ["January", "February", "March", "April,", "May", "June", "July", "August", "September", "October", "November", "December"];
    switch (dayOfMonth) {
        case (dayOfMonth == 1 || dayOfMonth == 21 || dayOfMonth == 31):
            suffix = 'st';
            break;
        case (dayOfMonth == 2 || dayOfMonth == 22):
            suffix = 'nd';
            break;
        case (dayOfMonth == 3 || dayOfMonth == 23):
            suffix = 'rd';
            break;
        default:
            suffix = 'th';
    }
    $('.app .info .date').append("<p id='day'><strong>" + dayArray[dayOfWeek] + ",</strong> " + dayOfMonth + suffix + "</p>" +
        "<p id='month'>" + monthArray[Month] + "</p>");

});

// TODO: 1. count the total number of task when the page in loaded - DONE
//       1.2 If it's marked as done and dont have line-through then add it DONE
//       3. If we remove a check item > check--; DONE

// Maybe: 1. Make a function to update the task/done count text.
//        2. Make a function for date.

编译

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: #d2e3ed;
}
.wrapper {
    width: 100%;
    min-height: 100%;
    /* To-Do List App */
    /* End To-Do List App */
}
.wrapper .align {
    margin: 0 auto;
    padding: 100px 0 100px 0;
    width: 100%;
    height: 100%;
}
.wrapper .app {
    width: 360px;
    min-height: 200px;
    margin: 0 auto;
    border-radius: 4px;
    background: #fff;
    font-family: 'Noto Sans', sans-serif;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.07);
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.wrapper .app .info {
    position: relative;
    height: 140px;
    width: auto;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: linear-gradient(135deg, rgba(158, 15, 184, 0.75) -10%, rgba(5, 232, 255, 0.9) 135%), url('https://static.vecteezy.com/system/resources/previews/000/101/253/non_2x/free-abstract-background-1-vector.jpg');
    background-size: cover;
}
.wrapper .app .info .date {
    position: relative;
    width: 100%;
    padding: 11px 0 5px 0;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}
.wrapper .app .info .date p#day,
.wrapper .app .info .date p#month {
    text-align: center;
    font-size: 26px;
    color: #fff;
}
.wrapper .app .info .date p#month {
    font-size: 14px;
}
.wrapper .app .info .info-bottom {
    height: 50px;
    width: 85%;
    position: relative;
    margin: 10px auto 0 auto;
}
.wrapper .app .info .info-bottom .left {
    float: left;
}
.wrapper .app .info .info-bottom .right {
    float: right;
}
.wrapper .app .info .info-bottom .middle {
    width: 140px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.wrapper .app .info .info-bottom #count,
.wrapper .app .info .info-bottom #tasks,
.wrapper .app .info .info-bottom #count_done,
.wrapper .app .info .info-bottom #tasks_done,
.wrapper .app .info .info-bottom #remaining_done,
.wrapper .app .info .info-bottom #remaining_tasks {
    margin-top: 11px;
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}
.wrapper .app .info .info-bottom #tasks,
.wrapper .app .info .info-bottom #tasks_done,
.wrapper .app .info .info-bottom #remaining_tasks {
    font-weight: normal;
    font-size: 14px;
    margin-top: -5px;
}
.wrapper .app ul {
    height: 100%;
    margin: 10px auto 10px auto;
}
.wrapper .app ul #today {
    width: 100%;
    height: 36px;
    text-align: center;
    color: #636363;
    line-height: 36px;
    margin: 10px auto;
}
.wrapper .app ul li {
    position: relative;
    display: flex;
    list-style: none;
    margin: 10px auto;
    width: 90%;
    min-height: 35px;
    border-bottom: solid 1px #f1f1f1;
    color: #636363;
    -webkit-transition: all ease-in-out 0.25s;
    -moz-transition: all ease-in-out 0.25s;
    -o-transition: all ease-in-out 0.25s;
    transition: all ease-in-out 0.25s;
}
.wrapper .app ul li a {
    width: 35px;
    height: 30px;
    margin-top: -3px;
    display: inline-block;
    color: #636363;
    text-decoration: none;
    line-height: 31px;
}
.wrapper .app ul li a i {
    -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
    transition: all ease-in-out 0.5s;
    margin-left: 7px;
    margin-top: -1px;
    font-size: 20px;
    font-weight: bold;
}
.wrapper .app ul li a i.mark {
    color: #744bc0;
}
.wrapper .app ul li a i.mark-alt {
    color: #636363;
}
.wrapper .app ul li a:hover > i {
    color: #744bc0;
}
.wrapper .app ul li .right {
    width: 80%;
    height: 100%;
    display: inline-block;
    margin: -3px auto 0 auto;
}
.wrapper .app ul li .right p {
    width: 90%;
    height: 28px;
    display: inline-block;
    word-wrap: break-word;
    line-height: 28px;
    outline: none;
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    -webkit-transition: all ease-in-out 0.25s;
    -moz-transition: all ease-in-out 0.25s;
    -o-transition: all ease-in-out 0.25s;
    transition: all ease-in-out 0.25s;
}
.wrapper .app ul li .right p span {
    cursor: text;
}
.wrapper .app ul li .right p.line-through {
    color: #b3b3b3;
    text-decoration: line-through;
    font-style: italic;
    margin-left: 7px;
}
.wrapper .app ul li span {
    display: inline-block;
    width: 35px;
    height: 30px;
    line-height: 31px;
    cursor: pointer;
    margin-top: -3px;
}
.wrapper .app ul li span i {
    -webkit-transition: all ease-in-out 0.25s;
    -moz-transition: all ease-in-out 0.25s;
    -o-transition: all ease-in-out 0.25s;
    transition: all ease-in-out 0.25s;
    font-size: 20px;
    margin-left: 7px;
    margin-top: -1px;
}
.wrapper .app ul li span:hover > i {
    color: #24b5e2;
}
.wrapper .app ul li:last-child {
    border-bottom: solid 1px transparent;
}
.wrapper .app .bottom {
    height: 50px;
    width: auto;
    padding-bottom: 20px;
    padding-top: 1px;
}
.wrapper .app .bottom a {
    width: 150px;
    height: 40px;
    line-height: 40px;
    display: block;
    margin: 5px auto;
    font-size: 14px;
    background: linear-gradient(135deg, rgba(158, 15, 184, 0.9) -20%, rgba(5, 232, 255, 0.9) 125%);
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
}
.wrapper .app .bottom a i {
    margin-right: 5px;
}
.wrapper .app .bottom a:hover {
    background: linear-gradient(135deg, rgba(158, 15, 184, 0.8) -20%, rgba(5, 232, 255, 0.8) 125%);
}
.down {
    -webkit-animation: slide_down .4s;
    -moz-animation: slide_down .4s;
    -o-animation: slide_down .4s;
    animation: slide_down .4s;
}
@keyframes slide_down {
    0% {
        opacity: 0;
        transform: translate(0, 0);
        margin-top: -41px;
        transform: scale(0);
    }
    20% {
        opacity: 0;
    }
    80% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
        margin-top: 10px;
        transform: scale(1);
    }
}
.up {
    -webkit-animation: slide_up .6s;
    -moz-animation: slide_up .6s;
    -o-animation: slide_up .6s;
    animation: slide_up .6s;
}
@keyframes slide_up {
    0% {
        opacity: 1;
        transform: translate(0, 0);
        margin-top: 10px;
        transform: scale(1);
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: translate(0, 0);
        margin-top: -45px;
        transform: scale(0);
    }
}

HTML

<div class="app">

<div class="info">
                <div class="date">
                    
                </div>
                <div class="info-bottom">
                    <div class="left">
                        <p id="count">0</p>
                        <p id="tasks">Total</p>
                    </div>
                    <div class="middle">
                        <p id="remaining_done">0</p>
                        <p id="remaining_tasks">Remaining</p>
                    </div>
                    <div class="right">
                        <p id="count_done">0</p>
                        <p id="tasks_done">Done</p>
                    </div>
                </div>
            </div>

<ul>
                <p id="today"><strong>Tasks</strong> for today</p>
                <li>
                    <a rel="nofollow" rel="noreferrer" href="" class="check_button" onmousedown="return false">
                        <i class="fa fa-circle-thin" aria-hidden="true"></i>
                    </a>
                    <div class="right">
                        <p contenteditable="true">Buy milk</p>
                    </div>
                    <span class="delete_button" onmousedown='return false'>
          <i class="fa fa-minus" aria-hidden="true"></i>
        </span>
                </li>

<li>
                    <a rel="nofollow" rel="noreferrer" href="" class="check_button" onmousedown="return false">
                        <i class="fa fa-circle-thin" aria-hidden="true"></i>
                    </a>
                    <div class="right">
                        <p contenteditable="true">Buy bread</p>
                    </div>
                    <span class="delete_button" onmousedown='return false'>
          <i class="fa fa-minus" aria-hidden="true"></i>
        </span>
                </li>

<li>
                    <a rel="nofollow" rel="noreferrer" href="" class="check_button" onmousedown="return false">
                        <i class="fa fa-circle-thin" aria-hidden="true"></i>
                    </a>
                    <div class="right">
                        <p contenteditable="true">Pay the bills</p>
                    </div>
                    <span class="delete_button" onmousedown='return false'>
          <i class="fa fa-minus" aria-hidden="true"></i>
        </span>
                </li>

<li>
                    <a rel="nofollow" rel="noreferrer" href="" class="check_button" onmousedown="return false">
                        <i class="fa fa-circle-thin" aria-hidden="true"></i>
                    </a>
                    <div class="right">
                        <p contenteditable="true">Go to barber shop</p>
                    </div>
                    <span class="delete_button" onmousedown='return false'>
          <i class="fa fa-minus" aria-hidden="true"></i>
        </span>
                </li>

<li>
                    <a rel="nofollow" rel="noreferrer" href="" class="check_button" onmousedown="return false">
                        <i class="fa fa-circle-thin" aria-hidden="true"></i>
                    </a>
                    <div class="right">
                        <p contenteditable="true">Take a break</p>
                    </div>
                    <span class="delete_button" onmousedown='return false'>
          <i class="fa fa-minus" aria-hidden="true"></i>
        </span>
                </li>

</ul>

</div>

</div>
</div>

To Do list build with jQuery

jquery, template

编辑器支持Emmet

快捷键

To Do list build with jQuery

jquery, template

jQuery平面化设计的待办事项列表应用模板

使用jQuery Swiper插件实现的移动应用模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：