/
index.html
84 lines (70 loc) · 3.56 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
<!-- the shopLISTer
By Alex K. Fong for Thinkful's FEWD course
This version simplifies the UI by removing implementation
of per item UI. -->
<!-- Features currently working
1. Hideable instructions
2. Adding items to regular list area
3. Prevent empty strings from being added to the list
4. Delete items in both shopping and purchased lists
5. You can check off items by clicking and dragging.
6. Items may now also be sorted -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Shop Lister</title>
<!-- Initialize typekit -->
<script src="https://use.typekit.net/mlg3xfl.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- Link style sheets -->
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/styles.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- CDN call to JQUERY -->
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<!-- Switch to local if access to Google is restricted -->
<script>!window.jQuery && document.write('<script src="js/jquery-2.1.4.min.js"><\/script>')</script>
<!-- Start up JQuery UI -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Link to my JavaScript -->
<script src="JS/app.js"></script>
</head>
<body class="paddingAbove50 paddingBelow50">
<header class="masthead grid12 center">
<div class="grid2 center">
<img class="mastheadLogo center" src="images/shop-lister-logo.svg" alt="The Shop Lister logo">
</div>
<h1 class="mastheadTitle centerText spaceAbove20"><span class="mastheadThe">THE</span> SHOP <span class="mastheadList">LIST</span>ER</h1>
</header>
<!-- App instructions for users here -->
<section id="instructions" class="grid12 center spaceAbove20">
<!-- Show instructions by default -->
<div ID="instructionsSection">
<h2 class="centerText">Instructions</h2>
<p class="centerText spaceAbove10">Add items to your shopping list by typing in the field and then clicking the <i class="fa fa-plus-circle"></i>.<br>Remove items by deleting the text followed by hitting the enter or return key.<br>Check off your items by clicking its handlebar and dragging it into the purchased list.<br>You can also sort both lists by clicking and dragging.</p>
<p id="hideButton" class="roundedRectangle grid2 center centerText spaceAbove20">Hide</p>
</div>
<!-- By default, hide button is hidden -->
<p id="buttonReadInstructions" class="roundedRectangle grid4 center centerText spaceAbove20">Read instructions</p>
</section>
<!-- Interface HTML -->
<section id="interface" class="grid12 spaceAbove30 center">
<h2 class="centerText">Add</h2>
<input class="grid12 spaceAbove20 centerText" type="text" id="addListItem"></input>
<div id="interfaceAddButton" class="roundedRectangle grid1 center spaceAbove20 centerText"><i class="fa fa-plus-circle"></i>
</section>
<!-- Items on the shopping list are displayed here. Also, basic interface for manipulating the list will be here. -->
<section id="shoppingListSection" class="grid12 spaceAbove30 center">
<h2 class="centerText">What you want</h2>
<ul id="shoppingList" class="grid12 paddingBelow50 connectedSortable">
</ul>
</section>
<!-- Items on the shopping list are displayed here. Also, basic interface for manipulating the list will be here. -->
<section class="grid12 spaceAbove30 center">
<h2 class="centerText">What you've bought</h2>
<ul id="purchasedList" class="grid12 paddingBelow50 connectedSortable">
</ul>
</section>
</body>
</html>