week2 challenge

Challenges/Week2/app.js

@@ -1,8 +1,11 @@
-//create function
-  //control and return statements
+function hello(input){//create function
+  if(input==="Hello")
+    return "Hello World!";
+  else return "Incorrect input!";
+}//control and return statements
 
-//Prompt user for input and store variable
+var user_enter=prompt("Please enter a word!");//Prompt user for input and store variable
 
-//Call function
+var i=hello(user_enter);//Call function
 
-//Alert user results
+alert(i);//Alert user results

Challenges/Week2/index.html

@@ -15,6 +15,6 @@ <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="app.js"></script>
 </body>
 </html>

Challenges/Week3/index.html

@@ -13,7 +13,7 @@ <h1>Flash Cards</h1>
         </li>
         <li class="flash-card">
             <span class="question">Q: What TV show featured the fictional "The Cobra Lodge" fraternity?</span>
-            <span class="answer">A: Mama's Family</spanp>
+            <span class="answer">A: Mama's Family</span>
         </li>
         <li class="flash-card">
             <span class="question">Q: What album earned the Dixie Chicks a Grammy Award in 2007?</span>
@@ -25,25 +25,26 @@ <h1>Flash Cards</h1>
         </li>
         <li class="flash-card">
             <span class="question">Q: An episode of what sitcom spawned the phrase "jumped the shark"?</span>
-            <span class="answer">A: Happy Days</spanp>
+            <span class="answer">A: Happy Days</span>
         </li>
         <li class="flash-card">
             <span class="question">Q: Who was the first female comic to be called over to the couch by Johnny Carson?</span>
             <span class="answer">A: Ellen DeGeneres</span>
         </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>
             <span class="answer">A: Lebanon</span>
         </li>
     </ul>
 
-    <button class="cheat-button">Show All Answers</button>
-    
+    <button class="cheat-button"><span>Show All Answers</span></button>
+
     <!--Replace this comment with a script tag from https://code.jquery.com/ -->
+	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
 </body>
-</html>
+</html>

Challenges/Week3/js/app.js

@@ -1,14 +1,33 @@
-//  1.)  Make sure you have a reference to jQuery from a CDN in the index.html file.  
+//  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')
 
-/*  3.)  Write code to show the answer when hovering over a flash card, and hide it when the mouse leaves. 
+$('.answer').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')
+
+$('.flash-card').hover(
+  function(){$(this).children('.answer').show();},
+  function(){$(this).children('.answer').hide();}
+);
+
 
 /*  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. */  
-$()
+    Bonus:  Change the text of the button using jQuery when you toggle the answers on/off. */
+$('.cheat-button').click(function(){
+
+  $('.answer').toggle();
+  buttonText();
+
+});
+
+var buttonText= function(){
+  if($('.cheat-button').text()==='Show All Answers'){
+    $('.cheat-button').text('Hide All Answers');
+  }else{
+    $('.cheat-button').text('Show All Answers');
+  }
+}

Challenges/Week4/ChallengeFiles/index.html

@@ -3,6 +3,7 @@
 <head>
     <link rel="stylesheet" href="lib/framework.css" type="text/css" />
     <!-- TODO: load the tooltip CSS file -->
+    <link rel="stylesheet" href="lib/tooltip/dist/css/tooltip.css" type="text/css" />
     <link rel="stylesheet" href="css/main.css" type="text/css" />
 	<title>Super Awesome Website Place</title>
 </head>
@@ -26,19 +27,18 @@ <h2>The Most Meta Website on this Website.</h2>
                         <li><a id="menu_item_contact" href="#" title="Protip: only people who are mad at you use contact links">Contact</a></li>
                     </ul>
                 </div>
-
                 <div id="main_content">
                     <div class="twocolumn block" style="display: block" id="home">
                         <p>First off, congratulations on getting this far. That's pretty neat just in itself. Go ahead, pat yourself on the back.</p>
-                        
+
                         <p><img src="http://i.imgur.com/t0kLc0c.gif" /></p>
 
                         <p>Okay, enough of that. We have work to do.</p>
 
                         <p>You'll notice that there are links all up on the left side there. That's the navigation for this super cool website. The links don't work, though! HALP</p>
 
                         <p><strong>CHALLENGE ONE, Page navigation using the DOM:</strong> <br /> I have a function in my javascript that will show a content block if you pass it the ID of that block. For example, <strong>showBlock("home")</strong> will show this content block. How do I get the links to actually call that function when the user clicks on them?</p>
-                        
+
                         <p><strong>CHALLENGE TWO, Highlighting the button:</strong> <br /> I created a class, <strong>.active</strong> which will make the current button highlighted when that item is open (the first item is set up by default). When you click on other buttons, it needs to remove the .active class from the old button and add it to the new one. I can probably adapt the code I have for changing the visible content . . . somehow . . . </p>
 
                         <p><strong>CHALLENGE THREE, Button hovers:</strong> <br />I want the menu buttons to change color when you put the mouse over them. I created a class, <strong>.hover</strong> which does that, but I don't know how to actually make the links have that class. I think jQuery could probably help with this, couldn't it?</p>
@@ -89,14 +89,15 @@ <h2>The Most Meta Website on this Website.</h2>
             </div>
 
         </div>
-        
+
         <div class="clear"></div>
     </div>
-    
+
     <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>
     <!-- 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>

Challenges/Week4/ChallengeFiles/js/main.js

@@ -1,3 +1,4 @@
+var list=document.getElementById("menu");
 function openBlock (id) {
     var block = document.getElementById(id);
     var blocks = document.getElementById("main_content").getElementsByTagName("div");
@@ -6,14 +7,29 @@ function openBlock (id) {
         blocks[y].style.display = "none";
     }
     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 listActive=list.getElementsByClassName("active");
+        listActive[0].removeAttribute("class")
 
+    // TODO: add the "active" class to the li element that contains the link that was clicked
+        var anchor= document.getElementById("menu_item_"+id);
+        var listClicked= anchor.parentNode;
+        listClicked.className="active";
 }
 
-// TODO: add the "hover" class to the menu items when you hover over them
+//Add a onclick event to all the link
+var link=document.querySelectorAll("#menu li a");
+for(i=0;i<link.length;i++){
+  link[i].onclick=function(){
+    var blockId=this.id.substring(10);//The id which was clicked is menu_item_+blockId
+    openBlock(blockId);
+  };
 
+  // TODO: add the "hover" class to the menu items when you hover over them
+  link[i].onmouseover=function(){this.className="hover";};
+  link[i].onmouseout=function(){this.removeAttribute("class");};
+}
 
 // TODO: set up the tooltip plugin on all of the links in the menu
-
+$('#menu li a').tooltip();

Challenges/Week5/index.html

@@ -11,15 +11,15 @@
 
     <div id="main-content">
         <ul id="pokemon">
-            
+
         </ul>
         <button id="previous" class="btn">Previous</button>
         <button id="next" class="btn">Next</button>
     </div>
 
-    
+
     <img id="pikachu" class="hvr-hang" src="images/pikachu.png" alt="Pikachu">
-    <script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
+    <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>
+</html>

Challenges/Week5/js/app.js

@@ -1,25 +1,121 @@
+
 function addPokemon(name) {
     $(`
-        <li class="poke-card">
-            <h3 class="name">${name}</h3>
-        </li>
-    `).appendTo('#pokemon');
+         <li class="poke-card">
+        <h3 class="name">${name}</h3>
+         </li>
+     `).appendTo('#pokemon');
+
+
 };
 
+//The URL of the first 20 Pokémon resource list
+var firstListURL="http://pokeapi.co/api/v2/pokemon";
+var previousListURL="";
+var nextListURL="";
+//A function to show the 20 names on the page
+function showPokemon(pokemonAPIURL){
+  //Get the resorce list from the server
+  $.getJSON(pokemonAPIURL,function(data){
+    $.each(data.results,function(i,pokemon){
+    addPokemon(pokemon.name);
+    });//End each
+    //Get the URL of the next 20 Pokémon resource list
+    nextListURL= data.next;
+    //Get the URL of the previous 20 Pokémon resource list
+    previousListURL=data.previous;
+    //When you click on a name, hide all the other names and show the details about that Pokémon
+    $("#pokemon li h3").click(function(){
+      //Get the item which is clicked
+      var $listItem=$(this).parent();
+      //Call showDetail function to show the details
+      showDetail($listItem);
+    });
+  });//End get the resorce list from the server
+}//End function
+
+//A function to show the details
+function showDetail(listItem){
+  //Hide the other names
+  listItem.siblings().hide();
+  //Hide the previous and next buttons
+  listItem.parent().siblings().hide();
+  //Create the elements to show the details
+  var $basicExperience= $("<h4></h4>").attr("id","basicExperience");
+  var $height= $("<h4></h4>").attr("id","height");
+  var $weight= $("<h4></h4>").attr("id","weight");
+  //Create a button to go back to the list
+  var $button= $("<button></button").text("Go Back").addClass("btn");
+  $button.click(function(){
+    //Remove the elements when click the go back button
+    listItem.children("h4,button").remove();
+    //Show the other names
+    listItem.siblings().show();
+    //Show the previous and next button
+    listItem.parent().siblings().show();
+  });
+  listItem.append($basicExperience,$height,$weight,$button);
+  //Call the setItemText function to set the elements' text
+  setItemText(listItem);
+}
+
+function setItemText(item){
+  //Get the name of the Pokémon
+  var $getPokemonName=item.children(".name").text();
+  var pokemonURL="http://pokeapi.co/api/v2/pokemon/"+$getPokemonName+"/";
+  //Get the pokemon details from the server
+  $.getJSON(pokemonURL,function(data){
+    //Set the elements' text
+    $("#basicExperience").text("Basic Experience: "+data.base_experience);
+    $("#height").text("Height: "+data.height);
+    $("#weight").text("Weight: "+data.weight);
+  });//End get the pokemon from the server
+}
+
+//Call the showPokemon function to show the first 20  name
+showPokemon(firstListURL);
+//Show the next 20 pokemon's name when clicking the next button
+$("#next").click(function(){
+  // Disable the next buttons if there are no more Pokémon to retrieve
+  if(nextListURL==null){
+    $("#next").attr("disable",true);
+    alert("No more Pokémon to retrieve in that direction.");
+  }
+  else{
+    //Delete the current 20 names and show the next 20 names
+    $('#pokemon').empty();
+    showPokemon(nextListURL);
+  }
+});
+//Show the previous 20 names when clicking the previous button
+$("#previous").click(function(){
+  //Disable the previous buttons if there are no more Pokémon to retrieve
+  if(previousListURL==null){
+    $("#previous").attr("disable",true);
+    alert("No more Pokémon to retrieve in that direction.");
+  }else{
+    //Delete the current 20 names and show the previous 20 names
+    $('#pokemon').empty();
+    showPokemon(previousListURL);
+  }
+});
+
 
 // 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.  
+
+// 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
 
 
 // 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.  
+// 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.
 
 /*  Super Awesome Bonus!
     When you click on a Pokémon name, hide all the names and show a larger card that contains details about that Pokémon such as their sprite (picture), name,
     type or anything else you would like to include.  Add a way to go back to the list when your're done looking at the detail.
 
-    Be creative, you can style/arrange the detail information however you like! 
-*/
+    Be creative, you can style/arrange the detail information however you like!
+*/