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

{"id":265279,"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 2\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\\r\\n            \u003cdiv class=\\\"item\\\"\u003e\\r\\n                \u003cdiv class=\\\"item-checkbox\\\"\u003e\u003c/div\u003e\\r\\n                \u003cspan class=\\\"item-text\\\"\u003e撿飛碟\u003c/span\u003e\\r\\n                \u003cbutton class=\\\"item-delete\\\"\u003e–\u003c/button\u003e\\r\\n            \u003c/div\u003e\\r\\n            \u003cdiv class=\\\"item\\\"\u003e\\r\\n                \u003cdiv class=\\\"item-checkbox\\\"\u003e\u003c/div\u003e\\r\\n                \u003cspan class=\\\"item-text\\\"\u003e收集太空元素\u003c/span\u003e\\r\\n                \u003cbutton class=\\\"item-delete\\\"\u003e–\u003c/button\u003e\\r\\n            \u003c/div\u003e\\r\\n            \u003cdiv class=\\\"item\\\"\u003e\\r\\n                \u003cdiv class=\\\"item-checkbox\\\"\u003e\u003c/div\u003e\\r\\n                \u003cspan class=\\\"item-text\\\"\u003e尋找太空貓\u003c/span\u003e\\r\\n                \u003cbutton class=\\\"item-delete\\\"\u003e–\u003c/button\u003e\\r\\n            \u003c/div\u003e\\r\\n            \u003cdiv class=\\\"item\\\"\u003e\\r\\n                \u003cdiv class=\\\"item-checkbox\\\"\u003e\u003c/div\u003e\\r\\n                \u003cspan class=\\\"item-text\\\"\u003e幫媽媽倒垃圾\u003c/span\u003e\\r\\n                \u003cbutton class=\\\"item-delete\\\"\u003e–\u003c/button\u003e\\r\\n            \u003c/div\u003e\\r\\n        \u003c/div\u003e\\r\\n        \u003cinput id=\\\"submit\\\" type=\\\"text\\\" placeholder=\\\"寫下要做的事情並按下 enter...\\\"\u003e\\r\\n    \u003c/div\u003e\\r\\n\\r\\n    \u003c!-- 載入 jQuery 套件 --\u003e\\r\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.6.0.min.js\\\"\u003e\u003c/script\u003e\\r\\n\\r\\n    \u003c!-- 載入 index.js 程式並執行 --\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    background-color: #f7f7f7; /* 設定整個網頁背景色 */\\r\\n    font-family: Arial, sans-serif; /* 設定整個網頁的字體 */\\r\\n}\\r\\n\\r\\n#app {\\r\\n    width: 370px;\\r\\n    margin: auto; /* margin 屬性經常用來向其他元素推擠，設定為 auto 就會將自己推到中間 */\\r\\n}\\r\\n\\r\\n.title {\\r\\n    padding: 15px; /* 內距 15px */\\r\\n    color: #fff;\\r\\n    background-color: #de3f53;\\r\\n    margin: 0; /* 移除 h2 預設的 margin，試著移除看看會發生什麼事情 */\\r\\n    border-radius: 5px 5px 0px 0px; /* 左上角和右上角倒角 5px */\\r\\n}\\r\\n\\r\\n.item {\\r\\n    display: flex; /* 使用 flex 來做內容的佈局 */\\r\\n    align-items: center; /* 使用 flex 佈局可以設定這個屬性，讓內容物垂直置中 */\\r\\n    padding: 20px;\\r\\n    border-bottom: 1px solid #1c2340; /* 下邊框 1px 寬實心 */\\r\\n    color: #cbccdd;\\r\\n    background-color: #262e4c;\\r\\n    cursor: pointer; /* 滑鼠滑上去呈現手指符號 */\\r\\n}\\r\\n\\r\\n/* 當 .item 元素被滑鼠覆蓋時變換背景顏色 */\\r\\n.item:hover {\\r\\n    background-color: #2a3353;\\r\\n}\\r\\n\\r\\n/* 當 .item 元素被滑鼠覆蓋時 */\\r\\n.item:hover .item-delete {\\r\\n    display: block; /* 預設是 none 覆蓋時改為 block 刪除按鈕就會出現 */\\r\\n}\\r\\n\\r\\n.item-text {\\r\\n    margin-left: 20px; /* 向左推 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; /* 設為 none 此元素就會被隱藏 */\\r\\n    width: 20px;\\r\\n    height: 20px;\\r\\n    border-radius: 10px;\\r\\n    border-width: 0; /* 移除按鈕預設的邊框 */\\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.item-delete:hover {\\r\\n    color: #de3f53;\\r\\n    background-color: #fff;\\r\\n}\\r\\n\\r\\n/* 元素同時有 item 和 dome 兩個類別時，其底下的 .item-checkbox 背景變顏色 */\\r\\n.item.done .item-checkbox {\\r\\n    background-color: #7882a5;\\r\\n}\\r\\n\\r\\n/* 元素同時有 item 和 dome 兩個類別時，其底下的 .item-text 文字變顏色 */\\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    border-radius: 0px 0px 5px 5px; /* 左下角和右下角倒角 5px */\\r\\n    color: #fff;\\r\\n    background-color: #171d37;\\r\\n    outline: none; /* 當輸入被點擊時，移除預設的邊框 */\\r\\n    box-sizing: border-box;\\r\\n}\",\"js\":\"// 當輸入框按下任意按鍵時執行此函式\\r\\nfunction onKeypress(event) {\\r\\n\\r\\n    // event 參數下有一個 keyCode 數值代表觸發的按鍵，數值 13 表示 enter 按鍵\\r\\n    if (event.keyCode == 13) {\\r\\n        let text = $(this).val(); // 讀取輸入框的資料\\r\\n        $(this).val(''); // 設定輸入框的資料，設定空字串表示清空它\\r\\n\\r\\n        // 組合 HTML 字串\\r\\n        let html = `\\r\\n        \u003cdiv class=\\\"item\\\"\u003e\\r\\n            \u003cdiv class=\\\"item-checkbox\\\"\u003e\u003c/div\u003e\\r\\n            \u003cspan class=\\\"item-text\\\"\u003e${text}\u003c/span\u003e\\r\\n            \u003cbutton class=\\\"item-delete\\\"\u003e–\u003c/button\u003e\\r\\n        \u003c/div\u003e\\r\\n        `\\r\\n\\r\\n        $('#list').append(html); // 將 html 字串寫入 id 為 list 的元素內\\r\\n    }\\r\\n}\\r\\n\\r\\n// 刪除事項\\r\\nfunction deleteItem() {\\r\\n    // $(this).parent().remove(); // 移除元素\\r\\n    $(this).parent().fadeOut(); // 移除元素\\r\\n}\\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// $('.item').on('click', toggleCheck); // 當 .item 元素被點擊時，執行 toggleCheck\\r\\n// $('.item-delete').on('click', deleteItem); // 當 .item-delete 元素被點擊時，執行 deleteItem\\r\\n$('#submit').keypress(onKeypress); //當 #submit 輸入框正在輸入時執行 onKeypress\"}","created_at":"2021-06-25T13:14:27.329+08:00","updated_at":"2021-06-25T13:15:29.128+08:00","name":"level_2","language":"web","screenshot":{"url":"https://cdn0.koding.school/uploads/project/screenshot/265279/5ba41c8f0e1ef9cadd728984f4177682.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":41,"hashid":"qmds8d4md","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}