記帳達人 - 完整版副本副本 | 程式專案

{"id":200901,"student_id":3469,"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.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv\u003e\\n        \u003c!-- 下拉式選單 --\u003e\\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            \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        \u003cinput type=\\\"date\\\" id=\\\"date\\\"\u003e\\n        \u003cinput type=\\\"number\\\" id=\\\"cost\\\" placeholder=\\\"價格\\\"\u003e\\n        \u003cinput type=\\\"text\\\" id=\\\"note\\\" placeholder=\\\"註記(非必填)\\\"\u003e\\n        \u003cbutton id=\\\"create\\\"\u003e新增\u003c/button\u003e\\n    \u003c/div\u003e\\n    \\n    \u003c!-- 總和 --\u003e\\n    \u003ch1\u003e\\n        總和 \u003cspan id=\\\"sum\\\"\u003e325\u003c/span\u003e 元\\n    \u003c/h1\u003e\\n    \\n    \u003c!-- 分類 --\u003e\\n    \u003cdiv\u003e\\n        \u003cspan class=\\\"icon filter\\\" data-type=\\\"食物\\\"\u003e 🍖 \u003c/span\u003e\\n        \u003cspan class=\\\"icon filter\\\" data-type=\\\"衣服\\\"\u003e 👕 \u003c/span\u003e\\n        \u003cspan class=\\\"icon filter\\\" data-type=\\\"生活\\\"\u003e 🏠 \u003c/span\u003e\\n        \u003cspan class=\\\"icon filter\\\" data-type=\\\"交通\\\"\u003e 🚌 \u003c/span\u003e\\n        \u003cspan class=\\\"icon filter\\\" data-type=\\\"學習\\\"\u003e 📖 \u003c/span\u003e\\n        \u003cspan class=\\\"icon filter\\\" data-type=\\\"娛樂\\\"\u003e 🎮 \u003c/span\u003e\\n        \u003cspan class=\\\"icon filter\\\" data-type=\\\"全部\\\"\u003e 全 \u003c/span\u003e\\n    \u003c/div\u003e\\n    \\n    \u003c!-- 表格 --\u003e\\n    \u003ctable\u003e\\n        \u003cthead\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                \u003cth\u003e註記\u003c/th\u003e\\n                \u003cth\u003e\u003c/th\u003e\\n            \u003c/tr\u003e\\n        \u003c/thead\u003e\\n        \u003ctbody\u003e\\n            \u003c!-- 用來複製使用的範例資料，完成專案後即可移除 --\u003e\\n            \u003c!-- \u003ctr\u003e\\n                \u003ctd\u003e🍖\u003c/td\u003e\\n                \u003ctd\u003e食物\u003c/td\u003e\\n                \u003ctd\u003e2019-01-01\u003c/td\u003e\\n                \u003ctd\u003e65元\u003c/td\u003e\\n                \u003ctd\u003e早餐\u003c/td\u003e\\n            \u003c/tr\u003e\\n            \u003ctr\u003e\\n                \u003ctd\u003e🚌\u003c/td\u003e\\n                \u003ctd\u003e交通\u003c/td\u003e\\n                \u003ctd\u003e2019-01-01\u003c/td\u003e\\n                \u003ctd\u003e20元\u003c/td\u003e\\n                \u003ctd\u003e捷運\u003c/td\u003e\\n            \u003c/tr\u003e\\n            \u003ctr\u003e\\n                \u003ctd\u003e🍖\u003c/td\u003e\\n                \u003ctd\u003e食物\u003c/td\u003e\\n                \u003ctd\u003e2019-01-01\u003c/td\u003e\\n                \u003ctd\u003e80元\u003c/td\u003e\\n                \u003ctd\u003e午餐\u003c/td\u003e\\n            \u003c/tr\u003e\\n            \u003ctr\u003e\\n                \u003ctd\u003e🍖\u003c/td\u003e\\n                \u003ctd\u003e食物\u003c/td\u003e\\n                \u003ctd\u003e2019-01-01\u003c/td\u003e\\n                \u003ctd\u003e110元\u003c/td\u003e\\n                \u003ctd\u003e晚餐\u003c/td\u003e\\n            \u003c/tr\u003e\\n            \u003ctr\u003e\\n                \u003ctd\u003e🏠\u003c/td\u003e\\n                \u003ctd\u003e生活\u003c/td\u003e\\n                \u003ctd\u003e2019-01-01\u003c/td\u003e\\n                \u003ctd\u003e50元\u003c/td\u003e\\n                \u003ctd\u003e文具\u003c/td\u003e\\n            \u003c/tr\u003e --\u003e\\n        \u003c/tbody\u003e\\n    \u003c/table\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\\n\\n\u003c!-- 學校作業好多,要飄惹... --\u003e\\n\\n\\n\",\"css\":\"body {\\n    padding: 30px;\\n    color: #ddd;\\n    background-color: rgb(22, 28, 37);\\n    text-align: center;\\n}\\n\\nbutton, select, input {\\n    display: block;\\n    outline: none;\\n    width: 100%;\\n    height: 40px;\\n    padding: 5px 10px;\\n    margin-top: 10px;\\n    border-radius: 5px;\\n    border: 1px solid #555;\\n    color: #ddd;\\n    background-color: rgba(0, 0, 0, 0);\\n    font-size: 1rem;\\n    box-sizing: border-box;\\n}\\n\\n.icon {\\n    display: inline-block;\\n    width: 45px;\\n    height: 45px;\\n    line-height: 45px;\\n    font-size: 1.5rem;\\n    border-radius: 50%;\\n    border: 1px solid #555;\\n    margin: 0px 5px;\\n    cursor: pointer;\\n}\\n\\ntable {\\n    font-size: 0.9rem;\\n    border-collapse: collapse;\\n    width: 100%;\\n    margin-top: 15px;\\n    background-color: rgb(22, 28, 37);\\n}\\nth, tr {\\n    padding: 15px;\\n    border-bottom: 1px solid #3555;\\n}\\ntr td:nth-child(1) {\\n    font-size: 1.8rem;\\n}\\n\\n#sum {\\n    color: rgb(52, 235, 161);\\n}\\nbutton:active, select:focus, input:focus, .icon:hover {\\n    color: rgb(52, 235, 161);\\n    border-color: rgb(52, 235, 161);\\n}\\n\\n\",\"js\":\"var account = DB.table('account');\\n\\n$('#create').click(create); // 點擊「新增」新增一筆資料\\n$('.filter').click(filter); // 點擊「圖示」篩選所有資料\\n\\n\\n// 專案一開始執行，預設查詢所有資料並更新至表格\\naccount.read({}, updateTable);\\n\\n//.text()是用來處存原本就存在在畫面上的字\\n//.val()是用來處存後來輸入的值\\n// 新增一筆記帳紀錄到資料表並更新畫面\\nfunction create () {\\n    var type = $('#type').val();\\n    var date = $('#date').val();\\n    var cost = $('#cost').val();\\n    var note = $('#note').val();\\n    if (type !== '' \u0026\u0026 date !== '' \u0026\u0026 cost !== '') {\\n        account.create({\\n            type: type,\\n            date: date,\\n            cost: cost,\\n            note: note\\n        });\\n        account.read({}, updateTable);\\n    } else {\\n        alert(`有東西忘記填囉!\\n        (防呆機制就是為你這種人設計的...)`);\\n    }\\n\\n}\\n\\n// 將查詢的記帳紀錄 data 更新至畫面上\\n//(data中有存著整個陣列)\\nfunction updateTable (data) {\\n    $('tbody').empty();\\n    var total = 0;\\n    data.forEach(function(item) {\\n        total += Number(item.cost);\\n        var row = `\\n        \u003ctr\u003e\\n        \u003ctd\u003e${typeToEmoji(item.type)}\u003c/td\u003e\\n        \u003ctd\u003e${item.type}\u003c/td\u003e\\n        \u003ctd\u003e${item.date}\u003c/td\u003e\\n        \u003ctd\u003e${item.cost}\u003c/td\u003e\\n        \u003ctd\u003e${item.note}\u003c/td\u003e\\n\\n        \u003c/tr\u003e\\n        `;\\n        $('tbody').append(row);\\n    });\\n    $('#sum').text(total);\\n}\\n\\n// 將類型的字串轉換成 emoji 符號\\n//type是輸入,return是輸出(回傳)\\nfunction typeToEmoji (type) {\\n    if (type == '食物') {\\n        return'🍖';\\n    } else if (type == '衣服') {\\n        return'👕';\\n    } else if (type == '生活') {\\n        return'🏠';\\n    } else if (type == '交通') {\\n        return'🚌';\\n    } else if (type == '學習') {\\n        return'📖';\\n    } else if (type == '娛樂') {\\n        return'🎮';\\n    } else {\\n        return'不要亂修改,會壞掉啦!!!!!';\\n    }\\n}\\n\\n// 依據類型查詢所有資料並更新至表格\\nfunction filter () {\\n    var type = $(this).data('type');\\n    if (type == '全部') {\\n        account.read({}, updateTable);\\n    } else {\\n        account.read({type: type}, updateTable);\\n    }\\n    \\n}\\n\\n\\n\\n\"}","created_at":"2020-11-01T13:50:03.012+08:00","updated_at":"2022-07-22T19:23:31.120+08:00","name":"記帳達人 - 完整版 副本 副本","language":"web","screenshot":{"url":"https://cdn7.koding.school/uploads/project/screenshot/200901/fb3020c559fb56cf0b47c702f8470329.jpg"},"parent_id":116348,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":141,"hashid":"d5msvwpkj","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}