To Do List | Programming Project | OrangeApple Learning Platform

{"id":26114,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\\n\u003chead\u003e\\n\\t\u003ctitle\u003eTo Do List\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=\\\"py-2 js-box\\\" id=\\\"todo\\\" data-status=\\\"todo\\\"\u003e\\n                        \u003c!-- 清單任務的區塊 --\u003e\\n                    \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=\\\"py-2 js-box\\\" id=\\\"doing\\\" data-status=\\\"doing\\\"\u003e\\n                        \u003c!-- 進行中任務的區塊 --\u003e                        \\n                    \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=\\\"py-2 js-box\\\" id=\\\"done\\\" data-status=\\\"done\\\"\u003e\\n                        \u003c!-- 已完成任務的區塊 --\u003e                                                \\n                    \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    \u003c!-- 創造任務、修改任務的表單 --\u003e\\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\":\"body {\\n    background-image: url(bg.jpg);\\n    background-position: center;\\n    background-size: cover;\\n    min-height: 100vh;\\n}\\n\\n.task {\\n    cursor: pointer;\\n    transition: transform .2s;\\n}\\n\\n.task:hover {\\n    transform: scale(1.05)\\n}\",\"js\":\"var todolist = DB.table('todolist'); // 資料庫\\nvar targetID; // 儲存正在被拖曳的任務的 ID\\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 name = $('#name').val();\\n    var date = $('#date').val();\\n    var data = { name: name, date: date, status: 'todo' };\\n    todolist.insert(data, update);\\n    $('#form').modal('hide');\\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// 當「刪除」按鈕點擊時\\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-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-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    console.log(targetID);\\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-clear').on('click', function () {\\n    todolist.remove({ status: 'done' }, update);\\n    $('.js-done p').remove();\\n});\\n\\n// 讀取資料庫的所有資料，並更新到三個區塊中\\nfunction update() {\\n    todolist.find({}, function (data) {\\n        $('.task').remove();\\n        for (var i = 0; i \u003c data.length; i++) {\\n            var html = `\\n                \u003cp class=\\\"task p-2 alert\\\" draggable=\\\"true\\\" id=\\\"${data[i]._id}\\\"\u003e\\n                    \u003cspan\u003e${data[i].name}\u003c/span\u003e\\n                    \u003cspan class=\\\"float-right\\\"\u003e${data[i].date}\u003c/span\u003e\\n                \u003c/p\u003e\\n            `;\\n            var el = $(html);\\n\\n            // 根據期限增加不同的樣式來改變顏色\\n            var time = new Date(data[i].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\\n            // 根據狀態新增到不同的區塊中\\n            if (data[i].status == 'todo') {\\n                $('#todo').prepend(el);\\n            }\\n            if (data[i].status == 'doing') {\\n                $('#doing').prepend(el);\\n            }\\n            if (data[i].status == 'done') {\\n                $('#done').prepend(el);\\n            }\\n            $(el).data('task', data[i]);\\n        }\\n    });\\n}\\n\\nupdate(); // 程式載入時初始化頁面\"}","created_at":"2018-04-13T13:55:37.880+08:00","updated_at":"2019-10-23T06:39:46.325+08:00","name":"To Do List","language":"web","screenshot":{"url":"/uploads/project/screenshot/26114/f9402f334f4deed6f32e125303fd6bc7.jpg"},"parent_id":null,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":499,"hashid":"5j3s3y8z","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}