diff --git a/Challenges/Week2/app.js b/Challenges/Week2/app.js index 146acc5..371694d 100644 --- a/Challenges/Week2/app.js +++ b/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."); + +} + diff --git a/Challenges/Week2/index.html b/Challenges/Week2/index.html index afe8e37..f035ea3 100644 --- a/Challenges/Week2/index.html +++ b/Challenges/Week2/index.html @@ -15,6 +15,7 @@

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..d6187ae 100644 --- a/Challenges/Week3/index.html +++ b/Challenges/Week3/index.html @@ -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? @@ -43,7 +43,7 @@

    Flash Cards

    - + \ No newline at end of file diff --git a/Challenges/Week3/js/app.js b/Challenges/Week3/js/app.js index 432dc9b..a7d60f2 100644 --- a/Challenges/Week3/js/app.js +++ b/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. */ -$() \ No newline at end of file + + +$("button").click(function() { + $ans.show(); +}); \ No newline at end of file diff --git a/Challenges/Week4/ChallengeFiles/index.html b/Challenges/Week4/ChallengeFiles/index.html index ae23442..e7636e8 100644 --- a/Challenges/Week4/ChallengeFiles/index.html +++ b/Challenges/Week4/ChallengeFiles/index.html @@ -18,12 +18,12 @@

    The Most Meta Website on this Website.

    @@ -95,9 +95,9 @@

    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..253a2b4 100644 --- a/Challenges/Week4/ChallengeFiles/js/main.js +++ b/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 } +}); diff --git a/Challenges/Week5/js/app.js b/Challenges/Week5/js/app.js index 1161a62..ddefad7 100644 --- a/Challenges/Week5/js/app.js +++ b/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. diff --git a/Challenges/Week5/js/thiswrosk.txt b/Challenges/Week5/js/thiswrosk.txt new file mode 100644 index 0000000..e72f1c9 --- /dev/null +++ b/Challenges/Week5/js/thiswrosk.txt @@ -0,0 +1,7 @@ +$.getJSON(pokeAPI, function (data) { + poke = data; + $.each(poke.results, function(i, item) { + addPokemon(item.name); + }); + +}); diff --git a/Challenges/Week6/css/style.css b/Challenges/Week6/css/style.css index 748bdf3..a52973e 100644 --- a/Challenges/Week6/css/style.css +++ b/Challenges/Week6/css/style.css @@ -74,4 +74,12 @@ ul li { .header { margin-top: 3em; } -} + + + +.box { + background:#ccc; + display:block; + height:100px; + width:100px; + } diff --git a/Challenges/Week6/js/app.js b/Challenges/Week6/js/app.js index 8234858..7293d9e 100644 --- a/Challenges/Week6/js/app.js +++ b/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('Height: ' + box.height + '
    '); + output.append('Width: ' + box.width + '
    '); + output.append('Volume: ' + box.volume + '
    '); + + }); //Extra credit //Create interactive buttons to decrease or increase the Width and Volume \ No newline at end of file