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

{"id":265280,"student_id":3760,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\r\\n\u003chtml lang=\\\"en\\\"\u003e\\r\\n\\r\\n\u003chead\u003e\\r\\n    \u003ctitle\u003eLevel 3\u003c/title\u003e\\r\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"index.css\\\"\u003e\\r\\n\u003c/head\u003e\\r\\n\\r\\n\u003cbody\u003e\\r\\n    \u003cdiv id=\\\"app\\\"\u003e\\r\\n        \u003ch2 class=\\\"title\\\"\u003e待辦清單\u003c/h2\u003e\\r\\n        \u003cdiv id=\\\"list\\\"\u003e\u003c/div\u003e\\r\\n        \u003cinput id=\\\"submit\\\" type=\\\"text\\\" placeholder=\\\"寫下要做的事情並按下 enter...\\\"\u003e\\r\\n    \u003c/div\u003e\\r\\n\\r\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.6.0.min.js\\\"\u003e\u003c/script\u003e\\r\\n    \u003cscript src=\\\"./index.js\\\"\u003e\u003c/script\u003e\\r\\n\u003c/body\u003e\\r\\n\\r\\n\u003c/html\u003e\",\"css\":\"body {\\r\\n    padding: 30px;\\r\\n    /* 設定整個網頁的內距 */\\r\\n    background-color: #f7f7f7;\\r\\n    /* 設定整個網頁背景色 */\\r\\n    font-family: Arial, sans-serif;\\r\\n    /* 設定整個網頁的字體 */\\r\\n}\\r\\n\\r\\n#app {\\r\\n    width: 370px;\\r\\n    margin: auto;\\r\\n    /* margin 屬性經常用來向其他元素推擠，設定為 auto 就會將自己推到中間 */\\r\\n}\\r\\n\\r\\n.title {\\r\\n    padding: 15px;\\r\\n    /* 內距 15px */\\r\\n    color: #fff;\\r\\n    background-color: #de3f53;\\r\\n    margin: 0;\\r\\n    /* 移除 h2 預設的 margin，試著移除看看會發生什麼事情 */\\r\\n    border-radius: 5px 5px 0px 0px;\\r\\n    /* 左上角和右上角倒角 5px */\\r\\n}\\r\\n\\r\\n.item {\\r\\n    display: flex;\\r\\n    /* 使用 flex 來做內容的佈局 */\\r\\n    align-items: center;\\r\\n    /* 使用 flex 佈局可以設定這個屬性，讓內容物垂直置中 */\\r\\n    padding: 20px;\\r\\n    border-bottom: 1px solid #1c2340;\\r\\n    /* 下邊框 1px 寬實心 */\\r\\n    color: #cbccdd;\\r\\n    background-color: #262e4c;\\r\\n    cursor: pointer;\\r\\n    /* 滑鼠滑上去呈現手指符號 */\\r\\n}\\r\\n\\r\\n\\r\\n/* 當 .item 元素被滑鼠覆蓋時變換背景顏色 */\\r\\n\\r\\n.item:hover {\\r\\n    background-color: #2a3353;\\r\\n}\\r\\n\\r\\n\\r\\n/* 當 .item 元素被滑鼠覆蓋時 */\\r\\n\\r\\n.item:hover .item-delete {\\r\\n    display: block;\\r\\n    /* 預設是 none 覆蓋時改為 block 刪除按鈕就會出現 */\\r\\n}\\r\\n\\r\\n.item-text {\\r\\n    margin-left: 20px;\\r\\n    /* 向左推 20px 遠離 checkbox */\\r\\n    margin-right: auto;\\r\\n}\\r\\n\\r\\n.item-checkbox {\\r\\n    width: 10px;\\r\\n    height: 10px;\\r\\n    border-radius: 50%;\\r\\n    border: 5px solid #404a6e;\\r\\n    background-color: #404a6e;\\r\\n}\\r\\n\\r\\n.item-delete {\\r\\n    display: none;\\r\\n    /* 設為 none 此元素就會被隱藏 */\\r\\n    width: 20px;\\r\\n    height: 20px;\\r\\n    border-radius: 10px;\\r\\n    border-width: 0;\\r\\n    /* 移除按鈕預設的邊框 */\\r\\n    font-weight: 900;\\r\\n    cursor: pointer;\\r\\n    color: #fff;\\r\\n    background-color: #de3f53;\\r\\n}\\r\\n\\r\\n\\r\\n/* 刪除按鈕被滑鼠覆蓋時，對調背景和文字顏色 */\\r\\n\\r\\n.item-delete:hover {\\r\\n    color: #de3f53;\\r\\n    background-color: #fff;\\r\\n}\\r\\n\\r\\n\\r\\n/* 元素同時有 item 和 dome 兩個類別時，其底下的 .item-checkbox 背景變顏色 */\\r\\n\\r\\n.item.done .item-checkbox {\\r\\n    background-color: #7882a5;\\r\\n}\\r\\n\\r\\n\\r\\n/* 元素同時有 item 和 dome 兩個類別時，其底下的 .item-text 文字變顏色 */\\r\\n\\r\\n.item.done .item-text {\\r\\n    color: #8284a3;\\r\\n    text-decoration: line-through;\\r\\n}\\r\\n\\r\\ninput {\\r\\n    width: 100%;\\r\\n    padding: 20px;\\r\\n    border-width: 0;\\r\\n    /* 移除輸入框預設邊框樣式 */\\r\\n    border-radius: 0px 0px 5px 5px;\\r\\n    /* 左下角和右下角倒角 5px */\\r\\n    color: #fff;\\r\\n    background-color: #171d37;\\r\\n    outline: none;\\r\\n    /* 當輸入被點擊時，移除預設的邊框 */\\r\\n    box-sizing: border-box;\\r\\n}\",\"js\":\"// 使用 data 陣列存放清單的資料，每一筆資料是一個物件，該物件有兩個屬性分別是項目描述的字串以及是否完成的布林值\\r\\nlet data = [\\r\\n    { text: '撿飛碟', checked: true },\\r\\n    { text: '收集太空元素', checked: true },\\r\\n    { text: '尋找太空貓', checked: false },\\r\\n    { text: '幫媽媽倒垃圾', checked: false },\\r\\n]\\r\\n\\r\\n// 使用迴圈將資料從陣列中逐一取出，並透過 addItem 將資料新增至畫面上\\r\\n// for (let i = 0; i \u003c data.length; i++) {\\r\\n//     addItem(data[i]);\\r\\n// }\\r\\ndata.forEach(elem =\u003e {\\r\\n    addItem(elem);\\r\\n});\\r\\n\\r\\nfunction addItem(item) {\\r\\n    let html = `\\r\\n\\t\\t\u003cdiv class=\\\"item ${item.checked ? 'done' : ''}\\\"\u003e\\r\\n\\t\\t\\t\u003cdiv class=\\\"item-checkbox\\\"\u003e\u003c/div\u003e\\r\\n\\t\\t\\t\u003cspan class=\\\"item-text\\\"\u003e${item.text}\u003c/span\u003e\\r\\n\\t\\t\\t\u003cbutton class=\\\"item-delete\\\"\u003e–\u003c/button\u003e\\r\\n\\t\\t\u003c/div\u003e\\r\\n\\t`\\r\\n    $('#list').append(html);\\r\\n}\\r\\n\\r\\nfunction onKeypress(event) {\\r\\n    if (event.keyCode == 13) {\\r\\n        let text = $(this).val();\\r\\n        $(this).val('');\\r\\n        addItem({ text: text, checked: false });\\r\\n    }\\r\\n}\\r\\n\\r\\nfunction deleteItem() {\\r\\n    // $(this).parent().remove();\\r\\n    $(this).parent().fadeOut();\\r\\n}\\r\\n\\r\\nfunction toggleCheck() {\\r\\n    $(this).toggleClass('done');\\r\\n}\\r\\n\\r\\n$('#list').on('click', '.item', toggleCheck);\\r\\n$('#list').on('click', '.item-delete', deleteItem);\\r\\n$('#submit').keypress(onKeypress);\"}","created_at":"2021-06-25T13:16:04.432+08:00","updated_at":"2021-06-25T13:16:54.792+08:00","name":"level_3","language":"web","screenshot":{"url":"https://cdn6.koding.school/uploads/project/screenshot/265280/9563178063759686002a92ee0750c5f3.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":43,"hashid":"d5msvg4k2","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}