-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcart.html
229 lines (226 loc) · 13.7 KB
/
cart.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html ng-app="IntroductionApp">
<head>
<title>CodeFirst:Girls Introductory Course</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui/build/angular-ui.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
</head>
<body ng-controller="ContentController">
<div class="container" style="padding-top: 20px;">
<div class="row">
<div id="leftPane" class="col-xs-3">
<img class="cfg" src="cfg.png" alt="Code First Girls Logo" />
<p class="mini-bio">A short taster session into the fundamental technologies powering the world wide web.</p>
<div class="progress progress-danger">
<div class="progress-bar" role="progressbar" aria-valuenow="{{completedPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="width: {{completedPercentage()}}%;">
<span class="sr-only">{{completedPercentage()}}% Complete</span>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#basket">Shopping Basket</a></li>
<li><a href="#running">Running Total</a></li>
<li><a href="#how">How we'll do it</a></li>
<li><a href="#this">$(this)</a></li>
<li><a href="#attr">$(this).attr()</a></li>
<li><a href="#custom">Custom Attributes</a></li>
<li><a href="#adding">Adding</a></li>
<li><a href="#converting">Converting Strings to Numbers</a></li>
<li><a href="#displaying">Displaying on the site</a></li>
<li><a href="#decimal">Decimal Points?!</a></li>
</ul>
</div>
</div>
<div id="rightPane" class="col-xs-9">
<h1 id="basket">Shopping Basket</h1>
<p>
Okay - it's time to build the first part of our shopping cart. Although there are other parts that are important, by far the most important part of any cart is keeping the running total updated.
</p>
<p>
When a customer first browses to our little shopping site we want their total basket to be £0.00
</p>
<p>
When a customer hits one of the "Add to cart" buttons we want the total price to be updated by the correct amount.
</p>
<p>
Let's start with this.
</p>
<h2 id="running">Running total variable</h2>
<p>
We'll use a simple variable to store our running total amount. But before we can do this we need to know how to update the value of a variable after it's been set.
</p>
<p>
What we'll do below is create a variable called total and set it initially to 0. We'll then practise updating this variable by set amounts and print out the running total at each step.
</p>
<tasks>
<item title="Open Chromes Console"></item>
<item title="Create a variable called total and set it equal to 0"><code>var total = 0;</code></item>
<item title="Update the value of the variable by 10.00"><code>total = total + 10.00</code></item>
<item title="Print out the value of total by typing total"><code>total</code></item>
<item title="Update the value of the variable by 21.55"><code>total = total + 21.55</code></item>
<item title="Print out the value of total"><code>total</code></item>
</tasks>
<p>
We now know how to store a variable in JavaScript and update it as and when we want.
</p>
<h2 id="how">How we'll do this</h2>
<p>
We're going to
<ul>
<li>Create a total price variable in our code</li>
<li>Add code to our click handlers when users click on the Add to Cart buttons</li>
<li>Look up the price of the item when button clicked </li>
<li>Add that price to our total variable</li>
<li>Update the user display to show the updated total price</li>
</ul>
</p>
<h2 id="this">Remember $(this)?</h2>
<p>
Recall that when using click handlers with jQuery, $(this) gets set to the element that we clicked.
</p>
<h2 id="attr">Remember $(this).attr()</h2>
<p>
Recall that you can access an elements attributes using jQuery using <code>$('css selector').attr('attribute name')</code>
</p>
<p>
You thought that was useless, didn't you! We'll use it now to grab the price of the item that we click on, but first, custom attributes.
</p>
<h2 id="custom">HTML Custom Attributes</h2>
<p>
Although not strictly valid HTML, we can add our own HTML attributes to elements. For instance:
</p>
<pre>
<p custom="myvalue">This is a paragraph</p>
<a href="mylink.html" foo="bar">My Link</a>
<a href="#" price="10.00">Add to basket</a>
</pre>
<tasks>
<item title="Open your index.html file in Sublime">Make sure you have your index.html file open in sublime that we created earlier. The one that displays the products.</item>
<item title="Add a custom price='10.00' attribute to each of you Add to Basket buttons">The price shouldn't be 10.00, it should be the price of each of your items</item>
<item title="Save your file"></item>
</tasks>
<h2 id="adding">Let's Add!</h2>
<p>
Okay - let's now add our running total variable into our code. We'll need to be looking at the code in our <code><script></code> tag for this part!
</p>
<tasks>
<item title="Add your var total = 0;"> This should be the first bit of code inside your <code><script></code> tag. See below if you get stuck, but you only need the var total line!</item>
</tasks>
<pre>
<script>
var total = 0;
function handleClick() {
...
}
$(".item").click(handleClick);
// Code will be similar but not exactly the same
</script>
</pre>
<p>
We'll now make our total variable update each time we click on the Add to Basket buttons, but first one more bit of "theory".
</p>
<h2 id="converting">Converting Strings to Numbers</h2>
<p>
Remember that we can have different types of variables: strings and numbers. (There are a few more for the inquisitive amongst you)
</p>
<pre>
var myString = "My name is ...";
var myNumber = 10
var string = "10.00"
</pre>
<p>
In JavaScript, converting between strings and numbers is a common enough task that it has a built in function to do this!
</p>
<tasks>
<item title="Open Chrome's console"></item>
<item title="Create a string variable with a number balue"> <code>var string = "10.00"</code></item>
<item title="Convert it to a number using parseFloat(string)"><code>string = parseFloat(string)</code></item>
<item title="Practise this a bit more, it's very important"></item>
</tasks>
<p>
Okay - let's now use all of this new knowledge to update our total variable when we click a add to basked button.
</p>
<tasks>
<item title="Open your index.html in Sublime"></item>
<item title="Find your function that handles clicking on the button"></item>
<item title="Create a variable that stores the custom price attribute we added earlier">Remember, <code>var price = $(this).attr('price');</code></item>
<item title="Use parseFloat to convert this price to a number"><code>price = parseFloat(price)</code></item>
<item title="Update the total price variable"> total = total + price</item>
</tasks>
<h2 id="displaying">Displaying the price on our site!</h2>
<p>
It's not very usefull having a variable held in JavaScript holding the total value of our shopping basket if we can't display it to users. Let's fix this now!
</p>
<p>
Remember DOM manipulation from the earlier sessions? Thought it was useless, not quite!
</p>
<p>
Recall that when we created our bootstrap template, we left space for the current value of the basket to be displayed in the header. We'll use this now.
</p>
<tasks>
<item title="Locate the last line of code in your function that handles clicks on the anchor tags"></item>
<item title="Use $('#total').text(total)"> To update the dom with the current total variable's contents. Recall that #total is the span with id="total" and that .text() updates the text of the selected item</item>
<item title="Add things to the basket!"> Veryify that it updates the total price</item>
</tasks>
<pre>
var total = 0.00;
function handleClick() {
var price = $(this).attr('price');
price = parseFloat(price);
total = total + price
$('#total').text(total);
}
$('.item').click(handleClick);
</pre>
<h2 id="decimal">What are these decimal points?</h2>
<p>
In JavaScript a number with decimal places is called a floating point number, and it can (pretty much) have infinite precision. This isn't very useful for our price, as we always only want two decimal places (£10.00, £0.10)
</p>
<p>
Fortunatly JavaScript comes with a built in tool to help fix exactly this, meet <code>number.toFixed(2)</code>.
</p>
<tasks>
<item title="Open Chrome's console"></item>
<item title="Create a floating point number in a variable"><code>var myFloat = 10.375825638; var anotherExample = 2848.142583;</code></item>
<item title="Use variableName.toFixed(2) to round to two decimal points"><code>myFloat.toFixed(2)</code></item>
</tasks>
<p>
We can now use this toFixed(2) method to only ever show two decimal points in our code.
</p>
<pre>
var total = 0.00;
function handleClick() {
var price = $(this).attr('price');
price = parseFloat(price);
total = parseFloat(total);
total = total + price;
total = total.toFixed(2);
$('#total').text(total);
}
$('.item').click(handleClick);
</pre>
<tasks>
<item title="Study the above code and use it to always show two decimal places"> Note: when you call toFixed() you are turning your number back into a string, so you need to call parseFloat again!</item>
</tasks>
<p>
One last thing, we have a small bug. We don't update the total price text on the navigation bar until we add something to the basket. We'll fix this now.
</p>
<tasks>
<item title="Fix the bugs! Add this code above </script>">$('#total').text(total)</item>
</tasks>
</div>
</div>
</div>
<script type="text/javascript" src="controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</body>
</html>