To Do List | Programming Project | OrangeApple Learning Platform

{"id":52680,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"container\\\"\u003e\\n        \u003ch1\u003eTO DO LIST\u003c/h1\u003e\\n        \u003cdiv class=\\\"task\\\"\u003e\\n            \u003cinput id=\\\"text\\\" class=\\\"text\\\"/\u003e\\n            \u003cinput id=\\\"date\\\" class=\\\"date\\\" type=\\\"date\\\"/\u003e\\n            \u003cbutton id=\\\"createBtn\\\" class=\\\"createBtn\\\"\u003e+\u003c/button\u003e\\n        \u003c/div\u003e\\n        \u003c!-- @育瑋、@Euni\\n            學生預設程式為什麼要三個範例咧？\\n            1. 讓學生在設計樣式章節時可以直接套上三種顏色來測試\\n            2. 統一規範 class 名稱\\n            3. JS 新增事項部分可以複製貼上再修改，以防手打容易出錯\\n            4. 可以用來對照解釋刪除按鈕「動態事件」綁定的現象（JS 新增的事項沒有反應）\\n            5. 第二週最後完成後可以移除預設的範例\\n        --\u003e\\n        \u003cdiv class=\\\"task\\\"\u003e\\n            \u003cp class=\\\"text\\\"\u003e範例1 - 寫回家作業\u003c/p\u003e\\n            \u003cp class=\\\"date\\\"\u003e2019-01-01\u003c/p\u003e\\n            \u003cbutton class=\\\"deleteBtn\\\"\u003e-\u003c/button\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"task\\\"\u003e\\n            \u003cp class=\\\"text\\\"\u003e範例2 - 買文具用品\u003c/p\u003e\\n            \u003cp class=\\\"date\\\"\u003e2019-01-01\u003c/p\u003e\\n            \u003cbutton class=\\\"deleteBtn\\\"\u003e-\u003c/button\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"task\\\"\u003e\\n            \u003cp class=\\\"text\\\"\u003e範例3 - 幫媽媽倒垃圾\u003c/p\u003e\\n            \u003cp class=\\\"date\\\"\u003e2019-01-01\u003c/p\u003e\\n            \u003cbutton class=\\\"deleteBtn\\\"\u003e-\u003c/button\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    /* 帶學生去 google color picker 調色盤上挑顏色挺不錯哦 */\\n    background: linear-gradient(-150deg, #4ad8c3, #83a2f1);\\n    min-height: 100vh;\\n}\\n\\n.container {\\n    width: 300px;\\n    margin: auto;\\n}\\n\\nh1 {\\n    text-align: center;\\n    color: #fff;\\n}\\n\\n.task {\\n    width: 100%;\\n    padding: 10px;\\n    margin: 5px;\\n    box-sizing: border-box; /*這個hen重要！這樣設定使 width:100% 是包含 padding 寬*/\\n    background-color: #fff;\\n    border-radius: 2px;\\n    position: relative; /*這個hen重要！因為按鈕是用 absolute 定位所以爸爸要 relative 哦*/\\n}\\n\\ninput {\\n    border-width: 0;\\n    outline: none; /*關掉該死又很醜的focus框*/\\n    width: 100%;\\n}\\n\\n.text {\\n    margin: 0;\\n    padding: 0;\\n    font-size: 20px;\\n}\\n\\n.date {\\n    margin: 0;\\n    padding: 0;\\n    font-size: 10px;\\n}\\n\\nbutton {\\n    position: absolute; /*magic*/\\n    top: 5px;\\n    right: -15px;\\n    width: 30px;\\n    height: 30px;\\n    font-weight: bold;\\n    border-radius: 15px; /*or 50% 也是可以啦*/\\n    border-width: 0;\\n    outline: none; /*關掉該死又很醜的focus框*/\\n}\\n\\n.createBtn {\\n    color: #fff;\\n    background-color: #0072ff;\\n}\\n\\n.deleteBtn {\\n    color: #fff;\\n    background-color: #ff0055;\\n}\\n\\n.green {\\n    border-left: 3px solid green;\\n    color: green;\\n}\\n.orange {\\n    border-left: 3px solid orange;\\n    color: orange;\\n}\\n.red {\\n    border-left: 3px solid red;\\n    color: red;\\n}\\n\",\"js\":\"// 初始化資料庫 \u0026 畫面\\nvar tasks = DB.table('task');\\n\\n// 按下 + 按鈕時新增 Task\\n$('#createBtn').click(createTask);\\n\\n// 按下 - 按鈕時刪除 Task\\n$('.container').on('click', '.deleteBtn', deleteTask);\\n\\n// 查詢資料庫資料並初始化畫面\\ntasks.find({}, function (data) {\\n    data.sort(function (a, b) {\\n        var a = new Date(a.date);\\n        var b = new Date(b.date);\\n        return a - b\\n    });\\n    data.forEach(function (d) {\\n       renderTask(d.text, d.date, d.id); \\n    });\\n});\\n\\n\\nfunction createTask () {\\n    var text = $('#text').val();\\n    var date = $('#date').val();\\n    if (text != '' \u0026\u0026 date != '') {\\n        $('#text').val('');\\n        $('#date').val('');\\n        tasks.insert({\\n            text: text,\\n            date: date\\n        }, function (data) {\\n            renderTask(data.text, data.date, data.id);\\n        });\\n        // renderTask(text, date, undefined);\\n    }\\n}\\n\\nfunction deleteTask () {\\n    $(this).parent().fadeOut();\\n    var id = $(this).data('id');\\n    tasks.remove({id: id});\\n}\\n\\nfunction renderTask(text, date, id) {\\n    var now = (new Date()).toISOString().slice(0, 10);\\n    var color = 'green';\\n    var color;\\n    if (date == now) color = 'orange';\\n    if (date \u003c now) color = 'red';\\n    var html = `\\n        \u003cdiv class=\\\"ttask task ${color}\\\" style=\\\"display: none;\\\"\u003e\\n            \u003cp class=\\\"text\\\"\u003e${text}\u003c/p\u003e\\n            \u003cp class=\\\"date\\\"\u003e${date}\u003c/p\u003e\\n            \u003cbutton class=\\\"deleteBtn\\\" data-id=\\\"${id}\\\"\u003e-\u003c/button\u003e\\n        \u003c/div\u003e\\n    `\\n    var el = $(html);\\n    el.fadeIn();\\n    $('.container').append(el);\\n}\"}","created_at":"2018-12-16T14:37:42.673+08:00","updated_at":"2019-11-07T05:33:24.884+08:00","name":"To Do List","language":"web","screenshot":{"url":"/uploads/project/screenshot/52680/2f2c8e52329e93cb2c72a47693e3e17e.jpg"},"parent_id":52585,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":518,"hashid":"ej9s5vqg","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}