diff --git a/Challenges/Week2/app.js b/Challenges/Week2/app.js index 146acc5..75b7a6c 100644 --- a/Challenges/Week2/app.js +++ b/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 diff --git a/Challenges/Week2/index.html b/Challenges/Week2/index.html index afe8e37..2f1bae7 100644 --- a/Challenges/Week2/index.html +++ b/Challenges/Week2/index.html @@ -15,6 +15,6 @@

My first code challenge!

  • 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! - + diff --git a/Challenges/Week3/index.html b/Challenges/Week3/index.html index 2ee5d5a..3e84b2a 100644 --- a/Challenges/Week3/index.html +++ b/Challenges/Week3/index.html @@ -13,7 +13,7 @@

    Flash Cards

  • Q: What TV show featured the fictional "The Cobra Lodge" fraternity? - A: Mama's Family + A: Mama's Family
  • Q: What album earned the Dixie Chicks a Grammy Award in 2007? @@ -25,7 +25,7 @@

    Flash Cards

  • Q: An episode of what sitcom spawned the phrase "jumped the shark"? - A: Happy Days + A: Happy Days
  • Q: Who was the first female comic to be called over to the couch by Johnny Carson? @@ -33,7 +33,7 @@

    Flash Cards

  • Q: What famous rapper's real name is Chris Bridges? - A: Ludacris + A: Ludacris
  • Q: In which country was the singer Mika born? @@ -41,9 +41,10 @@

    Flash Cards

    • - - + + + - \ No newline at end of file + diff --git a/Challenges/Week3/js/app.js b/Challenges/Week3/js/app.js index 432dc9b..7c40097 100644 --- a/Challenges/Week3/js/app.js +++ b/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. */ -$() \ No newline at end of file + 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'); + } +} \ No newline at end of file diff --git a/Challenges/Week4/ChallengeFiles/index.html b/Challenges/Week4/ChallengeFiles/index.html index ae23442..513a961 100644 --- a/Challenges/Week4/ChallengeFiles/index.html +++ b/Challenges/Week4/ChallengeFiles/index.html @@ -3,6 +3,7 @@ + Super Awesome Website Place @@ -26,11 +27,10 @@

    The Most Meta Website on this Website.

  • Contact
    • -

    First off, congratulations on getting this far. That's pretty neat just in itself. Go ahead, pat yourself on the back.

    - +

    Okay, enough of that. We have work to do.

    @@ -38,7 +38,7 @@

    The Most Meta Website on this Website.

    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

    CHALLENGE ONE, Page navigation using the DOM:
    I have a function in my javascript that will show a content block if you pass it the ID of that block. For example, showBlock("home") will show this content block. How do I get the links to actually call that function when the user clicks on them?

    - +

    CHALLENGE TWO, Highlighting the button:
    I created a class, .active 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 . . .

    CHALLENGE THREE, Button hovers:
    I want the menu buttons to change color when you put the mouse over them. I created a class, .hover 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?

    @@ -89,14 +89,15 @@

    The Most Meta Website on this Website.

    - +
    - +
    Copyright © 1996 Super Cool Website Solutions, LLC. All Rights Deserved
    - + + diff --git a/Challenges/Week4/ChallengeFiles/js/main.js b/Challenges/Week4/ChallengeFiles/js/main.js index 1655dc3..0b469e5 100644 --- a/Challenges/Week4/ChallengeFiles/js/main.js +++ b/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 - + Pikachu - + - \ No newline at end of file + diff --git a/Challenges/Week5/js/app.js b/Challenges/Week5/js/app.js index 1161a62..f0d7372 100644 --- a/Challenges/Week5/js/app.js +++ b/Challenges/Week5/js/app.js @@ -1,25 +1,121 @@ + function addPokemon(name) { $(` -
  • -

    ${name}

    -
    • - `).appendTo('#pokemon'); +
  • +

    ${name}

    +
    • + `).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= $("

    ").attr("id","basicExperience"); + var $height= $("

    ").attr("id","height"); + var $weight= $("

    ").attr("id","weight"); + //Create a button to go back to the list + var $button= $("