-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (61 loc) · 2.64 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./reset.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<script src="./dist/main.js" defer></script>
<title>To-Do List</title>
</head>
<body>
<header>To-Do List</header>
<div class="sidebar">
<div class="add-button">
<span class="material-icons md-24">add_circle_outline</span>
</div>
</div>
<div class="content">
<div class="list" data-list="0">
<header>Untitled</header>
<div class="add-item">
<i class="material-icons">add_circle_outline</i>
</div>
<div class="list-content">
</div>
</div>
</div>
</div>
<footer>© Jasper Calder</footer>
<div class="soft-background hidden" id="delete-background"></div>
<div class="confirm-delete hidden">
<h1>Delete this list?</h1>
<div class="delete-choices">
<button id="yes-delete">Yes</button>
<button id="cancel-delete">Cancel</button>
</div>
</div>
<div class="soft-background hidden" id="new-item-background"></div>
<form class="new-item hidden">
<input type="text" name="task" id="task" placeholder="Task" required>
<input type="date" name="due-date" id="due-date" required>
<h1>Importance</h1>
<div class="importance">
<input type="radio" name="importance" id="low" value="1" checked>
<label class="importance" style="background-color:rgb(255, 255, 137)" for="low"></label>
<input type="radio" name="importance" id="med" value="2">
<label class="importance" style="background-color:rgb(255, 205, 113)" for="med"></label>
<input type="radio" name="importance" id="high" value="3">
<label class="importance" style="background-color:rgb(252, 92, 92)" for="high"></label>
</div>
<button id="create-item" type="submit">Create</button>
</form>
</body>
</html>
<!-- Features -->
<!-- 1. Side bar featuring all the todo lists, click on a list to switch to it.
2. Main area listing each todo item, the name of the list, and an add another item button
3. Each todo item shows the name, importance, delete, a toggle-able check, and the number of days until it is due.
4. Pop-up todo form: item name, importance (green, yellow, red), due date -->