-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtodoList.html
130 lines (108 loc) · 4.19 KB
/
todoList.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<title>Self Learning Platform</title>
<meta charset="UTF-8" />
<link rel="icon" href="/add.png" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<!--
Need a visual blank slate?
Remove all code in `styles.css`!
-->
<link rel="stylesheet" href="todoCSS.css" />
<script type="module" src="script.js"></script>
</head>
<body>
<div class="menu">
<input type="image" class="menu-button" onclick="toggleDropdown()" src="https://www.clipartmax.com/png/full/158-1587307_burger-menu-icon-white.png"/>
<h1 class="menu">To-do List</h1>
<div class="dropdown" id="myDropdown">
<a href="/addTodo.html">Add Task</a>
<a href="/todoList.html">To-do List</a>
<a href="/timer.html">Timer</a>
</div>
</div>
<div class="overlay" id="myOverlay" onclick="closeDropdown()"></div>
<div class="separator"></div> <!--分隔線-->
<div class="tile" id="tilesContainer">
<!--<div class="tile-item" id="tile" onclick="toggleSubmenu(this)">tile1</div>
<div class="subtile">
<div class="subtile-item" id="subtile">
<p>選項 1</p>
</div>
<input type="button" class="subtile-button" value="Start Working"><p></p>
</div> -->
</div>
<input type="image" class="addButton" id="addButton" src="/add.png">
<script>
const userID = localStorage.getItem("userID")
copyTile()
const button = document.getElementById("addButton")
button.addEventListener("click",function(){
window.location.href="/addtodo.html"
})
function toggleDropdown() { //menu button
const dropdown = document.getElementById("myDropdown");
const overlay = document.getElementById("myOverlay");
dropdown.classList.toggle("show");
overlay.classList.toggle("show");
}
function closeDropdown() {
const dropdown = document.getElementById("myDropdown");
const overlay = document.getElementById("myOverlay");
dropdown.classList.remove("show");
overlay.classList.remove("show");
}
// tile menu
window.onclick = function(event) {
if (!event.target.matches('.menu-button')) {
closeDropdown();
}
}
function toggleSubmenu(menuItem) {
const submenu = menuItem.nextElementSibling;
submenu.classList.toggle('open');
}
async function copyTile() {
const res = await fetch('https://script.google.com/macros/s/AKfycbxtlx7G2v3Z9NfFKPD5nylJBkFMrL4q1vuxXqZnikjFizS9_46ePjA52Yq14MZvnqfq/exec'
+`?action=${"todoList"}&userID=${userID}`)
const text = await res.text()
const task = JSON.parse(text)
for (let i = 0 ; i < task.length;i ++) {
const params = new URLSearchParams(task[i]);
const title = params.get('titleID');
const description = params.get('descriptionID');
const tilesContainer = document.getElementById('tilesContainer');
const tileItem = document.createElement('div');
tileItem.className = 'tile-item';
tileItem.onclick = function() { toggleSubmenu(tileItem); };
tileItem.textContent = title;
const subtile = document.createElement('div');
subtile.className = 'subtile';
const subtileItem = document.createElement('div');
subtileItem.className = 'subtile-item';
subtileItem.id = 'subtile';
const p = document.createElement('p');
p.textContent = description;
const startButton = document.createElement('input');
startButton.type = 'button';
startButton.id = i;
startButton.className = 'subtile-button';
startButton.value = 'Start Working';
subtileItem.appendChild(p);
subtile.appendChild(subtileItem);
subtile.appendChild(startButton);
tilesContainer.appendChild(tileItem);
tilesContainer.appendChild(subtile);
}
const items = document.querySelectorAll('.subtile-button')
items.forEach(item => {
item.addEventListener('click', function() {
const itemId = this.getAttribute('id');
localStorage.setItem("task",task[itemId])
window.location.href= "/timer.html"
})
})
}
</script>
</body>