記帳 v2 | Programming Project | OrangeApple Learning Platform

{"id":66538,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.2.1.slim.min.js\\\"\u003e\u003c/script\u003e\\n\\t\u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003ch1 id=\\\"\\\"\u003e新增\u003c/h1\u003e\\n    種類\\n    \u003cselect id=\\\"type\\\"\u003e\\n        \u003coption value=\\\"交通\\\"\u003e交通\u003c/option\u003e\\n        \u003coption value=\\\"食物\\\"\u003e食物\u003c/option\u003e\\n        \u003coption value=\\\"娛樂\\\"\u003e娛樂\u003c/option\u003e\\n    \u003c/select\u003e\\n    \u003cbr /\u003e\\n    名稱\\n    \u003cinput type=\\\"text\\\" id=\\\"name\\\"\u003e\\n    \u003cbr /\u003e\\n    價格\\n    \u003cinput type=\\\"number\\\" id=\\\"price\\\"\u003e\\n    \u003cbr /\u003e\\n    時間\\n    \u003cinput type=\\\"date\\\" id=\\\"date\\\"\u003e\\n    \u003cbr /\u003e\\n    \u003cbutton id=\\\"add\\\"\u003e新增\u003c/button\u003e\\n    \u003ch1 id=\\\"\\\"\u003e查詢\u003c/h1\u003e\\n    \u003cselect id=\\\"query-type\\\"\u003e\\n        \u003coption value=\\\"\\\"\u003e\u003c/option\u003e\\n        \u003coption value=\\\"交通\\\"\u003e交通\u003c/option\u003e\\n        \u003coption value=\\\"食物\\\"\u003e食物\u003c/option\u003e\\n        \u003coption value=\\\"娛樂\\\"\u003e娛樂\u003c/option\u003e\\n    \u003c/select\u003e\\n    \u003cbr /\u003e\\n    開始時間\\n    \u003cinput type=\\\"date\\\" id=\\\"startTime\\\"\u003e\\n    \u003cbr /\u003e\\n    結束時間\\n    \u003cinput type=\\\"date\\\" id=\\\"endTime\\\"\u003e\\n    \u003cbr /\u003e\\n    \u003cbutton id=\\\"query\\\"\u003e查詢\u003c/button\u003e\\n    \u003ctable\u003e\\n        \u003ctr\u003e\\n            \u003cth\u003e種類\u003c/th\u003e\\n            \u003cth\u003e名稱\u003c/th\u003e\\n            \u003cth\u003e價格\u003c/th\u003e\\n            \u003cth\u003e時間\u003c/th\u003e\\n        \u003c/tr\u003e\\n    \u003c/table\u003e\\n    \u003ccanvas id=\\\"canvasA\\\" width=\\\"300\\\" height=\\\"300\\\"\u003e\u003c/canvas\u003e\\n    \u003cp id=\\\"total\\\"\u003e\u003c/p\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"table, tr, td, th {\\n    border: 1px solid #ccc;\\n    padding: 5px 10px;\\n    border-collapse: collapse;\\n}\\n\\ncanvas {\\n    width: 300px !important;\\n    height: 300px !important;\\n}\\n\\nbody {\\n    text-align: center;\\n}\",\"js\":\"var account = DB.table('account');\\n\\n$('#add').click(function () {\\n    var type = $('#type').val();\\n    var name = $('#name').val();\\n    var price = $('#price').val();\\n    var date = $('#date').val();\\n    \\n    if (type != '' \u0026\u0026 name != '' \u0026\u0026 price != '' \u0026\u0026 date != '') {\\n        addRecord(type, name, price, date);\\n        account.insert({type, name, price, date});\\n        $('input, select').val('')\\n    }\\n});\\n\\n$('#query').click(function () {\\n    var type = $('#query-type').val();\\n    var startTime = $('#startTime').val();\\n    var endTime = $('#endTime').val();\\n    \\n    account.find({\\n        type: type,\\n        date: {\\n            $gt: startTime,\\n\\t\\t    $lt: endTime\\n        }\\n    }, updateTable);\\n});\\n\\nfunction addRecord (type, name, price, date) {\\n    var html = `\\n    \u003ctr\u003e\\n        \u003ctd\u003e${type}\u003c/td\u003e\\n        \u003ctd\u003e${name}\u003c/td\u003e\\n        \u003ctd\u003e${price}\u003c/td\u003e\\n        \u003ctd\u003e${date}\u003c/td\u003e\\n    \u003c/tr\u003e   \\n    `\\n    $('table').append(html);\\n}\\n\\nfunction updateTable (data) {\\n    $('table tr:not(:first-child)').remove();\\n    for (var i=0; i\u003cdata.length; i++) {\\n       addRecord(data[i].type, data[i].name, data[i].price, data[i].date)\\n    }\\n}\\n\\naccount.find({}, function (data) {\\n    updateTable(data);\\n    updateChart(data);\\n});\\n\\nfunction updateChart (data) {\\n    var a = 0;\\n    var b = 0;\\n    var c = 0;\\n    \\n    for (var i=0; i\u003cdata.length; i++) {\\n        if (data[i].type == '交通') a += Number(data[i].price);\\n        if (data[i].type == '食物') b += Number(data[i].price);\\n        if (data[i].type == '娛樂') c += Number(data[i].price);\\n    }\\n    \\n    $('#total').text('total: $' + (a + b + c));\\n    \\n    var ctx = $('#canvasA')[0].getContext('2d');\\n    var myChart = new Chart(ctx, {\\n        type: 'pie',\\n        data: {\\n            labels: ['交通', '食物', '娛樂'],\\n            datasets: [{\\n                data: [a, b, c],\\n            }]\\n        },\\n    });\\n}\"}","created_at":"2019-05-09T12:17:49.645+08:00","updated_at":"2019-11-08T20:22:34.729+08:00","name":"記帳 v2","language":"web","screenshot":{"url":"/uploads/project/screenshot/66538/a65156b9b74e17a4738921e5315f855b.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":489,"hashid":"ej9swe3p","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}