留言版 | Programming Project | OrangeApple Learning Platform

{"id":201189,"student_id":12205,"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\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\":\"\"}","created_at":"2020-11-06T12:43:20.081+08:00","updated_at":"2020-11-06T12:44:35.738+08:00","name":"留言版","language":"web","screenshot":{"url":"/uploads/project/screenshot/201189/e42015f7dc3976838d48871cfeca6b0e.jpg"},"parent_id":3,"plugin":"var commentss = 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        commentss.insert(data, update);\n    }\n});\n\nfunction update() {\n    commentss.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","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":186,"hashid":"5j3s9nm86","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}