-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
39 lines (38 loc) · 1.5 KB
/
main.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
<!DOCTYPE html>
<html lang="en">
<div id="knockout-app" class="card">
<head>
<link rel="stylesheet" href="stylesheet.css" />
</head>
<header>Good dog walks inc.</header>
<div class="card-section">
<h2>Toy inventory</h2>
<p data-bind="visible: inventory().length > 0">There are the assets we have to work with</p>
<!-- If this list has toys i want to shows it -->
<p data-bind="visible: inventory().length === 0">You don't have any toys yet!</p>
<!-- is the list is empty i want to show it -->
<button data-bind="click: addItem, enable: inventory().length < 4">+ Add toy</button>
<!-- i want the button to be enabled as long as the inventory is less than certain amount of if you think of it in like the negative sense you could disable it, if the buttono is a certain amount. -->
<ul class="counter-ui-container" data-bind="foreach: inventory">
<li>
<span>
<span data-bind="class: $data.icon"></span>
<span data-bind="text: $data.text"></span>
</span>
<span>
<button data-bind="click: $parent.removeItem, attr: { 'item-index': $index }">
×
</button>
</span>
</li>
</ul>
</div>
<body>
<script type="text/javascript" src="../knockout-3.5.1.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
<footer>
<span> Have a tail wagging day! </span>
</footer>
</div>
</html>