-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
112 lines (97 loc) · 5.35 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
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
<!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">
<title> To Do List with Local Storage </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystyles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="text-success">To Do List (with local storage)</h1>
<p class="lead">This To Do list app saves your list items locally, on your computer. You don't need to be online to use it, and none of your data is sent out to the Internet. <span id="showMore"><a href="#">[more]</a></span></p>
<p class="lead" id="moreText">Because of the way localStorage works, you will not be able to see this To Do list on another device, or even in another browser on the same device. If that suits your needs, you can rely on this small app to manage your personal To Do items. To learn more about localStorage, see <a href="https://www.w3.org/TR/webstorage/#the-localstorage-attribute" target="_blank">this</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage" target="_blank">this</a>. <span id="showLess"><a href="#">[less]</a></span></p>
</div> <!-- close col -->
</div> <!-- close row -->
<form id="newItemForm" class="form-horizontal">
<p id="paraToHideForm"><a href="#" id="hideForm">View your To Do list</a></p>
<fieldset class="well">
<legend>Add a New To Do Item</legend>
<div class="form-group">
<label for="itemname" class="col-sm-2 control-label">Item Name</label>
<div class="col-sm-10">
<input type="text" name="itemname" id="itemname" class="form-control" maxlength="80" required>
</div>
</div>
<div class="form-group">
<label for="duedate" class="col-sm-2 control-label">Due Date</label>
<div class="col-sm-10">
<input type="date" name="duedate" id="duedate" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="descrip" class="col-sm-2 control-label">Details</label>
<div class="col-sm-10">
<textarea name="descrip" id="descrip" rows="4" maxlength="300" placeholder="No more than 300 characters long" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<label for="priority" class="col-sm-2 control-label">Priority</label>
<div class="col-sm-10">
<select class="form-control" name="priority" id="priority">
<option value=1>Highest</option>
<option value=2>High</option>
<option value=3 selected>Middle</option>
<option value=4>Low</option>
<option value=5>Lowest</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2 col-xs-12">
<input type="submit" class="btn btn-success form-control" value="Add Item">
</div>
<div class="col-sm-4 col-xs-12">
<input type="reset" class="btn btn-default form-control" value="Cancel">
</div>
</div>
</fieldset>
</form>
<!-- this will be hidden at times -->
<div class="row" id="toDoDataRow">
<div class="col-xs-12">
<h2>My To Do Items</h2>
<p><a href="#" id="showForm">Enter a new To Do item</a> — open form</p>
<!-- buttons above list -->
<div class='floater'>
<button class='btn btn-success removeAll'>Remove Checked Items</button>
</div>
<div class='floater'>
<button class='btn btn-primary' id='sortPri'>Sort by Priority</button>
</div>
<div class='floater'>
<button class='btn btn-info' id='sortDate'>Sort by Due Date</button>
</div>
<!-- To Do items go here -->
<div id="toDoData" class="clearfix"></div>
<!-- final button -->
<div class='floater'>
<button class='btn btn-success removeAll'>Remove Checked Items</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p class="credits">This is a personal coding project by <a href="https://mindymcadams.com/" target="_blank">Mindy McAdams</a>. My goal was to learn about <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API" target="_blank">localStorage</a>. Code on <a href="https://github.com/macloo/to-do-list-localstorage" target="_blank">GitHub</a>. Bootstrap theme: <a href="https://bootswatch.com/sandstone/" target="_blank">Sandstone</a>.</p>
</div>
</div>
</div> <!-- close container -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>