forked from girldevelopit/gdi-featured-js-intro
-
Notifications
You must be signed in to change notification settings - Fork 2
/
homework.html
643 lines (555 loc) · 24.3 KB
/
homework.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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Intro to JavaScript Homework</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/homework.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// Powers show/hide buttons.
$( document ).ready(function() {
$("div.codebox").hide();
});
function showSolution(num) {
$("div#example" + num + "Code").toggle();
}
</script>
<style type="text/css">
button {
margin-bottom: 1.5em;
}
header h1{
margin-left: 25px;
}
</style>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
<a href="#main-content" id="skipnav">Skip to main content</a>
<header>
<div class="container">
<h1>Intro to JavaScript Homework</h1>
</div>
</header>
<div class="container main">
<nav class="sidebar span3">
<ul>
<li><a href="#class1">Class 1</a></li>
<li><a href="#class2">Class 2</a></li>
<li><a href="#class3">Class 3</a></li>
<li><a href="#class4">Class 4</a></li>
</ul>
</nav>
<article id="main-content" tabindex="-1" class="span9">
<section>
<p>Welcome! These are some bonus puzzles to accompany the Intro to JavaScript class. Please take a look at the puzzles, and work on one that looks challenging but not completely overwhelming. You can always reference <a href="index.html">the slides</a> if you get stuck. Commit to spend at least 20 minutes trying to figure out a problem before you look at the answers. It helps you learn!</p>
</section>
<section>
<h2 id="class1">Class 1</h2>
<h3>The Fortune Teller</h3>
<p>Why pay a fortune teller when you can just program your fortune yourself?</p>
<ul>
<li>Store the following into variables: number of children, partner's name, geographic location, job title.</li>
<li>Output your fortune to the screen like so: "You will be a X in Y, and married to Z with N kids."</li>
</ul>
<button onclick="showSolution(1)">Show/Hide Solution</button>
<div class="codebox" id="example1Code">
<pre>var numKids = 5;
var partner = 'David Beckham';
var geolocation = 'Costa Rica';
var jobTitle = 'web developer';
var future = 'You will be a ' + jobTitle + ' in ' + geolocation + ', and married to ' +
partner + ' with ' + numKids + ' kids.';
console.log(future);
</pre>
</div>
<h3>The Age Calculator</h3>
<p>Forgot how old someone is? Calculate it!</p>
<ul>
<li>Store the current year in a variable.</li>
<li>Store their birth year in a variable.</li>
<li>Calculate their 2 possible ages based on the stored values.</li>
<li>Output them to the screen like so: "They are either NN or NN", substituting the values.</li>
</ul>
<button onclick="showSolution(2)">Show/Hide Solution</button>
<div class="codebox" id="example2Code">
<pre>var birthYear = 1984;
var currentYear = 2016;
var age = currentYear - birthYear;
console.log('They are either ' + age + ' or ' + (age - 1));
</pre>
</div>
<h3>The Temperature Converter</h3>
<p>Let's make a program to convert celsius tempatures to fahrenheit and vice versa, so we can complain about the weather with our friends oversees.</p>
<p><strong>Reminder:</strong> To convert celsius to fahrenheit, multiply by 9, then divide by 5, then add 32. To convert fahrenheit to celsius, deduct 32, then multiply by 5, then divide by 9.</p>
<p><strong>Unicode Characters:</strong> To print the degrees symbol in JavaScript, we need to use the write <code>\u00B0</code> to represent the unicode character for the degress symbol.
<ul>
<li>Store a celsius temperature into a variable.</li>
<li>Convert it to fahrenheit and output "NN°C is NN°F".</li>
<li>Now store a fahrenheit temperature into a variable.</li>
<li>Convert it to celsius and output "NN°F is NN°C."</li>
</ul>
<button onclick="showSolution(3)">Show/Hide Solution</button>
<div class="codebox" id="example3Code">
<pre>var inputCelsius = 25;
var outputFahrenheit = (inputCelsius * 9)/5 + 32;
console.log(inputCelsius + '\u00B0 Celsious is ' + outputFahrenheit + '\u00B0 Fahrenheit');
var inputFahrenheit = 73;
var outputCelsius = (inputFahrenheit - 32)/9 * 5;
console.log(inputFahrenheit + '\u00B0 Fahrenheit is ' + outputCelsius + '\u00B0 Celsious.');
</pre>
</div>
<h3>Challenge Question: Using Math functions</h3>
<p>JavaScript has a built-in tool that can generate a random number between 0 and 1. This tool is called a <em>method</em>. We'll talk about methods more later in the class. For now, know if you type <code>Math.random()</code>, you'll get a random number between 0 and 1.</p>
<p>Using this tool, update your fahrenheit to celsius tempature conversion program to do the following:</p>
<ul>
<li>Instead of inputing a value for the Fahrenheit tempature, use Math.random() to generate a random tempature between 0 and 100</li>
<li>Have to program output: "It is NN°F today. That's NN°C."
</ul>
<button onclick="showSolution(4)">Show/Hide Solution</button>
<div class="codebox" id="example4Code">
<pre>var inputFahrenheit = Math.random()*100;
var outputCelsius = (inputFahrenheit - 32)/9 * 5;
console.log('It is ' + inputFahrenheit + '\u00B0 Fahrenheit today. That\'s ' + outputCelsius + '\u00B0 Celsius.');
</pre>
</div>
</section>
<section>
<h2 id="class2">Class 2</h2>
<h3>The Fortune Teller: With Functions!</h3>
<p>Let's turn one of the <a href="#Class1">Class 1 Exercises</a> into a function.</p>
<ul>
<li>Write a function named <code>tellFortune</code> that:
<ul>
<li>takes 4 arguments: number of children, partner's name, geographic location, job title.</li>
<li>outputs your fortune to the screen like so: "You will be a X in Y, and married to Z with N kids."</li></ul>
</li>
<li>Call that function 3 times with 3 different values for the arguments.</li>
</ul>
<button onclick="showSolution(5)">Show/Hide Solution</button>
<div class="codebox" id="example5Code">
<pre>function tellFortune(jobTitle, geolocation, partner, numKids) {
var future = 'You will be a ' + jobTitle + ' in ' + geolocation + ' and married to ' +
partner + ' with ' + numKids + ' kids.';
console.log(future);
}
tellFortune('astronaut', 'Spain', 'Shaq', 3);
tellFortune('stunt double', 'Japan', 'Bruce Wayne', 9);
tellFortune('Elvis impersonator', 'Russia', 'Elon Musk', 0);
</pre>
</div>
<h3>What number is bigger?</h3>
<p>Write a function that compares two numbers and returns the larger one. Be sure to try it out with some different numbers. Bonus: add error messages if the numbers are equal or cannot be compared.</p>
<p>Don't forget to test it!</p>
<button onclick="showSolution(6)">Show/Hide Solution</button>
<div class="codebox" id="example6Code">
<pre>function greaterNum(num1, num2) {
if (num1 === num2) {
console.log('Those numbers are equal');
} else if (num1 > num2) {
return num1;
} else if (num2 > num1) {
return num2;
} else {
console.log('Those are simply incomparable!');
return undefined;
}
}
console.log(greaterNum(3, 3));
console.log(greaterNum(7, -2));
console.log(greaterNum(5, 9));
console.log(greaterNum(5, 'dog'));
</pre>
</div>
<h3>Pluralize</h3>
<p>Write a function <code>pluralize</code> that takes in two arguments, a number and a word, and returns the plural. For example:</p>
<pre>pluralize(5, 'cat'): '5 cats'
pluralize(7, 'turtle'): '7 cats'
</pre>
<p>Bonus: Make it handle a few collective nouns like "sheep" and "geese".</p>
<button onclick="showSolution(7)">Show/Hide Solution</button>
<div class="codebox" id="example7Code">
<pre>function pluralize(number, noun) {
if (number != 1 && noun != 'sheep' && noun != 'geese') {
return number + ' ' + noun + 's';
} else {
return number + ' ' + noun;
}
}
console.log('I have ' + pluralize(0, 'cat'));
console.log('I have ' + pluralize(1, 'cat'));
console.log('I have ' + pluralize(2, 'cat'));
console.log('I have ' + pluralize(3, 'geese'));
</pre>
</div>
<h3>The Calculator</h3>
<ul>
<li>Write a function called <code>squareNumber</code> that will take one argument (a number), square that number, and return the result. It should also log a string like "The result of squaring the number 3 is 9." </li>
<li>Write a function called <code>halfNumber</code> that will take one argument (a number), divide it by 2, and return the result. It should also log a string like "Half of 5 is 2.5.".</li>
<li>Write a function called <code>percentOf</code> that will take two numbers, figure out what percent the first number represents of the second number, and return the result. It should also log a string like "2 is 50% of 4."</li>
<li>Write a function called <code>areaOfCircle</code> that will take one argument (the radius), calculate the area based on that, and return the result. It should also log a string like "The area for a circle with radius 2 is 12.566370614359172."
<ul><li>Bonus: Round the result so there are only two digits after the decimal.</li></ul>
</li>
<li>Write a function that will take one argument (a number) and perform the following operations, using the functions
you wrote earlier:
<ol>
<li>Take half of the number and store the result.</li>
<li>Square the result of #1 and store that result.</li>
<li>Calculate the area of a circle with the result of #2 as the radius.</li>
<li>Calculate what percentage that area is of the squared result (#3).</li>
</ol>
</li>
</ul>
<button onclick="showSolution(8)">Show/Hide Solution</button>
<div class="codebox" id="example8Code">
<pre>function squareNumber(num) {
var squaredNumber = num * num;
console.log('The result of squaring the number ' + num + ' is ' + squaredNumber);
return squaredNumber;
}
squareNumber(3);
function halfOf(num) {
var half = num / 2;
console.log('Half of ' + num + ' is ' + half);
return half;
}
halfOf(5);
function percentOf(num1, num2) {
var percent = (num1/num2) * 100;
console.log(num1 + ' is ' + percent + '% of ' + num2);
return percent;
}
percentOf(5, 10);
function areaOfCircle(radius) {
var area = Math.PI * squareNumber(radius);
console.log('The area of circle with radius ' + radius + ' is ' + area);
return area;
}
areaOfCircle(2);
function doCrazyStuff(num) {
var half = halfOf(num);
var squared = squareNumber(half);
var area = areaOfCircle(squared);
var result = percentOf(squared, area);
}
doCrazyStuff(5);
</pre>
</div>
<h3>Challenge Question: String Manipulation</h3>
<p>If you feel comfortable with the other exercises, it's time to expand your knowledge! These puzzles involve manipulating strings; to try them out, you'll need to use some of the <a href="http://www.w3schools.com/jsref/jsref_obj_string.asp" target="_blank">built-in JavaScript methods for strings</a>. Methods are pre-written functions that are built into the language.</p>
<p>These questions are not as straightforward as the others. They challenge you to really think like a programmer. Really try to solve them before you peek at the answer.</p>
<h4>MixUp</h4>
<p>Create a function called <code>mixUp</code>. It should take in two strings, and return the concatenation of the two strings (separated by a space) slicing out and swapping the first 2 characters of each. You can assume that the strings are at least 2 characters long. For example:</p>
<pre>
mixUp('mix', 'pod'): 'pox mid'
mixUp('dog', 'dinner'): 'dig donner'
</pre>
<button onclick="showSolution(9)">Show/Hide Solution</button>
<div class="codebox" id="example9Code">
<pre>//This function uses the slice() method. It extracts a part of a string and returns a new string
function mixUp(string1, string2) {
return string2.slice(0, 2) + string1.slice(2) + " " + string1.slice(0, 2) + string2.slice(2);
}
console.log(mixUp('mix', 'pod'));
console.log(mixUp('dog', 'dinner'));
</pre>
</div>
<h4>FixStart</h4>
<p>Create a function called <code>fixStart</code>. It should take a single argument, a string, and return a version where all occurrences of its first character have been replaced with '*', except for the first character itself. You can assume that the string is at least one character long. For example:</p>
<pre>
fixStart('babble'): 'ba**le'
fixStart('turtle'): 'tur*le'
</pre>
<button onclick="showSolution(10)">Show/Hide Solution</button>
<div class="codebox" id="example10Code">
<pre>//This function uses a few new methods and regular expressions
function fixStart(inputString) {
var firstChar = inputString.charAt(0);
return firstChar + inputString.slice(1).replace(new RegExp(firstChar, 'g'), '*');
}
console.log(fixStart('babble'));
console.log(fixStart('turtle'));
</pre>
</div>
</section>
<section>
<h2 id="class3">Class 3</h2>
<h3>Even/Odd Counter</h3>
<p>Write a for loop that will iterate from 0 to 20. For each iteration, it will check if the current number is even or odd, and report that to the screen (e.g. "2 is even")</p>
<button onclick="showSolution(11)">Show/Hide Solution</button>
<div class="codebox" id="example11Code">
<pre>
for (var i = 0; i <= 20; i++) {
if (i % 2 === 0) {
console.log(i + ' is even');
} else {
console.log(i + ' is odd');
}
}
</pre>
</div>
<h3>Top Choice</h3>
<p>Create an array to hold your top choices (colors, presidents, whatever). For each choice, log to the screen a string like: "My #1 choice is blue."</p>
<p>Bonus: Change it to log "My 1st choice, "My 2nd choice", "My 3rd choice", picking the right suffix for the number based on what it is. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice">The method slice</a> might be helpful here.</p>
<button onclick="showSolution(12)">Show/Hide Solution</button>
<div class="codebox" id="example12Code">
<pre>
//Simple code
var choices = ['red', 'orange', 'pink', 'yellow'];
for (var i = 0; i < choices.length; i++) {
console.log('My #' + (i + 1) + ' choice is ' + choices[i]);
}
//Bonus solution
var choices = ['red', 'orange', 'pink', 'yellow'];
function findLast (inputNum) {
tmpSlice = String(inputNum);
var lastDigit = (tmpSlice.slice(-1));
return lastDigit;
}
for (var i = 0; i < choices.length; i++) {
var choiceNum = i + 1;
var choiceNumSuffix = 0;
var choiceNumLast = findLast(choiceNum);
if (choiceNumLast == 1) {
choiceNumSuffix = 'st';
} else if (choiceNumLast == 2) {
choiceNumSuffix = 'nd';
} else if (choiceNumLast == 3) {
choiceNumSuffix = 'rd';
} else {
choiceNumSuffix = 'th';
}
console.log('My ' + choiceNum + choiceNumSuffix + ' choice is ' + choices[i]);
}
</pre>
</div>
<h3>The Reading List</h3>
<p>Keep track of which books you read and which books you want to read!</p>
<ul>
<li>Create an array of objects, where each object describes a book and has properties for the title (a string), author (a string), and alreadyRead (a boolean indicating if you read it yet).</li>
<li>Iterate through the array of books. For each book, log the book title and book author like so: "The Hobbit by J.R.R. Tolkien".</li>
<li>Now use an if/else statement to change the output depending on whether you read it yet or not. If you read it, log a string like 'You already read "The Hobbit" by J.R.R. Tolkien', and if not, log a string like 'You still need to read "The Lord of the Rings" by J.R.R. Tolkien.'</li>
</ul>
<button onclick="showSolution(13)">Show/Hide Solution</button>
<div class="codebox" id="example13Code">
<pre>
var books = [
{
title: 'You Don'\t Know JS',
author: 'Kyle Simpson',
alreadyRead: false
},
{
title: 'Eloquent JavaScript',
author: 'Marijn Haverbeke',
alreadyRead: true
}
];
for (var i = 0; i < books.length; i++) {
var book = books[i];
var bookInfo = book.title + '" by ' + book.author;
if (book.alreadyRead) {
console.log('You already read "' + bookInfo);
} else {
console.log('You still need to read "' + bookInfo);
}
}
</pre>
</div>
</section>
<section>
<h2 id="class4">Class 4</h2>
<h3>Logo Hijack</h3>
<ul>
<li>Open up <a href="http://www.google.com">www.google.com</a> in Chrome or Firefox, and open up the console.</li>
<li>Find the Google logo and store it in a variable.</li>
<li>Modify the source of the logo IMG so that it's a Yahoo logo instead. (http://www.logostage.com/logos/yahoo.GIF)</li>
</ul>
<button onclick="showSolution(14)">Show/Hide Solution</button>
<div class="codebox" id="example14Code">
<pre>var img = document.getElementById('hplogo');
img.width = 400;
img.src = 'http://www.logostage.com/logos/yahoo.GIF';
</pre>
</div>
<h3>About Me</h3>
<p>Start with this HTML and save it as "aboutme.html":</p>
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<ul>
<li>Nickname:
<span id="nickname"></span>
</li>
<li>Favorites:
<span id="favorites"></span>
</li>
<li>Hometown:
<span id="hometown"></span>
</li>
</ul>
</body>
</html>
</pre>
<ul>
<li>Add a script tag to the bottom.</li>
<li>(In JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".</li>
<li>(In JavaScript) Replace the content of each of the spans (nickname, favorites, hometown) with your own information.</li>
<li>Iterate through each li and add a class of "listitem". Add a style tag that sets a rule for "listitem" to make the color red.</li>
<li>Create a new img element and set its src attribute to a picture of you. Append that element to the body.</li>
</ul>
<button onclick="showSolution(15)">Show/Hide Solution</button>
<div class="codebox" id="example15Code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>About Me</title>
<style>
.listitem {
color: red;
}
</style>
</head>
<body>
<h1>About Me</h1>
<ul>
<li>Nickname:
<span id="nickname"></span>
</li>
<li>Favorites:
<span id="favorites"></span>
</li>
<li>Hometown:
<span id="hometown"></span>
</li>
</ul>
<script>
document.body.style.fontFamily = 'Arial, sans-serif';
document.getElementById('nickname').innerHTML = 'Ada Lovelace';
document.getElementById('favorites').innerHTML = 'computers';
document.getElementById('hometown').innerHTML = 'London, England';
var items = document.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
items[i].className = 'listitem';
}
var myPic = document.createElement('img');
myPic.src = 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Ada_Lovelace_portrait.jpg';
document.body.appendChild(myPic);
</script>
</body>
</html>
</pre>
</div>
<h3>The Reading List Part II</h3>
<ul>
<li>Create a webpage with an <code>h1</code> of "My Book List".</li>
<li>Add a script tag to the bottom of the page, where all your JavaScript will go.</li>
<li>Copy the array of books from the previous exercise.</li>
<li>Iterate through the array of books. For each book, create a <code>p</code> element with the book title and author and append it to the page.</li>
<li><strong>Bonus</strong>: Use a <code>ul</code> and <code>li</code> to display the books.</li>
<li><strong>Bonus</strong>: add a property to each book with the URL of the book cover, and add an <code>img</code> element for each book on the page.</li>
<li><strong>Bonus</strong>: Change the style of the book depending on whether you have read it or not.</li>
</ul>
<button onclick="showSolution(16)">Show/Hide Solution</button>
<div class="codebox" id="example16Code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Book List</title>
</head>
<body>
<h1>My Book List</h1>
<script>
var books = [
{
title: 'You Don'\t Know JS',
author: 'Kyle Simpson',
alreadyRead: false
},
{
title: 'Eloquent JavaScript',
author: 'Marijn Haverbeke',
alreadyRead: true
}
];
for (var i = 0; i < books.length; i++) {
var bookP = document.createElement('p');
var bookDescription = document.createTextNode(books[i].title + ' by ' + books[i].author);
bookP.appendChild(bookDescription);
document.body.appendChild(bookP);
}
// Or, with the bonuses:
var books = [
{
title: 'You Don'\t Know JS',
author: 'Kyle Simpson',
alreadyRead: false
},
{
title: 'Eloquent JavaScript',
author: 'Marijn Haverbeke',
alreadyRead: true
}
];
var bookList = document.createElement('ul');
for (var i = 0; i < books.length; i++) {
var bookItem = document.createElement('li');
var bookImg = document.createElement('img');
bookImg.src = books[i].img;
bookItem.appendChild(bookImg);
var bookDescription = document.createTextNode(books[i].title + ' by ' + books[i].author);
bookItem.appendChild(bookDescription);
if (books[i].alreadyRead) {
bookItem.style.color = 'grey';
}
bookList.appendChild(bookItem);
}
document.body.appendChild(bookList);
</script>
</body>
</html>
</pre>
</div>
<h3>Challenge Question: The Counter</h3>
<p>Write a function that takes a certain type of tag and counts the number of elements with that tag. The function should return "There a X tags of type y on the page. For example:</p>
<pre>countTags('p'): 'There are 3 tags of type p on the page'</pre>
<button onclick="showSolution(17)">Show/Hide Solution</button>
<div class="codebox" id="example17Code">
<pre>function countTags (tagType) {
var tagArray = document.getElementsByTagName(tagType);
console.log('There are ' + tagArray.length + ' tags of type ' + tagType + ' on the page.');
}
</pre>
</div>
</section>
</article>
<aside class="span12 break clear">
<h2>References</h2>
<ul>
<li><a href="index.html" target="_blank">Class slides</a></li>
<li><a href="https://www.khanacademy.org/computing/computer-programming/programming" target="_blank">Khan Academy - Intro to JS: Drawing & Animation</a></li>
<li><a href="http://www.codecademy.com/en/tracks/javascript" target="_blank">Code Academy - JavaScript</a></li>
</ul>
</aside>
</div>
<footer>
<div class="container">
<p>Homework ~ Intro to HTML/CSS ~ Girl Develop It
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a></p>
</div>
</footer>
</body>
</html>