嗨嗨 | Programming Project | OrangeApple Learning Platform

{"id":210423,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eindex\u003c/title\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.5.1.js\\\" charset=\\\"utf-8\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003c!-- \u003cimg src=\\\"https://media.giphy.com/media/cnzP4cmBsiOrccg20V/giphy.gif\\\" alt=\\\"\\\"\u003e --\u003e\\n    \u003cimg class=\\\"logo\\\" src=\\\"https://i.imgur.com/XcGu2cg.png\\\"/\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"css.css\\\"\u003e\\n    \u003clink rel=\\\"preconnect\\\" href=\\\"https://fonts.gstatic.com\\\"\u003e\\n    \u003clink href=\\\"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100\u0026display=swap\\\" rel=\\\"stylesheet\\\"\u003e\\n    \u003cdiv id=\\\"filter\\\"\u003e\\n        \u003cbutton class=\\\"bg-black\\\" id=\\\"find_all\\\"\u003e全部\u003c/button\u003e\\n        \u003cbutton class=\\\"bg-orange\\\" id=\\\"find_by_index\\\"\u003e編號查詢\u003c/button\u003e\\n        \u003cbutton class=\\\"bg-orange\\\" id=\\\"find_by_name\\\"\u003e名稱查詢\u003c/button\u003e\\n        \u003cbutton class=\\\"bg-orange\\\" id=\\\"find_by_attr\\\"\u003e屬性查詢\u003c/button\u003e\\n        \u003cbr/\u003e\\n        \u003cbutton class=\\\"bg-blue\\\" id=\\\"order_by_weight_desc\\\"\u003e體重大排到小\u003c/button\u003e\\n        \u003cbutton class=\\\"bg-blue\\\" id=\\\"order_by_weight_asc\\\"\u003e體重小排到大\u003c/button\u003e\\n        \u003cbutton class=\\\"bg-blue\\\" id=\\\"order_by_height_desc\\\"\u003e身高大排到小\u003c/button\u003e\\n        \u003cbutton class=\\\"bg-blue\\\" id=\\\"order_by_height_asc\\\"\u003e身高小排到大\u003c/button\u003e\\n        \u003cbr/\u003e\\n        \u003cbutton class=\\\"bg-green\\\" id=\\\"create\\\"\u003e新增\u003c/button\u003e\\n        \u003cbutton class=\\\"bg-red\\\" id=\\\"delete\\\"\u003e刪除\u003c/button\u003e\\n    \u003c/div\u003e\\n\\n    \u003ctable\u003e\\n        \u003cthead\u003e\\n            \u003ctr\u003e\\n                \u003cth\u003e編號\u003c/th\u003e\\n                \u003c!-- \u003cth\u003e圖片\u003c/th\u003e --\u003e\\n                \u003cth\u003e名稱\u003c/th\u003e\\n                \u003cth\u003e體重\u003c/th\u003e\\n                \u003cth\u003e身高\u003c/th\u003e\\n                \u003cth\u003e屬性\u003c/th\u003e\\n            \u003c/tr\u003e\\n        \u003c/thead\u003e\\n        \u003ctbody\u003e\\n            \u003c!-- 三筆假資料提供複製貼上，專案完整完成後可刪除 --\u003e\\n            \u003c!-- \u003ctr\u003e\\n                \u003ctd\u003e001\u003c/td\u003e\\n                \u003ctd\u003e\u003cdiv class=\\\"icon icon-001\\\"\u003e\u003c/div\u003e\u003c/td\u003e\\n                \u003ctd\u003e妙蛙種子\u003c/td\u003e\\n                \u003ctd\u003e6.9kg\u003c/td\u003e\\n                \u003ctd\u003e0.7m\u003c/td\u003e\\n                \u003ctd\u003e草\u003c/td\u003e\\n            \u003c/tr\u003e --\u003e\\n        \\n            \u003ctr\u003e\\n                \u003ctd\u003e002\u003c/td\u003e\\n                \u003ctd\u003e\u003cdiv class=\\\"icon icon-002\\\"\u003e\u003c/div\u003e\u003c/td\u003e\\n                \u003ctd\u003e妙蛙草\u003c/td\u003e\\n                \u003ctd\u003e13kg\u003c/td\u003e\\n                \u003ctd\u003e1m\u003c/td\u003e\\n                \u003ctd\u003e草\u003c/td\u003e\\n            \u003c/tr\u003e\\n        \\n            \u003ctr\u003e\\n                \u003ctd\u003e003\u003c/td\u003e\\n                \u003ctd\u003e\u003cdiv class=\\\"icon icon-003\\\"\u003e\u003c/div\u003e\u003c/td\u003e\\n                \u003ctd\u003e妙蛙花\u003c/td\u003e\\n                \u003ctd\u003e100kg\u003c/td\u003e\\n                \u003ctd\u003e2m\u003c/td\u003e\\n                \u003ctd\u003e草\u003c/td\u003e\\n            \u003c/tr\u003e\\n        \u003c/tbody\u003e\\n    \u003c/table\u003e\\n    \u003cscript src=\\\"js.js\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\u003c!-- \u003cimg src=\\\"\\\" alt=\\\"\\\" style=\\\"display: none; width: 40px; height: 40px;\\\" \u003e --\u003e\",\"css\":\"body {\\n    padding: 30px 45px;\\n    background-color: #eee;\\n    text-align: center;\\n    font-family: 'Noto Sans TC'\\n}\\ntable {\\n    border-collapse: collapse;\\n    width: 100%;\\n    margin: 15px 0px;\\n    background-color: #fff;\\n}\\nth, td {\\n    border-bottom: 1px solid #eee;\\n    color: #333;\\n    font-size: 0.9rem;\\n}\\nth {\\n    padding: 10px 0px;\\n}\\ntd {\\n    padding: 5px 0px;\\n}\\n#filter {\\n    padding: 10px;\\n    margin: 10px 0px;\\n    line-height: 35px;\\n    background-color: #fff;\\n    text-align: center;\\n}\\nbutton {\\n    border-width: 0;\\n    /* border-radius: 0px; */\\n    padding: 5px 10px;\\n    color: #000;\\n    cursor: pointer;\\n    border-radius: 6px;\\n    transition-duration: 0.2s;\\n    background-color: rgba(0,0,0,0);\\n    outline: none;\\n}\\nbutton:hover {\\n    box-shadow: 0 8px 10px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);\\n    color: #fff;\\n}\\nbutton:active {\\n    transform: scale(0.9,0.9);\\n    transition: transform 0.0s;\\n}\\n.logo {\\n    width: 200px;\\n}\\n.bg-green {\\n    border: 2px solid #4caf50;\\n}\\n.bg-green:hover {\\n    background-color: #4caf50;\\n}\\n.bg-blue {\\n    border: 2px solid #007bff;\\n}\\n.bg-blue:hover {\\n    background-color: #007bff;\\n}\\n.bg-orange {\\n    border: 2px solid #ffc107;\\n}\\n.bg-orange:hover {\\n    background-color: #ffc107;\\n}\\n.bg-red {\\n    border: 2px solid #f44336;\\n}\\n.bg-red:hover {\\n    background-color: #f44336;\\n}\\n.bg-black {\\n    border: 2px solid #000;\\n}\\n.bg-black:hover {\\n    background-color: #000;\\n}\\n\\n/* .icon {\\n    width: 40px;\\n    height: 40px;\\n    background:url(https://i.imgur.com/3DTKy2e.png) 9999px 9999px no-repeat;\\n    vertical-align: middle;\\n    display: inline-block;\\n} */\",\"js\":\"var pokemons = [\\n    {\\n        indexi:'1',\\n        name:'妙蛙種子',\\n        height:0.7,\\n        weight:6.9,\\n        attr:'草'\\n    },\\n    {\\n        indexi:'2',\\n        name:'妙蛙草',\\n        height:1,\\n        weight:13,\\n        attr:'草'\\n    },\\n    {\\n        indexi:'3',\\n        name:'妙蛙花',\\n        height:2,\\n        weight:100,\\n        attr:'草'\\n    },\\n    {\\n        indexi:'4',\\n        name:'小火龍',\\n        height:0.6,\\n        weight:8.5,\\n        attr:'火'\\n    },\\n    {\\n        indexi:'5',\\n        name:'火恐龍',\\n        height:1.1,\\n        weight:19,\\n        attr:'火'\\n    }\\n];\\n\\nrenderTable();\\n\\nvar order = pokemons.length;\\n\\n// 將資料更新到網頁的表格\\nfunction renderTable () { /*#link 1.https://i.imgur.com/3DTKy2e.png\\n                                  2.https://i.imgur.com/XcGu2cg.png*/\\n    $(\\\"tbody\\\").empty();\\n    for(var count = 0;count \u003c pokemons.length;count++) {\\n        var row = `\\n            \u003ctr\u003e\\n                \u003ctd\u003e${pokemons[count].indexi}\u003c/td\u003e\\n                \u003ctd\u003e${pokemons[count].name}\u003c/td\u003e\\n                \u003ctd\u003e${pokemons[count].weight}\u003c/td\u003e\\n                \u003ctd\u003e${pokemons[count].height}\u003c/td\u003e\\n                \u003ctd\u003e${pokemons[count].attr}\u003c/td\u003e\\n            \u003c/tr\u003e\\n        `\\n        $(\\\"tbody\\\").append(row);\\n    }\\n}\\n// indexi: prompt(\\\"步驟1.請輸入編號：\\\"),\\n// 使用者新增一筆資料\\n$('#create').click(function () {\\n    order++\\n    pokemons.push({\\n        indexi: order,\\n        name: prompt(\\\"步驟1.請輸入名子：\\\"),\\n        weight: prompt(\\\"步驟2.請輸入體重：\\\"),\\n        height: prompt(\\\"步驟3.請輸入身高：\\\"),\\n        attr: prompt(\\\"步驟4.請輸入屬性(ex.火、水...)：\\\")\\n    });\\n\\n    renderTable();\\n});\\n\\n$(\\\"#delete\\\").click(function () {\\n    var dla = prompt(\\\"\\\\u6b65\\\\u9a5f\\\\u0031\\\\u002e\\\\u8acb\\\\u8f38\\\\u5165\\\\u0022\\\\u5b8c\\\\u6574\\\\u0022\\\\u7de8\\\\u865f\\\\uff1a\\\");\\n    delete_for(dla);\\n});\\n\\nfunction delete_for (dlas) {\\n    for(var s = 0 ; s \u003c pokemons.length ; s++) {\\n        if (dlas == pokemons[s].indexi) {\\n            pokemons.splice(s, 1);\\n            renderTable();\\n        }\\n    }\\n}\"}","created_at":"2020-12-08T15:06:06.159+08:00","updated_at":"2020-12-08T15:15:52.665+08:00","name":"嗨嗨","language":"web","screenshot":{"url":"/uploads/project/screenshot/210423/1b32f72a8fcb882e984ebfd1097908be.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":418,"hashid":"meyswwj99","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}