留言版副本 | 程式專案 | 橘蘋學習平台

{"id":35555,"student_id":1976,"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 comment = DB.table(\\\"comments\\\")\\n\\n$(\\\".js-submit\\\").click(function () {\\n    var text = $('.js-input').val()\\n    $('.js-input').val(\\\"\\\")\\n\\n    var data = {\\n        \\\"name\\\": USER_NAME,\\n        \\\"text\\\": text\\n    }\\n    comment.insert(data, update)\\n\\n\\n\\n});\\n\\n// 更新介面\\nfunction update() {\\n    comment.find({}, function(data) {\\n        \\n        $('.js-comments').html(\\\"\\\")\\n        $('.js-count').text(`留言(${data.length})`)\\n        for (var i = 0; i \u003c data.length; i++) {\\n            console.log(data[i])\\n            addComment(data[i])\\n        }\\n    })\\n}\\n\\n// 新增一筆留言\\nfunction addComment(data) {\\n    var time = new Date(data.createdAt)\\n    time = time.toLocaleString();\\n\\n    var html = `\\n    \u003cdiv class=\\\"media my-3\\\"\u003e\\n        \u003cimg class=\\\"mr-2 rounded-circle js-my-avatar\\\" src=\\\"https://api.adorable.io/avatars/50/${data.name}\\\"\u003e\\n        \u003cdiv class=\\\"media-body bg-dark rounded p-2\\\"\u003e\\n            \u003cstrong class=\\\"js-my-name\\\"\u003e${data.name}\u003c/strong\u003e\\n            \u003cp\u003e${data.text}\u003c/p\u003e\\n            \u003csmall\u003e${time}\u003c/small\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e`\\n\\n    $('.js-comments').prepend(html)\\n\\n\\n}\\n\\nupdate()\\nsetInterval(update,5000);\\n$('.js-my-avatar').attr('src', `https://api.adorable.io/avatars/50/${USER_NAME}`)\\n$('.js-my-name').text(USER_NAME)\\n\\n\"}","created_at":"2018-07-20T15:37:34.891+08:00","updated_at":"2019-10-30T23:41:15.635+08:00","name":"留言版 副本","language":"web","screenshot":{"url":"https://cdn7.koding.school/uploads/project/screenshot/35555/9ba057b579f5197d1d9132374082d9d1.jpg"},"parent_id":33718,"plugin":"","description":"","note":"","status":"public","like_student_ids":[],"is_featured":false,"views":361,"hashid":"2pdsynzr","is_content_changed":false,"review_status":"pending","submitted_at":"2018-07-20T16:02:32.593+08:00","reviewed_at":null,"advise":null,"is_deleted":false}