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

{"id":265281,"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 4\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\":\"let data = []; // 儲存代辦清單資料的陣列\\r\\n\\r\\n// 新增元素至介面上\\r\\nfunction addItem(item) {\\r\\n    // 組合 HTML 字串，把資料 id 也寫在 div 裡面刪除或修改時會使用到它\\r\\n    let html = `\\r\\n        \u003cdiv class=\\\"item ${item.checked ? 'done' : ''}\\\" data-id=\\\"${item.id}\\\"\u003e\\r\\n            \u003cdiv class=\\\"item-checkbox\\\"\u003e\u003c/div\u003e\\r\\n            \u003cspan class=\\\"item-text\\\"\u003e${item.text}\u003c/span\u003e\\r\\n            \u003cbutton class=\\\"item-delete\\\"\u003e–\u003c/button\u003e\\r\\n        \u003c/div\u003e\\r\\n    `\\r\\n    $('#list').append(html);\\r\\n}\\r\\n\\r\\n// 當輸入框按下任意按鍵時執行此函式\\r\\nfunction onKeypress(event) {\\r\\n\\r\\n    if (event.keyCode == 13) {\\r\\n        let text = $(this).val();\\r\\n        $(this).val('');\\r\\n\\r\\n        let item = {\\r\\n            id: Math.floor(Math.random() * 1000000), // 給予一個隨機數當作 id，刪除或修改時會透過它來找對應的資料\\r\\n            text: text,\\r\\n            checked: false\\r\\n        }\\r\\n\\r\\n        addItem(item); // 將 item 物件資料新增至介面上\\r\\n        data.push(item); // 將 item 物件資料新增至陣列中\\r\\n    }\\r\\n\\r\\n    saveData(); // 將資料儲存至瀏覽器中\\r\\n}\\r\\n\\r\\n// 刪除事項\\r\\nfunction deleteItem() {\\r\\n    // 要移除的是整個項目而不是刪除按鈕，透過 .parent 可以取得上一層的父元素\\r\\n    let id = $(this).parent().data('id'); // 取得元件 data-id 屬性裡面的值\\r\\n    $(this).parent().remove(); // 移除元素\\r\\n\\r\\n    let newData = []\\r\\n    for (let i = 0; i \u003c data.length; i++) {\\r\\n        if (data[i].id != id) { // 迴圈資料逐一取出比對，id 一樣表示是要移除的資料，就不加入 newData 陣列中\\r\\n            newData.push(data[i]);\\r\\n        }\\r\\n    }\\r\\n    data = newData; // 替換 data 陣列\\r\\n    saveData(); // 將資料儲存至瀏覽器中\\r\\n}\\r\\n\\r\\n// 設定是否完成\\r\\nfunction toggleCheck() {\\r\\n    let id = $(this).data('id'); // 取得元件 data-id 屬性裡面的值\\r\\n    $(this).toggleClass('done');\\r\\n\\r\\n    // 迴圈將資料從 data 陣列中逐一讀取，找到符合 id 的資料並修改其 checked 屬性\\r\\n    for (let i = 0; i \u003c data.length; i++) {\\r\\n        if (data[i].id == id) {\\r\\n            data[i].checked = $(this).hasClass('done'); // 判斷此元素有沒有 done 的 class\\r\\n        }\\r\\n    }\\r\\n\\r\\n    saveData(); // 將資料儲存至瀏覽器中\\r\\n}\\r\\n\\r\\n// 將資料存入瀏覽器中\\r\\nfunction saveData() {\\r\\n    let dataString = JSON.stringify(data);\\r\\n    // 將 data 資料轉換成字串，可以印出 dataString 看看長什麼樣子\\r\\n\\r\\n    localStorage.setItem('apple', dataString);\\r\\n    // 將轉換後的字串資料存入瀏覽器的資料庫中，apple 可以任意命名，就像是幫這筆資料加上名稱，日後讀取資料時才能找到\\r\\n}\\r\\n\\r\\n// 從瀏覽器中載入資料\\r\\nfunction loadData() {\\r\\n    let dataString = localStorage.getItem('apple');\\r\\n    // 從瀏覽器的資料庫中讀取出字串資料，apple 是當初我們存入資料時給予的名稱\\r\\n\\r\\n    if (dataString) data = JSON.parse(dataString);\\r\\n    // 將字串資料恢復成陣列和物件的複合式資料，如果 dataString 不存在就不理會它，因為使用者可能是第一次執行這個網頁\\r\\n}\\r\\n\\r\\n$('#list').on('click', '.item', toggleCheck);\\r\\n$('#list').on('click', '.item-delete', deleteItem);\\r\\n$('#submit').keypress(onKeypress);\\r\\n\\r\\nloadData(); //網頁載入後預設執行 loadData 將資料從瀏覽器中讀出\\r\\ndata.forEach(addItem); //將資料更新至介面上\"}","created_at":"2021-06-25T13:18:18.742+08:00","updated_at":"2021-06-25T13:19:06.498+08:00","name":"level_4","language":"web","screenshot":{"url":"https://cdn2.koding.school/uploads/project/screenshot/265281/1d20550116d062ee960c1645e83696c7.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":43,"hashid":"npms35g9q","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}