範例 | Programming Project | OrangeApple Learning Platform

{"id":551515,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eTodo List\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003ch1\u003eTodo List\u003c/h1\u003e\\n    \u003cinput type=\\\"text\\\" id=\\\"new-task\\\" placeholder=\\\"New Task\\\" /\u003e\\n    \u003cbutton id=\\\"add-task\\\"\u003eAdd Task\u003c/button\u003e\\n    \u003cul id=\\\"task-list\\\"\u003e\u003c/ul\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.7.0.min.js\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/forerunnerdb/2.0.24/fdb-all.min.js\\\"\u003e\u003c/script\u003e\\n    \u003cscript\u003e\\n        // 創建一個新的 ForerunnerDB 實例\\n        var fdb = new ForerunnerDB();\\n\\n        // 使用實例創建一個名為 'todoDB' 的數據庫\\n        var db = fdb.db('todoDB');\\n\\n        // 在數據庫中創建一個名為 'tasks' 的集合來儲存我們的任務\\n        var taskCollection = db.collection('tasks');\\n\\n        // 當文件完成加載時觸發這個函數\\n        $(document).ready(function() {\\n            // 載入先前儲存在 'tasks' 集合中的任務\\n            taskCollection.load(function() {\\n                // 載入完畢後渲染任務列表\\n                renderTasks();\\n            });\\n\\n            // 在點擊 'add-task' 按鈕時執行此函數\\n            $('#add-task').on('click', function() {\\n                // 從輸入框獲取新的任務內容\\n                var newTask = $('#new-task').val();\\n\\n                // 在 'tasks' 集合中插入新的任務\\n                taskCollection.insert({\\n                    task: newTask\\n                });\\n\\n                // 將新的任務列表儲存到數據庫\\n                taskCollection.save();\\n\\n                // 清空輸入框的內容\\n                $('#new-task').val('');\\n\\n                // 重新渲染任務列表以顯示新的任務\\n                renderTasks();\\n            });\\n        });\\n\\n        // 定義一個函數用於渲染任務列表\\n        function renderTasks() {\\n            // 選取 'task-list' 元素\\n            var $taskList = $('#task-list');\\n\\n            // 清空任務列表\\n            $taskList.empty();\\n\\n            // 從 'tasks' 集合中尋找所有任務\\n            var tasks = taskCollection.find();\\n\\n            // 對每一個找到的任務進行以下操作\\n            tasks.forEach(function(task) {\\n                // 創建一個新的列表項並設定其內容為任務的內容\\n                var $listItem = $('\u003cli\u003e\u003c/li\u003e').text(task.task);\\n\\n                // 將新創建的列表項加到任務列表中\\n                $taskList.append($listItem);\\n            });\\n        }\\n\\n    \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    background: white;\\n}\",\"js\":\"\"}","created_at":"2023-06-13T14:41:54.227+08:00","updated_at":"2023-06-13T14:59:09.141+08:00","name":"範例","language":"web","screenshot":{"url":"/uploads/project/screenshot/551515/ade3d60e4aacfd347aa4ca2e4f11baf9.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":284,"hashid":"npmszj96g","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}