-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
42 lines (39 loc) · 1.42 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
<!DOCTYPE html>
<html>
<head>
<title>Shutters.biz - Blinds.com Interview Test</title>
<link rel="stylesheet" type="text/css" href="shutters.css">
</head>
<body>
<div id="header">
<h1>Shutters.biz</h1>
<input data-bind="value: searchTerm" />
<button data-bind="click: submitSearch">Search</button>
</div>
<div id="properties">
<p>Sort by: <a href="#" data-bind="click:sortByFeatured">Featured</a> | <a href="#" data-bind="click: sortByName">Name</a> | <a href="#" data-bind="click: sortByPrice">Price</a></p>
</div>
<div id="content" data-bind="foreach: shutters">
<div class="item">
<div class="item-left">
<div class="item-image" data-bind="html: image"></div>
<div class="item-featured" data-bind="html: featured"></div>
</div>
<div class ="item-middle">
<div class="item-name" data-bind="text: name"></div>
</div>
<div class ="item-right">
<div class="item-price" data-bind="text: price"></div>
<div class="item-rating" data-bind="text: rating"></div>
</div>
</div>
</div>
<div id="loading">
<img href="img/ajax-loader.gif" src="img/ajax-loader.gif" alt="Loading..."/>
</div>
<div id="error">You have not entered a search term</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="js/shutters.js"></script>
</body>
</html>