test | 程式專案 | 橘蘋學習平台

{"id":509034,"student_id":3760,"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    \\n    \u003c!--======================= 文章列表頁面 =======================--\u003e\\n    \u003cdiv id=\\\"home-page\\\"\u003e\\n        \u003cdiv class=\\\"btn-group\\\"\u003e\\n            \u003cbutton class=\\\"bg-dark js-filter\\\" data-type=\\\"全部\\\"\u003e全部\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-blue js-filter\\\" data-type=\\\"新聞\\\"\u003e新聞\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-red js-filter\\\" data-type=\\\"愛情\\\"\u003e愛情\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-purple js-filter\\\" data-type=\\\"八卦\\\"\u003e八卦\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-orange js-filter\\\" data-type=\\\"購物\\\"\u003e購物\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-yellow js-filter\\\" data-type=\\\"笑話\\\"\u003e笑話\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-cyan js-filter\\\" data-type=\\\"閒聊\\\"\u003e閒聊\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-dark float-right js-show-form-page\\\"\u003e發文\u003c/button\u003e\\n        \u003c/div\u003e\\n        \u003cdiv id=\\\"post-list\\\"\u003e\\n            \u003cdiv class=\\\"post-item card\\\" data-id=\\\"123\\\"\u003e\\n                \u003ch3\u003e\u003cspan class=\\\"tag bg-orange\\\"\u003e文章類型\u003c/span\u003e文章標題\u003c/h3\u003e\\n                \u003cp\u003e文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容......\u003c/p\u003e\\n                \u003cspan class=\\\"gray\\\"\u003e2020-11-12\u003c/span\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"post-item card\\\" data-id=\\\"456\\\"\u003e\\n                \u003ch3\u003e\u003cspan class=\\\"tag bg-orange\\\"\u003e文章類型\u003c/span\u003e文章標題\u003c/h3\u003e\\n                \u003cp\u003e文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容......\u003c/p\u003e\\n                \u003cspan class=\\\"gray\\\"\u003e2020-11-12\u003c/span\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"post-item card\\\" data-id=\\\"7\\\"\u003e\\n                \u003ch3\u003e\u003cspan class=\\\"tag bg-orange\\\"\u003e文章類型\u003c/span\u003e文章標題\u003c/h3\u003e\\n                \u003cp\u003e文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容......\u003c/p\u003e\\n                \u003cspan class=\\\"gray\\\"\u003e2020-11-12\u003c/span\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003ch3 class=\\\"text-center\\\" id=\\\"bottom-text\\\"\u003e底部\u003c/h3\u003e\\n    \u003c/div\u003e\\n    \\n    \\n    \u003c!--======================= 新增文章頁面 =======================--\u003e\\n    \u003cdiv id=\\\"form-page\\\"\u003e\\n        \u003cdiv class=\\\"card\\\"\u003e\\n            \u003cselect id=\\\"form-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                \u003coption value=\\\"閒聊\\\"\u003e閒聊\u003c/option\u003e\\n            \u003c/select\u003e\\n            \u003cinput id=\\\"form-title\\\" type=\\\"text\\\" placeholder=\\\"文章標題...\\\"\u003e\\n            \u003ctextarea id=\\\"form-content\\\" rows=\\\"8\\\" cols=\\\"40\\\" placeholder=\\\"文章內容 (必須滿 20 字以上)...\\\"\u003e\u003c/textarea\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"btn-group\\\"\u003e\\n            \u003cbutton class=\\\"bg-gray js-show-post-list\\\"\u003e取消\u003c/button\u003e \\n            \u003cbutton class=\\\"bg-orange js-create-post\\\"\u003e送出\u003c/button\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \\n    \\n    \u003c!--======================= 文章檢視頁面 =======================--\u003e\\n    \u003cdiv id=\\\"post-page\\\"\u003e\\n        \u003cdiv class=\\\"btn-group\\\"\u003e\\n            \u003cbutton class=\\\"bg-orange js-show-post-list\\\"\u003e返回文章列表\u003c/button\u003e\\n        \u003c/div\u003e\\n        \\n        \u003cdiv class=\\\"postItem card\\\"\u003e\\n            \u003ch3\u003e\\n                \u003cspan class=\\\"tag bg-orange\\\" id=\\\"post-type\\\"\u003e類型\u003c/span\u003e\\n                \u003cspan id=\\\"post-title\\\"\u003e標題\u003c/span\u003e\\n                (\u003cspan id=\\\"post-author\\\"\u003e作者\u003c/span\u003e)\\n            \u003c/h3\u003e\\n            \u003cp id=\\\"post-content\\\"\u003e文章內容文章內容文章內容....\u003c/p\u003e\\n            \u003cspan id=\\\"post-date\\\"\u003e2020-01-01\u003c/span\u003e\\n        \u003c/div\u003e\\n        \\n        \u003ch3 class=\\\"text-center\\\" id=\\\"comment-length\\\"\u003e 20 則留言\u003c/h3\u003e\\n        \\n        \u003cdiv class=\\\"card\\\"\u003e\\n            \u003cinput type=\\\"text\\\" id=\\\"comment-input\\\"\u003e\\n            \u003cbutton class=\\\"bg-orange js-create-comment\\\"\u003e留言\u003c/button\u003e\\n        \u003c/div\u003e\\n        \\n        \u003cdiv id=\\\"comment-list\\\"\u003e\\n            \u003cdiv class=\\\"comment-item card\\\"\u003e\\n                \u003cstrong\u003e小明\u003c/strong\u003e\\n                \u003cspan\u003e留言內容留言內容留言內容...\u003c/span\u003e\\n                \u003cspan class=\\\"float-right gray\\\"\u003e2020-01-01\u003c/span\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"comment-item card\\\"\u003e\\n                \u003cstrong\u003eTony\u003c/strong\u003e\\n                \u003cspan\u003eblabalba\u003c/span\u003e\\n                \u003cspan class=\\\"float-right gray\\\"\u003e2020-11-12\u003c/span\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"comment-item card\\\"\u003e\\n                \u003cstrong\u003e小明\u003c/strong\u003e\\n                \u003cspan\u003e留言內容留言內容留言內容...\u003c/span\u003e\\n                \u003cspan class=\\\"float-right gray\\\"\u003e2020-01-01\u003c/span\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \\n\u003c/body\u003e\\n\u003c/html\u003e\\n\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n/* 設定圖片的寬度為銀幕一半寬 */\\nimg {    \\n    max-width: 50%; \\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {body {\\n    padding: 30px;\\n    color: #444444;\\n    background-color: #eeeeee;\\n}\\n\\n#form-page,\\n#post-page {\\n    display: none;\\n}\\n#form-page,\\n#post-page,\\n#home-page {\\n    max-width: 600px;\\n    margin: auto;\\n}\\n\\n.btn-group {\\n    margin: 15px 0px;\\n}\\n\\n.post-item {\\n    font-size: 0.9rem;\\n    cursor: pointer;\\n    margin: 30px 0px;\\n}\\n\\n.comment-item {\\n    margin: 15px 0px;\\n}\\n\\n.post-item h3,\\n.post-item p {\\n    margin: 10px 0px;\\n    word-break: break-all;\\n    word-wrap: break-word;\\n}\\n\\n.card {\\n    padding: 15px;\\n    border-radius: 5px;\\n    background-color: #ffffff;\\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);\\n}\\n\\nbutton {\\n    padding: 5px 10px;\\n    border-width: 0;\\n    border-radius: 5px;\\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);\\n    font-size: 0.9rem;\\n    color: #ffffff;\\n}\\n.tag {\\n    color: #ffffff;\\n    padding: 2px 6px;\\n    display: inline-block;\\n    margin-right: 5px;\\n    border-radius: 5px;\\n}\\n.bg-cyan {\\n    background-color: #1bbc9c;\\n}\\n.bg-green {\\n    background-color: #2fcc70;\\n}\\n.bg-blue {\\n    background-color: #2a80b9;\\n}\\n.bg-yellow {\\n    background-color: #f1c40f;\\n}\\n.bg-orange {\\n    background-color: #f49c14;\\n}\\n.bg-red {\\n    background-color: #e84b3d;\\n}\\n.bg-purple {\\n    background-color: #9c59b8;\\n}\\n.bg-dark {\\n    background-color: #34495e;\\n}\\n.bg-gray {\\n    background-color: #808b8d;\\n}\\n\\n\\n.gray {\\n    color: #aaaaaa;\\n}\\n\\n.float-right {\\n    float: right;\\n}\\n\\n.text-center {\\n    text-align: center;\\n}\\n\\n\\n#form-page select,\\n#form-page input,\\n#form-page textarea {\\n    width: 100%;\\n    box-sizing: border-box;\\n    margin: 15px auto;\\n    display: block;\\n    border: 1px solid #ccc;\\n    border-radius: 5px;\\n    padding: 10px;\\n    font-size: 0.9rem;\\n}\\n#form-page select,\\n#form-page input {\\n    height: 30px;\\n}\\n#post-page input {\\n    width: calc(100% - 55px);\\n    box-sizing: border-box;\\n    border: 1px solid #ccc;\\n    border-radius: 5px;\\n    padding: 8px;\\n    font-size: 0.9rem;\\n}\\n    color: #555555;\\n}\",\"js\":\"var post = DB.table('post'); //文章的資料表\\nvar comment = DB.table('comment'); //留言的資料表\\nvar userName = USER_NAME;\\nvar postId;\\n\\n$('.js-show-form-page').click(showFormPage); //「發文」按鈕點擊時，切換表單頁面\\n$('.js-show-post-list').click(showHomePage); //「取消」按鈕點擊時，切換文章列表頁面\\n$('#home-page').on('click', '.post-item', showPostPage);//「取消」按鈕點擊時，切換文章列表頁面\\n$('.js-filter').click(filter);\\n\\n// 切換「文章檢視」頁面\\nfunction showPostPage () {\\n    $('#home-page').hide()\\n    $('#post-page').show()\\n    $('#from-page').hide()\\n\\n}\\n\\n// 切換「文章新增」頁面\\nfunction showFormPage () {\\n    $('#home-page').hide()\\n    $('#post-page').hide()\\n    $('#from-page').show()\\n\\n}\\n\\n// 切換「文章列表」頁面\\nfunction showHomePage () {\\n    $('#home-page').show()\\n    $('#post-page').hide()\\n    $('#from-page').hide()\\n\\n}\\n\\n$('.js-create-post').click(createPost); //「送出」按鈕點擊\\n$('.js-filter').click(filter); //「分類」按鈕點擊\\n$('.js-create-comment').click(createComment); // 新增留言\\n\\n\\n// 新增文章到資料表\\nfunction createPost () {\\n    var typeVal = $('#from-type').val();\\n    var titleVal = $('#from-title').val();\\n    var contentVal = $('#from-content').val();\\n    \\n    if(typeVal !=='' \u0026\u0026 titleVal !=='' \u0026\u0026 contentVal.length \u003e= 20){\\n    \\n    $('#from-type').val('');\\n    $('#from-title').val('');\\n    $('#from-content').val('');\\n    \\n    post.create({\\n        type: typeVal,\\n        title: titleVal,\\n        content: contentVal,\\n        author: userName,\\n        date: new Date\\n    },console.log);\\n    showHomePage();\\n    \\n    post.read({}, updatePostList);\\n    \\n    }else{\\n        alert('請確認文章類型,標題有無填寫,且文章內容不得低於20字')\\n\\n    }\\n};\\n\\n// 更新首頁的文章列表\\nfunction updatePostList (data) {\\n    $(\\\"#post-list\\\").empty();\\n    data.forEach(function(d){\\n        var post_html = `\u003cdiv id=\\\"post-list\\\"\u003e\\n            \u003cdiv class=\\\"post-item card\\\" data-id=\\\"123\\\"\u003e\\n                \u003ch3\u003e\u003cspan class=\\\"tag bg-orange\\\"\u003e${d.type}\u003c/span\u003e${d.title}\u003c/h3\u003e\\n                \u003cp\u003e${d.content}\u003c/p\u003e\\n                \u003cspan class=\\\"gray\\\"\u003e${d.date}\u003c/span\u003e\\n            \u003c/div\u003e`\\n        $(\\\"#post-list\\\").append(post_html)\\n    })\\n}\\n\\n// 顯示特定類型的文章\\nfunction filter () {\\n    var typeVal = $(this).data('type');\\n    if(typeVal == '全部'){\\n        post.read({}, updatePostList);\\n    }else{\\n        post.read({type : typeVal}, updatePostList);\\n    }\\n\\n}\\n\\n// 顯示指定文章\\nfunction updatePost (data) {\\n\\n\\n}\\n\\n// 新增文章\\nfunction createComment () {\\n\\n}\\n\\n// 更新留言\\nfunction updateComment (data) {\\n\\n}\\n\\n// 根據文章類型對應顏色的標籤\\nfunction typeToClass (type) {\\n\\n}\"}","created_at":"2023-03-18T14:11:14.894+08:00","updated_at":"2023-03-18T14:12:03.989+08:00","name":"test","language":"web","screenshot":{"url":"https://cdn5.koding.school/uploads/project/screenshot/509034/ba2015033579cf33511733c95a1fa4b1.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":20,"hashid":"qmds3pz95","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}