CIT190Review/Review.html at master · vanhouc/CIT190Review · GitHub

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
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CIT 190 Review</title>
		<link rel="stylesheet" type="text/css" href="Review.css">
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
		<script src="Review.js"></script>
	</head>
	<body>
		<header id="header">
			<h2 id="headerTitle">(Placeholder for heading)</h2>
			<h3 id="headerSubTitle">(Placeholder for subheading)</h3>
		</header> <!-- end of header -->

		<section id="main">
		</section> <!-- end of main -->

		<section id="formControls">
			<button id="first">First</button>
			<button id="second">Second</button>
			User value: <input type="text" name="userVal" id="userVal">
		</section> <!-- end of formControls -->

		<footer>
			<h4>(Placeholder for footer)</h4>
		</footer>

		<aside id="instructions">
			<p>Instructions:</p>
			<ol>
				<li>HTML: Add a link to Review.css</li>
				<li>HTML: Add a script element that adds a jQuery CDN, preferably one you haven't used before</li>
				<li>HTML: Add a script element that adds Review.js</li>
				<li>HTML: Verify that Review.html passes w3c validation</li>
				<li>CSS: Create new file Review.css</li>
				<li>CSS: Insert identifying comment</li>
				<li>CSS: Configure background-color and color for the body element (suggestion: Color Scheme Designer)</li>
				<li>CSS: Add style .decorate that configures two or more features of text (suggestion: include text-transform: capitalize;)</li>
				<li>CSS: Configure other style aspects as time and interest permit</li>
				<li>CSS: Verify that Review.css passes w3c validation</li>
				<li>JS: Create new file Review.js</li>
				<li>JS: Insert identifying comment</li>
				<li>JS: Create a document ready function</li>
				<li>JS: Insert an appropriate 'use strict' statement</li>
				<li>JS: Define rugged function reverse(source) that reverses the characters in a string (challenge: ruggedness)</li>
				<li>JS: Define an event handler that responds to button "first" by reading, reversing, and writing back the text in input userVal</li>
				<li>JS: Define an event handler that responds to button "second" by reading the text in input userVal and writing 20 copies into each of four new paragraphs in the main section</li>
				<li>JS: Continue in button "second" by applying class .decorate to odd paragraphs in the main section</li>
				<li>JS: Modify the text on button First to identify it as a reversing feature</li>
				<li>JS: Modify the text on button Second to identify it as a text generator feature</li>
				<li>JS: Modify h2 headerTitle to identify this page as a final exam review</li>
				<li>JS: Modify h3 headerSubTitle to identify the following text as sample text</li>
				<li>JS: Insert your name and the current date in the h4 inside the footer, replacing the placeholder text</li>
				<li>JS: Slide up this aside element containing instructions (challenge: include nonstandard easing)</li>
				<li>JS: Verify that Review.js passes JSLint</li>
				<li>Solution: Post your solution to the course web server and verify that it works</li>
			</ol>
		</aside> <!-- end of instructions -->
	</body>
</html>