-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsushi-cards.html
93 lines (86 loc) · 5.33 KB
/
sushi-cards.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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Coderdojo Tampa @ The Hive</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/icomoon-social.css">
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,800' rel='stylesheet' type='text/css'> -->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/custom.css">
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<style>
.row {
font-weight: bold;
color: #eee;
margin: 25 auto;
margin-bottom: 25px;
}
</style>
</head>
<body class="c23">
<p class="c3 c11 c21"><span class="c2"> HTML </span><span class="c4"> </span><span class="c2"> My First jQuery Website : Card 1 </span>
</p>
<p class="c3 c19"><span class="c16">Make some flash cards</span>
</p>
<p class="c3 c12"><span class="c6">0 </span><span class="c25">First head over to codecademy.com and start on the JavaScript/jQuery track. Once you have the basic idea move on to the next step</span><span class="c20">.</span>
</p>
<p class="c3 c12"><span class="c6">1</span><span class="c0"> On JSFiddle change the drop down menu to the to be the latest version of jQuery (2.1 +). This allows to use the jQuery function ($) and its minions to effect the DOM.</span>
</p>
<p class="c3"><span class="c0 c17">2 </span><span class="c0">On JSFiddle you can hit fork on this page: </span><span class="c7"><a class="c14" href="http://www.google.com/url?q=http%3A%2F%2Fjsfiddle.net%2Frrbm823%2F3trf0ru5%2F&sa=D&sntz=1&usg=AFQjCNEdO2KvSqVMhKsEl2k9SaEuaOs9ag">http://jsfiddle.net/rrbm823/3trf0ru5/</a></span>
</p>
<p class="c3 c15"><span class="c0"></span>
</p>
<p class="c3 c15"><span class="c0"></span>
</p>
<p class="c3 c18"><span class="c5 c0">3 </span><span class="c0">Recall from card 8 that we identify HTML elements from the CSS by their class attribute. You'll notice in flash-cards.html file there are many class attributes.</span>
</p>
<p class="c3 c9"><span class="c0">[</span><span class="c0">Pic1</span><span class="c0">]</span>
</p>
<p class="c3 c18"><span class="c0">They are there because we've put in the CSS template </span><span class="c0 c10">Bootstrap</span><span class="c0">. </span>
</p>
<p class="c3 c18"><span class="c0">[Pic2]</span>
</p>
<p class="c3 c8"><span class="c0">We can spare the details of Bootstrap for another card.</span>
</p>
<p class="c3 c8"><span class="c5 c0">4 </span><span class="c0">Using JavaScript and jQuery, we want to get each flashcard question and answer from the </span><span class="c0 c10">array</span><span class="c0"> of </span><span class="c0 c10">objects </span><span class="c0">called "allQuestions". This should be done by completing the </span><span class="c0 c10">callback function </span><span class="c0">with the comment that says "finish me".</span>
</p>
<p class="c3 c8"><span class="c0">[Pic3]</span>
</p>
<p class="c3 c8"><span class="c0">It is the nameless function inside the </span><span class="c0 c10">.click() </span><span class="c0">method.</span>
</p>
<p class="c3 c15 c19"><span class="c0"></span>
</p>
<p class="c3 c21 c22"><span class="c0 c13"> </span><span class="c0 c5">5 </span><span class="c0">The back and next button has been created already. Can you make a "show me" button to display the flash card answer? How about a card counter / shuffle option.</span>
</p>
<p class="c1"><span class="c0"></span>
</p>
<p class="c1"><span class="c0"></span>
</p>
<p class="c3 c11"><span class="c24"> my-first-website/worksheets/03-make-the-home-page.pdf</span><span class="c0"> aPage</span>
</p>
<p class="c3 c15"><span></span>
</p>
<!-- Javascripts -->
<script src="https://cdn.firebase.com/js/client/2.0.3/firebase.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/validateForm.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.sequence-min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/main-menu.js"></script>
<script src="js/template.js"></script>
</body>
</html>