Solution for Week 3

Challenges/Week2/app.js

@@ -2,7 +2,17 @@
   //control and return statements
 
 //Prompt user for input and store variable
-
+var $msg = prompt("Hello!");
 //Call function
 
-//Alert user results
+
+if ($msg === "Hello") {
+
+	//Alert user results
+	alert("Hello, world!");}
+
+else {
+	alert("You didn't say hello.");
+
+}
+

Challenges/Week2/index.html

@@ -15,6 +15,7 @@ <h2>My first code challenge!</h2>
     <li>Don't forget to call your script file from this HTML file!  I've created the script tags for you, but you have to add something to it!
   </ol>
 
-  <script></script>
+  <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
+  <script src="app.js"></script>
 </body>
 </html>

Challenges/Week3/index.html

@@ -33,7 +33,7 @@ <h1>Flash Cards</h1>
         </li>
         <li class="flash-card">
             <span class="question">Q: What famous rapper's real name is Chris Bridges?</span>
-            <span class="answer">A: Ludacris</spanp>
+            <span class="answer">A: Ludacris</span>
         </li>
         <li class="flash-card">
             <span class="question">Q: In which country was the singer Mika born?</span>
@@ -43,7 +43,7 @@ <h1>Flash Cards</h1>
 
     <button class="cheat-button">Show All Answers</button>
 
-    <!--Replace this comment with a script tag from https://code.jquery.com/ -->
+    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
 </body>
 </html>

Challenges/Week3/js/app.js

@@ -1,14 +1,42 @@
 //  1.)  Make sure you have a reference to jQuery from a CDN in the index.html file.  
 
 //  2.)  Use a jQuery to hide all of the answers to all the questions.
-$('.answer')
+
+
+var $ans = $('.answer');
+var $flashCard = $('.flash-card');
+
+
+
+$ans.hide();
 
 /*  3.)  Write code to show the answer when hovering over a flash card, and hide it when the mouse leaves. 
     Find the approriate event on the jQuery API page to trigger an action on hover https://api.jquery.com/category/events/
     Hint: You can use "this" inside your jQuery function to reference a selected DOM node.  */
-$('.flash-card')
+
+function showAnswer() { 
+		$flashCard.hover(
+			function() { $(this).children($ans).show(); }
+		);
+
+}
+
+function hideAnswer() { 
+		$flashCard.mouseleave(
+			function() { $ans.hide(); }
+		);
+
+}
+
+
+showAnswer(); 
+hideAnswer();
 
 /*  4.) Use jQuery to find the button element on the page and have it toggle all of the answers on and off when clicked.
     Hint: jQuery has a toggle function that can toggle the visibility of a selected DOM node.
     Bonus:  Change the text of the button using jQuery when you toggle the answers on/off. */  
-$()
+
+
+$("button").click(function() {
+	$ans.show();
+});

Challenges/Week4/ChallengeFiles/index.html

@@ -18,12 +18,12 @@ <h2>The Most Meta Website on this Website.</h2>
                 <div class="onecolumn block">
                     <ul id="menu">
                         <!-- TODO: make these links work -->
-                        <li class="active"><a id="menu_item_home" href="#" title="Click here to go home">Home</a></li>
-                        <li><a id="menu_item_about" href="#" title="Find out all about me">About</a></li>
-                        <li><a id="menu_item_plans" href="#" title="This seems like a secure way to store these">Top Secret Death Star Plans</a></li>
-                        <li><a id="menu_item_cat" href="#" title="A website just isn't a website without cat pictures!">Picture of My Cat</a></li>
-                        <li><a id="menu_item_blog" href="#" title="Welcome to 2005">Blog</a></li>
-                        <li><a id="menu_item_contact" href="#" title="Protip: only people who are mad at you use contact links">Contact</a></li>
+                        <li class="active"><a id="menu_item_home" href="#" onclick="openBlock('home')" title="Click here to go home">Home</a></li>
+                        <li><a id="menu_item_about" href="#" onclick="openBlock('about')" title="Find out all about me">About</a></li>
+                        <li><a id="menu_item_plans" onclick="openBlock('plans')" href="#" title="This seems like a secure way to store these">Top Secret Death Star Plans</a></li>
+                        <li><a id="menu_item_cat" onclick="openBlock('cat')" href="#" title="A website just isn't a website without cat pictures!">Picture of My Cat</a></li>
+                        <li><a id="menu_item_blog" onclick="openBlock('blog')" href="#" title="Welcome to 2005">Blog</a></li>
+                        <li><a id="menu_item_contact" onclick="openBlock('contact')" href="#" title="Protip: only people who are mad at you use contact links">Contact</a></li>
                     </ul>
                 </div>
 
@@ -95,9 +95,9 @@ <h2>The Most Meta Website on this Website.</h2>
 
     <div class="footer">Copyright &copy; 1996 Super Cool Website Solutions, LLC. All Rights Deserved</div>
 
-	<script src="lib/jquery.min.js" type="text/javascript"></script>
+	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
     <!-- TODO: load the tooltip plugin javascript -->
-
+	<script src="lib/tooltip/dist/tooltip.js" type="text/javascript"></script>
     <script type="text/javascript" src="js/main.js"></script>
 </body>
 </html>

Challenges/Week4/ChallengeFiles/js/main.js

@@ -8,12 +8,31 @@ function openBlock (id) {
     block.style.display = "block";
 
     // TODO: remove the "active" class from all of the li elements inside the menu
-    // TODO: add the "active" class to the li element that contains the link that was clicked
+	var menuList = $('#menu li');
+	var menuLink = document.getElementById("menu_item_" + id);
+	menuList.removeClass('active');
+
+
+    // TODO: add the class"active" class to the li element that contains the link that was clicked
+	for (var i =0; i < menuList.length; i++) {
+
+		 menuList[i].className = '';
+		// menuLink.click().className = "active";
+
+	};
+	 menuLink.parentNode.className = "active";
+
 
 }
 
 // TODO: add the "hover" class to the menu items when you hover over them
+	 $( '#menu a').hover(
+		function() { $( this ).addClass('hover'); },
+		function() { $(this).removeClass('hover');
+		}); 
 
 
 // TODO: set up the tooltip plugin on all of the links in the menu
-
+$( "#menu a" ).tooltip({
+  show: { effect: "blind", duration: 800 }
+});

Challenges/Week5/js/app.js

@@ -6,13 +6,30 @@ function addPokemon(name) {
     `).appendTo('#pokemon');
 };
 
+var pokemon;
+var previous = document.getElementById("previous");
+var next = document.getElementById("next");
 
 // 1.)  Use the PokéAPI from http://pokeapi.co along with jQuery's getJSON function to retrieve the first 20 Pokémon.
 // 1.1)  Use the addPokemon function to show each of the Pokémon names that were retrieved.  
 //Hint: Learn how to access resources via the documentation http://pokeapi.co/docsv2/#resource-lists
 
+var pokeAPI = "http://pokeapi.co/api/v2/pokemon";
 
+function getPokemon () {
+	$.getJSON(pokeAPI, function  (data) {
+	poke = data;
+		$.each(poke.results, function(i, item) {
+			addPokemon(item.name);
+			});
+	});
+};
+
+getPokemon();
 // 2.)  Use jQuery to create a click handler for the next and previous buttons.
+
+
+
 // 2.1) Use the "next" and "previous" properties of the pokemon resource object to get the next or previous list of Pokémon.
 // 2.2) When a user clicks next or previous, remove all existing Pokémon from the ul element and add the new list of Pokémon.  
 // 2.3) Use jQuery to disable the next/previous buttons if there are no more Pokémon to retrieve in that direction.  

Challenges/Week5/js/thiswrosk.txt

@@ -0,0 +1,7 @@
+$.getJSON(pokeAPI, function  (data) {
+	poke = data;
+		$.each(poke.results, function(i, item) {
+			addPokemon(item.name);
+			});
+
+});

Challenges/Week6/css/style.css

@@ -74,4 +74,12 @@ ul li {
   .header {
     margin-top: 3em;
   }
-}
+
+
+
+.box { 
+	background:#ccc; 
+	display:block;
+	height:100px;
+	width:100px;
+  }

Challenges/Week6/js/app.js

@@ -4,8 +4,55 @@
 
 //Code Challenge:
 //Create an object named "Box" with 3 properties, height, width, volume.
+
+// var box = $('#output').addClass('box');
+var box = {
+	"height": 1,
+	"width": 1,
+	"volume": 1
+};
+var output = $('#output');
+
 //Create 2 buttons for Height. The first button decreases the Box Height by 1. The second button increases the Box Height by 1.
+
+$("#HeightDecrease" ).click(function() {
+	output.empty();
+	box.height--;
+ });
+
+ $("#HeightIncrease" ).click(function() {
+	output.empty();
+	box.height++;
+ });
+
+ $("#WeightDecrease" ).click(function() {
+	output.empty();
+	box.width--;
+ });
+
+ $("#WeightIncrease" ).click(function() {
+	output.empty();
+	box.width++;
+ });
+
+ $("#VolumeDecrease" ).click(function() {
+	output.empty();
+	box.volume--;
+ });
+
+ $("#VolumeIncrease" ).click(function() {
+	output.empty();
+	box.volume++;
+ });
+
+
 //Create a button that prints the object and its attributes to the page (use the span "output".
+ $('#Print').click(function() {
+	output.append('<b>Height:</b> ' + box.height + '<br>');
+	output.append('<b>Width:</b> ' + box.width + '<br>');
+	output.append('<b>Volume:</b> ' + box.volume + '<br>');
+
+ });
 
 //Extra credit
 //Create interactive buttons to decrease or increase the Width and Volume