待辦清單 | Programming Project | OrangeApple Learning Platform

{"id":554186,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n  \u003ctitle\u003e待辦清單\u003c/title\u003e\\n  \u003cstyle\u003e\\n    body {\\n      background-image: url('https://greatergood.berkeley.edu/images/uploads/Forest_in_Japan.jpg');\\n      background-size: cover;\\n      background-repeat: no-repeat;\\n      background-position: center;\\n    }\\n\\n    ul {\\n      list-style-type: none;\\n      padding: 0;\\n    }\\n\\n    li {\\n      margin-bottom: 5px;\\n    }\\n\\n    .btn {\\n      background-color: blue;\\n      color: white;\\n      padding: 5px 10px;\\n      border: none;\\n      cursor: pointer;\\n    }\\n  \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n  \u003ch1\u003e待辦清單\u003c/h1\u003e\\n\\n  \u003cform id=\\\"todo-form\\\"\u003e\\n    \u003cinput type=\\\"text\\\" id=\\\"todo-input\\\" placeholder=\\\"新增項目\\\"\u003e\\n    \u003cbutton type=\\\"submit\\\" class=\\\"btn\\\"\u003e新增\u003c/button\u003e\\n  \u003c/form\u003e\\n\\n  \u003cul id=\\\"todo-list\\\"\u003e\\n    \u003c!-- 項目會被動態加入這個清單 --\u003e\\n  \u003c/ul\u003e\\n\\n  \u003cscript\u003e\\n    // 用於新增項目\\n    function addItem() {\\n      var input = document.getElementById('todo-input');\\n      var itemText = input.value;\\n\\n      if (itemText !== '') {\\n        var listItem = document.createElement('li');\\n        listItem.innerText = itemText;\\n\\n        var removeButton = document.createElement('button');\\n        removeButton.innerText = '移除';\\n        removeButton.onclick = function() {\\n          this.parentNode.remove();\\n        };\\n\\n        var editButton = document.createElement('button');\\n        editButton.innerText = '編輯';\\n        editButton.onclick = function() {\\n          var newText = prompt('編輯項目', this.parentNode.innerText);\\n          if (newText !== null) {\\n            this.parentNode.innerText = newText;\\n          }\\n        };\\n\\n        listItem.appendChild(removeButton);\\n        listItem.appendChild(editButton);\\n\\n        document.getElementById('todo-list').appendChild(listItem);\\n        input.value = '';\\n      }\\n\\n      return false;\\n    }\\n\\n    document.getElementById('todo-form').onsubmit = addItem;\\n  \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\",\"css\":\"\",\"js\":\"\"}","created_at":"2023-06-27T11:24:43.163+08:00","updated_at":"2023-06-27T11:27:41.410+08:00","name":"待辦清單","language":"web","screenshot":{"url":"/uploads/project/screenshot/554186/c912eaeeec362873c246b67254b64e1c.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":344,"hashid":"6rps244j4","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}