留言版 | Programming Project | OrangeApple Learning Platform

{"id":27155,"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://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css\\\" integrity=\\\"sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4\\\"\\n\\t crossorigin=\\\"anonymous\\\"\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.3.1.slim.min.js\\\" integrity=\\\"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\\\"\\n\\t crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\\t\u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js\\\" integrity=\\\"sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ\\\"\\n\\t crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\\t\u003cscript src=\\\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js\\\" integrity=\\\"sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm\\\"\\n\\t crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\\n\u003cbody class=\\\"text-light p-4\\\"\u003e\\n\\t\u003cdiv class=\\\"container\\\"\u003e\\n\\n\\t\\t\u003c!-- 留言列表 --\u003e\\n\\t\\t\u003cdiv class=\\\"bg-dark rounded p-4 my-3\\\"\u003e\\n\\t\\t\\t\u003ch4\u003e笑話 - 皮卡丘借錢\u003c/h4\u003e\\n\\t\\t\\t\u003cp class=\\\"m-0\\\"\u003e\\n\\t\\t\\t\\t有一天皮卡丘跟傑尼龜借錢\\n\\t\\t\\t\\t\u003cbr\u003e 皮卡丘：皮卡皮卡皮卡（傑尼龜借我錢）\\n\\t\\t\\t\\t\u003cbr\u003e 傑尼龜：不要！\\n\\t\\t\\t\u003c/p\u003e\\n\\t\\t\u003c/div\u003e\\n\\n\\t\\t\u003c!-- 水平線 \u0026 留言人數 --\u003e\\n\\t\\t\u003cp class=\\\"border-bottom border-light p-1 js-count\\\"\u003e留言 (0)\u003c/p\u003e\\n\\n\\t\\t\u003c!-- 留言輸入表單 --\u003e\\n\\t\\t\u003cdiv class=\\\"media my-3\\\"\u003e\\n\\t\\t\\t\u003cimg class=\\\"mr-2 rounded-circle js-my-avatar\\\"\u003e\\n\\t\\t\\t\u003cdiv class=\\\"media-body bg-dark rounded p-2\\\"\u003e\\n\\t\\t\\t\\t\u003cstrong class=\\\"js-my-name\\\"\u003e\u003c/strong\u003e\\n\\t\\t\\t\\t\u003cinput type=\\\"text\\\" class=\\\"form-control bg-dark text-light my-2 js-input\\\" placeholder=\\\"留言...\\\"\u003e\\n\\t\\t\\t\\t\u003cbutton class=\\\"btn btn-block btn-danger js-submit\\\"\u003e留言\u003c/button\u003e\\n\\t\\t\\t\u003c/div\u003e\\n\\t\\t\u003c/div\u003e\\n\\n\\t\\t\u003c!-- 留言列表 --\u003e\\n\\t\\t\u003cdiv class=\\\"js-comments\\\"\u003e\u003c/div\u003e\\n\\t\u003c/div\u003e\\n\\n\u003c/body\u003e\\n\\n\u003c/html\u003e\",\"css\":\"body {\\n    background-color: #222222;\\n}\\n\\n.container {\\n    max-width: 500px;\\n}\\n\\n.media small {\\n    color: #888888;\\n    display: block;\\n    text-align: right;\\n}\\n\\n.media p {\\n    margin: 5px 0px;\\n    font-size: .9rem;\\n    font-weight: 300;\\n}\",\"js\":\"var comments = DB.table(\\\"comments\\\");\\n\\n$(\\\".js-my-avatar\\\").attr(\\\"src\\\", \\\"https://api.adorable.io/avatars/50/\\\" + USER_NAME);\\n$(\\\".js-my-name\\\").text(USER_NAME);\\n\\n$(\\\".js-submit\\\").click(function () {\\n    var text = $(\\\".js-input\\\").val();\\n    $(\\\".js-input\\\").val('');\\n\\n    if (text.length \u003e 0) {\\n        var data = {\\n            name: USER_NAME,\\n            text: text\\n        };\\n        comments.insert(data, update);\\n    }\\n});\\n\\nfunction update() {\\n    comments.find({}, function (data) {\\n        $(\\\".js-comments\\\").html(\\\"\\\");\\n        for (var i = 0; i \u003c data.length; i++) {\\n            addComment(data[i]);\\n        }\\n        $(\\\".js-count\\\").text(`留言 (${data.length})`);\\n    });\\n}\\n\\nfunction addComment(data) {\\n    var time = new Date(data.createdAt);\\n    var html = `\\n        \u003cdiv class=\\\"media mt-3\\\"\u003e\\n            \u003cimg class=\\\"mr-2 rounded-circle\\\" src=\\\"https://api.adorable.io/avatars/50/${data.name}\\\"\u003e\\n            \u003cdiv class=\\\"media-body bg-dark rounded p-2 text-light\\\"\u003e\\n                \u003cstrong\u003e${data.name}\u003c/strong\u003e\\n                \u003cp\u003e${data.text}\u003c/p\u003e\\n                \u003csmall\u003e${time.toLocaleString()}\u003c/small\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    `;\\n    $(\\\".js-comments\\\").prepend(html);\\n}\\n\\nupdate();\\nsetInterval(update, 15000);\\n\"}","created_at":"2018-04-24T10:16:05.813+08:00","updated_at":"2019-11-10T16:44:52.572+08:00","name":"留言版","language":"web","screenshot":{"url":"/uploads/project/screenshot/27155/c42f37ffbda57f1ad134d0c4a405f5d8.jpg"},"parent_id":null,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":532,"hashid":"2pdsrger","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}