電子佈告欄 | Programming Project | OrangeApple Learning Platform

{"id":122041,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cnav\u003e\\n        \u003cbutton id=\\\"showForm\\\" class=\\\"btn\\\"\u003e發文\u003c/button\u003e\\n    \u003c/nav\u003e\\n    \\n    \u003c!-- ===================== 文章列表頁面 =====================--\u003e\\n    \u003cdiv id=\\\"listPage\\\" class=\\\"page\\\"\u003e\\n        \u003cdiv id=\\\"filter\\\"\u003e\\n            \u003cbutton class=\\\"btn\\\" data-type=\\\"全部\\\"\u003e全部\u003c/button\u003e\\n            \u003cbutton class=\\\"btn\\\" data-type=\\\"新聞\\\"\u003e新聞\u003c/button\u003e\\n            \u003cbutton class=\\\"btn\\\" data-type=\\\"八卦\\\"\u003e八卦\u003c/button\u003e\\n            \u003cbutton class=\\\"btn\\\" data-type=\\\"閒聊\\\"\u003e閒聊\u003c/button\u003e\\n            \u003cbutton class=\\\"btn\\\" data-type=\\\"笑話\\\"\u003e笑話\u003c/button\u003e\\n            \u003cbutton class=\\\"btn\\\" data-type=\\\"愛情\\\"\u003e愛情\u003c/button\u003e\\n            \u003cbutton class=\\\"btn\\\" data-type=\\\"星座\\\"\u003e星座\u003c/button\u003e\\n        \u003c/div\u003e\\n        \u003cdiv id=\\\"postList\\\" class=\\\"card\\\"\u003e\\n            \u003cdiv class=\\\"postItem\\\"\u003e\\n                \u003cp\u003e\\n                    \u003cspan class=\\\"tag\\\"\u003e感情\u003c/span\u003e\\n                    \u003cspan class=\\\"\\\"\u003e2020-01-01\u003c/span\u003e\\n                \u003c/p\u003e\\n                \u003ch3\u003e我哥送了一個男朋友給我\u003c/h3\u003e\\n                \u003cp\u003e其實我已經不年輕了，今年有27歲了，可是我高一的時候就認識我哥高中同學，當時他們高三在考前衝刺\u003c/p\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"postItem\\\"\u003e\\n                \u003cp\u003e\\n                    \u003cspan class=\\\"tag\\\"\u003e感情\u003c/span\u003e\\n                    \u003cspan class=\\\"\\\"\u003e2020-01-01\u003c/span\u003e\\n                \u003c/p\u003e\\n                \u003ch3\u003e我哥送了一個男朋友給我\u003c/h3\u003e\\n                \u003cp\u003e其實我已經不年輕了，今年有27歲了，可是我高一的時候就認識我哥高中同學，當時他們高三在考前衝刺\u003c/p\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"postItem\\\"\u003e\\n                \u003cp\u003e\\n                    \u003cspan class=\\\"tag\\\"\u003e感情\u003c/span\u003e\\n                    \u003cspan class=\\\"\\\"\u003e2020-01-01\u003c/span\u003e\\n                \u003c/p\u003e\\n                \u003ch3\u003e我哥送了一個男朋友給我\u003c/h3\u003e\\n                \u003cp\u003e其實我已經不年輕了，今年有27歲了，可是我高一的時候就認識我哥高中同學，當時他們高三在考前衝刺\u003c/p\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cp style=\\\"color: #fff; text-align: center\\\"\u003e底部\u003c/p\u003e\\n    \u003c/div\u003e\\n    \u003c!--=========================================================--\u003e\\n\\n\\n    \u003c!-- ===================== 文章列表頁面 =====================--\u003e\\n    \u003cdiv id=\\\"formPage\\\"  class=\\\"page\\\"\u003e\\n        \u003cdiv class=\\\"card\\\"\u003e\\n            \u003cselect\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=\\\"text\\\" placeholder=\\\"文章標題...\\\"\u003e\\n            \u003ctextarea rows=\\\"8\\\" cols=\\\"40\\\" placeholder=\\\"文章內容...\\\"\u003e\u003c/textarea\u003e\\n        \u003c/div\u003e\\n        \u003cbutton id=\\\"submit\\\" class=\\\"btn\\\"\u003e送出\u003c/button\u003e\\n        \u003cbutton id=\\\"cancel\\\" class=\\\"btn\\\"\u003e取消\u003c/button\u003e\\n    \u003c/div\u003e\\n    \u003c!--=========================================================--\u003e\\n\\n    \\n    \u003c!-- ===================== 文章列表頁面 =====================--\u003e\\n    \u003cdiv id=\\\"postPage\\\" class=\\\"page\\\"\u003e\\n        \u003cbutton id=\\\"showList\\\" class=\\\"btn\\\"\u003e返回文章列表\u003c/button\u003e\\n        \u003cdiv class=\\\"card\\\"\u003e\\n            \u003cdiv class=\\\"postItem\\\"\u003e\\n                \u003cp id=\\\"author\\\"\u003e\u003c/p\u003e\\n                \u003ch3 id=\\\"title\\\"\u003e我哥送了一個男朋友給我\u003c/h3\u003e\\n                \u003cp id=\\\"content\\\"\u003e其實我已經不年輕了，今年有27歲了，可是我高一的時候就認識我哥高中同學，當時他們高三在考前衝刺\u003c/p\u003e\\n            \u003c/div\u003e\\n            \u003ch2 id=\\\"commentLength\\\"\u003e\u003c/h2\u003e\\n            \u003cdiv id=\\\"commentList\\\"\u003e\\n                \u003cp class=\\\"commentItem\\\"\u003e\\n                    \u003cstrong\u003e作者\u003c/strong\u003e-\\n                    blablablablaba\\n                    \u003cspan class=\\\"comment-date\\\"\u003e12-10-10\u003c/span\u003e\\n                \u003c/p\u003e\\n                \u003cp class=\\\"commentItem\\\"\u003e\\n                    \u003cstrong\u003e作者\u003c/strong\u003e-\\n                    blablablablaba\\n                    \u003cspan\u003e12-10-10\u003c/span\u003e\\n                \u003c/p\u003e\\n                \u003cp class=\\\"commentItem\\\"\u003e\\n                    \u003cstrong\u003e作者\u003c/strong\u003e-\\n                    blablablablaba\\n                    \u003cspan\u003e12-10-10\u003c/span\u003e\\n                \u003c/p\u003e\\n            \u003c/div\u003e  \\n        \u003c/div\u003e\\n        \u003cbutton id=\\\"createComment\\\" class=\\\"btn\\\"\u003e留言\u003c/button\u003e\\n    \u003c/div\u003e\\n    \u003c!--=========================================================--\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    background-color: #00324e;\\n    color: #333333;\\n    padding: 90px 45px;\\n}\\n\\n#postPage, #formPage {\\n    display: none;\\n}\\n\\n.btn {\\n    background-color: orange;\\n    border-width: 0px;\\n    border-radius: 5px;\\n    color: #ffffff;\\n    font-size: 1rem;\\n    padding: 0.5rem 1rem;\\n}\\n\\n.tag {\\n    background-color: orange;\\n    color: #fff;\\n    padding: 5px 10px;\\n    border-radius: 5px;\\n}\\n\\nnav {\\n    position: fixed;\\n    top: 0;\\n    left: 0;\\n    width: 100vw;\\n    padding: 15px 45px;\\n    box-sizing: border-box;\\n    background-color: #006aa6;\\n    text-align: right;\\n}\\n\\n#formPage .card {\\n    padding: 15px;\\n}\\n\\n#formPage select,\\n#formPage input,\\n#formPage 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\\n#formPage select,\\n#formPage input {\\n    height: 30px;\\n    \\n}\\n\\n.btn-white {\\n    background-color: #ffffff55;\\n    border-width: 0px;\\n    border-radius: 5px;\\n    color: #ffffff;\\n    font-size: 1rem;\\n    padding: 0.5rem 1rem;\\n}\\n\\n.card {\\n    background-color: #ffffff;\\n    max-width: 600px;\\n    border-radius: 5px;\\n    margin: 15px auto;\\n}\\n\\n#filter {\\n    max-width: 600px;\\n    border-radius: 5px;\\n    margin: 30px auto;\\n    text-align: center;\\n}\\n\\n#postList {\\n    overflow: hidden;\\n}\\n\\n.postItem {\\n    border-bottom: 1px solid #ccc;\\n    padding: 15px 30px;\\n    cursor: pointer;\\n}\\n\\n.commentItem {\\n    margin: 0px 45px;\\n    border-bottom: 1px solid #ccc;\\n    padding: 15px 30px;\\n    cursor: pointer;\\n}\\n\\n.comment-date {\\n    float: right;\\n    color: #888;\\n}\\n\\n.postItem:hover {\\n    background-color: #f5f5f5;\\n}\\n\\n.postItem h3 {\\n    margin: 15px 0;\\n    font-size: 1rem;\\n}\\n\\n.postItem p {\\n    font-size: 0.9rem;\\n}\\n\\n\\n.bg-red {\\n    background-color: red;\\n}\\n.bg-green {\\n    background-color: green;\\n}\\n.bg-blue {\\n    background-color: blue;\\n}\\n.bg-orange {\\n    background-color: orange;\\n}\\n.bg-purple {\\n    background-color: purple;\\n}\\n.bg-pink {\\n    background-color: pink;\\n}\",\"js\":\"var post = DB.table('post');\\nvar comment = DB.table('comment');\\nvar postId;\\n\\n$('#showList').click(showListPage);\\n$('#showForm').click(showFormPage);\\n$('#postList').on('click', '.postItem', showPostPage);\\n$('#filter button').click(filter);\\n$('#submit').click(createPost);\\n$('#cancel').click(showListPage);\\n$('#createComment').click(createComment);\\n\\n\\npost.find({}, updatePostList);\\n\\n\\n// 切換「文章列表」頁面\\nfunction showListPage() {\\n    $('.page').hide();\\n    $('#listPage').show();\\n}\\n\\n// 切換「新增文章」頁面\\nfunction showFormPage() {\\n    $('.page').hide();\\n    $('#formPage').show();\\n}\\n\\n// 切換「特定文章」頁面\\nfunction showPostPage() {\\n    $('.page').hide();\\n    $('#postPage').show();\\n    \\n    postId = $(this).data('id');\\n    post.find({ id: postId }, updatePost);\\n    comment.find({ postId: postId }, updateCommentList);\\n}\\n\\n// 新增文章\\nfunction createPost() {\\n    var typeVal = $('#formPage select').val();\\n    var titleVal = $('#formPage input').val();\\n    var contentVal = $('#formPage textarea').val();\\n    post.create({\\n        type: typeVal,\\n        title: titleVal,\\n        content: contentVal,\\n        author: USER_NAME,\\n        date: new Date,\\n    });\\n    post.find({}, updatePostList);\\n    showListPage();\\n}\\n\\n// 更新文章列表頁面\\nfunction updatePostList(data) {\\n    $('#postList').empty();\\n    \\n    \\n    \\n    data.forEach(function (d) {\\n        var bgColor = mapTypeToClass(d.type);\\n        var html = `\\n            \u003cdiv class=\\\"postItem\\\" data-id=\\\"${d.id}\\\"\u003e\\n                \u003cp\u003e\\n                    \u003cspan class=\\\"tag ${bgColor}\\\"\u003e${d.type}\u003c/span\u003e\\n                    \u003cspan\u003e${d.date.slice(0, 10)}\u003c/span\u003e\\n                \u003c/p\u003e\\n                \u003ch3\u003e${d.title}\u003c/h3\u003e\\n                \u003cp\u003e${d.content.slice(0, 30)}\u003c/p\u003e\\n            \u003c/div\u003e\\n        `\\n        $('#postList').append(html);\\n    });\\n}\\n\\n// 更新文章列表\\nfunction filter () {\\n    var type = $(this).data('type');\\n    if (type == '全部') {\\n        post.find({}, updatePostList);\\n    } else {\\n        post.find({ type: type }, updatePostList);\\n    }\\n}\\n\\n// 更新文章檢視頁面\\nfunction updatePost (data) {\\n    $('#title').text(data[0].title);\\n    $('#content').text(data[0].content);\\n    $('#author').text(data[0].author);\\n}\\n\\n// 新增留言\\nfunction createComment() {\\n    var contentVal = prompt('留言內容');\\n    comment.create({\\n        postId: postId,\\n        author: USER_NAME,\\n        content: contentVal,\\n        date: new Date,\\n    });\\n    comment.find({ postId: postId }, updateCommentList);\\n}\\n\\n// 更新留言列表\\nfunction updateCommentList(data) {\\n    $('#commentList').empty();\\n    $('#commentLength').text(data.length + '則留言')\\n    data.forEach(function (d) {\\n        var html = `\\n            \u003cp class=\\\"commentItem\\\"\u003e\\n                \u003cstrong\u003e${d.author}\u003c/strong\u003e-\\n                ${d.content}\\n                \u003cspan class=\\\"comment-date\\\"${d.date}\u003c/span\u003e\\n            \u003c/p\u003e\\n        `\\n        $('#commentList').append(html);\\n    });\\n}\\n\\n// 文章標籤根據文章類型對應顏色\\nfunction mapTypeToClass (type) {\\n    if (type == '新聞') {\\n        return 'bg-red';\\n    }\\n    if (type == '八卦') {\\n        return 'bg-green';\\n    }\\n    if (type == '閒聊') {\\n        return 'bg-blue';\\n    }\\n    if (type == '笑話') {\\n        return 'bg-orange';\\n    }\\n    if (type == '愛情') {\\n        return 'bg-purple';\\n    }\\n    if (type == '星座') {\\n        return 'bg-pink';\\n    }\\n}\"}","created_at":"2020-01-30T16:25:39.961+08:00","updated_at":"2020-02-01T12:42:30.518+08:00","name":"電子佈告欄","language":"web","screenshot":{"url":"/uploads/project/screenshot/122041/4fbd5e26df55fc54344655e3b2de7705.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":603,"hashid":"d5ms4nj8","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}