-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathassignments.html
118 lines (108 loc) · 5.9 KB
/
assignments.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Code is Fun!</title>
<style>
* {
box-sizing: border-box;
}
body{
font:500 14px/21px 'Helvetica Neue', Helvetica, Arials;
background-color: #d8dbde;
}
#container{
width: 960px;
margin: 0 auto;
padding: 20px 50px;
background-color: #f0f3f5;
}
section {
margin-top: 20px;
}
</style>
<script src="jQuery notes/jquery.js"></script>
</head>
<body>
<div id="container">
<h1>Code Is Fun!</h1>
<section>
<h2>RESOURCES</h2>
<ul>
<li><a href="jQuery notes/jquery1.html">jQuery - A Conceptual Overview</a></li>
<li><a href="jQuery notes/jquery2.html">How to Get jQuery</a></li>
<li><a href="jQuery notes/jquery3.html">Selecting Elements</a></li>
</ul>
</section>
<section>
<h2>EXERCISES</h2>
<h3 id="-exercise-1-">// EXERCISE 1: //</h3>
<h4 id="-using-only-html-css-">!!! USING ONLY HTML & CSS: !!!</h4>
<ul>
<li>[] Create a new HTML document</li>
<li>[] Add a <div> with an ID of "container"</li>
<li>[] Give that <div> node four children nodes, an <h1> tag, two <p> tags and two <div> tags.</li>
<li>[] Give each of those two <div>s a class attribute with the value "holder"</li>
<li>[] Give one of the <p> elements an id attribute with the value "target"</li>
<li>[] Give each <div class="holder"> an unordered list as a child element.</li>
<li>[] Add an empty <script> tag just before the </body> tag. Give it a "src" attribute with the value "<a href="https://code.jquery.com/jquery-2.1.1.js">https://code.jquery.com/jquery-2.1.1.js</a>"</li>
<li>[] Make sure jQuery is working by typing <code>jQuery</code> into the browser console. It should return a function and not throw an error.</li>
<li>[] Add a second <script> tag below the first to contain your own code</li>
</ul>
<h4 id="-using-only-javascript-and-jquery-">!!! USING ONLY JAVASCRIPT AND JQUERY: !!!</h4>
<ul>
<li>[] Create a new variable called "allDIVs" and assign to it a jQuery object containing reference all the <div> tags on the page.</li>
<li>[] assign a jQuery object containing reference all the <ul>s to a variable "allULs"</li>
<li>[] Turn all <p> tags' text blue // hint: <a href="http://api.jquery.com/css/">http://api.jquery.com/css/</a></li>
<li>[] turn #container's 'background-color' to 'red'</li>
<li>[] change .holder's 'border' to '1px solid black'</li>
</ul>
<h4 id="extra-credit-you-haven-t-been-taught-how-to-do-this-yet-but-maybe-you-can-figure-it-out-">EXTRA CREDIT: You haven't been taught how to do this yet, but maybe you can figure it out...</h4>
<p id="-hint-http-www-w3schools-com-cssref-css_selectors-asp-http-api-jquery-com-not-http-www-w3schools-com-css-css_display_visibility-asp-">(hint: <a href="http://www.w3schools.com/cssref/css_selectors.asp">http://www.w3schools.com/cssref/css_selectors.asp</a>, <a href="http://api.jquery.com/not/">http://api.jquery.com/not/</a>, <a href="http://www.w3schools.com/css/css_display_visibility.asp">http://www.w3schools.com/css/css_display_visibility.asp</a>)</p>
<ul>
<li>[] Change every <li> which inside a <ul>'s 'font-weight' to 'bold'</li>
<li>[] Make the <p> tag which does not have an id of "target" disappear</li>
</ul>
<h3 id="-exercise-two-">// EXERCISE TWO: //</h3>
<h5> Resource: <a href="jQuery notes/jquery4.html">Adding, Removing, and Moving Elements</a></h5>
<ul>
<li>[] Prepend a new <div> with the text "hello" to div#container</li>
<li>[] Append a new <div> with the text "goodbye" to div#container</li>
<li>[] Prepend a new <div> the body, append a new <div> after. How is this different than above?</li>
<li>[] Place a new div#first before the first div.holder</li>
<li><p>[] Place a new div#last with text after the second div.holder</p>
</li>
<li><p>[] Create a <code>newDetachedDiv</code> var which is a jQuery object of a new <div> with some text in it</p>
</li>
<li>[] Change some of its css properties. Is it on the page yet?</li>
<li>[] now append it. Is it on the page yet?</li>
<li>[] Run this code: <code>$('div').remove();</code> What does it do?</li>
<li><p>[] Reload the page and do this: $('#container').empty(); How is that different than above</p>
</li>
<li><p>[] What does this code do? <code>var orphanNode = $('#target').detach();</code></p>
</li>
<li><p>[] Now try adding: <code>$('#container').append(orphanNode);</code> Why would this be useful?</p>
</li>
<li><p>[] Use the <code>.find()</code> method to do something interesting: <a href="http://api.jquery.com/find/">http://api.jquery.com/find/</a></p>
</li>
<li><p>[] Play around with the <code>.parent()</code> and <code>.children()</code> methods: <a href="http://api.jquery.com/">http://api.jquery.com/</a>
// (hint: [CMD + F] and search "parent")
// var parentNode = $('#target').parent();
// var childrenNodes = parentNode.children();</p>
</li>
</ul>
<h3 id="-build-">// BUILD: //</h3>
<ul>
<li>[] Combine setTimeout and/or setInterval with '.css' make various parts of your page change styles over time.</li>
<li>[] Make your own version of <a href="http://jenniferdewalt.com/random_background.html">Background Randomizer</a> or <a href="http://jenniferdewalt.com/mondrian.html">Mondrian Maker</a> (hint: [CMD+OPTION+U] to read the source code)</li>
</ul>
</section>
<section>
<h2>HOMEWORK</h2>
<p><li>Watch more of these <a href="https://www.learnhowtoprogram.com/sections/jquery">videos about jQuery</a> and try the exercises</li>
<li>Or try a similar resource <a href="https://www.codeschool.com/courses/try-jquery">from CodeSchool</a></li>
</ul></p>
</section></div>
</body>
</html>