├── README.md
├── Hands-on Project 4-1
    ├── tuba2.png
    ├── tractor.htm
    ├── tuba.css
    ├── tubaie.css
    └── tuba.js
├── Hands-on Project 10-1
    ├── Images
    │   ├── frog.jpg
    │   ├── frog_01.png
    │   ├── frog_02.png
    │   ├── frog_03.png
    │   ├── frog_04.png
    │   ├── frog_05.png
    │   ├── frog_06.png
    │   ├── frog_01_sm.png
    │   ├── frog_02_sm.png
    │   ├── frog_03_sm.png
    │   ├── frog_04_sm.png
    │   ├── frog_05_sm.png
    │   └── frog_06_sm.png
    ├── index.htm
    ├── script.js
    └── styles.css
├── Hands-on Project 12-1
    ├── script.js
    ├── index.htm
    └── styles.css
├── Hands-on Project 12-2
    ├── script.js
    ├── index.htm
    └── styles.css
├── Hands-on Project 9-2
    ├── results.htm
    ├── script.js
    ├── index.htm
    └── styles.css
├── Hands-on Project 9-3
    ├── results.htm
    ├── index.htm
    ├── script.js
    └── styles.css
├── Hands-on Project 5-2
    ├── confirm.htm
    ├── index.htm
    └── styles.css
├── Hands-on Project 11-1
    ├── search.htm
    ├── search.php
    ├── script.js
    ├── styles.css
    └── modernizr.custom.65897.js
├── Hands-on Project 5-1
    └── index.htm
├── Hands-on Project 11-4
    ├── address.htm
    ├── script.js
    ├── styles.css
    └── modernizr.custom.65897.js
├── Hands-on Project 1-1
    ├── index.htm
    └── styles.css
├── Hands-on Project 6-1
    ├── results.htm
    ├── index.htm
    ├── script.js
    ├── styles.css
    └── modernizr.custom.65897.js
├── Hands-on Project 6-2
    ├── results.htm
    ├── index.htm
    ├── styles.css
    └── script.js
├── Hands-on Project 2-1
    ├── index.htm
    └── styles.css
├── Hands-on Project 8-1
    ├── script.js
    ├── index.htm
    └── styles.css
├── Hands-on Project 3-2
    ├── index.htm
    └── styles.css
├── Hands-on Project 2-4
    ├── styles.css
    └── index.htm
├── Hands-on Project 2-5
    ├── styles.css
    └── index.htm
├── Hands-on Project 3-1
    ├── index.htm
    └── styles.css
├── Hands-on Project 3-4
    ├── index.htm
    └── styles.css
├── Hands-on Project 7-1
    ├── index.htm
    └── styles.css
├── Hands-on Project 4-3
    ├── index.htm
    └── styles.css
├── Hands-on Project 1-4
    ├── index.htm
    └── styles.css
├── Hands-on Project 5-5
    ├── styles.css
    └── index.htm
├── Hands-on Project 7-3
    ├── styles.css
    └── index.htm
├── Hands-on Project 7-2
    ├── index.htm
    └── styles.css
└── Hands-on Project 1-3
    ├── styles.css
    └── index.htm


/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript_6th_Edition_Hands-On_Projects


--------------------------------------------------------------------------------
/Hands-on Project 4-1/tuba2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 4-1/tuba2.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog.jpg


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_01.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_02.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_03.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_04.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_05.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_06.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_01_sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_01_sm.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_02_sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_02_sm.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_03_sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_03_sm.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_04_sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_04_sm.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_05_sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_05_sm.png


--------------------------------------------------------------------------------
/Hands-on Project 10-1/Images/frog_06_sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lisakilker/JavaScript_6th_Edition_Hands-On_Projects/HEAD/Hands-on Project 10-1/Images/frog_06_sm.png


--------------------------------------------------------------------------------
/Hands-on Project 12-1/script.js:
--------------------------------------------------------------------------------
 1 | //Lisa Kilker
 2 | //May 9, 2018
 3 | //Chapter 12
 4 | //Hands-on Project 12-1
 5 | 
 6 | function display(event) {
 7 | 	$(event.currentTarget).next().fadeIn("slow");
 8 | }
 9 | 
10 | $("h3").click(display);


--------------------------------------------------------------------------------
/Hands-on Project 12-2/script.js:
--------------------------------------------------------------------------------
 1 | //Lisa Kilker
 2 | //May 9, 2018
 3 | //Chapter 12 
 4 | //Hands-on Project 12-2
 5 | 
 6 | function convert() {
 7 | 	var lb = $("#pValue").val();
 8 | 	var kg = Math.round(lb/2.2);
 9 | 
10 | 	$("#kValue").html(kg);
11 | }
12 | 
13 | $("#convertButton").click(convert);
14 | ("#pValue").val("");
15 | ("#kValue").html("");


--------------------------------------------------------------------------------
/Hands-on Project 9-2/results.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 9
 7 |       Hands-on Project 9-2
 8 | 
 9 |       Author: Lisa Kilker  
10 |       Date:   May 2, 2018
11 | 
12 |       Filename: results.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 9-2</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 9-2
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Login successful</h2>
30 |    </article>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/Hands-on Project 9-3/results.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 9
 7 |       Hands-on Project 9-3
 8 | 
 9 |       Author: Lisa Kilker  
10 |       Date:   May 2, 2018
11 | 
12 |       Filename: results.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 9-2</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 9-2
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Login successful</h2>
30 |    </article>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/Hands-on Project 5-2/confirm.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 5
 7 |       Hands-on Project 5-2
 8 | 
 9 |       Author: 
10 |       Date:   
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 |    <title>Confirmation</title>
17 |    <style>
18 |       body {
19 |          text-align: center;
20 |       }
21 |       #closeB {
22 |          display: inline-block;
23 |          background: green;
24 |          color: white;
25 |          font-size: 10pt;
26 |          padding: 5px;
27 |       }
28 |       #closeB:hover {
29 |          cursor: default;
30 |       }
31 |    </style>
32 | </head>
33 | 
34 | <body>
35 |    <p>Your address has been updated.</p>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Hands-on Project 11-1/search.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 11
 7 |       Hands-on Project 11-1
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   May 9, 2018
11 | 
12 |       Filename: search.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta id="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 11-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 11-1
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <form>
30 |          <fieldset>
31 |             <input type="search" />
32 |             <input type="submit" value="Search" />
33 |          </fieldset>
34 |          <p class="credit">Powered by<a href="http://bing.com">Bing</a></p>
35 |       </form>
36 |    </article>
37 |    <script src="script.js"></script>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/Hands-on Project 5-1/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 5
 7 |       Hands-on Project 5-1
 8 | 
 9 |       Author: Lisa Kilker 
10 |       Date:   April 21, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 |    <title>Hands-on Project 5-1</title>
17 | </head>
18 | 
19 | <body>
20 |    <h1>
21 |       Hands-on Project 5-1
22 |    </h1>
23 |    
24 |    <p></p>
25 |    <p></p>
26 |    <p></p>
27 |    <p></p>
28 |       <script>
29 |    "use strict"; 
30 |          document.getElementsByTagName("p")[0].innerHTML = "Web browser name: " + navigator.appName; 
31 |          document.getElementsByTagName("p")[1].innerHTML = "Web browser version: " + navigator.appVersion; 
32 |          document.getElementsByTagName("p")[2].innerHTML = "Operating platform: " + navigator.platform; 
33 |          document.getElementsByTagName("p")[3].innerHTML = "User agent: " + navigator.userAgent;
34 |    </script>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/Hands-on Project 11-4/address.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 11
 7 |       Hands-on Project 11-4
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   May 9, 2018
11 | 
12 |       Filename: address.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta id="viewport" content="width=device-width, initial-scale=1.0">
16 |    <title>Hands-on Project 11-4</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 11-4
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Address</h2>
30 |       <form>
31 |          <fieldset id="zipset">
32 |             <label for="zip" id="ziplabel">Postal Code</label>
33 |             <input id="zip" type="number" />
34 |          </fieldset>
35 | 
36 |          <fieldset id="csset">
37 |             <label for="city" id="citylabel">City</label>
38 |             <input id="city" type="text" />
39 |             <label for="state" id="statelabel">State</label>
40 |             <input id="state" type="text" />
41 |          </fieldset>
42 |       </form>
43 |    </article>
44 |    <script src="script.js"></script>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/Hands-on Project 1-1/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 1
 7 |       Hands-on Project 1-1
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 7, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 1-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | 
20 | </head>
21 | 
22 | <body>
23 |    <header>
24 |       <h1>
25 |          Hands-on Project 1-1
26 |       </h1>
27 |    </header>
28 | 
29 |    <article>
30 |       <h2>Financial Planning Tips</h2>
31 | 
32 |       <script>
33 |       //create ordered list
34 |       document.write("<ol>");
35 |       document.write("<li>Reduce spending on non-necessities.</li>");
36 |       document.write("<li>Use extra money to pay off debt, starting with highest-interest credit card.</li>");
37 |       document.write("<li>Continue paying off debts until you are debt free.</li>");
38 |       document.write("<li>Put a fixed percent of your pay aside in savings every payday.</li>");
39 |       document.write("</ol");
40 | 
41 |          </script>
42 |       </article>
43 |    </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/Hands-on Project 9-2/script.js:
--------------------------------------------------------------------------------
 1 | //JavaScript file
 2 | //Hands-on Project 9-2
 3 | //Lisa Kilker
 4 | //May 2, 2018
 5 | 
 6 | "use strict";
 7 | 
 8 | function populateInfo() {
 9 | 		if (document.cookie) {
10 | 	var uname = document.cookie;
11 | 		uname = uname.substring(uname.lastIndexOf("=") + 1);
12 | 		document.getElementById("usernameinput").value = uname;
13 | 		}
14 | }
15 | 
16 | function processCookie() {
17 | 		document.cookie = "username=" + document.getElementById("usernameinput").value;
18 | }
19 | 
20 | function handleSubmit(evt) {
21 | 		if (evt.preventDefault) {
22 | 			evt.preventDefault();
23 | 		
24 | 		} else {
25 | 			evt.returnValue = false;
26 | 		}
27 | 
28 | 		processCookie();
29 | 		
30 | 		document.getElementsByTagName("form")[0].submit();
31 | }
32 | 
33 | function createEventListener() {
34 | 	var loginForm = document.getElementsByTagName("form")[0];
35 | 
36 | 		if (loginForm.addEventListener) {
37 | 			loginForm.addEventListener("submit", handleSubmit, false);
38 | 		
39 | 		} else if (loginForm.attachEvent) {
40 | 			loginForm.attachEvent("onsubmit", handleSubmit);
41 | 		}
42 | }
43 | 
44 | function setUpPage() {
45 | 		populateInfo();
46 | 		createEventListener();
47 | }
48 | 
49 | 		if (window.addEventListener) {
50 | 			window.addEventListener("load", setUpPage, false);
51 | 
52 | 		} else if (window.attachEvent) {
53 | 			window.attachEvent("onload", setUpPage);
54 | 		}


--------------------------------------------------------------------------------
/Hands-on Project 12-2/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 12
 7 |       Hands-on Project 12-2
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   May 9, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
16 |    <title>Hands-on Project 12-2</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 12-2
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Pounds (lb) to Kilograms (Kg) converter</h2>
30 |       <form>
31 |           <fieldset>
32 |              <label for="pValue">
33 |                 Enter weight in pounds
34 |              </label>
35 |              <input type="number" id="pValue" />
36 |           </fieldset>
37 |           <fieldset>
38 |              <button type="button" id="convertButton">Convert to Kg</button>
39 |           </fieldset>
40 |           <fieldset>
41 |              <p>Weight in kilograms</p>
42 |              <p id="kValue"></p>
43 |           </fieldset>
44 |      </form>
45 |    </article>
46 |    <script src="jquery-1.11.1.min.js"></script>
47 |    <script src="script.js"></script>
48 | </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/Hands-on Project 11-1/search.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /****
 4 | 
 5 | * Simple PHP application for using the Bing Search API
 6 | 
 7 | NOTE:  THIS PROGRAM WILL NOT WORK SINCE DATAMARKET HAS BEEN DISCONTINUED SINCE THIS BOOK ASSIGNMENT WAS WRITTEN.
 8 | 
 9 | */
10 | 
11 | $acctKey = 'ba84bcee92084c69bba86c2a66ffe967';
12 | 
13 | $rootUri = 'https://api.cognitive.microsoft.com/bing/v7.0/search';
14 | 
15 | // Encode the query and the single quotes that must surround it.
16 | 
17 | $query = urlencode("'{$_GET['q']}'");
18 | 
19 | // Get the selected service operation (Web or Image).
20 | 
21 | $serviceOp = "Web";
22 | 
23 | // Construct the full URI for the query.
24 | 
25 | $requestUri = "$rootUri/$serviceOp?\$format=json&Query=$query"; 
26 | 
27 | // Encode the credentials and create the stream context.
28 | 
29 | $auth = base64_encode("$acctKey:$acctKey");
30 | 
31 | $data = array(
32 | 
33 | 'http' => array(
34 | 
35 | 'request_fulluri' => true,
36 | 
37 | // ignore_errors can help debug – remove for production. This option added in PHP 5.2.10
38 | 
39 | 'ignore_errors' => true,
40 | 
41 | 'header' => "Authorization: Basic $auth")
42 | 
43 | );
44 | 
45 | $context = stream_context_create($data);
46 | 
47 | // Get the response from Bing.
48 | 
49 | $response = file_get_contents($requestUri, 0, $context); 
50 | 
51 | header("Content-Type: text/json");
52 | 
53 | echo $response;
54 | 
55 | ?> 


--------------------------------------------------------------------------------
/Hands-on Project 6-1/results.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 6
 7 |       Hands-on Project 6-1
 8 | 
 9 |       Author: 
10 |       Date:   
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 |    <title>Hands-on Project 6-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 6-1
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Your form has been submitted</h2>
30 |       <div class="results">
31 |          <h3>You entered the following data:</h3>
32 |    
33 |          <script>
34 |              var formData = location.search;
35 |              formData = formData.substring(1, formData.length);
36 |              while (formData.indexOf("+") !== -1) {
37 |                 formData = formData.replace("+", " ");
38 |              }
39 |              formData = decodeURIComponent(formData);
40 |              var formArray = formData.split("&");
41 |              for (var i = 0; i < formArray.length; i = i + 1) {
42 |                 document.write("<p>" + formArray[i] + "</p>");
43 |              }
44 |          </script>
45 |       </div>
46 |    </article>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/Hands-on Project 6-2/results.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 6
 7 |       Hands-on Project 6-1
 8 | 
 9 |       Author: 
10 |       Date:   
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 |    <title>Hands-on Project 6-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 6-1
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Your form has been submitted</h2>
30 |       <div class="results">
31 |          <h3>You entered the following data:</h3>
32 |    
33 |          <script>
34 |              var formData = location.search;
35 |              formData = formData.substring(1, formData.length);
36 |              while (formData.indexOf("+") !== -1) {
37 |                 formData = formData.replace("+", " ");
38 |              }
39 |              formData = decodeURIComponent(formData);
40 |              var formArray = formData.split("&");
41 |              for (var i = 0; i < formArray.length; i = i + 1) {
42 |                 document.write("<p>" + formArray[i] + "</p>");
43 |              }
44 |          </script>
45 |       </div>
46 |    </article>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/Hands-on Project 9-2/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 9
 7 |       Hands-on Project 9-2
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   May 2, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta id="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0">
16 |    <title>Hands-on Project 9-2</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 9-2
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <div id="errorMessage"></div>
30 |       <form action="results.htm">
31 |          <fieldset id="deliveryinfo">
32 |             <legend>Site Login</legend>
33 |             <label for="usernameinput">Username</label>
34 |             <input type="text" id="usernameinput" name="username" />
35 |             <label for="passwordinput">Password</label>
36 |             <input type="password" id="passwordinput" name="password" />
37 |             <input type="checkbox" id="rememberinput" name="remember" value="remember" />
38 |             <label for="rememberinput" id="rememberlabel">Remember me</label>
39 |          </fieldset>
40 |          <fieldset id="submitbutton">
41 |             <input type="submit" id="submitBtn" value="Login" />
42 |          </fieldset>
43 |       </form>
44 |    </article>
45 |    <script src="script.js"></script>
46 | </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/Hands-on Project 9-3/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 9
 7 |       Hands-on Project 9-3
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   May 2, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta id="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0">
16 |    <title>Hands-on Project 9-2</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 9-2
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <div id="errorMessage"></div>
30 |       <form action="results.htm">
31 |          <fieldset id="deliveryinfo">
32 |             <legend>Site Login</legend>
33 |             <label for="usernameinput">Username</label>
34 |             <input type="text" id="usernameinput" name="username" />
35 |             <label for="passwordinput">Password</label>
36 |             <input type="password" id="passwordinput" name="password" />
37 |             <input type="checkbox" id="rememberinput" name="remember" value="remember" />
38 |             <label for="rememberinput" id="rememberlabel">Remember me</label>
39 |          </fieldset>
40 |          <fieldset id="submitbutton">
41 |             <input type="submit" id="submitBtn" value="Login" />
42 |          </fieldset>
43 |       </form>
44 |    </article>
45 |    <script src="script.js"></script>
46 | </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/Hands-on Project 10-1/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 10
 7 |       Hands-on Project 10-1
 8 | 
 9 |       Author: 
10 |       Date:   
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 10-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 10-1
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Drag the tiles to form the picture</h2>
30 |       <div id="image">
31 |          <img src="images/frog.jpg" width="195" height="151" />
32 |       </div>
33 |       <div id="grid">
34 |          <div id="top1">
35 |             &nbsp;
36 |          </div>
37 |          <div>
38 |             &nbsp;
39 |          </div>
40 |          <div>
41 |             &nbsp;
42 |          </div>
43 |          <div id="bottom1">
44 |             &nbsp;
45 |          </div>
46 |          <div>
47 |             &nbsp;
48 |          </div>
49 |          <div>
50 |             &nbsp;
51 |          </div>
52 |       </div>
53 |       <div id="pieces">
54 |          <div id="piece1"></div>
55 |          <div id="piece2"></div>
56 |          <div id="piece3"></div>
57 |          <div id="piece4"></div>
58 |          <div id="piece5"></div>
59 |          <div id="piece6"></div>
60 |       </div>
61 |    </article>
62 |    <script src="script.js"></script>
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/Hands-on Project 2-1/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 2
 7 |       Hands-on Project 2-1
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 8, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 2-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 2-1
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Fahrenheit (&#176; F) to Celsius (&#176; C) converter</h2>
30 |       <form>
31 |           <fieldset>
32 |             <label for="fValue">
33 |               Enter temp in &#176; F
34 |             </label>
35 |             <input type="number" id="fValue" />
36 |           </fieldset>
37 |           <fieldset>
38 |             <button type="button" id="button">Convert to &#176; C</button>
39 |           </fieldset>
40 |           <fieldset>
41 |              <p>Temp in &#176; C</p>
42 |             <p id="cValue">&nbsp;</p>
43 |           </fieldset>
44 |      </form>
45 |    </article>
46 |    <script>
47 |     function convert() {
48 |       var degF = document.getElementById("fValue").value;
49 |       var degC = (degF-32)*(5/9);
50 | 
51 |         document.getElementById("cValue").innerHTML = degC;
52 |       }
53 |         document.getElementById("button").addEventListener("click", convert, false);
54 |     </script>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/Hands-on Project 9-3/script.js:
--------------------------------------------------------------------------------
 1 | //JavaScript file
 2 | //Hands-on Project 9-3
 3 | //Lisa Kilker
 4 | //May 2, 2018
 5 | 
 6 | "use strict";
 7 | 
 8 | function populateInfo() {
 9 | 		if (document.cookie) {
10 | 	var uname = document.cookie;
11 | 		uname = uname.substring(uname.lastIndexOf("=") + 1);
12 | 		document.getElementById("usernameinput").value = uname;
13 | 		}
14 | }
15 | 
16 | function processCookie() {
17 | 		if (document.getElementById("rememberinput").checked) {
18 | 			document.cookie = "username=" + document.getElementById("usernameinput").value;
19 | 
20 | 		} else {
21 | 
22 | 	var expiresDate = new Date();
23 | 			expiresDate.setDate(expiresDate.getDate() - 7);
24 | 			document.cookie = "username=null; expires=" + expiresDate.toUTCString();
25 | 		}
26 | }
27 | 
28 | function handleSubmit(evt) {
29 | 		if (evt.preventDefault) {
30 | 			evt.preventDefault();
31 | 		
32 | 		} else {
33 | 			evt.returnValue = false;
34 | 		}
35 | 
36 | 		processCookie();
37 | 		
38 | 		document.getElementsByTagName("form")[0].submit();
39 | }
40 | 
41 | function createEventListener() {
42 | 	var loginForm = document.getElementsByTagName("form")[0];
43 | 
44 | 		if (loginForm.addEventListener) {
45 | 			loginForm.addEventListener("submit", handleSubmit, false);
46 | 		
47 | 		} else if (loginForm.attachEvent) {
48 | 			loginForm.attachEvent("onsubmit", handleSubmit);
49 | 		}
50 | }
51 | 
52 | function setUpPage() {
53 | 		populateInfo();
54 | 		createEventListener();
55 | }
56 | 
57 | 		if (window.addEventListener) {
58 | 			window.addEventListener("load", setUpPage, false);
59 | 
60 | 		} else if (window.attachEvent) {
61 | 			window.attachEvent("onload", setUpPage);
62 | 		}


--------------------------------------------------------------------------------
/Hands-on Project 8-1/script.js:
--------------------------------------------------------------------------------
 1 | //Hands-on Project 8-1
 2 | //Author: Lisa Kilker
 3 | //Date:  April 25, 2018
 4 | 
 5 | "use strict";
 6 | 
 7 | 	var newAccountArray = [];
 8 | 
 9 | function createID() {
10 | 	var fname = document.getElementById("fnameinput");
11 | 	var lname = document.getElementById("lnameinput");
12 | 	var zip = document.getElementById("zipinput");
13 | 	var account = document.getElementById("accountidbox");
14 | 	var fields = document.getElementsByTagName("input");
15 | 	var acctid;
16 | 	var firstInit;
17 | 	var lastInit;
18 | 
19 | 		if (fname != null && lname != null && zip != null
20 | 			&& fname != "" && lname != "" && zip != "") {
21 | 
22 | 			firstInit = fname.value.charAt(0).toUpperCase();
23 | 			lastInit = lname.value.charAt(0).toUpperCase();
24 | 			acctid = firstInit + lastInit + zip.value;
25 | 			account.value = acctid;
26 | 			newAccountArray = [];
27 | 		
28 | 
29 | 		for (var i = 0; i < fields.length - 1; i++) {
30 | 			newAccountArray.push(fields[i].value);
31 | 		}
32 | 	}
33 | }
34 | 
35 | function createEventListeners () {
36 | 	var fname = document.getElementById("fnameinput");
37 | 	var lname = document.getElementById("lnameinput");
38 | 	var zip = document.getElementById("zipinput");
39 | 
40 | 		if (fname.addEventListener) {
41 | 			fname.addEventListener("change", createID, false);
42 | 			lname.addEventListener("change", createID, false);
43 | 			zip.addEventListener("change", createID, false);
44 | 
45 | 		} else if (fname.attachEvent) {
46 | 			fname.attachEvent("onchange", createID);
47 | 			lname.attachEvent("onchange", createID);
48 | 			zip.attachEvent("onchange", createID);
49 | 		}
50 | 	}
51 | 
52 | 		if (window.addEventListener) {
53 | 			window.addEventListener("load", createEventListeners, false);
54 | 
55 | 		} else if (window.attachEvent) {
56 | 			window.attachEvent("onload", createEventListeners);
57 | 		}
58 | 
59 | 
60 | 
61 | 
62 | 


--------------------------------------------------------------------------------
/Hands-on Project 8-1/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 8
 7 |       Hands-on Project 8-1
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 25, 2018 
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 8-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 8-1
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>New Account Information</h2>
30 |       <form>
31 |          <fieldset id="deliveryinfo">
32 |             <label for="fnameinput">First Name</label>
33 |             <input type="text" id="fnameinput" name="fname" />
34 |             <label for="lnameinput">Last Name</label>
35 |             <input type="text" id="lnameinput" name="lname" />
36 |             <label for="addrinput">Street Address</label>
37 |             <input type="text" id="addrinput" name="address" />
38 |             <label for="cityinput">City</label>
39 |             <input type="text" id="cityinput" name="city" />
40 |             <label for="emailinput">State</label>
41 |             <input type="text" id="stateinput" name="state" />
42 |             <label for="phoneinput">Zip</label>
43 |             <input type="text" id="zipinput" name="zip" />
44 |             <label for="accountid">Account ID</label>
45 |             <input type="text" id="accountidbox" name="accountid" />
46 |          </fieldset>
47 |          <fieldset id="submitbutton">
48 |             <input type="submit" id="submitBtn" value="Create Account" />
49 |          </fieldset>
50 |       </form>
51 |       </article>
52 |       <script src="script.js"></script>
53 |    </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/Hands-on Project 12-1/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 12
 7 |       Hands-on Project 12-1
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   May 9, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 12-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 12-1
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Brownies</h2>
30 |       <h3>Ingredients</h3>
31 |       <ul class="ingr">
32 |          <li>1 stick butter</li>
33 |          <li>6-1/2 oz 70% dark chocolate</li>
34 |          <li>1/4 t salt</li>
35 |          <li>1/2 t vanilla</li>
36 |          <li>1 c sugar</li>
37 |          <li>2 eggs (at room temperature)</li>
38 |          <li>1/2 c flour</li>
39 |          <li>1 c broken walnuts (optional)</li>
40 |       </ul>
41 |       <h3>Instructions</h3>
42 |       <div class="instr">
43 |          <p>Preheat oven to 325.</p>
44 |          <p>Melt together butter and dark chocolate. Allow to cool to room temperature.</p>
45 |          <p>Mix in salt, vanilla, and sugar.</p>
46 |          <p>Stir in eggs, one at a time.</p>
47 |          <p>Add flour, then stir until almost combined.</p>
48 |          <p>Add walnuts (if using), then stir once or twice.</p>
49 |          <p>Butter and flour an 8 x 8 glass baking dish, then pour batter into dish and jiggle gently to distribute to corners.</p>
50 |          <p>Bake on center rack for 35 minutes, or until a toothpick or sharp knife comes out sticky, with just a few crumbs but not wet.</p>
51 |       </div>
52 |    </article>
53 |    <script src="jquery-1.11.1.min.js"></script>
54 |    <script src="script.js"></script>
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/Hands-on Project 3-2/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 3
 7 |       Hands-on Project 3-2
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 12, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 3-2</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.58072.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 3-2
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Contact Information</h2>
30 |       <form>
31 |         <fieldset id="contactinfo">
32 |           <label for="nameinput">
33 |             Name
34 |             <input type="text" id="nameinput" name="name" placeholder="first and last name" />
35 |           </label>
36 |           <label for="emailinput">
37 |             Email
38 |             <input type="text" id="emailinput" name="email" placeholder="address@example.com" />
39 |           </label>
40 |           <label for="phoneinput">
41 |             Phone
42 |             <input type="text" id="phoneinput" name="phone" placeholder="###-###-####" />
43 |           </label>
44 |         </fieldset>
45 |         <fieldset id="submitbutton">
46 |           <input type="submit" value="Submit" />
47 |         </fieldset>
48 |      </form>
49 |    </article>
50 |    <script>
51 |      function insertPlaceholders() {
52 |         if(!Modernizr.input.placeholder) {
53 |           document.getElementById("nameinput").value = "first and last name";
54 |           document.getElementById("emailinput").value = "address@example.com";
55 |           document.getElementById("phoneinput").value = "###-###-####";
56 |         }
57 |       }
58 |         if(window.addEventListener) {
59 |           window.addEventListener("load", insertPlaceholders, false);
60 |       } else if (window.attachEvent) {
61 |           window.attachEvent("onload", insertPlaceholders);
62 |       }
63 |     </script>
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/Hands-on Project 2-4/styles.css:
--------------------------------------------------------------------------------
 1 | /*  JavaScript 6th Edition
 2 |     Chapter 2
 3 |     Hands-on Project 2-4
 4 | 
 5 |     Filename: styles.css
 6 | */
 7 | 
 8 | /* apply a natural box layout model to all elements */
 9 | * {
10 |    -moz-box-sizing: border-box;
11 |    -webkit-box-sizing: border-box;
12 |    box-sizing: border-box;
13 | }
14 | 
15 | /* reset rules */
16 | html, body, div, span, applet, object, iframe,
17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
18 | a, abbr, acronym, address, big, cite, code,
19 | del, dfn, em, img, ins, kbd, q, s, samp,
20 | small, strike, strong, sub, sup, tt, var,
21 | b, u, i, center,
22 | dl, dt, dd, ol, ul, li,
23 | fieldset, form, label, legend,
24 | table, caption, tbody, tfoot, thead, tr, th, td,
25 | article, aside, canvas, details, embed, 
26 | figure, figcaption, footer, header, hgroup, 
27 | menu, nav, output, ruby, section, summary,
28 | time, mark, audio, video {
29 |    margin: 0;
30 |    padding: 0;
31 |    border: 0;
32 |    font-size: 100%;
33 |    font: inherit;
34 |    vertical-align: baseline;
35 | }
36 | 
37 | /* HTML5 display-role reset for older browsers */
38 | article, aside, details, figcaption, figure, 
39 | footer, header, hgroup, menu, nav, section {
40 |    display: block;
41 | }
42 | 
43 | body {
44 |    line-height: 1;
45 |    width: 960px;
46 |    background: white;
47 |    margin: 0 auto;
48 |    font-family: Verdana, Geneva, sans-serif; 
49 | }
50 | 
51 | ol, ul {
52 |    list-style: none;
53 | }
54 | 
55 | /* page header */
56 | header {
57 |    background: #330570;
58 |    width: 100%;
59 |    color: #FFFFFF;
60 |    font-size: 48px;
61 |    text-align: center;
62 |    line-height: 1.5em;
63 | }
64 | 
65 | /* main content */
66 | article {
67 |    width: 960px;
68 |    height: 250px;
69 |    text-align: left;
70 |    background: #FFCF40;
71 | }
72 | 
73 | article h2 {
74 |    font-weight: bold;
75 |    font-size: 24px;
76 |    padding: 10px;
77 | }
78 | 
79 | /* form */
80 | form {
81 |    margin: 0 auto;
82 | }
83 | 
84 | input {
85 |    float: left;
86 |    clear: left;
87 |    margin: 10px;
88 | }
89 | 
90 | label {
91 |    float: left;
92 |    font-size: 1.4em;
93 | }
94 | 


--------------------------------------------------------------------------------
/Hands-on Project 2-5/styles.css:
--------------------------------------------------------------------------------
 1 | /*  JavaScript 6th Edition
 2 |     Chapter 2
 3 |     Hands-on Project 2-5
 4 | 
 5 |     Filename: styles.css
 6 | */
 7 | 
 8 | /* apply a natural box layout model to all elements */
 9 | * {
10 |    -moz-box-sizing: border-box;
11 |    -webkit-box-sizing: border-box;
12 |    box-sizing: border-box;
13 | }
14 | 
15 | /* reset rules */
16 | html, body, div, span, applet, object, iframe,
17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
18 | a, abbr, acronym, address, big, cite, code,
19 | del, dfn, em, img, ins, kbd, q, s, samp,
20 | small, strike, strong, sub, sup, tt, var,
21 | b, u, i, center,
22 | dl, dt, dd, ol, ul, li,
23 | fieldset, form, label, legend,
24 | table, caption, tbody, tfoot, thead, tr, th, td,
25 | article, aside, canvas, details, embed, 
26 | figure, figcaption, footer, header, hgroup, 
27 | menu, nav, output, ruby, section, summary,
28 | time, mark, audio, video {
29 |    margin: 0;
30 |    padding: 0;
31 |    border: 0;
32 |    font-size: 100%;
33 |    font: inherit;
34 |    vertical-align: baseline;
35 | }
36 | 
37 | /* HTML5 display-role reset for older browsers */
38 | article, aside, details, figcaption, figure, 
39 | footer, header, hgroup, menu, nav, section {
40 |    display: block;
41 | }
42 | 
43 | body {
44 |    line-height: 1;
45 |    width: 960px;
46 |    background: white;
47 |    margin: 0 auto;
48 |    font-family: Verdana, Geneva, sans-serif; 
49 | }
50 | 
51 | ol, ul {
52 |    list-style: none;
53 | }
54 | 
55 | /* page header */
56 | header {
57 |    background: #330570;
58 |    width: 100%;
59 |    color: #FFFFFF;
60 |    font-size: 48px;
61 |    text-align: center;
62 |    line-height: 1.5em;
63 | }
64 | 
65 | /* main content */
66 | article {
67 |    width: 960px;
68 |    height: 250px;
69 |    text-align: left;
70 |    background: #FFCF40;
71 | }
72 | 
73 | article h2 {
74 |    font-weight: bold;
75 |    font-size: 24px;
76 |    padding: 10px;
77 | }
78 | 
79 | /* form */
80 | form {
81 |    margin: 0 auto;
82 | }
83 | 
84 | input {
85 |    float: left;
86 |    clear: left;
87 |    margin: 10px;
88 | }
89 | 
90 | label {
91 |    float: left;
92 |    font-size: 1.4em;
93 | }
94 | 


--------------------------------------------------------------------------------
/Hands-on Project 11-1/script.js:
--------------------------------------------------------------------------------
 1 | /*  JavaScript 6th Edition
 2 |     Chapter 11
 3 |     Hands-on Project 11-1
 4 | 
 5 |     Author: Lisa Kilker
 6 |     Date:   May 9, 2018
 7 | 
 8 |     Filename: script.js
 9 | */
10 | 
11 | "use strict";
12 | 
13 | 	var httpRequest = false;
14 | 
15 | function getRequestObject() {
16 | 		try {
17 | 			httpRequest = new XMLHttpRequest();
18 | 		}
19 | 		catch (requestError) {
20 | 			return false;
21 | 		}
22 | 		return httpRequest;
23 | }
24 | 
25 | function getResults(evt) {
26 | 		if (evt.preventDefault) {
27 | 			evt.preventDefault();
28 | 		} else {
29 | 			evt.returnValue = false;
30 | 		}
31 | 
32 | 	var entry = document.getElementsByTagName("input")[0].value;
33 | 
34 | 		if (!httpRequest) {
35 | 			httpRequest = getRequestObject();
36 | 		}
37 | 
38 | 			httpRequest.abort();
39 | 			httpRequest.open("get","search.php?q=" + entry, true);
40 | 			httpRequest.send();
41 | 			httpRequest.onreadystatechange = displaySuggestions;
42 | }
43 | 
44 | function displaySuggestions() {
45 | 		if (httpRequest.readyState === 4 && httpRequest.status === 200) {
46 | 			searchResults = JSON.parse(httpRequest.responseText);
47 | 
48 | 	var items = searchResults.d.results;
49 | 	var articleEl = document.getElementsByTagName("article")[0];
50 | 
51 | 		for (var i = 0; i < items.length; i++) {
52 | 	var newDiv = document.createElement("div");
53 | 	var head = document.createDocumentFragment();
54 | 	var newP1 = document.createElement("p");
55 | 	var newP2 = document.createElement("p");
56 | 	var newP3 = document.createElement("p");
57 | 	var newA = document.createElement("a");
58 | 
59 | 			head.appendChild(newP1);
60 | 			newA.innerHTML = items[i].Title;
61 | 			newA.setAttribute("href", items[i].Url);
62 | 			newP1.appendChild(newA);
63 | 			newP2.className = "url";
64 | 			newP3.innerHTML = items[i].Description;
65 | 			newDiv.appendChild(head);
66 | 			newDiv.appendChild(newP2);
67 | 			newDiv.appendChild(newP3);
68 | 			articleEl.appendChild(newDiv);
69 | 		}
70 | 	}
71 | }
72 | 
73 | 	var form = document.getElementsByTagName("form")[0];
74 | 		if (form.addEventListener) {
75 | 			form.addEventListener("submit", getResults, false);
76 | 		} else if (form.attachEvent) {
77 | 			form.attachEvent("onsubmit", getResults);
78 | 		}
79 | 
80 | 


--------------------------------------------------------------------------------
/Hands-on Project 11-4/script.js:
--------------------------------------------------------------------------------
 1 | /*  JavaScript 6th Edition
 2 |     Chapter 11
 3 |     Hands-on Project 11-4
 4 | 
 5 |     Author: Lisa Kilker
 6 |     Date:   May 9, 2018
 7 | 
 8 |     Filename: script.js
 9 | */
10 | 
11 | "use strict";
12 | 
13 | 	var httpRequest = false;
14 | 
15 | function getRequestObject() {
16 | 
17 | 		try {
18 | 			httpRequest = new XMLHttpRequest();
19 | 		}
20 | 		catch (requestError) {  //display city and state fields and labels for manual input
21 | 			document.getElementById("csset").style.visibility = "visible";  //remove event listeners so additional input is ignored
22 | 	var zip = document.getElementById("zip").value;
23 | 
24 | 		if (zip.addEventListener) {
25 | 			zip.removeEventListener("keyup", checkInput, false);
26 | 		} else if (zip.attachEvent) {
27 | 			zip.detachEvent("onkeyup", checkInput);
28 | 		}
29 | 		return false;
30 | 		}
31 | 		return httpRequest;
32 | }
33 | 
34 | function checkInput() {
35 | 	var zip = document.getElementById("zip").value;
36 | 		if (zip.length === 5) {
37 | 			getLocation();
38 | 		} else {
39 | 			document.getElementById("city").value = "";
40 | 			document.getElementById("state").value = "";
41 | 		}
42 | }
43 | 
44 | function getLocation() {
45 | 	var zip = document.getElementById("zip").value;
46 | 		if (!httpRequest) {
47 | 			httpRequest = getRequestObject();
48 | 		}
49 | 
50 | 			httpRequest.abort();
51 | 			httpRequest.open("get","http://api.zippopotam.us/us/" + zip, true);
52 | 			httpRequest.send();
53 | 			httpRequest.onreadystatechange = displayData;
54 | }
55 | 
56 | function displayData() {
57 | 		if(httpRequest.readyState === 4 && httpRequest.status === 200) {
58 | 	
59 | 	var resultData = JSON.parse(httpRequest.responseText);
60 | 	var city = document.getElementById("city");
61 | 	var state = document.getElementById("state");
62 | 
63 | 			city.value = resultData.places[0]["place name"];
64 | 			state.value = resultData.places[0]["state abbreviation"];
65 | 
66 | 			document.getElementById("zip").blur();
67 | 			document.getElementById("csset").style.visibility = "visible";
68 | 
69 | 		}
70 | }
71 | 
72 | 	var zip = document.getElementById("zip");
73 | 		if (zip.addEventListener) {
74 | 			zip.addEventListener("keyup", checkInput, false);
75 | 		} else if (zip.attachEvent) {
76 | 			zip.attachEvent("onkeyup", checkInput);
77 | 		}
78 | 
79 | 


--------------------------------------------------------------------------------
/Hands-on Project 3-1/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 3
 7 |       Hands-on Project 3-1
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:  April 12, 2018 
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 3-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 3-1
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Lunch selections</h2>
30 |       <form>
31 |          <input type="checkbox" id="item1" value="8" />
32 |          <label for="item1">Fried chicken ($8.00)</label>
33 |          <input type="checkbox" id="item2" value="10" />
34 |          <label for="item2">Fried halibut ($10.00)</label>
35 |          <input type="checkbox" id="item3" value="8" />
36 |          <label for="item3">Hamburger ($8.00)</label>
37 |          <input type="checkbox" id="item4" value="13" />
38 |          <label for="item4">Grilled salmon ($13.00)</label>
39 |          <input type="checkbox" id="item5" value="6" />
40 |          <label for="item5">Side salad ($6.00)</label>
41 |          <input type="button" value="Submit" id="sButton" />
42 |       </form>
43 |       <div>
44 |          <p id="total"></p>
45 |       </div>
46 |    </article>
47 |    <script>
48 |       function calcTotal(){      
49 |          var itemTotal = 0;
50 |          var items = document.getElementsByTagName("input");
51 |          for (var i = 0; i < 5; i++){
52 |             if (items[i].checked){
53 |                itemTotal += (items[i].value * 1);
54 |             }
55 |          }
56 |          document.getElementById("total").innerHTML = "Your order total is $" + itemTotal + ".00";
57 |       }
58 |       var submitButton = document.getElementById("sButton");
59 |       if (submitButton.addEventListener){
60 |             submitButton.addEventListener("click", calcTotal, false);
61 |       } else if (submitButton.attachEvent){
62 |             submitButton.attachEvent("onclick", calcTotal);
63 |       }
64 |       </script>
65 |    </body>
66 | </html>
67 | 


--------------------------------------------------------------------------------
/Hands-on Project 3-4/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 3
 7 |       Hands-on Project 3-4
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 12, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 3-4</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 3-4
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <div id="results">
30 |           <ul>
31 |              <li id="item1"></li>
32 |              <li id="item2"></li>
33 |              <li id="item3"></li>
34 |              <li id="item4"></li>
35 |              <li id="item5"></li>
36 |           </ul>
37 |           <p id="resultsExpl"></p>
38 |       </div>
39 |       <form>
40 |           <fieldset>
41 |             <label for="toolBox" id="placeLabel">
42 |               Type the name of a tool, then click Submit:
43 |             </label>
44 |             <input type="text" id="toolBox" />
45 |           </fieldset>
46 |           <fieldset>
47 |             <button type="button" id="button">Submit</button>
48 |           </fieldset>
49 |       </form>
50 |    </article>
51 |    <script>
52 |       var i = 1;
53 |       var listItem = "";
54 |     
55 |       function processInput() {
56 |         if (i <= 5) {
57 |             listItem = "item" + i;
58 |                 document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;
59 |                 document.getElementById("toolBox").value = "";
60 | 
61 |         if (i == 5) {
62 |                 document.getElementById("resultsExpl").innerHTML = "Thank you for your suggestions.";
63 |           }
64 |             i++;
65 |         }
66 |       }
67 |       var submitButton = document.getElementById("button");
68 | 
69 |         if(submitButton.addEventListener) {
70 |             submitButton.addEventListener("click", processInput, false);
71 | 
72 |       } else if(submitButton.attachEvent) {
73 |             submitButton.attachEvent("onclick", processInput);
74 |     }
75 |     </script>
76 |   </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/Hands-on Project 3-1/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 3
  3 |     Hands-on Project 3-1
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    width: 960px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Verdana, Geneva, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #5472B2;
 58 |    width: 100%;
 59 |    color: #FFFFFF;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 | }
 64 | 
 65 | /* main content */
 66 | article {
 67 |    width: 960px;
 68 |    height: 250px;
 69 |    text-align: left;
 70 |    background: #FFDB70;
 71 | }
 72 | 
 73 | article h2 {
 74 |    font-weight: bold;
 75 |    font-size: 24px;
 76 |    padding: 10px;
 77 | }
 78 | 
 79 | /* form */
 80 | form {
 81 |    float: left;
 82 | }
 83 | 
 84 | input {
 85 |    float: left;
 86 |    clear: left;
 87 |    margin: 10px;
 88 | }
 89 | 
 90 | label {
 91 |    float: left;
 92 |    font-size: 1.4em;
 93 | }
 94 | 
 95 | /* total div */
 96 | article div {
 97 |    width: 50%;
 98 |    float: right;
 99 |    font-size: 18px;
100 |    font-weight: bold;
101 | }
102 | 


--------------------------------------------------------------------------------
/Hands-on Project 1-1/styles.css:
--------------------------------------------------------------------------------
 1 | /*  JavaScript 6th Edition
 2 |     Chapter 1
 3 |     Hands-on Project 1-1
 4 | 
 5 |     Filename: styles.css
 6 | */
 7 | 
 8 | /* apply a natural box layout model to all elements */
 9 | * {
10 |    -moz-box-sizing: border-box;
11 |    -webkit-box-sizing: border-box;
12 |    box-sizing: border-box;
13 | }
14 | 
15 | /* reset rules */
16 | html, body, div, span, applet, object, iframe,
17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
18 | a, abbr, acronym, address, big, cite, code,
19 | del, dfn, em, img, ins, kbd, q, s, samp,
20 | small, strike, strong, sub, sup, tt, var,
21 | b, u, i, center,
22 | dl, dt, dd, ol, ul, li,
23 | fieldset, form, label, legend,
24 | table, caption, tbody, tfoot, thead, tr, th, td,
25 | article, aside, canvas, details, embed, 
26 | figure, figcaption, footer, header, hgroup, 
27 | menu, nav, output, ruby, section, summary,
28 | time, mark, audio, video {
29 |    margin: 0;
30 |    padding: 0;
31 |    border: 0;
32 |    font-size: 100%;
33 |    font: inherit;
34 |    vertical-align: baseline;
35 | }
36 | 
37 | /* HTML5 display-role reset for older browsers */
38 | article, aside, details, figcaption, figure, 
39 | footer, header, hgroup, menu, nav, section {
40 |    display: block;
41 | }
42 | 
43 | body {
44 |    line-height: 1;
45 |    max-width: 960px;
46 |    background: white;
47 |    margin: 0 auto;
48 |    font-family: Verdana, Geneva, sans-serif; 
49 | }
50 | 
51 | ol, ul {
52 |    list-style: none;
53 | }
54 | 
55 | /* page header */
56 | header {
57 |    background: #330570;
58 |    width: 100%;
59 |    color: #FFFFFF;
60 |    font-size: 48px;
61 |    text-align: center;
62 |    line-height: 1.5em;
63 |    -webkit-border-top-right-radius: 20px;
64 |    -webkit-border-top-left-radius: 20px;
65 |    -moz-border-radius-topright: 20px;
66 |    -moz-border-radius-topleft: 20px;
67 |    border-top-right-radius: 20px;
68 |    border-top-left-radius: 20px;
69 | }
70 | 
71 | /* main content */
72 | article {
73 |    width: 960px;
74 |    text-align: left;
75 |    background: #FFCF40;
76 |    -webkit-border-bottom-right-radius: 20px;
77 |    -moz-border-radius-bottomright: 20px;
78 |    border-bottom-right-radius: 20px;
79 | }
80 | 
81 | article h2 {
82 |    font-weight: bold;
83 |    font-size: 24px;
84 |    padding: 10px;
85 | }
86 | 
87 | article ol li {
88 |    padding: 10px;
89 |    margin-left: 35px;
90 |    list-style-type: decimal;
91 | }
92 | 


--------------------------------------------------------------------------------
/Hands-on Project 2-4/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 2
 7 |       Hands-on Project 2-4
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 8, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 2-4</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 2-4
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Lunch selections</h2>
30 |       <form>
31 |          <input type="checkbox" id="item1" value="8" />
32 |          <label for="item1">Fried chicken ($8.00)</label>
33 |          <input type="checkbox" id="item2" value="9" />
34 |          <label for="item2">Fried halibut ($9.00)</label>
35 |          <input type="checkbox" id="item3" value="8" />
36 |          <label for="item3">Hamburger ($8.00)</label>
37 |          <input type="checkbox" id="item4" value="13" />
38 |          <label for="item4">Grilled salmon ($13.00)</label>
39 |          <input type="checkbox" id="item5" value="6" />
40 |          <label for="item5">Side salad ($6.00)</label>
41 |          <input type="submit" id="submit" value="Submit" />
42 |       </form>
43 |    </article>
44 |    <script>
45 |       function calcTotal() {
46 |          var itemTotal = 0;
47 |          var item1 = document.getElementById("item1");
48 |          var item2 = document.getElementById("item2");
49 |          var item3 = document.getElementById("item3");
50 |          var item4 = document.getElementById("item4");
51 |          var item5 = document.getElementById("item5");
52 | 
53 |          (item1.checked) ? (itemTotal += 8) : (itemTotal += 0);
54 |          (item2.checked) ? (itemTotal += 9) : (itemTotal += 0);
55 |          (item3.checked) ? (itemTotal += 8) : (itemTotal += 0);
56 |          (item4.checked) ? (itemTotal += 13) : (itemTotal += 0);
57 |          (item5.checked) ? (itemTotal += 6) : (itemTotal += 0);
58 | 
59 |          var salesTaxRate = 0.07;
60 |          var orderTotal = itemTotal + (itemTotal * salesTaxRate);
61 | 
62 |          alert("Your order total is $" + orderTotal);
63 |          }
64 |          document.getElementById("submit").addEventListener("click", calcTotal, false);
65 |       </script>
66 |    </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/Hands-on Project 7-1/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 7
 7 |       Hands-on Project 7-1
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:  April 25, 2018 
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
16 |    <title>Hands-on Project 7-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 7-1
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Square Root Calculator</h2>
30 |       <form>
31 |           <fieldset>
32 |             <label for="mValue">
33 |               Enter a number
34 |             </label>
35 |             <input type="number" id="value" />
36 |           </fieldset>
37 |           <fieldset>
38 |             <button type="button" id="convertButton">Calculate square root</button>
39 |           </fieldset>
40 |           <fieldset>
41 |              <p>Square root</p>
42 |             <p id="sqRoot"></p>
43 |           </fieldset>
44 |      </form>
45 |    </article>
46 |     <script>
47 |       var valueElement = document.getElementById("value");
48 |       var resultElement = document.getElementById("sqRoot");
49 | 
50 |       function convert(){
51 |         var root = Math.sqrt(valueElement.value);
52 | 
53 |           resultElement.innerHTML = root.toFixed(2);
54 |       }
55 | 
56 |       function createEventListener() {
57 |         var submitButton = document.getElementById("convertButton");
58 | 
59 |           if (submitButton.addEventListener) {
60 |               submitButton.addEventListener("click", convert, false);
61 | 
62 |           } else if (submitButton.attachEvent) {
63 |               submitButton.attachEvent("onclick", convert);
64 |           }
65 |               document.getElementById('value').value = ""; //clears last starting value
66 |               document.getElementById('sqRoot').innerHTML = ""; //clears previous results
67 |           }
68 | 
69 |           if (window.addEventListener) {
70 |               window.addEventListener("load", createEventListener, false);
71 | 
72 |           } else if (window.attachEvent) {
73 |               window.attachEvent("onload", createEventListener);
74 |       }
75 | 
76 |    </script>
77 |   </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/Hands-on Project 4-3/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 4
 7 |       Hands-on Project 4-3
 8 | 
 9 |       Author: 
10 |       Date:   
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
16 |    <title>Hands-on Project 4-3</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 4-3
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <div id="results">
30 |           <p id="resultsExpl"></p>
31 |           <ul>
32 |              <li id="item1"></li>
33 |              <li id="item2"></li>
34 |              <li id="item3"></li>
35 |              <li id="item4"></li>
36 |              <li id="item5"></li>
37 |           </ul>
38 |       </div>
39 |       <form>
40 |           <fieldset>
41 |             <label for="placeBox" id="placeLabel">
42 |               Type the name of a place, then click Submit:
43 |             </label>
44 |             <input type="text" id="placeBox" />
45 |           </fieldset>
46 |           <fieldset>
47 |             <button type="button" id="button">Submit</button>
48 |           </fieldset>
49 |       </form>
50 |    </article>
51 |    <script>
52 |       var places = []; 
53 |       var i = 1; 
54 |   
55 |       function processInput() {
56 |          places[i] =  document.getElementById("placeBox").value; 
57 |                       document.getElementById("placeBox").value = "";
58 |   
59 |           if (places[i] != "") { 
60 |           if (i < 5) {
61 |           i++;
62 | 
63 |          } else { 
64 |             document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
65 |             listItem = "";
66 | 
67 |             for (j = 1; j < 6; j++) { 
68 |               listItem = "item" + j;
69 |               document.getElementById(listItem).innerHTML = places[j];
70 |             }
71 |           }
72 |         } 
73 |       }
74 |       var submitButton = document.getElementById("button");
75 |       
76 |       if (submitButton.addEventListener) {
77 |           submitButton.addEventListener("click", processInput, false); 
78 | 
79 |       } else if (submitButton.attachEvent) {
80 |           submitButton.attachEvent("onclick", processInput);
81 |     }
82 |     </script>
83 |   </body>
84 | </html>
85 | 


--------------------------------------------------------------------------------
/Hands-on Project 2-5/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 2
 7 |       Hands-on Project 2-5
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 8, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 2-5</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 2-5
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Lunch selections</h2>
30 |       <form>
31 |          <input type="checkbox" id="item1" value="8" />
32 |          <label for="item1">Fried chicken ($8.00)</label>
33 |          <input type="checkbox" id="item2" value="10" />
34 |          <label for="item2">Fried halibut ($9.00)</label>
35 |          <input type="checkbox" id="item3" value="8" />
36 |          <label for="item3">Hamburger ($8.00)</label>
37 |          <input type="checkbox" id="item4" value="13" />
38 |          <label for="item4">Grilled salmon ($13.00)</label>
39 |          <input type="checkbox" id="item5" value="6" />
40 |          <label for="item5">Side salad ($6.00)</label>
41 |          <input type="button" id="submit" value="Submit" />
42 |       </form>
43 |    </article>
44 |    <script>
45 |       function calcTotal() {
46 |          var itemTotal = 0;
47 |          var item1 = document.getElementById("item1");
48 |          var item2 = document.getElementById("item2");
49 |          var item3 = document.getElementById("item3");
50 |          var item4 = document.getElementById("item4");
51 |          var item5 = document.getElementById("item5");
52 | 
53 |          (item1.checked) ? (itemTotal += 8) : (itemTotal += 0);
54 |          (item2.checked) ? (itemTotal += 9) : (itemTotal += 0);
55 |          (item3.checked) ? (itemTotal += 8) : (itemTotal += 0);
56 |          (item4.checked) ? (itemTotal += 13) : (itemTotal += 0);
57 |          (item5.checked) ? (itemTotal += 6) : (itemTotal += 0);
58 | 
59 |          var salesTaxRate = 0.07;
60 |          itemTotal *= 100;
61 |          var orderTotal = (itemTotal + (itemTotal * salesTaxRate))/100;
62 |          
63 |          alert("Your order total is $" + orderTotal);
64 |       }
65 |          document.getElementById("submit").addEventListener("click", calcTotal, false);
66 |       </script>
67 |    </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/Hands-on Project 1-4/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 1
 7 |       Hands-on Project 1-4
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 7, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 1-4</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 1-4
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Shipping Address</h2>
30 |       <form>
31 |          <fieldset id="addroptions">
32 |             <legend><span>Choose an address</span></legend>
33 |             <label for="homeoption" id="homeaddr">
34 |                <span>Home</span><br/>
35 |                1 Main St.<br />
36 |                Sicilia, MA 02103
37 |                <input type="radio" id="homeoption" name="shippingaddr" onclick="document.getElementById('streetinput').value='1 Main St.' ; document.getElementById('cityinput').value='Sicilia' ; document.getElementById('stateinput').value='MA'; document.getElementById('zipinput').value='02103'"  />
38 |             </label>
39 |             <label for="workoption" id="workaddr">
40 |                <span>Work</span><br/>
41 |                15 Columbine Ln.<br />
42 |                Crab City, MA 02104
43 |                <input type="radio" id="workoption" name="shippingaddr" onclick="document.getElementById('streetinput').value='15 Columbine Ln.' ; document.getElementById('cityinput').value='Crab City' ; document.getElementById('stateinput').value='MA' ; document.getElementById('zipinput').value='02104'" />
44 |             </label>
45 |          </fieldset>
46 |           <fieldset id="contactinfo">
47 |             <label for="streetinput">
48 |               Street Address
49 |               <input type="text" id="streetinput" />
50 |             </label>
51 |             <label for="cityinput">
52 |               City
53 |               <input type="text" id="cityinput" />
54 |             </label>
55 |             <label for="stateinput">
56 |               State
57 |               <input type="text" id="stateinput" />
58 |             </label>
59 |             <label for="zipinput">
60 |               Zip
61 |               <input type="text" id="zipinput" />
62 |             </label>
63 |           </fieldset>
64 |      </form>
65 |    </article>
66 |   </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/Hands-on Project 6-1/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 6
 7 |       Hands-on Project 6-1
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 19, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 |    <title>Hands-on Project 6-1</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 6-1
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Personal Information</h2>
30 |       <form action="results.htm">
31 |         <div id="errorText"></div> 
32 |         <div id="numErrorText"></div>
33 |         <fieldset id="contactinfo">
34 |           <label for="addrinput">
35 |             Street Address
36 |           </label>
37 |           <input type="text" id="addrinput" name="Address" required="required" placeholder="number and street name" />
38 |           <label for="cityinput">
39 |             City
40 |           </label>
41 |           <input type="text" id="cityinput" name="City" required="required" />
42 |           <label for="stateinput">
43 |             State/Province
44 |           </label>
45 |           <input type="text" id="stateinput" name="State" maxlength="2" required="required" />
46 |           <label for="zipinput">
47 |             Zip/Postal Code
48 |           </label>
49 |           <input type="number" id="zipinput" name="Zip" maxlength="5" required="required" />
50 |           <label for="ssn1">
51 |             Social Security Number
52 |           </label>
53 |           <input type="number" id="ssn1" name="SSN1" class="ssn" maxlength="3" required="required" />
54 |           <label for="ssn2" id="ssn2label">
55 |             Social Security Number (continued)
56 |           </label>
57 |           <input type="number" id="ssn2" name="SSN2" class="ssn" maxlength="2" required="required" />
58 |           <label for="ssn3" id="ssn3label">
59 |             Social Security Number (end)
60 |           </label>
61 |           <input type="number" id="ssn3" name="SSN3" class="ssn" maxlength="4" required="required" />
62 |         </fieldset>
63 |         <fieldset id="submitsection">
64 |           <input type="submit" id="submitBtn" value="Submit" />
65 |         </fieldset>
66 |      </form>
67 | 
68 |    </article>
69 |    <script>
70 |     <script src="script.js">
71 |     <form action="results.htm" novalidate="novalidate">
72 |    </script>
73 | </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/Hands-on Project 6-2/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 6
 7 |       Hands-on Project 6-2
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 19, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 |    <title>Hands-on Project 6-2</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.65897.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 6-2
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Personal Information</h2>
30 |       <form action="results.htm">
31 |         <div id="errorText"></div> 
32 |         <div id="numErrorText"></div>
33 |         <fieldset id="contactinfo">
34 |           <label for="addrinput">
35 |             Street Address
36 |           </label>
37 |           <input type="text" id="addrinput" name="Address" required="required" placeholder="number and street name" />
38 |           <label for="cityinput">
39 |             City
40 |           </label>
41 |           <input type="text" id="cityinput" name="City" required="required" />
42 |           <label for="stateinput">
43 |             State/Province
44 |           </label>
45 |           <input type="text" id="stateinput" name="State" maxlength="2" required="required" />
46 |           <label for="zipinput">
47 |             Zip/Postal Code
48 |           </label>
49 |           <input type="number" id="zipinput" name="Zip" maxlength="5" required="required" />
50 |           <label for="ssn1">
51 |             Social Security Number
52 |           </label>
53 |           <input type="number" id="ssn1" name="SSN1" class="ssn" maxlength="3" required="required" />
54 |           <label for="ssn2" id="ssn2label">
55 |             Social Security Number (continued)
56 |           </label>
57 |           <input type="number" id="ssn2" name="SSN2" class="ssn" maxlength="2" required="required" />
58 |           <label for="ssn3" id="ssn3label">
59 |             Social Security Number (end)
60 |           </label>
61 |           <input type="number" id="ssn3" name="SSN3" class="ssn" maxlength="4" required="required" />
62 |         </fieldset>
63 |         <fieldset id="submitsection">
64 |           <input type="submit" id="submitBtn" value="Submit" />
65 |         </fieldset>
66 |      </form>
67 | 
68 |    </article>
69 |    <script>
70 |     <script src="script.js">
71 |     <form action="results.htm" novalidate="novalidate">
72 |    </script>
73 | </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/Hands-on Project 5-5/styles.css:
--------------------------------------------------------------------------------
 1 | /*  JavaScript 6th Edition
 2 |     Chapter 5
 3 |     Hands-on Project 5-5
 4 | 
 5 |     Filename: styles.css
 6 | */
 7 | 
 8 | /* apply a natural box layout model to all elements */
 9 | * {
10 |    -moz-box-sizing: border-box;
11 |    -webkit-box-sizing: border-box;
12 |    box-sizing: border-box;
13 | }
14 | 
15 | /* reset rules */
16 | html, body, div, span, applet, object, iframe,
17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
18 | a, abbr, acronym, address, big, cite, code,
19 | del, dfn, em, img, ins, kbd, q, s, samp,
20 | small, strike, strong, sub, sup, tt, var,
21 | b, u, i, center,
22 | dl, dt, dd, ol, ul, li,
23 | fieldset, form, label, legend,
24 | table, caption, tbody, tfoot, thead, tr, th, td,
25 | article, aside, canvas, details, embed, 
26 | figure, figcaption, footer, header, hgroup, 
27 | menu, nav, output, ruby, section, summary,
28 | time, mark, audio, video {
29 |    margin: 0;
30 |    padding: 0;
31 |    border: 0;
32 |    font-size: 100%;
33 |    font: inherit;
34 |    vertical-align: baseline;
35 | }
36 | 
37 | /* HTML5 display-role reset for older browsers */
38 | article, aside, details, figcaption, figure, 
39 | footer, header, hgroup, menu, nav, section {
40 |    display: block;
41 | }
42 | 
43 | body {
44 |    line-height: 1;
45 |    max-width: 960px;
46 |    background: white;
47 |    margin: 0 auto;
48 |    font-family: Arial, Helvetica, sans-serif; 
49 |    -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
50 |                        0px 10px 10px rgba(50, 50, 50, 1),
51 |                        -10px 0px 10px rgba(50, 50, 50, 1);
52 |    -moz-box-shadow:    10px 0px 10px rgba(50, 50, 50, 1),
53 |                        0px 10px 10px rgba(50, 50, 50, 1),
54 |                        -10px 0px 10px rgba(50, 50, 50, 1);
55 |    box-shadow:         10px 0px 10px rgba(50, 50, 50, 1),
56 |                        0px 10px 10px rgba(50, 50, 50, 1),
57 |                        -10px 0px 10px rgba(50, 50, 50, 1);
58 | }
59 | 
60 | ol, ul {
61 |    list-style: none;
62 | }
63 | 
64 | /* page header */
65 | header {
66 |    background: #04819E;
67 |    width: 100%;
68 |    color: #FFFFFF;
69 |    font-size: 48px;
70 |    text-align: center;
71 |    line-height: 1.5em;
72 |    border-bottom: 1px solid black;
73 | }
74 | 
75 | /* main content */
76 | article {
77 |    width: 960px;
78 |    text-align: left;
79 |    background: ivory;
80 |    padding: 20px;
81 | }
82 | 
83 | h2 {
84 |    font-weight: bold;
85 |    font-size: 24px;
86 | }
87 | 
88 | h3 {
89 |    font-weight: bold;
90 |    font-size: 18px;
91 |    margin: 20px 0 10px 0;
92 | }
93 | 
94 | li {
95 |    margin-left: 30px;
96 | }
97 | 


--------------------------------------------------------------------------------
/Hands-on Project 7-3/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 7
  3 |     Hands-on Project 7-3
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    width: 640px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Verdana, Geneva, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #5472B2;
 58 |    width: 100%;
 59 |    color: #FFFFFF;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 | }
 64 | 
 65 | /* main content */
 66 | article {
 67 |    width: 640px;
 68 |    text-align: left;
 69 |    background: #FFDB70;
 70 |    overflow: auto;
 71 | }
 72 | 
 73 | article h2 {
 74 |    font-weight: bold;
 75 |    font-size: 24px;
 76 |    padding: 10px;
 77 | }
 78 | 
 79 | /* form */
 80 | form {
 81 |    float: left;
 82 | }
 83 | 
 84 | input {
 85 |    float: left;
 86 |    clear: left;
 87 |    margin: 10px;
 88 | }
 89 | 
 90 | label, #sButton {
 91 |    float: left;
 92 |    font-size: 1.4em;
 93 | }
 94 | 
 95 | /* total div */
 96 | table {
 97 |    float: right;
 98 |    font-size: 18px;
 99 |    text-align: right;
100 |    margin-right: 25px;
101 | }
102 | 
103 | table td {
104 |    padding: 5px 0;
105 | }
106 | 
107 | col.label {
108 |    width: 175px;
109 | }
110 | 
111 | col.amount {
112 |    width: 100px;
113 | }
114 | 
115 | table tr:last-of-type {
116 |    font-weight: bold;
117 | }
118 | 


--------------------------------------------------------------------------------
/Hands-on Project 5-2/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 5
 7 |       Hands-on Project 5-2
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 21, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 |    <title>Hands-on Project 5-2</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 5-2
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Change of address form</h2>
30 |       <form>
31 |         <fieldset id="contactinfo">
32 |           <label for="addrinput">
33 |             Street Address
34 |           </label>
35 |           <input type="text" id="addrinput" name="Address" />
36 |           <label for="cityinput">
37 |             City
38 |           </label>
39 |           <input type="text" id="cityinput" name="City" />
40 |           <label for="stateinput">
41 |             State/Province
42 |           </label>
43 |           <input type="text" id="stateinput" name="State" />
44 |           <label for="zipinput">
45 |             Zip/Postal Code
46 |           </label>
47 |           <input type="number" id="zipinput" name="Zip" />
48 |         </fieldset>
49 |         <fieldset id="submitsection">
50 |           <input type="button" id="submit" value="Submit" />
51 |         </fieldset>
52 |      </form>
53 | 
54 |    </article>
55 |    <script>
56 |      function processInput() {
57 |       var propertyWidth = 300;
58 |       var propertyHeight = 100;
59 |       var winLeft = ((screen.width - propertyWidth) / 2);
60 |       var winTop = ((screen.height - propertyHeight) / 2);
61 |       var winOptions = "width=300,height=100";
62 |       winOptions += ",left=" + winLeft;
63 |       winOptions += ",top=" + winTop;
64 |       window.open("confirm.htm", "confirm", winOptions);
65 |      }
66 | 
67 |      function createEventListener() {
68 |       var submitButton = document.getElementById("submit");
69 |         if (submitButton.addEventListener) {
70 |           submitButton.addEventListener("click", processInput, false);
71 |         }
72 |         else if (submitButton.attachEvent) {
73 |           submitButton.attachEvent("onclick", processInput);
74 |         }
75 |      }
76 | 
77 |      if (window.addEventListener) {
78 |         window.addEventListener("load", createEventListener, false);
79 |       }
80 |       else if (window.attachEvent) {
81 |         window.attachEvent("onload", createEventListener);
82 |       }
83 |    </script>
84 | </body>
85 | </html>
86 | 
87 | 
88 | 
89 | 
90 | 
91 | 
92 | 


--------------------------------------------------------------------------------
/Hands-on Project 7-1/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 7
  3 |     Hands-on Project 7-1
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 600px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #FFC340;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 | }
 64 | 
 65 | /* main content */
 66 | article {
 67 |    text-align: center;
 68 |    background: white;
 69 | }
 70 | 
 71 | article h2 {
 72 |    font-weight: bold;
 73 |    font-size: 24px;
 74 |    padding: 10px;
 75 | }
 76 | 
 77 | /* form */
 78 | fieldset {
 79 |    padding: 1em;
 80 |    background: #FFAE00;
 81 |    border: none;
 82 |    float: left;
 83 |    width: 33.3334%;
 84 |    height: 100px;
 85 | }
 86 | input {
 87 |    font-size: 1.1em;
 88 |    width: 4em;
 89 |    clear: left;
 90 |    font-family: Arial, Helvetica, sans-serif; 
 91 |    text-align: center;
 92 | }
 93 | input:focus {
 94 |    background: #e3d5ba;
 95 | }
 96 | label {
 97 |    display: block;
 98 | }
 99 | input, label, button, form p {
100 |    margin: 5px 10px;
101 | }
102 | p {
103 |    clear: left;
104 | }
105 | #sqRoot {
106 |    width: 4em;
107 |    font-size: 1.1em;
108 |    height: 1.6em;
109 |    background: white;
110 |    padding: 0.2em;
111 |    margin: 10px auto;
112 |    border: 1px solid rgb(164,164,164);
113 | }
114 | 


--------------------------------------------------------------------------------
/Hands-on Project 12-1/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 12
  3 |     Hands-on Project 12-1
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 640px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 |    -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
 50 |                        0px 10px 10px rgba(50, 50, 50, 1),
 51 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 52 |    -moz-box-shadow:    10px 0px 10px rgba(50, 50, 50, 1),
 53 |                        0px 10px 10px rgba(50, 50, 50, 1),
 54 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 55 |    box-shadow:         10px 0px 10px rgba(50, 50, 50, 1),
 56 |                        0px 10px 10px rgba(50, 50, 50, 1),
 57 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 58 | }
 59 | 
 60 | ol, ul {
 61 |    list-style: none;
 62 | }
 63 | 
 64 | /* page header */
 65 | header {
 66 |    background: #04819E;
 67 |    width: 100%;
 68 |    color: #FFFFFF;
 69 |    font-size: 48px;
 70 |    text-align: center;
 71 |    line-height: 1.5em;
 72 |    border-bottom: 1px solid black;
 73 | }
 74 | 
 75 | /* main content */
 76 | article {
 77 |    width: 640px;
 78 |    text-align: left;
 79 |    background: ivory;
 80 |    padding: 20px;
 81 | }
 82 | 
 83 | h2 {
 84 |    font-weight: bold;
 85 |    font-size: 24px;
 86 | }
 87 | 
 88 | h3 {
 89 |    font-weight: bold;
 90 |    font-size: 18px;
 91 |    margin: 20px 0 10px 0;
 92 |    font-family: "times new roman", times, serif;
 93 | }
 94 | 
 95 | li, p {
 96 |    margin-bottom: 0.5em;
 97 | }
 98 | 
 99 | .ingr, .instr {
100 |    display: none;
101 | }
102 | 


--------------------------------------------------------------------------------
/Hands-on Project 12-2/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 12
  3 |     Hands-on Project 12-2
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 600px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #FFC340;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 |    border-bottom: 1px solid black;
 64 |    border-left: 1px solid black;
 65 |    border-right: 1px solid black;
 66 | }
 67 | 
 68 | /* main content */
 69 | article {
 70 |    text-align: center;
 71 |    background: white;
 72 |    border-bottom: 1px solid black;
 73 |    border-left: 1px solid black;
 74 |    border-right: 1px solid black;
 75 | }
 76 | 
 77 | article h2 {
 78 |    font-weight: bold;
 79 |    font-size: 24px;
 80 |    padding: 10px;
 81 | }
 82 | 
 83 | /* form */
 84 | form {
 85 |    background: #A67100;
 86 |    padding: 5px;
 87 |    height: 110px;
 88 | }
 89 | fieldset {
 90 |    padding: 1em 0.5em;
 91 |    background: #FFAE00;
 92 |    border: none;
 93 |    float: left;
 94 |    width: 33.3334%;
 95 |    height: 100px;
 96 | }
 97 | input {
 98 |    font-size: 1em;
 99 |    width: 4em;
100 |    clear: left;
101 | }
102 | input:focus {
103 |    background: #e3d5ba;
104 | }
105 | label {
106 |    display: block;
107 | }
108 | input, label, button, form p {
109 |    margin: 5px;
110 | }
111 | p {
112 |    clear: left;
113 | }
114 | p#kValue {
115 |    width: 4em;
116 |    font-size: 1.1em;
117 |    height: 1.4em;
118 |    background: white;
119 |    padding: 0.2em;
120 |    margin: 0 auto;
121 | }
122 | 


--------------------------------------------------------------------------------
/Hands-on Project 5-2/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 5
  3 |     Hands-on Project 5-2
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 960px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #FFE373;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 |    border-bottom: 1px solid black;
 64 |    border-left: 1px solid black;
 65 |    border-right: 1px solid black;
 66 | }
 67 | 
 68 | /* main content */
 69 | article {
 70 |    width: 960px;
 71 |    text-align: center;
 72 |    background: #BFA230;
 73 |    padding-bottom: 20px;
 74 |    border-bottom: 1px solid black;
 75 |    border-left: 1px solid black;
 76 |    border-right: 1px solid black;
 77 | }
 78 | 
 79 | article h2 {
 80 |    font-weight: bold;
 81 |    font-size: 24px;
 82 |    padding: 10px;
 83 | }
 84 | 
 85 | /* form */
 86 | 
 87 | fieldset {
 88 |   padding: 1em;
 89 |   background: white;
 90 |   text-align: right;
 91 | }
 92 | 
 93 | form {
 94 |   background: white;
 95 |   padding: 10px 5px 7px 5px;
 96 |   margin: 0 auto;
 97 |   width: 30em;
 98 |   border: 2px solid black;
 99 | }
100 | 
101 | input {
102 |   font-size: 1em;
103 |   float: left;
104 | }
105 | 
106 | input:focus {
107 |   background: #e3d5ba;
108 | }
109 | 
110 | label {
111 |   display: block;
112 |   margin: 0.5em 1em 0 0;
113 |   float: left;
114 |   clear: left;
115 |   width: 10em;
116 | }
117 | 
118 | #submitsection {
119 |   padding: 0.5em 0;
120 |   text-align: center;
121 | }
122 | 
123 | #submit {
124 |    float: none;
125 | }


--------------------------------------------------------------------------------
/Hands-on Project 2-1/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 2
  3 |     Hands-on Project 2-1
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 600px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #FFC340;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 |    border-bottom: 1px solid black;
 64 |    border-left: 1px solid black;
 65 |    border-right: 1px solid black;
 66 | }
 67 | 
 68 | /* main content */
 69 | article {
 70 |    text-align: center;
 71 |    background: white;
 72 |    border-bottom: 1px solid black;
 73 |    border-left: 1px solid black;
 74 |    border-right: 1px solid black;
 75 | }
 76 | 
 77 | article h2 {
 78 |    font-weight: bold;
 79 |    font-size: 24px;
 80 |    padding: 10px;
 81 | }
 82 | 
 83 | /* form */
 84 | form {
 85 |    background: #A67100;
 86 |    padding: 5px;
 87 |    height: 110px;
 88 |   }
 89 | fieldset {
 90 |    padding: 1em;
 91 |    background: #FFAE00;
 92 |    border: none;
 93 |    float: left;
 94 |    width: 33.3334%;
 95 |    height: 100px;
 96 |   }
 97 | input {
 98 |    font-size: 1em;
 99 |    width: 4em;
100 |    clear: left;
101 |   }
102 | input:focus {
103 |    background: #e3d5ba;
104 |   }
105 | label {
106 |    display: block;
107 |   }
108 | input, label, button, form p {
109 |    float: left;
110 |    margin: 5px 10px;
111 |   }
112 | p {
113 |    clear: left;
114 | }
115 | p#cValue {
116 |    width: 4em;
117 |    font-size: 1.1em;
118 |    height: 1.4em;
119 |    background: white;
120 |    padding: 0.2em;
121 |    overflow: hidden;
122 |   text-overflow: ellipsis;
123 | }
124 | 


--------------------------------------------------------------------------------
/Hands-on Project 10-1/script.js:
--------------------------------------------------------------------------------
 1 | /*  JavaScript 6th Edition
 2 |     Chapter 10
 3 |     Hands-on Project 10-1
 4 | 
 5 |     Author: Lisa Kilker
 6 |     Date:   May 2, 2018
 7 | 
 8 |     Filename: script.js
 9 | */
10 | 
11 | "use strict";
12 | 
13 | // global variables
14 | var loc = [];
15 | var origin;
16 | var onTop;
17 | 
18 | // perform setup tasks when page first loads
19 | function setUpPage() {
20 |    var puzzlePieces = document.querySelectorAll("#pieces div");
21 |    onTop = puzzlePieces.length + 1;
22 |    for (var i = 0; i < puzzlePieces.length; i++) {
23 |       if (puzzlePieces[i].addEventListener) {
24 |          puzzlePieces[i].addEventListener("mousedown", startDrag, false);
25 |          puzzlePieces[i].addEventListener("touchstart", startDrag, false);
26 |       } else if (puzzlePieces[i].attachEvent) {
27 |          puzzlePieces[i].attachEvent("onmousedown", startDrag);
28 |       }
29 |    }
30 | }
31 | 
32 | // add event listeners and move object when user starts dragging
33 | function startDrag(event) {
34 |       this.style.zIndex = onTop; // set z-index to move selected element on top of other elements
35 |       onTop++; // increment z-index counter so next selected element is on top of other elements
36 |       event.preventDefault();
37 | 
38 |    if (event.type !== "mousedown") {
39 |       this.addEventListener("touchmove", moveDrag, false);
40 |       this.addEventListener("touchend", removeTouchListener, false);
41 |    
42 |   } else {
43 |       this.addEventListener("mousemove", moveDrag, false);
44 |       this.addEventListener("mouseup", removeDragListener, false);
45 |   }
46 |       loc = [this.offsetLeft,this.offsetTop];
47 |       origin = getCoords(event);
48 | }
49 | 
50 | // calculate new location of dragged object
51 | function moveDrag(event) {
52 |    var currentPos = getCoords(event);
53 |    var deltaX = currentPos[0] - origin[0];
54 |    var deltaY = currentPos[1] - origin[1];
55 |     this.style.left = (loc[0] + deltaX) + "px";
56 |     this.style.top  = (loc[1] + deltaY) + "px";
57 | }
58 | 
59 | // identify location of event
60 | function getCoords(event) {
61 |    var coords = [];
62 | 
63 |    if (event.targetTouches && event.targetTouches.length) {
64 |       var thisTouch = event.targetTouches[0];
65 |           coords[0] = thisTouch.clientX;
66 |           coords[1] = thisTouch.clientY;
67 | 
68 |     } else {      
69 |           coords[0] = event.clientX;
70 |           coords[1] = event.clientY;
71 |     }
72 |           return coords;
73 | }
74 | 
75 | // remove mouse event listeners when dragging ends
76 | function removeDragListener() {
77 |     this.removeEventListener("mousemove", moveDrag, false);
78 |     this.removeEventListener("mouseup", removeDragListener, false);
79 | }
80 | 
81 | function removeTouchListener() {
82 |     this.removeEventListener("touchmove", moveDrag, false);
83 |     this.removeEventListener("touchend", removeTouchListener, false);
84 | }
85 | 
86 | // run setUpPage() function when page finishes loading
87 | if (window.addEventListener) {
88 |     window.addEventListener("load", setUpPage, false);
89 | }


--------------------------------------------------------------------------------
/Hands-on Project 11-1/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 6
  3 |     Hands-on Project 6-4
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 640px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 |    -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
 50 |                        0px 10px 10px rgba(50, 50, 50, 1),
 51 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 52 |    -moz-box-shadow:    10px 0px 10px rgba(50, 50, 50, 1),
 53 |                        0px 10px 10px rgba(50, 50, 50, 1),
 54 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 55 |    box-shadow:         10px 0px 10px rgba(50, 50, 50, 1),
 56 |                        0px 10px 10px rgba(50, 50, 50, 1),
 57 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 58 | }
 59 | 
 60 | ol, ul {
 61 |    list-style: none;
 62 | }
 63 | 
 64 | /* page header */
 65 | header {
 66 |    background: #04819E;
 67 |    width: 100%;
 68 |    color: #FFFFFF;
 69 |    font-size: 48px;
 70 |    text-align: center;
 71 |    line-height: 1.5em;
 72 |    border-bottom: 1px solid black;
 73 | }
 74 | 
 75 | /* main content */
 76 | article {
 77 |    text-align: left;
 78 |    background: white;
 79 |    padding: 20px;
 80 | }
 81 | 
 82 | 
 83 | article div {
 84 |    margin: 0.8em 0;
 85 | }
 86 | 
 87 | article div p.head {
 88 |    font-weight: bold;
 89 |    font-size: 1.2em;
 90 | }
 91 | 
 92 | article div p.url {
 93 |    font-size: 0.8em;
 94 |    margin: 0.4em;
 95 |    color: #009030;
 96 | }
 97 | 
 98 | /* form */
 99 | form {
100 |    text-align: center;
101 |    padding: 2em;
102 |    background: ivory;
103 |    border: 1px solid black;
104 |    position: relative;
105 | }
106 | 
107 | input {
108 |    font-size: 1em;
109 | }
110 | 
111 | form p.credit {
112 |    position: absolute;
113 |    bottom: 5px;
114 |    right: 5px;
115 |    font-size: 0.8em;
116 | }
117 | 
118 | /* list */
119 | 


--------------------------------------------------------------------------------
/Hands-on Project 4-3/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 3
  3 |     Hands-on Project 3-4
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    width: 600px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #FFC340;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 |    border-bottom: 1px solid black;
 64 |    border-left: 1px solid black;
 65 |    border-right: 1px solid black;
 66 | }
 67 | 
 68 | /* main content */
 69 | article {
 70 |    text-align: center;
 71 |    background: white;
 72 |    border-bottom: 1px solid black;
 73 |    border-left: 1px solid black;
 74 |    border-right: 1px solid black;
 75 | }
 76 | 
 77 | article h2 {
 78 |    font-weight: bold;
 79 |    font-size: 24px;
 80 |    padding: 10px;
 81 | }
 82 | 
 83 | div {
 84 |    padding: 1em;
 85 |    border: none;
 86 |    height: 150px;
 87 |    float: right;
 88 |    width: 180px;
 89 |    text-align: left;
 90 | }
 91 | 
 92 | div p {
 93 |    font-weight: bold;
 94 |    margin-bottom: 0.4em;
 95 | }
 96 | 
 97 | li {
 98 |    margin-left: 1em;
 99 | }
100 | 
101 | /* form */
102 | form {
103 |    background: white;
104 |    padding: 5px;
105 |    height: 150px;
106 |    width: 400px;
107 | 
108 |   }
109 | fieldset {
110 |    padding: 1em;
111 |    border: none;
112 |    float: left;
113 |    width: 190px;
114 |    height: 150px;
115 |   }
116 | 
117 | input {
118 |    font-size: 1em;
119 |    width: 9em;
120 |    clear: left;
121 |    margin: 0 auto;
122 | }
123 | 
124 | input:focus {
125 |    background: #e3d5ba;
126 | }
127 | 
128 | label {
129 |    display: block;
130 |    font-weight: bold;
131 |    text-align: left;
132 | }
133 | 
134 | input, label, button {
135 |    margin: 5px 10px;
136 | }
137 | 


--------------------------------------------------------------------------------
/Hands-on Project 7-2/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 7
 7 |       Hands-on Project 7-2
 8 | 
 9 |       Author: Lisa Kilker
10 |       Date:   April 25, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
16 |    <title>Hands-on Project 7-2</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 7-2
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Day of the Week Lookup</h2>
30 |       <form>
31 |           <fieldset>
32 |             <label for="dateSelected">
33 |               Select a date
34 |             </label>
35 |             <input type="date" id="dateSelected" />
36 |           </fieldset>
37 |           <fieldset class="button">
38 |             <button type="button" id="determineDay">Find day</button>
39 |           </fieldset>
40 |           <fieldset>
41 |              <p>Day of the Week</p>
42 |             <p id="day"></p>
43 |           </fieldset>
44 |      </form>
45 |    </article>
46 |     <script>
47 |          var selection = document.getElementById("dateSelected");
48 |          var result = document.getElementById("day");
49 |          var allDaysOfWeek = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
50 |          var selectedDate;
51 |          var dayOfWeekNumber;
52 |          var dayOfWeekName;
53 | 
54 |        function lookUpDay() {
55 |           selectedDate = new Date(selection.value); //creates a variable whose values is a Date object based on the user's input
56 |           selectedDate.setUTCHours(12); //looks up the day of the week value (0-6) for the new Date object assuming universal time (UTC)
57 |           dayOfWeekNumber = selectedDate.getUTCDay(); //uses the day value from the previous statement to look up the corresponding day name from the allDaysOfWeek array
58 |           dayOfWeekName = allDaysOfWeek [dayOfWeekNumber]; 
59 |           result.innerHTML = dayOfWeekName; //displays the resulting day name in the day of the weeb box on the webpage
60 |        }
61 | 
62 |       function createEventListener() {
63 |         var submitButton = document.getElementById("determineDay");
64 | 
65 |           if (submitButton.addEventListener) {
66 |               submitButton.addEventListener("click", lookUpDay, false);
67 | 
68 |           } else if (submitButton.attachEvent) {
69 |               submitButton.attachEvent("onclick", lookUpDay);
70 |           }
71 | 
72 |               document.getElementById("dateSelected").value = ""; //clears last starting value on reload
73 |               document.getElementById("day").value = "";
74 |               //clears last starting value on reload
75 |           }
76 | 
77 |           if(window.addEventListener) {
78 |               window.addEventListener("load", createEventListener, false);
79 | 
80 |           } else if (window.attachEvent) {
81 |             window.attachEVent("onload", createEventListener);
82 |        }
83 |     </script>
84 |   </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/Hands-on Project 3-4/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 3
  3 |     Hands-on Project 3-4
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    width: 600px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #FFC340;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 |    border-bottom: 1px solid black;
 64 |    border-left: 1px solid black;
 65 |    border-right: 1px solid black;
 66 | }
 67 | 
 68 | /* main content */
 69 | article {
 70 |    text-align: center;
 71 |    background: white;
 72 |    border-bottom: 1px solid black;
 73 |    border-left: 1px solid black;
 74 |    border-right: 1px solid black;
 75 | }
 76 | 
 77 | article h2 {
 78 |    font-weight: bold;
 79 |    font-size: 24px;
 80 |    padding: 10px;
 81 | }
 82 | 
 83 | div {
 84 |    padding: 1em;
 85 |    border: none;
 86 |    height: 150px;
 87 |    float: right;
 88 |    width: 180px;
 89 |    text-align: left;
 90 | }
 91 | 
 92 | div p {
 93 |    font-weight: bold;
 94 |    margin-top: 0.4em;
 95 | }
 96 | 
 97 | li {
 98 |    margin-left: 1em;
 99 |    list-style-type: disc;
100 | }
101 | 
102 | /* form */
103 | form {
104 |    background: white;
105 |    padding: 5px;
106 |    height: 150px;
107 |    width: 400px;
108 | 
109 |   }
110 | fieldset {
111 |    padding: 1em;
112 |    border: none;
113 |    float: left;
114 |    width: 190px;
115 |    height: 150px;
116 |   }
117 | 
118 | input {
119 |    font-size: 1em;
120 |    width: 9em;
121 |    clear: left;
122 |    margin: 0 auto;
123 | }
124 | 
125 | input:focus {
126 |    background: #e3d5ba;
127 | }
128 | 
129 | label {
130 |    display: block;
131 |    font-weight: bold;
132 |    text-align: left;
133 | }
134 | 
135 | input, label, button {
136 |    margin: 5px 10px;
137 | }
138 | 


--------------------------------------------------------------------------------
/Hands-on Project 7-3/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 7
 7 |       Hands-on Project 7-3
 8 | 
 9 |      Author: Lisa Kilker
10 |       Date:   April 25, 2018 
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
16 |    <title>Hands-on Project 7-3</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 7-3
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>Lunch selections</h2>
30 |       <form>
31 |          <input type="checkbox" id="item1" value="799" />
32 |          <label for="item1">Fried chicken ($7.99)</label>
33 |          <input type="checkbox" id="item2" value="999" />
34 |          <label for="item2">Fried halibut ($9.99)</label>
35 |          <input type="checkbox" id="item3" value="799" />
36 |          <label for="item3">Hamburger ($7.99)</label>
37 |          <input type="checkbox" id="item4" value="1299" />
38 |          <label for="item4">Grilled salmon ($12.99)</label>
39 |          <input type="checkbox" id="item5" value="599" />
40 |          <label for="item5">Side salad ($5.99)</label>
41 |          <input type="button" value="Calculate" id="sButton" />
42 |       </form>
43 |       <table>
44 |          <colgroup>
45 |             <col class="label" />
46 |             <col class="amount" />
47 |          </colgroup>
48 |          <tbody>
49 |             <tr>
50 |                <td>Item total</td>
51 |                <td>0.00</td>
52 |             </tr>
53 |             <tr>
54 |                <td>Tax</td>
55 |                <td>0.00</td>
56 |             </tr>
57 |             <tr>
58 |                <td>Total with tax</td>
59 |                <td>$0.00</td>
60 |             </tr>
61 |          </tbody>
62 |       </table>
63 |       </article>
64 |       <script>
65 |       function calcTotal() {
66 |             var itemTotal = 0;
67 |             var tax = 0;
68 |             var totalWithTax = 0;
69 |             var items = document.getElementsByTagName("input");
70 |             var cells = document.getElementsByTagName("td");
71 | 
72 |                for(var i = 0; i < 5; i++) {
73 |                   if (items[i].checked) {
74 |                      itemTotal += (items[i].value * 1); //loops through all the check boxes in the form.  For each box that is checked, the loops adds its value to the itemTotal variable.
75 |                   }
76 |                }
77 |                      tax = itemTotal * 0.05;
78 |                      totalWithTax = itemTotal + tax;
79 |                      cells[1].innerHTML = (itemTotal/100).toFixed(2);
80 |                      cells[3].innerHTML = (tax/100).toFixed(2);
81 |                      cells[5].innerHTML = "$" + (totalWithTax/100).toFixed(2);
82 |       }
83 | 
84 |             var submitButton = document.getElementById("sButton");
85 |                
86 |                if(submitButton.addEventListener) {
87 |                   submitButton.addEventListener("click", calcTotal, false);
88 | 
89 |                } else if (submitButton.attachEvent) {
90 |                   submitButton.attachEvent("onclick", calcTotal);
91 |                }
92 | 
93 | 
94 |       </script>
95 |    </body>
96 | </html>
97 | 


--------------------------------------------------------------------------------
/Hands-on Project 11-4/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 11
  3 |     Hands-on Project 11-4
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 640px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 |    -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
 50 |                        0px 10px 10px rgba(50, 50, 50, 1),
 51 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 52 |    -moz-box-shadow:    10px 0px 10px rgba(50, 50, 50, 1),
 53 |                        0px 10px 10px rgba(50, 50, 50, 1),
 54 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 55 |    box-shadow:         10px 0px 10px rgba(50, 50, 50, 1),
 56 |                        0px 10px 10px rgba(50, 50, 50, 1),
 57 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 58 | }
 59 | 
 60 | ol, ul {
 61 |    list-style: none;
 62 | }
 63 | 
 64 | /* page header */
 65 | header {
 66 |    background: #FFCF40;
 67 |    width: 100%;
 68 |    color: black;
 69 |    font-size: 48px;
 70 |    text-align: center;
 71 |    line-height: 1.5em;
 72 |    border-bottom: 1px solid black;
 73 | }
 74 | 
 75 | /* main content */
 76 | article {
 77 |    width: 640px;
 78 |    text-align: left;
 79 |    background: white;
 80 |    padding: 20px;
 81 |    overflow: auto;
 82 | }
 83 | 
 84 | h2 {
 85 |    font-weight: bold;
 86 |    font-size: 30px;
 87 |    text-align: center;
 88 | }
 89 | 
 90 | /* form */
 91 | form {
 92 |    text-align: left;
 93 |    padding: 2em;
 94 |    background: ivory;
 95 |    border: 1px solid black;
 96 |    position: relative;
 97 |    margin: 1em auto;
 98 |    font-size: 1em;
 99 | }
100 | 
101 | #csset {
102 |    visibility: hidden;
103 | }
104 | 
105 | input, label {
106 |    float: left;
107 |    margin-bottom: 0.4em;
108 | }
109 | 
110 | label {
111 |    width: 12em;
112 |    text-align: right;
113 |    margin-right: 0.4em;
114 |    line-height: 1.4em;
115 | }
116 | 
117 | #uslabel {
118 |    width: auto;
119 |    margin-left: 1.4em;
120 | }
121 | 
122 | #zipset label, #csset label {
123 |    clear: left;
124 | }
125 | 
126 | #city {
127 |    width: 12em;
128 | }
129 | 
130 | #state {
131 |    width: 3em;
132 | }
133 | 
134 | #zip {
135 |    width: 6em;
136 | }
137 | 
138 | 


--------------------------------------------------------------------------------
/Hands-on Project 6-1/script.js:
--------------------------------------------------------------------------------
  1 | //Author:  Lisa Kilker
  2 | //Date:  April 19, 2018
  3 | //Hands-on Project 6-1
  4 | 
  5 | "use strict";
  6 | var formValidity = true;
  7 | 
  8 | /* validate required fields */
  9 | function validateRequired() {
 10 | 	var inputElements = document.querySelectorAll("#contactinfo input");
 11 | 	var errorDiv = document.getElementById("errorText");
 12 | 	var elementCount = inputElements.length;
 13 | 	var requiredValidity = true;
 14 | 	var currentElement;
 15 | 
 16 | 	try {
 17 | 		for (var i = 0; i < elementCount; i++) {
 18 | 			currentElement = inputElements[i];
 19 | 
 20 | 		if (currentElement.value === "") {
 21 | 			currentElement.style.background = "rgb(255,233,233)";
 22 | 			requiredValidity = false;
 23 | 
 24 | 		} else {
 25 | 			currentElement.style.background = "white";
 26 | 		}
 27 | 	}
 28 | 		if (requiredValidity === false) {
 29 | 		throw "Please complete all fields.";
 30 | 	}
 31 | 			errorDiv.style.display = "none";
 32 | 			errorDiv.innerHTML = "";
 33 | 	}
 34 | 		catch(msg) {
 35 | 			errorDiv.style.display = "block";
 36 | 			errorDiv.innerHTML = msg;
 37 | 			formValidity = false;
 38 | 		}
 39 | 	}
 40 |  
 41 | /* create event listeners */
 42 | function createEventListeners() { 
 43 | 	var form = document.getElementsByTagName("form")[0]; 
 44 | 	
 45 | 		if (form.addEventListener) {
 46 | 			form.addEventListener("submit", validateForm, false); 
 47 | 		} 
 48 | 
 49 | 		else if (form.attachEvent) {
 50 | 			form.attachEvent("onsubmit", validateForm);
 51 | 		}
 52 | 	}
 53 | 
 54 | function validateForm(evt) {
 55 | 
 56 | 		if (evt.preventDefault) {
 57 | 			evt.preventDefault();
 58 | 
 59 | 		} else {
 60 | 			evt.returnValue = false;
 61 | 		}
 62 | 			formValidity = true;
 63 | 			validateRequired();
 64 | 
 65 | 		if (formValidity === true) {
 66 | 			document.getElementsByTagName("form")[0].submit();
 67 | 		}
 68 | 	}
 69 | 
 70 | function validateNumbers() {
 71 | 	var numberInputs = document.querySelectorAll("#contactinfo input[type=number]");
 72 | 	var elementCount = numberInputs.length;
 73 | 	var numErrorDiv = document.getElementById("numErrorText");
 74 | 	var numbersValidity = true;
 75 | 	var currentElement;
 76 | 
 77 | 	try {
 78 | 
 79 | 		for (var i = 0; i < elementCount; i++) {
 80 | 			currentElement =  numberInputs[i];
 81 | 
 82 | 		if (isNan(currentElement.value) || (currentElement.valud === "")) {
 83 | 			currentElement.style.background = "rgb(255,233,233";
 84 | 			numbersValidity = false;
 85 | 
 86 | 		} else {
 87 | 			currentElement.style.background = "white";
 88 | 		}
 89 | 	}
 90 | 		if (numbersValidity === false) {
 91 | 			throw
 92 | 		}
 93 | 			numErrorDiv.Style.display = "none";
 94 | 			numErrorDiv.innerHTML = "";
 95 | 	}
 96 | 			catch(msg){
 97 | 				numErrorDiv.style.display = "block";
 98 | 				numErrorDiv.innerHTML = msg;
 99 | 				formValidity = false;
100 | 		}
101 | 	}
102 | 
103 | function validateForm(evt) { 
104 | 
105 | 		if (evt.preventDefault) {
106 | 			evt.preventDefault(); // prevent form from submitting 
107 | 
108 | 		} else {
109 | 			evt.returnValue = false; // prevent form from submitting in IE8
110 | 			formValidity = true; // reset value for revalidation 
111 | 			validateRequired(); validateNumbers(); 
112 | 
113 | 		if (formValidity === true) {
114 | 			document.getElementsByTagName("form")[0].submit();
115 | 		}
116 |  	}
117 | }
118 | 
119 | 		if (window.addEventListener) {
120 | 			window.addEventListener("load", createEventListeners, false);
121 | 
122 | 		} else if (window.attachEvent) {
123 | 			window.attachEvent("onload", createEventListeners);
124 | 		}
125 | 
126 | 


--------------------------------------------------------------------------------
/Hands-on Project 3-2/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 3
  3 |     Hands-on Project 3-2
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 960px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #FFE373;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 |    border-bottom: 1px solid black;
 64 |    border-left: 1px solid black;
 65 |    border-right: 1px solid black;
 66 | }
 67 | 
 68 | /* main content */
 69 | article {
 70 |    width: 960px;
 71 |    text-align: center;
 72 |    background: #BFA230;
 73 |    padding-bottom: 20px;
 74 |    border-bottom: 1px solid black;
 75 |    border-left: 1px solid black;
 76 |    border-right: 1px solid black;
 77 | }
 78 | 
 79 | article h2 {
 80 |    font-weight: bold;
 81 |    font-size: 24px;
 82 |    padding: 10px;
 83 | }
 84 | 
 85 | /* form */
 86 | 
 87 | #submitbutton input {
 88 |   font-family: georgia, "times new roman", times, serif;
 89 |   }
 90 | fieldset {
 91 |   position: relative;
 92 |   padding: 1em;
 93 |   background: white;
 94 |   text-align: left;
 95 |   }
 96 | form {
 97 |   background: white;
 98 |   padding: 10px 5px 7px 5px;
 99 |   margin: 0 auto;
100 |   width: 750px;
101 |   border: 2px solid black;
102 |   }
103 | input {
104 |   font-size: 1em;
105 |   }
106 | input:focus {
107 |   background: #e3d5ba;
108 |   }
109 | label {
110 |   display: block;
111 |   position: relative;
112 |   margin: 12px 0;
113 |   }
114 | #contactinfo input {
115 |   position: absolute;
116 |   left: 100px;
117 |   }
118 | #nameinput, #emailinput {
119 |   width: 30em;
120 |   }
121 | #phoneinput {
122 |   width: 12em;
123 |   }
124 | #submit {
125 |   background: #e3d5ba;
126 |   font-size: 1.25em;
127 |   -webkit-border-top-left-radius: 10px;
128 |   -webkit-border-bottom-right-radius: 10px;
129 |   -moz-border-radius-topleft: 10px;
130 |   -moz-border-radius-bottomright: 10px;
131 |   border-top-left-radius: 10px;
132 |   border-bottom-right-radius: 10px;
133 |   }
134 | #submitbutton {
135 |   padding: 0.5em 0;
136 |   margin-bottom: 0;
137 |   text-align: center;
138 |   }
139 | 


--------------------------------------------------------------------------------
/Hands-on Project 6-1/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 6
  3 |     Hands-on Project 6-1
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 960px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #FFE373;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 |    border-bottom: 1px solid black;
 64 |    border-left: 1px solid black;
 65 |    border-right: 1px solid black;
 66 | }
 67 | 
 68 | /* main content */
 69 | article {
 70 |    width: 960px;
 71 |    text-align: center;
 72 |    background: #BFA230;
 73 |    padding-bottom: 20px;
 74 |    border-bottom: 1px solid black;
 75 |    border-left: 1px solid black;
 76 |    border-right: 1px solid black;
 77 | }
 78 | 
 79 | article h2 {
 80 |    font-weight: bold;
 81 |    font-size: 24px;
 82 |    padding: 10px;
 83 | }
 84 | 
 85 | form div {
 86 |    border: 1px solid red;
 87 |    background: rgb(255,233,233);
 88 |    width: 80%;
 89 |    margin: 0 auto;
 90 |    padding: 10px;
 91 |    display: none;
 92 | }
 93 | 
 94 | /* form */
 95 | 
 96 | fieldset {
 97 |   padding: 1em;
 98 |   background: white;
 99 |   text-align: right;
100 | }
101 | 
102 | form {
103 |   background: white;
104 |   padding: 10px 5px 7px 5px;
105 |   margin: 0 auto;
106 |   width: 30em;
107 |   border: 2px solid black;
108 | }
109 | 
110 | input {
111 |   font-size: 1em;
112 |   float: left;
113 | }
114 | 
115 | #ssn1, #ssn2, #ssn3 {
116 |    display: inline-block;
117 |    margin-right: 0.3em;
118 | }
119 | 
120 | #ssn1 {
121 |    width: 3em;
122 | }
123 | 
124 | #ssn2 {
125 |    width: 2em;
126 | }
127 | 
128 | #ssn3 {
129 |    width: 4em;
130 | }
131 | 
132 | #ssn2label, #ssn3label {
133 |    position: absolute;
134 |    left: -5000px;
135 | }
136 | 
137 | input:focus {
138 |   background: #e3d5ba;
139 | }
140 | 
141 | label {
142 |   display: block;
143 |   margin: 0.5em 1em 0 0;
144 |   float: left;
145 |   clear: left;
146 |   width: 10em;
147 | }
148 | 
149 | #submitsection {
150 |   padding: 0.5em 0;
151 |   text-align: center;
152 | }
153 | 
154 | #submitBtn {
155 |    float: none;
156 | }


--------------------------------------------------------------------------------
/Hands-on Project 6-2/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 6
  3 |     Hands-on Project 6-1
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 960px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #FFE373;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 |    border-bottom: 1px solid black;
 64 |    border-left: 1px solid black;
 65 |    border-right: 1px solid black;
 66 | }
 67 | 
 68 | /* main content */
 69 | article {
 70 |    width: 960px;
 71 |    text-align: center;
 72 |    background: #BFA230;
 73 |    padding-bottom: 20px;
 74 |    border-bottom: 1px solid black;
 75 |    border-left: 1px solid black;
 76 |    border-right: 1px solid black;
 77 | }
 78 | 
 79 | article h2 {
 80 |    font-weight: bold;
 81 |    font-size: 24px;
 82 |    padding: 10px;
 83 | }
 84 | 
 85 | form div {
 86 |    border: 1px solid red;
 87 |    background: rgb(255,233,233);
 88 |    width: 80%;
 89 |    margin: 0 auto;
 90 |    padding: 10px;
 91 |    display: none;
 92 | }
 93 | 
 94 | /* form */
 95 | 
 96 | fieldset {
 97 |   padding: 1em;
 98 |   background: white;
 99 |   text-align: right;
100 | }
101 | 
102 | form {
103 |   background: white;
104 |   padding: 10px 5px 7px 5px;
105 |   margin: 0 auto;
106 |   width: 30em;
107 |   border: 2px solid black;
108 | }
109 | 
110 | input {
111 |   font-size: 1em;
112 |   float: left;
113 | }
114 | 
115 | #ssn1, #ssn2, #ssn3 {
116 |    display: inline-block;
117 |    margin-right: 0.3em;
118 | }
119 | 
120 | #ssn1 {
121 |    width: 3em;
122 | }
123 | 
124 | #ssn2 {
125 |    width: 2em;
126 | }
127 | 
128 | #ssn3 {
129 |    width: 4em;
130 | }
131 | 
132 | #ssn2label, #ssn3label {
133 |    position: absolute;
134 |    left: -5000px;
135 | }
136 | 
137 | input:focus {
138 |   background: #e3d5ba;
139 | }
140 | 
141 | label {
142 |   display: block;
143 |   margin: 0.5em 1em 0 0;
144 |   float: left;
145 |   clear: left;
146 |   width: 10em;
147 | }
148 | 
149 | #submitsection {
150 |   padding: 0.5em 0;
151 |   text-align: center;
152 | }
153 | 
154 | #submitBtn {
155 |    float: none;
156 | }


--------------------------------------------------------------------------------
/Hands-on Project 7-2/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 7
  3 |     Hands-on Project 7-2
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 800px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 |    -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
 50 |                        0px 10px 10px rgba(50, 50, 50, 1),
 51 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 52 |    -moz-box-shadow:    10px 0px 10px rgba(50, 50, 50, 1),
 53 |                        0px 10px 10px rgba(50, 50, 50, 1),
 54 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 55 |    box-shadow:         10px 0px 10px rgba(50, 50, 50, 1),
 56 |                        0px 10px 10px rgba(50, 50, 50, 1),
 57 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 58 | }
 59 | 
 60 | ol, ul {
 61 |    list-style: none;
 62 | }
 63 | 
 64 | /* page header */
 65 | header {
 66 |    background: #04819E;
 67 |    width: 100%;
 68 |    color: #FFFFFF;
 69 |    font-size: 48px;
 70 |    text-align: center;
 71 |    line-height: 1.5em;
 72 |    border-bottom: 1px solid black;
 73 | }
 74 | 
 75 | /* main content */
 76 | article {
 77 |    text-align: center;
 78 |    background: ivory;
 79 |    padding: 20px;
 80 | }
 81 | 
 82 | article h2 {
 83 |    font-weight: bold;
 84 |    font-size: 24px;
 85 |    padding: 10px;
 86 | }
 87 | 
 88 | /* form */
 89 | 
 90 | form {
 91 |    padding: 10px;
 92 |    height: 145px;
 93 | }
 94 | 
 95 | fieldset {
 96 |    margin-bottom: 10px;
 97 |    position: relative;
 98 |    padding: 2.5em 1em 0.5em 1em;
 99 |    background: #e3d5ba;
100 |    float: left;
101 |    width: 40%;
102 |    height: 125px;
103 | }
104 | 
105 | fieldset.button {
106 |    width: 20%;
107 | }
108 | 
109 | input {
110 |    font-size: 1.1em;
111 |    width: 4em;
112 |    clear: left;
113 |    font-family: Arial, Helvetica, sans-serif; 
114 |    text-align: center;
115 | }
116 | 
117 | input:focus {
118 |    background: #e3d5ba;
119 | }
120 | 
121 | label {
122 |    display: block;
123 | }
124 | 
125 | input, label, button, form p {
126 |    margin: 5px 10px;
127 | }
128 | 
129 | p {
130 |    clear: left;
131 | }
132 | 
133 | #dateSelected {
134 |    width: 180px;
135 | }
136 | 
137 | #day {
138 |    width: 120px;
139 |    font-size: 1.1em;
140 |    height: 1.6em;
141 |    background: white;
142 |    padding: 0.2em;
143 |    margin: 10px auto;
144 |    border: 1px solid rgb(164,164,164);
145 | }


--------------------------------------------------------------------------------
/Hands-on Project 8-1/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 6
  3 |     Hands-on Project 6-4
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 960px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 |    -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
 50 |                        0px 10px 10px rgba(50, 50, 50, 1),
 51 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 52 |    -moz-box-shadow:    10px 0px 10px rgba(50, 50, 50, 1),
 53 |                        0px 10px 10px rgba(50, 50, 50, 1),
 54 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 55 |    box-shadow:         10px 0px 10px rgba(50, 50, 50, 1),
 56 |                        0px 10px 10px rgba(50, 50, 50, 1),
 57 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 58 | }
 59 | 
 60 | ol, ul {
 61 |    list-style: none;
 62 | }
 63 | 
 64 | /* page header */
 65 | header {
 66 |    background: #04819E;
 67 |    width: 100%;
 68 |    color: #FFFFFF;
 69 |    font-size: 48px;
 70 |    text-align: center;
 71 |    line-height: 1.5em;
 72 |    border-bottom: 1px solid black;
 73 | }
 74 | 
 75 | /* main content */
 76 | article {
 77 |    width: 960px;
 78 |    text-align: left;
 79 |    background: ivory;
 80 |    padding: 20px;
 81 | }
 82 | 
 83 | h2 {
 84 |    font-weight: bold;
 85 |    font-size: 30px;
 86 |    text-align: center;
 87 | }
 88 | 
 89 | /* form */
 90 | form {
 91 |    padding: 10px;
 92 | }
 93 | 
 94 | fieldset {
 95 |    margin-bottom: 10px;
 96 |    position: relative;
 97 |    padding: 2.5em 1em 0.5em 1em;
 98 |    background: #e3d5ba;
 99 | }
100 | 
101 | #submit {
102 |    font-family: arial, helvetica, sans-serif;
103 |    font-weight: bold;
104 | }
105 | 
106 | input {
107 |    font-size: 1em;
108 | }
109 | 
110 | #deliveryinfo, #submitbutton {
111 |    border: none;
112 | }
113 | 
114 | #deliveryinfo label {
115 |    display: block;
116 |    float: left;
117 |    clear: left;
118 |    margin-top: 5px;
119 | }
120 | 
121 | #deliveryinfo input {
122 |    display: block;
123 |    margin-left: 130px;
124 | }
125 | 
126 | #addrinput {
127 |    width: 30em;
128 | }
129 | 
130 | #fnameinput, #lnameinput, #cityinput, #accountidbox {
131 |    width: 12em;
132 | }
133 | 
134 | #stateinput {
135 |    width: 3em;
136 | }
137 | 
138 | #zipinput {
139 |    width: 10em;
140 | }
141 | 
142 | #submitBtn {
143 |    font-size: 1.25em;
144 | }
145 | 
146 | #submitbutton {
147 |    background: inherit;
148 |    border: none;
149 |    padding: 0.5em 0 0 0;
150 |    text-align: center;
151 | }
152 | 


--------------------------------------------------------------------------------
/Hands-on Project 1-4/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 1
  3 |     Hands-on Project 1-4
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 600px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #FFC340;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 |    border-bottom: 1px solid black;
 64 |    border-left: 1px solid black;
 65 |    border-right: 1px solid black;
 66 | }
 67 | 
 68 | /* main content */
 69 | article {
 70 |    text-align: center;
 71 |    background: white;
 72 |    border-bottom: 1px solid black;
 73 |    border-left: 1px solid black;
 74 |    border-right: 1px solid black;
 75 | }
 76 | 
 77 | article h2 {
 78 |    font-weight: bold;
 79 |    font-size: 24px;
 80 |    padding: 10px;
 81 | }
 82 | 
 83 | /* form */
 84 | form {
 85 |   background: #A67100;
 86 |   padding: 5px;
 87 |   margin: 0 auto;
 88 |   }
 89 | fieldset {
 90 |   position: relative;
 91 |   padding: 1em 1em 0.5em 1em;
 92 |   background: #FFAE00;
 93 |   text-align: left;
 94 |   }
 95 | legend span {
 96 |   position: absolute;
 97 |   left: 0;
 98 |   top: 0;
 99 |   font-size: 1.25em;
100 |   margin-top: 0.5em;
101 |   margin-left: 0.5em;
102 |   }
103 | legend {
104 |   font-family: georgia, "times new roman", times, serif;
105 |   }
106 | input, textarea {
107 |   font-size: 1em;
108 |   }
109 | input:focus, textarea:focus {
110 |   background: #e3d5ba;
111 |   }
112 | textarea {
113 |   display: block;
114 | }
115 | #addroptions {
116 |   margin-bottom: 5px;
117 |   padding-top: 2.5em;
118 | }
119 | #addroptions label span {
120 |    font-weight: bold;
121 | }
122 | #addroptions label {
123 |   display: block;
124 |   margin: 0 20px;
125 |   position: relative;
126 |   float: left;
127 |   }
128 | #addroptions label input {
129 |    display: block;
130 |    vertical-align: top;
131 |    position: absolute;
132 |    left: -20px;
133 |    top: 0px;
134 | }
135 | #contactinfo {
136 |   border: none;
137 |   }
138 | #contactinfo label {
139 |   display: block;
140 |   position: relative;
141 |   margin: 12px 0;
142 |   }
143 | #contactinfo input {
144 |   position: absolute;
145 |   left: 120px;
146 |   }
147 | #streetinput {
148 |    width: 25em;
149 | }
150 | #cityinput {
151 |    width: 15em;
152 | }
153 | #stateinput {
154 |    width: 3em;
155 | }
156 | #zipinput {
157 |    width: 5em;
158 | }
159 | 


--------------------------------------------------------------------------------
/Hands-on Project 1-3/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 1
  3 |     Hands-on Project 1-3
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 960px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 | }
 50 | 
 51 | ol, ul {
 52 |    list-style: none;
 53 | }
 54 | 
 55 | /* page header */
 56 | header {
 57 |    background: #93AD78;
 58 |    width: 100%;
 59 |    color: black;
 60 |    font-size: 48px;
 61 |    text-align: center;
 62 |    line-height: 1.5em;
 63 |    border-bottom: 1px solid black;
 64 |    border-left: 1px solid black;
 65 |    border-right: 1px solid black;
 66 | }
 67 | 
 68 | /* main content */
 69 | article {
 70 |    width: 960px;
 71 |    text-align: center;
 72 |    background: white;
 73 |    padding-bottom: 20px;
 74 |    border-bottom: 1px solid black;
 75 |    border-left: 1px solid black;
 76 |    border-right: 1px solid black;
 77 | }
 78 | 
 79 | article h2 {
 80 |    font-weight: bold;
 81 |    font-size: 24px;
 82 |    padding: 10px;
 83 | }
 84 | 
 85 | /* form */
 86 | 
 87 | legend, #submitbutton input {
 88 |   font-family: georgia, "times new roman", times, serif;
 89 |   }
 90 | fieldset {
 91 |   margin-bottom: 10px;
 92 |   position: relative;
 93 |   padding: 2.5em 1em 0.5em 1em;
 94 |   background: #93AD78;
 95 |   text-align: left;
 96 |   }
 97 | fieldset fieldset {
 98 |   padding-top: 5px;
 99 |   border: 2px solid #082008;
100 |   }
101 | form {
102 |   background: #082008;
103 |   padding: 10px 5px 7px 5px;
104 |   margin: 0 auto;
105 |   width: 750px;
106 |   }
107 | input, textarea {
108 |   font-size: 1em;
109 |   }
110 | input:focus, textarea:focus {
111 |   background: #e3d5ba;
112 |   }
113 | legend span {
114 |   position: absolute;
115 |   left: 0;
116 |   top: 0;
117 |   font-size: 1.25em;
118 |   margin-top: 0.5em;
119 |   margin-left: 0.5em;
120 |   }
121 | textarea {
122 |   display: block;
123 |   }
124 | #checkin {
125 |   float: left;
126 |   width: 45%;
127 |   }
128 | #checkout {
129 |   float: right;
130 |   width: 45%;
131 |   }
132 | #contactinfo, #reserveinfo, #submitbutton {
133 |   border: none;
134 |   }
135 | #contactinfo label {
136 |   display: block;
137 |   position: relative;
138 |   margin: 12px 0;
139 |   }
140 | #contactinfo input {
141 |   position: absolute;
142 |   left: 100px;
143 |   }
144 | #nameinput, #emailinput {
145 |   width: 30em;
146 |   }
147 | #phoneinput {
148 |   width: 12em;
149 |   }
150 | #submitbutton {
151 |   border: none;
152 |   background: #93AD78;
153 |   padding: 0.5em 0;
154 |   margin-bottom: 0;
155 |   text-align: center;
156 |   }


--------------------------------------------------------------------------------
/Hands-on Project 9-2/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 9
  3 |     Hands-on Project 9-2
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 640px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 |    -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
 50 |                        0px 10px 10px rgba(50, 50, 50, 1),
 51 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 52 |    -moz-box-shadow:    10px 0px 10px rgba(50, 50, 50, 1),
 53 |                        0px 10px 10px rgba(50, 50, 50, 1),
 54 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 55 |    box-shadow:         10px 0px 10px rgba(50, 50, 50, 1),
 56 |                        0px 10px 10px rgba(50, 50, 50, 1),
 57 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 58 | }
 59 | 
 60 | ol, ul {
 61 |    list-style: none;
 62 | }
 63 | 
 64 | /* page header */
 65 | header {
 66 |    background: #329D27;
 67 |    width: 100%;
 68 |    color: #FFFFFF;
 69 |    font-size: 48px;
 70 |    text-align: center;
 71 |    line-height: 1.5em;
 72 |    border-bottom: 1px solid black;
 73 | }
 74 | 
 75 | /* main content */
 76 | article {
 77 |    width: 640px;
 78 |    text-align: left;
 79 |    background: ivory;
 80 |    padding: 20px;
 81 | }
 82 | 
 83 | h2 {
 84 |    font-weight: bold;
 85 |    font-size: 30px;
 86 |    text-align: center;
 87 | }
 88 | 
 89 | #errorMessage {
 90 |    display: none;
 91 |    width: 80%;
 92 |    text-align: center;
 93 |    padding: 10px;
 94 |    margin: 15px auto 5px;
 95 |    background: #e3d5ba;
 96 |    color: black;
 97 |    border: 5px solid rgb(190,50,38);
 98 |    font-weight: bold;
 99 | }
100 | 
101 | 
102 | /* form */
103 | form {
104 |    padding: 10px;
105 | }
106 | 
107 | fieldset {
108 |    margin-bottom: 10px;
109 |    position: relative;
110 |    padding: 2.5em 1em 0.5em 1em;
111 |    background: #e3d5ba;
112 | }
113 | 
114 | legend {
115 |    font-family: arial, helvetica, sans-serif;
116 |    font-weight: bold;
117 |    position: absolute;
118 |    top: 0;
119 |    left: 0;
120 |    font-size: 1.25em;
121 |    margin-top: 0.5em;
122 |    margin-left: 0.5em;
123 | }
124 | 
125 | input {
126 |    font-size: 1em;
127 |    display: block;
128 |    margin-left: 130px;
129 | }
130 | 
131 | label {
132 |    display: block;
133 |    float: left;
134 |    clear: left;
135 |    margin-top: 5px;
136 | }
137 | 
138 | #rememberinput, #rememberlabel {
139 |    display: inline-block;
140 |    float: none;
141 |    clear: none;
142 | }
143 | 
144 | #submitBtn {
145 |    font-size: 1.25em;
146 |    margin: 0 auto;
147 | }
148 | 
149 | #submitbutton {
150 |    background: inherit;
151 |    border: none;
152 |    padding: 0;
153 |    text-align: center;
154 | }
155 | 


--------------------------------------------------------------------------------
/Hands-on Project 9-3/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 9
  3 |     Hands-on Project 9-2
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    max-width: 640px;
 46 |    background: white;
 47 |    margin: 0 auto;
 48 |    font-family: Arial, Helvetica, sans-serif; 
 49 |    -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
 50 |                        0px 10px 10px rgba(50, 50, 50, 1),
 51 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 52 |    -moz-box-shadow:    10px 0px 10px rgba(50, 50, 50, 1),
 53 |                        0px 10px 10px rgba(50, 50, 50, 1),
 54 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 55 |    box-shadow:         10px 0px 10px rgba(50, 50, 50, 1),
 56 |                        0px 10px 10px rgba(50, 50, 50, 1),
 57 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 58 | }
 59 | 
 60 | ol, ul {
 61 |    list-style: none;
 62 | }
 63 | 
 64 | /* page header */
 65 | header {
 66 |    background: #329D27;
 67 |    width: 100%;
 68 |    color: #FFFFFF;
 69 |    font-size: 48px;
 70 |    text-align: center;
 71 |    line-height: 1.5em;
 72 |    border-bottom: 1px solid black;
 73 | }
 74 | 
 75 | /* main content */
 76 | article {
 77 |    width: 640px;
 78 |    text-align: left;
 79 |    background: ivory;
 80 |    padding: 20px;
 81 | }
 82 | 
 83 | h2 {
 84 |    font-weight: bold;
 85 |    font-size: 30px;
 86 |    text-align: center;
 87 | }
 88 | 
 89 | #errorMessage {
 90 |    display: none;
 91 |    width: 80%;
 92 |    text-align: center;
 93 |    padding: 10px;
 94 |    margin: 15px auto 5px;
 95 |    background: #e3d5ba;
 96 |    color: black;
 97 |    border: 5px solid rgb(190,50,38);
 98 |    font-weight: bold;
 99 | }
100 | 
101 | 
102 | /* form */
103 | form {
104 |    padding: 10px;
105 | }
106 | 
107 | fieldset {
108 |    margin-bottom: 10px;
109 |    position: relative;
110 |    padding: 2.5em 1em 0.5em 1em;
111 |    background: #e3d5ba;
112 | }
113 | 
114 | legend {
115 |    font-family: arial, helvetica, sans-serif;
116 |    font-weight: bold;
117 |    position: absolute;
118 |    top: 0;
119 |    left: 0;
120 |    font-size: 1.25em;
121 |    margin-top: 0.5em;
122 |    margin-left: 0.5em;
123 | }
124 | 
125 | input {
126 |    font-size: 1em;
127 |    display: block;
128 |    margin-left: 130px;
129 | }
130 | 
131 | label {
132 |    display: block;
133 |    float: left;
134 |    clear: left;
135 |    margin-top: 5px;
136 | }
137 | 
138 | #rememberinput, #rememberlabel {
139 |    display: inline-block;
140 |    float: none;
141 |    clear: none;
142 | }
143 | 
144 | #submitBtn {
145 |    font-size: 1.25em;
146 |    margin: 0 auto;
147 | }
148 | 
149 | #submitbutton {
150 |    background: inherit;
151 |    border: none;
152 |    padding: 0;
153 |    text-align: center;
154 | }
155 | 


--------------------------------------------------------------------------------
/Hands-on Project 4-1/tractor.htm:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |    <!--
  5 |       JavaScript 6th Edition
  6 |       Chapter 4
  7 |       Chapter case
  8 | 
  9 |       Tuba Farm Equipment
 10 |       Tractor selector page
 11 |       Author: Lisa Kilker
 12 |       Date:   April 15, 2018
 13 | 
 14 |       Filename: tractor.htm
 15 |    -->
 16 |    <meta charset="utf-8" />
 17 |    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 18 |    <meta name="viewport" content="width=page-width, initial-scale=1.0"/>
 19 |    <title>Tuba Farm Equipment - Tractor Selector</title>
 20 |    <link rel="stylesheet" href="tuba.css" />
 21 |    <!--[if lt IE 9]>
 22 |       <link rel="stylesheet" href="tubaie.css" />
 23 |    <![endif]-->
 24 |    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
 25 |    <script src="modernizr.custom.05819.js"></script>
 26 | </head>
 27 | 
 28 | <body>
 29 |    <div>
 30 |       <header>
 31 |          <h1>Tuba Farm Equipment</h1>
 32 |          <img src="tuba2.png" width="258" height="147" alt="" title=""  />
 33 |       </header>
 34 | 
 35 |       <nav>
 36 |          <ul>
 37 |             <li><a href="#">Home</a></li>
 38 |             <li><a href="#">History</a></li>
 39 |             <li><a href="#">Products</a></li>
 40 |             <li><a href="#">Selectors</a></li>
 41 |             <li><a href="#">Contact</a></li>
 42 |             <li><a href="#">Weather</a></li>
 43 |          </ul>
 44 |       </nav>
 45 | 
 46 |       <article>
 47 |          <h2>Tractor Selector</h2>
 48 |          <form>
 49 |             <fieldset>
 50 |                <legend><span>How many acres do you cultivate?</span></legend>
 51 |                <input type="number" id="acres" name="acres" />
 52 |                <label for="acres">acres</label>
 53 |             </fieldset>
 54 |             <fieldset>
 55 |                <legend><span>Which crops do you grow?</span></legend>
 56 |                <input type="checkbox" id="wheat" name="crops" value="wheat" />
 57 |                <label for="wheat">Wheat</label>
 58 |                <input type="checkbox" id="corn" name="crops" value="corn" />
 59 |                <label for="corn">Corn</label>
 60 |                <input type="checkbox" id="soy" name="crops" value="soy" />
 61 |                <label for="soy">Soy</label>
 62 |                <input type="checkbox" id="alfalfa" name="crops" value="alfalfa" />
 63 |                <label for="alfalfa">Alfalfa</label>
 64 |                <input type="checkbox" id="cotton" name="crops" value="cotton" />
 65 |                <label for="cotton">Cotton</label>
 66 |                <input type="checkbox" id="sorghum" name="crops" value="sorghum" />
 67 |                <label for="sorghum">Sorghum</label>
 68 |                <input type="checkbox" id="rice" name="crops" value="rice" />
 69 |                <label for="rice">Rice</label>
 70 |             </fieldset>
 71 |             <fieldset>
 72 |                <legend><span>How many months per year do you work your fields?</span></legend>
 73 |                <input type="number" id="months" name="months" />
 74 |                <label for="months">months</label>
 75 |             </fieldset>
 76 |             <fieldset>
 77 |                <legend><span>Which is your preferred fuel source?</span></legend>
 78 |                <input type="radio" name="fuel" id="E85" value="E85" />
 79 |                <label for="E85">E85</label>
 80 |                <input type="radio" name="fuel" id="biodiesel" value="biodiesel" />
 81 |                <label for="biodiesel">Biodiesel</label>
 82 |                <input type="radio" name="fuel" id="diesel" value="diesel" />
 83 |                <label for="diesel">Standard diesel</label>
 84 |             </fieldset>
 85 |          </form>
 86 |       </article>
 87 |       
 88 |       <aside>
 89 |          <h2 id="messageHead"></h2>
 90 |          <p id="message"></p>
 91 |       </aside>
 92 | 
 93 |       <footer>
 94 |          <p>Tuba Farm Equipment &bull; Fargo, ND</p>
 95 |       </footer>
 96 |    </div>
 97 |    <script src="tuba.js"></script>
 98 | </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/Hands-on Project 5-5/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <!--
 5 |       JavaScript 6th Edition
 6 |       Chapter 5
 7 |       Hands-on Project 5-5
 8 | 
 9 |       Author: Lisa Kilker  
10 |       Date:   April 17, 2018
11 | 
12 |       Filename: index.htm
13 |    -->
14 |    <meta charset="utf-8" />
15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 |    <title>Hands-on Project 5-5</title>
17 |    <link rel="stylesheet" href="styles.css" />
18 |    <script src="modernizr.custom.05819.js"></script>
19 | </head>
20 | 
21 | <body>
22 |    <header>
23 |       <h1>
24 |          Hands-on Project 5-5
25 |       </h1>
26 |    </header>
27 | 
28 |    <article>
29 |       <h2>United States Bill of Rights</h2>
30 |       <h3>Table of Contents</h3>
31 |       <ul></ul>
32 |       <h3 id="1">Amendment I</h3>
33 |       <p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
34 |       <h3 id="2">Amendment II</h3>
35 |       <p>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
36 |       <h3 id="3">Amendment III</h3>
37 |       <p>No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</p>
38 |       <h3 id="4">Amendment IV</h3>
39 |       <p>The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.</p>
40 |       <h3 id="5">Amendment V</h3>
41 |       <p>No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation.</p>
42 |       <h3 id="6">Amendment VI</h3>
43 |       <p>In all criminal prosecutions, the accused shall enjoy the right to a speedy and public trial, by an impartial jury of the State and district wherein the crime shall have been committed, which district shall have been previously ascertained by law, and to be informed of the nature and cause of the accusation; to be confronted with the witnesses against him; to have compulsory process for obtaining witnesses in his favor, and to have the Assistance of Counsel for his defence.</p>
44 |       <h3 id="7">Amendment VII</h3>
45 |       <p>In Suits at common law, where the value in controversy shall exceed twenty dollars, the right of trial by jury shall be preserved, and no fact tried by a jury, shall be otherwise re-examined in any Court of the United States, than according to the rules of the common law.</p>
46 |       <h3 id="8">Amendment VIII</h3>
47 |       <p>Excessive bail shall not be required, nor excessive fines imposed, nor cruel and unusual punishments inflicted.</p>
48 |       <h3 id="9">Amendment IX</h3>
49 |       <p>The enumeration in the Constitution, of certain rights, shall not be construed to deny or disparage others retained by the people.</p>
50 |       <h3 id="10">Amendment X</h3>
51 |       <p>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.</p>
52 |    </article>
53 |       <script>
54 |          var list = document.querySelector("ul");
55 |          var headingText;
56 |          var TOCEntry;
57 | 
58 |          for(var i = 1; i <= 10; i++) {
59 |             headingText = document.getElementById(i).innerHTML;
60 |             TOCEntry = document.createElement("li");
61 |             TOCEntry.innerHTML = "<a href=#" + i + ">" + headingText + "</a>";
62 |             list.appendChild(TOCEntry);
63 |             }
64 | 
65 |             if(window.addEventListener) {
66 |                window.addEventListener("load", createTOC, false);
67 |             }
68 | 
69 |             else if (window.attachEvent) {
70 |                window.attachEvent("onload", creatTOC);
71 |             }
72 |       </script>
73 |    </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/Hands-on Project 4-1/tuba.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 4
  3 |     Chapter case
  4 | 
  5 |     Tuba Farm Equipment
  6 |     Large format style sheet
  7 | 
  8 |     Filename: tuba.css
  9 | */
 10 | 
 11 | /* apply a natural box layout model to all elements */
 12 | * {
 13 |    -moz-box-sizing: border-box;
 14 |    -webkit-box-sizing: border-box;
 15 |    box-sizing: border-box;
 16 | }
 17 | 
 18 | /* reset rules */
 19 | html, body, div, span, applet, object, iframe,
 20 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 21 | a, abbr, acronym, address, big, cite, code,
 22 | del, dfn, em, img, ins, kbd, q, s, samp,
 23 | small, strike, strong, sub, sup, tt, var,
 24 | b, u, i, center,
 25 | dl, dt, dd, ol, ul, li,
 26 | fieldset, form, label, legend,
 27 | table, caption, tbody, tfoot, thead, tr, th, td,
 28 | article, aside, canvas, details, embed, 
 29 | figure, figcaption, footer, header, hgroup, 
 30 | menu, nav, output, ruby, section, summary,
 31 | time, mark, audio, video {
 32 |    margin: 0;
 33 |    padding: 0;
 34 |    border: 0;
 35 |    font-size: 100%;
 36 |    font: inherit;
 37 |    vertical-align: baseline;
 38 | }
 39 | 
 40 | /* HTML5 display-role reset for older browsers */
 41 | article, aside, details, figcaption, figure, 
 42 | footer, header, hgroup, menu, nav, section {
 43 |    display: block;
 44 | }
 45 | 
 46 | body {
 47 |    line-height: 1;
 48 |    width: 960px;
 49 |    margin: 0 auto;
 50 |    font-family: "Muli", arial, helvetica, sans-serif;
 51 |    background: rgb(117,192,62);
 52 |    position: relative;
 53 | }
 54 | 
 55 | ol, ul {
 56 |    list-style: none;
 57 | }
 58 | 
 59 | blockquote, q {
 60 |    quotes: none;
 61 | }
 62 | 
 63 | blockquote:before, blockquote:after,
 64 | q:before, q:after {
 65 |    content: '';
 66 |    content: none;
 67 | }
 68 | 
 69 | table {
 70 |    border-collapse: collapse;
 71 |    border-spacing: 0;
 72 | }
 73 | 
 74 | a:link, a:visited {
 75 |    text-decoration: none;
 76 |    color: inherit;
 77 | }
 78 | 
 79 | a:hover {
 80 |    text-decoration: none;
 81 |    color: inherit;
 82 | }
 83 | 
 84 | a:active {
 85 |    text-decoration: none;
 86 |    color: inherit;
 87 | }
 88 | 
 89 | /* container */
 90 | body div:first-child {
 91 |    background: rgb(14,119,62);
 92 | }
 93 | 
 94 | /* page header */
 95 | header {
 96 |    text-transform: uppercase;
 97 |    background: rgb(14,119,62);
 98 |    color: rgb(227,198,32);
 99 |    font-size: 3.7em;
100 |    letter-spacing: -3px;
101 | }
102 | 
103 | header img {
104 |    display: block;
105 | }
106 | 
107 | header h1 {
108 |    float: right;
109 |    width: 702px;
110 |    text-align: center;
111 |    margin-top: 0.3em;
112 | }
113 | 
114 | /* navigation */
115 | nav {
116 |    text-transform: uppercase;
117 |    width: 702px;
118 |    position: absolute;
119 |    left: 258px;
120 |    top: 5.8em;
121 | }
122 | 
123 | nav ul {
124 |    text-align: center;
125 |    padding: 0 10px;
126 | }
127 | 
128 | nav ul li {
129 |    display: inline-block;
130 |    padding: 7px 8px;
131 |    margin: 0 3px;
132 |    background: rgb(116,191,68);
133 |    border: 5px solid rgb(116,191,68);
134 |    border-radius: 10px;
135 | }
136 | 
137 | nav ul li:last-child {
138 |    background: #6996D3;
139 |    border: 5px solid #6996D3;
140 | }
141 | 
142 | nav ul li:hover {
143 |    background: rgb(227,198,32);
144 | }
145 | 
146 | /* main content */
147 | article {
148 |    width: 702px;
149 |    float: right;
150 |    padding: 1em;
151 |    background: white;
152 | }
153 | 
154 | article h2 {
155 |    font-size: 1.2em;
156 |    font-weight: bold;
157 |    text-align: left;
158 |    margin: 0 0 10px 51px;
159 | }
160 | 
161 | form {
162 |    width: 600px;
163 |    margin: 0 auto;
164 | }
165 | 
166 | fieldset {
167 |    margin: 10px;
168 |    padding: 20px 10px 10px;
169 |    background: rgb(164,188,149);
170 |    position: relative;
171 |    border-radius: 10px;
172 | }
173 | 
174 | legend span {
175 |    display: block;
176 |    position: relative;
177 |    top: 1em;
178 |    font-weight: bold;
179 | }
180 | 
181 | label {
182 |    margin-right: 5px;
183 | }
184 | 
185 | /* acres text box */
186 | #acres {
187 |    width: 7em;
188 | }
189 | 
190 | /* months text box */
191 | #months {
192 |    width: 3em;
193 | }
194 | 
195 | /* sidebar */
196 | aside {
197 |    width: 258px;
198 |    padding: 1em;
199 |    color: rgb(227,198,32);
200 |    height: 100%;
201 | }
202 | 
203 | aside h2 {
204 |    font-size: 1.2em;
205 |    font-weight: bold;
206 |    text-align: center;
207 | }
208 | 
209 | aside p {
210 |    padding: 1em;
211 | }
212 | 
213 | /* footer */
214 | footer {
215 |    width: 100%;
216 |    font-size: 14px;
217 |    padding: 10px;
218 |    clear: both;
219 |    background: black;
220 |    color: rgb(227,198,32);
221 | }
222 | 
223 | footer p {
224 |    text-align: center;
225 | }


--------------------------------------------------------------------------------
/Hands-on Project 4-1/tubaie.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 4
  3 |     Chapter case
  4 | 
  5 |     Tuba Farm Equipment
  6 |     Large format style sheet
  7 | 
  8 |     Filename: tuba.css
  9 | */
 10 | 
 11 | /* apply a natural box layout model to all elements */
 12 | * {
 13 |    -moz-box-sizing: border-box;
 14 |    -webkit-box-sizing: border-box;
 15 |    box-sizing: border-box;
 16 | }
 17 | 
 18 | /* reset rules */
 19 | html, body, div, span, applet, object, iframe,
 20 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 21 | a, abbr, acronym, address, big, cite, code,
 22 | del, dfn, em, img, ins, kbd, q, s, samp,
 23 | small, strike, strong, sub, sup, tt, var,
 24 | b, u, i, center,
 25 | dl, dt, dd, ol, ul, li,
 26 | fieldset, form, label, legend,
 27 | table, caption, tbody, tfoot, thead, tr, th, td,
 28 | article, aside, canvas, details, embed, 
 29 | figure, figcaption, footer, header, hgroup, 
 30 | menu, nav, output, ruby, section, summary,
 31 | time, mark, audio, video {
 32 |    margin: 0;
 33 |    padding: 0;
 34 |    border: 0;
 35 |    font-size: 100%;
 36 |    font: inherit;
 37 |    vertical-align: baseline;
 38 | }
 39 | 
 40 | /* HTML5 display-role reset for older browsers */
 41 | article, aside, details, figcaption, figure, 
 42 | footer, header, hgroup, menu, nav, section {
 43 |    display: block;
 44 | }
 45 | 
 46 | body {
 47 |    line-height: 1;
 48 |    width: 960px;
 49 |    margin: 0 auto;
 50 |    font-family: "Muli", arial, helvetica, sans-serif;
 51 |    background: rgb(117,192,62);
 52 |    position: relative;
 53 | }
 54 | 
 55 | ol, ul {
 56 |    list-style: none;
 57 | }
 58 | 
 59 | blockquote, q {
 60 |    quotes: none;
 61 | }
 62 | 
 63 | blockquote:before, blockquote:after,
 64 | q:before, q:after {
 65 |    content: '';
 66 |    content: none;
 67 | }
 68 | 
 69 | table {
 70 |    border-collapse: collapse;
 71 |    border-spacing: 0;
 72 | }
 73 | 
 74 | a:link, a:visited {
 75 |    text-decoration: none;
 76 |    color: inherit;
 77 | }
 78 | 
 79 | a:hover {
 80 |    text-decoration: none;
 81 |    color: inherit;
 82 | }
 83 | 
 84 | a:active {
 85 |    text-decoration: none;
 86 |    color: inherit;
 87 | }
 88 | 
 89 | /* container */
 90 | body div:first-child {
 91 |    background: rgb(14,119,62);
 92 | }
 93 | 
 94 | /* page header */
 95 | header {
 96 |    text-transform: uppercase;
 97 |    background: rgb(14,119,62);
 98 |    color: rgb(227,198,32);
 99 |    font-size: 3.7em;
100 |    letter-spacing: -3px;
101 | }
102 | 
103 | header img {
104 |    display: block;
105 | }
106 | 
107 | header h1 {
108 |    float: right;
109 |    width: 702px;
110 |    text-align: center;
111 |    margin-top: 0.3em;
112 | }
113 | 
114 | /* navigation */
115 | nav {
116 |    text-transform: uppercase;
117 |    width: 702px;
118 |    position: absolute;
119 |    left: 258px;
120 |    top: 5.8em;
121 | }
122 | 
123 | nav ul {
124 |    text-align: center;
125 |    padding: 0 10px;
126 | }
127 | 
128 | nav ul li {
129 |    display: inline-block;
130 |    padding: 7px 8px;
131 |    margin: 0 3px;
132 |    background: rgb(116,191,68);
133 |    border: 5px solid rgb(116,191,68);
134 |    border-radius: 10px;
135 | }
136 | 
137 | nav ul li:last-child {
138 |    background: #6996D3;
139 |    border: 5px solid #6996D3;
140 | }
141 | 
142 | nav ul li:hover {
143 |    background: rgb(227,198,32);
144 | }
145 | 
146 | /* main content */
147 | article {
148 |    width: 702px;
149 |    float: right;
150 |    padding: 1em;
151 |    background: white;
152 | }
153 | 
154 | article h2 {
155 |    font-size: 1.2em;
156 |    font-weight: bold;
157 |    text-align: left;
158 |    margin: 0 0 10px 51px;
159 | }
160 | 
161 | form {
162 |    width: 600px;
163 |    margin: 0 auto;
164 | }
165 | 
166 | fieldset {
167 |    margin: 10px;
168 |    padding: 20px 10px 10px;
169 |    background: rgb(164,188,149);
170 |    position: relative;
171 |    border-radius: 10px;
172 | }
173 | 
174 | legend span {
175 |    display: block;
176 |    position: relative;
177 |    top: -0.5em;
178 |    font-weight: bold;
179 | }
180 | 
181 | label {
182 |    margin-right: 5px;
183 | }
184 | 
185 | /* acres text box */
186 | #acres {
187 |    width: 7em;
188 | }
189 | 
190 | /* months text box */
191 | #months {
192 |    width: 3em;
193 | }
194 | 
195 | /* sidebar */
196 | aside {
197 |    width: 258px;
198 |    padding: 1em;
199 |    color: rgb(227,198,32);
200 |    height: 100%;
201 | }
202 | 
203 | aside h2 {
204 |    font-size: 1.2em;
205 |    font-weight: bold;
206 |    text-align: center;
207 | }
208 | 
209 | aside p {
210 |    padding: 1em;
211 | }
212 | 
213 | /* footer */
214 | footer {
215 |    width: 100%;
216 |    font-size: 14px;
217 |    padding: 10px;
218 |    clear: both;
219 |    background: black;
220 |    color: rgb(227,198,32);
221 | }
222 | 
223 | footer p {
224 |    text-align: center;
225 | }


--------------------------------------------------------------------------------
/Hands-on Project 6-2/script.js:
--------------------------------------------------------------------------------
  1 | //Author:  Lisa Kilker
  2 | //Date:  April 19, 2018
  3 | //Hands-on Project 6-2
  4 | 
  5 | "use strict";
  6 | var formValidity = true;
  7 | 
  8 | function validateRequired() { //validates required fields
  9 | 	var inputElements = document.querySelectorAll("#contactinfo input");
 10 | 	var errorDiv = document.getElementById("errorText");
 11 | 	var elementCount = inputElements.length;
 12 | 	var requiredValidity = true;
 13 | 	var currentElement;
 14 | 
 15 | 	try {
 16 | 		for (var i = 0; i < elementCount; i++) {
 17 | 			//validates all input elements in fieldset
 18 | 			currentElement = inputElements[i];
 19 | 
 20 | 		if (currentElement.value === "") {
 21 | 			currentElement.style.background = "rgb(255,233,233)";
 22 | 			requiredValidity = false;
 23 | 
 24 | 		} else {
 25 | 			currentElement.style.background = "white";
 26 | 		}
 27 | 	}
 28 | 		if (requiredValidity === false) {
 29 | 		throw "Please complete all fields.";
 30 | 	}
 31 | 			errorDiv.style.display = "none";
 32 | 			errorDiv.innerHTML = "";
 33 | 	}
 34 | 		catch(msg) {
 35 | 			errorDiv.style.display = "block";
 36 | 			errorDiv.innerHTML = msg;
 37 | 			formValidity = false;
 38 | 		}
 39 | 	}
 40 |  
 41 | function createEventListeners() { //create event listeners
 42 | 	var form = document.getElementsByTagName("form")[0]; 
 43 | 	
 44 | 		if (form.addEventListener) {
 45 | 			form.addEventListener("submit", validateForm, false); 
 46 | 		}	 
 47 | 
 48 | 		else if (form.attachEvent) {
 49 | 			form.attachEvent("onsubmit", validateForm);
 50 | 		}
 51 | 	}
 52 | 
 53 | function validateForm(evt) { //validates form
 54 | 
 55 | 		if (evt.preventDefault) {
 56 | 			evt.preventDefault(); //prevents form from submitting
 57 | 
 58 | 		} else {
 59 | 			evt.returnValue = false; //prevents form from submitting in IE8
 60 | 		}
 61 | 			formValidity = true; //resets value for revalidation
 62 | 			validateRequired();
 63 | 
 64 | 		if (formValidity === true) {
 65 | 			document.getElementsByTagName("form")[0].submit();
 66 | 		}
 67 | 	}
 68 | 
 69 | function validateNumbers() { //validates number fields for older browsers
 70 | 	var numberInputs = document.querySelectorAll("#contactinfo input[type=number]");
 71 | 	var elementCount = numberInputs.length;
 72 | 	var numErrorDiv = document.getElementById("numErrorText");
 73 | 	var numbersValidity = true;
 74 | 	var currentElement;
 75 | 
 76 | 	try {
 77 | 
 78 | 		for (var i = 0; i < elementCount; i++) {
 79 | 			//validates all input elements of type "number" in fieldset
 80 | 			currentElement =  numberInputs[i];
 81 | 
 82 | 		if (isNan(currentElement.value) || (currentElement.valud === "")) {
 83 | 			currentElement.style.background = "rgb(255,233,233";
 84 | 			numbersValidity = false;
 85 | 
 86 | 		} else {
 87 | 			currentElement.style.background = "white";
 88 | 		}
 89 | 	}
 90 | 		if (numbersValidity === false) {
 91 | 			throw
 92 | 		}
 93 | 			numErrorDiv.Style.display = "none";
 94 | 			numErrorDiv.innerHTML = "";
 95 | 	}
 96 | 			catch(msg){
 97 | 				numErrorDiv.style.display = "block";
 98 | 				numErrorDiv.innerHTML = msg;
 99 | 				formValidity = false;
100 | 		}
101 | 	}
102 | 
103 | function validateForm(evt) { 
104 | 
105 | 		if (evt.preventDefault) {
106 | 			evt.preventDefault(); //prevent form from submitting 
107 | 
108 | 		} else {
109 | 			evt.returnValue = false; //prevent form from submitting in IE8
110 | 			formValidity = true; //reset value for revalidation 
111 | 			validateRequired(); validateNumbers(); 
112 | 
113 | 			if (formValidity === true) {
114 | 			document.getElementsByTagName("form")[0].submit();
115 | 		}
116 |  	}
117 | }
118 | 
119 | function zeroPlaceholder() { //remove fallback placeholder text
120 | 	var addressBox = document.getElementById("addrinput");
121 | 			addressBox.style.color = "black";
122 | 
123 | 		if (addressBox.value === addressBox.placeholder) {
124 | 			addressBox.value = "";
125 | 		}
126 | 	}
127 | 
128 | function checkPlaceholder() { //restores placeholder text if box contains no user entry
129 | 	var addressBox = document.getElementById("addrinput");
130 | 
131 | 		if (addressBox.value === "") {
132 | 			addressBox.style.color = "rgb(178,184,183)";
133 | 			addrsesBox.value = addressBox.placeholder;
134 | 		}
135 | 	}
136 | 
137 | function generatePlaceholder() { //adds placeholder text for browsers that don't support the placeholder attribute
138 | 	
139 | 		if (!Modernizr.input.placehoder) {
140 | 	var addressBox = document.getElementById("addrinput");
141 | 			addressBox.value = addressBox.placeholder;
142 | 			addressBox.style.color = "rgb(178,184,183)";
143 | 
144 | 		if (addressBox.addEventListener) {
145 | 			addressBox.addEventListener("focus", zeroPlaceholder, false);
146 | 
147 | 		} else if (addressBox.attachEvent) {
148 | 			addressBox.attachEvent("onfocus", zeroPlaceholder);
149 | 			addressBox.attachEvent("onblur", checkPlaceholder);
150 | 		}
151 | 	}		
152 | }
153 | 
154 | 	if (window.addEventListener) { //run setup fnction when page finishes loading
155 | 			//window.addEventListener("load", createEventListeners, false);
156 | 			window.addEventListener("load", setUpPage, false);
157 | 
158 | 		} else if (window.attachEvent) {
159 | 			//window.attachEvent("onload", createEventListeners);
160 | 			window.attachEvent("onload", setUpPage);
161 | 		}	
162 | 
163 | 
164 | 
165 | 
166 | 


--------------------------------------------------------------------------------
/Hands-on Project 10-1/styles.css:
--------------------------------------------------------------------------------
  1 | /*  JavaScript 6th Edition
  2 |     Chapter 10
  3 |     Hands-on Project 10-1
  4 | 
  5 |     Filename: styles.css
  6 | */
  7 | 
  8 | /* apply a natural box layout model to all elements */
  9 | * {
 10 |    -moz-box-sizing: border-box;
 11 |    -webkit-box-sizing: border-box;
 12 |    box-sizing: border-box;
 13 | }
 14 | 
 15 | /* reset rules */
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, u, i, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, 
 26 | figure, figcaption, footer, header, hgroup, 
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |    margin: 0;
 30 |    padding: 0;
 31 |    border: 0;
 32 |    font-size: 100%;
 33 |    font: inherit;
 34 |    vertical-align: baseline;
 35 | }
 36 | 
 37 | /* HTML5 display-role reset for older browsers */
 38 | article, aside, details, figcaption, figure, 
 39 | footer, header, hgroup, menu, nav, section {
 40 |    display: block;
 41 | }
 42 | 
 43 | body {
 44 |    line-height: 1;
 45 |    min-width: 320px;
 46 |    max-width: 640px;
 47 |    background: white;
 48 |    margin: 0 auto;
 49 |    font-family: Arial, Helvetica, sans-serif; 
 50 |    -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
 51 |                        0px 10px 10px rgba(50, 50, 50, 1),
 52 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 53 |    -moz-box-shadow:    10px 0px 10px rgba(50, 50, 50, 1),
 54 |                        0px 10px 10px rgba(50, 50, 50, 1),
 55 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 56 |    box-shadow:         10px 0px 10px rgba(50, 50, 50, 1),
 57 |                        0px 10px 10px rgba(50, 50, 50, 1),
 58 |                        -10px 0px 10px rgba(50, 50, 50, 1);
 59 | }
 60 | 
 61 | ol, ul {
 62 |    list-style: none;
 63 | }
 64 | 
 65 | /* page header */
 66 | header {
 67 |    background: #04819E;
 68 |    width: 100%;
 69 |    color: #FFFFFF;
 70 |    font-size: 48px;
 71 |    text-align: center;
 72 |    line-height: 1.5em;
 73 |    border-bottom: 1px solid black;
 74 | }
 75 | 
 76 | /* main content */
 77 | article {
 78 |    width: 100%;
 79 |    text-align: center;
 80 |    background: ivory;
 81 |    padding-bottom: 20px;
 82 |    overflow: auto;
 83 | }
 84 | 
 85 | h2 {
 86 |    font-weight: bold;
 87 |    font-size: 24px;
 88 |    padding: 10px;
 89 | }
 90 | 
 91 | #grid {
 92 |    overflow: auto;
 93 |    width: 266px;
 94 |    margin: 0 auto;
 95 |    border: 1px solid black;
 96 | }
 97 | 
 98 | #grid div {
 99 |    float: left;
100 |    width: 88px;
101 |    height: 99px;
102 |    border: 1px solid black;
103 | }
104 | 
105 | #top1, #bottom1 {
106 |    clear: left;
107 | }
108 | 
109 | #image {
110 |    float: left;
111 |    margin-left: 50px;
112 | }
113 | 
114 | #image img {
115 |    border: 10px solid darkgoldenrod;
116 | }
117 | 
118 | #pieces {
119 |    position: relative;
120 |    height: 110px;
121 | }
122 | 
123 | #pieces div {
124 |    position: absolute;
125 |    width: 14.6667%;
126 |    margin: 1%;
127 |    padding: 1em 0;
128 |    height: 110px;
129 | }
130 | 
131 | #piece1 {
132 |    left: 0px;
133 |    background: url("images/frog_03.png") center center no-repeat;
134 | }
135 | 
136 | #piece2 {
137 |    left: 16.6667%;
138 |    background: url("images/frog_02.png") center center no-repeat;
139 | }
140 | 
141 | #piece3 {
142 |    left: 33.3334%;
143 |    background: url("images/frog_05.png") center center no-repeat;
144 | }
145 | 
146 | #piece4 {
147 |    left: 50%;
148 |    background: url("images/frog_01.png") center center no-repeat;
149 | }
150 | 
151 | #piece5 {
152 |    left: 66.6667%;
153 |    background: url("images/frog_06.png") center center no-repeat;
154 | }
155 | 
156 | #piece6 {
157 |    left: 83.3334%;
158 |    background: url("images/frog_04.png") center center no-repeat;
159 | }
160 | 
161 | @media all and (max-width: 550px) {
162 |    #grid {
163 |       margin: 0 auto;
164 |       width: 134px;
165 |    }
166 |    #grid div {
167 |       width: 44px;
168 |       height: 49px;
169 |    }
170 |    #image {
171 |       float: left;
172 |       width: 100%;
173 |       text-align: center;
174 |       margin: 0 0 20px;
175 |    }
176 |    #piece1 {
177 |       background: url("images/frog_03_sm.png") center center no-repeat;
178 |    }
179 |    
180 |    #piece2 {
181 |       background: url("images/frog_02_sm.png") center center no-repeat;
182 |    }
183 |    
184 |    #piece3 {
185 |       background: url("images/frog_05_sm.png") center center no-repeat;
186 |    }
187 |    
188 |    #piece4 {
189 |       background: url("images/frog_01_sm.png") center center no-repeat;
190 |    }
191 |    
192 |    #piece5 {
193 |       background: url("images/frog_06_sm.png") center center no-repeat;
194 |    }
195 |    
196 |    #piece6 {
197 |       background: url("images/frog_04_sm.png") center center no-repeat;
198 |    }
199 | }


--------------------------------------------------------------------------------
/Hands-on Project 4-1/tuba.js:
--------------------------------------------------------------------------------
  1 | /*    JavaScript 6th Edition
  2 |  //    Chapter 4
  3 |  //    Chapter case
  4 | 
  5 |  //    Tuba Farm Equipment
  6 |  //    Variables and functions
  7 |  //    Author: Lisa Kilker
  8 |  //    Date:   April 15, 2018
  9 | 
 10 |  //    Filename: Hands-on Project 4-1
 11 |  */
 12 | 
 13 | // global variables tracking status of each form section 
 14 | var acresComplete = false;
 15 | var cropsComplete = false;
 16 | var monthsComplete = false;
 17 | var fuelComplete = true;
 18 | 
 19 | // global variables referencing sidebar h2 and p elements 
 20 | var messageHeadElement = document.getElementById("messageHead");
 21 | var messageElement = document.getElementById("message");
 22 | 
 23 | // global variables referencing fieldset elements 
 24 | var acresFieldset = document.getElementsByTagName("fieldset")[0];
 25 | var cropsFieldset = document.getElementsByTagName("fieldset")[1];
 26 | var monthsFieldset = document.getElementsByTagName("fieldset")[2];
 27 | var fuelFieldset = document.getElementsByTagName("fieldset")[3];
 28 | 
 29 | // global variables referencing text input elements 
 30 | var monthsBox = document.forms[0].months;
 31 | var acresBox = document.forms[0].acres;
 32 | 
 33 | // verify acres text box entry is a positive number 
 34 | function verifyAcres() {
 35 |    testFormCompleteness();      
 36 | }
 37 | 
 38 | // verify at least one crops checkbox is checked 
 39 | function verifyCrops() {
 40 |    // testFormCompleteness();
 41 |    try {
 42 |     for (var i = 0; i < 7; i++) {
 43 |       if (cropsFieldset.getElementsByTagName("input")[i].checked) {
 44 |         cropsComplete = true;
 45 |         messageElement.innerHTML = ""; //clear previous message
 46 |         testFormCompleteness();
 47 |         i = 8;
 48 |       }
 49 |     }
 50 |       if (i === 7) {
 51 |        throw "Please select at least one crop." ;
 52 |     }
 53 |   }
 54 |     catch(message) {
 55 |       cropsComplete = false;
 56 |       messageHeadElement.innerHTML = ""; //removes heading
 57 |       messageElement.innerHTML = message; //display error message
 58 |     }
 59 | }
 60 | 
 61 | // verify months text box entry is between 1 and 12 
 62 | function verifyMonths() {
 63 |    testFormCompleteness();
 64 | }
 65 | 
 66 | // verify that a fuel option button is selected 
 67 | function verifyFuel() {
 68 |    testFormCompleteness();
 69 | }
 70 | 
 71 | // check if all four form sections are completed 
 72 | function testFormCompleteness() {
 73 |    if (acresComplete && cropsComplete && monthsComplete && fuelComplete) {
 74 |       createRecommendation();
 75 |    }
 76 | }
 77 | 
 78 | // generate tractor recommendation based on user selections 
 79 | function createRecommendation() {
 80 |    if (acresBox.value >= 5000) { // 5000 acres or less, no crop test needed
 81 |       if (monthsBox.value <= 10) { // 10+ months of farming per year
 82 |          messageHeadElement.innerHTML = "E3250";
 83 |          messageElement.innerHTML = "A workhorse for a small farm or a big backyard. A medium- to heavy-duty tractor that can haul whatever you throw at it year-round.";
 84 |       } else { // 9 or fewer months per year
 85 |          messageHeadElement.innerHTML = "E2600";
 86 |          messageElement.innerHTML = "Perfect for a small farm, or just a big backyard. A light- to medium-duty tractor that can make short work of most any chore.";             
 87 |       }
 88 |    } else { // more than 5000 acres
 89 |       if (monthsBox.value <= 9) { // 9 or fewer months per year, no crop test needed
 90 |          messageHeadElement.innerHTML = "W1205";
 91 |          messageElement.innerHTML = "Can't be beat for the general tasks of a large farm. Medium- to heavy-duty muscle that's there then you need it.";
 92 |       } else { // 10+ months of farming per year
 93 |          if (document.getElementById("wheat").checked || document.getElementById("corn").checked && document.getElementById("soy").checked) {
 94 |             messageHeadElement.innerHTML = "W2500";
 95 |             messageElement.innerHTML = "Our heavy-duty tractor designed especially for the needs of wheat, corn, and soy farmers. A reliable piece of equipment that you can turn to all year long.";
 96 |          } else {
 97 |             messageHeadElement.innerHTML = "W2550";
 98 |             messageElement.innerHTML = "Our heavy-duty tractor for general use. A reliable piece of equipment that you can turn to all year long.";
 99 |          }
100 |       }
101 |    }
102 |    if (document.getElementById("E85").checked) { // add suffix to model name based on fuel choice
103 |       messageHeadElement.innerHTML += "E";
104 |    } else if (document.getElementById("biodiesel").checked) {
105 |       messageHeadElement.innerHTML = "B";
106 |    } else {
107 |       messageHeadElement.innerHTML += "D";  
108 |    }
109 | }
110 | 
111 | // create event listeners for all input elements 
112 | function createEventListeners() {
113 |    acresBox.value = ""; // clear acres text box on page load
114 |    monthsBox.value = ""; // clear months text box on page load
115 | 
116 |    if (acresBox.addEventListener) {
117 |      acresBox.addEventListener("input", verifyAcres, false); 
118 |    } else if (acresBox.attachEvent)  {
119 |      acresBox.attachEvent("onchange", verifyAcres);
120 |    }
121 |    
122 |    var cropsBox;
123 |    for (var i = 0; i < 7; i++) {
124 |       cropsBox = cropsFieldset.getElementsByTagName("input")[i];
125 |       cropsBox.checked = false;      
126 |       if (cropsBox.addEventListener) {
127 |         cropsBox.addEventListener("click", verifyCrops, false); 
128 |       } else if (cropsBox.attachEvent)  {
129 |         cropsBox.attachEvent("onclick", verifyCrops);
130 |       }
131 |    }
132 |    
133 |    if (monthsBox.addEventListener) {
134 |      monthsBox.addEventListener("input", verifyMonths, false); 
135 |    } else if (monthsBox.attachEvent)  {
136 |      monthsBox.attachEvent("onchange", verifyMonths);
137 |    }
138 | 
139 |    var fuelBox;
140 |    for (var i = 0; i < 3; i++) {
141 |       fuelBox = fuelFieldset.getElementsByTagName("input")[i];
142 |       fuelBox.checked = false;      
143 |       if (fuelBox.addEventListener) {
144 |         fuelBox.addEventListener("click", verifyFuel, false); 
145 |       } else if (fuelBox.attachEvent)  {
146 |         fuelBox.attachEvent("onclick", verifyFuel);
147 |       }
148 |    }
149 | }
150 | 
151 | // create event listeners when page finishes loading 
152 | if (window.addEventListener) {
153 |    window.addEventListener("load", createEventListeners, false);
154 | } else if (window.attachEvent) {
155 |    window.attachEvent("onload", createEventListeners);
156 | }


--------------------------------------------------------------------------------
/Hands-on Project 1-3/index.htm:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |    <!--
  5 |       JavaScript 6th Edition
  6 |       Chapter 1
  7 |       Hands-on Project 1-3
  8 | 
  9 |       Author: Lisa Kilker
 10 |       Date:   April 7, 2018
 11 | 
 12 |       Filename: index.htm
 13 |    -->
 14 |    <meta charset="utf-8" />
 15 |    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 16 |    <title>Hands-on Project 1-3</title>
 17 |    <link rel="stylesheet" href="styles.css" />
 18 |    <script src="modernizr.custom.05819.js"></script>
 19 | 
 20 | </head>
 21 | 
 22 | <body>
 23 |    <header>
 24 |       <h1>
 25 |          Hands-on Project 1-3
 26 |       </h1>
 27 |    </header>
 28 | 
 29 |    <article>
 30 |       <h2>Order Form</h2>
 31 |       <form>
 32 |         <fieldset id="contactinfo">
 33 |           <legend><span>Contact Information</span></legend>
 34 |           <label for="nameinput">
 35 |             Name
 36 |             <input type="text" id="nameinput" name="name" />
 37 |           </label>
 38 |           <label for="emailinput">
 39 |             Email
 40 |             <input type="email" id="emailinput" name="email" />
 41 |           </label>
 42 |           <label for="phoneinput">
 43 |             Phone
 44 |             <input type="text" id="phoneinput" name="phone" />
 45 |           </label>
 46 |         </fieldset>
 47 |         <fieldset id="reserveinfo">
 48 |           <legend><span>Reservation Information</span></legend>
 49 |           <fieldset id="checkin">
 50 |             <legend>Pickup date</legend>
 51 |             <select id="inmonth" name="inmonth">
 52 |               <option value="01">January</option>
 53 |               <option value="02">February</option>
 54 |               <option value="03">March</option>
 55 |               <option value="04">April</option>
 56 |               <option value="05">May</option>
 57 |               <option value="06">June</option>
 58 |               <option value="07">July</option>
 59 |               <option value="08">August</option>
 60 |               <option value="09">September</option>
 61 |               <option value="10">October</option>
 62 |               <option value="11">November</option>
 63 |               <option value="12">December</option>
 64 |             </select>
 65 |             <select id="indate" name="indate">
 66 |               <option value="01">1</option>
 67 |               <option value="02">2</option>
 68 |               <option value="03">3</option>
 69 |               <option value="04">4</option>
 70 |               <option value="05">5</option>
 71 |               <option value="06">6</option>
 72 |               <option value="07">7</option>
 73 |               <option value="08">8</option>
 74 |               <option value="09">9</option>
 75 |               <option value="10">10</option>
 76 |               <option value="11">11</option>
 77 |               <option value="12">12</option>
 78 |               <option value="13">13</option>
 79 |               <option value="14">14</option>
 80 |               <option value="15">15</option>
 81 |               <option value="16">16</option>
 82 |               <option value="17">17</option>
 83 |               <option value="18">18</option>
 84 |               <option value="19">19</option>
 85 |               <option value="20">20</option>
 86 |               <option value="21">21</option>
 87 |               <option value="22">22</option>
 88 |               <option value="23">23</option>
 89 |               <option value="24">24</option>
 90 |               <option value="25">25</option>
 91 |               <option value="26">26</option>
 92 |               <option value="27">27</option>
 93 |               <option value="28">28</option>
 94 |               <option value="29">29</option>
 95 |               <option value="30">30</option>
 96 |               <option value="31">31</option>
 97 |             </select>
 98 |             <select id="inyear" name="inyear">
 99 |               <option value="2013">2017</option>
100 |               <option value="2014">2018</option>
101 |               <option value="2015">2019</option>
102 |             </select>
103 |           </fieldset>
104 |           <fieldset id="checkout">
105 |             <legend>Dropoff date</legend>
106 |             <select id="outmonth" name="outmonth">
107 |               <option value="01">January</option>
108 |               <option value="02">February</option>
109 |               <option value="03">March</option>
110 |               <option value="04">April</option>
111 |               <option value="05">May</option>
112 |               <option value="06">June</option>
113 |               <option value="07">July</option>
114 |               <option value="08">August</option>
115 |               <option value="09">September</option>
116 |               <option value="10">October</option>
117 |               <option value="11">November</option>
118 |               <option value="12">December</option>
119 |             </select>
120 |             <select id="outdate" name="outdate">
121 |               <option value="01">1</option>
122 |               <option value="02">2</option>
123 |               <option value="03">3</option>
124 |               <option value="04">4</option>
125 |               <option value="05">5</option>
126 |               <option value="06">6</option>
127 |               <option value="07">7</option>
128 |               <option value="08">8</option>
129 |               <option value="09">9</option>
130 |               <option value="10">10</option>
131 |               <option value="11">11</option>
132 |               <option value="12">12</option>
133 |               <option value="13">13</option>
134 |               <option value="14">14</option>
135 |               <option value="15">15</option>
136 |               <option value="16">16</option>
137 |               <option value="17">17</option>
138 |               <option value="18">18</option>
139 |               <option value="19">19</option>
140 |               <option value="20">20</option>
141 |               <option value="21">21</option>
142 |               <option value="22">22</option>
143 |               <option value="23">23</option>
144 |               <option value="24">24</option>
145 |               <option value="25">25</option>
146 |               <option value="26">26</option>
147 |               <option value="27">27</option>
148 |               <option value="28">28</option>
149 |               <option value="29">29</option>
150 |               <option value="30">30</option>
151 |               <option value="31">31</option>
152 |             </select>
153 |             <select id="outyear" name="outyear">
154 |               <option value="2013">2017</option>
155 |               <option value="2014">2018</option>
156 |               <option value="2015">2019</option>
157 |             </select>
158 |           </fieldset>
159 |         </fieldset>
160 |         <fieldset id="submitbutton">
161 |           <input type="submit" value="Submit" onclick="alert('Thanks for your order!');"/>
162 |         </fieldset>
163 |      </form>
164 |    </article>
165 | </body>
166 | </html>
167 | 


--------------------------------------------------------------------------------
/Hands-on Project 11-1/modernizr.custom.65897.js:
--------------------------------------------------------------------------------
1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
2 |  * Build: http://modernizr.com/download/#-input-inputtypes-shiv-cssclasses-load
3 |  */
4 | ;window.Modernizr=function(a,b,c){function v(a){j.cssText=a}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}function A(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)p[c[d]]=c[d]in k;return p.list&&(p.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),p}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)k.setAttribute("type",f=a[d]),e=k.type!=="text",e&&(k.value=l,k.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(k,null).WebkitAppearance!=="textfield"&&k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&&k.checkValidity()===!1:e=k.value!=l)),o[a[d]]=!!e;return o}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k=b.createElement("input"),l=":)",m={}.toString,n={},o={},p={},q=[],r=q.slice,s,t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e});for(var B in n)u(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.input||A(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)u(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},v(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};


--------------------------------------------------------------------------------
/Hands-on Project 11-4/modernizr.custom.65897.js:
--------------------------------------------------------------------------------
1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
2 |  * Build: http://modernizr.com/download/#-input-inputtypes-shiv-cssclasses-load
3 |  */
4 | ;window.Modernizr=function(a,b,c){function v(a){j.cssText=a}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}function A(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)p[c[d]]=c[d]in k;return p.list&&(p.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),p}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)k.setAttribute("type",f=a[d]),e=k.type!=="text",e&&(k.value=l,k.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(k,null).WebkitAppearance!=="textfield"&&k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&&k.checkValidity()===!1:e=k.value!=l)),o[a[d]]=!!e;return o}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k=b.createElement("input"),l=":)",m={}.toString,n={},o={},p={},q=[],r=q.slice,s,t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e});for(var B in n)u(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.input||A(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)u(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},v(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};


--------------------------------------------------------------------------------
/Hands-on Project 6-1/modernizr.custom.65897.js:
--------------------------------------------------------------------------------
1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
2 |  * Build: http://modernizr.com/download/#-input-inputtypes-shiv-cssclasses-load
3 |  */
4 | ;window.Modernizr=function(a,b,c){function v(a){j.cssText=a}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}function A(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)p[c[d]]=c[d]in k;return p.list&&(p.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),p}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)k.setAttribute("type",f=a[d]),e=k.type!=="text",e&&(k.value=l,k.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(k,null).WebkitAppearance!=="textfield"&&k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&&k.checkValidity()===!1:e=k.value!=l)),o[a[d]]=!!e;return o}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k=b.createElement("input"),l=":)",m={}.toString,n={},o={},p={},q=[],r=q.slice,s,t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e});for(var B in n)u(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.input||A(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)u(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},v(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};


--------------------------------------------------------------------------------