Committing items from Pearl's final todo list.

pearlchen · Oct 8, 2012 · f4ad6c6 · f4ad6c6
1 parent 135dce5
commit f4ad6c6
Show file tree

Hide file tree

Showing 13 changed files with 230 additions and 24 deletions.
diff --git a/assets/CirqueDuSoleil.png b/assets/CirqueDuSoleil.png
diff --git a/assets/OneMillionTowers.jpg b/assets/OneMillionTowers.jpg
diff --git a/assets/javascript-the-good-parts-the-definitive-guide.jpg b/assets/javascript-the-good-parts-the-definitive-guide.jpg
diff --git a/assets/jquery-novice-to-ninja-cover.png b/assets/jquery-novice-to-ninja-cover.png
diff --git a/exercises/solutions/complex-form-validation-org.txt b/exercises/solutions/complex-form-validation-org.txt
@@ -0,0 +1,48 @@
+<script>
+function validateForm() {
+
+  // automagically get the typed values from the form
+  var name = document.getElementById("name").value;
+  var address = document.getElementById("address").value;
+  var city = document.getElementById("city").value;
+  var postal = document.getElementById("postal").value;
+
+  /* *** YOUR CODE _BELOW_ HERE **** */
+
+  /* 1. Declare 4 variables named 
+        "nameIsBlank", "addressIsBlank", "cityIsBlank", and "postalIsBlank" 
+        that will each hold Boolean values. */
+
+
+  /* 2a. Use conditional if/else statements on the variables 
+         "name", "address", "city", and "postal" to determine 
+         if each individual field is not blank.
+
+         Update their respective Boolean variables (e.g. "nameIsBlank") 
+         based on their individual if/else statements. */
+
+
+  /* 3. In a final conditional, test ALL FOUR Boolean variables 
+        and alert the proper message. Below are some alerts you can use. */
+
+  alert( "Sorry there are errors. Form fields cannot be blank!" );
+  alert( "Thank you for your order!" );
+
+  /* *** YOUR CODE ^ABOVE^ HERE **** */
+}
+</script>
+
+Name:
+<input type="text" id="name" />
+<br />
+Address:
+<input type="text" id="address" />
+<br />
+City:
+<input type="text" id="city" />
+<br />
+Postal Code:
+<input type="text" id="postal" />
+<br />
+<br />
+<button onclick="validateForm()">Check out now!</button>
diff --git a/exercises/solutions/form-validation-org.txt b/exercises/solutions/form-validation-org.txt
@@ -0,0 +1,24 @@
+<script>
+  function validateForm() {
+
+    // automagically get the typed values from the form
+    var address = document.getElementById("address").value;
+
+    /* 1. Use a conditional if/else statement on the "address" variable 
+       to determine if the address field is (or is not) blank, 
+       then show the proper error or confirmation alert message. */
+
+    /* *** YOUR CODE _BELOW_ HERE **** */
+
+    alert( "Sorry there are errors. Form fields cannot be blank!" );
+    alert( "Thank you for your order!" );
+
+    /* *** YOUR CODE ^ABOVE^ HERE **** */
+  }
+</script>
+
+Address:
+<input type="text" id="address" />
+<br />
+<br />
+<button onclick="validateForm()">Check out now!</button>
diff --git a/exercises/solutions/quantity-check-org.txt b/exercises/solutions/quantity-check-org.txt
@@ -0,0 +1,66 @@
+<script>
+
+  var quantity = 0;   
+
+  function addItem(){ 
+    quantity = quantity + 1;
+    refreshTotal();
+  }
+
+  function removeItem(){
+    /* 1. Use a conditional if or if/else statement on the "quantity" variable 
+          to avoid having negative products. */
+    /* *** YOUR CODE _BELOW_ HERE **** */
+
+    quantity = quantity - 1; 
+
+    /* *** YOUR CODE ^ABOVE^ HERE **** */
+    refreshTotal();
+  }  
+
+  function checkout() {
+    /* 2. Use a conditional if/else statement on the "quantity" variable 
+          to determine if the shopping cart is (or is not) empty, then
+          show the correct popup message. */
+    /* *** YOUR CODE _BELOW_ HERE **** */
+
+    alert( "Sorry, you don't have anything in your cart!" );
+    alert( "Thank you for your order!" );
+
+    /* *** YOUR CODE ^ABOVE^ HERE **** */
+  } 
+
+  function refreshTotal() {       
+
+    // calculate the totalCost with a fixed price of $20.  
+    var totalCost = quantity * 20;
+
+    // then update the quantity text field
+    document.getElementById('updateQuantity').value = quantity;
+
+    // update the total cost text field
+    // 3. A nice to have: Put a dollar sign in front of the total cost
+    /* *** YOUR CODE _BELOW_ HERE **** */
+
+    document.getElementById('updateTotal').value = totalCost;
+
+    /* *** YOUR CODE ^ABOVE^ HERE **** */
+  }
+</script>
+
+<div id="exercise2" style="text-align: center;">
+  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
+  <br />
+  <button onclick="addItem();">Add</button>
+  <button onclick="removeItem();">Remove</button>
+  <br />
+  Quantity
+  <input type="text" id="updateQuantity" value="0" readonly style="text-align:center; width: 20px; border: 1px solid #ccc;"/>
+  <br />
+  <br />
+  Total Cost:
+  <input type="text" id="updateTotal" value="" readonly style="border: 1px solid #ccc;"/>
+  <br />
+  <br />
+  <button onclick="checkout();">Check out now!</button>
+</div>
diff --git a/intro.html b/intro.html
@@ -88,7 +88,7 @@ <h4>Christina Truong</h4>
       <h2>Course Outline</h2>
       <h3 style="margin-top: 1em;">The morning (break @ ~11:30am)</h3>
       <ul>
-        <li><a href="tech_overview.html">Development Environment: 3 tools you need to get started</a></li>
+        <li><a href="tech_overview.html">Development Environment: tools you need to get started</a></li>
         <li><a href="tech_overview.html#slide-4">Technology Overview: Programming and JavaScript</a></li>
         <li><a href="js_quick_start.html">Part 1: Getting started with variables and operators</a></li>
         <li><a href="js_functions.html">Part 2: Functions</a></li>
@@ -103,13 +103,13 @@ <h3 style="margin-top: 1em;">After lunch (break @ ~3:30pm)</h3>
       <h3 style="margin-top: 1em;">Homestretch</h3>
       <ul>
         <li><a href="jquery-indepth.html">jQuery Hands-on</a></li>
-        <li><a href="resources-and-wrapup.html">Where can you go from here?</a></li>
+        <li><a href="resources.html">Where to go from here?</a></li>
       </ul>
     </article>
 
     <!-- SLIDE: Next section -->
     <article class='slide slide-list'>
-      <p class="centered vertically_centered"><a href="tech_overview.html"><img src="assets/next_section_icon.gif" width="230" height="70" alt="Click to go to next section" /></a></p>
+      <p class="centered vertically_centered"><a href="tech_overview.html" target="_top"><img src="assets/next_section_icon.gif" width="230" height="70" alt="Click to go to next section" /></a></p>
     </article>
 
   <!-- **************************************** -->  

diff --git a/js_conditionals.html b/js_conditionals.html
@@ -628,7 +628,7 @@ <h2><div class="smaller">Mini-exercise (10 minutes)</div>
 </div>
 </textarea>
 
-      <p class="solution-link">If you get stuck, <a href="exercises/solutions/quantity-check.txt">click here</a> for  the full solution.</p>
+      <p class="solution-link">If you get stuck, <a href="exercises/solutions/quantity-check.txt">click here</a> for  the full solution.<br />Or if you want to reset, <a href="exercises/solutions/quantity-check-org.txt">click here</a> for the original code.</p>
 
     </article>
 
@@ -675,7 +675,7 @@ <h2><div class="smaller">Mini-exercise (5-10 minutes)</div>
 <button onclick="validateForm()">Check out now!</button>
 </textarea>
 
-      <p class="solution-link">If you get stuck, <a href="exercises/solutions/form-validation.txt">click here</a> for  the full solution.</p>
+      <p class="solution-link">If you get stuck, <a href="exercises/solutions/form-validation.txt">click here</a> for  the full solution.<br />Or if you want to reset, <a href="exercises/solutions/form-validation-org.txt">click here</a> for the original code.</p>
 
     </article>
 
@@ -744,7 +744,7 @@ <h2><div class="smaller">Mini-exercise (15-20 minutes)</div>
 <button onclick="validateForm()">Check out now!</button>
 </textarea>
 
-    <p class="solution-link">If you get stuck, <a href="exercises/solutions/complex-form-validation.txt">click here</a> for  the full solution.</p>
+    <p class="solution-link">If you get stuck, <a href="exercises/solutions/complex-form-validation.txt">click here</a> for  the full solution.<br />Or if you want to reset, <a href="exercises/solutions/complex-form-validation-org.txt">click here</a> for the original code.</p>
 
       <p>
         Bonus: There's always different ways to get to the same end goal. If you're finished early, try out different ways that you can reduce the number of variables and lines of code.

diff --git a/js_objects.html b/js_objects.html
@@ -291,6 +291,33 @@ <h3>Object Methods</h3>
 document.write( "<br />" ); 
 document.write( salePrice3.toFixed(2) );
 
+SCRIPTEND</script>
+
+      </article>
+
+
+          <!-- SLIDE:  -->
+    <article class='slide slide-list'>
+      <h3>Object Methods</h3>
+      <p>Here's another <span class="keyword">METHOD</span> associated with strings.</p>
+      <p>Have you ever created an email newsletter? You usually have a template but you want to replace <code>[First Name]</code> with someone's actual name. Use <code>.replace()</code> for that!</p>
+<textarea class='coder-editor coder-editor-full'>
+<script>
+
+var emailTemplate = "Dear [First Name], thank you for subscribing.";
+
+// uh-oh, let's make this more personal
+document.write( emailTemplate ); 
+
+</script></textarea>
+<script type="coder-solution">SCRIPT
+
+var emailTemplate = "Dear [First Name], thank you for subscribing.";
+
+// uh-oh, let's make this more personal
+var emailFinal = emailTemplate.replace("[First Name]", "Pearl") 
+document.write( emailFinal ); 
+
 SCRIPTEND</script>
 
       </article>

diff --git a/lunch_break.html b/lunch_break.html
@@ -60,25 +60,27 @@ <h1>Regroup Before Lunch</h1>
     <!-- new slide -->
     <article class='slide slide-subhead'>
       <h1>Lunch time!</h1>
-      <p>Come back for 2:00pm</p>
+      <p>Come back in an hour.</p>
+      <p style="width: 80%; margin: auto auto; font-size: 1.5em; padding-top: 30px; color: #666;">While you're resting your brain, check out the next couple of slides for great examples of JavaScript.</p>
+      <p style="width: 80%; margin: auto auto; font-size: 1.2em; padding-top: 30px; color: #666;">(Even try turning off your JavaScript to see how boring the web gets.)</p>
     </article>
 
     <!-- SLIDE: ARCADE FIRE VIDEO -->
     <article class='slide slide-list'>
       <h2>Some JavaScript Inspiration...</h2>
-      <p>
-        What kind of crazy stuff can you do with HTML5 and JavaScript?
-      </p>
+      <p>(Note: Requires use of your laptop camera for head tracking!)</p>
       <p align="center">
-        <a href="http://www.chromeexperiments.com/arcadefire/" target="_blank">
-          <img src="assets/Chrome-Experiments-Arcade-Fire.gif" width="700" height="472" alt="Arcade Fire's The Wilderness Downtown" class="centered" /></a></p>
-      <p class="hint">
-        Arcade Fire's interactive music video:
-        <a href="http://www.chromeexperiments.com/arcadefire/" target="_blank">The Wilderness Downtown</a>.<br>
-        <span class="sidenote">
-          (Dynamic content, Canvas 3D, Google Maps, drawing tools, and more!)
-        </span>
-      </p>
+        <a href="http://www.movikantirevo.com/" target="_blank">
+          <img src="assets/CirqueDuSoleil.png" width="672" height="567" alt="Cirque du Soleil's Movi Kanti Revo" class="centered" /></a></p>
+    </article>
+
+    <!-- SLIDE: ARCADE FIRE VIDEO -->
+    <article class='slide slide-list'>
+      <h2>Some JavaScript Inspiration...</h2>
+      <p>And check out <a href="http://www.creativebloq.com/web-design-tips/examples-of-javascript-1233964" target="_blank">30 top examples of JavaScript</a> compiled by Creative Bloq.</p>
+      <p align="center">
+        <a href="http://www.creativebloq.com/web-design-tips/examples-of-javascript-1233964" target="_blank">
+          <img src="assets/OneMillionTowers.jpg" width="580" height="326" alt="NFB's One Millionth Tower" class="centered" /></a></p>
     </article>
 
     <!-- SLIDE:  -->

diff --git a/resources.html b/resources.html
@@ -52,12 +52,51 @@ <h1>Resources</h1>
         <p>Where to go from here?</p>
       </article>
 
+      <article class='slide slide-list'>
+        <h2>Cheatsheets and references</h2>
+        <p>From today's slides:</p>
+        <ul>
+          <li><a href="http://www.scribd.com/doc/19457597/Javascript-Methods" target="_blank">Javascript methods cheatsheet</a></li>
+          <li><a href="http://www.addedbytes.com/download/javascript-cheat-sheet-v1/png/" target="_blank">another JavaScript cheatsheet</a></li>
+          <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript" target="_blank">JavaScript on the Mozilla Developer Network</a><br />
+            <span class="sidenote">(or same content but searchable via <a href="http://dochub.io/#javascript/" target="_blank">Dochub.io</a>)</span></li>
+          <li><a href="https://developer.mozilla.org/en-US/docs/DOM/document" target="_blank">DOM on the Mozilla Developer Network</a><br />
+            <span class="sidenote"> (or same content but searchable via <a href="http://dochub.io/#dom/" target="_blank">Dochub.io</a>)</span></li>
+        </ul>
+      </article>
+
      <!-- SLIDE:  -->
       <article class='slide slide-list'>
-        <h2>Resources</h2>
-        <p>[Coming soon]</p>
+        <h2>Books</h2>
+        <p><strong><em>JavaScript: The Good Parts</em></strong> by Douglas Crockford</p>
+        <p>Watch <a href="https://www.youtube.com/watch?feature=player_embedded&v=hQVTIJBZook#t=20s" target="_blank">this 1-hour video</a> for a sampler, then pick up <a href="http://shop.oreilly.com/product/9780596517748.do" target="_blank">the book</a>.</p>
+        <p class="centered"><img src="assets/javascript-the-good-parts-the-definitive-guide.jpg" alt="JavaScript: The Good Parts versus The Definitive Guide" /></p>
       </article>   
 
+      <article class='slide slide-list'>
+        <h2>Books</h2>
+        <p><strong><em>jQuery: Novice to Ninja</em></strong> by Earle Castledine and Craig Sharkie</p>
+        <p>Make sure to get the <a href="http://www.sitepoint.com/books/jquery2/" target="_blank">2nd edition book</a>.</p>
+        <p class="centered"><img src="assets/jquery-novice-to-ninja-cover.png" alt="jQuery: Novice to Ninja cover" /></p>
+      </article>
+
+      <article class='slide slide-list'>
+        <h2>Books</h2>
+        <p class="centered" style="margin-top: 80px;">...and lots more (free ones) at <a href="http://jsbooks.revolunet.com/" target="_blank">jsbooks.revolunet.com</a>.</p>
+      </article>
+
+      <article class='slide slide-list'>
+        <h2>Online tutorials or courses</h2>
+        <ul>
+          <li><a href="http://www.codecademy.com/tracks/javascript" target="_blank">Codecademy</a></li>
+          <li><a href="http://teamtreehouse.com/library#topic-group-9" target="_blank">Treehouse</a></li>
+          <li><a href="http://jqfundamentals.com/chapter/jquery-basics" target="_blank">jQuery Fundamentals</a></li>
+          <li><a href="http://stage.learn.jquery.com/about-jquery/" target="_blank">jQuery.com ~Learning</a></li>
+          <li><span class="sidenote">I also maintain <a href="https://docs.google.com/document/d/1YagVPVyOSL7WxqVDqHWyE8SaHcUBmLJLsa6muMNAejY/edit" target="_blank">another list in a Google Doc</a> with links that may or may not be specific to JavaScript</span></li>
+        </ul>
+      </article>
+
+
       <article class='slide slide-title'>
       <div class="workshop_title">
         <h1>Introduction to JavaScript</h1>

diff --git a/tech_overview.html b/tech_overview.html
@@ -52,7 +52,7 @@ <h2>I'm a H2 heading</h2>
     <!-- SLIDE: Development Environment -->
     <article class='slide slide-subhead'>
       <h1>Development Environment</h1>
-      <p>3 tools you need to get started</p>
+      <p><strike style="color: #ccc;">&nbsp;3&nbsp;</strike> 2 tools you need to get started</p>
     </article>
 
     <!-- SLIDE: Web Browser -->
@@ -105,7 +105,7 @@ <h2>2. Code Editor</h2>
     <!-- SLIDE: FTP -->
     <article class='slide slide-list'>
       <h2>3. File Transfer Program (FTP)</h2>
-      <p>
+      <p style="color: #999;">
         Do you already have your own hosted website? FTP software will let you copy the files you work on today to somewhere where the rest of the world can see them!
       </p>
       <div class="centered contains_sidebyside_icons">
@@ -117,7 +117,7 @@ <h2>3. File Transfer Program (FTP)</h2>
       <br />
       <br />
       <br />
-      <p class="sidenote centered">
+      <p class="sidenote centered" style="color: #999;">
         Again, there are many, many free and paid options.
         <br />
         <a href="http://filezilla-project.org/" target="_blank">FileZilla</a>