To Do List | Programming Project | OrangeApple Learning Platform

{"id":65028,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003clink rel=\\\"stylesheet\\\" href=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\\\" integrity=\\\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm\\\"\\n\\t crossorigin=\\\"anonymous\\\"\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.2.1.slim.min.js\\\" integrity=\\\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN\\\"\\n\\t crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\\t\u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js\\\" integrity=\\\"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q\\\"\\n\\t crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\\t\u003cscript src=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\\\" integrity=\\\"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\\\"\\n\\t crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\\n\u003cbody\u003e\\n\\t\u003cdiv class=\\\"container py-5\\\"\u003e\\n\\t\\t\u003cdiv class=\\\"row\\\"\u003e\\n\\t\\t\\t\u003cdiv class=\\\"col-md-4\\\"\u003e\\n\\t\\t\\t\\t\u003cdiv class=\\\"rounded bg-dark p-3 my-2\\\"\u003e\\n\\t\\t\\t\\t\\t\u003cp class=\\\"text-white text-center\\\"\u003e任務列表\u003c/p\u003e\u003chr\u003e\\n\\t\\t\\t\\t\\t\u003cdiv class=\\\"js-box\\\" id=\\\"todo\\\" data-status=\\\"todo\\\"\u003e\u003c/div\u003e\\n                    \u003cbutton class=\\\"btn btn-block btn-primary js-add\\\"\u003e新增\u003c/button\u003e\\n\\t\\t\\t\\t\u003c/div\u003e\\n\\t\\t\\t\u003c/div\u003e\\n\\t\\t\\t\u003cdiv class=\\\"col-md-4\\\"\u003e\\n\\t\\t\\t\\t\u003cdiv class=\\\"rounded bg-dark p-3 my-2\\\"\u003e\\n\\t\\t\\t\\t\\t\u003cp class=\\\"text-white text-center\\\"\u003e進行中\u003c/p\u003e\u003chr\u003e\\n\\t\\t\\t\\t\\t\u003cdiv class=\\\"js-box\\\" id=\\\"doing\\\" data-status=\\\"doing\\\"\u003e\u003c/div\u003e\\n\\t\\t\\t\\t\u003c/div\u003e\\n\\t\\t\\t\u003c/div\u003e\\n\\t\\t\\t\u003cdiv class=\\\"col-md-4\\\"\u003e\\n\\t\\t\\t\\t\u003cdiv class=\\\"rounded bg-dark p-3 my-2\\\"\u003e\\n\\t\\t\\t\\t\\t\u003cp class=\\\"text-white text-center\\\"\u003e已完成\u003c/p\u003e\u003chr\u003e\\n\\t\\t\\t\\t\\t\u003cdiv class=\\\"js-box\\\" id=\\\"done\\\" data-status=\\\"done\\\"\u003e\u003c/div\u003e\\n                    \u003cbutton class=\\\"btn btn-block btn-danger js-clear\\\"\u003e清除\u003c/button\u003e\\n\\t\\t\\t\\t\u003c/div\u003e\\n\\t\\t\\t\u003c/div\u003e\\n\\t\\t\u003c/div\u003e\\n\\t\u003c/div\u003e\\n\\n\\t\u003cdiv class=\\\"modal fade\\\" id=\\\"form\\\"\u003e\\n\\t\\t\u003cdiv class=\\\"modal-dialog\\\"\u003e\\n\\t\\t\\t\u003cdiv class=\\\"modal-content\\\"\u003e\\n\\t\\t\\t\\t\u003cdiv class=\\\"modal-header\\\"\u003e\\n\\t\\t\\t\\t\\t\u003ch5 class=\\\"modal-title\\\"\u003e任務\u003c/h5\u003e\\n\\t\\t\\t\\t\u003c/div\u003e\\n\\t\\t\\t\\t\u003cdiv class=\\\"modal-body\\\"\u003e\\n\\t\\t\\t\\t\\t\u003cform\u003e\\n\\t\\t\\t\\t\\t\\t\u003cdiv class=\\\"form-group\\\"\u003e\\n\\t\\t\\t\\t\\t\\t\\t\u003clabel\u003e事項名稱:\u003c/label\u003e\\n\\t\\t\\t\\t\\t\\t\\t\u003cinput type=\\\"text\\\" class=\\\"form-control\\\" id=\\\"name\\\"\u003e\\n\\t\\t\\t\\t\\t\\t\u003c/div\u003e\\n\\t\\t\\t\\t\\t\\t\u003cdiv class=\\\"form-group\\\"\u003e\\n\\t\\t\\t\\t\\t\\t\\t\u003clabel\u003e期限:\u003c/label\u003e\\n\\t\\t\\t\\t\\t\\t\\t\u003cinput type=\\\"date\\\" class=\\\"form-control\\\" id=\\\"date\\\"\u003e\\n\\t\\t\\t\\t\\t\\t\u003c/div\u003e\\n                        \u003cinput type=\\\"text\\\" id=\\\"id\\\" style=\\\"display: none;\\\"\u003e\\n\\t\\t\\t\\t\\t\u003c/form\u003e\\n\\t\\t\\t\\t\u003c/div\u003e\\n\\t\\t\\t\\t\u003cdiv class=\\\"modal-footer\\\"\u003e\\n\\t\\t\\t\\t\\t\u003cbutton class=\\\"btn btn-primary js-create\\\"\u003e送出\u003c/button\u003e\\n\\t\\t\\t\\t\\t\u003cbutton class=\\\"btn btn-warning js-update\\\"\u003e更新\u003c/button\u003e\\n                    \u003cbutton class=\\\"btn btn-danger  js-delete\\\"\u003e刪除\u003c/button\u003e\\n\\t\\t\\t\\t\u003c/div\u003e\\n\\t\\t\\t\u003c/div\u003e\\n\\t\\t\u003c/div\u003e\\n\\t\u003c/div\u003e\\n\u003c/body\u003e\\n\\n\u003c/html\u003e\",\"css\":\".alert {\\n    cursor: pointer;\\n    transition: transform .2s;\\n}\\n\\n.js-box {\\n    min-height: 30px;\\n}\\n\\n.alert:hover {\\n    transform: scale(1.05)\\n}\\n\\nbody {\\n    background-image: url(bg.jpg);\\n    background-position: center;\\n    background-size: cover;\\n    min-height: 50vh;\\n}\",\"js\":\"var todolist = DB.table('todolist'); // 資料庫\\nvar targetID; // 儲存正在被拖曳的任務的 ID\\n\\n// 當「任務卡片」被拖曳到可放置的區塊中\\n$('.js-box').on('dragover', function (ev) {\\n    ev.originalEvent.preventDefault();\\n});\\n\\n// 當「任務卡片」開始被拖曳時\\n$('.js-box').on('dragstart', '.alert', function (ev) {\\n    targetID = ev.originalEvent.target.id;\\n});\\n\\n// 當「任務卡片」被放下來時\\n$('.js-box').on('drop', function (ev) {\\n    $(this).prepend($('#' + targetID));\\n    var status = $(this).attr('data-status');\\n    todolist.update({ _id: targetID }, { status: status });\\n});\\n\\n// 當「新增」按鈕點擊時\\n$('.js-add').click(function () {\\n    $('#form').modal('show');\\n    $('#form input').val('');\\n    $('.js-create').show();\\n    $('.js-update').hide();\\n    $('.js-delete').hide();\\n});\\n\\n// 當「送出」按鈕點擊時\\n$('.js-create').click(function () {\\n    var task = $('#name').val();\\n    var date = $('#date').val();\\n    var data = { name: task, date: date, status: 'todo' };\\n    todolist.insert(data, update);\\n    $('#form').modal('hide');\\n});\\n\\n// 當「更新」按鈕點擊時\\n$('.js-update').click(function () {\\n    var id = $('#id').val();\\n    var name = $('#name').val();\\n    var date = $('#date').val();\\n    var data = { name: name, date: date };\\n    todolist.update({ _id: id }, data, update);\\n    $('#form').modal('hide');\\n});\\n\\n// 當「刪除」按鈕點擊時\\n$('.js-delete').click(function () {\\n    var id = $('#id').val();\\n    todolist.remove({ _id: id }, update);\\n    $('#form').modal('hide');\\n});\\n\\n// 當「清除」按鈕點擊時\\n$('.js-clear').on('click', function () {\\n    todolist.remove({ status: 'done' }, update);\\n    $('.js-done p').remove();\\n});\\n\\n// 當「任務卡片」被點擊時\\n$('.js-box').on('click', '.alert', function () {\\n    $('#form').modal('show');\\n    $('.js-create').hide();\\n    $('.js-update').show();\\n    $('.js-delete').show();\\n    $('#name').val($(this).data('task').name);\\n    $('#date').val($(this).data('task').date);\\n    $('#id').val($(this).data('task')._id);\\n});\\n\\n// 讀取資料庫的所有資料，並更新到三個區塊中\\nfunction update() {\\n    todolist.find({}, function (d) {\\n        $('.js-box p').remove();\\n        for (var i = 0; i \u003c d.length; i++) {\\n            if (d[i].status == 'todo') {\\n                addTask('#todo', d[i]);\\n            }\\n            if (d[i].status == 'doing') {\\n                addTask('#doing', d[i]);\\n            }\\n            if (d[i].status == 'done') {\\n                addTask('#done', d[i]);\\n            }\\n        }\\n    });\\n}\\n\\n// 新增資料到指定的區塊內\\nfunction addTask(box, task) {\\n    var el = $(\\n        `\u003cp class=\\\"p-2 alert\\\" draggable=\\\"true\\\" id=\\\"${task._id}\\\"\u003e\\n            \u003cspan\u003e${task.name}\u003c/span\u003e\\n            \u003cspan class=\\\"float-right\\\"\u003e${task.date}\u003c/span\u003e\\n        \u003c/p\u003e`);\\n    var time = new Date(task.date) - new Date;\\n    if (time \u003c 0) {\\n        el.addClass('alert-danger');\\n    } else if (time \u003c 1000 * 60 * 60 * 24) {\\n        el.addClass('alert-warning');\\n    } else {\\n        el.addClass('alert-light');\\n    }\\n    $(el).data('task', task);\\n    $(box).prepend(el);\\n}\\n\\nupdate(); // 初始化頁面\"}","created_at":"2019-05-02T14:06:06.650+08:00","updated_at":"2019-10-14T15:18:08.343+08:00","name":"To Do List","language":"web","screenshot":{"url":"/uploads/project/screenshot/65028/d3158dabc471f97e983858d73855abb0.jpg"},"parent_id":3,"plugin":null,"description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":477,"hashid":"rdvsmpnr","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}